/* Scroll (ticket 03): one clip at a time, full screen. Colours and the focus ring come from app.css; this is black because the picture is the page. */
.sc-body{overflow:hidden;overscroll-behavior:none;background:#000}
#scroll{position:fixed;inset:0;display:flex;justify-content:center;background:#000;color:#fff}
.sc-col{position:relative;width:var(--col,100%);height:100vh;height:100dvh;overflow:hidden;overflow:clip;background:#000;isolation:isolate}
.sc-track{position:absolute;inset:0;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab;--cur:0;--dy:0px}
.sc-track.dragging{cursor:grabbing}
.sc-clip{position:absolute;inset:0;transform:translate3d(0,calc(var(--dy) + (var(--i) - var(--cur)) * 100%),0);transition:transform .26s cubic-bezier(.2,.7,.2,1);will-change:transform}
.sc-track.dragging .sc-clip,.sc-reduce .sc-clip{transition:none}
/* Split screen (ticket 25): each clip is the top half of the column and the track still moves by one whole clip, which is now half a screen, so the current clip is the top half and the next one the bottom half */
.sc-split .sc-clip{inset:0 0 50% 0}
.sc-split::after{content:'';position:absolute;left:0;right:0;top:calc(50% - 1px);height:2px;background:rgba(255,255,255,.22);z-index:2;pointer-events:none}
.sc-hear{position:absolute;left:12px;z-index:5;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.62);color:#fff;pointer-events:none}
.sc-hear[data-half="0"]{bottom:calc(50% + 12px)}
.sc-hear[data-half="1"]{bottom:calc(14px + env(safe-area-inset-bottom))}
.sc-stage{position:absolute;inset:0;overflow:hidden;background:#000}
/* the clip whole, over its own poster blurred; never cropped (a portrait that would hardly be cut fills the screen instead) */
.sc-back{position:absolute;left:-10%;top:-10%;width:120%;height:120%;object-fit:cover;filter:blur(28px) saturate(1.15) brightness(.65)}
.sc-media{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none}
[data-layout="fill"] .sc-media{object-fit:cover}
.sc-full{opacity:0}
.sc-full.ready{opacity:1}
.sc-top{position:absolute;left:0;right:0;top:0;z-index:7;display:flex;align-items:center;gap:8px;padding:calc(8px + env(safe-area-inset-top)) 12px 16px;background:linear-gradient(rgba(0,0,0,.6),transparent);pointer-events:none}
.sc-top>*{pointer-events:auto}
.sc-pill{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.62);color:#fff;font:inherit;font-weight:600;font-size:.95rem;text-decoration:none;white-space:nowrap}
.sc-pill:hover{border-color:rgba(255,255,255,.5);color:#fff}
.sc-pill:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.sc-tabs{display:flex;gap:4px;margin:0 auto}
@media (max-width:400px){.sc-top{gap:6px;padding-left:8px;padding-right:8px}.sc-pill{padding:0 10px;font-size:.85rem}.sc-tabs{gap:2px}}
.sc-tab[aria-selected="true"]{background:#fff;color:#000;border-color:#fff}
.sc-snd[aria-pressed="true"]{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.sc-start,.sc-msg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px;background:rgba(0,0,0,.62)}
.sc-start{z-index:8}
.sc-msg{z-index:6;background:#000}
.sc-start h1,.sc-msg h1{margin:0;font-size:1.5rem}
.sc-start p,.sc-msg p{max-width:30ch;color:#cfcdd8;margin:0}
.sc-link{color:#cfcdd8}
.sc-pause{position:absolute;left:50%;top:50%;z-index:4;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.5);font-size:1.9rem;pointer-events:none;opacity:0}
.sc-col.paused .sc-pause{opacity:1}
#scroll [hidden]{display:none!important}
.sc-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ── ticket 04: icon buttons, the settings sheet, Censor ── */
.sc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.sc-pill.sc-icon{padding:0;width:44px;flex:none}
.sc-pill.sc-icon svg{display:block}
.sc-scrim{position:absolute;inset:0;z-index:9;background:rgba(0,0,0,.55);touch-action:none}
.sc-sheet{position:absolute;left:0;right:0;bottom:0;z-index:10;max-height:82%;overflow:auto;overscroll-behavior:contain;background:var(--panel);color:var(--text);border-top:1px solid var(--line);border-radius:18px 18px 0 0;padding:0 16px calc(16px + env(safe-area-inset-bottom));animation:sc-up .22s ease-out}
.sc-sheet:focus{outline:none}
@keyframes sc-up{from{transform:translateY(100%)}to{transform:none}}
.sc-reduce .sc-sheet{animation:none}
@media (prefers-reduced-motion:reduce){.sc-sheet{animation:none}.sc-clip{transition:none}.sc-switch::before,.sc-knob{transition:none}}
.sc-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0 4px;position:sticky;top:0;background:var(--panel);z-index:1}
.sc-sheet-head h2{margin:0;font-size:1.1rem}
.sc-row{padding:10px 0;border-top:1px solid var(--line)}
.sc-row:first-child{border-top:0}
.sc-row-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;font-weight:600}
.sc-val{color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.sc-hint{margin:0 0 4px;color:var(--muted);font-size:.85rem}
.sc-range{width:100%;min-height:44px;margin:0;accent-color:var(--brand)}
.sc-switch{position:relative;flex:none;width:56px;height:44px;padding:0;border:0;background:transparent}
.sc-switch::before{content:"";position:absolute;left:0;top:8px;width:56px;height:28px;border-radius:999px;background:#3a3a47;transition:background .15s}
.sc-knob{position:absolute;left:3px;top:11px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .15s}
.sc-switch[aria-checked="true"]::before{background:var(--brand)}
.sc-switch[aria-checked="true"] .sc-knob{transform:translateX(28px)}
.sc-switch:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:999px}
.sc-reduce .sc-switch::before,.sc-reduce .sc-knob{transition:none}
.sc-seg{display:flex;gap:8px;margin:4px 0 8px}
.sc-modebtn[aria-pressed="true"]{background:#fff;color:#000;border-color:#fff}
.sc-detail{padding-top:4px}
/* Censor: blur filters each clip's whole stage, so the poster, the preview, the video, a still and the backdrop go together. Pixelate hides
   those pictures and shows a small canvas scaled up; it is black until it has been drawn, so no frame in between is ever uncensored. */
.censor-blur .sc-stage{filter:blur(var(--cblur,0px));transform:scale(1.08)}
.sc-censor{display:none;position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;background:#000}
.censor-pixel .sc-censor{display:block}
.censor-pixel .sc-media,.censor-pixel .sc-back{visibility:hidden}

/* GoonLab polish: the first screen and the top pills take the site's light and type; the picture stays the page */
.sc-start,.sc-msg{background:radial-gradient(60% 42% at 50% 50%,rgba(157,123,255,.24),rgba(5,4,9,.78) 72%),rgba(0,0,0,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sc-start h1,.sc-msg h1{font-size:clamp(2.3rem,9vw,3.3rem);line-height:1;letter-spacing:-.012em}
.sc-start p,.sc-msg p{font-size:1.05rem}
.sc-pill{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* ── ticket 28: clips play as they appear ── */
/* a clip that is slow to arrive fades in over its poster instead of cutting in; one that is already loaded when it slides in shows at once */
.sc-preview{opacity:0;transition:opacity .08s linear}
.sc-preview.ready{opacity:1}
.sc-reduce .sc-preview{transition:none}
/* after a moment with nothing moving, a small spinner over the poster; it goes as soon as the clip plays */
.sc-spin{position:absolute;left:50%;top:50%;z-index:5;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:sc-spin .8s linear infinite;pointer-events:none}
@keyframes sc-spin{to{transform:rotate(360deg)}}
@keyframes sc-pulse{0%,100%{opacity:.35}50%{opacity:1}}
.sc-reduce .sc-spin{animation:none;border-top-color:#fff}
@media (prefers-reduced-motion:reduce){.sc-spin{animation:none}.sc-preview{transition:none}}
/* the hint on the first clip, in place of the start screen: it asks for nothing and goes by itself */
.sc-nudge{position:absolute;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));z-index:5;transform:translateX(-50%);margin:0;padding:8px 16px;border-radius:999px;background:rgba(0,0,0,.66);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-size:.9rem;font-weight:600;white-space:nowrap;pointer-events:none;animation:sc-nudge 4.5s ease-in-out forwards}
@keyframes sc-nudge{0%{opacity:0}12%,80%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.sc-nudge{animation:none}}

/* ── ticket 05: the heart, the double-tap heart, the For you row, the Saved tab's message ── */
.sc-heart{position:absolute;right:12px;bottom:calc(112px + env(safe-area-inset-bottom));z-index:7}
.sc-heart svg{width:26px;height:26px;transition:transform .12s}
.sc-heart[aria-pressed="true"]{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.sc-heart[aria-pressed="true"] svg{fill:currentColor}
.sc-heart:active svg{transform:scale(.88)}
.sc-reduce .sc-heart svg{transition:none}
/* a big heart where a double tap landed: it rises and goes. Reduced motion: it simply shows for a moment. */
.sc-burst{position:absolute;z-index:6;width:96px;height:96px;margin:-48px 0 0 -48px;pointer-events:none;color:#fff;filter:drop-shadow(0 2px 10px rgba(0,0,0,.6));animation:sc-burst .65s ease-out forwards}
.sc-burst svg{width:100%;height:100%;fill:currentColor;stroke:none}
@keyframes sc-burst{0%{opacity:0;transform:scale(.4)}20%{opacity:1;transform:scale(1.1)}70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-34px) scale(1)}}
.sc-reduce .sc-burst{animation:sc-burst-still .65s linear forwards}
@keyframes sc-burst-still{0%,80%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.sc-burst{animation:sc-burst-still .65s linear forwards}.sc-heart svg{transition:none}}
.sc-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 8px}
.sc-chip{min-height:44px;background:rgba(255,255,255,.06)}
.sc-chip[aria-pressed="true"]{background:transparent;color:var(--muted);border-style:dashed;text-decoration:line-through}
.sc-chip[aria-pressed="true"]::before{content:"Hidden: ";position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ── Wave 2: the Tools section of the sheet, and the layers a tool draws over the clip ── */
.sc-h3{margin:0;font-size:1rem}
.sc-tools{padding-bottom:4px}
.sc-tool-item{border-top:1px solid var(--line);padding:8px 0}
.sc-toolbtn{width:100%;justify-content:space-between;background:rgba(255,255,255,.06);border-color:var(--line);font-weight:600}
.sc-toolbtn::after{content:"›";margin-left:12px;transition:transform .15s}
.sc-toolbtn[aria-expanded="true"]::after{transform:rotate(90deg)}
.sc-reduce .sc-toolbtn::after{transition:none}
.sc-toolbox{padding:8px 0 4px}
.sc-layer{padding:10px 0;border-top:1px solid var(--line)}
.sc-layer:first-child{border-top:0}
.sc-tool-layer{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.sc-wrap{flex-wrap:wrap}
.sc-goal{order:8;margin-right:auto;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border-radius:999px;background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.sc-goal-bar{width:48px;height:6px;border-radius:3px;background:rgba(255,255,255,.3);overflow:hidden}
.sc-goal-fill{height:100%;width:0;background:#fff}
.sc-tool-layer.sc-toys-layer{z-index:8;overflow:visible}
.sc-toy-stop{position:absolute;right:68px;top:calc(72px + env(safe-area-inset-top));pointer-events:auto;background:#a3122f;border-color:#fff;color:#fff}
.sc-steps{margin:0 0 8px;padding-left:20px;color:var(--muted);font-size:.85rem}
.sc-port{width:9ch;min-height:44px}
.sc-tool-layer.sc-together-layer{z-index:4;overflow:visible}
.sc-together-hidden{position:absolute;inset:0;display:grid;place-items:center;background:#000;color:#fff;font-size:1.3rem;font-weight:600}
.sc-rejoin{position:absolute;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);pointer-events:auto;background:var(--brand);color:var(--on-brand);border-color:var(--brand);z-index:8}
.sc-code{font:700 1.6rem/1 ui-monospace,Menlo,monospace;letter-spacing:.18em}
.sc-codein{width:9ch;min-height:44px;text-transform:uppercase;letter-spacing:.2em;text-align:center}
.sc-tool-layer.sc-strobe-layer{z-index:5;overflow:visible}
.sc-strobe{position:absolute;inset:0;pointer-events:none}
@keyframes scStrobe{0%,49%{opacity:1}50%,100%{opacity:0}}
.sc-strobe-stop{position:absolute;left:12px;bottom:calc(20px + env(safe-area-inset-bottom));pointer-events:auto;background:#a3122f;border-color:#fff;color:#fff;z-index:8}
.sc-warn{padding:12px;margin:8px 0;border:1px solid #ff9db0;border-radius:12px;background:rgba(163,18,47,.18)}
.sc-tool-layer.sc-beat-layer{z-index:6;overflow:visible}
.sc-beat{position:absolute;left:12px;right:68px;bottom:calc(20px + env(safe-area-inset-bottom));height:44px;display:flex;align-items:center;gap:10px;padding:0 12px;border-radius:999px;background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.2);color:#fff}
.sc-beat-track{position:relative;flex:1;height:8px;border-radius:4px;background:rgba(255,255,255,.28)}
.sc-beat-mark{position:absolute;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:#fff}
.sc-beat-read{font-size:.8rem;font-weight:600;min-width:64px;text-align:right;font-variant-numeric:tabular-nums}
.sc-beat.glow{border-color:rgba(255,255,255,.55);box-shadow:0 0 14px rgba(157,123,255,.45)}
.sc-beat-quick{position:absolute;left:12px;bottom:calc(72px + env(safe-area-inset-bottom));display:flex;gap:8px;pointer-events:auto}
.sc-beat-quick .sc-pill{min-width:56px}
.sc-aff{position:absolute;left:50%;top:50%;max-width:92%;text-align:center;white-space:normal;overflow-wrap:anywhere;will-change:opacity,transform}
.sc-aff span{display:inline-block}
@keyframes wordJitter{0%{transform:translate(0,0)}50%{transform:translate(1.5px,-1px)}100%{transform:translate(-1px,1px)}}
@media (prefers-reduced-motion:reduce){@keyframes wordJitter{0%,100%{transform:none}}}
.sc-tool-layer .sc-spiral{position:absolute;left:50%;top:50%;width:min(100%,100vh);aspect-ratio:1;transform:translate(-50%,-50%);display:block}
.sc-colour{width:56px;height:44px;padding:2px;border-radius:12px;border:1px solid var(--line);background:transparent}
.sc-tool-layer[data-tool="colour"]{z-index:2}

/* ── ticket 08: the Live now chip sits in the top bar's second row ── */
.sc-livechip{order:9;margin-right:auto;min-height:44px;padding:0 14px;font-size:.85rem;border-color:rgba(255,92,138,.55);background:rgba(110,8,36,.88)}
.sc-livechip::before{content:"";width:8px;height:8px;border-radius:50%;background:#ff5c8a;margin-right:8px;flex:none}
.sc-top{flex-wrap:wrap}

/* ── ticket 07: the panic page is a plain white page with nothing on it ── */
body.sc-panic,body.sc-panic #scroll{background:#fff}
.sc-blank{width:100%;height:100%;background:#fff}

/* ── ticket 06: the rail (Save, Share, Report), the report form, the link-copied note ── */
.sc-rail{position:absolute;right:12px;bottom:calc(112px + env(safe-area-inset-bottom));z-index:7;display:flex;flex-direction:column;gap:10px}
.sc-heart{position:static}
.sc-form{display:grid;gap:12px;padding:4px 0 8px}
.sc-fields{border:0;margin:0;padding:0;display:grid;gap:8px}
.sc-fields legend{font-weight:600;padding:8px 0}
.sc-check{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:6px 0}
.sc-check input{width:22px;height:22px;flex:none;margin:2px 0 0;accent-color:var(--brand)}
.sc-check small{display:block;color:var(--muted)}
.sc-text{width:100%;min-height:88px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--text);font:inherit;resize:vertical}
.sc-text:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.sc-err{margin:0;color:#ff9db0;min-height:1.2em}
.sc-ok{margin:0 0 12px;font-size:1.05rem}
.sc-sheet a.sc-link{color:var(--brand);display:inline-flex;align-items:center;min-height:44px}
.sc-toast{position:absolute;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));z-index:11;transform:translateX(-50%);margin:0;padding:8px 16px;border-radius:999px;background:rgba(0,0,0,.7);color:#fff;font-weight:600;pointer-events:none}

/* Audio menu (ADR 0013): the strip with Stop and the sleep timer, the source tabs, the BambiCloud and My audio controls */
.sc-strip{padding:6px 0 10px;border-bottom:1px solid var(--line);margin-bottom:8px}
.sc-np{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-tabs-audio{flex-wrap:wrap}
.sc-tabpanel{padding-top:4px}
.sc-line{display:flex;gap:8px;align-items:center;margin:0 0 8px}
.sc-input,.sc-select{flex:1 1 0;min-width:0;min-height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--text);font:inherit}
.sc-input:focus-visible,.sc-select:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.sc-transport{padding-top:8px;border-top:1px solid var(--line);margin-top:8px}
.sc-transport .sc-seg{flex-wrap:wrap}
.sc-pill:disabled{opacity:.45;cursor:default}
.sc-pill:disabled:hover{border-color:rgba(255,255,255,.2);color:inherit}