@font-face{font-family:"Geist Mono";src:url("/fonts/geist-mono.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* The Bench (the app's design system, 2026-10-20): the interface is the neutral gray of an editing
   bench; colour belongs to the footage and to one highlighter, lime, which marks "this one, now".
   Light and dark follow the system; a visitor's pick sets data-theme on <html> (public/theme.js).
   The old names stay so every rule keeps working: canvas/panel/raised are surfaces, ink-1..4 are
   labels, take/live/mind/wire are lime, pink, purple and cyan fills, and each has a -text ink. */
:root{
  color-scheme:light;
  --canvas:#ffffff;--panel:#f5f5f5;--raised:#ebebeb;--stage:#111111;
  --ink-1:#1d1d1f;--ink-2:#5c5c61;--ink-3:#6a6a6f;--ink-4:#aeaeb2;
  --line:rgba(0,0,0,.08);--line-strong:rgba(0,0,0,.12);--control:#86868b;
  --fill:rgba(120,120,120,.16);--fill-2:rgba(120,120,120,.12);--fill-3:rgba(120,120,120,.08);
  --take:#c8ff4d;--take-hover:#bff23f;--take-pressed:#b4eb3a;--take-ink:#1b2400;--take-text:#466e00;--take-tint:rgba(200,255,77,.30);--take-edge:rgba(70,110,0,.55);
  --live:#ff5fa8;--live-ink:#2a0a14;--live-text:#c4006a;
  --mind:#9b7bff;--mind-text:#6a45d9;--mind-tint:rgba(155,123,255,.16);
  --wire:#5eebff;--wire-text:#006a85;--danger:#c4001a;
  --mat:rgba(250,250,250,.80);--mat-solid:#f7f7f7;--mat-rim:inset 0 0 0 .5px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.5);
  --e1:0 1px 2px rgba(0,0,0,.06),0 0 0 .5px rgba(0,0,0,.06);--e2:0 8px 24px rgba(0,0,0,.14),0 0 0 .5px rgba(0,0,0,.12);
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,"Segoe UI",Roboto,sans-serif;

  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono","Geist Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,0,0,1);--ease-expo:cubic-bezier(.32,.72,0,1);
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:22px;
  /* the side margin for copy; output grids run closer to the edge. Past --wrap the margin
     grows instead, so every section (and the header) holds a 1200px column while full-bleed
     backgrounds still reach the edges. */
  --wrap:1200px;
  --pad:max(clamp(16px,2.2vw,32px),calc((100vw - var(--wrap)) / 2));--g:clamp(8px,1.1vw,16px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--dark:1}}
:root[data-theme="dark"]{--dark:1}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;--canvas:#111111;--panel:#1c1c1c;--raised:#262626;
  --ink-1:#f5f5f7;--ink-2:#aeaeb2;--ink-3:#98989d;--ink-4:#545458;
  --line:rgba(255,255,255,.08);--line-strong:rgba(255,255,255,.12);--control:#7c7c80;
  --fill:rgba(120,120,120,.36);--fill-2:rgba(120,120,120,.28);--fill-3:rgba(120,120,120,.18);
  --take-text:#c8ff4d;--take-tint:rgba(200,255,77,.16);--take-edge:transparent;--live-text:#ff5fa8;--mind-text:#ac92ff;--mind-tint:rgba(155,123,255,.22);--wire-text:#5eebff;--danger:#ff6961;
  --mat:rgba(28,28,28,.80);--mat-solid:#1c1c1c;--mat-rim:inset 0 0 0 .5px rgba(255,255,255,.10),inset 0 1px 0 rgba(255,255,255,.06);
  --e1:0 0 0 .5px rgba(255,255,255,.08);--e2:0 8px 24px rgba(0,0,0,.5),0 0 0 .5px rgba(255,255,255,.12);
}}
:root[data-theme="dark"]{
  color-scheme:dark;--canvas:#111111;--panel:#1c1c1c;--raised:#262626;
  --ink-1:#f5f5f7;--ink-2:#aeaeb2;--ink-3:#98989d;--ink-4:#545458;
  --line:rgba(255,255,255,.08);--line-strong:rgba(255,255,255,.12);--control:#7c7c80;
  --fill:rgba(120,120,120,.36);--fill-2:rgba(120,120,120,.28);--fill-3:rgba(120,120,120,.18);
  --take-text:#c8ff4d;--take-tint:rgba(200,255,77,.16);--take-edge:transparent;--live-text:#ff5fa8;--mind-text:#ac92ff;--mind-tint:rgba(155,123,255,.22);--wire-text:#5eebff;--danger:#ff6961;
  --mat:rgba(28,28,28,.80);--mat-solid:#1c1c1c;--mat-rim:inset 0 0 0 .5px rgba(255,255,255,.10),inset 0 1px 0 rgba(255,255,255,.06);
  --e1:0 0 0 .5px rgba(255,255,255,.08);--e2:0 8px 24px rgba(0,0,0,.5),0 0 0 .5px rgba(255,255,255,.12);
}
/* a stage is where footage plays: dark in both appearances, as the app's editor is */
.stage{--take-edge:transparent;--canvas:#111111;--panel:#1c1c1c;--raised:#262626;--ink-1:#f5f5f7;--ink-2:#aeaeb2;--ink-3:#98989d;--ink-4:#545458;--line:rgba(255,255,255,.08);--line-strong:rgba(255,255,255,.12);--take-text:#c8ff4d;--live-text:#ff5fa8;--mind-text:#ac92ff;--wire-text:#5eebff;color-scheme:dark;color:var(--ink-1)}
@media (prefers-contrast:more){:root{--ink-2:#3a3a3e;--ink-3:#4f4f54;--line:rgba(0,0,0,.2);--take-text:#2f5200}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:80px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
html,body{margin:0;background:var(--canvas);color:var(--ink-1);font-family:var(--ui);-webkit-font-smoothing:antialiased}
body{overflow-x:hidden;font-size:1rem;line-height:1.6;letter-spacing:.005em}
img,video,svg{display:block;max-width:100%}
/* a <picture> only picks the still's format; its <img> lays out as if it stood alone */
picture{display:contents}
a{color:inherit}
p{margin:0}
:focus-visible{outline:2px solid var(--take-text);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-80px;z-index:40;padding:12px 16px;border-radius:10px;background:var(--take);color:var(--take-ink);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
/* facts and spec lines: the footnote style, figures tabular; true timecodes keep a monospace face (.tc) */
.mono{font-family:var(--ui);font-size:.8125rem;letter-spacing:0;font-variant-numeric:tabular-nums}
.tc{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* boqo stays lowercase inside uppercase type */
.name{text-transform:none}

/* type */
.display,.headline{margin:0;font-family:var(--display);font-weight:700;color:var(--ink-1);text-wrap:balance}
.display{font-size:clamp(2.75rem,6.4vw,5.5rem);line-height:1.05;letter-spacing:-.03em}
.headline{font-size:clamp(2rem,4vw,3.5rem);line-height:1.08;letter-spacing:-.022em}
.lede{max-width:40ch;font-size:clamp(1.0625rem,1.5vw,1.375rem);line-height:1.45;color:var(--ink-2);text-wrap:pretty}

/* the caption highlight: words light up one at a time, like boqo's burned-in captions */
/* the box snaps from word to word, as a burned-in caption does; only the unread words fade */
.caption .w{display:inline-block;padding:0 .06em;margin:0 -.06em;border-radius:.06em;transition:opacity .2s var(--ease)}
.caption .w.on{background:var(--take);color:var(--take-ink)}
.caption.playing .w{opacity:.2}
.caption.playing .w.past,.caption.playing .w.on{opacity:1}

/* buttons */
.take,.quiet{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;border:0;border-radius:999px;font:600 1rem/1 var(--ui);text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
.take{height:48px;padding:0 22px;background:var(--take);color:var(--take-ink);transition:background-color .12s var(--ease),transform .12s var(--ease)}
.take:hover{background:var(--take-hover)}
.take:active{transform:scale(.98)}
.take[aria-busy=true]{cursor:progress;filter:saturate(.7)}
.quiet{height:44px;padding:0 18px;background:var(--fill-2);color:var(--ink-1);font-size:.9375rem;box-shadow:none;transition:box-shadow .12s var(--ease),color .12s var(--ease)}
.quiet:hover{background:var(--fill)}
.take:active{background:var(--take-pressed)}
.take.sm,.quiet.sm{height:34px;padding:0 15px;font-size:.875rem}

/* tags */
.tag{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:999px;font:600 .6875rem/1 var(--ui);letter-spacing:0}
.tag.live{background:var(--live);color:var(--live-ink)}
.tag.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--live-ink)}
.tag.soon{background:var(--fill-2);color:var(--ink-2)}

/* header */
.top{position:fixed;inset:0 0 auto;z-index:30;display:flex;align-items:center;gap:20px;height:56px;padding:0 var(--pad);padding-top:env(safe-area-inset-top);transition:background-color .32s var(--ease),box-shadow .32s var(--ease)}
.top.scrolled{background:var(--mat);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);box-shadow:inset 0 -.5px 0 var(--line-strong)}
@media (prefers-reduced-transparency:reduce){.top.scrolled{background:var(--mat-solid);-webkit-backdrop-filter:none;backdrop-filter:none}}
/* the appearance toggle: a bezel-less circle, as the app's icon buttons are */
.theme-btn{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;margin-left:auto;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink-2);cursor:pointer;transition:background-color .14s var(--ease),color .14s var(--ease)}
.theme-btn:hover{background:var(--fill-3);color:var(--ink-1)}
.theme-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.theme-btn .i-sun,.theme-btn[data-on="dark"] .i-moon{display:none}
.theme-btn[data-on="dark"] .i-sun{display:block}
.theme-btn:not([hidden]) ~ .top-actions{margin-left:0}
.brand{flex:none;border-radius:6px}
.brand .wm{width:auto;height:24px;color:var(--ink-1)}
.anchors{display:none}
.anchors a{padding:10px 12px;border-radius:8px;color:var(--ink-2);font-size:.9375rem;font-weight:500;text-decoration:none;transition:color .12s var(--ease)}
.anchors a:hover{color:var(--ink-1)}
.top-actions{display:flex;gap:8px;margin-left:auto}
.top-actions[hidden]{display:none}
.me{display:block;flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line-strong);background:var(--panel)}
.me img{display:block;width:100%;height:100%;object-fit:cover}
.me:hover{box-shadow:0 0 0 2px var(--ink-4)}
@media (min-width:900px){.anchors{display:flex;gap:2px;margin-left:12px}}
@media (max-width:639px){.top .quiet{display:none}}
/* the menu: the pages behind a button under 900px, opening as a sheet below the header */
.menu-btn{position:relative;flex:none;width:44px;height:44px;margin-right:-10px;padding:0;border:0;background:transparent;color:var(--ink-1);cursor:pointer;-webkit-tap-highlight-color:transparent}
.menu-btn i{position:absolute;left:13px;width:18px;height:1.5px;border-radius:1px;background:currentColor;transition:transform .32s var(--ease)}
.menu-btn i:first-child{top:18px}
.menu-btn i:last-child{top:24px}
.top:has(.menu:popover-open) .menu-btn i:first-child{transform:translateY(3px) rotate(45deg)}
.top:has(.menu:popover-open) .menu-btn i:last-child{transform:translateY(-3px) rotate(-45deg)}
.top:has(.menu:popover-open){background:var(--canvas);box-shadow:none}
.top:has(.menu:popover-open) .scrub{opacity:0;pointer-events:none}
html:has(.menu:popover-open){overflow:hidden}
.menu{display:none;position:fixed;inset:calc(56px + env(safe-area-inset-top)) 0 0;width:auto;height:auto;max-width:none;max-height:none;margin:0;padding:16px var(--pad) 40px;border:0;background:var(--canvas);color:var(--ink-1);overflow:auto;overscroll-behavior:contain}
.menu::backdrop{background:transparent}
.menu:popover-open{display:flex;flex-direction:column;align-items:flex-start}
.menu a{display:block;padding:8px 0;color:var(--ink-1);font-size:1.75rem;font-weight:600;letter-spacing:-.015em;line-height:1.15;text-decoration:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.menu a[aria-current]{color:var(--take-text)}
.menu .menu-sub{margin-top:24px;color:var(--ink-2);font-size:1.0625rem;font-weight:500;letter-spacing:0}
.menu [hidden]{display:none}
.menu a:nth-child(2){transition-delay:.03s}
.menu a:nth-child(3){transition-delay:.06s}
.menu a:nth-child(4){transition-delay:.09s}
.menu a:nth-child(5){transition-delay:.12s}
@starting-style{.menu:popover-open a{opacity:0;transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.menu a,.menu-btn i{transition:none}}
@media (min-width:900px){.menu-btn,.menu{display:none}}
.anchors a[aria-current]{color:var(--ink-1)}
/* the scrub: the page's chapters as a player's progress bar along the header's edge, once it has
   scrolled. Each chapter is as long as its section; tap one to jump there. */
.scrub{position:absolute;left:0;right:0;top:100%;display:flex;gap:2px;height:16px;opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.top.scrolled .scrub{opacity:1;pointer-events:auto}
.scrub a{position:relative;flex:1 1 0;min-width:0;text-decoration:none;-webkit-tap-highlight-color:transparent}
.scrub i{display:block;height:3px;overflow:hidden;background:color-mix(in srgb,var(--ink-1) 10%,transparent);transition:transform .16s var(--ease);transform-origin:50% 0}
.scrub a:hover i,.scrub a:focus-visible i{transform:scaleY(1.7)}
.scrub b{display:block;height:100%;background:var(--live);transform:scaleX(0);transform-origin:0 50%}
.scrub .tip{position:absolute;top:10px;left:0;padding:4px 8px;border-radius:6px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--ink-1);font:500 .75rem/1.2 var(--ui);white-space:nowrap;opacity:0;transform:translateY(-3px);transition:opacity .16s var(--ease),transform .16s var(--ease);pointer-events:none}
.scrub a:last-child .tip{left:auto;right:0}
.scrub a:hover .tip,.scrub a:focus-visible .tip{opacity:1;transform:none}
.scrub a:focus-visible{outline:none}

/* the gate: a link field that takes the visitor to sign-up with their link */
.gate{width:min(100%,620px)}
.gate-label{display:block;margin:0 0 10px;font-size:.9375rem;font-weight:500;color:var(--ink-2)}
.gate-field{display:flex;flex-direction:column;gap:8px;padding:8px;border-radius:22px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line-strong);transition:box-shadow .16s var(--ease)}
.gate-field:focus-within{box-shadow:0 0 0 1px var(--take-text),0 0 32px rgba(200,255,77,.22)}
.gate.invalid .gate-field{box-shadow:0 0 0 1px var(--danger)}
.gate input{width:100%;min-width:0;height:48px;padding:0 14px;border:0;border-radius:14px;background:transparent;color:var(--ink-1);font:400 1rem var(--ui);outline:none}
.gate input::placeholder{color:var(--ink-3)}
.gate .take{width:100%}
.gate-msg{min-height:0;margin:10px 4px 0;font-size:.875rem;line-height:1.4;color:var(--danger)}
.gate-msg:empty{display:none}
.gate-msg a{color:var(--ink-1)}
.gate-in{display:flex;align-items:center;flex:1;min-width:0}
/* paste from the clipboard in one tap: most visitors arrive with the link already copied.
   app.js shows it where the browser can read the clipboard; it steps aside once there's text. */
.paste{flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;margin-right:6px;padding:0 13px 0 11px;border:0;border-radius:999px;background:var(--raised);color:var(--ink-2);font:500 .875rem/1 var(--ui);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .12s var(--ease),box-shadow .12s var(--ease)}
.paste:hover{color:var(--ink-1);box-shadow:inset 0 0 0 1px var(--ink-4)}
.paste svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.gate-in:has(input:not(:placeholder-shown)) .paste{display:none}
/* the front door names both functions; a pasted link picks its own (app.js), and without a script the choice still travels as fn */
.modes{display:inline-flex;gap:2px;min-width:0;margin:0;padding:3px;border:0;border-radius:999px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line-strong)}
.modes label{position:relative;display:block;cursor:pointer}
.modes input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.modes span{display:block;padding:8px 14px;border-radius:999px;color:var(--ink-2);font:500 .875rem/1.2 var(--ui);white-space:nowrap;transition:background-color .16s var(--ease),color .16s var(--ease)}
.modes label:hover span{color:var(--ink-1)}
.modes input:checked+span{background:var(--ink-1);color:var(--canvas)}
.modes input:focus-visible+span{outline:2px solid var(--take-text);outline-offset:2px}
.gate-modes .for-stream,.gate-modes:has([value=stream]:checked) .for-clips{display:none}
.gate-modes:has([value=stream]:checked) .for-stream{display:inline}
/* your link on the monitor: once a YouTube link is in the hero's field, the visitor's own video,
   its length and what it costs (app.js asks /api/preview; thumbnails come from our origin) */
.gate .for-video,.gate.has-video .for-clips{display:none}
.gate.has-video .for-video{display:inline}
.yours{display:grid;grid-template-columns:clamp(112px,30vw,184px) minmax(0,1fr);gap:14px;align-items:center;margin-top:12px;padding:8px 12px 8px 8px;border-radius:18px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line-strong);animation:yours-in .24s var(--ease)}
.yours[hidden]{display:none}
@keyframes yours-in{from{opacity:0;transform:translateY(-6px)}}
.yours-screen{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--raised)}
.yours-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .24s var(--ease)}
.yours-screen img.on{opacity:1}
.yours-len{position:absolute;right:6px;bottom:6px;padding:2px 5px;border-radius:4px;background:rgba(7,6,11,.86);color:#f5f5f7}
.yours-len:empty{display:none}
.yours-copy{display:grid;gap:4px;min-width:0}
.yours-copy p{margin:0}
.yours-title{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font:600 .9375rem/1.3 var(--ui);color:var(--ink-1)}
.yours-by{overflow:hidden;font-size:.8125rem;color:var(--ink-3);white-space:nowrap;text-overflow:ellipsis}
.yours-by:empty,.yours-cost:empty{display:none}
.yours-cost{font-size:.8125rem;line-height:1.4;color:var(--ink-2)}
.yours-cost b{margin-right:2px;color:var(--ink-1);font-weight:500}
.yours.loading .yours-title{font-weight:500;color:var(--ink-3)}
.is-still .yours,.is-still .yours-screen img{animation:none;transition:none}
@media (min-width:560px){
  .gate-field{flex-direction:row;align-items:center;gap:6px;padding:6px;border-radius:999px}
  .gate input{height:52px;padding:0 8px 0 20px}
  .gate .take{width:auto}
}

.fine{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.875rem;color:var(--ink-3)}
.fine strong{color:var(--ink-1);font-weight:600}
.fine a{color:var(--wire-text);text-underline-offset:3px}

/* sections */
.section{position:relative;z-index:1;padding:clamp(64px,7vw,104px) 0 0;background:var(--canvas)}

/* clips: the rundown. A control room's running order of real clips, best first. Pick one, or let it
   run, and the program monitor takes it with what boqo did to it pinned to the frame. Titles, scores,
   bands and lengths are the app's, read from the two projects on 2026-10-05. */
.rundown{display:grid;gap:clamp(28px,4vw,64px);padding:0 var(--pad)}
@media (min-width:960px){.rundown{grid-template-columns:auto minmax(0,1fr);align-items:start}}
.rd-stage{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px 22px;align-self:start}
@media (min-width:960px){.rd-stage{position:sticky;top:96px;grid-template-columns:auto 230px}}
.rd-mon{width:clamp(176px,52vw,340px);aspect-ratio:9/16;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line),0 0 0 1px var(--line)}
@media (min-width:960px){.rd-mon{width:min(340px,calc((100svh - 220px) * 9 / 16))}}
.pins{position:relative;margin:0;padding:0;list-style:none}
.pin{position:absolute;left:0;right:0;display:flex;align-items:center;gap:10px;transform:translateY(-50%)}
.p-title{top:14%}
.p-frame{top:42%}
.p-cap{top:80.5%}
.pin.off{visibility:hidden}
/* each pin reaches back into the frame, to the thing it names */
.pin i{position:relative;flex:none;width:16px;height:1px;margin-left:-22px;background:var(--ink-2);transform-origin:0 50%}
.pin i::before{content:"";position:absolute;left:-4px;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--ink-1);box-shadow:0 0 0 3px rgba(7,6,11,.6)}
.pin span{color:var(--ink-2);font-size:.875rem;line-height:1.35}
.pin b{color:var(--ink-1);font-weight:600}
@media (prefers-reduced-motion:no-preference){
  .rd-stage.cue .pin span{animation:pin-in .55s var(--ease-expo) both}
  .rd-stage.cue .pin i{animation:pin-line .45s var(--ease-expo) both}
  .rd-stage.cue .p-frame :is(span,i){animation-delay:.12s}
  .rd-stage.cue .p-cap :is(span,i){animation-delay:.24s}
}
@keyframes pin-in{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes pin-line{from{transform:scaleX(0)}to{transform:none}}
.rd-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;grid-column:1/-1;padding:14px 16px;border-radius:14px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.rd-score{display:flex;align-items:center;gap:12px}
.rd-score .n{font:500 2rem/1 "Bricolage Grotesque",var(--ui);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rd-score .meter{display:flex;gap:4px}
.rd-score .meter i{width:14px;height:4px;border-radius:2px;background:var(--ink-4);transition:background-color .2s var(--ease)}
.rd-score .meter i.on{background:var(--mind)}
.rd-score .band{color:var(--ink-3);font:600 .75rem/1 var(--ui);letter-spacing:.06em;}
.rd-meta{color:var(--ink-2)}
.rd-toggle{--mw:clamp(176px,52vw,340px);position:absolute;top:calc(var(--mw) * 16 / 9 - 54px);left:calc(var(--mw) - 54px)}
@media (min-width:960px){.rd-toggle{--mw:min(340px,calc((100svh - 220px) * 9 / 16))}}
.rd-side{display:grid;gap:4px;min-width:0}
.rd-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.rd-head span:first-child{color:var(--ink-2);font-size:1rem}
.rd-head .mono{color:var(--ink-3)}
.rd-list{margin:0;padding:0;list-style:none}
.rd-row{position:relative;display:grid;grid-template-columns:2.25rem minmax(0,1fr);gap:8px 12px;width:100%;padding:14px 0 16px;border:0;border-bottom:1px solid var(--line);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rd-n{grid-row:1/3;padding-top:.5em;color:var(--ink-3)}
.rd-t{color:var(--ink-3);font:600 clamp(1.125rem,1.7vw,1.5rem)/1.25 var(--display);letter-spacing:-.012em;text-wrap:balance;transition:color .16s var(--ease)}
.rd-t span{padding:0 .06em;margin:0 -.06em;border-radius:.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.rd-row:hover .rd-t{color:var(--ink-2)}
/* the clip on air: its title in ink, its number on the lime highlighter */
.rd-row[aria-pressed=true] .rd-t{color:var(--ink-1)}
.rd-row[aria-pressed=true] .rd-n{align-self:start;justify-self:start;padding:3px 7px;border-radius:999px;background:var(--take);color:var(--take-ink)}
.rd-m{color:var(--ink-3)}
.rd-row[aria-pressed=true] .rd-m{color:var(--ink-2)}
.rd-run{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--live);transform:scaleX(0);transform-origin:0 50%}
.rundown.running .rd-row[aria-pressed=true] .rd-run{animation:rd-run var(--dwell,7s) linear forwards}
.rundown.held .rd-run{animation-play-state:paused}
@keyframes rd-run{to{transform:none}}
/* on a phone the running order is a rail under the monitor, so the pick and the picture share a screen */
@media (max-width:959px){
  .rd-side{margin:0 calc(var(--pad) * -1)}
  .rd-head{padding:0 var(--pad) 12px;border:0}
  .rd-list{position:relative;display:flex;gap:10px;padding:0 var(--pad) 6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--pad);scrollbar-width:none;overscroll-behavior-x:contain}
  .rd-list::-webkit-scrollbar{display:none}
  .rd-list li{flex:none;width:min(80vw,330px);scroll-snap-align:start}
  .rd-row{height:100%;align-content:start;padding:14px 16px 20px;border:0;border-radius:14px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
  .rd-row[aria-pressed=true]{box-shadow:inset 0 0 0 1px var(--line-strong)}
  .rd-t{font-size:1.5rem}
  .rd-run{left:16px;right:16px;bottom:9px;border-radius:2px}
}
.screen{position:relative;margin:0;overflow:hidden;border-radius:14px;background:var(--panel) center/cover no-repeat;box-shadow:inset 0 0 0 1px var(--line)}
.screen video,.screen>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the clip's own title card and captions are burned in; the tile only adds its length */
.screen .chip{position:absolute;right:8px;bottom:10px;display:block;height:auto;padding:3px 6px;border-radius:6px;background:rgba(7,6,11,.78);box-shadow:none;color:#f5f5f7;font-size:.6875rem;line-height:1.4;cursor:default}
.screen .bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--live)}
.screen.playing .bar{animation:bar var(--dur,5s) linear infinite}
@keyframes bar{from{width:0}to{width:100%}}
.play{position:absolute;inset:auto auto 12px 12px;display:none;align-items:center;gap:8px;height:36px;padding:0 14px 0 12px;border:0;border-radius:999px;background:rgba(7,6,11,.82);color:#f5f5f7;font:600 .8125rem var(--ui);cursor:pointer}
.play svg{width:12px;height:12px}
.still .play{display:inline-flex}

/* where each clip came from: the source of the clip on air as a filmstrip, boqo's picks bracketed
   in Producer Violet where they really sit (ranges read from the app). app.js places the brackets,
   so without a script the rundown stands alone. A bracket for a clip in the rundown cues it. */
.src{display:none;margin:16px 0 12px}
/* the one-line tip must clip rather than widen the rundown's column */
.js .src{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.rd-side{grid-template-columns:minmax(0,1fr)}
.src-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;font-size:.875rem;color:var(--ink-2)}
.src-name{color:var(--ink-3)}
.src-track{position:relative;height:62px}
.src-track[hidden]{display:none}
.src-track::before{content:"";position:absolute;inset:18px 0 0;border-radius:8px;background:var(--panel) var(--strip,none) 0 0/100% 100% no-repeat;box-shadow:inset 0 0 0 1px var(--line);opacity:.55}
.src-picks{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.src-picks li{display:contents}
.pick{position:absolute;top:18px;bottom:0;left:var(--l);width:var(--w);margin:0;padding:0;border:0;border-radius:4px;background:rgba(155,123,255,.12);box-shadow:inset 0 0 0 1px rgba(155,123,255,.55);color:inherit;font:inherit;cursor:default;transition:background-color .16s var(--ease),box-shadow .16s var(--ease)}
button.pick{cursor:pointer}
.pick b{position:absolute;left:50%;top:-17px;translate:-50% 0;color:var(--ink-3);font:500 .6875rem/1 var(--mono)}
/* A long video makes many clips: past the top eight a pick shows its number only when pointed at or cued. */
.pick.minor b{opacity:0;transition:opacity .16s var(--ease)}
.pick.minor:is(:hover,:focus-visible,.on) b{opacity:1}
.pick:hover,.pick:focus-visible{background:var(--mind-tint)}
.pick:focus-visible{outline:2px solid var(--take-text);outline-offset:2px}
.pick.on{background:rgba(155,123,255,.34);box-shadow:inset 0 0 0 2px var(--mind)}
.pick.on b{color:var(--ink-1)}
.src-axis{display:flex;justify-content:space-between;gap:12px;margin:0;color:var(--ink-3)}
.src-tip{flex:1;min-width:0;overflow:hidden;color:var(--ink-2);text-align:center;white-space:nowrap;text-overflow:ellipsis}
@media (max-width:959px){.src{padding:0 var(--pad)}}

/* what comes out: one real moment as uploaded and as boqo cut it, split by a handle the visitor
   drags (a native range on top, for keyboard and touch), and the five caption styles as the app's
   own picker tiles over a frame of the same talk. The styles switch in CSS, so they work without a script. */
.made{display:grid;gap:clamp(24px,3vw,40px);align-items:start;padding:clamp(56px,7vw,96px) var(--pad) 0}
@media (min-width:640px){.made{grid-template-columns:repeat(2,auto);justify-content:start}.made-copy{grid-column:1/-1}}
@media (min-width:1180px){.made{grid-template-columns:minmax(0,1fr) auto auto;justify-content:stretch}.made-copy{grid-column:auto}}
.made-copy{max-width:42ch}
.made-copy p{margin:0;color:var(--ink-2);line-height:1.5}
.made-title{margin:0 0 14px;color:var(--ink-1);font:700 clamp(2rem,3.4vw,3rem)/1.08 var(--display);letter-spacing:-.02em}
.made-copy .made-spec{margin-top:16px;color:var(--ink-3)}
.ba,.styles{display:grid;gap:12px;justify-items:start;margin:0}
.ba figcaption,.styles figcaption{max-width:300px;color:var(--ink-3);font-size:.8125rem;line-height:1.4}
.ba-screen,.st-screen{position:relative;width:min(300px,100%);aspect-ratio:9/16;overflow:hidden;border-radius:14px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.ba-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the frame's edge stays visible over the upload's dark letterbox */
.ba-screen::after,.st-screen::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line-strong);pointer-events:none}
.ba-after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--x,50%))}
.ba-line{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;margin-left:-1px;background:#f5f5f7;pointer-events:none}
.ba-line i{position:absolute;top:50%;left:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:#f5f5f7;box-shadow:0 0 0 4px rgba(7,6,11,.35)}
.ba-line i::before,.ba-line i::after{content:"";position:absolute;top:50%;width:0;height:0;margin-top:-5px;border:5px solid transparent}
.ba-line i::before{left:7px;border-right-color:#111}
.ba-line i::after{right:7px;border-left-color:#111}
.ba-screen:has(.ba-range:focus-visible) .ba-line i{outline:2px solid var(--take-text);outline-offset:3px}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.ba-tag{position:absolute;top:10px;padding:3px 7px;border-radius:6px;background:rgba(7,6,11,.84);color:#f5f5f7;font-size:.6875rem;pointer-events:none}
.ba-tag-in{left:10px}
.ba-tag-out{right:10px}
.ba-screen .play{z-index:2}
/* Caption styles: one real clip rendered by boqo in all fifteen styles. The radios swap a
   still in CSS, so the picker works without a script; with one, the playing loop follows the pick
   at the same moment, and the styles run through by themselves until the visitor picks one. */
.st-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.styles:has([value=karaoke]:checked) .st-karaoke,.styles:has([value=punch]:checked) .st-punch,.styles:has([value=clean]:checked) .st-clean,.styles:has([value=highlight]:checked) .st-highlight,.styles:has([value=classic]:checked) .st-classic,.styles:has([value=bounce]:checked) .st-bounce,.styles:has([value=neon]:checked) .st-neon,.styles:has([value=boldkeys]:checked) .st-boldkeys,.styles:has([value=typewriter]:checked) .st-typewriter,.styles:has([value=slide]:checked) .st-slide,.styles:has([value=comic]:checked) .st-comic,.styles:has([value=marker]:checked) .st-marker,.styles:has([value=stack]:checked) .st-stack,.styles:has([value=minimal]:checked) .st-minimal,.styles:has([value=editorial]:checked) .st-editorial{opacity:1}
.st-screen video{z-index:1;opacity:0;transition:opacity .2s var(--ease)}
.st-screen.playing video{opacity:1}
.st-on{position:absolute;z-index:2;top:10px;left:10px;display:flex;align-items:center;gap:8px;margin:0;padding:5px 8px 5px 10px;border-radius:8px;background:rgba(7,6,11,.84);color:#f5f5f7;font:600 .8125rem/1.2 var(--ui)}
.st-tier{color:#aeaeb2;font-size:.6875rem;font-weight:500}
.styles.running .st-screen::before{content:"";position:absolute;z-index:2;left:0;bottom:0;height:3px;width:100%;background:var(--live);transform-origin:left;animation:st-dwell var(--dwell,6s) linear}
@keyframes st-dwell{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.st-group{width:100%;margin:6px 0 0;color:var(--ink-3);font-size:.6875rem;letter-spacing:.06em;}
.st-group:first-of-type{margin-top:0}
.st-set{display:flex;flex-wrap:wrap;gap:6px}
.st-chips{display:flex;flex-wrap:wrap;gap:6px;max-width:340px;margin:0;padding:0;border:0}
.st-chips label{position:relative;display:block;cursor:pointer}
.st-chips input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.st-chips span{display:block;padding:7px 12px;border-radius:999px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--ink-2);font:500 .8125rem/1.2 var(--ui);transition:background-color .16s var(--ease),color .16s var(--ease)}
.st-chips label:hover span{color:var(--ink-1)}
.st-chips input:checked+span{background:var(--ink-1);color:var(--canvas)}
.st-chips input:focus-visible+span{outline:2px solid var(--take-text);outline-offset:2px}
.is-still .st-screen video,.is-still .pick{transition:none}

/* motion toggles: anything that moves for longer than five seconds can be paused (WCAG 2.2.2) */
.motion-toggle{position:absolute;z-index:3;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(7,6,11,.72);color:#f5f5f7;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);cursor:pointer;transition:box-shadow .12s var(--ease)}
.motion-toggle:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.motion-toggle svg{width:12px;height:12px;fill:currentColor}
.motion-toggle .i-play,.motion-toggle[aria-pressed=true] .i-pause{display:none}
.motion-toggle[aria-pressed=true] .i-play{display:block}
.is-still .motion-toggle{display:none}

/* stream sniper: a live session, its moments snapping out, and the two settings that decide them */
.sniper{display:grid;gap:var(--g);padding:0 var(--pad)}
.sniper-deck{padding:16px;border-radius:20px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.sniper-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-bottom:16px}
.sniper-head .chan{color:var(--ink-2)}
.sniper-head .clock{margin-left:auto;color:var(--live-text)}
.sniper-head .motion-toggle{position:static;width:36px;height:36px}
.sniper-grid{display:grid;gap:16px}
@media (min-width:1000px){.sniper-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}}
.monitor{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:12px;background:var(--canvas) url("/media/stream-01.jpg") center/cover no-repeat;box-shadow:0 0 0 1px var(--live)}
.monitor video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feed-title{margin-bottom:10px;color:var(--ink-3)}
.feed,.pool{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.moment{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center;padding:8px;border-radius:12px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--line)}
.moment img{width:96px;height:54px;border-radius:6px;object-fit:cover}
@media (max-width:999px){.feed>.moment:nth-child(n+4){display:none}}
@media (min-width:1000px){.moment{grid-template-columns:120px minmax(0,1fr);padding:10px}.moment img{width:120px;height:68px}}
.moment p{font-size:.9375rem;line-height:1.35;color:var(--ink-2)}
.moment b{color:var(--ink-1);font-weight:600}
.moment .mono{margin-top:4px;color:var(--live-text);font-size:.6875rem}
.moment.fresh{animation:snap .7s var(--ease-expo)}
.sniper-sum{margin-top:16px;color:var(--ink-2);font-size:.9375rem}
.sniper-sum .mono{font-size:.875rem;color:var(--ink-1)}
.moments{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--g);margin:var(--g) 0 0;padding:0;list-style:none}
@media (min-width:700px){.moments{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1180px){.moments{grid-template-columns:repeat(6,minmax(0,1fr))}}
.moments .screen{aspect-ratio:9/16}
.moments .screen.fresh{animation:snap .7s var(--ease-expo)}
@keyframes snap{from{opacity:0;transform:translateY(-16px) scale(.94)}to{opacity:1;transform:none}}

/* tune: the app's own Auto-clip dialog, working. Its example activity, its two lines from the
   detector's formulas and its level controls; drag a setting and the dots follow. Script only. */
.tune{display:none;gap:20px;padding:16px;border-radius:20px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.js .tune{display:grid}
@media (min-width:1000px){.tune{grid-template-columns:minmax(0,1.45fr) minmax(320px,1fr);align-items:center;gap:40px;padding:24px 32px 24px 24px}}
.tune-chart{display:grid;gap:12px;padding:16px 18px 14px;border-radius:14px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--line)}
.tune-head{display:flex;justify-content:space-between;align-items:baseline}
.tune-head h3{margin:0;color:var(--ink-2);font:600 .75rem/1.2 var(--ui);letter-spacing:.08em;}
.tune-head .mono{color:var(--ink-3)}
.sig{width:100%;height:auto;overflow:visible}
.sig .g{stroke:var(--line);stroke-width:1}
.sig .tk{fill:var(--ink-3);font:10px var(--mono)}
.sig .wash{fill:var(--live);opacity:.1}
.sig .act{fill:none;stroke:var(--live);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.sig .l-sens{stroke:var(--ink-2);stroke-width:1.5}
.sig .l-auto{stroke:var(--take-text);stroke-width:1.5;stroke-dasharray:5 4}
.sig .l-auto.off{stroke:var(--ink-4)}
.sig .lb{fill:var(--ink-2);font:500 10.5px var(--ui);paint-order:stroke;stroke:var(--canvas);stroke-width:4px;stroke-linejoin:round}
.sig .lb.off{fill:var(--ink-3)}
/* a peak that clears Sensitivity gets its dot; one that clears Auto-clip too gets the line's ring */
.sig .md{fill:var(--mind);stroke:var(--canvas);stroke-width:2;opacity:0;transform:scale(.3);transform-box:fill-box;transform-origin:center;transition:transform .32s var(--ease-expo),opacity .2s var(--ease)}
.sig .md.on{opacity:1;transform:none}
.sig .ring{fill:none;stroke:var(--take-text);stroke-width:1.5;opacity:0;transform:scale(.5);transform-box:fill-box;transform-origin:center;transition:transform .32s var(--ease-expo),opacity .2s var(--ease)}
.sig .ring.on{opacity:1;transform:none}
.tune-says{color:var(--ink-1);font-size:.9375rem;line-height:1.45}
.tune-says b{font-weight:600}
.tune-controls{display:grid;gap:18px;align-content:center}
.tune-lede{max-width:34ch;color:var(--ink-2);font-size:1rem;line-height:1.5}
.level{display:grid;gap:6px}
.level-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.level-top label{font-size:.9375rem;color:var(--ink-1)}
.level-top output{font-size:.875rem;color:var(--ink-1)}
.level-bars{position:relative;display:flex;align-items:flex-end;gap:3px;height:52px;padding:5px;border-radius:10px;background:var(--raised);transition:background-color .12s var(--ease),opacity .2s var(--ease)}
.level-bars:hover{background:color-mix(in srgb,var(--ink-1) 7%,var(--raised))}
.level-bars:has(input:focus-visible){box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--take-text)}
.level-bars i{flex:1;min-width:3px;height:var(--h);border-radius:2px;background:var(--line-strong);transition:background-color .1s var(--ease)}
.level-bars i.on{background:var(--take);box-shadow:inset 0 0 0 1px var(--take-edge)}
/* the bars are the picture; a native range on top of them is the control, keyboard and all */
.level-bars input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;touch-action:pan-y}
.level-scale{display:flex;justify-content:space-between;color:var(--ink-3);font-size:.6875rem}
.tune.auto-off .level.score .level-bars{opacity:.4}
.switch{position:relative;display:inline-flex;align-items:center;gap:12px;justify-self:start;font-size:.9375rem;cursor:pointer}
.switch input{position:absolute;width:1px;height:1px;opacity:0}
.switch-track{position:relative;flex:none;width:40px;height:24px;border-radius:999px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line-strong);transition:background-color .16s var(--ease)}
.switch-track::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--ink-2);transition:transform .24s var(--ease-expo),background-color .16s var(--ease)}
.switch input:checked+.switch-track{background:var(--take);box-shadow:inset 0 0 0 1px var(--take-edge)}
.switch input:checked+.switch-track::after{transform:translateX(16px);background:var(--take-ink)}
.switch input:focus-visible+.switch-track{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--take-text)}
.tune-note{max-width:44ch;color:var(--ink-3);font-size:.875rem;line-height:1.5}

/* credits: what a month of the visitor's own video costs, against the app's plans (plan set B) */
.credits{display:grid;gap:clamp(28px,4vw,56px);padding:0 var(--pad)}
.credits-copy{display:grid;gap:24px;align-content:start}
.credits .headline{max-width:14ch}
.credits .lede{max-width:46ch}
@media (min-width:1000px){.credits{grid-template-columns:minmax(0,1.15fr) minmax(440px,1fr);align-items:start}.credits-copy{position:sticky;top:104px}}
.calc{container:tally/inline-size;display:grid;gap:18px;justify-items:start;padding:clamp(16px,2.2vw,28px);border-radius:20px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
/* the sliders need the script to add up; without it the plans stand on their own */
.calc-in{display:none;gap:16px;width:100%}
.js .calc-in{display:grid}
.calc-title{margin:0 0 4px;font-size:1.125rem;font-weight:600;line-height:1.25}
.calc-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:4px 12px}
.calc-row label{color:var(--ink-2);font-size:.9375rem}
.calc-row output{color:var(--ink-1);font-size:.8125rem}
.calc-row input{grid-column:1/-1}
:is(.calc,.pro-size,.win) input[type=range]{--p:50%;width:100%;height:32px;margin:0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none}
:is(.calc,.pro-size,.win) input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--ink-1) var(--p),var(--ink-4) var(--p))}
:is(.calc,.pro-size,.win) input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--ink-4)}
:is(.calc,.pro-size,.win) input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--ink-1)}
:is(.calc,.pro-size,.win) input[type=range]::-webkit-slider-thumb{width:22px;height:22px;margin-top:-9px;border:0;border-radius:50%;background:var(--ink-1);box-shadow:0 0 0 4px var(--panel);-webkit-appearance:none;appearance:none}
:is(.calc,.pro-size,.win) input[type=range]::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:var(--ink-1);box-shadow:0 0 0 4px var(--panel)}
:is(.calc,.pro-size,.win) input[type=range]:focus-visible{outline:none}
:is(.calc,.pro-size,.win) input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--take-text)}
:is(.calc,.pro-size,.win) input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--take-text)}
.calc-out{display:grid;gap:8px;margin-top:4px;padding-top:18px;border-top:1px solid var(--line)}
.calc-total{color:var(--ink-2);font-size:.9375rem}
.calc-total .n{display:block;margin-bottom:8px;font:700 clamp(3.5rem,14cqw,6rem)/1.06 var(--display);color:var(--ink-1)}
.calc-sum{color:var(--ink-3)}
/* the plan that covers the month lights up the way a caption word does */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:100%;margin:0;padding:0;list-style:none}
@container tally (min-width:430px){.plans{grid-template-columns:repeat(4,minmax(0,1fr))}}
.plans li{display:grid;gap:3px;padding:12px;border-radius:12px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--line);transition:background-color .2s var(--ease),opacity .2s var(--ease)}
.plans .pn{margin-bottom:2px;color:var(--ink-1);font-weight:600;line-height:1.2}
.plans .pc,.plans .pp{color:var(--ink-3);font-size:.8125rem;line-height:1.3}
.plans b{color:var(--ink-2);font-weight:500}
.plans li.fits{background:var(--ink-1);box-shadow:none}
.plans li.fits span,.plans li.fits b{color:var(--canvas)}
.plans li.short{opacity:.4}
.calc-verdict{color:var(--ink-1);font-weight:600;line-height:1.4}
.calc-verdict:empty{display:none}
.calc-note{max-width:52ch;color:var(--ink-3);font-size:.875rem;line-height:1.5}

/* faq */
.faq{display:grid;gap:28px;padding:0 var(--pad)}
@media (min-width:1000px){.faq{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}}
.faq-list{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:16px 0;font-size:1.125rem;font-weight:600;line-height:1.3;list-style:none;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;border:solid var(--ink-3);border-width:0 2px 2px 0;transform:translateY(-3px) rotate(45deg);transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.faq summary:hover::after{border-color:var(--ink-1)}
.faq details p{max-width:65ch;padding:0 0 22px;color:var(--ink-2)}
.faq details p a{color:var(--wire-text);text-underline-offset:3px}

/* closing */
.closing{position:relative;z-index:1;margin-top:clamp(80px,11vw,160px);padding:clamp(64px,9vw,120px) var(--pad);overflow:hidden;isolation:isolate;background:var(--panel)}
/* the closing band: one full-bleed band in the panel colour, edge to edge and light or dark. The
   call sits on the page's left edge; the wall of real clips runs from the middle to the screen's right
   edge, fading in at its left (a mask, so it works in either appearance) */
.closing .reel{position:absolute;top:0;bottom:0;left:calc(var(--pad) + min(620px,44vw) + 32px);right:0;z-index:-1;display:flex;align-items:center;overflow:hidden;padding:var(--g) 0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%);mask-image:linear-gradient(90deg,transparent 0,#000 18%)}
.closing .reel .screen{flex:none;width:clamp(120px,14vw,200px);height:auto;aspect-ratio:9/16;align-self:center;border-radius:14px}
.closing .reel .screen img{width:100%;height:100%;object-fit:cover}
@media (max-width:899px){
  .closing{padding-top:0}
  .closing .reel{position:relative;left:auto;height:clamp(220px,60vw,320px);margin:0 calc(var(--pad) * -1) 24px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent);overflow:hidden}
  .closing .reel .screen{width:clamp(110px,30vw,160px);align-self:flex-start}
}
.closing-band{display:grid;gap:24px;max-width:900px}

/* footer */
.foot{display:grid;gap:28px;padding:48px var(--pad) max(32px,env(safe-area-inset-bottom));border-top:1px solid var(--line)}
@media (min-width:820px){.foot{grid-template-columns:1fr auto;align-items:center}}
.foot-brand{display:grid;gap:10px;justify-items:start}
.foot-brand .wm{height:22px;width:auto;color:var(--ink-1)}
.foot-brand p{color:var(--ink-3)}
.social{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.social a{display:inline-flex;align-items:center;justify-content:center;height:44px;border-radius:999px;color:var(--ink-2);text-decoration:none;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line-strong);transition:color .12s var(--ease),box-shadow .12s var(--ease)}
.social a:hover{color:var(--ink-1);box-shadow:inset 0 0 0 1px var(--ink-4)}
.social svg{flex:none;width:16px;height:16px}
.social .discord{gap:10px;padding:0 18px 0 16px;font:600 .875rem var(--ui);color:var(--ink-1)}
.social .discord svg{width:18px;height:18px;color:var(--wire-text)}
.social .icon{width:44px}
.legal{display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--ink-3);font-size:.875rem}
.legal a{color:var(--ink-2);text-underline-offset:3px}

/* the dock: on a phone, once the hero's field has scrolled away, a paste field waits at the thumb.
   It steps aside whenever another field or the footer is on screen (app.js). */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:25;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--canvas) 88%,transparent);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);box-shadow:inset 0 1px 0 var(--line);transform:translateY(110%);visibility:hidden;transition:transform .36s var(--ease-expo),visibility 0s linear .36s}
.dock.on{transform:none;visibility:visible;transition:transform .42s var(--ease-expo),visibility 0s}
.dock .gate{width:100%;max-width:620px;margin:0 auto}
.dock .gate-field{flex-direction:row;align-items:center;gap:6px;padding:5px;border-radius:999px}
.dock .gate input{height:44px;padding:0 6px 0 16px}
.dock .gate .take{width:auto;height:44px;padding:0 18px;font-size:.9375rem}
.dock .paste{height:34px;margin-right:2px}
@media (min-width:900px){.dock{display:none}}

/* entrances: sections rise in as they arrive, once. app.js sets .js, so
   without a script nothing waits to become visible. */
@media (prefers-reduced-motion:no-preference){
  .js .rise{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-expo),transform .9s var(--ease-expo)}
  .js .rise.seen{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  .screen.playing .bar{animation:none}
  .dock,.dock.on{transition:none}
}

/* a section title: uppercase, its key words in lime */
.ptitle{margin:0 0 18px;padding:0 var(--pad);color:var(--ink-1);font:700 clamp(2rem,4vw,3.5rem)/1.08 var(--display);letter-spacing:-.022em;text-wrap:balance}

/* plans, side by side: every row is a number from the app's own plan table */
.compare{padding:0 var(--pad)}
.compare-scroll{overflow-x:auto;margin:0 calc(var(--pad) * -1);padding:0 var(--pad)}
.compare table{width:100%;min-width:640px;border-collapse:collapse;table-layout:fixed;font-size:.9375rem}
.compare thead td{width:28%}
/* the row names stay put while the plans scroll under them on a phone */
.compare tbody th,.compare thead td{position:sticky;left:0;z-index:1;background:var(--canvas)}
.compare th,.compare td{padding:14px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.compare thead th{padding-top:18px;color:var(--ink-1);font-weight:600;vertical-align:bottom}
.compare thead .pp{display:block;margin-top:4px;color:var(--ink-2);font:500 .8125rem var(--ui)}
.compare tbody th{color:var(--ink-2);font-weight:500}
.compare td{color:var(--ink-1);font-variant-numeric:tabular-nums}
.compare td.no{color:var(--ink-3)}
.compare .ours{background:color-mix(in srgb,var(--ink-1) 5%,transparent)}
.compare .tag{position:static;margin-left:8px;vertical-align:middle}
/* on a phone two plans sit side by side and each column's name is a picker (app.js) */
.compare-chev,.compare-sel{display:none}
@media (max-width:699px){
  .compare.picking .compare-scroll{overflow:visible;margin:0;padding:0}
  /* Apple's compare on a phone: each row's name on a line of its own, the two plans' values under it,
     and the plan names stay under the header while the rows scroll */
  .compare.picking :is(table,thead,tbody){display:block;min-width:0}
  .compare.picking tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px;padding:14px 0;border-bottom:1px solid var(--line)}
  .compare.picking :is(th,td){padding:0;border:0;background:none}
  .compare.picking .off,.compare.picking thead td{display:none}
  .compare.picking tbody th{grid-column:1/-1;position:static;color:var(--ink-3);font-size:.8125rem}
  .compare.picking thead{position:sticky;top:56px;z-index:2;background:var(--canvas)}
  .compare.picking thead tr{align-items:start}
  .compare.picking thead th{position:relative;padding:4px 0}
  .compare.picking .compare-sel{display:block;position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;cursor:pointer}
  .compare.picking .compare-chev{display:inline-block;width:7px;height:7px;margin:0 2px 3px 8px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
  .compare.picking thead th:has(.compare-sel:focus-visible){outline:2px solid var(--take-text);outline-offset:2px;border-radius:8px}
  .compare.picking .tag{margin:6px 0 0;display:flex;width:max-content}
}

/* moving between pages: the header stays put while the page under it crossfades */
@view-transition{navigation:auto}
.top{view-transition-name:top}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* the review pass, 5 Oct */
.tag.replay{background:var(--raised);color:var(--ink-2)}
.moment picture{display:block;line-height:0}
@media (min-width:1000px){.sniper-grid>div:first-child{position:sticky;top:96px;align-self:start}}
@media (min-width:960px){.made.two{grid-template-columns:minmax(0,1fr) auto;justify-content:stretch}.made.two .made-copy{grid-column:auto}}
.made-copy .made-more{margin-top:10px;color:var(--ink-3);font-size:.875rem}
.foot-nav{display:flex;flex-wrap:wrap;gap:10px 24px}
.foot-nav a{color:var(--ink-2);font-size:.9375rem;text-decoration:none}
.foot-nav a:hover{color:var(--ink-1)}

/* The site's grammar, after Higgsfield (Mobbin, 2026-10-05): a centered tool hero whose composer is
   the paste field, a row of real clips under it, 16:9 promo cards with the function's name set on its
   footage, a lime offer panel beside a grid of function tiles, a gallery of real output under a lime
   title, and a banner for Stream Sniper. The home uses all of it; the feature pages use the hero,
   the formats row and a how-it-works panel, Pricing its plan columns, Studio a catalog. */
/* A lime word in a title: Higgsfield's highlight, and this site's (DESIGN.md, the One Take Rule). */
.hf-h1 em,.hf-title em,.hf-title-xl em,.ptitle em,.headline em{font-style:normal;color:var(--ink-3)}
.nb{white-space:nowrap}

.hf-hero{display:flex;flex-direction:column;align-items:center;padding:clamp(92px,8.5vw,100px) var(--pad) 0;text-align:center}
.hf-fan{display:flex;justify-content:center;align-items:flex-end;height:clamp(100px,8.4vw,120px);margin-bottom:clamp(14px,1.4vw,18px)}
.hf-fan .screen{flex:none;width:clamp(54px,4.8vw,70px);aspect-ratio:9/16;margin:0 -9px;border-radius:10px;box-shadow:0 0 0 3px var(--canvas)}
.hf-fan .screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hf-fan .screen:nth-child(1){transform:translateY(14px) rotate(-16deg)}
.hf-fan .screen:nth-child(2){z-index:1;transform:translateY(3px) rotate(-8deg)}
.hf-fan .screen:nth-child(3){z-index:2;width:clamp(64px,5.6vw,80px)}
.hf-fan .screen:nth-child(4){z-index:1;transform:translateY(3px) rotate(8deg)}
.hf-fan .screen:nth-child(5){transform:translateY(14px) rotate(16deg)}
.hf-h1{max-width:none;margin:0;font:700 clamp(2.75rem,6.4vw,5.5rem)/1.05 var(--display);letter-spacing:-.03em;text-wrap:balance}
.hf-sub{max-width:50ch;margin:14px 0 0;color:var(--ink-2);font-size:clamp(.9375rem,1.15vw,1.0625rem);line-height:1.5;text-wrap:pretty}

/* the composer: Higgsfield's prompt box, holding the paste field */
.hf-composer{width:min(100%,840px);margin-top:clamp(24px,2.4vw,30px);border-radius:20px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line-strong);text-align:left;transition:box-shadow .16s var(--ease)}
.hf-composer:focus-within{box-shadow:0 0 0 1px var(--take-text),0 0 32px rgba(200,255,77,.16)}
.hf-composer.invalid{box-shadow:0 0 0 1px var(--danger)}
.hf-tabs{display:flex;align-items:stretch;gap:2px;min-width:0;margin:0;padding:0 10px;border:0;border-bottom:1px solid var(--line)}
.hf-tabs label{position:relative;display:block;cursor:pointer}
.hf-tabs input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.hf-tabs label>span{display:flex;align-items:center;gap:8px;height:48px;padding:0 10px;color:var(--ink-3);font:500 .9375rem/1 var(--ui);white-space:nowrap;box-shadow:inset 0 -2px 0 transparent;transition:color .16s var(--ease),box-shadow .16s var(--ease)}
.hf-tabs svg{width:17px;height:17px}
.hf-tabs label:hover>span{color:var(--ink-1)}
.hf-tabs input:checked+span{color:var(--take-text);box-shadow:inset 0 -2px 0 var(--take-text)}
.hf-tabs input:focus-visible+span{outline:2px solid var(--take-text);outline-offset:-4px;border-radius:8px}
.hf-free{align-self:center;margin-left:auto;padding-left:12px;color:var(--ink-3);font-size:.8125rem;white-space:nowrap}
.hf-composer .gate-in{padding:12px 8px 2px 4px}
.hf-composer input{height:60px;font-size:clamp(1.0625rem,1.5vw,1.25rem)}
.hf-bar{display:flex;align-items:flex-end;gap:10px;padding:6px 10px 10px}
.hf-upload{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 12px;border-radius:12px;background:var(--raised);color:var(--ink-2);font:500 .875rem/1 var(--ui);text-decoration:none;box-shadow:inset 0 0 0 1px var(--line);transition:color .12s var(--ease),box-shadow .12s var(--ease)}
.hf-upload:hover{color:var(--ink-1);box-shadow:inset 0 0 0 1px var(--ink-4)}
.hf-upload svg{width:16px;height:16px}
.gate .hf-go{width:auto;height:60px;margin-left:auto;padding:0 32px;border-radius:14px;font-size:1.0625rem}
.hf-composer .yours{flex:1;align-self:stretch;grid-template-columns:104px minmax(0,1fr);gap:12px;margin:0;padding:6px 10px 6px 6px;border-radius:14px;background:var(--raised);box-shadow:none}
.hf-composer .yours-title{-webkit-line-clamp:1}
.hf-composer .yours-by{display:none}
.hf-composer .gate-msg{margin:0 16px 14px}
.hf-fine{margin:14px 0 0;color:var(--ink-3);font-size:.8125rem}

/* the formats row: the talk's best clips, playing, cut off by the fold the way Higgsfield's are */
.hf-formats{width:100%;max-width:1240px;margin-top:clamp(36px,3.6vw,44px)}
.hf-formats-head{margin:0 0 16px;color:var(--ink-1);font:600 .9375rem var(--ui)}
.hf-formats ul{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.hf-formats li,.hf-grid li{aspect-ratio:9/16}
.hf-hero .screen img,.hf-grid .screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* sections */
.hf-sec{position:relative;z-index:1;padding:clamp(56px,6.5vw,88px) var(--pad) 0}
.hf-head{display:grid;gap:6px;margin:0 0 18px}
.hf-title{margin:0;color:var(--ink-1);font:700 clamp(2rem,4vw,3.5rem)/1.08 var(--display);letter-spacing:-.022em;text-wrap:balance}
.hf-head p{margin:0;color:var(--ink-3);font-size:.875rem}

/* promo cards: Higgsfield's top row, the function's name set big on its own footage */

/* the board: a lime offer that is one big link, beside the functions as tiles */

/* the gallery: real output, a featured clip and a dense grid, each playing in its turn */
.hf-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.hf-grid li:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.hf-grid .chip{white-space:nowrap}
@media (min-width:1200px){.hf-grid{grid-template-columns:repeat(8,minmax(0,1fr))}.hf-grid li:nth-child(n+14){display:none}}
.hf-more-row{display:flex;justify-content:center;margin:20px 0 0}
.hf-more{display:inline-block;height:40px;padding:0 18px;white-space:nowrap;border-radius:999px;background:var(--raised);color:var(--ink-1);font:500 .875rem/40px var(--ui);text-decoration:none;box-shadow:inset 0 0 0 1px var(--line)}
.hf-more:hover{box-shadow:inset 0 0 0 1px var(--ink-4)}

/* the live banner: the session's footage behind, its real numbers and moments on top */
.hf-title-xl{margin:0;font:700 clamp(2.5rem,5vw,4.5rem)/1.06 var(--display);text-wrap:balance}
.hf-spikes{display:grid;gap:8px;width:min(100%,380px);margin:0;padding:0;list-style:none}
.hf-spikes li{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;align-items:center;padding:8px 14px 8px 8px;border-radius:14px;background:color-mix(in srgb,var(--canvas) 90%,transparent);box-shadow:inset 0 0 0 1px var(--line-strong)}
.hf-spikes img{width:112px;height:auto;aspect-ratio:16/9;border-radius:8px;object-fit:cover}
.hf-spikes b{display:block;color:var(--ink-1);font:600 .9375rem/1.3 var(--ui)}
.hf-spikes .mono{display:block;margin-top:4px;color:var(--live-text)}
.hf-spikes li:nth-child(2){translate:-24px 0}

@media (max-width:999px){
  .hf-spikes li:nth-child(2){translate:0 0}
}
@media (max-width:760px){
  /* rails: the clips and the promos scroll sideways, as Higgsfield's do on a phone */
  .hf-formats ul{grid-template-columns:none;grid-auto-flow:column;overflow-x:auto;margin:0 calc(-1 * var(--pad));padding:0 var(--pad);scroll-snap-type:x mandatory;scroll-padding:0 var(--pad);scrollbar-width:none}
  .hf-formats ul::-webkit-scrollbar{display:none}
  .hf-formats ul{grid-auto-columns:38%}
  .hf-formats li{scroll-snap-align:start}
  .hf-bar{flex-wrap:wrap}
  .hf-composer .yours{flex-basis:100%;order:-1}
  .gate .hf-go{flex:1;height:56px;padding:0 20px}
  .hf-free{display:none}
  .hf-grid .chip{right:6px;bottom:6px;font-size:.625rem}
  .hf-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .hf-grid li:nth-child(n+13){display:none}
  .hf-spikes li{grid-template-columns:88px minmax(0,1fr)}
  .hf-spikes img{width:88px}
}
@media (max-width:420px){
  .hf-upload{width:56px;height:56px;padding:0;justify-content:center;border-radius:14px;font-size:0;gap:0}
  .hf-upload svg{width:18px;height:18px}
}
/* the one button that holds every clip on the page */
.hf-formats-head{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 16px}
.hf-formats-head p{margin:0}
.hf-hold{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border:0;border-radius:999px;background:var(--raised);color:var(--ink-2);font:500 .8125rem/1 var(--ui);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer}
.hf-hold:hover{color:var(--ink-1);box-shadow:inset 0 0 0 1px var(--ink-4)}
.hf-hold svg{width:10px;height:10px;fill:currentColor}
.hf-hold .i-play,.hf-hold[aria-pressed=true] .i-pause{display:none}
.hf-hold[aria-pressed=true] .i-play{display:inline}

/* feature pages: the title, then a composer whose tabs name what the field takes; an inactive tab
   is a link (Upload a file), never a fake control. No eyebrow over the title (owner, 2026-10-21). */
.hf-tab{display:flex;align-items:center;gap:8px;height:48px;padding:0 10px;color:var(--ink-3);font:500 .9375rem/1 var(--ui);white-space:nowrap;text-decoration:none;box-shadow:inset 0 -2px 0 transparent;transition:color .16s var(--ease)}
.hf-tab svg{width:17px;height:17px}
.hf-tab.on{color:var(--ink-1);box-shadow:inset 0 -2px 0 var(--ink-1)}
a.hf-tab:hover{color:var(--ink-1)}
.hf-fine a{color:var(--wire-text);text-underline-offset:3px}
.hf-hero-short{padding-bottom:0}

/* how it works: Higgsfield's "Make videos in one click" panel, three real steps of one project */
.hf-how{padding:clamp(20px,3vw,40px);border-radius:20px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.hf-how-head{display:grid;gap:8px;margin:0 0 clamp(20px,2.4vw,28px)}
.hf-title-w{margin:0;color:var(--ink-1);font:700 clamp(2rem,4vw,3.5rem)/1.08 var(--display);letter-spacing:-.022em;text-wrap:balance}
.hf-title-w em{font-style:normal;color:var(--ink-3)}
.hf-how-head p{margin:0;color:var(--ink-3);font-size:.875rem}
.hf-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);margin:0;padding:0;list-style:none}
.hf-steps h3{margin:14px 0 6px;color:var(--ink-1);font:700 .9375rem/1.3 var(--ui);letter-spacing:.02em;}
.hf-steps p{margin:0;color:var(--ink-3);font-size:.875rem;line-height:1.5}
.hf-step-media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:14px;background:var(--raised)}
.hf-step-media>img,.hf-step-media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hf-step-media .tag{position:absolute;top:10px;left:10px;z-index:1}
/* the clip, framed over its source the way Higgsfield frames its result */
.hf-framed>img{filter:brightness(.45)}
.hf-framed-clip{position:absolute;top:8%;bottom:8%;left:50%;aspect-ratio:9/16;translate:-50% 0;border-radius:12px;box-shadow:0 0 0 3px var(--ink-1)}
.hf-framed-clip img,.hf-framed-clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the app's score card, set beside the clip it scored */
.hf-score{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;padding:16px}
.hf-score>img{position:static;height:100%;max-height:220px;width:auto;aspect-ratio:9/16;border-radius:10px;object-fit:cover}
.hf-score-card{display:grid;gap:10px;justify-items:start;min-width:0}
.hf-score-card>.mono{color:var(--ink-3)}
.hf-score-n{display:flex;align-items:center;gap:12px}
.hf-score-n b{color:var(--ink-1);font:700 clamp(2.75rem,4vw,3.5rem)/1.06 var(--display)}
.hf-score .meter{display:flex;gap:4px}
.hf-score .meter i{width:12px;height:4px;border-radius:2px;background:var(--mind)}
.hf-score .meter i.off{background:var(--ink-4)}
.hf-score-band{color:var(--ink-2);letter-spacing:.08em;}
.hf-grades{display:flex;flex-wrap:wrap;gap:5px}
.hf-grades>span{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 3px;border-radius:999px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--ink-2);font-size:.75rem}
.hf-grades b{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--ink-1);color:var(--canvas);font:700 .6875rem var(--ui)}
/* the moments feed, as Stream Sniper lists them */
.hf-feed{display:grid;align-content:center;gap:8px;padding:12px}
.hf-feed-row{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;align-items:center;padding:6px 10px 6px 6px;border-radius:12px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--line-strong)}
.hf-feed-row img{width:88px;height:auto;aspect-ratio:16/9;border-radius:7px;object-fit:cover}
.hf-feed-row b{display:block;overflow:hidden;color:var(--ink-1);font:600 .8125rem/1.3 var(--ui);white-space:nowrap;text-overflow:ellipsis}
.hf-feed-row .mono{display:block;margin-top:3px;color:var(--live-text)}
/* a clip's corner, close up: the plate at the top, the mark at the bottom left */
.hf-crop-plate>img{object-position:50% 0}
.hf-crop-mark>img{object-position:0 100%;transform:scale(1.5);transform-origin:10% 92%}
.hf-step-media>img.hf-cap{object-fit:contain}

/* pricing: the plan columns. Every card shares one set of rows (name, credits, price, action, list)
   through subgrid, so the prices and the actions line up across the four. One lime action, on our
   pick, which is ringed in violet with its tag beside the name. */
.tag.rec{background:var(--mind);color:#120c26}
.hf-plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.hf-plan{position:relative;display:flex;flex-direction:column;gap:16px;padding:24px;border-radius:22px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
@media (min-width:601px){.hf-plans>.hf-plan{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:16px}}
.hf-plan.ours{background:var(--raised);box-shadow:inset 0 0 0 2px var(--mind)}
.hf-plan-pick{position:absolute;top:28px;right:24px;margin:0}
.hf-plan-pick .tag{height:22px;font-size:.75rem}
.hf-plan-name{margin:0;color:var(--ink-1);font:700 1.75rem/1.1 var(--display);letter-spacing:-.01em}
.hf-plan-credits{display:grid;align-content:start;gap:4px}
.hf-plan-credits b{color:var(--ink-1);font:600 1.0625rem/1.3 var(--ui)}
.hf-plan-credits b .mono{font:inherit}
.hf-plan-credits>span{color:var(--ink-2);font-size:.875rem;line-height:1.4}
.hf-plan-price{margin:8px 0 0;color:var(--ink-2);font-size:.9375rem}
.hf-plan-price b{margin-right:4px;color:var(--ink-1);font:700 2.75rem/1 var(--display);letter-spacing:-.02em}
.hf-plan-go{width:100%;height:44px;padding:0 18px;font-size:.9375rem}
.hf-plan-has{display:grid;align-content:start;gap:10px;margin:8px 0 0;padding:20px 0 0;border-top:1px solid var(--line);list-style:none;font-size:.875rem;line-height:1.4;color:var(--ink-2)}
.hf-plan-has li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:8px}
.hf-plan-has li::before{content:"";width:11px;height:6px;margin-top:5px;border:solid var(--ink-1);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.hf-plan-has li.no{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--ink-4)}
.hf-plan-has li.no::before{width:10px;height:2px;margin-top:9px;border:0;background:var(--ink-4);transform:none}
.hf-plans-how{margin:24px 0 0;color:var(--ink-2);font-size:.9375rem;text-align:center}
/* Pro's size: the credits calculator's range, under Get Pro, so the four prices and actions keep one
   line; app.js shows it and says the size in the credits and the price above. */
.hf-plan-act{display:grid;align-content:start;gap:8px}
.pro-size{display:grid}
.pro-size label{margin-top:8px;color:var(--ink-2);font-size:.8125rem}
.pro-size input[type=range]{height:44px;touch-action:pan-y}
.pro-ends{display:flex;justify-content:space-between;margin:-6px 0 0;color:var(--ink-3);font-size:.75rem;font-variant-numeric:tabular-nums}

/* studio: Higgsfield's apps catalog. The chips filter in CSS, so they work without a script. */
/* a clip stands whole in the card, phone-shaped, the way it posts */
.hf-try{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;margin:auto 0 0;padding:0 16px;border-radius:10px;background:var(--ink-1);color:var(--canvas);font:600 .875rem/1 var(--ui);text-decoration:none;transition:background-color .12s var(--ease)}
.hf-try:hover{background:color-mix(in srgb,var(--ink-1) 82%,var(--canvas))}
.hf-try svg{width:10px;height:10px;fill:currentColor}

@media (max-width:999px){
  .hf-steps{grid-template-columns:minmax(0,1fr)}
  .hf-plans{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}
}
@media (max-width:600px){
  .hf-plans{grid-template-columns:minmax(0,1fr)}
  .hf-plan.ours{order:-1}
  .hf-tabs{overflow-x:auto;scrollbar-width:none}
}

/* Studio on Pricing: a band under the four plans, on their four columns: the name over the first,
   its four points over the middle two, the action over the last. The form opens on a row of its own
   under the points. Without script the form shows; under .js it opens from the button (data-talk="open"). */
.hf-plans-studio{margin-top:16px}
.hf-plan.studio{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:center}
.hf-plan.studio .hf-plan-has{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 24px;margin:0;padding:0;border-top:0}
.studio-act{display:grid;gap:10px}
.studio-fine{margin:0;color:var(--ink-2);font-size:.8125rem;line-height:1.4;text-align:center}
.talk{display:grid;gap:12px 16px}
.js .talk{display:none}
.js [data-talk="open"] .talk{display:grid}
html:not(.js) [data-talk-open]{display:none}
.js [data-talk="open"] [data-talk-open],[data-talk="sent"] [data-talk-open],[data-talk="sent"] .talk{display:none}
.talk .stepper{gap:6px;padding:0;background:none;box-shadow:none;color:var(--ink-2);font-size:.875rem}
.talk .stepper input,.talk .stepper textarea{height:44px;padding:0 14px;border-radius:12px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--line);font:400 1rem var(--ui)}
.talk .stepper textarea{height:auto;min-height:88px;padding:12px 14px}
.talk .talk-msg,.talk .stepper:has(textarea){grid-column:1/-1}
.talk .take{justify-self:start}
.talk-sent{margin:0;color:var(--ink-1);font-weight:600}
.talk-sent[hidden]{display:none}
@media (min-width:640px){.talk{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){
  .hf-plan.studio{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 16px;padding:28px 0}
  .hf-plan.studio>*{padding:0 24px}
  .hf-plan.studio .hf-plan-has{grid-column:2/4;grid-template-columns:repeat(2,minmax(0,1fr))}
  .hf-plan.studio .talk,.hf-plan.studio .talk-sent{grid-column:2/5}
}

/* the plan columns on the home: the same part as Pricing; on a phone a rail that snaps, our pick first */
@media (min-width:601px){.hf-plans-home .hf-plans>.hf-plan{grid-row:span 4}}
@media (max-width:760px){
  .hf-plans-home .hf-plans{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;margin:0 calc(-1 * var(--pad));padding:14px var(--pad) 4px;scroll-snap-type:x mandatory;scroll-padding:0 var(--pad);scrollbar-width:none}
  .hf-plans-home .hf-plans::-webkit-scrollbar{display:none}
  .hf-plans-home .hf-plans{align-items:start}
  .hf-plans-home .hf-plans>.hf-plan{display:flex;grid-row:auto;scroll-snap-align:start}
  .hf-plans-home .hf-plan.ours{order:-1}
}

/* Fix the footage (home): Blur, Audio Enhance and Uniqueizer, each on its real output from the
   app. Blur is the wide compare with the zones it found outlined in violet on the uploaded side;
   Audio Enhance plays its two takes with sound only when pressed; Uniqueizer fans out its copies. */
@media (min-width:1024px){.fix-grid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}.fix-blur{grid-row:span 2}}
@media (min-width:640px) and (max-width:1023px){.fix-enh{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}}
@media (min-width:1024px){.fix-enh{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}}
.fix-copy{display:grid;gap:12px;justify-items:start;align-content:start}
.fix-copy p{margin:0;max-width:46ch;color:var(--ink-2);font-size:.9375rem;line-height:1.5}
.fix-name{display:flex;align-items:center;gap:10px}
.fix-name b{color:var(--ink-1);font:700 clamp(1.5rem,2.2vw,2rem)/1.06 var(--display);}
.fix-copy .fix-facts{color:var(--ink-1);font-size:.8125rem;line-height:1.7}
.ba-wide,.ba-wide .ba-screen{width:100%}
.ba-wide .ba-screen{aspect-ratio:16/9}
.ba-wide figcaption{max-width:none}
.zones-on{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x,50%)) 0 0);pointer-events:none}
.zone{position:absolute;border:2px solid var(--mind);border-radius:6px}
.zone i{position:absolute;top:-2px;left:-2px;padding:1px 5px;border-radius:5px 0 5px 0;background:var(--mind);color:#120b26;font-size:.625rem;font-style:normal;font-weight:600}
.z-banner{left:1.4%;top:1.9%;width:37.6%;height:10.1%}
.z-qr{left:1.4%;top:71.6%;width:12.6%;height:25.9%}
.z-promo{left:32.7%;top:89.4%;width:34.6%;height:9.3%}
.z-cam{left:71.7%;top:69.4%;width:27.2%;height:28.4%}
.ba-wide .ba-tag-in{top:auto;bottom:10px;left:16%}
.ba-wide .ba-tag-out{top:14%}
.ba-wide .play{left:50%;right:auto;top:12px;bottom:auto;translate:-50% 0}
.zones{display:grid;gap:6px;width:100%;margin:0;padding:0;list-style:none;counter-reset:z}
.zones li{display:flex;align-items:baseline;gap:10px;padding:8px 10px;border-radius:10px;background:var(--raised);counter-increment:z}
.zones li::before{content:counter(z);flex:none;min-width:18px;padding:1px 0;border-radius:5px;background:var(--mind);color:#120b26;font:600 .6875rem/1.4 var(--mono);text-align:center}
.zones b{color:var(--ink-1);font-weight:600;font-size:.875rem}
.zones .mono{margin-left:auto;color:var(--ink-3);font-size:.75rem}
.enh{display:grid;gap:10px;margin:0}
.enh-screen{aspect-ratio:16/9}
.enh-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.enh-hear{display:flex;gap:8px}
.enh-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:0;border-radius:999px;background:var(--raised);color:var(--ink-1);font:500 .875rem/1 var(--ui);box-shadow:inset 0 0 0 1px var(--line-strong);cursor:pointer;transition:background-color .12s var(--ease),color .12s var(--ease)}
.enh-btn svg{width:10px;height:10px;fill:currentColor}
.enh-btn:hover{box-shadow:inset 0 0 0 1px var(--ink-3)}
.enh-btn[aria-pressed=true]{background:var(--ink-1);color:var(--canvas)}
.enh-btn[aria-pressed=true] svg path{d:path("M2.5 1.5h2.4v9H2.5zM7.1 1.5h2.4v9H7.1z")}
.enh figcaption,.copies-note{color:var(--ink-3);font-size:.75rem}
.copies{display:flex;gap:8px;margin:0;padding:0;list-style:none}
.copies li{flex:1 1 0;min-width:0;display:grid;gap:6px}
.copies .screen{aspect-ratio:9/16;border-radius:10px}
.copies .screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.copies b{color:var(--ink-1);font:600 .75rem/1.2 var(--ui)}
.copies span{display:block;color:var(--ink-3);font:500 .6875rem/1.35 var(--mono)}

/* The editor (Clips): a real screenshot of the app's clip editor, and the shot's framing in three
   of its modes as the editor previews them. The chips switch the frames in CSS. */
.ed-grid{display:grid;gap:16px;align-items:start}
@media (min-width:960px){.ed-grid{grid-template-columns:minmax(0,1fr) auto}}
.ed-shot{margin:0;overflow:hidden;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line),0 0 0 1px var(--line)}
.ed-shot img{display:block;width:100%;height:auto}
.ed-modes{display:grid;gap:12px;justify-items:start;margin:0}
.ed-screen{width:min(240px,62vw);aspect-ratio:9/16}
.ed-m{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s var(--ease)}
.ed-modes:has([value=fit]:checked) .ed-fit,.ed-modes:has([value=fill]:checked) .ed-fill,.ed-modes:has([value=track]:checked) .ed-track{opacity:1}
.ed-chips{max-width:240px}
.ed-modes figcaption{display:grid;gap:6px;max-width:240px;color:var(--ink-2);font-size:.875rem;line-height:1.45}
.ed-say{display:none}
.ed-modes:has([value=fit]:checked) .ed-say-fit,.ed-modes:has([value=fill]:checked) .ed-say-fill,.ed-modes:has([value=track]:checked) .ed-say-track{display:block}
.ed-also{color:var(--ink-3);font-size:.75rem}

/* Publish (home): the app's own Schedule page in its demo mode, beside what the rules do. */
.pub-on{color:var(--ink-3);font-size:.75rem}
.pub-facts{display:grid;gap:6px;width:100%;margin:0;padding:0;list-style:none}
.pub-facts li{display:grid;gap:2px;padding:10px 12px;border-radius:10px;background:var(--raised)}
.pub-facts b{color:var(--ink-1);font:600 .875rem/1.2 var(--ui)}
.pub-facts span{color:var(--ink-3);font-size:.8125rem}
.pub-shot{display:grid;gap:8px;margin:0}
.pub-shot img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 0 0 1px var(--line)}
.pub-shot figcaption{color:var(--ink-3);font-size:.75rem}

/* A Try link points onward instead of reading as play. On Brand the caption chips sit under
   the copy, next to the screen they drive. */
.hf-try{height:44px}
.hf-try svg.arrow{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .16s var(--ease)}
.hf-try:hover svg.arrow{transform:translateX(2px)}
.st-group,.st-tier{font-size:.75rem}
.sniper-sum{max-width:68ch}
@media (min-width:960px){
  .made.two:has(.styles){grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"copy st" "chips st" "note st";grid-template-rows:auto auto 1fr}
}
@media (min-width:960px){
  .made.two:has(.styles) .styles{display:contents}
  .made.two:has(.styles) .made-copy{grid-area:copy}
  .made.two:has(.styles) .st-screen{grid-area:st;width:clamp(240px,24vw,320px)}
  .made.two:has(.styles) .st-chips{grid-area:chips;align-self:start;max-width:42ch}
  .made.two:has(.styles) .styles>figcaption{grid-area:note;align-self:start}
}
@media (min-width:1000px){.faq{grid-template-columns:minmax(0,880px)}}
/* The home page keeps the plan cards short (what it costs, what it's for) and leaves the
   full lists to /pricing; its FAQ drops the questions the plans right above already answer. */
.hf-plans-home .hf-plan-has{display:none}
.hf-plans-home~#faq .faq-deep{display:none}
@media (max-width:640px){.hf-grid li:nth-child(n+7){display:none}}
.calc input[type=range]{height:44px}
@media (max-width:640px){
  .take.sm,.quiet.sm{height:44px}
  .brand{display:inline-flex;align-items:center;min-height:44px}
  .hf-hold{height:44px;padding:0 14px}
  .st-chips span{display:flex;align-items:center;min-height:44px;padding:0 14px}
  .enh-btn{height:44px}
  .paste{height:40px}
  .foot-nav{gap:0 24px}
  .foot-nav a,.legal a{display:inline-flex;align-items:center;min-height:44px}
  .legal{align-items:center;gap:0 20px}
  .hf-more{height:44px;line-height:44px}
  .top.scrolled .scrub{pointer-events:none}
  .pub-shot img{aspect-ratio:4/5;object-fit:cover;object-position:left top}
}

/* ---- Home, contained (2026-10-19) ---------------------------------------------------------
   OpusClip's containment over Higgsfield's grammar: the hero's output sits in a panel with
   the video it came from, then three steps, then one tabbed panel for every live function,
   then the real clips, the paired output cards, plans and the closing card. */

/* The hero's output panel: the source on the left of its head, its clips under it. */
.hf-out{padding:clamp(12px,1.6vw,20px);border-radius:20px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);text-align:left}
.hf-out-head{display:flex;align-items:center;gap:14px;margin:0 0 clamp(12px,1.4vw,16px)}
.hf-out-src{flex:none;width:clamp(104px,11vw,148px);aspect-ratio:16/9;border-radius:10px}
.hf-out-src img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hf-out-say{display:grid;gap:2px;margin:0;min-width:0;color:var(--ink-3);font-size:.875rem;line-height:1.4}
.hf-out-say b{color:var(--ink-1);font:600 1rem/1.3 var(--ui)}
.hf-out .hf-hold{margin-left:auto;flex:none}

/* Three steps: a number in mono before each name. */
#how .hf-steps h3 .mono{margin-right:6px;color:var(--ink-3);font-weight:500;letter-spacing:0}
#how .hf-step-media .chip{right:10px;bottom:10px}

/* One panel, seven functions. Radio tabs that work in CSS; the chosen one is Monitor White,
   the way a caption chip inverts. Panels that aren't chosen leave the page, so their clips
   never load or play. */
.fn{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.fn-tabs{display:flex;gap:2px;min-inline-size:0;width:max-content;max-width:100%;margin:0;padding:4px;border:0;border-radius:999px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);overflow-x:auto;scrollbar-width:none}
.fn-tabs::-webkit-scrollbar{display:none}
.fn-tabs label{position:relative;flex:none;cursor:pointer}
.fn-tabs input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.fn-tabs span{display:flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;color:var(--ink-2);font:500 .9375rem/1 var(--ui);white-space:nowrap;transition:background-color .16s var(--ease),color .16s var(--ease)}
.fn-tabs label:hover span{color:var(--ink-1)}
.fn-tabs input:checked+span{background:var(--ink-1);color:var(--canvas)}
.fn-tabs input:focus-visible+span{outline:2px solid var(--take-text);outline-offset:2px}
.fn-panel{display:none;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,3.4vw,56px);align-items:center;min-height:clamp(440px,38vw,520px);padding:clamp(18px,2.6vw,36px);border-radius:20px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);scroll-margin-top:96px}
.fn:has([value=clips]:checked) [data-fn=clips],.fn:has([value=stream]:checked) [data-fn=stream],.fn:has([value=brand]:checked) [data-fn=brand],.fn:has([value=blur]:checked) [data-fn=blur],.fn:has([value=enhance]:checked) [data-fn=enhance],.fn:has([value=uniqueizer]:checked) [data-fn=uniqueizer],.fn:has([value=publish]:checked) [data-fn=publish]{display:grid;animation:fn-in .36s var(--ease-expo)}
@keyframes fn-in{from{opacity:0;transform:translateY(8px)}}
@supports not selector(:has(*)){.fn-tabs{display:none}.fn-panel{display:grid}}
.fn-copy .fix-name{flex-wrap:wrap}
.fn-media{min-width:0;margin:0}
.fn-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;max-width:600px;justify-self:center;padding:0;list-style:none}
.fn-trio li{aspect-ratio:9/16}
.fn-trio img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fn-stream{position:relative}
.fn-stream-feed{aspect-ratio:16/9}
.fn-stream-feed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fn-stream .hf-spikes{position:absolute;right:14px;bottom:14px;width:min(360px,62%)}
.fn-panel .copies{align-self:center}
.fn-panel .pub-shot img{max-height:440px;object-fit:cover;object-position:left top}
@media (prefers-reduced-motion:reduce){.fn-panel{animation:none!important}}

/* What comes out: two cards of the same build, screen on the right of each. */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pair-card{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;gap:18px 24px;align-items:start;padding:clamp(18px,2.2vw,28px);border-radius:20px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.pair-copy{display:grid;gap:10px;align-content:start;min-width:0}
.pair-copy h3{margin:0;color:var(--ink-1);font:700 clamp(1.5rem,2.2vw,2rem)/1.06 var(--display);}
.pair-copy p{margin:0;color:var(--ink-2);font-size:.9375rem;line-height:1.5}
.pair-copy .pair-spec{color:var(--ink-3);font-size:.8125rem;line-height:1.6}
.pair-card .ba-screen,.pair-card .st-screen{width:clamp(200px,17vw,236px)}
.pair-card>.ba{grid-column:2;grid-row:1/span 2}
.pair-styles .styles{display:contents}
.pair-styles .st-screen{grid-column:2;grid-row:1/span 2}
.pair-styles .st-chips{grid-column:1;grid-row:2;align-self:start;max-width:none}
.pair-styles .styles>figcaption{display:none}

/* The closing call to action sits in a card; the film strip stays behind it, edge to edge. */
.closing-band{max-width:min(620px,44vw)}
@media (max-width:899px){.closing-band{max-width:none}}

@media (max-width:1100px){
  .pair{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  .fn-tabs{width:auto;margin:0 calc(-1 * var(--pad));padding:0 var(--pad);border-radius:0;background:none;box-shadow:none;gap:6px}
  .fn-tabs span{height:44px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line-strong)}
  .fn-panel{grid-template-columns:minmax(0,1fr);align-items:start;min-height:0}
  .fn-media{order:-1}
  .fn-trio{justify-self:stretch;max-width:none}
  .fn-stream .hf-spikes{position:static;width:100%;margin-top:10px}
  .fn-panel .copies{overflow-x:auto;scrollbar-width:none}
  .fn-panel .copies li{flex:0 0 31%}
}
@media (max-width:560px){
  .hf-out-head{flex-wrap:wrap}
  .hf-out .hf-hold{margin-left:0}
  .pair-card{grid-template-columns:minmax(0,1fr)}
  .pair-card>.ba,.pair-styles .st-screen{grid-column:1;grid-row:auto}
  .pair-styles .st-chips{grid-row:auto}
  .pair-card .ba-screen,.pair-card .st-screen{width:min(210px,100%)}
}
/* On a phone the three steps are a rail that snaps, like the formats row. */
@media (max-width:640px){
  .hf-steps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;margin:0 calc(-1 * clamp(20px,3vw,40px));padding:0 clamp(20px,3vw,40px);scroll-snap-type:x mandatory;scroll-padding:0 clamp(20px,3vw,40px);scrollbar-width:none}
  .hf-steps::-webkit-scrollbar{display:none}
  .hf-steps li{scroll-snap-align:start}
}

/* ---- Studio (2026-10-19; reworked 2026-10-23) -----------------------------------------------
   For studios, agencies and clippers. No subtexts: display type and real output carry it. The
   month hero (story.css), the scene, the bar, the plan bento with Studio, and Studio's questions. */
.sd{position:relative}

/* The margin index and the section title. */
.sd-sec{position:relative;z-index:1;display:block;padding:clamp(88px,10vw,150px) var(--pad) 0}
.step-spec{margin:0;color:var(--ink-3);font-size:.75rem;line-height:1.5}
.hf-steps h3+.step-spec{margin-top:2px}
.sd-title{max-width:18ch;margin:0 0 clamp(28px,3.4vw,52px);color:var(--ink-1);font:700 clamp(2.25rem,4.6vw,4rem)/1.08 var(--display);letter-spacing:-.022em;text-wrap:balance}
.sd-title em{font-style:normal;color:var(--ink-3)}

/* The UMD: the strip of mono a control room prints under a monitor. */
.umd{display:flex;align-items:center;gap:8px;min-width:0;height:32px;margin:0;padding:0 10px;border-radius:8px;background:color-mix(in srgb,var(--canvas) 86%,transparent);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);font-size:.6875rem;white-space:nowrap;overflow:hidden}
.umd i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--ink-4);transition:background-color .2s var(--ease)}
.umd b{color:var(--ink-1);font-weight:600}
.umd>span:not(.tag){overflow:hidden;text-overflow:ellipsis}
.umd .tag{padding:2px 6px;font-size:.625rem}

.sd-h1{display:grid;margin:0;color:var(--ink-1);font-family:var(--display);font-weight:700;line-height:1.05;letter-spacing:-.03em}
.sd-h1-a,.sd-h1-b{font-size:clamp(2.75rem,6.4vw,5.5rem)}
.sd-h1 em{font-style:normal;color:var(--ink-3)}
.sd-actions{display:flex;flex-wrap:wrap;gap:10px}
.sd-actions .quiet{height:52px;padding:0 22px}

@media (max-width:640px){
  .sd-actions .take,.sd-actions .quiet{flex:1 1 auto}
}

/* Studio, in motion. Every state below is also the resting state under reduced motion. */
@media (prefers-reduced-motion:no-preference){




}
.fn-copy .fix-name b{font-size:clamp(2.5rem,5vw,4.75rem);line-height:.86}


/* Studio hero: the headline and its two actions, over the month (.cal, story.css). */
.sd-hero{position:relative;z-index:1;padding:clamp(120px,12vw,160px) var(--pad) 0;text-align:center}
.sd-hero-in{position:relative;z-index:2;display:grid;justify-items:center;gap:clamp(20px,2.4vw,28px)}
.sd-hero .sd-actions{justify-content:center}
.sd-h1{text-align:center}
.sd-h1-b{font-size:clamp(2.75rem,6.4vw,5.5rem)}

/* The plan as a bento. Each tile: a preview built from real output, then its fact in display
   type, nothing under it. The price tile carries the plan, what else it includes and the actions. */
.pb{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"price price tpl acc" "streams streams copies copies";gap:12px}
.pb-tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:22px;min-width:0;padding:clamp(18px,2vw,26px);overflow:hidden;border-radius:20px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.pb-tpl{grid-area:tpl}.pb-acc{grid-area:acc}.pb-streams{grid-area:streams}.pb-copies{grid-area:copies}
.pb-cap{margin:0}
.pb-cap b{color:var(--ink-1);font:700 clamp(1.5rem,2.1vw,2rem)/1.06 var(--display);}

.pb-price{grid-area:price;gap:28px;padding:clamp(24px,3vw,40px);background:var(--raised);box-shadow:inset 0 0 0 1px var(--line-strong)}
.pb-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px}
.pb-plan{margin:0;color:var(--ink-1);font:700 clamp(2.5rem,4vw,3.5rem)/1.06 var(--display);}
.pb-amt{display:flex;align-items:baseline;gap:8px;margin:0;color:var(--ink-2);font-size:1rem}
.pb-amt b{color:var(--ink-1);font:700 clamp(4.5rem,8vw,7.5rem)/1.06 var(--display)}
.pb-inc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;margin:0;padding:22px 0 0;border-top:1px solid var(--line-strong);list-style:none}
.pb-inc li{display:flex;align-items:baseline;gap:10px;color:var(--ink-1);font-size:1rem;line-height:1.35}
.pb-inc li::before{content:"";flex:none;width:11px;height:6px;margin-bottom:3px;border:solid var(--take-text);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.pb-price .sd-actions{margin-top:4px}

/* Caption styles: four real renders of one line, one style per row. */
.pb-strips{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.pb-strips li{display:grid;grid-template-columns:4.5rem minmax(0,1fr);align-items:center;gap:10px}
.pb-strips img{order:2;display:block;width:100%;height:clamp(40px,3.4vw,50px);border-radius:8px;object-fit:cover;object-position:50% 85%;box-shadow:0 0 0 1px var(--line-strong)}
.pb-strips span{order:1;color:var(--ink-2);font-size:.6875rem}

.pb-accounts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.pb-accounts li{display:grid;place-items:center;aspect-ratio:1;border-radius:10px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--ink-1)}
.pb-accounts svg{width:48%;height:48%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Streams: one program monitor, two more beside it, each with its tally lit. */
.pb-mons{display:grid;flex:1;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:6px;min-height:140px}
.pb-mons>span{position:relative;display:block;overflow:hidden;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line-strong)}
.pb-mons .pb-mon-a{grid-row:span 2}
.pb-mons img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pb-mons i{position:absolute;top:6px;left:6px;width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 0 2px rgba(255,95,168,.25)}

/* Copies: the five real copies as a fanned deck. */
.pb-deck{display:flex;justify-content:center;padding:4px 0 8px}
.pb-deck img{width:clamp(56px,5.4vw,76px);height:auto;aspect-ratio:9/16;margin:0 -12px;border-radius:9px;object-fit:cover;box-shadow:0 0 0 2px var(--panel)}
.pb-deck img:nth-child(1){transform:rotate(-12deg) translateY(10px)}
.pb-deck img:nth-child(2){transform:rotate(-6deg) translateY(3px)}
.pb-deck img:nth-child(3){position:relative;z-index:1}
.pb-deck img:nth-child(4){transform:rotate(6deg) translateY(3px)}
.pb-deck img:nth-child(5){transform:rotate(12deg) translateY(10px)}

@media (max-width:1000px){
  .pb{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"price price" "tpl acc" "streams copies"}
  .pb-mons{min-height:120px}
}
@media (max-width:560px){
  .pb{grid-template-columns:minmax(0,1fr);grid-template-areas:"price" "tpl" "acc" "streams" "copies"}
  .pb-inc{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:no-preference){
  .js .pb-tile{opacity:0;transform:translateY(20px)}
  .js .pb.lit .pb-tile{opacity:1;transform:none;transition:opacity .5s var(--ease) calc(var(--i) * 80ms),transform .8s var(--ease-expo) calc(var(--i) * 80ms)}
}








/* ---- Studio offer ------------------------------------------------------------------ */
.offer-hero .offer-screen{width:min(100%,920px);margin:28px auto 0}
.offer-clips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.offer-clips[data-count="1"]{grid-template-columns:minmax(0,360px);justify-content:center}
.offer-clips[data-count="2"]{grid-template-columns:repeat(2,minmax(0,360px));justify-content:center}
.offer-clip{display:block;width:100%;aspect-ratio:9/16;border-radius:14px;background:var(--panel);object-fit:cover}
@media (max-width:719px){.offer-clips{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}}
.offer-form{width:100%}
/* .calc shrink-wraps its children (justify-items:start); the offer's boxes fill the card, and only the button keeps its size */
.offer-form>*,.offer-book>*{justify-self:stretch}
.offer-form>.take,.offer-book>.take{justify-self:start}
.calc-group{display:grid;gap:10px;margin:0;padding:0;border:0;min-width:0}
.calc-group+.calc-group{padding-top:16px;border-top:1px solid var(--line)}
.steppers{display:grid;grid-template-columns:repeat(auto-fill,minmax(164px,1fr));gap:8px}
.stepper{display:grid;gap:4px;padding:10px 12px;border-radius:12px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--line);font-size:.875rem;color:var(--ink-2)}
.stepper input{width:100%;height:36px;padding:0 8px;border:0;border-radius:8px;background:var(--panel);color:var(--ink-1);font:600 1rem var(--mono)}
.stepper input:focus-visible{outline:2px solid var(--take-text);outline-offset:1px}
/* The calculator's boxes are named by a brand glyph (the name is for screen readers and the tooltip). */
.stepper-name{display:flex;align-items:center;gap:6px;height:24px;color:var(--ink-1)}
.stepper-name .glyph{width:22px;height:22px;fill:currentColor;flex:none}
/* The booking times as a grid: a row a day, a cell a part of the day (public/app.js). */
.slot-grid{display:grid;gap:6px}
.slot-row{display:grid;grid-template-columns:minmax(84px,1.1fr) repeat(3,minmax(0,1fr));gap:6px;align-items:center}
.slot-head span{color:var(--ink-3);font-size:.8125rem;text-align:center}
.slot-day{color:var(--ink-2);font:500 .8125rem var(--mono);white-space:nowrap}
.slot{height:36px;border:0;border-radius:10px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--line);color:var(--take-ink);font:700 .9375rem var(--mono);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .12s var(--ease),box-shadow .12s,transform .1s var(--ease),opacity .12s}
.slot:hover{box-shadow:inset 0 0 0 1px var(--ink-4);background:var(--raised)}
.slot:active{transform:scale(.94)}
.slot[aria-pressed=true]{background:var(--take);box-shadow:none}
.slot.full{opacity:.4;cursor:not-allowed}
.slot:focus-visible{outline:2px solid var(--take-text);outline-offset:2px}
.slot-count{margin:4px 0 0;color:var(--ink-3);font-size:.875rem}
.slot-note{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tz-select{height:32px;max-width:100%;padding:0 28px 0 10px;border:0;border-radius:8px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--ink-1);font:500 .8125rem var(--ui);cursor:pointer}
.tz-select:focus-visible{outline:2px solid var(--take-text);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){.slot[aria-pressed=true]{animation:slot-pick .22s var(--ease-expo)}}
@keyframes slot-pick{from{transform:scale(.8)}}
/* The script's − and + either side of a number box (public/app.js, offer calculator). */
.step{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;align-items:center;gap:6px}
.step input{height:40px;padding:0 4px;text-align:center;font-size:1.25rem;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.step input::-webkit-inner-spin-button,.step input::-webkit-outer-spin-button{margin:0;-webkit-appearance:none}
.step-btn{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:10px;background:var(--raised);color:var(--ink-1);font:500 1.375rem/1 var(--ui);cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color .12s var(--ease),color .12s,transform .1s var(--ease)}
.step-btn:hover{background:var(--ink-4)}
.step-btn:active{transform:scale(.9)}
.step-up:not(:disabled):active{background:var(--take);color:var(--take-ink)}
.step-btn:disabled{color:var(--ink-4);background:var(--panel);cursor:default;transform:none}
@media (prefers-reduced-motion:no-preference){
  .step input.tick-up{animation:tick-up .22s var(--ease-expo)}
  .step input.tick-down{animation:tick-down .22s var(--ease-expo)}
  .calc-total .n.tick-up{animation:tick-up .28s var(--ease-expo)}
}
@keyframes tick-up{from{transform:translateY(35%);opacity:.35}}
@keyframes tick-down{from{transform:translateY(-35%);opacity:.35}}
.sched{margin:4px 0 0;color:var(--ink-1);font-size:.875rem}.sched-label{color:var(--ink-3)}
.calc-link-note:empty{display:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);font-size:.875rem;cursor:pointer}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip.on,.chip:has(input:checked){background:var(--take);color:var(--take-ink);box-shadow:none}
.chip:has(input:focus-visible){outline:2px solid var(--take-text);outline-offset:2px}
.chip.full:not(.on){opacity:.45;cursor:not-allowed}
.chips-more summary{margin-top:6px;color:var(--ink-3);font-size:.875rem;cursor:pointer}
.chips-more[open] summary{margin-bottom:8px}
.calc-total .n[data-over="1"]{font-size:clamp(2rem,8cqw,3.5rem)}
.offer-steps,.ag-script{display:grid;gap:14px;margin:0;padding:0;list-style:none;counter-reset:st}
.offer-month .offer-steps{margin:0 var(--pad)}
.offer-steps li,.ag-script li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:16px;border-radius:14px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);counter-increment:st}
.offer-steps li::before,.ag-script li::before{content:counter(st);font:700 1.5rem/1.06 var(--display);color:var(--take-text)}
.offer-steps b,.ag-script b{display:block;color:var(--ink-1);font-weight:600}.offer-steps span,.ag-script span{grid-column:2;color:var(--ink-2);font-size:.9375rem}
.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hp{position:absolute;left:-9999px}
@media(max-width:600px){.slots{grid-template-columns:1fr}}
.stepper select,.stepper textarea{width:100%;padding:0 8px;border:0;border-radius:8px;background:var(--panel);color:var(--ink-1);font:600 1rem var(--mono)}
.stepper select{height:36px}
.stepper textarea{padding:8px;resize:vertical}
.stepper select:focus-visible,.stepper textarea:focus-visible{outline:2px solid var(--take-text);outline-offset:1px}
.book-msg:empty{display:none}
.offer-book[data-state="busy"] .take{opacity:.6;pointer-events:none}
.offer-confirm{display:grid;gap:14px;width:min(100%,520px);margin:24px auto 0;text-align:left}
.offer-confirm .quiet{justify-self:center}
/* the 1200x630 card a campaign screenshots (offer-page spec §5.4); /offer/card/<token>, behind the proxy secret */
.card-page{margin:0;background:var(--canvas)}
.card{width:1200px;height:630px;box-sizing:border-box;display:grid;grid-template-rows:auto 1fr auto;gap:24px;padding:56px 64px;background:var(--panel);overflow:hidden}
.card-top{display:flex;justify-content:space-between;align-items:center}
.card-kicker{color:var(--ink-3);font:600 1rem var(--mono);letter-spacing:.1em;}
.card-lines{display:grid;align-content:start;grid-template-columns:1fr 1fr;gap:12px 32px;margin:0;padding:0;list-style:none}
.card-lines li{display:grid;gap:4px;font-size:1.375rem;color:var(--ink-1)}
.card-lines b{color:var(--ink-3);font:600 .875rem var(--mono);letter-spacing:.08em;}
.card-price{margin:0;color:var(--ink-2);font-size:1.5rem}
.card-price .n{display:inline-block;margin-right:12px;font:700 5.5rem/1.06 var(--display);color:var(--ink-1)}
.card-cta{display:flex;align-items:center;gap:24px;margin:0}
.card-cta .take{height:64px;padding:0 32px;font-size:1.25rem}
.card-url{color:var(--ink-3);font:500 1rem var(--mono)}
/* ---- generated pages (src/seo-pages.js) ---- */
.seo-answer{max-width:62ch}
.seo-reel{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;list-style:none;margin:24px 0 0;padding:0}
.seo-clip{margin:0;width:clamp(120px,22vw,180px)}
.seo-clip .screen{aspect-ratio:9/16}
.seo-clip img{display:block;width:100%;height:100%;object-fit:cover}
.seo-clip figcaption{margin-top:8px;font-size:13px;line-height:1.35}
.seo-clip figcaption .mono{display:block;opacity:.7;margin-top:2px}
.seo-body p,.seo-list{max-width:68ch}
.seo-list{padding-left:1.2em}
.seo-list li{margin:6px 0}
.seo-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.seo-table{border-collapse:collapse;min-width:560px;width:100%;font-size:14px}
.seo-table th,.seo-table td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
.seo-table thead th{position:sticky;top:0;background:var(--canvas)}
.seo-src{font-size:12px;opacity:.7}
.seo-foot{flex-wrap:wrap}
.seo-foot-title{opacity:.7}


/* Studio sits under the Pro bento as the second path: main's own Let's talk column, full width. */
.pb-studio{margin-top:12px}
.pb-studio .hf-plans-studio{margin:0}
.pb-studio .hf-plan.studio{padding:clamp(22px,3vw,40px);border-radius:20px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line-strong)}
.pb-studio .hf-plan.studio .hf-plan-name{font-size:clamp(2.5rem,4vw,3.5rem);line-height:.85}

@media (max-width:900px){
}

/* ---- Studio on autopilot (2026-10-19) ---------------------------------------------------------
   The loop is the scene (.sx, at the end of this file), then the control (after Antimetal, with
   monday-style rule sentences). The month is the hero (.cal, story.css). */

.ct{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:center}
.ct-card{display:grid;gap:22px;padding:clamp(22px,3vw,40px);border-radius:24px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line-strong)}
.ct-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.ct-name{color:var(--ink-1);font:700 clamp(1.5rem,2.4vw,2rem)/1.06 var(--display);}
.ct-mode{display:flex;gap:2px;margin:0;padding:3px;border:0;border-radius:999px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--line-strong)}
.ct-mode label{position:relative;cursor:pointer}
.ct-mode input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ct-mode span{display:flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;color:var(--ink-2);font:500 .9375rem/1 var(--ui);transition:background-color .16s var(--ease),color .16s var(--ease)}
.ct-mode input:checked+span{background:var(--ink-1);color:var(--canvas)}
.ct-mode input:focus-visible+span{outline:2px solid var(--take-text);outline-offset:2px}
.ct-bar{display:grid;gap:10px}
.ct-bar-head{display:flex;justify-content:space-between;align-items:baseline;color:var(--ink-2)}
.ct-bar output{color:var(--ink-1);font:700 clamp(2.5rem,4vw,3.5rem)/1.06 var(--display)}
.ct-bar input{--p:69%;width:100%;height:44px;margin:0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.ct-bar input::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--ink-4) var(--p),var(--take) var(--p))}
.ct-bar input::-moz-range-track{height:6px;border-radius:3px;background:var(--ink-4)}
.ct-bar input::-webkit-slider-thumb{width:24px;height:24px;margin-top:-9px;border:0;border-radius:50%;background:var(--ink-1);box-shadow:0 0 0 4px var(--raised);-webkit-appearance:none;appearance:none}
.ct-bar input::-moz-range-thumb{width:24px;height:24px;border:0;border-radius:50%;background:var(--ink-1)}
.ct-bar input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--raised),0 0 0 4px var(--take-text)}
.ct-says{margin:0;padding-top:18px;border-top:1px solid var(--line-strong);color:var(--ink-1);font-size:1.0625rem;line-height:1.4}
.ct-says b{color:var(--take-text)}
.ct-ask{display:none}
.ct:has([value=ask]:checked) .ct-free{display:none}
.ct:has([value=ask]:checked) .ct-ask{display:inline}
/* One real clip under the sentence, and where the rule sends it: under the bar, waiting for an OK
   (purple, as the app marks what asks for you), or into the next free slot (lime). */
.ct-clip{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;margin-top:-6px;padding:8px 12px 8px 8px;border-radius:14px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--line)}
.ct-clip img{width:40px;height:auto;aspect-ratio:9/16;border-radius:6px;object-fit:cover}
.ct-clip-t{display:grid;gap:2px;min-width:0}
.ct-clip-t b{overflow:hidden;color:var(--ink-1);font:600 .9375rem/1.3 var(--ui);white-space:nowrap;text-overflow:ellipsis}
.ct-clip-t .mono{color:var(--ink-3);font-size:.75rem}
.ct-clip-s{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;font:600 .8125rem/1 var(--ui);white-space:nowrap;transition:background-color .2s var(--ease),color .2s var(--ease)}
.ct-clip-s.is-ask{background:var(--mind-tint);color:var(--mind-text)}
.ct-clip-s.is-free{background:var(--take-tint);color:var(--ink-1)}
.ct-clip-s.is-under{background:var(--fill-3);color:var(--ink-3)}
@media (max-width:480px){.ct-clip{grid-template-columns:40px minmax(0,1fr)}.ct-clip-s{grid-column:2;justify-self:start}}
.ct-rules{display:grid;gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.ct-rules li{padding:18px 0;border-bottom:1px solid var(--line);color:var(--ink-2);font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.4}
.ct-rules u{color:var(--ink-1);text-decoration-color:var(--take);text-decoration-thickness:2px;text-underline-offset:4px}
.ct-rules b{color:var(--ink-1);font-weight:600}

.wk{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:12px}
.wk-cal{padding:clamp(16px,2vw,24px);border-radius:22px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.wk-head,.wk-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.wk-head{margin-bottom:10px;color:var(--ink-3);font-size:.6875rem;letter-spacing:.06em;}
.wk-day{display:grid;align-content:start;gap:8px;min-height:190px;padding:8px;border-radius:12px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--line)}
.wk-post{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:8px;padding:6px;border-radius:9px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--ink-2);font-size:.75rem;line-height:1.3}
.wk-post img{width:34px;height:auto;aspect-ratio:9/16;border-radius:5px;object-fit:cover}
.wk-post b{display:block;color:var(--ink-1);font-size:.6875rem}
.wk-free{grid-template-columns:minmax(0,1fr);background:none;box-shadow:inset 0 0 0 1px var(--line);border-style:dashed;color:var(--ink-3)}
.wk-open{box-shadow:inset 0 0 0 1.5px var(--take)}
.wk-note{margin:12px 0 0;color:var(--ink-3);font-size:.6875rem}
.wk-side{display:grid;gap:12px;align-content:start}
.wk-ask,.wk-stats{display:grid;gap:12px;padding:clamp(16px,2vw,22px);border-radius:22px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.wk-ask-h{margin:0;color:var(--ink-3);font-size:.6875rem;letter-spacing:.06em;}
.wk-ask-clip{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center}
.wk-ask-clip img{width:56px;height:auto;aspect-ratio:9/16;border-radius:8px;object-fit:cover}
.wk-ask-clip b{display:block;margin-bottom:4px;color:var(--ink-1);font-size:.9375rem;line-height:1.3}
.wk-ask-clip .mono{color:var(--ink-3);font-size:.6875rem}
.wk-ask-act{display:flex;gap:8px}
.wk-ask-act span{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;font-size:.875rem;font-weight:500}
.wk-ok{background:var(--ink-1);color:var(--canvas)}
.wk-skip{background:var(--raised);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-strong)}
.wk-stats b{color:var(--ink-1);font:700 1.375rem/1.06 var(--display);}
.wk-stats .mono{color:var(--ink-3);font-size:.6875rem}

@media (max-width:1000px){
  .ct,.wk{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .wk-head,.wk-grid{grid-template-columns:repeat(5,minmax(120px,1fr))}
  .wk-cal{overflow-x:auto}
  .wk-day{min-height:200px}
}

/* ---- the scene: one frame, then the month (Studio #loop). A pinned scroll scene on one canvas;
   the big word and the step rail sit over it. */
.sx{position:relative;height:540vh;margin:0 calc(-1 * var(--pad));background:var(--canvas)}
.sx-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.sx canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.sx-word{position:absolute;left:var(--pad);right:var(--pad);top:calc(64px + clamp(12px,3vh,36px));z-index:2;margin:0;color:var(--ink-1);font:700 clamp(2.25rem,5.4vw,5rem)/1.06 var(--display);pointer-events:none}
.sx-w{position:absolute;left:0;top:0;opacity:0;transform:translateY(.32em);transition:opacity .3s var(--ease),transform .6s var(--ease-expo)}
.sx-w.on{opacity:1;transform:none}
.sx-w.was{transform:translateY(-.32em)}
.sx-w em{font-style:normal;color:var(--take-text)}
.sx-foot{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(14px,3vh,28px);z-index:2;display:flex;justify-content:flex-end}
.sx-rail{display:flex;flex:none;gap:4px;margin:0}
.sx-rail i{width:16px;height:3px;border-radius:2px;background:var(--ink-4);transition:background-color .2s var(--ease)}
.sx-rail i.done{background:var(--ink-3)}
.sx-rail i.on{background:var(--take)}
.sx-media{position:absolute;left:0;top:0;width:2px;height:2px;overflow:hidden;opacity:0;pointer-events:none}
.sx-media video{width:2px;height:2px}
@media (max-width:640px){.sx{height:450vh}.sx-rail i{width:10px}}
.is-still .sx{height:auto}
.is-still .sx-pin{position:relative}

/* rotating examples over an empty link field (app.js, the app's own rotating placeholder): the native
   placeholder stays for screen readers, invisibly, and the painted text sits where it would */
.rph-field{position:relative;display:flex;align-items:center;flex:1;min-width:0}
.rph-field>input{width:100%}
.rph-on>input::placeholder{color:transparent}
.rph{position:absolute;inset:0 0 auto;display:flex;align-items:center;overflow:hidden;color:var(--ink-3);white-space:pre;pointer-events:none}
.rph-field:has(input:not(:placeholder-shown)) .rph,.rph-field:not(.rph-on) .rph{display:none}
.rph-slot{position:relative;display:inline-flex;min-width:0}
.rph-text{display:inline-block;white-space:pre}
.rph-out{position:absolute;left:0;top:0}
.rph-ch{display:inline-block;white-space:pre;animation-fill-mode:both;animation-duration:var(--rph-in);animation-delay:calc(var(--rph-delay) + var(--i) * var(--rph-stagger));animation-timing-function:var(--ease-expo)}
.rph-out .rph-ch{animation-duration:var(--rph-out);animation-delay:calc(var(--i) * var(--rph-stagger) * .5);animation-timing-function:cubic-bezier(.55,0,1,.45)}
.rph-in[data-fx=rise] .rph-ch{animation-name:rph-rise-in}
.rph-out[data-fx=rise] .rph-ch{animation-name:rph-rise-out}
.rph-in[data-fx=blur] .rph-ch{animation-name:rph-blur-in}
.rph-out[data-fx=blur] .rph-ch{animation-name:rph-blur-out}
.rph-in[data-fx=flip] .rph-ch{animation-name:rph-flip-in;transform-origin:50% 60%}
.rph-out[data-fx=flip] .rph-ch{animation-name:rph-flip-out;transform-origin:50% 40%}
.rph-in[data-fx=drop] .rph-ch{animation-name:rph-drop-in;animation-timing-function:linear}
.rph-out[data-fx=drop] .rph-ch{animation-name:rph-drop-out}
.rph-in[data-fx=decode]{color:var(--ink-2)}
.rph-caret{display:inline-block;width:1.5px;height:1.05em;margin-left:1px;vertical-align:-.15em;background:var(--ink-2);animation:rph-caret .9s steps(1) infinite}
@keyframes rph-rise-in{from{transform:translateY(.9em);opacity:0}to{transform:none;opacity:1}}
@keyframes rph-rise-out{to{transform:translateY(-.9em);opacity:0}}
@keyframes rph-blur-in{from{filter:blur(6px);opacity:0;transform:scale(1.08)}to{filter:none;opacity:1;transform:none}}
@keyframes rph-blur-out{to{filter:blur(6px);opacity:0;transform:scale(.96)}}
@keyframes rph-flip-in{from{transform:perspective(320px) rotateX(-90deg);opacity:0}to{transform:perspective(320px) rotateX(0);opacity:1}}
@keyframes rph-flip-out{to{transform:perspective(320px) rotateX(90deg);opacity:0}}
@keyframes rph-drop-in{0%{transform:translateY(-1em);opacity:0;animation-timing-function:cubic-bezier(.5,0,1,.6)}55%{transform:translateY(.14em);opacity:1;animation-timing-function:cubic-bezier(0,.4,.5,1)}78%{transform:translateY(-.05em)}100%{transform:none;opacity:1}}
@keyframes rph-drop-out{to{transform:translateY(.8em) rotate(10deg);opacity:0}}
@keyframes rph-caret{50%{opacity:0}}