/* Last in the shell, so the mobile contract wins over the legacy chapter
   grids. Desktop, the opening film and the original media are untouched. */
@media(max-width:767px){
 :root[data-display-mode=dynamic]{--mobile-nav-top:calc(8px + env(safe-area-inset-top,0px));--mobile-nav-clearance:calc(104px + env(safe-area-inset-top,0px));--mobile-nav-surface:#171b1c;--mobile-rule:#eee3cf52;background:#0b1015;scroll-padding-top:0}
 :root[data-display-mode=dynamic]:has(.stream-nav[data-nav-chapter=agents]){--mobile-nav-surface:#210e12}
 :root[data-display-mode=dynamic]:has(.stream-nav[data-nav-chapter=workflows]){--mobile-nav-surface:#21160f}
 :root[data-display-mode=dynamic] body{background:#0b1015}
 /* Present the real loading state on the same dark canvas, before the async
    chapter styles and records arrive. No skeleton data or fabricated progress. */
 :root[data-display-mode=dynamic] #workspace:not(:has(.dynamic-chapter)){min-height:100svh;background:#0b1015;color:#eae6df}
 :root[data-display-mode=dynamic] #workspace:not(:has(.dynamic-chapter))>footer,
 :root[data-display-mode=dynamic] #route-view:not(:has(.dynamic-chapter))>h2{display:none}
 :root[data-display-mode=dynamic] #workspace-scope-bar{position:fixed;top:var(--mobile-nav-top);left:max(16px,env(safe-area-inset-left,0px));right:auto;transform:none;width:auto;max-width:calc(100% - 86px);padding:0;margin:0;background:transparent;gap:12px;z-index:1001}
 :root[data-display-mode=dynamic] #workspace-scope-bar:has(p:not([hidden])){max-width:calc(100% - 86px);align-items:flex-start}
 :root[data-display-mode=dynamic] #workspace-scope-bar p{max-width:100%;min-width:0;padding:10px 12px;background:#15232c;color:#e2e8e7;border:1px solid #b8cbd03d;border-radius:0;font-size:13px;line-height:1.7}
 /* One matte rail, not two floating glass bubbles. The icon controls retain
    their accessible names and 44px targets; no new navigation copy. */
 :root[data-display-mode=dynamic] body::before{content:'';position:fixed;inset:0 0 auto;height:calc(60px + env(safe-area-inset-top,0px));background:var(--mobile-nav-surface);border-bottom:1px solid var(--mobile-rule);z-index:999;pointer-events:none}
 :root[data-display-mode=dynamic] .stream-nav[data-nav-chapter]{top:var(--mobile-nav-top);right:max(16px,env(safe-area-inset-right,0px));--nav-ink:#eee5d6;--nav-surface:var(--mobile-nav-surface);--nav-edge:var(--mobile-rule);--nav-hover:#eee3cf14}
 :root[data-display-mode=dynamic] .stream-nav>.stream-nav-toggle,
 :root[data-display-mode=dynamic] #workspace-scope-bar .quick-actions-toggle{width:44px;min-width:44px;height:44px;min-height:44px;border:0;border-radius:0;background:transparent;color:#eee5d6;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
 :root[data-display-mode=dynamic] #stream-menu,
 :root[data-display-mode=dynamic] #workspace-scope-bar .quick-actions-menu{background:var(--mobile-nav-surface);color:#eee5d6;border:1px solid var(--mobile-rule);border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
 :root[data-display-mode=dynamic] .dynamic-chapter.demo-chapter{--line:var(--mobile-rule);display:flex!important;align-items:stretch;min-height:0;padding:var(--mobile-nav-clearance) 22px 32px!important;scroll-margin-top:0;gap:0;overflow:clip}
 :root[data-display-mode=dynamic] .dynamic-chapter.demo-chapter.stream-layout-workflows{--night-bg:#24170f;--accent:#e3c99d}
 :root[data-display-mode=dynamic] .dynamic-chapter.demo-chapter.stream-layout-agents{--night-bg:#210e12;--accent:#e0c6b1;background:var(--night-bg)}
 :root[data-display-mode=dynamic] .demo-chapter>.stream-chapter-body,
 :root[data-display-mode=dynamic] .demo-chapter :is([tabindex="-1"],.night-step,.night-agent-entry,.night-event){scroll-margin-top:var(--mobile-nav-clearance)}

 /* The frame belongs to the heading, not the entire content-sized chapter.
    Its aspect ratio comes from the source metadata; contain now fills a
    compact cinematic frame, rather than adding bars to a screen-tall stage. */
 :root[data-display-mode=dynamic] .demo-chapter .demo-heading{display:flex!important;position:relative!important;inset:auto;width:100%;flex:0 0 auto;flex-direction:column;align-items:stretch;min-height:0!important;margin:0 0 32px!important;gap:26px;isolation:isolate}
 :root[data-display-mode=dynamic] .demo-chapter .demo-title{order:0;width:100%!important;max-width:none!important;margin:0!important;text-align:left!important;transform:none!important;opacity:1!important}
 :root[data-display-mode=dynamic] .dynamic-chapter.demo-chapter .demo-media{position:relative;inset:auto;order:1;z-index:0;flex:none;width:100%;max-width:none;aspect-ratio:var(--demo-media-ratio,1280 / 722);max-height:430px;margin:0;border:0;border-radius:0;box-shadow:none;opacity:1;overflow:hidden}
 :root[data-display-mode=dynamic] .demo-chapter .demo-media::after{content:'';position:absolute;inset:0;border:1px solid #eee3cf26;pointer-events:none;z-index:2}
 :root[data-display-mode=dynamic] .demo-chapter .demo-parallax-media{position:absolute;inset:0;width:100%;height:100%;transform:none!important;will-change:auto!important}
 :root[data-display-mode=dynamic] .dynamic-chapter.demo-chapter .demo-parallax-media :is(.chapter-video-stage,video),
 :root[data-display-mode=dynamic] .demo-chapter .demo-parallax-media>img,
 :root[data-display-mode=dynamic] .demo-chapter .chapter-video-fallback{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;aspect-ratio:auto!important}
 :root[data-display-mode=dynamic] .demo-chapter .demo-shade{display:none}
 :root[data-display-mode=dynamic] .demo-chapter .demo-english{font-size:clamp(46px,12.5vw,86px)!important;line-height:1.02;margin-bottom:20px;overflow-wrap:normal}
 :root[data-display-mode=dynamic] .demo-chapter.stream-layout-agents .demo-english{color:#d5b0a4}
 :root[data-display-mode=dynamic] .demo-chapter .demo-eyebrow{font-size:12px;line-height:1.7;letter-spacing:.08em;color:#d9d9cc}
 :root[data-display-mode=dynamic] .demo-chapter .demo-description{font-size:15px;line-height:1.85;max-width:34em;color:#e0e0da}
 :root[data-display-mode=dynamic] .demo-chapter .demo-setting-note{order:2;width:100%;margin:0;padding-left:18px}

 /* Editorial rows keep real node links and disclosure semantics. Status is
    aligned right, not a glowing point or a second box within the row. */
 :root[data-display-mode=dynamic] .demo-chapter .night-workflow-line{grid-template-columns:minmax(0,1fr);gap:0;padding:0}
 :root[data-display-mode=dynamic] .demo-chapter .night-step{display:grid;grid-template-columns:28px minmax(0,1fr) minmax(84px,.85fr);align-items:baseline;gap:8px 10px;padding:18px 0!important;min-height:0;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0;background:transparent;box-shadow:none}
 :root[data-display-mode=dynamic] .demo-chapter .night-step:is(.is-current,.is-selected){background:transparent;border-color:var(--line)!important;color:var(--text)}
 :root[data-display-mode=dynamic] .demo-chapter .night-step::after{display:none}
 :root[data-display-mode=dynamic] .demo-chapter .night-step-number{grid-column:1;grid-row:1;height:auto;display:block;text-align:center;font-size:22px;line-height:1.4}
 :root[data-display-mode=dynamic] .demo-chapter .night-step-number em{display:none}
 :root[data-display-mode=dynamic] .demo-chapter .night-step-point{display:none}
 :root[data-display-mode=dynamic] .demo-chapter .night-step strong{grid-column:2;grid-row:1;min-width:0;margin:0;font-size:18px;line-height:1.5;word-break:normal}
 :root[data-display-mode=dynamic] .demo-chapter .night-step-state{grid-column:3;grid-row:1;min-height:0;margin:0;font-size:12px;line-height:1.8;text-align:right;color:#cfc1af}
 :root[data-display-mode=dynamic] .demo-chapter .night-step.is-current .night-step-state{color:var(--accent)}
 :root[data-display-mode=dynamic] .demo-chapter .night-step-open{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

 /* Number and heading sit above the uncropped original portrait scene. */
 :root[data-display-mode=dynamic] .dynamic-chapter.demo-chapter.stream-layout-agents .night-agent-entries{grid-template-columns:minmax(0,1fr);width:100%;max-width:none;gap:32px}
 :root[data-display-mode=dynamic] .dynamic-chapter.demo-chapter.stream-layout-agents .night-agent-entry{position:relative;grid-template-columns:32px minmax(0,1fr);gap:12px 14px;grid-column:1!important;grid-row:auto!important;width:100%;max-width:none;justify-self:stretch;margin:0!important;padding:0!important;border:0;box-shadow:none}
 :root[data-display-mode=dynamic] .demo-chapter .night-agent-number{position:static;grid-column:1;grid-row:1;align-self:center;font-size:30px;line-height:1;color:#c9aa96;text-shadow:none;letter-spacing:0}
 :root[data-display-mode=dynamic] .demo-chapter .night-agent-image{grid-column:1/-1;grid-row:3;margin:4px 0;aspect-ratio:auto;background:transparent}
 :root[data-display-mode=dynamic] .demo-chapter .night-agent-image>img{height:auto;object-fit:contain;border:1px solid #eee3cf26;filter:none}
 :root[data-display-mode=dynamic] .demo-chapter .night-agent-copy{display:contents}
 :root[data-display-mode=dynamic] .dynamic-chapter.demo-chapter.stream-layout-agents .night-agent-entry h3{grid-column:2;grid-row:1;margin:0;font-size:clamp(34px,10vw,52px);line-height:1.15;color:#eee1d2}
 :root[data-display-mode=dynamic] .demo-chapter .night-agent-role{grid-column:2;grid-row:2;margin:0;font-size:18px}
 :root[data-display-mode=dynamic] .dynamic-chapter.demo-chapter.stream-layout-agents .night-agent-entry .agent-entry-summary{grid-column:1/-1;grid-row:4;flex-direction:column;gap:10px}
 :root[data-display-mode=dynamic] .dynamic-chapter.demo-chapter.stream-layout-agents .night-agent-entry .agent-entry-action{grid-column:1/-1;grid-row:5;margin:4px 0 0;min-height:44px}
 :root[data-display-mode=dynamic] .dynamic-chapter.demo-chapter.stream-layout-agents .night-agent-entry .agent-entry-status{background:transparent;border:1px solid var(--line);border-radius:0;box-shadow:none;padding:4px 9px}
 :root[data-display-mode=dynamic] .demo-chapter :is(.night-agent-entry a,.night-step,.night-agent-entry):focus-visible{outline:2px solid #eee1d2;outline-offset:4px}
 :root[data-display-mode=dynamic] .dynamic-chapter.demo-chapter .night-agent-entry .agent-entry-time,
 :root[data-display-mode=dynamic] .dynamic-chapter.demo-chapter :is(.identifier-copy button,.night-event time){font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums;letter-spacing:0}
 :root[data-display-mode=dynamic] .dynamic-chapter.demo-chapter.stream-layout-agents .night-agent-entry :is(.agent-entry-time,.agent-entry-provenance,.agent-entry-description,.agent-entry-status,.agent-entry-action){font-size:12px;line-height:1.8;color:#d6c9c6}
 :root[data-display-mode=dynamic] .dynamic-chapter.demo-chapter.stream-layout-agents .night-agent-entry .agent-entry-task{font-size:15px;line-height:1.7}
 :root[data-display-mode=dynamic] .dynamic-chapter.demo-chapter.stream-layout-agents .night-agent-source-note{font-size:12px;line-height:1.8}
 :root[data-display-mode=dynamic] .demo-chapter :is(.night-event-source,.night-event-toggle,.identifier-copy-status){font-size:12px;line-height:1.8;color:#cbd4d6}
 :root[data-display-mode=dynamic] .demo-chapter .night-event time{font-size:14px;line-height:1.8;color:#cbd4d6}
 :root[data-display-mode=dynamic] .demo-chapter .night-workspace :is(.night-library-footer>span,.night-list-caption,.night-portal-copy>span:not(.night-portal-arrow)){font-size:12px;line-height:1.8;color:#cbd4d6}
 :root[data-display-mode=dynamic] .demo-chapter>.stream-chapter-end{font-size:12px;line-height:1.7;opacity:.75}
 :root[data-display-mode=dynamic] .demo-chapter .night-file-ledger-row>span[data-label]::before{font-size:12px;line-height:1.8}
 :root[data-display-mode=dynamic] .demo-chapter :is(.night-event-summary,.night-event-description){font-size:15px;line-height:1.9;overflow-wrap:anywhere;color:#d6dede}
}

/* Activity: retain the full-width scene on small screens without exposing
   the recording's bottom subtitle strip. Business records remain below. */
@media(max-width:767px){
 :root[data-display-mode=dynamic] .dynamic-chapter.demo-chapter.stream-layout-activity .demo-heading{min-height:560px!important;justify-content:flex-start;isolation:isolate}
 :root[data-display-mode=dynamic] .dynamic-chapter.demo-chapter.stream-layout-activity .demo-title{position:relative;z-index:2;padding-top:24px;text-shadow:0 2px 18px #13212b}
 :root[data-display-mode=dynamic] .dynamic-chapter.demo-chapter.stream-layout-activity .demo-media{position:absolute;inset:0 calc(-1 * var(--gutter)) 0;z-index:0;width:calc(100% + 2 * var(--gutter));height:100%;max-height:none;aspect-ratio:auto;mask-image:linear-gradient(0deg,transparent 0%,transparent 13%,#000 32%);-webkit-mask-image:linear-gradient(0deg,transparent 0%,transparent 13%,#000 32%)}
 :root[data-display-mode=dynamic] .dynamic-chapter.demo-chapter.stream-layout-activity .demo-media::after{border:0;background:linear-gradient(90deg,rgba(19,33,43,.86),rgba(19,33,43,.32) 80%)}
 :root[data-display-mode=dynamic] .dynamic-chapter.demo-chapter.stream-layout-activity .demo-parallax-media :is(.chapter-video-stage,video,.chapter-video-fallback){width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important}
}