/* Features demos, DEMO CONTRACT v5: chapters 1-8 are chapter accordions (§2). A row of episode panels, one open,
   and ONE stage layer per chapter (.fx-acc-stage: the program frame, the stage and its zoom-ins) that glides into
   the open panel and is never re-mounted. Chapter 9 and the page shell are in features.css.
   The markup is the markup module's renderDemoView v5 and the runtime lays it out and moves it (publicSiteAccordion.ts:
   --acc-* / --panel-* / --stage-* custom properties, data-acc-mode, aria-selected, data-intent, data-next,
   --ep-progress, data-zoom-state); the same geometry is written here as a fallback so the page lays out before any
   script runs. Everything here only reacts. */

/* ── The program frame (shared with the hero): a hairline, no corner marks (round 7f, decision 11a) ── */
.fx-frame{--ease:cubic-bezier(.2,.8,.2,1);position:relative;min-width:0}
.fx-frame>.cinema-stage{border:1px solid color-mix(in srgb,var(--text) 20%,transparent);border-radius:2px;box-shadow:0 40px 90px -50px #000}
.fx-hero-screen{margin-top:22px}
/* The hero's frame is the markup module's (v4 §5): its single ON AIR dot. The chapters' frames carry none. */
.fx-onair{position:absolute;left:0;bottom:100%;z-index:2;display:flex;align-items:center;gap:7px;padding-bottom:7px;font:600 10px/1 var(--font-mono);letter-spacing:.2em;color:var(--text);white-space:nowrap}
.fx-onair i{width:8px;height:8px;border-radius:50%;background:var(--live);animation:fx-onair 1.8s ease-in-out infinite}
@keyframes fx-onair{50%{opacity:.3}}
/* Tournament data has no gameplay: its surfaces fill a dark 16:9 stage of their own. */
.fx-frame.is-surface>.fx-surface-stage{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid color-mix(in srgb,var(--text) 20%,transparent);border-radius:2px;background:radial-gradient(90% 80% at 30% 20%,#141c28,#06080c);box-shadow:0 40px 90px -50px #000}
.fx-surface-stage [data-stage-mount]{position:absolute;inset:0}

/* ── Control zoom-ins (v4 §3): straight windows over the stage, in a host beside the stage canvas. The host
   is the stage's box (a size container: cqw / cqh are stage units) and never takes the pointer. ── */
.fx-zoom-host{position:absolute;left:0;top:0;width:100%;aspect-ratio:16/9;z-index:3;pointer-events:none;container-type:size}
/* The runtime's geometry (zoomRect): the zoom is clamp(--zoom-min, --zoom-pct of the stage, --zoom-max) at
   the crop's aspect, never taller than 92 % of the stage; the thumbnail is the whole window at 26 % of the
   stage. Both hang from the dock's anchor (--dock-inset from its side, --dock-offset from its edge). */
.fx-zoom{--zoom-w:min(clamp(var(--zoom-min),calc(var(--zoom-pct) * 100cqw),var(--zoom-max)),calc((92cqh - 34px) * var(--zoom-ar)));--thumb-w:min(26cqw,calc((62cqh - 34px) * var(--ctx-ar)));--w:var(--thumb-w);--ar:var(--ctx-ar);position:absolute;right:calc(var(--dock-inset) * 100cqw);top:min(calc(var(--dock-offset) * 100cqh),calc(97cqh - (var(--w) - 2px) / var(--ar) - 36px));box-sizing:border-box;display:flex;flex-direction:column;width:var(--w);margin:0;overflow:hidden;border:1px solid #ffffff2e;border-radius:8px;background:#0c1118;box-shadow:0 34px 70px -30px #000e,0 0 0 1px #0000006b;opacity:0;visibility:hidden;transform:translateY(12px);transition:width .34s var(--ease),top .34s var(--ease),opacity .2s ease-out,transform .2s ease-out,visibility 0s linear .2s}
.fx-zoom:is([data-zoom-state=thumb],[data-zoom-state=zoom]){opacity:1;visibility:visible;transform:none;transition-delay:0s}
/* zoom: the crop (FLIP: the canvas scales from the whole window to the crop while the window widens). */
.fx-zoom[data-zoom-state=zoom]{--w:var(--zoom-w);--ar:var(--zoom-ar)}
/* Under a full-frame title or program scene it hides (fast). */
.fx-zoom[data-zoom-state=hidden]{transition:opacity .15s,visibility 0s linear .15s}
.fx-zoom-bar{display:flex;align-items:center;gap:9px;flex:none;height:34px;padding:0 12px;border-bottom:1px solid #ffffff17;background:#121a25;color:#c9d4e0;font:600 13px/1 var(--font-mono);letter-spacing:.06em;white-space:nowrap;overflow:hidden}
.fx-zoom-bar>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.fx-zoom-mark{flex:none;display:block;width:16px;height:16px}
.fx-zoom-view{position:relative;flex:none;width:100%;height:calc((var(--w) - 2px) / var(--ar));overflow:hidden;background:#0b0f16;transition:height .34s var(--ease)}
/* The canvas is the whole window (the context); at `zoom` it scales to the crop. */
.fx-zoom-canvas{position:absolute;left:0;top:0;width:100%;aspect-ratio:var(--ctx-ar);transform-origin:0 0;transition:transform .34s var(--ease)}
.fx-zoom[data-zoom-state=zoom] .fx-zoom-canvas{transform:scale(calc(1 / var(--crop-w))) translate(calc(var(--crop-x) * -100%),calc(var(--crop-y) * -100%))}
.fx-zoom-context{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill}
/* The control's media at its rect inside the window (a lazy clip shows the context through until it plays). */
.fx-zoom-media{position:absolute;left:calc(var(--at-x,0) * 100%);top:calc(var(--at-y,0) * 100%);width:calc(var(--at-w,1) * 100%);height:calc(var(--at-h,1) * 100%);display:block;object-fit:fill}
/* The Stream Deck's held key (FREEZE): its still twin shows only while the key is held. */
.fx-zoom-media[data-zoom-still]{opacity:0;transition:opacity .12s ease-out}
.fx-zoom:is([data-deck-state=held],[data-deck-state=press]) .fx-zoom-media[data-zoom-still]{opacity:1}
/* A still's rows: the row the beat on air names is outlined (data-seq-on). */
.fx-zoom-row{position:absolute;z-index:1;box-sizing:border-box;border:2px solid var(--cta);border-radius:6px;box-shadow:0 0 0 3px color-mix(in srgb,var(--cta) 22%,transparent),inset 0 0 0 999px color-mix(in srgb,var(--cta) 7%,transparent);opacity:0;transition:opacity .25s;pointer-events:none}
.fx-zoom[data-seq-on="0"] .fx-zoom-row[data-seq="0"],.fx-zoom[data-seq-on="1"] .fx-zoom-row[data-seq="1"],.fx-zoom[data-seq-on="2"] .fx-zoom-row[data-seq="2"],.fx-zoom[data-seq-on="3"] .fx-zoom-row[data-seq="3"]{opacity:1}
/* Docks (HUD-free per preset): the anchor side; mr / tr hang from the right and the top (above). */
.fx-zoom:is([data-dock=ml],[data-dock=tl],[data-dock=bl]){right:auto;left:calc(var(--dock-inset) * 100cqw)}
.fx-zoom:is([data-dock=br],[data-dock=bl]){top:auto;bottom:calc(var(--dock-offset) * 100cqh)}
/* fill: a surface chapter, the window is the stage (the whole window, then its crop). */
.fx-zoom[data-dock=fill]{--thumb-w:min(100cqw,calc((100cqh - 34px) * var(--ctx-ar)));--zoom-w:min(100cqw,calc((100cqh - 34px) * var(--zoom-ar)));right:auto;left:50%;top:0;translate:-50% 0;border-color:transparent;border-radius:0;box-shadow:none}
/* v5 floors on the chapter stages (decision 9): ≥ 420 px on the 1002 px stage, ≥ 380 px on 944, linear between
   (feature-stories.mjs zoomFloor); never past the window's height cap. */
.fx-acc .fx-zoom:not([data-dock=fill]):not([data-zoom-floor=none]){--zoom-floor:clamp(0px,calc(380px + (100cqw - 944px) * .6897),420px);--zoom-w:min(max(var(--zoom-floor),clamp(var(--zoom-min),calc(var(--zoom-pct) * 100cqw),var(--zoom-max))),calc((92cqh - 34px) * var(--zoom-ar)))}

/* Honest labels */
.fx-tag{display:inline-flex;padding:5px 8px;border:1px solid color-mix(in srgb,var(--cta) 55%,transparent);border-radius:3px;font:600 10px/1.2 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cta-text)}


/* ══ The chapter accordion (§2) ═════════════════════════════════════════════════════════════════════
   The markup is the markup module's renderDemoView v5; the runtime (publicSiteAccordion.ts) lays it out with the
   approved prototype's geometry and writes it here: --acc-e / --acc-h / --acc-c / --acc-gap / --acc-meta / --acc-i
   on the view, --panel-w (row) or --panel-h (stacked) on each panel, --stage-x / --stage-y on the stage layer,
   data-acc-mode (row | film | column | cards | stack), data-acc-cards (strips ≥ 160 px; film and column), data-acc-anim (only while a choice
   resizes the panels), data-intent / data-next / aria-selected on the panels, --ep-progress on the open one,
   data-pip (kind B). Before it runs, the same rule in CSS: E = min(fill, max(fit, base)), fill = W − (n−1)·92,
   base = W − 3·92 (the 4-panel stage is every chapter's floor), fit = what one screen holds under the nav and
   the head. 1440×900: 1008 (4 panels) / 1100 (3); 1366×768: 950 (≥ the 1000 / 926 px floors, decision 11).
   The chapters whose silhouette moves the strips (decision 16, the block at the end of the ≥ 1024 px rules) draw
   their own E from the content width instead: Graphics the full width (1284 / 1202 px) and Data ≥ 926 (1032 / 926).
   Autopilot (round 7c, decision 7) is a row whose strips are cards ≥ 160 px (the runtime's minCard: 956 / 898):
   the one documented exception to the 926 px floor (round 7d, decision 7: the cards win; STAGE_FLOOR_EXCEPTIONS in
   accordion-geometry.mjs, by chapter id, the one source the page re-exports; the floor test carries it). */
.fx-acc{--gap:var(--acc-gap,4px);--meta:var(--acc-meta,76px);--dur:420ms;--ease:cubic-bezier(.2,.8,.2,1);--intent:350ms;--head-h:150px;--n:var(--acc-n,3);
  --fit:calc((100svh - var(--site-nav-h,68px) - 16px - var(--head-h) - 20px - var(--meta) - 12px) * 16 / 9);
  --e0:min(calc(100cqw - (var(--n) - 1) * 92px),max(var(--fit),calc(100cqw - 276px)));
  --E:var(--acc-e,var(--e0));
  --H:var(--acc-h,calc(var(--E) * 9 / 16));
  --C:var(--acc-c,calc((100cqw - var(--E)) / (var(--n) - 1) - var(--gap)));
  --ink:#f4f8ff;--ink2:rgba(226,236,252,.74);--ground:#070a0f;
  position:relative;container-type:inline-size;min-width:0;margin-top:16px}
/* The chapter colour on a media ground: the dark-theme hue in both themes. */
.fx-page [data-fam=data]{--fam-ink:#9ac2ff}
.fx-page [data-fam=air]{--fam-ink:#ff6b6b}
.fx-page [data-fam=replay]{--fam-ink:#4dc48e}
.fx-page [data-fam=brand]{--fam-ink:#ffb070}

/* ── The stage layer: one per chapter, above the row, the FLIP target. Nothing in it takes the pointer, so the
   panel under it keeps its hover and click. ── */
.fx-acc-stage{position:absolute;left:var(--stage-x,calc(var(--acc-i,0) * (var(--C) + var(--gap))));top:var(--stage-y,0px);z-index:4;width:var(--E);height:var(--H);pointer-events:none}
/* Round 8r (founder item 5): the stage's pause / play key (shell.css .stage-motion-key), a tab on the frame's top edge,
   right, in the gap under the chapter head; it hangs under the bottom edge where a filmstrip sits on top. The one control
   in the stage layer: pointer events back on. */
/* Round 8r fix: the 44 x 44 hit box is centred on the drawn tab, so it sits half the difference ((44 - 22) / 2) over the edge. */
.fx-acc-stage>.fx-motion-key,.fx-frame>.fx-motion-key{--smk-bb:1px;--smk-r:5px 5px 0 0;--smk-shadow:0 -1px 2px #0005,inset 0 1px #ffffff1c;position:absolute;right:14px;bottom:calc(100% - (44px - var(--smk-h)) / 2);z-index:6}
.fx-acc[data-strips=top] .fx-acc-stage>.fx-motion-key{--smk-bt:0px;--smk-bb:3px;--smk-r:0 0 5px 5px;--smk-shadow:0 2px 3px #0007;top:calc(100% - (44px - var(--smk-h)) / 2);bottom:auto}
.fx-acc-stage>.fx-frame>.cinema-stage,.fx-acc-stage>.fx-frame>.fx-surface-stage{border:0;border-radius:6px 6px 0 0;box-shadow:none}
.fx-acc-dip{border-radius:6px 6px 0 0}
/* The caption on air is read out (aria-live); the eye reads it in the open panel's bar. */
.fx-acc-caption{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── The row ── */
.fx-acc-panels{display:flex;gap:var(--gap);height:calc(var(--H) + var(--meta))}
.fx-acc-panel{position:relative;flex:0 0 var(--panel-w,var(--C));min-width:0;height:100%;margin:0;padding:0;overflow:hidden;border:0;border-radius:6px;background:var(--ground);color:var(--ink);font:inherit;text-align:left;cursor:pointer;isolation:isolate;-webkit-tap-highlight-color:transparent}
.fx-acc-panel[aria-selected=true]{flex-basis:var(--panel-w,var(--E));cursor:default}
.fx-acc[data-acc-anim] .fx-acc-panel{transition:flex-basis var(--dur) var(--ease),height var(--dur) var(--ease)}
.fx-acc-panel::after{content:"";position:absolute;inset:0;z-index:6;border:1px solid #ffffff1c;border-radius:inherit;pointer-events:none;transition:border-color .3s}
.fx-acc-panel:hover::after{border-color:#ffffff3a}
.fx-acc-panel[aria-selected=true]::after{border-color:color-mix(in srgb,var(--fam-ink) 45%,transparent)}
.fx-acc-panel:focus-visible{outline:2px solid var(--fam-ink);outline-offset:2px}
/* Paper grain over a collapsed strip (V15's paper personality) and a shade so the type reads. */
.fx-acc-panel::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(180deg,#05070acc 0,#05070a00 30%,#05070a00 58%,#05070ae6 100%);background-size:160px 160px,100% 100%;opacity:.5;transition:opacity .25s}
.fx-acc-panel[aria-selected=true]::before{opacity:0}
/* The posters: the tall strip (a DPR-2 column centred on the episode's focus) and the 16:9 one (cards, phone rows).
   Dim (.32, saturate .5); hover and intent .5. */
.fx-acc-poster,.fx-acc-poster-wide{position:absolute;left:0;top:0;z-index:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;opacity:.32;filter:saturate(.5);transition:opacity .35s,filter .35s}
.fx-acc-poster-wide{display:none}
.fx-acc-panel:is(:hover,[data-intent]) .fx-acc-poster{opacity:.5;filter:saturate(.75)}
/* Collapsed: a 48 px numeral in the chapter colour, the title read bottom to top, NEXT on the auto-advance target. */
.fx-acc-num,.fx-acc-title,.fx-acc-next,.fx-acc-summary{position:absolute;z-index:2;pointer-events:none;transition:opacity 220ms ease 200ms}
.fx-acc-num{left:0;right:0;top:20px;font:700 48px/.82 "Saira Condensed",sans-serif;letter-spacing:-.02em;text-align:center;color:var(--fam-ink);font-variant-numeric:tabular-nums}
.fx-acc-title{left:50%;bottom:24px;translate:-50% 0;writing-mode:vertical-rl;rotate:180deg;font:600 20px/1 "Saira Condensed",sans-serif;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--ink)}
.fx-acc-next{left:50%;top:80px;translate:-50% 0;padding:3px 5px;border:1px solid color-mix(in srgb,var(--fam-ink) 55%,transparent);border-radius:2px;font:600 9.5px/1 var(--font-mono);letter-spacing:.18em;color:var(--fam-ink);opacity:0}
.fx-acc-panel[data-next]:not([aria-selected=true]) .fx-acc-next{opacity:1}
.fx-acc-summary{display:none}
/* A strip's control label (the markup's optional .fx-acc-strip-label, the buttons an episode uses): only the Replays
   column shows it (round 7g, below). */
.fx-acc-strip-label{position:absolute;z-index:2;display:none;pointer-events:none}
/* The intent bar: 2 px down the strip's left edge, filled in exactly the 350 ms of hover intent. */
.fx-acc-intent{position:absolute;left:0;top:0;bottom:0;z-index:3;width:2px;background:var(--fam-ink);transform:scaleY(0);transform-origin:50% 100%;pointer-events:none}
.fx-acc-panel[data-intent] .fx-acc-intent{transform:scaleY(1);transition:transform var(--intent) linear}
/* Open: the strip's type leaves (160 ms); it comes back 200 ms after the panel closes. */
.fx-acc-panel[aria-selected=true] :is(.fx-acc-num,.fx-acc-title,.fx-acc-next,.fx-acc-summary,.fx-acc-intent){opacity:0;transition:opacity 160ms ease}
.fx-acc-panel[aria-selected=true] .fx-acc-poster{opacity:.2}

/* Expanded: the caption bar under the stage: `NN · TITLE` as a mono eyebrow (13 px, chapter colour) over the
   caption on air (16 px), a 3 px progress line along its top. Its ground arrives within 120 ms of the switch.
   Round 7f (decision 11a): no corner marks on any stage; the bar and its progress line sit flush to the stage edge,
   and the edge is ONE clean 1 px rule (the progress track) with the 3 px fill growing from it. A 2 px apron of the
   rule (a box-shadow, under the stage when the two meet) covers the runtime's sub-pixel seam, so the stage never
   shows a hairline of the panel's dark ground between it and a light bar. */
.fx-acc-bar{position:absolute;left:0;right:0;bottom:0;z-index:3;display:grid;align-content:center;row-gap:8px;height:var(--meta);padding:3px 22px 0;background:var(--bg-elevated);color:var(--text);opacity:0;transition:opacity 140ms ease}
.fx-acc-panel[aria-selected=true] .fx-acc-bar{opacity:1;transition:opacity 120ms ease}
.fx-acc-bar-label{font:600 13px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fam);white-space:nowrap}
.fx-acc-bar-caption{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 16px/1.25 var(--font-sans);color:var(--body,var(--text))}
.fx-acc-progress{position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(var(--line) 0 0) 0 0/100% 1px no-repeat;box-shadow:0 -2px 0 var(--line);overflow:hidden}
.fx-acc-progress::after{content:"";display:block;height:100%;background:var(--fam);transform:scaleX(var(--ep-progress,0));transform-origin:0 50%}

/* Card strips (≥ 160 px: the two-panel chapter): a 56 px numeral, a horizontal title, the summary, the 16:9 poster. */
.fx-acc[data-acc-cards] .fx-acc-panel:not([aria-selected=true]) .fx-acc-poster{display:none}
.fx-acc[data-acc-cards] .fx-acc-panel:not([aria-selected=true]) .fx-acc-poster-wide{display:block;opacity:.42;filter:saturate(.6)}
.fx-acc[data-acc-cards] .fx-acc-panel:not([aria-selected=true]):is(:hover,[data-intent]) .fx-acc-poster-wide{opacity:.6;filter:saturate(.8)}
.fx-acc[data-acc-cards] .fx-acc-num{left:24px;right:auto;top:26px;font-size:56px;text-align:left}
.fx-acc[data-acc-cards] .fx-acc-next{left:24px;top:92px;translate:none}
.fx-acc[data-acc-cards] .fx-acc-title{left:24px;right:24px;top:122px;bottom:auto;translate:none;rotate:none;writing-mode:horizontal-tb;white-space:normal;font-size:28px;font-weight:700;letter-spacing:.05em;line-height:1}
.fx-acc[data-acc-cards] .fx-acc-summary{display:block;left:24px;right:24px;bottom:28px;max-width:30ch;font:400 14.5px/1.45 var(--font-sans);color:var(--ink2)}

/* ── Kind T (Graphics): the strips are the title art, so the row itself reads as a title package. ── */
.fx-acc[data-kind=T] .fx-acc-panel:not([aria-selected=true]){background:#0b2a86}
.fx-acc[data-kind=T] .fx-acc-panel:not([aria-selected=true]) .fx-acc-poster{opacity:.74;filter:none}
.fx-acc[data-kind=T] .fx-acc-panel:not([aria-selected=true]):is(:hover,[data-intent]) .fx-acc-poster{opacity:.94}
.fx-acc[data-kind=T] .fx-acc-panel:not([aria-selected=true])::before{opacity:.8}
.fx-acc[data-kind=T] :is(.fx-acc-num,.fx-acc-title){color:#fff;text-shadow:0 2px 14px #000a}

/* ── Kind B (Cameras): the panels are product screens, full-frame over the stage; the gameplay stage drops to a
   picture-in-picture inset only once the player's cam has arrived (the runtime's data-pip). ── */
.fx-acc[data-kind=B] .fx-acc-stage .fx-zoom-host{z-index:3;border-radius:6px 6px 0 0;background:radial-gradient(90% 80% at 30% 20%,#141c28,#06080c)}
.fx-acc[data-kind=B] .fx-acc-stage .fx-frame>.cinema-stage{z-index:1;transform-origin:calc(100% - 22px) calc(100% - 22px);transition:transform var(--dur) var(--ease),box-shadow var(--dur),border-radius var(--dur)}
.fx-acc[data-kind=B][data-pip] .fx-acc-stage .fx-frame>.cinema-stage{z-index:5;transform:scale(.34);border-radius:8px;box-shadow:0 0 0 3px #ffffffd9,0 24px 60px -16px #000}

/* ── Card rows (kind S, the Data switcher below its stage): the open card lit in the chapter colour, carrying the
   caption on air in place of its summary. (Kind C, round 7c decision 7, is an ordinary row of card strips.) ── */
@media(min-width:1024px){
.fx-acc[data-kind=S]{--fitc:calc((100svh - var(--site-nav-h,68px) - 16px - var(--head-h) - 20px - 132px - 12px) * 16 / 9)}
/* Decision 8: kind S never fits their stage to the screen height below the 926 px floor; the chapter may
   run past the fold (decision 11). */
.fx-acc[data-kind=S][data-strips]{--e0:min(100cqw,var(--fitc));--E:min(100cqw,max(926px,var(--acc-e,var(--e0))))}
.fx-acc[data-strips=bottom] .fx-acc-panels{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:10px;width:var(--E);height:auto;margin-top:calc(var(--H) + 18px)}
.fx-acc[data-strips=bottom] .fx-acc-panel{display:grid;grid-template-columns:auto minmax(0,1fr) 96px;grid-template-rows:auto auto;align-items:center;column-gap:14px;row-gap:4px;min-height:84px;padding:12px 12px 14px 16px;border:1px solid var(--line);background:var(--surface);color:var(--text);transition:background-color .2s,border-color .2s}
.fx-acc[data-strips=bottom] .fx-acc-panel::before,.fx-acc[data-strips=bottom] .fx-acc-panel::after{display:none}
.fx-acc[data-strips=bottom] .fx-acc-panel:hover{border-color:var(--edge)}
.fx-acc[data-strips=bottom] .fx-acc-panel[aria-selected=true]{border-color:color-mix(in srgb,var(--fam) 60%,var(--line));background:color-mix(in srgb,var(--fam) 10%,var(--surface))}
.fx-acc[data-strips=bottom] :is(.fx-acc-num,.fx-acc-title,.fx-acc-summary){position:static;opacity:1!important;translate:none;rotate:none;writing-mode:horizontal-tb;text-shadow:none;transition:none}
.fx-acc[data-strips=bottom] .fx-acc-num{grid-row:1/3;font-size:38px;color:color-mix(in srgb,var(--muted2) 70%,transparent)}
.fx-acc[data-strips=bottom] .fx-acc-panel[aria-selected=true] .fx-acc-num{color:var(--fam)}
.fx-acc[data-strips=bottom] .fx-acc-title{grid-column:2;font-size:19px;font-weight:700;letter-spacing:.06em;color:var(--text)}
.fx-acc[data-strips=bottom] .fx-acc-summary{grid-column:2;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font:400 14px/1.35 var(--font-sans);color:var(--body,var(--muted2))}
.fx-acc[data-strips=bottom] .fx-acc-panel[aria-selected=true] .fx-acc-summary{display:none}
.fx-acc[data-strips=bottom] .fx-acc-poster{display:none}
.fx-acc[data-strips=bottom] .fx-acc-poster-wide{position:static;grid-column:3;grid-row:1/3;display:block;width:96px;height:54px;border-radius:4px;opacity:.75;filter:none;box-shadow:0 0 0 1px #ffffff14}
.fx-acc[data-strips=bottom] .fx-acc-panel[aria-selected=true] .fx-acc-poster-wide{opacity:1}
.fx-acc[data-strips=bottom] :is(.fx-acc-next,.fx-acc-intent){display:none}
.fx-acc[data-strips=bottom] .fx-acc-bar{position:static;grid-column:2;display:block;height:auto;padding:0;background:none;opacity:0}
.fx-acc[data-strips=bottom] .fx-acc-panel:not([aria-selected=true]) .fx-acc-bar{display:none}
.fx-acc[data-strips=bottom] .fx-acc-panel[aria-selected=true] .fx-acc-bar{opacity:1}
.fx-acc[data-strips=bottom] .fx-acc-bar-label{display:none}
.fx-acc[data-strips=bottom] .fx-acc-bar-caption{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;font-size:14px;line-height:1.35}
.fx-acc[data-strips=bottom] .fx-acc-progress{top:auto;bottom:0;background:transparent;box-shadow:none}

/* ── Kind S (Tournament data): one product surface, a row of three cards under it; each card swaps it. ── */
.fx-acc[data-kind=S] .fx-acc-stage{left:calc((100cqw - var(--E)) / 2)}
.fx-acc[data-kind=S] .fx-acc-dip{width:100%!important;height:100%!important}
.fx-acc[data-kind=S][data-strips] .fx-acc-panels{width:min(100%,max(var(--E),900px));margin-inline:auto}
/* Round 8r: the Data row holds four cards (AI import, Teams, Bracket, Public page): a tighter card so each title and a
   line of its summary still read beside the poster at the 926 px floor. */
.fx-acc[data-kind=S][data-acc-n="4"] .fx-acc-panel{grid-template-columns:auto minmax(0,1fr) 80px;column-gap:10px;padding-left:12px}
.fx-acc[data-kind=S][data-acc-n="4"] .fx-acc-num{font-size:30px}
.fx-acc[data-kind=S][data-acc-n="4"] .fx-acc-title{overflow:hidden;font-size:16px;white-space:nowrap;text-overflow:ellipsis}
.fx-acc[data-kind=S][data-acc-n="4"] .fx-acc-poster-wide{width:80px;height:45px}
/* Round 8r fix 2: beside the number and the poster the summary's column was ~120 px at 1440 (~95 px at 1024), so the
   cards' two-line summaries and captions were cut ('Paste an HLTV link: teams,…'). The number, the title and the poster
   share the card's first row; the summary (the open card's caption) takes the card's whole width under them, still the
   tab card's two lines at 14 px. Desktop only (this block): the phone accordion keeps its geometry. */
.fx-acc[data-kind=S][data-acc-n="4"] :is(.fx-acc-num,.fx-acc-poster-wide){grid-row:1}
.fx-acc[data-kind=S][data-acc-n="4"] :is(.fx-acc-summary,.fx-acc-bar){grid-column:1/-1;grid-row:2}
.fx-acc[data-kind=S][data-acc-n="4"] .fx-acc-panel{align-content:start}
/* Round 8r fix 3: every bottom card row takes the Data row's card layout (keyed on the strips hint, never on a restored
   chapter's kind name). The Sponsors row's summaries and its open card's caption ran to 3-4 lines beside the number and
   the poster at 1024 and 1280 and were cut ('Freeze time: the round break carries the slot.'). The number, the title and
   the poster share the first row; the summary (the open card's caption) takes the card's whole width under them, two
   lines at 14 px. */
.fx-acc[data-strips=bottom] :is(.fx-acc-num,.fx-acc-poster-wide){grid-row:1}
.fx-acc[data-strips=bottom] :is(.fx-acc-summary,.fx-acc-bar){grid-column:1/-1;grid-row:2}
.fx-acc[data-strips=bottom] .fx-acc-panel{align-content:start}
.fx-acc[data-kind=S] .fx-acc-stage>.fx-frame>.fx-surface-stage{border:1px solid color-mix(in srgb,var(--text) 18%,transparent);border-radius:6px}

/* ══ Story silhouettes (decision 16): one mechanic, a different shape per chapter, never the same shape on two
   neighbours and no shape more than twice. One source of truth: the markup's data-strips hint (right | left |
   top | bottom), which renderDemoView writes from DEMO_TABLE and the runtime lays out from;
   the layout keys on it, a chapter's own look on its data-kind. The runtime measures the stage with
   getBoundingClientRect, so a FLIP lands whichever way the strips run; these rules only move the boxes.
     ch1 Live HUD   stage left, strips right            ch2 Your look  MIRRORED: strips left, stage right
     ch3 Graphics   title-art filmstrip ABOVE the stage ch4 Autopilot  card strips right; the deck docks in frame
     ch5 Sponsors   placement cards BELOW the stage     ch6 Cameras    product screens + PiP (kind B)
     ch7 Replays    a card COLUMN left, the stage right ch8 Data       the switcher (kind S above)
     ch9 Collector  the showcase
   (Round 7c, decision 7: the desk is retired. Round 7g, decision 4: Sponsors and Replays are live accordions again,
   in their 7b silhouettes; the calm product sections are retired.) ══ */

/* ch2 · Your look: mirrored. The open panel is the rightmost slot, the strips read leftwards; the stage sits at
   the open panel's slot counted from the right. The open episode's collector window stays docked over the stage
   for its whole episode (a persistent second layer: the editor is the chapter's hero). */
.fx-acc[data-strips=left] .fx-acc-panels{flex-direction:row-reverse}
.fx-acc[data-strips=left] .fx-acc-stage{left:var(--stage-x,calc(100cqw - var(--E) - var(--acc-i,0) * (var(--C) + var(--gap))))}
.fx-acc[data-strips=left] .fx-acc-intent{left:auto;right:0}
.fx-acc[data-strips=left] .fx-zoom[data-zoom-current]{box-shadow:0 34px 70px -30px #000e,0 0 0 1px #0000006b,0 0 0 4px color-mix(in srgb,var(--fam-ink) 22%,transparent)}
.fx-acc[data-strips=left]:not([data-demo-state~=cover]) .fx-zoom[data-zoom-current][data-zoom-state=off]{opacity:1;visibility:visible;transform:none;transition-delay:0s}

/* ch3 · Graphics: the title-art FILMSTRIP. The three panels are a row of title posters above a full-width stage
   (E = the content width, capped to one screen's height); the row itself reads as a title package. */
.fx-acc[data-strips=top]{--row-h:clamp(128px,13cqw,176px);--E:min(100cqw,calc((100svh - var(--site-nav-h,68px) - 24px) * 16 / 9));--H:calc(var(--E) * 9 / 16)}
.fx-acc[data-strips=top] .fx-acc-panels{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:10px;height:var(--row-h);margin-bottom:calc(var(--H) + 14px)}
.fx-acc[data-strips=top] .fx-acc-stage{left:calc((100cqw - var(--E)) / 2);top:calc(var(--row-h) + 14px)}
.fx-acc[data-strips=top] .fx-acc-dip{width:100%!important;height:100%!important;border-radius:6px}
.fx-acc[data-strips=top] .fx-acc-stage>.fx-frame>.cinema-stage{border-radius:6px}
.fx-page .fx-acc[data-strips=top] .fx-acc-panel{height:100%;background:#0b2a86}
.fx-page .fx-acc[data-strips=top] .fx-acc-panel::before{opacity:1;background:linear-gradient(180deg,#02061100 22%,#020611d9 100%);background-size:100% 100%}
.fx-page .fx-acc[data-strips=top] .fx-acc-panel[aria-selected=true]::after{border:2px solid var(--fam-ink)}
.fx-page .fx-acc[data-strips=top] .fx-acc-panel .fx-acc-poster{display:none}
.fx-page .fx-acc[data-strips=top] .fx-acc-panel .fx-acc-poster-wide{display:block;object-position:50% 34%;opacity:.62;filter:saturate(.85)}
.fx-page .fx-acc[data-strips=top] .fx-acc-panel:is(:hover,[data-intent]) .fx-acc-poster-wide{opacity:.86;filter:none}
.fx-page .fx-acc[data-strips=top] .fx-acc-panel[aria-selected=true] .fx-acc-poster-wide{opacity:1;filter:none}
.fx-page .fx-acc[data-strips=top] .fx-acc-panel :is(.fx-acc-num,.fx-acc-title){opacity:1;color:#fff;text-shadow:0 2px 14px #000c}
.fx-page .fx-acc[data-strips=top] .fx-acc-num{left:16px;right:auto;top:auto;bottom:14px;font-size:44px;text-align:left}
.fx-page .fx-acc[data-strips=top] .fx-acc-title{left:70px;right:16px;top:auto;bottom:36px;translate:none;rotate:none;writing-mode:horizontal-tb;overflow:hidden;text-overflow:ellipsis;font-size:22px;font-weight:700;letter-spacing:.06em}
.fx-page .fx-acc[data-strips=top] .fx-acc-summary{display:block;left:70px;right:16px;bottom:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:400 13.5px/1.2 var(--font-sans);color:#dce6ff}
.fx-page .fx-acc[data-strips=top] .fx-acc-panel[aria-selected=true] .fx-acc-summary{opacity:0}
.fx-page .fx-acc[data-strips=top] .fx-acc-next{left:auto;right:12px;top:12px;translate:none;color:#fff;border-color:#ffffff8c;background:#0b2a86}
.fx-page .fx-acc[data-strips=top] .fx-acc-intent{inset:auto 0 0 0;width:auto;height:2px;transform:scaleX(0);transform-origin:0 50%}
.fx-page .fx-acc[data-strips=top] .fx-acc-panel[data-intent] .fx-acc-intent{transform:scaleX(1)}
.fx-page .fx-acc[data-strips=top] .fx-acc-bar{inset:auto 0 0 0;display:block;height:auto;padding:0 16px 14px 70px;background:none;color:#fff}
.fx-page .fx-acc[data-strips=top] .fx-acc-bar-label{display:none}
.fx-page .fx-acc[data-strips=top] .fx-acc-bar-caption{display:block;font-size:13.5px;line-height:1.2;color:#fff}
.fx-page .fx-acc[data-strips=top] .fx-acc-progress{top:auto;bottom:0;background:#ffffff26;box-shadow:none}

/* ch5 · Sponsors and ch8 · Data: the stage over a row of cards BELOW it (a card switcher; kind S centres it above).
   Round 7g: the stage and its card row fit one screen under the nav (a 112 px row), never under the 926 px floor. */
.fx-acc[data-strips=bottom]{--E:min(100cqw,max(926px,calc((100svh - var(--site-nav-h,68px) - 16px - 136px) * 16 / 9)));--H:calc(var(--E) * 9 / 16)}
.fx-acc[data-strips=bottom] .fx-acc-stage{left:calc((100cqw - var(--E)) / 2);top:0}
.fx-acc[data-strips=bottom] .fx-acc-dip{width:100%!important;height:100%!important;border-radius:6px}
.fx-acc[data-strips=bottom] .fx-acc-stage>.fx-frame>.cinema-stage{border-radius:6px}
.fx-acc[data-strips=bottom] .fx-acc-panels{width:100%;margin-top:calc(var(--H) + 16px)}
/* ch5 · Sponsors (round 7g, decisions 1 and 4; the 7b look): the stage at full width and the three placement cards
   (Placements · Round break · Rotation) in a row under it, each card on the YOUR SPONSOR slot's warm amber (the brand
   family's media ink) in both themes, so the row never repeats the Data switcher's look. The row is as wide as the
   stage. */
.fx-acc[data-strips=bottom]:not([data-kind=S]) .fx-acc-panels{width:var(--E);margin-inline:auto}
.fx-page [data-fam=brand] .fx-acc[data-strips=bottom] .fx-acc-panel{grid-template-columns:auto minmax(0,1fr) 112px;min-height:96px;padding:14px 14px 14px 16px;border:1px solid color-mix(in srgb,var(--fam-ink) 20%,transparent);border-top:3px solid color-mix(in srgb,var(--fam-ink) 35%,transparent);background:linear-gradient(180deg,#2b1807,#120b06);color:#fff3e6}
.fx-page [data-fam=brand] .fx-acc[data-strips=bottom] .fx-acc-panel:hover{border-color:color-mix(in srgb,var(--fam-ink) 40%,transparent)}
.fx-page [data-fam=brand] .fx-acc[data-strips=bottom] .fx-acc-panel[aria-selected=true]{border-color:color-mix(in srgb,var(--fam-ink) 65%,transparent);border-top-color:var(--fam-ink);background:linear-gradient(180deg,#3d2209,#170d06)}
.fx-page [data-fam=brand] .fx-acc[data-strips=bottom] .fx-acc-num{color:color-mix(in srgb,var(--fam-ink) 60%,transparent)}
.fx-page [data-fam=brand] .fx-acc[data-strips=bottom] .fx-acc-panel[aria-selected=true] .fx-acc-num{color:var(--fam-ink)}
.fx-page [data-fam=brand] .fx-acc[data-strips=bottom] .fx-acc-title{color:#ffd9b0}
.fx-page [data-fam=brand] .fx-acc[data-strips=bottom] :is(.fx-acc-summary,.fx-acc-bar-caption){color:#f1dcc6}
.fx-page [data-fam=brand] .fx-acc[data-strips=bottom] .fx-acc-poster-wide{width:112px;height:63px;opacity:.8}
.fx-page [data-fam=brand] .fx-acc[data-strips=bottom] .fx-acc-progress::after{background:var(--fam-ink)}
.fx-page [data-fam=brand] .fx-acc[data-strips=bottom] .fx-acc-panel:focus-visible{outline-color:var(--fam-ink)}

/* ch7 · Replays (round 7g, decisions 2 and 4; the 7b silhouette): a card COLUMN on the left (each card names the
   buttons it uses, the markup's strip label: ARM · CLIP LAST 30s, PLAY), the stage on the right; Studio in the head.
   The stage stays put; a switch dips it (the runtime's column mode). */
.fx-acc[data-strips=column]{--colw:clamp(232px,21cqw,280px);--ph:calc(var(--colw) * 9 / 16);--E:calc(100cqw - var(--colw) - 14px);--H:calc(var(--E) * 9 / 16)}
.fx-acc[data-strips=column] .fx-acc-panels{flex-direction:column;gap:10px;width:var(--colw);height:var(--H)}
.fx-acc[data-strips=column] .fx-acc-stage{left:calc(100cqw - var(--E));top:0}
.fx-acc[data-strips=column] .fx-acc-dip{width:100%!important;height:100%!important;border-radius:6px}
.fx-acc[data-strips=column] .fx-acc-stage>.fx-frame>.cinema-stage{border-radius:6px}
.fx-page .fx-acc[data-strips=column] .fx-acc-panel{flex:1 1 0;height:auto;min-height:0}
.fx-page .fx-acc[data-strips=column] .fx-acc-panel[aria-selected=true]::after{border:2px solid var(--fam-ink)}
.fx-page .fx-acc[data-strips=column] .fx-acc-panel .fx-acc-poster{display:none}
.fx-page .fx-acc[data-strips=column] .fx-acc-panel .fx-acc-poster-wide{display:block;height:auto;aspect-ratio:16/9;opacity:.5;filter:saturate(.7)}
.fx-page .fx-acc[data-strips=column] .fx-acc-panel:is(:hover,[data-intent]) .fx-acc-poster-wide{opacity:.75;filter:none}
.fx-page .fx-acc[data-strips=column] .fx-acc-panel[aria-selected=true] .fx-acc-poster-wide{opacity:.95;filter:none}
.fx-page .fx-acc[data-strips=column] .fx-acc-panel::before{opacity:1;background:linear-gradient(180deg,#05070a00 0,#05070a00 calc(var(--ph) * .45),#05070af5 var(--ph));background-size:100% 100%}
.fx-page .fx-acc[data-strips=column] .fx-acc-panel :is(.fx-acc-num,.fx-acc-title){opacity:1}
.fx-page .fx-acc[data-strips=column] .fx-acc-num{left:18px;right:auto;top:calc(var(--ph) - 30px);bottom:auto;font-size:46px;text-align:left}
.fx-page .fx-acc[data-strips=column] .fx-acc-title{left:74px;right:14px;top:calc(var(--ph) - 16px);bottom:auto;translate:none;rotate:none;writing-mode:horizontal-tb;white-space:normal;font-size:24px;font-weight:700;letter-spacing:.05em;line-height:1}
.fx-page .fx-acc[data-strips=column] .fx-acc-next{left:auto;right:12px;top:12px;translate:none;background:#05070acc}
.fx-page .fx-acc[data-strips=column] .fx-acc-summary{display:block;left:18px;right:16px;top:calc(var(--ph) + 42px);bottom:auto;max-width:none;font:400 14px/1.4 var(--font-sans);color:var(--ink2)}
.fx-page .fx-acc[data-strips=column] .fx-acc-panel[aria-selected=true] .fx-acc-summary{opacity:0}
.fx-page .fx-acc[data-strips=column] .fx-acc-panel .fx-acc-bar{inset:calc(var(--ph) + 22px) 0 0 0;display:block;align-content:start;height:auto;padding:20px 16px 14px 18px;background:none;color:var(--ink)}
.fx-page .fx-acc[data-strips=column] .fx-acc-panel:not([aria-selected=true]) .fx-acc-bar{opacity:1}
.fx-page .fx-acc[data-strips=column] .fx-acc-bar-label{display:none}
.fx-page .fx-acc[data-strips=column] .fx-acc-strip-label{display:block;left:18px;right:16px;top:calc(var(--ph) + 22px);font:600 11.5px/1 var(--font-mono);letter-spacing:.16em;color:var(--fam-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-page .fx-acc[data-strips=column] .fx-acc-panel:not([aria-selected=true]) :is(.fx-acc-bar-caption,.fx-acc-progress){visibility:hidden}
.fx-page .fx-acc[data-strips=column] .fx-acc-bar-caption{margin-top:0;white-space:normal;font-size:14px;line-height:1.4;color:var(--ink)}
.fx-page .fx-acc[data-strips=column] .fx-acc-progress{top:auto;bottom:0;background:#ffffff1a}
.fx-page .fx-acc[data-strips=column] .fx-acc-intent{inset:auto 0 0 0;width:auto;height:2px;transform:scaleX(0);transform-origin:0 50%}
.fx-page .fx-acc[data-strips=column] .fx-acc-panel[data-intent] .fx-acc-intent{transform:scaleX(1)}
}

/* ── Heights ≤ 800 px: the compact head (≤ 104 px) leaves the stage its room. ── */
@media(max-height:800px){.fx-acc{--head-h:104px}}

/* ── 1181-1365 px (icon rail): the same row, narrower; the stage keeps the 4-panel floor ── */
@media(min-width:1181px) and (max-width:1365px){
  .fx-hero-screen .fx-zoom-bar{font-size:12px;letter-spacing:.03em}
}

/* ── ≤ 1023 px: the panels stack. The open panel is full width: its 64 px header (numeral, title, the caption on
   air), the stage (then the phone's zoom slot); collapsed rows are 64 px with a dimmed 114×64 poster. ── */
@media(max-width:1023px){
  .fx-acc{--E:var(--acc-e,100cqw);--slot-h:0px}
  .fx-acc-panels{display:flex;flex-direction:column;width:auto;height:auto;margin:0}
  .fx-acc-panel{display:block;flex:none;height:var(--panel-h,64px);min-height:0;padding:0;border:0;background:var(--ground);color:var(--ink)}
  .fx-acc-panel[aria-selected=true]{flex:none;height:calc(var(--panel-h,calc(64px + var(--H))) + var(--slot-h));background:var(--ground)}
  .fx-acc-panel::before,.fx-acc-panel::after{display:block}
  .fx-acc-stage,.fx-acc[data-kind] .fx-acc-stage{left:0;top:var(--stage-y,calc(var(--acc-i,0) * (64px + var(--gap)) + 64px));width:100%;height:auto}
  .fx-acc[data-kind] .fx-acc-stage>.fx-motion-key{--smk-bt:1px;--smk-bb:3px;--smk-r:4px;--smk-shadow:0 2px 3px #0007,inset 0 1px #ffffff1c;top:auto;bottom:calc(100% + 34px - (44px - var(--smk-h)) / 2);right:12px}
  .fx-acc-stage::before,.fx-acc-stage::after{display:none}
  .fx-acc-stage>.fx-frame>.cinema-stage,.fx-acc-stage>.fx-frame>.fx-surface-stage{border-radius:0}
  .fx-acc-dip{border-radius:0}
  .fx-acc .fx-acc-poster{display:none}
  .fx-acc .fx-acc-poster-wide{position:absolute;inset:0 0 auto auto;display:block;width:114px;height:64px;border-radius:0;opacity:.42;filter:saturate(.5);box-shadow:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 60%);mask-image:linear-gradient(90deg,transparent,#000 60%)}
  .fx-acc-panel[aria-selected=true] .fx-acc-poster-wide{opacity:0}
  .fx-acc :is(.fx-acc-intent,.fx-acc-next,.fx-acc-summary){display:none!important}
  .fx-acc :is(.fx-acc-num,.fx-acc-title){position:absolute;writing-mode:horizontal-tb;rotate:none;translate:none;text-align:left;opacity:1!important}
  .fx-acc .fx-acc-num{left:14px;right:auto;top:17px;font-size:30px;color:var(--fam-ink)}
  .fx-acc .fx-acc-title{left:53px;right:120px;top:22px;bottom:auto;font-size:20px;font-weight:700;letter-spacing:.06em;color:var(--ink);transition:top .2s ease}
  .fx-acc-panel[aria-selected=true] .fx-acc-title{top:12px;right:16px}
  .fx-acc[data-kind=T] .fx-acc-panel:not([aria-selected=true]){background:#0b2a86}
  /* The open row's header: the caption on air under the lifted title (13 px, the title's x); progress at its foot. */
  .fx-acc-bar{position:absolute;inset:0 0 auto 0;display:block;height:64px;padding:0;background:none}
  .fx-acc-panel:not([aria-selected=true]) .fx-acc-bar{display:none}
  .fx-acc-bar-label{display:none}
  .fx-acc-bar-caption{position:absolute;left:53px;right:16px;top:38px;display:block;font-size:13px;line-height:1.2;color:var(--ink2);white-space:nowrap;-webkit-line-clamp:none}
  .fx-acc-progress{top:auto;bottom:0;height:2px;background:linear-gradient(#ffffff1a 0 0) 0 100%/100% 1px no-repeat;box-shadow:0 2px 0 #ffffff1a}
}
/* ── Phone: a docked zoom sits UNDER the stage at full width, in one slot as tall as the episode's own docked window
   (round 7c, decision 5b: the runtime writes that window's data-slot-ar to the view's --slot-ar; --slot-view-ar
   carries the view's value down to the host, whose own inline --slot-ar is the chapter's tallest). The slot is open only for an episode with a stage zoom-in (the markup's data-zoom-slot,
   kept in step with the episode on air by the runtime: open | closed) and collapses for one without (decision 4): its height and the open
   panel's ease over 180 ms, so a zoom arriving never jumps the page; its window shows from the episode's first
   frame (data-zoom-current), so an open slot is never empty. ── */
@media(max-width:760px){
  .fx-acc:has(.fx-acc-stage .fx-zoom-host[data-slot]){--slot-h:0px;--slot-view-ar:var(--slot-ar,1.6)}
  .fx-acc[data-zoom-slot=open]:has(.fx-acc-stage .fx-zoom-host[data-slot]){--slot-h:calc(var(--E) / var(--slot-view-ar) + 36px + 12px)}
  .fx-acc:not([data-acc-anim]):has(.fx-acc-stage .fx-zoom-host[data-slot]) .fx-acc-panel[aria-selected=true]{transition:height .18s ease-in-out}
  .fx-frame:has(>.fx-zoom-host[data-slot]){container-type:inline-size}
  .fx-zoom-host[data-slot]{position:relative;top:auto;left:auto;width:100%;aspect-ratio:auto;height:0;margin-top:0;overflow:hidden;border-radius:8px;background:color-mix(in srgb,var(--text) 4%,var(--bg-base));transition:height .18s ease-in-out,margin-top .18s ease-in-out}
  .fx-acc[data-zoom-slot=open] .fx-zoom-host[data-slot]{height:calc(100cqw / var(--slot-view-ar,1.6) + 36px);margin-top:12px}
  .fx-zoom-host[data-slot] .fx-zoom[data-zoom-current][data-zoom-state=off]{--w:var(--thumb-w);--ar:var(--ctx-ar);opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .fx-zoom-host[data-slot] .fx-zoom{--thumb-w:min(64cqw,calc((100cqh - 36px) * var(--ctx-ar)));--zoom-w:min(100cqw,calc((100cqh - 36px) * var(--zoom-ar)));right:auto;bottom:auto;left:50%;top:50%;translate:-50% -50%;transition:width .34s var(--ease),opacity .2s ease-out,visibility 0s linear .2s}
  .fx-zoom-bar{gap:7px;padding:0 9px;font-size:11px;letter-spacing:.02em}
  .fx-zoom-host[data-slot] .fx-zoom[data-zoom-state=hidden]{--w:var(--thumb-w);--ar:var(--ctx-ar);opacity:1;visibility:visible;transform:none}
  .fx-hero-screen .fx-zoom-host{display:none}
  .fx-acc[data-kind=B] .fx-zoom-host[data-slot]{background:radial-gradient(90% 80% at 30% 20%,#141c28,#06080c)}
}

/* ── Reduced motion: no autoplay, no glide; the open panel shows its poster and the static crop. ── */
@media(prefers-reduced-motion:reduce){
  .fx-acc{--dur:0ms;--intent:0ms}
  .fx-acc *,.fx-acc *::before,.fx-acc *::after,.fx-zoom,.fx-zoom-view,.fx-zoom-canvas,.fx-zoom-media{transition:none!important;animation:none!important}
  .fx-onair i{animation:none!important}
}
html[data-motion=off] .fx-onair i{animation:none}
html[data-motion=off] .fx-acc *{transition-duration:0ms!important}