/* The story scenes every page is built from, on The Bench (story.js drives them). styles.css
   carries the tokens, the header, composers, plans, FAQ and closing. Every scene reads correctly
   at rest (no script, reduced motion, Save-Data). story.js adds .nx-live to a scene to pin it and
   drive it from scroll, and sets the few values that are measured (--tw, --sw, --ww, --n, --cols). */

/* ---- the split: one video into 21 clips ------------------------------------------------- */
.nx-split{position:relative;padding:clamp(72px,9vw,128px) var(--pad) 0}
.nx-split-title{max-width:18ch;margin:0 auto clamp(24px,3vw,40px);text-align:center}
.nx-split-stage{position:relative}
.nx-src{display:grid;gap:12px;max-width:960px;margin:0 auto}
.nx-src-screen{aspect-ratio:16/9;border-radius:22px}
/* the source as a filmstrip; under it, a lane where each picked moment lights as the playhead passes */
.nx-strip{position:relative;display:grid;gap:6px}
.nx-strip>img{display:block;width:100%;height:auto;aspect-ratio:2304/108;border-radius:8px;object-fit:cover}
.nx-strip>.nx-marks{position:relative;inset:auto;height:3px;border-radius:2px;background:var(--fill-3)}
.nx-marks{position:absolute;inset:0}
.nx-marks i{position:absolute;top:0;bottom:0;left:calc(var(--a) * 100%);width:max(2px,calc(var(--w) * 100% - 2px));margin-left:1px;border-radius:2px;background:var(--mind);opacity:0;transition:opacity .25s var(--ease)}
.nx-marks i.on{opacity:1}
.nx-head{position:absolute;top:-4px;bottom:-4px;left:calc(var(--h,0) * 100%);width:2px;margin-left:-1px;background:var(--live);opacity:0}
.nx-tiles{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--cols,7),minmax(0,1fr));gap:var(--g)}
.nx-tiles li{aspect-ratio:9/16;border-radius:10px}
.nx-tiles img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nx-tiles .chip{right:6px;bottom:6px;font-size:.625rem}
.nx-tiles .low img{opacity:.6}
/* a wall plays from one mosaic video: each tile paints its cell over its poster once frames arrive */
.nx-paint{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .3s var(--ease)}
.painting .nx-paint{opacity:1}
.nx-tiles.painting .low img{opacity:1}
.nx-wall-src{position:absolute;left:0;top:0;width:4px;height:4px;opacity:.01;pointer-events:none}
@media (max-width:699px){.nx-tiles li:nth-child(n+4) .chip{display:none}}
.nx-hold{position:absolute;right:max(16px,var(--pad));bottom:20px;z-index:3;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:var(--fill-2);color:var(--ink-1);cursor:pointer;transition:background-color .14s var(--ease)}
.nx-hold:hover{background:var(--fill)}
.nx-hold:focus-visible,.nx-play:focus-visible{outline:2px solid var(--take-text);outline-offset:2px}
.nx-hold svg,.nx-play svg{width:12px;height:12px;fill:currentColor}
.nx-hold .i-play,.nx-play .i-play{display:none}
.nx-hold[aria-pressed=true] .i-play,.nx-play[aria-pressed=true] .i-play{display:inline}
.nx-hold[aria-pressed=true] .i-pause,.nx-play[aria-pressed=true] .i-pause{display:none}

/* pinned: the video sits over the final grid, and each tile flies from its moment to its rank */
.nx-split.nx-live{height:340vh;padding:0}
.nx-live>.nx-pin{position:sticky;top:0;display:flex;flex-direction:column;height:100vh;height:100svh;padding:calc(56px + clamp(16px,3vh,36px)) var(--pad) clamp(20px,4vh,48px);overflow:hidden}
.nx-split.nx-live .nx-split-stage{flex:1;min-height:0}
.nx-split.nx-live .nx-src{position:absolute;left:50%;top:50%;width:var(--sw,960px);max-width:none;margin:0;translate:-50% -50%;transform-origin:50% 100%}
.nx-split.nx-live .nx-head{opacity:1}
.nx-split.nx-live .nx-tiles{position:absolute;inset:0;z-index:2;margin:0;grid-template-columns:repeat(var(--cols,7),var(--tw,100px));grid-auto-rows:calc(var(--tw,100px) * 16 / 9);justify-content:center;align-content:center;pointer-events:none}
.nx-split.nx-live .nx-tiles li{transform-origin:0 0;opacity:0;will-change:transform,opacity;box-shadow:inset 0 0 0 1px var(--line),var(--e1)}
.nx-split.nx-live .nx-tiles .chip{opacity:0;transition:opacity .2s var(--ease)}
.nx-split.nx-live .nx-tiles li.in{pointer-events:auto}
.nx-split.nx-live .nx-tiles li.in .chip{opacity:1}

/* ---- the chapters: one clip, finished four ways ------------------------------------------ */
.nx-ch{position:relative;margin-top:clamp(80px,10vw,140px);padding:clamp(64px,8vw,112px) var(--pad);background:var(--canvas)}
.nx-ch .nx-pin{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.nx-names{position:relative;display:grid;gap:6px;margin:32px 0 0;padding:6px 0 6px 22px;list-style:none}
.nx-names::before,.nx-names::after{content:"";position:absolute;left:0;top:0;width:2px;border-radius:1px}
.nx-names::before{bottom:0;background:var(--ink-4)}
.nx-names::after{height:calc(var(--k,0) * 100%);background:var(--take)}
.nx-names button{padding:0;border:0;background:none;color:var(--ink-3);font:700 clamp(1.75rem,3vw,2.75rem)/1.15 var(--display);letter-spacing:-.022em;text-align:left;cursor:pointer;transition:color .36s var(--ease-expo)}
.nx-names button:hover{color:var(--ink-2)}
.nx-names button[aria-pressed=true]{color:var(--ink-1)}
.nx-names button:focus-visible{outline:2px solid var(--take-text);outline-offset:4px;border-radius:6px}
.nx-panel{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center;height:min(78svh,720px);min-height:420px;padding:clamp(16px,2.5vw,32px) clamp(20px,4vw,56px);border-radius:22px;background:var(--panel);overflow:hidden}
.nx-cv{position:relative;height:100%;aspect-ratio:9/16;overflow:hidden;border-radius:16px;background:#000;isolation:isolate;container-type:size;opacity:var(--cvo,1)}
.nx-cv-fill{position:absolute;inset:-12%;width:124%;height:124%;max-width:none;object-fit:cover;filter:blur(18px) brightness(.55);opacity:var(--fill,1)}
.nx-cv-frame{position:absolute;left:0;right:0;top:50%;aspect-ratio:16/9;translate:0 -50%;box-shadow:inset 0 0 0 2px var(--mind);border-radius:2px;opacity:var(--frame,0);z-index:1}
/* the render's headline plate, as boqo sets it: two lines, two thirds of the width, a tenth down */
.nx-cv-plate{position:absolute;left:17%;right:17%;top:10.2%;z-index:1;padding:1.6cqw 2cqw;border-radius:1cqw;background:var(--take);color:#111;font:800 5.4cqw/1.05 var(--ui);text-align:center;text-transform:uppercase;text-wrap:balance;opacity:var(--plate,1);translate:0 calc((1 - var(--plate,1)) * -14px)}
.nx-cv-render{position:absolute;inset:0;z-index:2;opacity:var(--render,1)}
.nx-cv-render img,.nx-cv-render video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* a spotlight on one part of the render: the rest dims, the part keeps a hairline of lime */
.nx-cv::after{content:"";position:absolute;z-index:3;left:var(--sx,0);top:var(--sy,0);width:var(--sw,100%);height:var(--sh,100%);border-radius:8px;box-shadow:0 0 0 2px var(--take),0 0 0 200vmax rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:left .6s var(--ease-expo),top .6s var(--ease-expo),width .6s var(--ease-expo),height .6s var(--ease-expo),opacity .36s var(--ease-expo)}
.nx-cv.spot::after{opacity:1}
.nx-wide{position:absolute;left:0;top:0;z-index:3;width:var(--ww,640px);aspect-ratio:16/9;overflow:hidden;border-radius:12px;background:#000;transform-origin:0 0;opacity:0;pointer-events:none}
.nx-wide img,.nx-wide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nx-wide .nx-wide-end{opacity:0}
/* a say laid over the footage, where the wide shot fills the panel */
.nx-say.over{position:absolute;right:clamp(16px,2.4vw,32px);bottom:clamp(16px,2.4vw,32px);z-index:4;width:min(380px,calc(100% - 32px));padding:18px 20px;border-radius:18px;background:color-mix(in srgb,var(--panel) 80%,transparent);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);box-shadow:var(--e2)}
@media (prefers-reduced-transparency:reduce){.nx-say.over{background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none}}
.nx-qrows{display:grid;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.nx-qrows>li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center;padding:8px;border-radius:12px;background:var(--raised);opacity:var(--o,1);translate:calc((1 - var(--o,1)) * 16px) 0}
.nx-qrows img{width:72px;height:40px;border-radius:6px;object-fit:cover}
.nx-qrows b{display:block;font:600 .9375rem/1.3 var(--ui)}
.nx-qrows .tc{color:var(--live-text);font-size:.75rem}
.nx-livecard{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:0}
.nx-livecard b{font-weight:600}
.nx-livecard .tc{margin-left:auto;color:var(--live-text);font-size:1.5rem;font-variant-numeric:tabular-nums}
.nx-count{display:flex;align-items:baseline;gap:10px;margin:0;color:var(--ink-2)}
.nx-count b{color:var(--ink-1);font:700 clamp(2.5rem,4vw,3.5rem)/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.nx-say-big{margin:0;font:700 clamp(1.75rem,3vw,2.75rem)/1.1 var(--display);letter-spacing:-.022em;text-wrap:balance}
.nx-say-big em{font-style:normal;color:var(--ink-3)}
.nx-say .tag{flex:none}
.nx-say>.tag+.nx-say-big,.nx-say>.nx-say-big+.tag{margin-top:16px}
.nx-side{display:grid;align-self:stretch;align-items:center;min-width:0}
.nx-say{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;translate:0 10px;transition:opacity .36s var(--ease-expo),translate .36s var(--ease-expo),visibility .36s}
.nx-panel[data-ch="0"] .nx-say-0,.nx-panel[data-ch="1"] .nx-say-1,.nx-panel[data-ch="2"] .nx-say-2,.nx-panel[data-ch="3"] .nx-say-3,.nx-panel[data-ch="4"] .nx-say-4,.nx-panel[data-ch="5"] .nx-say-5{opacity:1;visibility:visible;translate:0 0}
.nx-score{display:grid;gap:16px;justify-items:start}
.nx-score>.mono{color:var(--ink-3);font-size:.9375rem}
.nx-score .hf-grades{gap:8px}
.nx-score .hf-grades>span{padding:4px 12px 4px 4px;font-size:.875rem;background:var(--raised)}
.nx-score .hf-grades b{width:22px;height:22px;font-size:.75rem}
.nx-score-n{display:flex;align-items:center;gap:18px}
.nx-score-n b{font:700 clamp(4rem,8vw,7rem)/1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.nx-score .meter{display:flex;gap:5px}
.nx-score .meter i{width:18px;height:5px;border-radius:3px;background:var(--ink-4);transition:background-color .2s var(--ease)}
.nx-score .meter i.on{background:var(--mind)}
.nx-band{color:var(--ink-2);font-size:1.125rem;font-weight:600}
.nx-score .hf-grades>span{opacity:0;translate:0 6px;transition:opacity .28s var(--ease-expo),translate .28s var(--ease-expo)}
.nx-score .hf-grades>span.in{opacity:1;translate:0 0}
.nx-ratio{display:flex;align-items:center;gap:clamp(10px,1.4vw,20px);margin:0;font:700 clamp(2rem,3.2vw,3.25rem)/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.nx-ratio svg{flex:none;width:clamp(28px,3vw,44px);height:clamp(14px,1.5vw,22px);fill:none;stroke:var(--ink-3);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nx-r-from{color:var(--ink-1);transition:color .36s var(--ease-expo)}
.nx-r-to{color:var(--ink-3);transition:color .36s var(--ease-expo)}
.nx-panel.fit .nx-r-from{color:var(--ink-3)}
.nx-panel.fit .nx-r-to{color:var(--ink-1)}
.nx-lines{display:grid;gap:clamp(8px,1.4vh,14px);margin:0;padding:0;list-style:none}
.nx-lines li{display:grid;grid-template-columns:3.2em minmax(0,1fr);gap:14px;align-items:baseline;color:var(--ink-3);font:600 clamp(1.125rem,1.8vw,1.625rem)/1.3 var(--ui);letter-spacing:-.01em;transition:color .2s var(--ease)}
.nx-lines .tc{color:var(--ink-3);font-size:.8125rem;font-weight:400}
.nx-lines li.on{color:var(--ink-1)}
.nx-lines li.on .tc{color:var(--take-text)}
.nx-say-3{display:grid;gap:12px}
.nx-ask{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;padding:16px 18px;border-radius:16px;background:var(--raised)}
.nx-ask p{margin:0;color:var(--ink-2);font-size:1.0625rem}
.nx-ask b{color:var(--ink-1);font-weight:600}
.nx-approve{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;background:var(--fill);color:var(--ink-1);font:600 .875rem/1 var(--ui);transition:background-color .2s var(--ease),color .2s var(--ease),scale .2s var(--ease-expo)}
.nx-panel.ok .nx-approve{background:var(--take);color:var(--take-ink)}
.nx-queue{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.nx-queue li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 18px;border-radius:14px;background:var(--raised);opacity:var(--o,1);translate:0 calc((1 - var(--o,1)) * 12px)}
.nx-queue b{font-weight:600;font-size:1.0625rem}
.nx-queue li>span:not(.nx-st){color:var(--ink-3);font-size:.9375rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx-st{padding:3px 10px;border-radius:999px;background:var(--fill-2);color:var(--ink-2);font:600 .75rem/1.4 var(--ui)}
.nx-queue li:first-child .nx-st{background:var(--ink-1);color:var(--canvas)}
.nx-panel .nx-hold{right:16px;bottom:16px}

.nx-ch.nx-live{height:calc(var(--n,4) * 110vh);padding:0}
.nx-ch.nx-live>.nx-pin{align-content:center}

@media (max-width:899px){
  .nx-ch .nx-pin{grid-template-columns:minmax(0,1fr);gap:16px;align-content:start}
  .nx-names{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:14px;padding:0}
  .nx-names::before,.nx-names::after{display:none}
  .nx-names button{font-size:1.125rem;font-weight:600;letter-spacing:0}
  .nx-names button[aria-pressed=true]{box-shadow:0 2px 0 var(--take)}
  .nx-panel{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;justify-items:center;gap:14px;height:auto;min-height:0;padding:14px}
  .nx-cv{height:min(52svh,520px)}
  .nx-side{align-self:auto;width:100%;min-height:150px}
  .nx-ch.nx-live .nx-panel{flex:1;min-height:0;height:auto}
  .nx-ch.nx-live .nx-cv{height:auto;width:auto;min-height:0;max-height:100%;aspect-ratio:9/16;align-self:stretch}
  .nx-ch.nx-live>.nx-pin{display:flex;flex-direction:column;align-content:normal}
  /* the phone's link dock floats over the bottom of the screen; pinned scenes end above it */
  .nx-live>.nx-pin{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  .nx-score-n b{font-size:3.25rem}
  .nx-score{gap:8px}
  .nx-ratio{font-size:2.25rem}
  .nx-lines li{font-size:1rem}
  .nx-lines li:nth-child(n+4){display:none}
  .nx-ask{padding:10px 12px}
  .nx-queue li{padding:10px 12px}
  .nx-queue li:nth-child(3){display:none}
}

/* ---- numbers ------------------------------------------------------------------------------ */
.nx-bento{display:grid;gap:var(--g)}
.nx-tile{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding:clamp(20px,2.4vw,32px);overflow:hidden;border-radius:22px;background:var(--panel)}
.nx-num-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.nx-n-clips{grid-column:span 2;grid-row:span 2}
.nx-n-score{grid-row:span 2}
.nx-big{margin:0;font:700 clamp(3.5rem,7vw,6.5rem)/.95 var(--display);letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.nx-lab{max-width:24ch;margin:0;color:var(--ink-2);font-size:1.0625rem;line-height:1.35}
.nx-n-clips .nx-big{font-size:clamp(5rem,12vw,11rem)}
/* the 21 clips as a chart: each bar is the clip itself, as tall as its score */
.nx-bars{display:flex;flex:1 1 auto;align-items:flex-end;gap:clamp(3px,.45vw,6px);min-height:clamp(200px,22vw,300px);margin:0;padding:24px 0 0;list-style:none}
.nx-bars li{display:flex;flex:1 1 0;flex-direction:column;justify-content:flex-end;gap:6px;height:100%;min-width:0}
.nx-bar{position:relative;display:block;flex:none;height:calc((100% - 22px) * var(--s,60) / 100);overflow:hidden;border-radius:clamp(4px,.5vw,7px);background:var(--raised);transform-origin:50% 100%;box-shadow:inset 0 0 0 1px var(--line)}
.nx-bar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nx-bars .tc{color:var(--ink-3);font-size:.6875rem;text-align:center}
.nx-bars li:first-child .tc{color:var(--ink-1);font-weight:600}
.nx-bars li:first-child .nx-bar{box-shadow:0 0 0 2px var(--take),0 0 0 3px var(--take-edge)}
.js:not(.is-still) .nx-bars .nx-bar{scale:1 0;transition:scale .7s var(--ease-expo);transition-delay:calc(var(--k,0) * 28ms)}
.js:not(.is-still) .nx-bars.in .nx-bar{scale:1 1}
@media (max-width:699px){.nx-bars .tc{visibility:hidden}.nx-bars li:first-child .tc{visibility:visible}}
.nx-n-score .screen{width:min(200px,80%);margin:auto auto 0;aspect-ratio:9/16;border-radius:16px}
.nx-n-score .screen img,.nx-n-live .screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nx-n-live .screen{margin-top:auto;aspect-ratio:16/9;border-radius:12px}
.nx-n-live .tag.live{position:absolute;left:10px;top:10px}
.nx-n-live .nx-big,.nx-n-posts .nx-big{font-size:clamp(3rem,5vw,4.75rem)}
.nx-n-posts{justify-content:flex-end}
@media (max-width:899px){
  .nx-num-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nx-n-clips{grid-column:span 2;grid-row:auto}
}

.nx-tpl-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.nx-tpl-grid .nx-tile{justify-content:space-between;min-height:clamp(200px,20vw,260px)}
@media (max-width:899px){.nx-tpl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- highlights carousel ------------------------------------------------------------------ */
.nx-track{display:flex;gap:clamp(12px,1.6vw,20px);margin:0 calc(var(--pad) * -1);padding:4px var(--pad) 8px;overflow-x:auto;list-style:none;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);scrollbar-width:none;overscroll-behavior-x:contain}
.nx-track::-webkit-scrollbar{display:none}
.nx-card{display:grid;align-content:start;gap:12px;flex:none;width:clamp(220px,24vw,300px);scroll-snap-align:start}
.nx-card .screen{aspect-ratio:9/16;border-radius:22px}
.nx-card .screen img,.nx-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nx-card p{display:grid;gap:2px;margin:0;padding:0 4px}
.nx-card b{font:600 1rem/1.3 var(--ui)}
.nx-card p span{color:var(--ink-3);font-size:.8125rem}
.nx-pager{display:none;align-items:center;justify-content:center;gap:12px;margin-top:22px}
.js .nx-pager{display:flex}
.nx-dots{display:flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;background:var(--fill-2)}
.nx-dots button{position:relative;width:8px;height:8px;padding:0;overflow:hidden;border:0;border-radius:999px;background:var(--ink-4);cursor:pointer;transition:width .36s var(--ease-expo),background-color .36s var(--ease-expo)}
.nx-dots button::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--p,0) * 100%);background:var(--ink-1)}
.nx-dots button[aria-current=true]{width:40px;background:var(--fill)}
.nx-dots button:focus-visible{outline:2px solid var(--take-text);outline-offset:3px}
.nx-play{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--fill-2);color:var(--ink-1);cursor:pointer}
.nx-play:hover{background:var(--fill)}

/* ---- functions ---------------------------------------------------------------------------- */
.nx-fn-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.nx-f-sniper,.nx-f-blur{grid-column:span 4}
.nx-f-uq,.nx-f-brand{grid-column:span 2}
.nx-f-enh,.nx-f-pub{grid-column:span 3}
.nx-fn .nx-tile{gap:20px}
.nx-f-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.nx-f-head h3{margin:0;font:700 clamp(1.375rem,2vw,1.75rem)/1.15 var(--display);letter-spacing:-.02em}
.nx-try{display:inline-flex;align-items:center;height:34px;margin-left:auto;padding:0 15px;border-radius:999px;background:var(--ink-1);color:var(--canvas);font:600 .875rem/1 var(--ui);text-decoration:none;transition:opacity .12s var(--ease)}
.nx-try:hover{opacity:.86}
.nx-try:focus-visible{outline:2px solid var(--take-text);outline-offset:2px}
.nx-f-sniper-body{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:12px;align-items:center;margin-block:auto}
.nx-f-feed{aspect-ratio:16/9;border-radius:14px}
.nx-f-feed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nx-spikes{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.nx-spikes li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;align-items:center;padding:8px;border-radius:12px;background:var(--raised)}
.nx-spikes img{width:72px;height:40px;border-radius:6px;object-fit:cover}
.nx-spikes b{display:block;font:600 .9375rem/1.3 var(--ui)}
.nx-spikes .tc{color:var(--live-text);font-size:.75rem}
/* a list whose items arrive one by one as it comes into view */
.js:not(.is-still) .nx-reveal>li{opacity:0;translate:16px 0;transition:opacity .4s var(--ease-expo),translate .4s var(--ease-expo);transition-delay:calc(var(--d,0) * 1s)}
.js:not(.is-still) .nx-reveal.in>li{opacity:1;translate:0 0}
.nx-deck{--dh:clamp(260px,24vw,340px);position:relative;height:var(--dh);margin:auto 0 0;padding:0;list-style:none}
.nx-deck li{position:absolute;left:50%;top:0;display:grid;gap:10px;justify-items:center;z-index:calc(10 - var(--i,0));transform:translateX(-50%) translateX(calc(var(--i,0) * 16px)) rotate(calc(var(--i,0) * 3.5deg)) scale(calc(1 - var(--i,0) * .05));transform-origin:50% 100%;transition:transform .6s var(--ease-expo),opacity .6s var(--ease-expo)}
.nx-deck .screen{width:auto;height:calc(var(--dh) - 30px);aspect-ratio:9/16;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line),var(--e1)}
.nx-deck .screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nx-deck .mono{color:var(--ink-3);white-space:nowrap;opacity:0;transition:opacity .3s var(--ease)}
.nx-deck li.front .mono{opacity:1}
.nx-f-blur .ba{width:100%;margin-top:auto}
.nx-f-blur figcaption{color:var(--ink-3)}
.nx-fan{display:flex;justify-content:center;height:clamp(240px,22vw,320px);margin:auto 0 0;padding:0 0 8px;list-style:none}
.nx-fan li{flex:none;height:100%;aspect-ratio:9/16;margin:0 -7%;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line),var(--e2);transition:transform .5s var(--ease-expo)}
.nx-fan li img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nx-fan li:nth-child(1){transform:rotate(-7deg) translateY(14px) scale(.92)}
.nx-fan li:nth-child(2){z-index:1}
.nx-fan li:nth-child(3){transform:rotate(7deg) translateY(14px) scale(.92)}
.nx-f-brand:hover .nx-fan li:nth-child(1){transform:rotate(-10deg) translate(-14px,10px) scale(.92)}
.nx-f-brand:hover .nx-fan li:nth-child(3){transform:rotate(10deg) translate(14px,10px) scale(.92)}
.nx-f-enh .enh{margin-top:auto}
.nx-shot{margin:auto 0 0;overflow:hidden;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line)}
.nx-shot img{display:block;width:100%;height:auto}
/* Studio's ledger: the same tiles, with Clips first and Publish across the row */
.nx-fn-studio .nx-f-clips{grid-column:span 4}
.nx-fn-studio .nx-f-blur,.nx-fn-studio .nx-f-enh{grid-column:span 3}
.nx-fn-studio .nx-f-pub{grid-column:span 6}
.nx-wide-tile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px 40px;align-content:center;align-items:center}
.nx-wide-tile>.nx-f-head{align-self:end}
.nx-wide-tile>.nx-facts{align-self:start}
.nx-wide-tile>.nx-shot{grid-column:2;grid-row:1 / span 2;margin:0}
.nx-facts{margin:0;color:var(--ink-3)}
.nx-trio{display:flex;justify-content:center;align-items:center;gap:var(--g);margin:auto 0;padding:0;list-style:none}
.nx-trio li{width:clamp(96px,10vw,150px);aspect-ratio:9/16;border-radius:14px}
.nx-trio li:nth-child(2){width:clamp(116px,12.5vw,186px)}
.nx-trio img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:899px){
  .nx-fn-grid{grid-template-columns:minmax(0,1fr)}
  .nx-f-sniper,.nx-f-blur,.nx-f-uq,.nx-f-brand,.nx-f-enh,.nx-f-pub,.nx-fn-studio .nx-f-clips,.nx-fn-studio .nx-f-blur,.nx-fn-studio .nx-f-enh,.nx-fn-studio .nx-f-pub{grid-column:auto}
  .nx-wide-tile{grid-template-columns:minmax(0,1fr)}
  .nx-wide-tile>.nx-shot{grid-column:auto;grid-row:auto}
  .nx-f-sniper-body{grid-template-columns:minmax(0,1fr)}
}

/* when the browser will not autoplay (iOS in Low Power Mode), one button asks for the tap it needs */
.nx-tapper{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:30;height:44px;padding:0 20px;border:0;border-radius:999px;background:var(--ink-1);color:var(--canvas);font:600 .9375rem/1 var(--ui);box-shadow:var(--e2);translate:-50% 0;cursor:pointer}
.nx-tapper:focus-visible{outline:2px solid var(--take-text);outline-offset:3px}

/* ---- shared page pieces -------------------------------------------------------------------- */
.nx-center{justify-items:center;text-align:center}
.nx-pad{padding:0 var(--pad)}
/* a row of real clips under a hero, wider than the page so it runs off both edges */
.nx-reel-sec{position:relative;padding:0 var(--pad)}
.nx-reel-sec .nx-hold{bottom:12px}
.nx-reel{display:flex;justify-content:center;gap:var(--g);margin:clamp(40px,5vw,64px) calc(var(--pad) * -1) 0;padding:0;overflow:hidden;list-style:none}
.nx-reel>li{flex:none;width:clamp(150px,15vw,220px);aspect-ratio:9/16;border-radius:16px}
.nx-reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* a dark band where footage performs: full width, the column inside */
.nx-band{margin-top:clamp(80px,10vw,140px);padding:clamp(64px,8vw,112px) 0;background:var(--canvas)}
.nx-band>.hf-head{margin-bottom:clamp(24px,3vw,40px);padding:0 var(--pad)}
/* one shot, several ways: the frame picked comes forward */
.nx-mode-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,2vw,28px);max-width:880px;margin:0 auto}
.nx-mode{display:grid;gap:12px;margin:0;transition:opacity .36s var(--ease-expo),scale .36s var(--ease-expo)}
.js .nx-mode{opacity:.4;scale:.94}
.js .nx-mode.on{opacity:1;scale:1}
.nx-mode .screen{aspect-ratio:9/16;border-radius:22px}
.nx-mode img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nx-mode figcaption{color:var(--ink-3);text-align:center}
.nx-caps{display:none;gap:4px;width:max-content;margin:28px auto 0;padding:4px;border-radius:999px;background:var(--fill-2)}
.js .nx-caps{display:flex}
.nx-caps button{height:36px;padding:0 20px;border:0;border-radius:999px;background:none;color:var(--ink-2);font:600 .9375rem/1 var(--ui);cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease)}
.nx-caps button[aria-pressed=true]{background:var(--canvas);color:var(--ink-1);box-shadow:var(--e1)}
.nx-caps button:focus-visible{outline:2px solid var(--take-text);outline-offset:2px}
/* one large rounded stage for one picture */
.nx-stage-shot{max-width:1100px;margin:0 auto;overflow:hidden;border-radius:22px;box-shadow:inset 0 0 0 1px var(--line)}
.nx-stage-shot img{display:block;width:100%;height:auto}
@media (max-width:699px){.nx-mode figcaption{font-size:.6875rem}}

@media (prefers-reduced-motion:reduce){
  .nx-mode{transition:none}
  .nx-say,.nx-names button,.nx-deck li,.nx-fan li,.nx-dots button,.nx-card{transition:none}
}

/* ---- the look (Brand): one clip in every caption style, as Oura shows one ring ------------ */
/* Captions, Headline plate and Logo light the part of the frame a template sets; a swatch is its
   style's own render cropped to the caption line. All of it switches in CSS (:has), so it works
   without a script; app.js runs the styles through while Captions is shown. */
.nx-look{padding:clamp(92px,8.5vw,100px) var(--pad) 0;text-align:center}
.nx-look .hf-h1{margin-bottom:clamp(20px,2.4vw,32px)}
.look{display:grid;gap:clamp(20px,2.4vw,32px);justify-items:center;margin:0}
.look-zones{display:inline-flex;gap:2px;margin:0;padding:3px;border:0;border-radius:999px;background:var(--fill-2)}
.look-zones label{position:relative;cursor:pointer}
.look-zones input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.look-zones span{display:flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;color:var(--ink-2);font:500 .9375rem/1 var(--ui);white-space:nowrap;transition:background-color .2s var(--ease),color .2s var(--ease)}
.look-zones label:hover span{color:var(--ink-1)}
.look-zones input:checked+span{background:var(--canvas);color:var(--ink-1);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.look-zones input:focus-visible+span{outline:2px solid var(--take-text);outline-offset:2px}
.look-stage{display:grid;gap:24px;justify-items:center;width:100%}
@media (min-width:1000px){.look-stage{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(32px,4vw,64px)}}
.look .look-clip{width:calc(min(72vh,640px) * 9 / 16);max-width:100%;height:auto;aspect-ratio:9/16;border-radius:28px;background:#111}
.look-frame{position:absolute;inset:0}
.look-ring{position:absolute;z-index:3;left:var(--zx);top:var(--zy);width:var(--zw);height:var(--zh);border-radius:10px;box-shadow:0 0 0 2px var(--take),0 0 0 200vmax rgba(0,0,0,var(--dim));pointer-events:none;transition:left .55s var(--ease-expo),top .55s var(--ease-expo),width .55s var(--ease-expo),height .55s var(--ease-expo),box-shadow .4s var(--ease)}
.look:has([value=captions]:checked) .look-clip{--zx:7%;--zy:75%;--zw:86%;--zh:10.5%;--dim:0}
.look:has([value=plate]:checked) .look-clip{--zx:16%;--zy:9%;--zw:68%;--zh:9.5%;--dim:.55}
.look:has([value=logo]:checked) .look-clip{--zx:5%;--zy:81.5%;--zw:16%;--zh:13%;--dim:.55}
.look .st-on{transition:opacity .25s var(--ease)}
.look:not(:has([value=captions]:checked)) .st-on{opacity:0}
.look-says{display:grid;justify-self:stretch;justify-items:center;text-align:center}
.look-say{grid-area:1/1;max-width:15ch;margin:0;font:700 clamp(1.75rem,3vw,2.75rem)/1.08 var(--display);letter-spacing:-.022em;text-wrap:balance;opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease),transform .55s var(--ease-expo)}
.look-say em{font-style:normal;color:var(--ink-3)}
.look:has([value=captions]:checked) .look-say-captions,.look:has([value=plate]:checked) .look-say-plate,.look:has([value=logo]:checked) .look-say-logo{opacity:1;transform:none}
@media (min-width:1000px){.look-says{justify-items:end;text-align:right}}
/* the swatches: the fifteen styles, each its own render's caption line */
.look .look-swatches{display:grid;gap:8px;width:100%;max-width:440px;transition:opacity .3s var(--ease)}
@media (min-width:1000px){.look .look-swatches{justify-self:start}}
.look-swatches .st-group{margin:6px 0 0;color:var(--ink-3);font:600 .75rem/1.2 var(--ui);letter-spacing:0}
.look-swatches .st-set{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.look-swatches label{display:grid;gap:6px;padding:6px;border-radius:14px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s var(--ease)}
.look-swatches label:hover{box-shadow:inset 0 0 0 1px var(--line-strong)}
.look-swatches label:has(input:checked){box-shadow:inset 0 0 0 2px var(--ink-1)}
.look-swatches label:has(input:focus-visible){outline:2px solid var(--take-text);outline-offset:2px}
.look-swatches img{display:block;width:100%;height:auto;aspect-ratio:200/48;border-radius:8px;object-fit:cover;background:#111}
.look .look-swatches span{display:block;min-height:0;padding:0 2px 2px;border-radius:0;background:none;box-shadow:none;color:var(--ink-2);font:500 .8125rem/1.2 var(--ui)}
.look-swatches label:has(input:checked) span{color:var(--ink-1)}
.look:not(:has([value=captions]:checked)) .look-swatches{opacity:.35;pointer-events:none}
/* the plans, said once in display type */
.look-plans{display:grid;gap:24px;justify-items:center;padding-top:clamp(80px,10vw,144px);text-align:center}
.look-count span{white-space:nowrap}
.look-count{max-width:18ch;margin:0;font:700 clamp(2.25rem,5.5vw,4.5rem)/1.04 var(--display);letter-spacing:-.025em;text-wrap:balance}
.look-count em{font-style:normal;color:var(--ink-3)}

/* ---- on air (Stream Sniper): a session's moments fire into a feed as its playhead passes ---- */
/* The player carries the live bar and, along its foot, the lane of the session with a mark for each
   moment it clipped. The feed lists them newest on top; the clip one became floats out of the
   player's corner. At rest (no script, reduced motion) every moment and the clip show. */
.nx-air{display:flex;flex-direction:column;align-items:center;padding:clamp(92px,8.5vw,100px) var(--pad) 0;text-align:center}
.air{position:relative;display:grid;gap:16px;width:100%;margin-top:clamp(32px,4vw,56px);padding:16px;border-radius:28px;background:var(--panel);text-align:left}
@media (min-width:1000px){.air{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);padding:20px}}
.air-player{position:relative;align-self:start}
.air-screen{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:16px;background:#000}
.air-screen img,.air-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.air-bar{position:absolute;left:12px;top:12px;right:12px;z-index:2;display:flex;align-items:center;gap:10px;margin:0;pointer-events:none}
.air-bar b{padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.6);color:#f5f5f7;font:600 .8125rem/1.2 var(--ui);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.air-clock{margin-left:auto;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.6);color:var(--live-text);font-size:.9375rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* the lane: the session under the picture, its playhead and a pink mark per moment clipped */
.air-lane{position:relative;height:6px;margin-top:12px;border-radius:3px;background:var(--fill-2)}
.air-marks{position:absolute;inset:0}
.air-marks i{position:absolute;top:-4px;bottom:-4px;left:calc(var(--a) * 100%);width:4px;margin-left:-2px;border-radius:2px;background:var(--ink-4);transition:background-color .2s var(--ease),transform .3s var(--ease-expo)}
.air-marks i.on{background:var(--live);transform:scaleY(1.4)}
.air-head{position:absolute;top:-7px;bottom:-7px;left:calc(var(--h,1) * 100%);width:2px;margin-left:-1px;border-radius:1px;background:var(--ink-1)}
.air-lane::before{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--h,1) * 100%);border-radius:3px;background:var(--fill)}
/* the clip that came out of the stream, hanging off the player's corner */
.air-clip{position:absolute;z-index:3;right:-12px;bottom:-28px;display:grid;gap:8px;width:clamp(112px,13vw,176px);margin:0;transform-origin:85% 85%}
.air-clip .screen{position:relative;overflow:hidden;aspect-ratio:9/16;border-radius:14px;background:#000;box-shadow:0 0 0 2px var(--live),0 24px 48px rgba(0,0,0,.5)}
.air-clip img,.air-clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.air-clip figcaption{display:flex;align-items:center;gap:6px;justify-self:end;color:var(--ink-1);font:600 .8125rem/1 var(--ui);white-space:nowrap}
.air-on .air-clip{opacity:0;transform:translate(-28%,-12%) scale(.55);transition:opacity .35s var(--ease),transform .7s var(--ease-expo)}
.air-on .air-clip.on{opacity:1;transform:none}
/* the feed: the session in numbers on top, then the moments, newest first */
.air-side{display:grid;align-content:start;gap:12px;min-width:0}
.air-sum{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;color:var(--ink-3);font-size:.875rem}
.air-sum b{margin-right:4px;color:var(--ink-1);font:700 1.25rem/1 var(--display);font-variant-numeric:tabular-nums}
.air-feed{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:8px;margin:0;padding:0;list-style:none}
.air-feed li{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;align-items:center;padding:8px;border-radius:14px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.air-feed picture{display:block;line-height:0}
.air-feed img{width:112px;height:63px;border-radius:8px;object-fit:cover}
.air-feed b{display:block;color:var(--ink-1);font:600 .9375rem/1.3 var(--ui)}
.air-feed .tc{display:block;margin-top:4px;color:var(--live-text);font-size:.75rem}
.air-on .air-feed li:not(.on){display:none}
.air-on .air-feed li.on:last-of-type,.air-on .air-feed li.on:not(:has(~ li.on)){animation:snap .7s var(--ease-expo)}
.air .nx-hold{position:absolute;right:16px;bottom:16px;z-index:4}
@media (max-width:999px){
  .air-feed li:nth-last-child(n+4){display:none}
  .air-on .air-feed li.on{display:grid}
  .air-on .air-feed li.on:has(~ li.on ~ li.on ~ li.on){display:none}
  .air-clip{right:8px;bottom:24px}
}
@media (max-width:599px){
  .air-feed li{grid-template-columns:88px minmax(0,1fr)}
  .air-feed img{width:88px;height:50px}
  .air{padding:12px;border-radius:22px}
  .air-clip{right:6px;bottom:26px;width:64px}
  .air-clip figcaption{display:none}
  .air-bar{left:8px;top:8px;right:8px;gap:6px}
  .air-bar b,.air-clock{padding:3px 8px;font-size:.75rem}
}

/* ---- the cut (Clips): the rundown as an editor ---------------------------------------------- */
/* On a desktop the monitor sits beside the ranked list and the source timeline runs the width
   under both, as VEED and Descript lay out a clip over its tracks. On a phone the rundown keeps
   its rail. The rundown's own rules are in styles.css. */
.nx-cut{display:flex;flex-direction:column;align-items:center;padding:clamp(92px,8.5vw,100px) var(--pad) 0;text-align:center}
.cut{width:100%;margin-top:clamp(32px,4vw,56px);padding:clamp(16px,2.2vw,28px);border-radius:28px;background:var(--panel);text-align:left}
.cut .rundown{padding:0}
@media (min-width:960px){
  .cut .rundown{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"mon list" "src src";gap:28px clamp(28px,3.5vw,48px)}
  .cut .rd-stage{grid-area:mon;position:relative;top:auto}
  .cut .rd-side{display:contents}
  .cut .rd-list{grid-area:list;align-self:start}
  .cut .src{grid-area:src;margin:0;padding-top:20px;border-top:1px solid var(--line)}
  .cut .rd-row:first-child{padding-top:0}
}
.cut .src-head{color:var(--ink-3);font-size:.8125rem}
@media (max-width:959px){.cut .src{padding:0;margin:20px 0 0}}

/* ---- the month (Studio): an example October, one post opened as its card -------------------- */
/* Calendar's month (Buffer's, Apple's): seven columns, today ringed in lime, three slots a day, each
   a real clip as a 9:16 poster. Posted clips sit plain, the next three days' scheduled clips are
   ringed in lime, the slots past the Schedule's three days wait dashed. Mailchimp's one campaign
   opened: one post floats beside its day, plays, and says its time, title, score and state. The
   counts above the grid run with the fill (app.js). */
.sd-hero:has(.cal){padding-top:clamp(92px,8.5vw,100px)}
.cal{position:relative;margin-top:clamp(32px,4vw,56px);padding:clamp(16px,2vw,24px);border-radius:28px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);text-align:left}
.cal-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;padding:4px 4px 18px}
.cal-m{margin:0 6px 0 0;color:var(--ink-1);font:700 clamp(1.75rem,3vw,2.5rem)/1 var(--display);letter-spacing:-.02em}
.cal-m span{color:var(--ink-4);font-weight:600}
.cal-acct{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:var(--fill-3);color:var(--ink-2);font:600 .8125rem/1 var(--ui)}
.cal-count{display:flex;gap:clamp(16px,2.2vw,32px);margin:0 4px 0 auto}
.cal-count div{display:grid}
.cal-count dt{order:2;display:flex;align-items:center;gap:6px;color:var(--ink-3);font-size:.75rem}
.cal-count dd{margin:0;color:var(--ink-1);font:650 clamp(1.25rem,2vw,1.625rem)/1.1 var(--display);font-variant-numeric:tabular-nums}
.cal-count i{width:8px;height:8px;border-radius:2px}
.k-posted{background:var(--ink-1)}
.k-due{background:var(--take);box-shadow:inset 0 0 0 1px var(--take-edge)}
.k-free{border:1.5px dashed var(--ink-4)}
.cal-dow,.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin:0;padding:0;list-style:none}
.cal-dow li{padding:0 12px 8px;color:var(--ink-3);font:600 .75rem/1 var(--ui);text-align:right}
.cal-grid{border-radius:16px;overflow:hidden;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--line)}
.cal-grid > li{display:grid;min-width:0;box-shadow:inset -1px -1px 0 var(--line)}
.cal-out{align-content:start;padding:8px}
.cal-day{display:grid;grid-template-rows:auto 1fr;gap:6px;width:100%;min-height:clamp(64px,8.6vw,116px);padding:8px;border:0;background:none;color:var(--ink-1);font:inherit;text-align:left;cursor:pointer;transition:background .2s var(--ease)}
.cal-day:hover,.cal-day.is-open{background:var(--fill-3)}
.cal-day:focus-visible{outline:2px solid var(--take-text);outline-offset:-2px}
.cal-n{justify-self:end;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font:600 .875rem/1 var(--ui);font-variant-numeric:tabular-nums}
.cal-out .cal-n{color:var(--ink-4)}
.cal-today .cal-n{background:var(--take);color:var(--take-ink)}
.cal-slots{display:flex;gap:4px;align-items:end}
.cal-s{display:block;width:calc((100% - 8px) / 3);max-width:36px;height:auto;aspect-ratio:9/16;border-radius:5px;object-fit:cover}
.cal-s.is-due{box-shadow:0 0 0 2px var(--take),0 0 0 3px var(--take-edge)}
.cal-s.is-free{border:1.5px dashed var(--ink-4)}
/* the fill: app.js adds .cal-run, then lights the slots day by day */
.cal-run .cal-s{opacity:0;transform:translateY(6px) scale(.92);transition:opacity .35s var(--ease),transform .5s var(--ease-expo)}
.cal-run .cal-s.on{opacity:1;transform:none}
/* the opened post: beside its day on a wide screen (app.js places it), under the grid on a phone
   and wherever no script runs */
@media (min-width:700px){.js .cal-pop{position:absolute;right:clamp(28px,4vw,48px);bottom:clamp(28px,4vw,48px);margin:0}}
.cal-pop{position:relative;z-index:2;display:grid;grid-template-columns:clamp(84px,7.4vw,108px) minmax(0,1fr);gap:12px;width:clamp(248px,22vw,300px);margin:12px 0 0;padding:10px;border-radius:20px;background:var(--mat);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);box-shadow:var(--e2),var(--mat-rim)}
.cal-pop .screen{position:relative;overflow:hidden;aspect-ratio:9/16;border-radius:12px;background:#000}
.cal-pop img,.cal-pop video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
html:not(.js) .cal-pop video{display:none} /* with no script a browser shows a video's own controls: the poster stays */
.cal-pop figcaption{display:grid;align-content:start;gap:6px;min-width:0;padding-top:2px;color:var(--ink-3);font-size:.8125rem;line-height:1.3}
.cal-pt{color:var(--ink-1);font:600 1.25rem/1 var(--mono);font-variant-numeric:tabular-nums}
.cal-pn{color:var(--ink-1);font:600 .9375rem/1.3 var(--ui);text-wrap:balance}
.cal-pop .tag{justify-self:start}
.cal-due{background:var(--take-tint);color:var(--ink-1)}
.cal-run .cal-pop{opacity:0;transform:scale(.94);transform-origin:var(--from,top left);transition:opacity .25s var(--ease),transform .45s var(--ease-expo),left .45s var(--ease-expo),top .45s var(--ease-expo)}
.cal-run .cal-pop.on{opacity:1;transform:none}
@media (max-width:699px){
  .cal{margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1);border-radius:0;box-shadow:none;padding-left:var(--pad);padding-right:var(--pad)}
  .cal-count{width:100%;margin:4px 0 0}
  .cal-dow li{padding:0 0 6px;text-align:center}
  .cal-grid{border-radius:12px}
  .cal-day{gap:4px;min-height:64px;padding:4px}
  .cal-n{justify-self:center;width:22px;height:22px;font-size:.75rem}
  .cal-out{padding:4px;justify-items:center}
  .cal-slots{gap:2px}
  .cal-s{width:calc((100% - 4px) / 3);border-radius:2px}
  .cal-s.is-due{box-shadow:0 0 0 1.5px var(--take)}
  .cal-pop{left:auto!important;top:auto!important;width:auto;grid-template-columns:96px minmax(0,1fr)}
}

/* a marquee row of clips (the closing band): its tiles repeated once, sliding left by one set for ever;
   the band's pause button stops it, and without motion it stands still */
.reel-track{display:flex;gap:var(--g);flex:none;align-items:center}
@media (prefers-reduced-motion:no-preference){
  .reel-track.marquee-on{animation:nx-marquee 60s linear infinite;will-change:transform}
  .nx-held .reel-track.marquee-on{animation-play-state:paused}
}
@keyframes nx-marquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - var(--g) / 2))}}

/* ---- every kind of video (Clips): real runs, one tab each ---------------------------------- */
/* The tabs are radios, so a pick works without a script; the clips play while in view (loose()).
   Under them, the app's own genre and length pickers, set to Auto as the app sets them. */
.kinds{display:grid;justify-items:center;gap:clamp(20px,2.4vw,28px)}
.kinds-tabs{flex-wrap:wrap;justify-content:center}
.kinds-run{display:none;justify-items:center;gap:14px;width:100%}
.kinds:has([value=gaming]:checked) .kinds-gaming,.kinds:has([value=fitness]:checked) .kinds-fitness,.kinds:has([value=lecture]:checked) .kinds-lecture,.kinds:has([value=food]:checked) .kinds-food{display:grid}
.kinds-src{margin:0;color:var(--ink-2);font-size:.9375rem}
.kinds-clips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g);width:min(100%,780px);margin:0;padding:0;list-style:none}
.kinds-clips .screen{position:relative;overflow:hidden;aspect-ratio:9/16;border-radius:18px;background:#111}
.kinds-clips img,.kinds-clips video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kinds-set{display:grid;gap:10px;justify-items:center;margin-top:4px}
.kinds-pick{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:0}
.kinds-pick span{padding:6px 12px;border-radius:999px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);font-size:.8125rem;line-height:1.2}
.kinds-pick .kinds-k{padding-left:0;background:none;box-shadow:none;color:var(--ink-3);font-weight:600}
.kinds-pick .kinds-on{background:var(--ink-1);box-shadow:none;color:var(--canvas)}

@media (max-width:899px){.sb{grid-template-columns:minmax(0,1fr)}.sb .w3,.sb .w2,.sb .w6{grid-column:auto}}

/* ---- the build-up (Stream Sniper): the clip a moment becomes, on the session's timeline ------- */
/* The lane runs from 10:30 before the peak to a minute after (690 s); --s is where the clip starts
   (the default, 5 minutes before, without a script). The peak, the end (+30 s) and the cut (+36 s)
   sit at fixed places on it. */
.win{--s:.4783;display:grid;gap:20px;padding:clamp(20px,3vw,36px);border-radius:28px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.win-lane{position:relative;height:16px;margin-top:clamp(150px,15vw,176px);border-radius:8px;background:repeating-linear-gradient(90deg,var(--line-strong) 0 1px,transparent 1px calc(100% / 11.5)),var(--fill-3)}
.win-span{position:absolute;top:-4px;bottom:-4px;left:calc(var(--s) * 100%);right:calc(100% - 100% * 660 / 690);border-radius:6px;background:var(--take);box-shadow:inset 0 0 0 1px var(--take-edge);transition:left .25s var(--ease-expo)}
.win-peak{position:absolute;bottom:calc(100% + 14px);left:calc(100% * 630 / 690);display:grid;gap:4px;justify-items:end;width:clamp(120px,15vw,168px);transform:translateX(-86%);color:var(--ink-1);font-size:.8125rem;text-align:right}
.win-peak img{width:100%;height:auto;aspect-ratio:16/9;border-radius:10px;object-fit:cover;box-shadow:0 0 0 2px var(--live)}
.win-peak .tc{color:var(--live-text)}
.win-peak::after{content:"";position:absolute;right:calc(14% - 1px);top:100%;width:2px;height:20px;background:var(--live)}
.win-cut{position:absolute;top:-10px;bottom:-10px;left:calc(100% * 666 / 690);width:2px;background:var(--ink-1)}
.win-cut span{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);color:var(--ink-2);font-size:.75rem;white-space:nowrap}
.win-read{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin:18px 0 0;color:var(--ink-2);font-size:1rem}
.win-read b{color:var(--ink-1);font-weight:600}
.win-ctl{display:grid;gap:6px;max-width:520px}
html:not(.js) .win-ctl{display:none}

/* ---- it tells you (Stream Sniper): the app's notices around the clip they announce ------------ */
.notes{position:relative;display:grid;gap:16px;align-items:center;justify-items:center}
@media (min-width:960px){.notes{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(24px,3vw,48px)}}
.notes-l,.notes-r{display:grid;gap:12px;width:100%;max-width:380px;margin:0;padding:0;list-style:none}
@media (min-width:960px){.notes-l{justify-self:end}.notes-r{justify-self:start}.notes-l li:nth-child(2){margin-right:-28px}.notes-r li:nth-child(1){margin-left:-28px}}
.note{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:start;padding:14px 16px;border-radius:20px;background:var(--canvas);box-shadow:0 0 0 1px var(--line),0 12px 32px rgba(0,0,0,.08);text-align:left}
.note-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--ink-1);color:var(--canvas);font:800 1.125rem/1 var(--display)}
.note-text{display:grid;gap:3px;min-width:0;color:var(--ink-2);font-size:.875rem;line-height:1.35}
.note-text b{color:var(--ink-1);font-weight:600;font-size:.9375rem}
.note-t{color:var(--ink-3);font-size:.75rem;white-space:nowrap}
.notes-clip{width:clamp(180px,20vw,250px);margin:0}
.notes-clip .screen{position:relative;overflow:hidden;aspect-ratio:9/16;border-radius:22px;background:#000;box-shadow:0 0 0 2px var(--live),0 24px 48px rgba(0,0,0,.18)}
.notes-clip img,.notes-clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.notes-ex{grid-column:1/-1;justify-self:center}

/* ---- the bridge (Stream Sniper): one sentence in display type, and the way across ------------ */
.sn-bridge{display:grid;gap:24px;justify-items:center;text-align:center}
.sn-bridge-t{max-width:22ch;margin:0;font:700 clamp(2rem,4.6vw,3.75rem)/1.06 var(--display);letter-spacing:-.025em;text-wrap:balance}
.sn-bridge-t em{font-style:normal;color:var(--ink-3)}

/* ---- in, through, out (Clips): what it takes and what it hands back, each limit where it applies,
   after beehiiv's and Titan Intake's flows ----------------------------------------------------- */
.cs-flow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(16px,3vw,40px);padding:clamp(24px,3.4vw,48px);border-radius:28px;background:var(--panel)}
.cs-col{display:grid;gap:10px;min-width:0}
.cs-k{margin:0 0 2px;color:var(--ink-3);font:600 .8125rem var(--ui)}
.cs-film{display:block;width:100%;height:48px;border-radius:10px;object-fit:cover;object-position:left}
.cs-pill{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0;padding:13px 16px;border-radius:14px;background:var(--canvas);font-size:.9375rem}
.cs-pill b{color:var(--ink-1);font-weight:600}
.cs-pill span{color:var(--ink-3);font-size:.8125rem;text-align:right}
.cs-core{position:relative;display:grid;justify-items:center;gap:6px;min-width:190px;padding:28px 22px;border-radius:26px;background:var(--ink-1);color:var(--canvas);text-align:center}
.cs-core b{margin-bottom:6px;font:800 2rem/1 var(--display);letter-spacing:-.03em}
.cs-core span{font-size:.875rem;opacity:.8}
.cs-core::before,.cs-core::after{content:"";position:absolute;top:50%;width:clamp(16px,3vw,40px);height:2px;background:var(--ink-4)}
.cs-core::before{right:100%}.cs-core::after{left:100%}
.cs-thumbs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.cs-thumbs img{display:block;width:100%;height:auto;aspect-ratio:9/16;border-radius:8px;object-fit:cover}
.cs-cost{display:flex;justify-content:center;margin:20px 0 0}
.cs-cost span{padding:10px 18px;border-radius:999px;background:var(--panel);color:var(--ink-1);font-weight:600}
@media (max-width:899px){.cs-flow{grid-template-columns:minmax(0,1fr)}.cs-core::before,.cs-core::after{display:none}.cs-core{min-width:0}}

/* ---- one clip up close (Clips): every spec on the part of the clip it describes, as Rains labels a
   jacket; its true size on its edges, the other two shapes as outlines behind it ---------------- */
.cs-ana{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(16px,4vw,56px);align-items:stretch;max-width:1000px;margin:clamp(24px,3vw,40px) auto 0}
.cs-clip{position:relative;width:clamp(190px,24vw,280px);aspect-ratio:9/16}
.cs-clip .screen{position:absolute;inset:0;z-index:1;overflow:hidden;border-radius:24px;background:#111;box-shadow:0 30px 60px rgba(0,0,0,.22)}
.cs-clip img,.cs-clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-ghost{position:absolute;border:1.5px dashed var(--ink-4);border-radius:16px;pointer-events:none}
.cs-ghost.sq{left:-9%;right:-9%;top:22%;aspect-ratio:1}
.cs-ghost.wd{left:-48%;right:-48%;top:34%;aspect-ratio:16/9}
.cs-ghost span{position:absolute;bottom:calc(100% + 6px);right:0;color:var(--ink-3);font:600 .75rem var(--ui);white-space:nowrap}
.cs-ghost.wd span{right:auto;left:0}
.cs-ghost.sq span{bottom:auto;top:-1px;right:calc(100% + 10px)}
.cs-dim{position:absolute;color:var(--ink-3);font:500 .75rem var(--mono)}
.cs-dim.w{left:0;right:0;top:-28px;display:flex;align-items:center;gap:8px}
.cs-dim.w::before,.cs-dim.w::after{content:"";flex:1;height:1px;background:var(--ink-4)}
.cs-dim.h{top:0;bottom:0;right:-34px;display:flex;flex-direction:column;align-items:center;gap:8px;writing-mode:vertical-rl}
.cs-dim.h::before,.cs-dim.h::after{content:"";flex:1;width:1px;background:var(--ink-4)}
.cs-calls{display:grid;align-content:space-between;gap:24px;padding:6% 0}
.cs-calls.l{text-align:right}
.cs-call{display:grid;gap:5px;margin:0}
.cs-call>b{color:var(--ink-1);font:700 clamp(1.125rem,1.7vw,1.5rem)/1.15 var(--display);letter-spacing:-.015em}
.cs-call>span{color:var(--ink-2);font-size:.9375rem;line-height:1.35}
.cs-chips{display:flex;flex-wrap:wrap;gap:6px}
.cs-calls.l .cs-chips{justify-content:flex-end}
.cs-chips i{padding:4px 10px;border-radius:999px;background:var(--panel);color:var(--ink-1);font-size:.8125rem;font-style:normal}
.cs-score{display:inline-flex;align-items:baseline;gap:8px}
.cs-score b{color:var(--ink-1);font:800 2.75rem/1 var(--display);letter-spacing:-.03em}
.cs-score em{color:var(--ink-3);font-style:normal;font-weight:600}
.cs-files{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:clamp(32px,4vw,48px) 0 0}
.cs-files i{padding:9px 16px;border-radius:12px;background:var(--panel);color:var(--ink-1);font-weight:600;font-style:normal}
.cs-files span{color:var(--ink-3);font-weight:500}
@media (max-width:760px){.cs-ana{grid-template-columns:minmax(0,1fr);justify-items:center}.cs-calls,.cs-calls.l{padding:0;text-align:center}.cs-calls.l .cs-chips{justify-content:center}.cs-ghost,.cs-dim.h{display:none}.cs-clip{margin-top:28px}}

/* the hero's editor window has no labels column now: the clip is labelled once, up close above */
.cut .rd-stage{grid-template-columns:auto}

/* ---- tech specs (Stream Sniper): Apple's highlight tiles ------------------------------- */
/* One two-tone statement at the top of a tile and one visual anchored to its foot, built from the
   app's real output and its own values (live screens, the window, the settings at their defaults).
   No paragraph under a tile. Stream Sniper's alone: one signature per page. */
.sb{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--g)}
.sb>article{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(24px,3vw,36px);min-width:0;min-height:clamp(260px,24vw,320px);padding:clamp(24px,2.6vw,36px);border-radius:28px;background:var(--panel);overflow:hidden}
.sb .w3{grid-column:span 3}.sb .w2{grid-column:span 2}.sb .w6{grid-column:span 6;min-height:0}
@media (max-width:899px){.sb{grid-template-columns:minmax(0,1fr)}.sb .w3,.sb .w2,.sb .w6{grid-column:auto}.sb>article{min-height:0}}
.sb h3{max-width:20ch;margin:0;color:var(--ink-1);font:700 clamp(1.5rem,2.2vw,2rem)/1.1 var(--display);letter-spacing:-.022em;text-wrap:balance}
.sb h3 em{font-style:normal;color:var(--ink-3)}
.sb-ends{display:flex;justify-content:space-between;gap:12px;margin:8px 0 0;color:var(--ink-3);font-size:.8125rem;font-variant-numeric:tabular-nums}
.sb-ends3{display:grid;grid-template-columns:43% 33% 1fr;white-space:nowrap}.sb-ends3 span:last-child{color:var(--live-text);text-align:right}
/* a setting: its track and its knob at the app's default */
.sb-range{position:relative;height:28px}
.sb-range::before{content:"";position:absolute;left:0;right:0;top:11px;height:6px;border-radius:3px;background:var(--fill)}
.sb-range .fill{position:absolute;top:11px;left:0;height:6px;width:calc(var(--k) * 100%);border-radius:3px;background:var(--ink-1)}
.sb-range .knob{position:absolute;top:2px;left:calc(var(--k) * 100%);width:24px;height:24px;margin-left:-12px;border-radius:50%;background:var(--canvas);box-shadow:0 1px 4px rgba(0,0,0,.25),0 0 0 .5px rgba(0,0,0,.12)}
.sb-range.sens{--k:.615}.sb-range.auto{--k:.667}
.sb-set{display:grid;gap:4px}.sb-set .sb-ends{margin:2px 0 14px}.sb-set .sb-ends:last-child{margin-bottom:0}
/* streams: one screen, or three, each live */
.sb-streams{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.sb-streams li{display:grid;grid-template-columns:7.5rem minmax(0,1fr);align-items:center;gap:12px}
.sb-k{color:var(--ink-2);font-size:.875rem}
.sb-scr{display:flex;gap:8px}
.sb-scr i{position:relative;flex:0 1 96px;aspect-ratio:16/9;border-radius:10px;background:#1c1c1e}
.sb-scr i::after{content:"Live";position:absolute;left:7px;top:7px;padding:2px 6px;border-radius:999px;background:var(--live);color:var(--live-ink);font:700 .625rem/1.2 var(--ui);font-style:normal}
/* the build-up on a lane, the moment's frame over its peak */
.sb-lane{position:relative;height:20px;margin-top:64px}
.sb-lane::before{content:"";position:absolute;inset:0;border-radius:10px;background:var(--fill-2)}
.sb-lane .l-max{position:absolute;top:0;bottom:0;left:0;width:86%;border-radius:10px 0 0 10px;background:color-mix(in srgb,var(--take) 30%,transparent)}
.sb-lane .l-def{position:absolute;top:0;bottom:0;left:43%;width:43%;background:var(--take);box-shadow:inset 0 0 0 1px var(--take-edge)}
.sb-lane .l-aft{position:absolute;top:0;bottom:0;left:86%;width:4.3%;border-radius:0 10px 10px 0;background:var(--take);box-shadow:inset 0 0 0 1px var(--take-edge)}
.sb-lane .l-pk{position:absolute;top:-8px;bottom:-8px;left:86%;width:2px;margin-left:-1px;background:var(--live)}
.sb-lane .l-pk img{position:absolute;bottom:calc(100% + 6px);left:50%;width:96px;max-width:none;height:auto;aspect-ratio:16/9;border-radius:8px;object-fit:cover;transform:translateX(-70%);box-shadow:0 0 0 2px var(--live)}
/* chat as it reads it: what counts, and what it skips (struck) */
.sb-chat{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin:0;padding:0;list-style:none}
.sb-chat li{padding:5px 11px;border-radius:12px 12px 12px 4px;background:var(--canvas);color:var(--ink-1);font-size:.875rem}
.sb-chat .x{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--ink-4);background:none;box-shadow:inset 0 0 0 1px var(--line)}
/* Clip now, as the app's moment list shows it */
.sb-moment{display:grid;gap:10px}
.sb-tabs{display:flex;gap:2px;margin:0;padding:3px;border-radius:999px;background:var(--fill-2);width:max-content}
.sb-tabs span{padding:5px 12px;border-radius:999px;color:var(--ink-2);font-size:.8125rem}
.sb-tabs .on{background:var(--canvas);color:var(--ink-1);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.sb-mrow{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px;border-radius:16px;background:var(--canvas)}
.sb-mrow img{width:88px;height:auto;aspect-ratio:16/9;border-radius:8px;object-fit:cover}
.sb-mrow b{display:block;color:var(--ink-1);font-weight:600;font-size:.9375rem}
.sb-mrow .tc{color:var(--live-text);font-size:.75rem}
.sb-btn{padding:8px 14px;border-radius:999px;background:var(--ink-1);color:var(--canvas);font-weight:600;font-size:.8125rem;white-space:nowrap}
/* an hour at a time */
.sb-hours{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.2fr);gap:6px;margin:0;padding:0;list-style:none}
.sb-hours li{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:14px 16px;border-radius:14px;background:color-mix(in srgb,var(--take) 30%,var(--canvas));color:var(--ink-2);font-size:.875rem}
.sb-hours .tot{background:var(--ink-1);color:var(--canvas)}
.sb-hours b{color:inherit;font:700 1.375rem/1 var(--display)}
.sb-hours li:not(.tot) b{color:var(--ink-1)}
@media (max-width:699px){.sb-hours{grid-template-columns:repeat(3,minmax(0,1fr))}.sb-hours .tot{grid-column:1/-1}}
/* inside a panel (the editor window, the live stage) cards lift to the canvas, light or dark */
.air-feed li,.cut .rd-card{background:var(--canvas)}
@media (max-width:959px){.cut .rd-row{background:var(--canvas)}}