/* =====================================================================
   BYND NOW · EDITS — scene graphics
   Shared by index.html (site) and scenes.html (capture gallery).
   Every .scn is a self-contained animated UI graphic sized in cqw, so it
   scales from a phone to a 1920px capture stage. scenes.js drives each
   timeline from one clock t (seconds, looping every data-t), so any frame
   can be seeked for screen capture or a HyperFrames port later.
   ===================================================================== */
.scn{
  --panel:#141416;--line:rgba(244,241,234,.10);--line-2:rgba(244,241,234,.06);
  --paper:#F4F1EA;--dim:#A8A49B;--faint:#8A857B;
  --gold:#C7A56B;--gold-soft:#E4CE9E;--gold-deep:#8C6F3D;
  --ease:cubic-bezier(.16,1,.3,1);
  position:relative;overflow:hidden;isolation:isolate;container-type:inline-size;
  aspect-ratio:16/11;border-radius:16px;border:1px solid var(--line);
  background:
    radial-gradient(80% 60% at 88% -6%,rgba(199,165,107,.11),transparent 62%),
    radial-gradient(60% 50% at 0% 110%,rgba(199,165,107,.05),transparent 60%),
    linear-gradient(180deg,#161618,#0F0F11);
  color:var(--paper);font-family:'DM Sans',system-ui,sans-serif;
}
.scn *,.scn *::before,.scn *::after{box-sizing:border-box}
.scn img,.scn video{display:block;user-select:none;-webkit-user-drag:none}
.scn:not(.on) *,.scn:not(.on) *::before,.scn:not(.on) *::after{animation-play-state:paused!important}

/* top bar */
.scn-bar{
  position:absolute;inset:0 0 auto 0;height:6cqw;z-index:5;
  display:flex;align-items:center;justify-content:space-between;padding:0 2.6cqw;
  border-bottom:1px solid var(--line-2);
  font:500 1.45cqw/1 'IBM Plex Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
}
.scn-bar b{color:var(--gold);font-weight:500}
.scn-bar .live{display:inline-flex;align-items:center;gap:.9cqw}
.scn-bar .live::before{content:"";width:.85cqw;height:.85cqw;border-radius:50%;background:var(--gold);box-shadow:0 0 1.2cqw rgba(199,165,107,.85);animation:scnBlink 1.6s steps(2,start) infinite}
@keyframes scnBlink{to{visibility:hidden}}
.scn-body{position:absolute;inset:6cqw 0 0 0}
.mono-s{font-family:'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase}

/* phone / vertical frame */
.ph{
  position:absolute;aspect-ratio:9/16;border-radius:2.2cqw;overflow:hidden;background:#000;
  border:.32cqw solid #2A2A2E;
  box-shadow:0 2.4cqw 6cqw rgba(0,0,0,.6),0 0 0 1px rgba(244,241,234,.05);
}
.ph>video,.ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-l{left:3.4cqw;top:3.2cqw;bottom:3.6cqw;height:auto}
.chip{
  display:inline-flex;align-items:center;gap:.7cqw;white-space:nowrap;
  font:500 1.3cqw/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:.9cqw 1.4cqw;background:rgba(14,14,14,.6);
}
.chip.g{color:var(--gold);border-color:rgba(199,165,107,.45)}
.chip.on{background:var(--gold);color:#0E0E0E;border-color:var(--gold)}

/* =================== HERO · job card + phone =================== */
.scn-hero{aspect-ratio:1/1.06;border:0;background:none;overflow:visible}
.scn-hero::before{content:"";position:absolute;left:-6%;top:4%;width:70%;height:80%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(199,165,107,.22),transparent 70%);filter:blur(10px);z-index:-1}
.hs-phone{left:5%;top:0;height:86%;border-radius:4.6cqw;border-width:.6cqw}
.hs-phone::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 18%,transparent 70%,rgba(0,0,0,.35))}
.hs-notch{position:absolute;top:1.6cqw;left:50%;width:18%;height:2.6cqw;border-radius:2cqw;background:#000;transform:translateX(-50%);z-index:2}
.hs-card{
  position:absolute;right:0;bottom:3%;width:64%;z-index:3;
  border:1px solid rgba(244,241,234,.13);border-radius:2.4cqw;padding:2.6cqw 2.8cqw 2.4cqw;
  background:linear-gradient(180deg,rgba(26,26,29,.92),rgba(16,16,18,.94));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 3cqw 8cqw rgba(0,0,0,.6),inset 0 1px 0 rgba(244,241,234,.06);
}
.hs-top{display:flex;justify-content:space-between;align-items:center;font:500 1.75cqw/1 'IBM Plex Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);padding-bottom:2cqw;border-bottom:1px solid var(--line-2)}
.hs-top b{color:var(--paper);font-weight:500}
.hs-top .dot{display:inline-block;width:1.1cqw;height:1.1cqw;border-radius:50%;background:var(--gold);margin-right:1cqw;box-shadow:0 0 1.4cqw rgba(199,165,107,.8)}
.hs-main{display:grid;grid-template-columns:40% 1fr;gap:2.6cqw;padding-top:2.4cqw}
.hs-drop{position:relative;aspect-ratio:1/1.12;border:1px dashed rgba(244,241,234,.18);border-radius:1.8cqw;display:grid;place-items:center;background:rgba(244,241,234,.02)}
.hs-file{
  position:absolute;left:1.4cqw;right:1.4cqw;top:1.4cqw;display:flex;gap:1.2cqw;align-items:center;
  padding:1.2cqw;border-radius:1.2cqw;background:rgba(244,241,234,.06);border:1px solid var(--line);
  opacity:var(--file,0);transform:translateY(calc((1 - var(--file,0)) * -2cqw));
}
.hs-file .ic{flex:none;width:3.6cqw;height:3.6cqw;border-radius:.9cqw;background:var(--gold);display:grid;place-items:center}
.hs-file .ic::after{content:"";border-left:1.3cqw solid #0E0E0E;border-top:.8cqw solid transparent;border-bottom:.8cqw solid transparent;margin-left:.3cqw}
.hs-file b{display:block;font:600 1.75cqw/1.15 'DM Sans',sans-serif;color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-file i{display:block;font:400 1.3cqw/1.3 'IBM Plex Mono',monospace;font-style:normal;color:var(--faint);letter-spacing:.04em;margin-top:.3cqw;white-space:nowrap}
.hs-ring{width:58%;margin-top:6cqw;transform:rotate(-90deg)}
.hs-ring circle{fill:none;stroke-width:6}
.hs-ring .trk{stroke:rgba(244,241,234,.08)}
.hs-ring .prg{stroke:var(--gold);stroke-linecap:round;stroke-dasharray:314.16;stroke-dashoffset:calc(314.16 * (1 - var(--p,0)));filter:drop-shadow(0 0 4px rgba(199,165,107,.6))}
.hs-pct{position:absolute;left:0;right:0;top:calc(50% + 3cqw);text-align:center;transform:translateY(-50%);font:400 5.4cqw/1 'Bebas Neue',sans-serif;letter-spacing:.02em;color:var(--paper);opacity:calc(1 - var(--dn,0))}
.hs-done{position:absolute;left:50%;top:calc(50% + 3cqw);width:8cqw;height:8cqw;border-radius:50%;background:var(--gold);transform:translate(-50%,-50%) scale(var(--dn,0));display:grid;place-items:center}
.hs-done::after{content:"";width:2.2cqw;height:3.8cqw;border:solid #0E0E0E;border-width:0 .7cqw .7cqw 0;transform:translateY(-.4cqw) rotate(45deg)}
.hs-list{list-style:none;display:flex;flex-direction:column;justify-content:space-between;margin:0;padding:0}
.hs-list li{display:flex;align-items:center;gap:1.4cqw;font:500 2.2cqw/1 'DM Sans',sans-serif;color:color-mix(in srgb,var(--paper) calc(var(--k,0) * 100%),var(--faint))}
.hs-list li em{margin-left:auto;font:400 1.3cqw/1 'IBM Plex Mono',monospace;font-style:normal;letter-spacing:.08em;color:var(--gold);opacity:var(--k,0);transform:translateX(calc((1 - var(--k,0)) * -1cqw))}
.hs-list .bx{flex:none;width:2.5cqw;height:2.5cqw;border-radius:.6cqw;border:1px solid color-mix(in srgb,var(--gold) calc(var(--k,0) * 100%),rgba(244,241,234,.22));background:rgba(199,165,107,var(--k,0));display:grid;place-items:center}
.hs-list .bx::after{content:"";width:.7cqw;height:1.3cqw;border:solid #0E0E0E;border-width:0 .32cqw .32cqw 0;transform:translateY(-.15cqw) rotate(45deg) scale(var(--k,0))}
.hs-foot{display:flex;justify-content:space-between;align-items:center;margin-top:2.4cqw;padding-top:2cqw;border-top:1px solid var(--line-2);font:500 1.5cqw/1 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.hs-foot b{color:var(--gold);font-weight:500}
.hs-bar{flex:1;height:.5cqw;margin:0 2cqw;border-radius:1cqw;background:rgba(244,241,234,.08);overflow:hidden}
.hs-bar i{display:block;height:100%;width:calc(var(--p,0) * 100%);background:linear-gradient(90deg,var(--gold-deep),var(--gold))}
.hs-chip{position:absolute;z-index:4;font-size:1.7cqw;padding:1.1cqw 1.7cqw;background:rgba(20,20,22,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hs-chip.c1{right:6%;top:6%}
.hs-chip.c2{left:0;bottom:22%}
.hs-chip.c3{right:14%;top:17%}
.hs-float{animation:hsFloat 6s ease-in-out infinite}
.hs-float.c2{animation-delay:-2s}.hs-float.c3{animation-delay:-4s}
@keyframes hsFloat{50%{transform:translateY(-1.2cqw)}}

/* =================== CUT · fillers out =================== */
.cut-ui{position:absolute;left:38.5cqw;right:3.4cqw;top:3.2cqw;bottom:3.6cqw;display:flex;flex-direction:column}
.cut-head{display:flex;justify-content:space-between;align-items:flex-end}
.cut-head .k{font:500 1.4cqw/1.4 'IBM Plex Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.cut-head .k b{display:block;color:var(--paper);font-weight:500}
.cut-n{font:400 8.4cqw/.8 'Bebas Neue',sans-serif;letter-spacing:.01em;color:var(--paper)}
.cut-n small{font:500 1.5cqw/1 'IBM Plex Mono',monospace;letter-spacing:.14em;color:var(--faint);margin-left:.6cqw}
.cut-n.down{color:var(--gold-soft)}
.cut-wrap{position:relative;margin-top:auto;padding-top:4.2cqw}
.cut-track{display:flex;gap:.35cqw;height:24cqw}
.sg{position:relative;flex:calc(var(--w) * (1 - var(--g,0))) 1 0;min-width:0;display:flex;flex-direction:column;gap:.7cqw;opacity:calc(1 - var(--g,0));margin-right:calc(var(--g,0) * -.35cqw)}
.sg .fs{height:8.6cqw;border-radius:.6cqw;background-color:#0B0B0C;background-size:auto 100%;background-repeat:repeat-x;background-position:var(--bx,0) 0;filter:saturate(.9);border:1px solid rgba(244,241,234,.08)}
.sg .wv{flex:1;display:flex;align-items:center;gap:.16cqw;padding:0 .3cqw;border-radius:.6cqw;background:rgba(199,165,107,calc(var(--m,0) * .13));box-shadow:inset 0 0 0 1px rgba(199,165,107,calc(var(--m,0) * .65))}
.sg .wv i{flex:1;min-width:1px;height:calc(var(--h) * 1%);background:rgba(244,241,234,.55);border-radius:.3cqw}
.sg.f .wv i{background:color-mix(in srgb,var(--gold) calc(var(--m,0) * 100%),rgba(244,241,234,.26))}
.sg.f .fs{filter:saturate(.4) brightness(.75)}
.sg.f .fs{box-shadow:inset 0 0 0 1px rgba(199,165,107,calc(var(--m,0) * .65))}
.sg .tg{position:absolute;left:50%;top:-3.6cqw;transform:translate(-50%,calc((1 - var(--m,0)) * .8cqw)) scale(calc(.9 + var(--m,0) * .1));opacity:calc(var(--m,0) * (1 - var(--g,0)));white-space:nowrap;
  font:500 1.3cqw/1 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#0E0E0E;background:var(--gold);border-radius:.6cqw;padding:.6cqw .9cqw}
.cut-ph{position:absolute;top:3.6cqw;bottom:-.6cqw;width:2px;margin-left:-1px;left:calc(var(--ph,0) * 100%);background:var(--gold);box-shadow:0 0 1cqw rgba(199,165,107,.9);opacity:var(--pho,0)}
.cut-ph::before{content:"";position:absolute;top:-.2cqw;left:50%;width:1.4cqw;height:1.4cqw;transform:translateX(-50%) rotate(45deg);background:var(--gold);border-radius:.2cqw}
.cut-foot{display:flex;align-items:center;gap:1.4cqw;margin-top:2.4cqw}
.cut-foot .st{margin-left:auto;font:500 1.3cqw/1.5 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);text-align:right;opacity:var(--rs,0)}
.cut-foot .st b{color:var(--gold);font-weight:500}
.cut-track{opacity:var(--tf,1)}

/* =================== GRADE · log → graded =================== */
.gr-ph .before{clip-path:inset(0 calc((1 - var(--x,1)) * 100%) 0 0)}
.gr-div{position:absolute;top:0;bottom:0;left:calc(var(--x,1) * 100%);width:2px;margin-left:-1px;background:var(--paper);box-shadow:0 0 1cqw rgba(0,0,0,.6);z-index:2}
.gr-div::after{content:"‹ ›";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:4.4cqw;height:4.4cqw;border-radius:50%;background:var(--paper);color:#0E0E0E;display:grid;place-items:center;font:600 1.6cqw/1 'DM Sans',sans-serif;letter-spacing:.1em;box-shadow:0 .6cqw 2cqw rgba(0,0,0,.5)}
.gr-lb{position:absolute;top:1.6cqw;z-index:3;font:500 1.2cqw/1 'IBM Plex Mono',monospace;letter-spacing:.16em;padding:.6cqw .9cqw;border-radius:.5cqw;background:rgba(0,0,0,.55);color:var(--paper)}
.gr-lb.l{left:1.6cqw;opacity:calc(var(--x,1) * 3 - .3)}
.gr-lb.r{right:1.6cqw;background:var(--gold);color:#0E0E0E;opacity:calc((1 - var(--x,1)) * 3 - .3)}
.gr-ui{position:absolute;left:38.5cqw;right:3.4cqw;top:3.2cqw;bottom:3.6cqw;display:flex;flex-direction:column}
.gr-wheels{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6cqw}
.wh{text-align:center}
.wh .disc{position:relative;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(232,232,232,.92),rgba(200,200,200,.2) 62%,transparent 72%),
    conic-gradient(from 90deg,#d65c5c,#d6b45c,#8fd65c,#5cd6a8,#5c9ad6,#8c5cd6,#d65cb8,#d65c5c);
  box-shadow:inset 0 0 0 .5cqw #161618,inset 0 0 0 .62cqw rgba(244,241,234,.14),0 1cqw 3cqw rgba(0,0,0,.4);opacity:.9}
.wh .disc::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,transparent 58%,rgba(14,14,14,.5) 100%)}
.wh .puck{position:absolute;left:calc(50% + var(--px,0) * 38%);top:calc(50% + var(--py,0) * 38%);width:2.4cqw;height:2.4cqw;margin:-1.2cqw 0 0 -1.2cqw;border-radius:50%;border:.35cqw solid #fff;background:rgba(14,14,14,.35);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 .4cqw 1cqw rgba(0,0,0,.4)}
.wh b{display:block;margin-top:1.5cqw;font:500 1.3cqw/1 'IBM Plex Mono',monospace;letter-spacing:.2em;color:var(--faint)}
.wh span{display:block;margin-top:.7cqw;font:500 1.3cqw/1 'IBM Plex Mono',monospace;letter-spacing:.06em;color:var(--gold)}
.gr-sl{margin-top:auto;display:flex;flex-direction:column;gap:1.7cqw}
.gr-sl .row{display:grid;grid-template-columns:13cqw 1fr 6cqw;align-items:center;gap:1.6cqw;font:500 1.3cqw/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.gr-sl .row em{font-style:normal;text-align:right;color:var(--paper);letter-spacing:.04em}
.gr-sl .tr{position:relative;height:.5cqw;border-radius:1cqw;background:rgba(244,241,234,.1)}
.gr-sl .tr i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--v,0) * 100%);border-radius:1cqw;background:linear-gradient(90deg,var(--gold-deep),var(--gold))}
.gr-sl .tr i::after{content:"";position:absolute;right:-1cqw;top:50%;width:2cqw;height:2cqw;margin-top:-1cqw;border-radius:50%;background:var(--paper);box-shadow:0 .3cqw 1cqw rgba(0,0,0,.5)}
.gr-tags{display:flex;gap:1cqw;margin-top:2.6cqw;flex-wrap:wrap}

/* =================== DEPTH · words behind you =================== */
.dp-ph .word{
  position:absolute;left:0;right:0;top:14.5%;text-align:center;z-index:1;
  font:400 11cqw/.82 'Bebas Neue',sans-serif;letter-spacing:.01em;color:var(--gold-soft);
  text-shadow:0 .6cqw 3cqw rgba(0,0,0,.35);
  transform:translateY(calc((1 - var(--rise,0)) * 60%));opacity:var(--rise,0);
}
.dp-ph .word small{display:block;font:500 1.25cqw/1 'IBM Plex Mono',monospace;letter-spacing:.3em;color:var(--paper);margin-bottom:1.2cqw;opacity:.85}
.dp-ph .fg{z-index:2}
/* Mira rooftop (SEBAZ, C7799 19.7 s): wide frame, the word reads like a masthead behind her head */
.dp-ph .bg,.dp-ph .fg{transform-origin:50% 30%;transform:scale(calc(1.14 - var(--rise,0) * .06))}
.dp-ui{position:absolute;left:38.5cqw;right:3.4cqw;top:3.2cqw;bottom:3.6cqw;display:flex;flex-direction:column;justify-content:center;gap:2cqw}
.ly{position:relative;display:grid;grid-template-columns:7cqw 1fr;gap:2cqw;align-items:center;padding:1.8cqw;border-radius:1.6cqw;border:1px solid color-mix(in srgb,rgba(199,165,107,.6) calc(var(--h,0) * 100%),var(--line));background:rgba(199,165,107,calc(.02 + var(--h,0) * .06))}
.ly .th{position:relative;aspect-ratio:9/12;border-radius:.8cqw;overflow:hidden;background:#0B0B0C;border:1px solid var(--line)}
.ly .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ly .th .tw{position:absolute;inset:0;display:grid;place-items:center;font:400 3.4cqw/1 'Bebas Neue',sans-serif;color:var(--gold-soft)}
.ly b{display:block;font:600 2.1cqw/1.15 'DM Sans',sans-serif;color:var(--paper)}
.ly span{display:block;margin-top:.6cqw;font:500 1.25cqw/1.4 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.ly .n{font-style:normal;position:absolute;right:1.8cqw;top:1.6cqw;font:500 1.3cqw/1 'IBM Plex Mono',monospace;letter-spacing:.14em;color:var(--faint)}
.ly .n{color:color-mix(in srgb,var(--gold) calc(var(--h,0) * 100%),var(--faint))}
.dp-note{font:500 1.3cqw/1.5 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);display:flex;align-items:center;gap:1cqw}
.dp-note::before{content:"";width:3cqw;height:1px;background:var(--gold)}

/* =================== MOTION · exploded layers =================== */
.mo-stage{position:absolute;left:0;top:0;bottom:0;width:58%;perspective:220cqw;perspective-origin:50% 40%}
.mo-stack{position:absolute;left:50%;top:50%;width:25cqw;aspect-ratio:9/16;margin:0;transform-style:preserve-3d;
  transform:translate(-50%,-50%) rotateX(calc(var(--ex,0) * 56deg)) rotateZ(calc(var(--ex,0) * -36deg)) scale(calc(1 - var(--ex,0) * .12))}
.pl{position:absolute;inset:0;border-radius:1.6cqw;overflow:hidden;transform:translateZ(calc(var(--i) * var(--ex,0) * 6.2cqw));
  border:1px solid rgba(244,241,234,calc(.04 + var(--ex,0) * .22));background:rgba(244,241,234,calc(var(--ex,0) * .025))}
.pl.p1{background:#000}
.pl.p1 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(calc(1 - var(--ex,0) * .7)) contrast(calc(1 - var(--ex,0) * .18)) brightness(calc(1 + var(--ex,0) * .08))}
.pl.p2{background:linear-gradient(170deg,rgba(199,165,107,calc(.10 + var(--ex,0) * .28)),rgba(40,60,90,calc(.05 + var(--ex,0) * .22)) 70%,rgba(0,0,0,.25));mix-blend-mode:normal}
.pl.p3 svg{position:absolute;left:8%;right:8%;top:24%;width:84%}
.pl.p3 .bar{fill:var(--gold);transform-origin:bottom;transform-box:fill-box;transform:scaleY(var(--grow,1))}
.pl.p3 .ln{fill:none;stroke:var(--gold-soft);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:90;stroke-dashoffset:calc(90 * (1 - var(--grow,1)))}
.pl.p3 .big{position:absolute;left:8%;top:9%;font:400 6.4cqw/1 'Bebas Neue',sans-serif;color:var(--paper);letter-spacing:.01em}
.pl.p4 .cp{position:absolute;left:6%;right:6%;bottom:16%;text-align:center;font:400 3.6cqw/1 'Bebas Neue',sans-serif;letter-spacing:.02em;color:var(--paper)}
.pl.p4 .cp em{font-style:normal;color:#0E0E0E;background:var(--gold);padding:0 .5cqw;border-radius:.3cqw}
.pl.p5 .lg{position:absolute;left:7%;top:5%;font:400 2.2cqw/1 'Bebas Neue',sans-serif;letter-spacing:.06em;color:var(--paper)}
.pl.p5 .lg b{color:var(--gold);font-weight:400}
.pl.p5 .pb{position:absolute;left:7%;right:7%;bottom:5%;height:.45cqw;border-radius:1cqw;background:rgba(244,241,234,.2);overflow:hidden}
.pl.p5 .pb i{display:block;height:100%;width:62%;background:var(--gold)}
.pl .tag{position:absolute;right:5%;top:4%;font:500 1.15cqw/1 'IBM Plex Mono',monospace;letter-spacing:.1em;color:#0E0E0E;background:var(--gold);border-radius:.4cqw;padding:.45cqw .6cqw;opacity:var(--ex,0)}
.pl{box-shadow:0 0 3cqw rgba(199,165,107,calc(var(--h,0) * .35))}
.pl.hl{border-color:var(--gold)}
.mo-ui{position:absolute;left:58%;right:3.4cqw;top:3.2cqw;bottom:3.6cqw;display:flex;flex-direction:column;justify-content:center;gap:1.25cqw}
.mo-ui .ttl{font:500 1.35cqw/1 'IBM Plex Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:1cqw}
.mo-row{display:flex;align-items:center;gap:1.6cqw;padding:1.35cqw 1.6cqw;border-radius:1.2cqw;border:1px solid color-mix(in srgb,rgba(199,165,107,.6) calc(var(--h,0) * 100%),var(--line));background:rgba(199,165,107,calc(var(--h,0) * .07));font:500 1.9cqw/1 'DM Sans',sans-serif;color:color-mix(in srgb,var(--paper) calc(var(--in,0) * 100%),var(--faint));transform:translateX(calc((1 - var(--in,0)) * 2cqw));opacity:calc(.5 + var(--in,0) * .5)}
.mo-row i{font:500 1.25cqw/1 'IBM Plex Mono',monospace;font-style:normal;letter-spacing:.1em;color:var(--faint);width:3cqw}
.mo-row em{margin-left:auto;font:500 1.2cqw/1 'IBM Plex Mono',monospace;font-style:normal;letter-spacing:.08em;color:var(--faint)}
.mo-row i,.mo-row em{color:color-mix(in srgb,var(--gold) calc(var(--h,0) * 100%),var(--faint))}

/* =================== CAPTIONS · style + language =================== */
.cap{position:absolute;left:6%;right:6%;top:64%;z-index:2;text-align:center;line-height:1.05}
.cap span{display:inline-block;margin:0 .35em .12em 0}
.cap.s-gold{font:400 4.4cqw/1 'Bebas Neue',sans-serif;letter-spacing:.02em;color:var(--paper);text-shadow:0 .3cqw 1.2cqw rgba(0,0,0,.7)}
.cap.s-gold span.a{color:var(--gold);transform:scale(1.08)}
.cap.s-clean{font:600 2.5cqw/1.15 'DM Sans',sans-serif;color:#fff;text-shadow:0 .2cqw 1cqw rgba(0,0,0,.8)}
.cap.s-clean span{opacity:.55}
.cap.s-clean span.a,.cap.s-clean span.p{opacity:1}
.cap.s-clean span.a{color:var(--gold-soft)}
.cap.s-box{font:800 2.6cqw/1.1 'DM Sans',sans-serif;text-transform:uppercase;letter-spacing:-.01em;color:#fff;text-shadow:0 .2cqw .8cqw rgba(0,0,0,.6)}
.cap.s-box span{padding:.25cqw .6cqw;border-radius:.5cqw}
.cap.s-box span.a{background:var(--gold);color:#0E0E0E;text-shadow:none;transform:rotate(-2deg) scale(1.06)}
.cp-ui{position:absolute;left:38.5cqw;right:3.4cqw;top:3.2cqw;bottom:3.6cqw;display:flex;flex-direction:column;gap:1.3cqw}
.cp-ui .ttl{font:500 1.35cqw/1 'IBM Plex Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin:.4cqw 0 .6cqw}
.opt{display:flex;align-items:center;gap:1.8cqw;padding:1.5cqw 1.8cqw;border-radius:1.3cqw;border:1px solid var(--line);background:rgba(244,241,234,.02)}
.opt .sw{flex:none;width:6.6cqw;height:3.6cqw;border-radius:.6cqw;background:#0B0B0C;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.opt .sw.a{font:400 2.4cqw/1 'Bebas Neue',sans-serif;color:var(--gold);letter-spacing:.04em}
.opt .sw.b{font:600 1.7cqw/1 'DM Sans',sans-serif;color:#fff}
.opt .sw.c{font:800 1.5cqw/1 'DM Sans',sans-serif}
.opt .sw.c i{font-style:normal;background:var(--gold);color:#0E0E0E;padding:.25cqw .5cqw;border-radius:.3cqw}
.opt b{font:600 1.9cqw/1.1 'DM Sans',sans-serif;color:var(--paper)}
.opt div span{display:block;font:500 1.2cqw/1.4 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:.4cqw}
.opt.on{border-color:rgba(199,165,107,.7);background:rgba(199,165,107,.08)}
.opt .rd{margin-left:auto;flex:none;width:2.2cqw;height:2.2cqw;border-radius:50%;border:1px solid rgba(244,241,234,.25);position:relative}
.opt.on .rd{border-color:var(--gold)}
.opt.on .rd::after{content:"";position:absolute;inset:.45cqw;border-radius:50%;background:var(--gold)}
.langs{display:flex;gap:1cqw}
.langs .chip{font-size:1.4cqw}
.cursor{position:absolute;z-index:6;width:3cqw;left:0;top:0;transform:translate(var(--cx,60cqw),var(--cy,30cqw)) scale(var(--cs,1));pointer-events:none;filter:drop-shadow(0 .4cqw .8cqw rgba(0,0,0,.6))}

/* =================== SOUND · spectrum + lanes =================== */
.so-spec{position:absolute;left:3.4cqw;right:3.4cqw;top:3.6cqw;height:25cqw;display:flex;align-items:flex-end;gap:.55cqw}
.so-spec i{flex:1;height:calc(var(--h,.1) * 100%);border-radius:.4cqw .4cqw .1cqw .1cqw;background:linear-gradient(180deg,var(--gold-soft),var(--gold) 45%,var(--gold-deep));opacity:calc(.35 + var(--h,.1) * .65)}
.so-spec::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--line)}
.so-lanes{position:absolute;left:3.4cqw;right:3.4cqw;top:32cqw;display:flex;flex-direction:column;gap:1.2cqw}
.lane{display:grid;grid-template-columns:15cqw 1fr;gap:1.6cqw;align-items:center}
.lane .lb{font:500 1.3cqw/1.35 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.lane .lb b{display:block;color:var(--paper);font-weight:500}
.lane .tk{position:relative;height:4.6cqw;border-radius:.8cqw;background:rgba(244,241,234,.035);border:1px solid var(--line-2);overflow:hidden}
.lane .blk{position:absolute;top:18%;bottom:18%;border-radius:.6cqw;background:rgba(244,241,234,.16);display:flex;align-items:center;gap:.14cqw;padding:0 .5cqw}
.lane .blk i{flex:1;height:calc(var(--h) * 1%);background:rgba(244,241,234,.6);border-radius:.2cqw}
.lane svg{position:absolute;inset:0;width:100%;height:100%}
.lane .mus{fill:rgba(199,165,107,.2);stroke:var(--gold);stroke-width:1.2;vector-effect:non-scaling-stroke}
.lane .hit{position:absolute;top:50%;width:1.9cqw;height:1.9cqw;margin:-.95cqw 0 0 -.95cqw;transform:rotate(45deg);border-radius:.25cqw;background:var(--gold);box-shadow:0 0 1.4cqw rgba(199,165,107,.7)}
.lane .hit.fl{animation:none;box-shadow:0 0 3cqw rgba(228,206,158,1);background:var(--gold-soft)}
.so-ph{position:absolute;top:31.2cqw;height:17.8cqw;width:2px;margin-left:-1px;background:var(--paper);box-shadow:0 0 1cqw rgba(244,241,234,.6);left:calc(20cqw + 76.6cqw * var(--ph,0))}
.so-foot{position:absolute;left:3.4cqw;right:3.4cqw;bottom:3cqw;display:flex;justify-content:space-between;font:500 1.3cqw/1 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.so-foot b{color:var(--gold);font-weight:500}

/* =================== BRAND · site → kit → reel =================== */
.br-web{position:absolute;left:3.4cqw;top:3.2cqw;width:58cqw;height:35cqw;border-radius:1.4cqw;overflow:hidden;border:1px solid rgba(244,241,234,.14);background:#0B0B0C;box-shadow:0 2cqw 5cqw rgba(0,0,0,.5)}
.br-web .bb{height:3.6cqw;display:flex;align-items:center;gap:.7cqw;padding:0 1.4cqw;background:#1C1C1F;border-bottom:1px solid var(--line-2)}
.br-web .bb i{width:.95cqw;height:.95cqw;border-radius:50%;background:rgba(244,241,234,.18)}
.br-web .bb span{margin-left:1.6cqw;flex:1;height:2.1cqw;border-radius:1cqw;background:rgba(244,241,234,.06);font:500 1.15cqw/2.1cqw 'IBM Plex Mono',monospace;letter-spacing:.06em;color:var(--dim);padding-left:1.2cqw}
.br-web .shot{position:absolute;left:0;right:0;top:3.6cqw;bottom:0;background-size:cover;background-position:top center}
.br-pick{position:absolute;z-index:4;width:4.2cqw;height:4.2cqw;margin:-2.1cqw 0 0 -2.1cqw;border-radius:50%;border:.4cqw solid #fff;background:var(--c,#fff);box-shadow:0 .5cqw 1.6cqw rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.4);
  left:calc(3.4cqw + var(--cx,50) * .58cqw);top:calc(6.8cqw + var(--cy,50) * .316cqw);transform:scale(var(--cs,1));opacity:var(--co,0)}
.br-kit{position:absolute;left:3.4cqw;top:41cqw;width:58cqw;bottom:3.6cqw;display:flex;flex-direction:column;gap:1.4cqw}
.br-kit .ttl{font:500 1.3cqw/1 'IBM Plex Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.br-row{display:flex;gap:1.2cqw;flex:1}
.sw2{flex:1;border-radius:1.1cqw;border:1px dashed rgba(244,241,234,calc(.16 * (1 - var(--f,0))));position:relative;overflow:hidden}
.sw2 .fill{position:absolute;inset:0;background:var(--c);transform:scaleY(var(--f,0));transform-origin:bottom}
.sw2 span{position:absolute;left:1cqw;bottom:.9cqw;font:500 1.1cqw/1 'IBM Plex Mono',monospace;letter-spacing:.06em;color:var(--t,#0E0E0E);opacity:calc(var(--f,0) * 2 - 1)}
.sw2.font,.sw2.logo{display:grid;place-items:center;background:rgba(244,241,234,.02)}
.sw2.font b{text-align:center;font:600 3.2cqw/1 var(--bf,'DM Sans'),sans-serif;color:var(--paper);opacity:var(--f,0);transform:translateY(calc((1 - var(--f,0)) * 1cqw))}
.sw2.logo b{font:600 1.7cqw/1.1 'DM Sans',sans-serif;letter-spacing:.18em;color:var(--paper);opacity:var(--f,0);transform:translateY(calc((1 - var(--f,0)) * 1cqw))}
.sw2.font b small{display:block;margin-top:.7cqw;font:500 .95cqw/1 'IBM Plex Mono',monospace;letter-spacing:.08em;color:var(--dim)}
.sw2.font,.sw2.logo{border-style:solid;border-color:rgba(244,241,234,calc(.08 + var(--f,0) * .1))}
.br-ph{right:3.4cqw;top:3.2cqw;bottom:3.6cqw;transform:translateY(calc((1 - var(--up,0)) * 8cqw));opacity:var(--up,0)}
.br-ph .lbl{position:absolute;left:0;right:0;top:-0;z-index:2;padding:1.4cqw;font:500 1.15cqw/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#0E0E0E;background:var(--gold);text-align:center}
.br-arrow{position:absolute;left:61.9cqw;top:28cqw;width:2.4cqw;height:2px;background:var(--gold);opacity:var(--up,0)}
.br-arrow::after{content:"";position:absolute;right:-.2cqw;top:-.7cqw;border-left:1.2cqw solid var(--gold);border-top:.75cqw solid transparent;border-bottom:.75cqw solid transparent}

/* =================== FORMATS · one edit, every feed =================== */
.scn-fmt{aspect-ratio:16/12}
.fm-box{position:absolute;left:50%;top:44%;width:var(--fw,30cqw);height:var(--fh,53cqw);transform:translate(-50%,-50%);border-radius:1.6cqw;overflow:hidden;border:1px solid rgba(244,241,234,.2);box-shadow:0 2cqw 6cqw rgba(0,0,0,.6)}
.fm-box img,.fm-box video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fm-ghost{position:absolute;left:50%;top:44%;border:1px dashed rgba(244,241,234,.12);border-radius:1.2cqw;transform:translate(-50%,-50%)}
.fm-tabs{position:absolute;left:0;right:0;bottom:4cqw;display:flex;justify-content:center;gap:1.2cqw}
.fm-tabs .chip{font-size:1.5cqw;padding:1.1cqw 1.6cqw}
.fm-cap{position:absolute;left:0;right:0;bottom:10.5cqw;text-align:center;font:500 1.45cqw/1 'IBM Plex Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}

/* =================== WAYS-IN mini graphics =================== */
.wv-box{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;border:1px solid var(--line);container-type:inline-size;
  background:radial-gradient(70% 60% at 80% 0%,rgba(199,165,107,.10),transparent 60%),linear-gradient(180deg,#161618,#0F0F11)}
/* 01 · you film */
.w1 .ph{left:50%;top:9%;height:118%;transform:translateX(-50%) rotate(-6deg);border-radius:4cqw;border-width:.8cqw}
.w1 .rec{position:absolute;left:8%;top:5%;z-index:2;font:500 3.6cqw/1 'IBM Plex Mono',monospace;letter-spacing:.1em;color:#fff;display:flex;align-items:center;gap:1.6cqw;background:rgba(0,0,0,.55);padding:1.4cqw 2cqw;border-radius:6cqw}
.w1 .rec::before{content:"";width:2.2cqw;height:2.2cqw;border-radius:50%;background:#E5484D;animation:scnBlink 1.2s steps(2,start) infinite}
.w1 .up{position:absolute;right:6%;bottom:10%;z-index:3;width:42%;padding:2.6cqw;border-radius:3cqw;background:rgba(20,20,22,.92);border:1px solid rgba(244,241,234,.14);font:500 2.8cqw/1.2 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);box-shadow:0 3cqw 6cqw rgba(0,0,0,.5)}
.w1 .up b{color:var(--paper);font-weight:500}
.w1 .up .tr{margin-top:2cqw;height:1cqw;border-radius:1cqw;background:rgba(244,241,234,.1);overflow:hidden}
.w1 .up .tr i{display:block;height:100%;background:var(--gold);animation:w1up 4.5s var(--ease) infinite}
@keyframes w1up{0%{width:0}70%,100%{width:100%}}
/* 02 · script */
.w2 .doc{position:absolute;left:12%;right:12%;top:12%;bottom:-6%;border-radius:3cqw 3cqw 0 0;background:#F4F1EA;color:#0E0E0E;padding:6cqw 6cqw;box-shadow:0 3cqw 8cqw rgba(0,0,0,.5)}
.w2 .doc .h{font:500 2.6cqw/1 'IBM Plex Mono',monospace;letter-spacing:.2em;color:#8C6F3D;margin-bottom:3.4cqw}
.w2 .ln{display:flex;gap:2.4cqw;align-items:baseline;margin-bottom:3cqw;font:500 3.3cqw/1.25 'DM Sans',sans-serif;white-space:nowrap;overflow:hidden}
.w2 .ln i{flex:none;font:500 2.4cqw/1 'IBM Plex Mono',monospace;font-style:normal;letter-spacing:.1em;color:#8C6F3D;width:12cqw}
.w2 .ln span{display:inline-block;overflow:hidden;white-space:nowrap;width:0;animation:w2type 7s steps(26,end) infinite;border-right:.4cqw solid transparent}
.w2 .ln:nth-child(3) span{animation-name:w2type2}
.w2 .ln:nth-child(4) span{animation-name:w2type3}
.w2 .ln:nth-child(5) span{animation-name:w2type4}
@keyframes w2type{0%{width:0}14%,92%{width:var(--w)}100%{width:0}}
@keyframes w2type2{0%,14%{width:0}30%,92%{width:var(--w)}100%{width:0}}
@keyframes w2type3{0%,30%{width:0}46%,92%{width:var(--w)}100%{width:0}}
@keyframes w2type4{0%,46%{width:0}62%,92%{width:var(--w)}100%{width:0}}
/* 03 · no footage */
.w3 .tile{position:absolute;width:24%;aspect-ratio:1;border-radius:2cqw;overflow:hidden;border:1px solid rgba(244,241,234,.14);background:#222 center/cover;animation:w3in 6s var(--ease) infinite;box-shadow:0 2cqw 4cqw rgba(0,0,0,.4)}
.w3 .t1{left:6%;top:10%;--dx:150%;--dy:30%}
.w3 .t2{left:6%;top:52%;--dx:150%;--dy:-30%}
.w3 .t3{right:6%;top:10%;--dx:-150%;--dy:30%}
.w3 .t4{right:6%;top:52%;--dx:-150%;--dy:-30%}
.w3 .t1,.w3 .t3{animation-delay:-.2s}
@keyframes w3in{0%,12%{transform:none;opacity:1}42%,80%{transform:translate(var(--dx),var(--dy)) scale(.4);opacity:0}100%{transform:none;opacity:1}}
.w3 .ph{left:50%;top:50%;height:84%;transform:translate(-50%,-50%) scale(.6);opacity:0;animation:w3ph 6s var(--ease) infinite;border-radius:3cqw;border-width:.7cqw}
@keyframes w3ph{0%,28%{transform:translate(-50%,-50%) scale(.6);opacity:0}44%,84%{transform:translate(-50%,-50%) scale(1);opacity:1}96%,100%{transform:translate(-50%,-50%) scale(.6);opacity:0}}
.w3 .lab{position:absolute;left:0;right:0;bottom:5%;text-align:center;font:500 2.6cqw/1 'IBM Plex Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}

@media (prefers-reduced-motion:reduce){
  .scn *,.scn *::before,.scn *::after,.wv-box *{animation:none!important;transition:none!important}
  .w2 .ln span{width:var(--w)}
  .w3 .ph{opacity:1;transform:translate(-50%,-50%)}
  .w3 .tile{opacity:.35}
}

/* =================== ROLL · the camera roll nobody edits (problem section) =================== */
.scn-roll{aspect-ratio:1/1.02;border:0;background:none;overflow:visible}
.scn-roll::before{content:"";position:absolute;left:10%;right:10%;top:8%;bottom:4%;border-radius:50%;background:radial-gradient(closest-side,rgba(199,165,107,.16),transparent 72%);z-index:-1}
.rl-ph{left:21%;top:0;height:100%;border-radius:5.4cqw;border-width:.7cqw;background:#0B0B0C}
.rl-status{position:absolute;left:8%;right:8%;top:2.6%;z-index:2;display:flex;justify-content:space-between;align-items:center;font:600 2.2cqw/1 'DM Sans',sans-serif;color:#fff}
.rl-status i{display:inline-block;width:4.2cqw;height:1.9cqw;border-radius:.5cqw;border:.25cqw solid rgba(255,255,255,.7);position:relative}
.rl-status i::after{content:"";position:absolute;left:.25cqw;top:.25cqw;bottom:.25cqw;width:calc(var(--bat,30) * .032cqw);background:#E5484D;border-radius:.2cqw}
.rl-head{position:absolute;left:5%;right:5%;top:7.6%;z-index:2;display:flex;justify-content:space-between;align-items:flex-end}
.rl-head b{display:block;font:700 4.6cqw/1 'DM Sans',sans-serif;letter-spacing:-.02em;color:#fff}
.rl-count{display:block;margin-top:.9cqw;font:500 1.85cqw/1 'DM Sans',sans-serif;color:var(--dim)}
.rl-sel{font:600 1.85cqw/1 'DM Sans',sans-serif;color:#fff;background:rgba(255,255,255,.14);border-radius:99px;padding:1.1cqw 2cqw}
.rl-grid{position:absolute;left:.8%;right:.8%;top:17.5%;display:grid;grid-template-columns:repeat(3,1fr);gap:.45cqw}
.rl-grid .tile{position:relative;aspect-ratio:1;background-color:#1a1a1c;background-size:600% 300%;opacity:var(--in,0);transform:scale(calc(.9 + var(--in,0) * .1))}
.rl-grid .tile i{position:absolute;right:.9cqw;bottom:.8cqw;font:600 1.5cqw/1 'DM Sans',sans-serif;font-style:normal;color:#fff;text-shadow:0 0 .7cqw rgba(0,0,0,.9)}
.rl-grid .tile.new{box-shadow:inset 0 0 0 .55cqw var(--gold)}
.rl-grid .tile.new::after{content:"NEW";position:absolute;left:.8cqw;top:.8cqw;font:600 1.15cqw/1 'IBM Plex Mono',monospace;letter-spacing:.1em;background:var(--gold);color:#0E0E0E;padding:.45cqw .6cqw;border-radius:.4cqw}
.rl-store{position:absolute;left:4.5%;right:4.5%;bottom:10%;z-index:3;padding:2.2cqw 2.4cqw;border-radius:2.6cqw;background:rgba(30,30,33,.95);border:1px solid rgba(244,241,234,.12);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2cqw 5cqw rgba(0,0,0,.6);
  transform:translateY(calc((1 - var(--st,0)) * 14cqw));opacity:var(--st,0)}
.rl-store span{display:flex;align-items:center;gap:1.2cqw;font:600 2cqw/1.2 'DM Sans',sans-serif;color:#fff}
.rl-store span::before{content:"!";flex:none;width:2.8cqw;height:2.8cqw;border-radius:50%;background:#E5484D;color:#fff;display:grid;place-items:center;font:700 1.7cqw/1 'DM Sans',sans-serif}
.rl-bar{margin-top:1.5cqw;height:.9cqw;border-radius:1cqw;background:rgba(255,255,255,.12);overflow:hidden}
.rl-bar b{display:block;height:100%;width:calc(var(--used,94) * 1%);background:linear-gradient(90deg,#c9a56b,#E5484D 80%)}
.rl-store em{display:block;margin-top:1.1cqw;font:500 1.5cqw/1 'IBM Plex Mono',monospace;font-style:normal;letter-spacing:.06em;color:var(--dim)}
.rl-tab{position:absolute;left:0;right:0;bottom:0;height:8%;z-index:2;display:flex;justify-content:space-around;align-items:center;font:500 1.45cqw/1 'DM Sans',sans-serif;color:var(--dim);background:linear-gradient(transparent,rgba(11,11,12,.92) 45%)}
.rl-tab b{color:#fff;font-weight:600}
.rl-chip{position:absolute;z-index:4;font-size:1.75cqw;padding:1.3cqw 1.9cqw;background:rgba(20,20,22,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.rl-chip b{color:var(--paper);font-weight:500}
.rl-c1{left:0;top:30%}
.rl-c2{right:0;top:58%}
.rl-c3{left:4%;top:74%}

/* hero ambient light — the reel's colours, blurred, behind the phone */
.hs-amb{position:absolute;left:-16%;top:-10%;width:84%;height:108%;z-index:-1;filter:blur(46px) saturate(1.6);opacity:.62;border-radius:42%;pointer-events:none}
@media (prefers-reduced-motion:reduce){.hs-amb{display:none}}

/* =================== DAILIES · hours of clips in, one reel out (hero) =================== */
.scn-dailies{aspect-ratio:1/1.02;border:0;background:none;overflow:visible}
.scn-dailies::before{content:"";position:absolute;right:-6%;top:0;width:64%;height:92%;border-radius:50%;background:radial-gradient(closest-side,rgba(199,165,107,.2),transparent 70%);z-index:-1}
.dl-bin{position:absolute;left:0;top:9%;width:60%;bottom:9%;border-radius:2.4cqw;border:1px solid rgba(244,241,234,.13);
  background:linear-gradient(180deg,rgba(26,26,29,.94),rgba(16,16,18,.96));box-shadow:0 3cqw 8cqw rgba(0,0,0,.6);padding:2.6cqw;display:flex;flex-direction:column;z-index:2}
.dl-head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:1.8cqw;border-bottom:1px solid var(--line-2);font:500 1.6cqw/1 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.dl-head b{color:var(--paper);font-weight:500}
.dl-tc{font:400 4.4cqw/1 'Bebas Neue',sans-serif;letter-spacing:.02em;color:var(--paper);margin-top:1.8cqw;font-variant-numeric:tabular-nums}
.dl-tc small{font:500 1.4cqw/1 'IBM Plex Mono',monospace;letter-spacing:.14em;color:var(--faint);margin-left:1cqw}
.dl-grid{position:relative;flex:1;margin-top:1.8cqw;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,1fr);gap:.8cqw}
.dl-grid .t{position:relative;border-radius:.8cqw;background-size:600% 300%;background-color:#1a1a1c;opacity:var(--in,0);
  transform:translate(calc(var(--fx,0) * 1cqw),calc(var(--fy,0) * 1cqw)) scale(calc((.92 + var(--in,0) * .08) * (1 - var(--go,0) * .7)));
  filter:saturate(calc(1 - var(--dim,0) * .9)) brightness(calc(1 - var(--dim,0) * .55));box-shadow:inset 0 0 0 calc(var(--sel,0) * .45cqw) var(--gold)}
.dl-grid .t i{position:absolute;right:.6cqw;bottom:.5cqw;font:600 1.15cqw/1 'DM Sans',sans-serif;font-style:normal;color:#fff;text-shadow:0 0 .6cqw rgba(0,0,0,.9)}
.dl-grid .t b{position:absolute;left:.5cqw;top:.5cqw;font:600 1cqw/1 'IBM Plex Mono',monospace;letter-spacing:.08em;background:var(--gold);color:#0E0E0E;padding:.35cqw .5cqw;border-radius:.3cqw;opacity:var(--sel,0)}
.dl-scan{position:absolute;left:-1%;right:-1%;height:2px;top:calc(var(--sy,0) * 100%);background:var(--gold);box-shadow:0 0 1.2cqw rgba(199,165,107,.9);opacity:var(--so,0);z-index:3}
.dl-phone{right:0;top:4%;height:86%;border-radius:4.6cqw;border-width:.6cqw;z-index:1}
.dl-phone .rd{position:absolute;left:8%;right:8%;bottom:4%;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:1.4cqw 1.8cqw;border-radius:1.6cqw;background:rgba(14,14,14,.82);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:500 1.5cqw/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);opacity:var(--rdy,0);transform:translateY(calc((1 - var(--rdy,0)) * 2cqw))}
.dl-phone .rd b{color:var(--gold);font-weight:500}
.dl-arrow{position:absolute;left:61%;top:48%;width:6%;height:2px;background:linear-gradient(90deg,transparent,var(--gold));opacity:var(--ar,0);z-index:3}
.dl-arrow::after{content:"";position:absolute;right:-.2cqw;top:-.7cqw;border-left:1.3cqw solid var(--gold);border-top:.75cqw solid transparent;border-bottom:.75cqw solid transparent}

/* =================== SELECTS · find the story in hours of footage =================== */
.sel-ui{position:absolute;left:38.5cqw;right:3.4cqw;top:3.2cqw;bottom:3.6cqw;display:flex;flex-direction:column}
.sel-head{display:flex;justify-content:space-between;align-items:flex-end}
.sel-head .k{font:500 1.4cqw/1.4 'IBM Plex Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.sel-head .k b{display:block;color:var(--paper);font-weight:500}
.sel-n{font:400 6.4cqw/.85 'Bebas Neue',sans-serif;letter-spacing:.01em;color:var(--paper);text-align:right;font-variant-numeric:tabular-nums}
.sel-n small{display:block;font:500 1.25cqw/1.3 'IBM Plex Mono',monospace;letter-spacing:.14em;color:var(--faint);margin-top:.6cqw}
.sel-list{position:relative;margin-top:2.2cqw;flex:1;display:flex;flex-direction:column;gap:.9cqw;overflow:hidden}
.sel-row{position:relative;display:grid;grid-template-columns:8cqw 1fr;gap:1.4cqw;align-items:center;padding:1cqw 8.6cqw 1cqw 1.2cqw;border-radius:1cqw;
  border:1px solid color-mix(in srgb,rgba(199,165,107,.7) calc(var(--pick,0) * 100%),var(--line-2));background:rgba(199,165,107,calc(var(--pick,0) * .09));
  opacity:calc(var(--in,0) * (1 - var(--cut,0) * .85));transform:translateX(calc((1 - var(--in,0)) * 2cqw)) scaleY(calc(1 - var(--cut,0) * .35));transform-origin:left center}
.sel-row .tc{font:500 1.2cqw/1 'IBM Plex Mono',monospace;letter-spacing:.06em;color:color-mix(in srgb,var(--gold) calc(var(--pick,0) * 100%),var(--faint))}
.sel-row .tx{font:500 1.75cqw/1.3 'DM Sans',sans-serif;color:var(--paper)}
.sel-row .sk{display:flex;gap:.6cqw}
.sel-row .sk i{height:1.1cqw;border-radius:.6cqw;background:rgba(244,241,234,.13)}
.sel-row .lb{position:absolute;right:1cqw;top:50%;transform:translateY(-50%) scale(calc(.8 + var(--pick,0) * .2));opacity:var(--pick,0);
  font:600 1.1cqw/1 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#0E0E0E;background:var(--gold);padding:.55cqw .8cqw;border-radius:.4cqw}
.sel-strip{display:flex;gap:.5cqw;margin-top:1.6cqw;height:3.4cqw;opacity:var(--st,0);transform:translateY(calc((1 - var(--st,0)) * 1.5cqw))}
.sel-strip span{display:grid;place-items:center;border-radius:.6cqw;background:rgba(199,165,107,.16);border:1px solid rgba(199,165,107,.55);font:600 1.15cqw/1 'IBM Plex Mono',monospace;letter-spacing:.14em;color:var(--gold)}
.sel-strip span:nth-child(1){flex:2}.sel-strip span:nth-child(2){flex:3}.sel-strip span:nth-child(3){flex:4}

/* =================== MARKETS · one edit, captioned for every market =================== */
.mk-row{position:absolute;left:3.4cqw;right:3.4cqw;top:3.2cqw;bottom:3.6cqw;display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw;align-items:start}
.mk-col{position:relative;display:flex;flex-direction:column;align-items:center}
.mk-col .ph{position:relative;width:100%;height:auto;aspect-ratio:9/15;border-radius:2.4cqw}
.mk-col .ph>video{object-position:50% 28%}
.mk-col .ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(transparent,rgba(0,0,0,.78));z-index:1}
.mk-cap{position:absolute;left:6%;right:6%;bottom:9%;z-index:2;text-align:center;font:400 3.3cqw/1.02 'Bebas Neue',sans-serif;letter-spacing:.02em;color:var(--paper);text-shadow:0 .3cqw 1cqw rgba(0,0,0,.7)}
.mk-cap span{display:inline-block;margin:0 .3em .1em 0}
.mk-cap span.a{color:var(--gold);transform:scale(1.08)}
.mk-flag{margin-top:1.4cqw;display:flex;gap:.8cqw;align-items:center;font:500 1.3cqw/1 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.mk-flag b{color:#0E0E0E;background:var(--gold);padding:.5cqw .7cqw;border-radius:.4cqw;font-weight:600}
.mk-col.src .mk-flag b{background:var(--paper)}

/* GRADE · node chain (replaces sliders) */
.gr-nodes{margin-top:auto;display:flex;align-items:center;gap:0}
.gr-node{flex:none;padding:1cqw 1.2cqw;border-radius:.8cqw;border:1px solid color-mix(in srgb,var(--gold) calc(var(--on,0) * 100%),rgba(244,241,234,.18));
  background:rgba(199,165,107,calc(var(--on,0) * .14));font:500 1.15cqw/1.25 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--paper) calc(var(--on,0) * 100%),var(--faint));text-align:center}
.gr-node small{display:block;margin-top:.3cqw;font-size:.95cqw;color:color-mix(in srgb,var(--gold) calc(var(--on,0) * 100%),var(--faint))}
.gr-link{flex:1;height:2px;min-width:1.2cqw;background:linear-gradient(90deg,var(--gold) calc(var(--on,0) * 100%),rgba(244,241,234,.15) 0)}

/* =================== CHAIN · the five jobs behind every video (problem) =================== */
.scn-chain{aspect-ratio:1/1}
.scn-chain .sw{display:grid}
.scn-chain .sw>*{grid-area:1/1;font-style:normal}
.scn-chain .sw .a{opacity:calc(1 - var(--k,0));transform:translateY(calc(var(--k,0) * -1.4cqw))}
.scn-chain .sw .b{opacity:var(--k,0);transform:translateY(calc((1 - var(--k,0)) * 1.4cqw))}
.ch-list{position:absolute;left:4.4cqw;right:4.4cqw;top:3.4cqw}
.ch-rail{position:absolute;left:2.6cqw;top:6.6cqw;height:52.8cqw;width:.3cqw;margin-left:-.15cqw;background:rgba(244,241,234,.12);border-radius:1cqw}
.ch-rail i{position:absolute;left:0;top:0;width:100%;height:calc(var(--fill,0) * 100%);border-radius:1cqw;background:linear-gradient(var(--gold-soft),var(--gold));box-shadow:0 0 1.4cqw rgba(199,165,107,.75)}
.ch-rail i::after{content:"";position:absolute;left:50%;bottom:-1cqw;width:1.6cqw;height:1.6cqw;transform:translateX(-50%) rotate(45deg);background:var(--gold-soft);border-radius:.2cqw;opacity:calc(var(--fill,0) * (1 - var(--done,0)))}
.ch-st{position:relative;height:13.2cqw;display:grid;grid-template-columns:5.2cqw 5.4cqw 1fr auto;align-items:center;gap:0 .6cqw;
  border-bottom:1px solid var(--line-2);opacity:var(--in,0);transform:translateX(calc((1 - var(--in,0)) * 2cqw))}
.ch-st:last-child{border-bottom:0}
.ch-st .dot{position:relative;justify-self:center;width:2.4cqw;height:2.4cqw;border-radius:50%;background:#0F0F11;border:.3cqw solid rgba(244,241,234,.28);z-index:1}
.ch-st .dot::after{content:"";position:absolute;inset:-.3cqw;border-radius:50%;background:var(--gold);box-shadow:0 0 1.6cqw rgba(199,165,107,.8);opacity:var(--k,0);transform:scale(calc(.4 + var(--k,0) * .6))}
.ch-st:nth-child(2) .dot::before{content:"";position:absolute;inset:-1.3cqw;border-radius:50%;border:.3cqw solid #E5484D;opacity:calc(var(--stall,0) * (1 - var(--k,0)));animation:chPing 1.4s ease-out infinite}
@keyframes chPing{from{transform:scale(.55);opacity:calc(var(--stall,0) * (1 - var(--k,0)))}to{transform:scale(1.35);opacity:0}}
.ch-st:nth-child(2) .dot{border-color:color-mix(in srgb,#E5484D calc(var(--stall,0) * 100%),rgba(244,241,234,.28))}
.ch-st .ix{font:500 1.6cqw/1 'IBM Plex Mono',monospace;letter-spacing:.14em;color:var(--faint)}
.ch-st .nm{min-width:0}
.ch-st .nm b{display:block;font:400 4.6cqw/1 'Bebas Neue',sans-serif;letter-spacing:.02em;color:var(--paper)}
.ch-st .nm .sw{margin-top:.9cqw;font:400 2.5cqw/1.2 'DM Sans',sans-serif;white-space:nowrap}
.ch-st .nm .a{color:var(--dim)}
.ch-st .nm .b{color:var(--gold-soft)}
.ch-st .pill{display:grid;font:500 1.55cqw/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase}
.ch-st .pill i{grid-area:1/1;font-style:normal;justify-self:end;padding:1cqw 1.5cqw;border-radius:99px;border:1px solid var(--line)}
.ch-st .pill .a{color:var(--faint);opacity:calc(1 - var(--k,0))}
.ch-st .pill .b{color:#0E0E0E;background:var(--gold);border-color:var(--gold);opacity:var(--k,0)}
.ch-st:nth-child(2) .pill .a{color:#F2A0A2;border-color:rgba(229,72,77,.55);background:rgba(229,72,77,.1)}
.ch-foot{position:absolute;left:4.4cqw;right:4.4cqw;bottom:4cqw;display:grid;grid-template-columns:auto 1fr;align-items:end;gap:1.6cqw 3cqw;
  padding-top:3cqw;border-top:1px solid var(--line);opacity:var(--fin,0)}
.ch-cnt span{display:block;font:500 1.55cqw/1 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.ch-cnt b{display:block;margin-top:1cqw;font:400 9cqw/.85 'Bebas Neue',sans-serif;color:var(--paper);font-variant-numeric:tabular-nums}
.scn-chain.ok .ch-cnt b{color:var(--gold-soft)}
.ch-next{justify-self:end;text-align:right;font:500 1.7cqw/1.3 'IBM Plex Mono',monospace;letter-spacing:.08em;--k:var(--b,0)}
.ch-next .a{color:#F2A0A2}
.ch-next .b{color:var(--gold)}
.ch-bar{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,1fr);gap:.7cqw}
.ch-bar i{height:1.1cqw;border-radius:.4cqw;background:rgba(244,241,234,.08)}
.ch-bar i.on{background:var(--gold);box-shadow:0 0 1cqw rgba(199,165,107,.55)}
.scn-chain .ch-state{color:#F2A0A2}
.scn-chain.ok .ch-state{color:var(--gold)}
.scn-chain .ch-state::before{background:#E5484D;box-shadow:0 0 1.2cqw rgba(229,72,77,.85)}
.scn-chain.ok .ch-state::before{background:var(--gold);box-shadow:0 0 1.2cqw rgba(199,165,107,.85)}