/* cutveyviewfinder.com: the home and how-it-works pages and their scenes.
   A scene is finished HTML (scripts/site_scenes.py). html.arm is set by the
   short script in <head> when motion is allowed and hides the moving pieces
   until js/scenes.js has armed them, so the finished frame never flashes; the
   app's chrome and the picture stay visible from the first paint. Everything
   inside a scene is sized in em from the scene's own width (container units),
   so a scene scales like a picture and never reflows. The app's own colors:
   ink #000, amber #F0973B (--tungsten in site.css: its accent and its "Amber"
   frame line color). The sun path keeps the app's own sun yellow, #FFD23F. */

/* ---------- Hero: the headline across, then the copy and the stage ---------- */
.hero{padding:22px 0 56px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,4.4fr) minmax(0,7.6fr);grid-template-areas:"h h" "copy stage";gap:22px 48px;align-items:start}
.hero-h{grid-area:h;display:flex;flex-direction:column;gap:12px}
.hero-h .h1{font-size:clamp(34px,2.5vw + 12px,50px);line-height:1;margin:0;max-width:24em;text-wrap:balance}
.hero-copy{grid-area:copy;display:flex;flex-direction:column;gap:22px;align-items:flex-start;padding-top:6px}
.hero-copy .lede{margin:0;font-size:18px}
.hero-cta{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.who{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.who-label{font-size:15px;color:var(--muted);margin-right:2px;width:100%}
.who .chip{min-height:40px;font-size:14px;padding:0 15px}
.hero-stage{grid-area:stage;position:relative;min-width:0}
.hero-stage [data-screen][hidden]{display:none}
@media (max-width:1000px){
  .hero{padding:16px 0 36px}
  .hero .wrap{display:flex;flex-direction:column;align-items:stretch;gap:14px}
  .hero-copy{display:contents}
  .hero-h{order:1}.hero-cta{order:2}.hero-stage{order:3}.who{order:4}.hero-copy .lede{order:5;font-size:17px}
}
@media (max-width:700px){
  .hero-h{gap:8px}
  .hero-h .eyebrow{font-size:12px}
  .hero-h .h1{font-size:clamp(26px,7.4vw,40px);font-stretch:100%;line-height:1.02}
  .hero-cta{align-items:stretch}.hero-cta .cta-note{text-align:center;font-size:14px}
}

/* ---------- Scene frame ---------- */
.scene-fig{position:relative;margin:0;min-width:0;display:flex;flex-direction:column;gap:10px}
.scene-fig figcaption{font-size:14px;line-height:1.45;color:#9A9AA6;padding-right:96px;min-height:32px}
.sc{container-type:inline-size;position:relative;border-radius:20px;overflow:hidden;background:#0B0B0E;border:1px solid #1E1E26}
.sc.bare{background:none;border:0;border-radius:0;overflow:visible}
.sc-in{position:relative;font-size:16px;font-size:calc(100cqw / 40);line-height:1.3;color:#F2F2F5;padding:1.2em}
@container (max-width:460px){.sc-in{font-size:calc(100cqw / 26);padding:.9em}}
html.arm .sc:not([data-state]) [data-fx]:not(.zm){visibility:hidden}
.scene-ctl{position:absolute;right:0;bottom:0;min-height:32px;padding:0 13px;border:1px solid #33333D;border-radius:999px;background:#17171D;color:#F2F2F5;font:600 13px/1 var(--font-sans);cursor:pointer}
.scene-ctl::before{content:"";position:absolute;inset:-7px -6px}
.scene-ctl:hover{border-color:#77777F}
.sc .k{display:block;font-family:var(--font-mono);font-size:.68em;letter-spacing:.05em;color:var(--tungsten);white-space:nowrap}
.sc strong{display:block;font-size:1.05em;font-weight:760;line-height:1.2}
.sc .d{display:block;font-size:.8em;color:#B7B7C2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st{display:inline-grid}
.st>*{grid-area:1/1;font-style:normal}
.st>:not(:last-child){opacity:0}
.ph{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- The app's viewfinder: device (hero) and screen (sections) ---------- */
.dev{display:grid;grid-template-columns:7.2em minmax(0,1fr) 7.2em;background:#000;border-radius:1.4em;border:1px solid #2A2A33;box-shadow:0 1.6em 4em rgba(0,0,0,.55),inset 0 0 0 .35em #000;overflow:hidden}
.scr,.vf,.pdev{display:flex;flex-direction:column;min-width:0;background:#000}
.vf{border-radius:.9em;overflow:hidden;border:1px solid #26262F}
.vt{display:flex;align-items:center;gap:.7em;height:2em;padding:0 .7em;font-family:var(--font-mono);font-size:.74em;color:#C9C9D2;white-space:nowrap;overflow:hidden}
.vt b{font-family:var(--font-sans);font-weight:700;color:#FFF;font-size:1.08em}
.vt span:not(.ic):not(.sun-on):not(.badge)::before{content:"\00b7";margin-right:.7em;color:#77777F}
.ic{position:relative;margin-left:auto;display:flex;gap:.75em}
.ic svg,.sun-on svg{width:1.35em;height:1.35em;fill:none;stroke:#FFF;stroke-width:1.5;stroke-linecap:round}
.sun-on{position:absolute;left:0;top:0;opacity:1}
.sun-on svg{stroke:var(--tungsten)}
.vp{position:relative;aspect-ratio:16/9;overflow:hidden;background:#111;box-shadow:inset 0 0 0 1px var(--tungsten)}
.vp>picture,.zm{position:absolute;inset:0}
.zm{transform-origin:50% 50%}
.zm picture{display:block;width:100%;height:100%}
.vr{display:flex;align-items:center;gap:.8em;height:2em;padding:0 .7em;font-family:var(--font-mono);font-size:.74em;color:#C9C9D2;white-space:nowrap}
.vr b{color:#FFF;font-weight:600}
.vr .st{white-space:nowrap}
.rl,.rr{display:flex;flex-direction:column;align-items:center;gap:.42em;padding:.7em .45em;min-width:0}
.pl{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:1.85em;border-radius:99em;background:#1C1C21;border:1px solid #2E2E36;font-family:var(--font-sans);font-style:normal;font-weight:700;font-size:.58em;letter-spacing:.06em;color:#C9C9D2;overflow:hidden}
.pl.lv{color:var(--tungsten)}
.pl.on,.pl-on{background:var(--tungsten);color:#16100A;border-color:var(--tungsten)}
.pl-on{position:absolute;inset:-1px;display:flex;align-items:center;justify-content:center;border-radius:99em;opacity:0}
.chev{display:block;width:72%;height:2.1em;border-radius:.6em;background:#1C1C21;border:1px solid #2E2E36;position:relative;margin-top:.5em}
.chev::after{content:"";position:absolute;left:50%;top:58%;width:.5em;height:.5em;border:solid #FFF;border-width:.13em .13em 0 0;transform:translate(-50%,-50%) rotate(-45deg)}
.chev.dn{margin:0 0 .5em}
.chev.dn::after{top:42%;transform:translate(-50%,-50%) rotate(135deg)}
.fo{display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.1}
.fo b{font-size:1.25em;font-weight:760;white-space:nowrap}
.fo small{font-size:.56em;color:#B7B7C2;margin-top:.2em}
.rr{justify-content:space-between}
.pv{display:flex;flex-direction:column;align-items:center;width:84%;padding:.25em;border-radius:.8em;background:#1C1C21;font-style:normal;font-size:.6em;font-weight:700;letter-spacing:.06em}
.pv b{width:100%;text-align:center;padding:.45em 0;border-radius:99em;background:var(--tungsten);color:#16100A}
.pv span{padding:.45em 0;color:#C9C9D2}
.shut{display:block;width:3.7em;height:3.7em;border-radius:50%;background:#FFF;box-shadow:0 0 0 .22em #000,0 0 0 .42em #5A5A63}
.gal{display:block;position:relative;width:2.6em;height:2.6em;border-radius:.6em;background:#1C1C21;border:1px solid #2E2E36;overflow:hidden}
.gth{position:absolute;inset:0;background:linear-gradient(#D8CBB3,#8E7F68 55%,#5B5A57)}
@container (max-width:460px){
  .dev{grid-template-columns:5.4em minmax(0,1fr) 4.2em;border-radius:1em}
  .rl .pl,.ic,.vt .ra,.pv,.gal{display:none}
  .rl{justify-content:center;gap:.3em;padding:.4em .3em}
  .rr{justify-content:center}
  .shut{width:2.7em;height:2.7em}
  .chev{height:1.7em;margin:0}
  .vt,.vr{font-size:.78em}
}

/* frame lines, the sun, the flash */
.ov{position:absolute;inset:0}
.fl{position:absolute;inset:0}
.fl.gone{opacity:0}
.fl svg,.sunp{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fl rect{fill:none;stroke:var(--tungsten);stroke-width:.55}
.fl span{position:absolute;font-family:var(--font-mono);font-size:.74em;font-weight:600;color:var(--tungsten);text-shadow:0 0 .4em #000,0 0 .2em #000;white-space:nowrap}
.dr{stroke-dasharray:1 1.1;stroke-dashoffset:0}
.shade{position:absolute;left:0;right:0;background:rgba(0,0,0,.66)}
.sunp path{fill:none;stroke-width:1.3;stroke-linecap:round}
.sunp .y{stroke:#FFD23F}.sunp .o{stroke:var(--tungsten)}.sunp .b{stroke:#4D6BFF}.sunp .n{stroke:#3D4DB8}
.sunp .hz{stroke:rgba(255,255,255,.4);stroke-width:.45;stroke-dasharray:1.6 1.6;stroke-linecap:butt}
.disc{position:absolute;width:1.3em;height:1.3em;margin:-.65em 0 0 -.65em;border-radius:50%;background:#FFD23F;box-shadow:0 0 0 .14em #FFF,0 0 1em .35em rgba(255,210,63,.5)}
.plate{position:absolute;transform:translate(-50%,-50%);font-family:var(--font-mono);font-size:.6em;font-weight:600;color:#FFF;background:rgba(28,28,30,.86);border:1px solid var(--tungsten);border-radius:.35em;padding:.05em .35em;line-height:1.3}
.flash{position:absolute;inset:0;background:#FFF;opacity:0}
.legend{position:absolute;left:.6em;bottom:.6em;display:flex;gap:.8em;font-size:.62em;font-weight:600;background:rgba(0,0,0,.6);border-radius:.4em;padding:.2em .55em}
.legend span{display:flex;align-items:center;gap:.35em}
.legend i{width:1.2em;height:.25em;border-radius:99em}
.legend .y{background:#FFD23F}.legend .o{background:var(--tungsten)}.legend .b{background:#4D6BFF}.legend .n{background:#3D4DB8}
.duo .vf{font-size:.62em}
.tag{position:absolute;left:.6em;top:.6em;font-family:var(--font-mono);font-weight:600;font-size:.8em;color:#000;background:var(--tungsten);border-radius:.3em;padding:.05em .45em}
.ovp{position:absolute;right:.6em;top:.6em;font-style:normal;font-weight:700;font-size:.58em;letter-spacing:.06em;color:#16100A;background:var(--tungsten);border-radius:99em;padding:.35em .8em}
.pill3{position:absolute;inset:0 7.8%;overflow:hidden;box-shadow:0 0 0 1px var(--tungsten)}

/* ---------- The hero stage: a header line with Pause, the device, the card ---------- */
.hero-fig{gap:8px}
.hbar{display:flex;align-items:center;gap:10px;min-height:32px;padding-right:96px;font-family:var(--font-mono);font-size:12px;color:#9A9AA6;white-space:nowrap;overflow:hidden}
.hbar span{overflow:hidden;text-overflow:ellipsis}
.hbar .sh{display:none}
@media (max-width:520px){.hbar .lg{display:none}.hbar .sh{display:inline}}
.hero-fig .scene-ctl{top:0;bottom:auto}
.chip-go{display:inline-flex;align-items:center;min-height:32px;padding:0 13px;border-radius:999px;background:var(--tungsten);color:var(--ink);font:700 13px/1 var(--font-sans);text-decoration:none}
.chip-go::after{content:"\203A";margin-left:6px;font-size:16px}
.chip-go:hover{color:var(--ink);background:var(--tungsten-hover)}
.hero-sc{background:none;border:0;border-radius:0;overflow:visible}
.hero-sc .sc-in{font-size:calc(100cqw / 48);padding:0;display:flex;flex-direction:column;gap:.8em;min-height:28.7em}
@container (max-width:460px){.hero-sc .sc-in{font-size:calc(100cqw / 30);min-height:21.45em}}
/* Every chip's frame holds the home frame's height, so a press moves nothing below it. */
.hero-sc .vrow{grid-template-columns:minmax(0,1fr) 11em minmax(0,1fr)}
.hero-sc .dofcard{padding:.42em .9em}
@container (max-width:460px){.hero-sc .vrow{grid-template-columns:minmax(0,1fr) 7em minmax(0,1fr)}}
.hcard{display:flex;align-items:center;gap:.9em;min-height:5.8em;padding:.6em;background:#121217;border:1px solid #2A2A33;border-radius:1em}
.hcard .th{flex:none;width:8em;aspect-ratio:16/9;border-radius:.45em;overflow:hidden;background:#222}
.hcard .tx{display:flex;flex-direction:column;gap:.12em;min-width:0}
@container (max-width:460px){.hcard{min-height:5.6em}.hcard .th{width:6.6em}}

/* the depth of field panel (the app's own labels) */
.dofp{display:flex;flex-direction:column;gap:.55em;width:100%;font-family:var(--font-mono)}
.dofcard{display:block;padding:.55em .9em}
.dofcard .dofp{font-size:.8em;gap:.35em}
.dofcard .coc{display:none}
.dofp .nf{display:flex;justify-content:space-between;align-items:flex-end;gap:.6em;font-size:.95em}
.dofp .nf>span{display:flex;flex-direction:column}
.dofp .nf>span:last-child{text-align:right}
.dofp small{font-size:.66em;letter-spacing:.06em;color:#9A9AA6}
.dofp .fc{align-items:center;text-align:center}
.dofp .fc b{font-family:var(--font-sans);font-size:1.25em}
.dofp .bar{position:relative;height:.42em;border-radius:99em;background:#2A2A33}
.dofp .band{position:absolute;inset:0;display:block}
.dofp .band u,.dofp .band i{position:absolute;inset:0}
.dofp .band u{top:0;bottom:0;right:auto;background:var(--tungsten);border-radius:99em}
.dofp .bar em{position:absolute;top:-.25em;bottom:-.25em;width:.14em;background:#FFF}
.dofp .stp{display:flex;align-items:center;gap:.8em;font-size:.82em}
.dofp .chips{flex:1}
.dofp .chips i{display:flex;gap:.4em}
.dofp .chips u{text-decoration:none;padding:.25em .55em;border-radius:.35em;background:#1C1C21;color:#C9C9D2}
.dofp .chips u.on{background:var(--tungsten);color:#16100A}
.dofp .coc{font-size:.72em;color:#9A9AA6}
.dofwrap{padding:.6em}
.dofp.big{font-size:1.15em}

/* vertical: the app held upright, Extract then Rotated */
.vrow{display:grid;grid-template-columns:minmax(0,1fr) 11.6em minmax(0,1fr);gap:1em;align-items:center}
.pdev{grid-column:2;grid-row:1;border-radius:1.2em;border:1px solid #2A2A33;overflow:hidden}
.pdev .vt{justify-content:space-between;font-size:.6em}
.pdev .vp{aspect-ratio:9/16}
.pdev .vr{font-size:.6em}
.badge{font-family:var(--font-mono);font-size:.9em;font-weight:600;color:#A794FF;border:1px solid #A794FF;border-radius:.4em;padding:0 .35em;white-space:nowrap;flex:none}
.vtile{position:relative;display:flex;flex-direction:column;gap:.25em;padding:.9em;border-radius:.9em;background:#121217;border:1px solid #2A2A33;overflow:hidden}
.vtile.a{grid-column:1;grid-row:1}.vtile.b{grid-column:3;grid-row:1}
.vtile strong{font-size:.9em}
.vtile .d{white-space:normal;font-family:var(--font-mono)}
.vtile .hl{position:absolute;inset:0;border:2px solid var(--tungsten);border-radius:.9em}
@container (max-width:460px){.vrow{grid-template-columns:minmax(0,1fr) 8em minmax(0,1fr);gap:.5em}.vtile{padding:.6em}.vtile strong{font-size:.8em}}

/* the Basic PDF shot list page */
.pdf{width:min(26em,100%);margin:0 auto;background:#FFF;color:#16161A;border-radius:.4em;padding:1.2em 1.3em;box-shadow:0 1.4em 3em rgba(0,0,0,.5);font-size:.9em}
.pdh{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--tungsten);padding-bottom:.4em;margin-bottom:.7em}
.pdh b{font-size:1.1em}
.pdh span,.pdf .pf{font-family:var(--font-mono);font-size:.7em;color:#62626C}
.pr{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9em}
.pr li{display:grid;grid-template-columns:10em minmax(0,1fr);gap:.8em;align-items:start}
.pr .th{aspect-ratio:16/9;border-radius:.25em;overflow:hidden}
.pr .tx{display:flex;flex-direction:column;gap:.15em;font-size:.78em;color:#3D3D45;min-width:0}
.pr .tx strong{font-size:1.15em;color:#16161A}
.pr .nt{color:#62626C;font-style:italic}
.pf{margin-top:.8em;text-align:right}
@container (max-width:460px){.pr li{grid-template-columns:7em minmax(0,1fr)}}

/* the Apple Watch remote */
.watch{position:relative;width:14em;margin:0 auto;padding:1.1em;border-radius:3.6em;background:#1A1A1F;box-shadow:inset 0 0 0 .3em #2E2E36,0 1.4em 3em rgba(0,0,0,.5)}
.wf{display:flex;flex-direction:column;align-items:center;gap:.28em;padding:.9em .7em 1em;border-radius:2.6em;background:#000;font-family:var(--font-mono)}
.clk{align-self:flex-end;margin-right:.6em;font-family:var(--font-sans);font-weight:600;font-size:.85em}
.wp{position:relative;width:100%;aspect-ratio:16/9;border-radius:.6em;overflow:hidden;box-shadow:0 0 0 .12em #FFF}
.wfl{font-family:var(--font-sans);font-size:1.7em;font-weight:800;line-height:1.1}
.wln{font-size:.55em;color:#C9C9D2;white-space:nowrap}
.whint{font-size:.5em;letter-spacing:.06em;color:#77777F}
.wbt{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:.2em}
.ar{display:block;position:relative;width:2.2em;height:2.2em;border-radius:50%;background:#1F1F24}
.ar::after{content:"";position:absolute;left:55%;top:50%;width:.5em;height:.5em;border:solid #FFF;border-width:0 0 .14em .14em;transform:translate(-50%,-50%) rotate(45deg)}
.ar.r::after{left:45%;transform:translate(-50%,-50%) rotate(-135deg)}
.wsh{display:block;width:2.8em;height:2.8em;border-radius:50%;background:#FFF;box-shadow:0 0 0 .18em #000,0 0 0 .34em #77777F}
.crown{position:absolute;right:-.55em;top:30%;width:.9em;height:2.4em;border-radius:.3em;background:repeating-linear-gradient(0deg,#3A3A42 0 .2em,#26262C .2em .4em)}

/* gear counts */
.cnt{display:grid;grid-template-columns:repeat(3,max-content);gap:32px;font-size:16px}
.cnt>div{display:flex;flex-direction:column;min-width:0}
.cnt .n{display:inline-block;font-size:clamp(40px,2.4vw + 12px,52px);font-weight:820;font-stretch:112%;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:520px){.cnt{gap:18px}.cnt .n{font-size:clamp(26px,8vw,40px);font-stretch:100%}.cnt .k{font-size:14px}}
.cnt .k{font-family:var(--font-sans);font-size:15px;color:var(--body);margin-top:6px;letter-spacing:0}
.plain figcaption{display:none}

/* two lenses, looks, stand-ins, the math */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1em}
@container (max-width:460px){.duo{grid-template-columns:minmax(0,1fr);gap:.7em}}
.lut{position:absolute;inset:0;opacity:1}
.lut .g{filter:sepia(.35) saturate(1.45) contrast(1.12) brightness(1.04) hue-rotate(-8deg)}
.look-tag{position:absolute;left:.7em;bottom:.7em;display:flex;flex-direction:column;font-weight:700;font-size:.85em;background:rgba(18,18,23,.86);border:1px solid var(--tungsten);border-radius:.5em;padding:.35em .6em}
.look-tag small{font-family:var(--font-mono);font-size:.7em;color:var(--tungsten);letter-spacing:.06em}
.fg .who{position:absolute;bottom:6%;display:flex;flex-direction:column;align-items:center;aspect-ratio:1/3}
.fg .who svg{width:100%;height:100%;fill:rgba(240,151,59,.55);stroke:var(--tungsten);stroke-width:.6}
.fg .who span{position:absolute;bottom:-1.5em;font-family:var(--font-mono);font-size:.6em;color:#FFF;background:rgba(0,0,0,.7);border-radius:.3em;padding:0 .3em;white-space:nowrap}
.mthw{position:relative;max-width:30em;margin:0 auto}
.mth{display:block;width:100%;height:auto;overflow:visible}
.mth .gate{stroke:#FFF;stroke-width:2.4}
.mth .ray{fill:none;stroke:var(--tungsten);stroke-width:1}
.mth .arc{fill:none;stroke:var(--tungsten);stroke-width:1}
.mthw span{position:absolute;font-family:var(--font-mono);font-size:.78em;color:#C9C9D2;transform:translate(-50%,0);white-space:nowrap}
.mthw .m1{left:50%;bottom:0}.mthw .m2{left:74%;top:52%;color:#9A9AA6}.mthw .m3{left:50%;top:-2%;font-size:1.5em;color:#FFF}
.sm .sc-in,.wide .sc-in{padding:.9em}

/* ---------- Home and how-it-works sections ---------- */
.feature{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;padding:48px 0}
.feature.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.feature.flip .feature-copy{order:2}
@media (max-width:900px){.feature,.feature.flip{grid-template-columns:minmax(0,1fr);gap:20px;padding:28px 0}.feature.flip .feature-copy{order:0}}
.feature-copy{display:flex;flex-direction:column;gap:16px}
.feature-copy p{margin:0;color:var(--body)}
.rig{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.rig span{font-family:var(--font-mono);font-size:13px;border:1px solid #3A3A44;border-radius:8px;padding:8px 12px;color:#F2F2F5}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px}
@media (max-width:900px){.trio{grid-template-columns:minmax(0,1fr)}}
.trio h3{font-size:19px;margin:14px 0 6px}
.trio p{margin:0;font-size:15px;color:var(--body)}
.steps{counter-reset:step;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.step{background:var(--ink-card);border:1px solid #26262F;border-radius:14px;padding:22px}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);display:block;font-family:var(--font-mono);font-size:13px;color:var(--tungsten);margin-bottom:10px}
.step h3{font-size:19px;margin-bottom:8px}
.step p{margin:0;font-size:15px;color:var(--body)}
.formula{font-family:var(--font-mono);font-size:15px;background:var(--ink-card);border:1px solid #26262F;border-radius:10px;padding:14px 16px;color:#F2F2F5;overflow-x:auto;white-space:nowrap}
.trio.two-up{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}
@media (max-width:900px){.trio.two-up{grid-template-columns:minmax(0,1fr)}}
.stack-scenes{display:flex;flex-direction:column;gap:24px;min-width:0}
.trio-lead{min-width:0}
.prose .scene-fig{margin:20px 0 24px}
.prose .cnt{margin:4px 0 18px}
.plain .scene-ctl{display:none}

/* ---------- The clean feed on a monitor (how-it-works) ---------- */
.mon{position:relative;padding:.55em .55em 1.6em;border-radius:.7em;background:#1A1A1F;box-shadow:inset 0 0 0 1px #2E2E36,0 1.4em 3em rgba(0,0,0,.5)}
.mon::after{content:"";position:absolute;left:50%;bottom:.55em;width:3.2em;height:.35em;margin-left:-1.6em;border-radius:99em;background:#2E2E36}
.msc{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;font-family:var(--font-mono)}
.mfr,.mwait{position:absolute;left:0;right:0;top:12.8%;bottom:12.8%}
.mpic{position:absolute;inset:0}.mpic picture{display:block;width:100%;height:100%}
.mwait{display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px var(--tungsten);color:var(--tungsten);font-size:.62em;font-weight:600;letter-spacing:.07em}
.mwait.gone{opacity:0}
.mlt{position:absolute;left:2.5%;right:2.5%;bottom:0;height:12.8%;display:flex;flex-direction:column;justify-content:center;gap:.15em;white-space:nowrap;overflow:hidden;line-height:1.15}
.mlt b{font-weight:500;font-size:1.8cqw;color:#F2F2F5}
.mlt span{font-size:1.65cqw;color:#C9C9D2}
.mtl{position:absolute;right:2.5%;top:3.7%;display:flex;align-items:center;gap:.4em;padding:.25em .6em;border-radius:99em;background:rgba(0,0,0,.6);font-size:.56em;font-weight:600;color:#FFF}
.mtl .dot{width:.62em;height:.62em;border-radius:50%;background:#F05C4D}