/* The Cutdowns look: the redesign, the app at / since 2026-10-09 (the old
   pages stay at their addresses, and /old, for reference). Everything about how
   the app looks lives in this one file, the way clip-theme.css holds the old
   pages' look; once those pages go, so does clip-theme.css. One look, light
   (Drew, 2026-10-01: no dark version and no Appearance choice). */
:root{color-scheme:light;--paper:#fff;--raise:#fff;--seg:#fff;--ink:#0E0E0E;--on-ink:#fff;--inkh:#2a2a2a;--mute:rgba(14,14,14,.62);--line:rgba(14,14,14,.14);--soft:#f1f1ee;--soft2:#ebebe6;--soft3:#f4f4f1;--soft4:#f6f6f2;--lemt:#fffbe6;--lemt2:#fff7cc;--flash:#fff3b0;--co:#2F4BFF;--co-t:#2F4BFF;--red-t:#c62a1d;--tang:#FF7A1A;--lem:#FFE14D;--scrim:rgba(14,14,14,.4);--toast:#0E0E0E;--die:0 0 0 1px rgba(14,14,14,.13),0 7px 14px -9px rgba(14,14,14,.45);--disp:'Bowlby One','Arial Black',sans-serif;--mono:'DM Mono',ui-monospace,monospace;--mark:'Permanent Marker','Comic Sans MS',cursive;--tsw:52px;--lw:0px;--clip-1:#FF8FCF;--clip-2:#3DDC97;--clip-3:#c9d2ff;--clip-4:#ffd2b0;--clip-5:#e2c9ff;--clip-6:#bfe8ff;--look-1:#171717;--look-2:#1b1c24;--look-3:#17201c;--look-4:#221b17;--look-5:#1d1722;--look-6:#15202a}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
:where(button,input,select){font:inherit;color:inherit}
/* on lemon, tangerine and white stickers the ink stays dark */
:where(.tab[aria-current=page],.pill-tang,.bb.on,.cutpill:not(.parts),.sha,.spdpop .it[aria-checked=true],.pop .it.fmti[aria-checked=true],.helpb[aria-expanded=true],.fmt[aria-pressed=true],button.sw[aria-checked=true],.epacts .bb[aria-expanded=true],.ecard .epno,.ecard .etag,.cprev .kick2,.ntag,.ffmt,.chip.rendering,.rdy.on,.snote,.apv[aria-pressed=true],.who[aria-expanded=true],.spd.on,.ahg.on,.ask,.minip i){color:var(--ink)}
@media (hover:hover){:where(.tab:not([aria-current=page]):hover,.bb:not(.primary):not(:disabled):hover,.pop .it:not(:disabled):not(.fmti):hover,.helpb:hover,.shbtn.q:hover,.join:hover,.shx:hover,.seeas:hover,.askb:not(.on):hover,.chipq:hover,.ahg:not(.on):hover,.fmtr:hover){color:var(--ink)}}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--co-t);outline-offset:2px}
#app{min-height:100vh;overflow-x:clip}

/* ribbon: shown only while the owner looks as their client or video editor */
#ribbon{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 12px;min-height:34px;padding:6px 16px;background:#0E0E0E;color:#fff;font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;text-align:center}
#ribbon b{color:var(--lem);font-weight:500}

/* header */
#hdr{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--line)}
.hin{min-height:64px;display:flex;align-items:center;gap:18px;padding:0 28px;max-width:1480px;margin:0 auto}
.logo{flex:none;display:flex;align-items:baseline;gap:8px;border:0;background:none;padding:0}
/* the logo: the lemon bars tile (cutdowns-logo.svg, also the tab icon) beside the name in bold lowercase (Drew, 2026-10-13) */
.wm{display:inline-flex;align-items:center;gap:.42em;font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;font-weight:700;font-size:24px;line-height:1;letter-spacing:-.03em;text-transform:lowercase;color:var(--ink)}
.wm::before{content:'';flex:none;width:1.25em;height:1.25em;background:url(/static/systems/cutdowns-logo.svg) center/contain no-repeat}
.vsep{flex:none;width:1px;height:26px;background:var(--line)}
.ep{display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden}
.no{flex:none;padding:4px 8px 3px;border-radius:999px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 20%,transparent);font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.ttl{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabs{flex:none;display:flex;align-items:center;gap:4px;margin-left:6px}
.tab{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px;border:0;border-radius:999px;background:none;font-size:15px;font-weight:600;white-space:nowrap}
.tab[aria-current=page]{background:var(--lem);font-weight:700}
.tab .n{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--ink);color:var(--on-ink);font-family:var(--mono);font-weight:500;font-size:11px;display:inline-flex;align-items:center;justify-content:center}
.tab.epi{color:var(--co-t)}
.tab.epi i{width:8px;height:8px;border-radius:999px;background:var(--co-t)}
.tab.epi .n{background:var(--co);color:#fff}
.tab.epi .tk{display:none}
.tab.epi.done i{display:none}
.tab.epi.done .tk{display:block}
.brk{display:none}
.pill-tang,.pill-ink{flex:none;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 6px;border:2px solid var(--ink);border-radius:999px;background:var(--tang);color:var(--ink);font-size:15px;font-weight:700;white-space:nowrap}
.pill-tang .ic{width:26px;height:26px;border-radius:999px;background:var(--ink);color:var(--tang);display:flex;align-items:center;justify-content:center}
.pill-ink{background:var(--ink);color:var(--on-ink);padding:0 20px 0 16px}
.share,.upload{margin-left:auto}
.av{flex:none;height:40px;min-width:48px;padding:0 14px;border-radius:999px;background:var(--ink);color:var(--on-ink);font-size:14px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
#app[data-view=home] .po{display:none!important}
#app:not([data-view=home]) .ho{display:none!important}
#app:not([data-view=pick]) .pk{display:none!important}
.lnk{border:0;background:none;padding:0 0 1px;font-weight:600;color:var(--ink);border-bottom:2px solid #3DDC97;white-space:nowrap}
@media (hover:hover){
  .tab:not([aria-current=page]):hover{background:var(--lem)}
  .tab.epi:hover{color:var(--ink)}
  .lnk:hover{border-bottom-color:var(--ink)}
}

/* views */
.view{max-width:1480px;margin:0 auto}

/* home */
.home{padding:26px 36px 90px}

.stk{display:inline-block;background:var(--tang);color:#0E0E0E;padding:.02em .22em .08em;border-radius:.2em;box-shadow:0 0 0 .07em var(--paper),var(--die)}

.rule{margin:6px 0 22px;border-top:2px solid var(--ink);padding-top:10px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;font-family:var(--mono);font-weight:500;font-size:12px;line-height:16px;letter-spacing:.04em;text-transform:uppercase}
.rule h2,.rule p{margin:0;font:inherit}
.rule p{color:var(--mute)}
@media (hover:none){.rule .dropl{display:none}}
/* every episode gets the same card, newest first */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:24px 28px}
.ecard{position:relative;display:flex;flex-direction:column;min-width:0;padding:0;background:var(--raise);border:3px solid var(--raise);border-radius:12px;box-shadow:var(--die);text-align:left;color:var(--ink);transition:transform .15s}
.thumb{position:relative;flex:none;display:block;aspect-ratio:16/9;border-radius:9px;overflow:hidden;background:var(--bg,#171717)}
.duo{position:absolute;right:9%;bottom:0;display:flex;align-items:flex-end;gap:14%;width:62%;justify-content:flex-end}
.duo span{display:flex;flex-direction:column;align-items:center;width:40%}
.duo span::before{content:'';display:block;width:46%;aspect-ratio:1;border-radius:999px;background:var(--sil,#2b2b2b)}
.duo span::after{content:'';display:block;width:100%;aspect-ratio:1.7;border-radius:999px 999px 0 0;background:var(--sil,#2b2b2b);margin-top:6%}
.ecard .epno{position:absolute;top:10px;left:10px;background:#fff;padding:4px 8px 3px;border-radius:999px;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.ecard .etag{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);background:#fff;border-radius:8px;padding:9px 13px 10px;box-shadow:0 0 0 1px rgba(14,14,14,.08)}
.etag b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-family:var(--disp);font-weight:400;font-size:24px;line-height:.95;letter-spacing:-.01em}
.efoot{flex:1;min-height:36px;display:flex;align-items:center;gap:8px;padding:3px 6px 0;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.prog{flex:1;height:8px;border-radius:999px;background:color-mix(in srgb,var(--ink) 10%,transparent);box-shadow:inset 0 0 0 1.5px var(--ink);overflow:hidden;position:relative}
.prog i{position:absolute;left:0;top:0;bottom:0;width:64%;background:var(--tang);box-shadow:inset 0 0 0 1.5px var(--ink);border-radius:999px}
@media (hover:hover){.ecard:hover{transform:translateY(-3px)}}
/* pick */
.pick{display:grid;grid-template-columns:minmax(0,1fr) clamp(340px,33vw,500px);gap:40px;padding:14px 28px 120px;align-items:start}
.tcol{position:relative;min-width:0}
.search{display:flex;align-items:center;gap:10px;height:44px;margin-left:calc(var(--lw) + var(--tsw) - 60px);max-width:760px;padding:0 18px;border:1px solid var(--line);border-radius:999px;color:var(--mute)}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:16px;color:var(--ink)}
.search input::placeholder{color:var(--mute)}
.search .hits{flex:none;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
#tr{position:relative;margin-top:6px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:pan-y}
.row{position:relative;display:flow-root}
/* until settleRows gets to it, a line off screen is left for later, at a guess of its height */
.row.later{content-visibility:auto;contain-intrinsic-size:auto 42px}
.ln{display:grid;grid-template-columns:var(--lw) var(--tsw) minmax(0,1fr);align-items:start;border-radius:8px}
.lab{grid-column:1;display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:0;padding:6px 12px 0 0;text-align:right;font-family:var(--mono);font-weight:500;font-size:10px;line-height:13px;letter-spacing:.05em;text-transform:uppercase}
.lb{max-width:100%;max-height:26px;overflow:hidden}
.lb i{font-style:normal;--hc:var(--c);background:linear-gradient(var(--hc),var(--hc)) no-repeat 0 88%/100% 62%;padding:0 .2em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lb.epl{background:none;padding:0;color:var(--co-t)}
/* lines the episode keeps: a cobalt bar down the edge, beside any clip colours */
.row.inep::before{content:'';position:absolute;top:0;bottom:0;left:0;width:3px;background:var(--co-t)}
.row.inep1::before{top:6px}
.row.inep1:has(> .whow:not([hidden]))::before{top:30px}
.row.flash .ln{animation:flash 1.4s ease-out}
@keyframes flash{0%,35%{background:var(--flash)}100%{background:transparent}}
.ts{grid-column:2;justify-self:start;margin-top:5px;padding:2px 5px 2px 0;border:0;border-radius:6px;background:none;font-family:var(--mono);font-size:12px;line-height:15px;color:color-mix(in srgb,var(--ink) 60%,transparent);-webkit-user-select:none;user-select:none}
.tx{grid-column:3;margin:0;padding-right:10px;max-width:690px;font-size:18px;line-height:1.6;cursor:pointer}
.w,.s{border-radius:1px}
.w.on,.s.on{--hc:var(--lem);background:linear-gradient(var(--hc),var(--hc)) no-repeat 0 88%/100% 62%}
.row.sel .tx{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'><circle cx='12' cy='12' r='8.5' fill='white' stroke='%230E0E0E' stroke-width='2'/><path d='M8 12h8' stroke='%230E0E0E' stroke-width='2.4' stroke-linecap='round'/></svg>") 13 13,crosshair}
.w.cut,.s.cut{color:color-mix(in srgb,var(--ink) 45%,transparent);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--ink)}
.w.clcut,.s.clcut{color:color-mix(in srgb,var(--ink) 42%,transparent);text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:color-mix(in srgb,var(--ink) 40%,transparent)}
.w.m{outline:2px solid var(--co-t);outline-offset:1px;border-radius:3px}
.w.now{box-shadow:0 3px 0 var(--ink)}
.tag{display:inline-flex;align-items:center;gap:3px;height:17px;margin:0 3px 0 5px;padding:0 6px;border-radius:999px;background:var(--ink);color:var(--on-ink);font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.02em;line-height:1;vertical-align:3px;white-space:nowrap;pointer-events:none;text-decoration:none}
.selbox{position:absolute;pointer-events:none;border:2px dashed var(--ink);border-radius:10px;z-index:1}
body.dragging,body.dragging *{cursor:grabbing!important}
body.cutting,body.cutting *{cursor:inherit}
.coach{position:relative;max-height:90px;margin:14px 0 4px calc(var(--lw) + var(--tsw));display:flex;align-items:flex-end;gap:6px;font-family:var(--mark);font-size:20px;line-height:1.05;color:var(--co-t);transform:rotate(-2deg);transform-origin:0 100%;pointer-events:none;transition:max-height .3s,margin .3s}
.coach svg{flex:none}
.coach.gone{visibility:hidden}
.coach.folded{max-height:0;margin-top:0;margin-bottom:0}
@media (hover:hover) and (pointer:fine){
  body:not(.dragging):not(.cutting) .row:not(.sel) .ln:hover{background:var(--lemt2)}
  body:not(.dragging):not(.cutting) .row.sel .w.on:hover{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:color-mix(in srgb,var(--ink) 35%,transparent)}
  body:not(.dragging):not(.cutting) .row.sel .w.cut:hover{color:color-mix(in srgb,var(--ink) 75%,transparent);text-decoration-color:color-mix(in srgb,var(--ink) 30%,transparent)}
  .ts:hover{background:var(--ink);color:var(--on-ink);padding-left:5px;padding-right:3px;margin-left:-5px}
  .ts:hover::after{content:'';display:inline-block;margin-left:3px;border-style:solid;border-width:4px 0 4px 5px;border-color:transparent transparent transparent currentColor}
}

/* the bar under a selection */
#dock{position:absolute;left:calc(var(--lw) + var(--tsw));display:none;flex-direction:column;align-items:flex-start;gap:10px;z-index:6}
.bar{display:flex;align-items:center;gap:4px;padding:6px 6px 6px 14px;background:var(--raise);border-radius:999px;box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 13%,transparent),0 12px 22px -12px rgba(14,14,14,.5);white-space:nowrap}
.dur{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.04em;padding-right:2px}
.cutpill{margin:0 4px 0 2px;padding:3px 8px 2px;border-radius:999px;background:var(--lem);box-shadow:inset 0 0 0 1.5px var(--ink);font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.cutpill.parts{background:var(--raise)}
#dock .bar{position:relative;z-index:1}
.bb{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 13px;border:0;border-radius:999px;background:transparent;font-size:15px;font-weight:600;white-space:nowrap}
.bb.primary{background:var(--ink);color:var(--on-ink);font-weight:700;padding:0 18px 0 13px}
.bb.icon{width:38px;padding:0}
.bb:disabled{opacity:.38;cursor:default}
.bb.on{background:var(--lem)}
.bsep{width:1px;height:22px;background:var(--line);margin:0 2px}
.bspace,.bbrk,.minip{display:none}
@media (hover:hover){.bb:not(.primary):not(:disabled):hover{background:var(--lem)}.bb.primary:not(:disabled):hover{background:var(--inkh)}}
.editing{padding:4px 10px 3px;border-radius:999px;background:var(--raise);box-shadow:inset 0 0 0 1.5px var(--ink);font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.coach2{margin:4px 0 0 8px;font-family:var(--mark);font-size:19px;line-height:1.1;color:var(--co-t);transform:rotate(-2deg);white-space:normal;max-width:600px}
.coach2 svg{vertical-align:-6px;margin-right:6px}
.pop{position:absolute;top:calc(100% + 8px);left:0;min-width:230px;width:max-content;max-width:min(300px,calc(100vw - 32px));padding:6px;background:var(--raise);border-radius:14px;box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 13%,transparent),0 16px 28px -14px rgba(14,14,14,.5);z-index:20;white-space:normal}
.popwrap{position:relative;display:inline-flex}
.pop .it{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:10px;background:none;text-align:left;font-size:15px;font-weight:600}
.pop .it i{flex:none;width:18px;height:10px;border-radius:999px;background:var(--c);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 22%,transparent)}
.pop hr{margin:6px 10px;border:0;border-top:1px solid var(--line)}
.pop .it.epit{--c:var(--co);color:var(--co-t)}
.pop .it small{display:block;margin-top:2px;font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.pop h4{margin:4px 10px 6px;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.pop .it:disabled{cursor:default;color:var(--mute)}
.pop .it:disabled i{opacity:.45}
.pop .it i.empty{background:none;box-shadow:none;border:1.5px dashed color-mix(in srgb,var(--ink) 50%,transparent)}
@media (hover:hover){.pop .it:not(:disabled):hover{background:var(--lem)}}
/* how it works: a ? in the header while you pick */
.helpb{flex:none;width:40px;height:40px;padding:0;border:1.5px solid var(--line);border-radius:999px;background:var(--raise);color:var(--ink);font-size:17px;font-weight:700}
.helpb[aria-expanded=true]{background:var(--lem);border-color:var(--ink)}
.helppop{left:auto;right:0;width:330px;max-width:calc(100vw - 32px);padding:8px 8px 14px}
.hl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 16px;margin:10px 10px 16px;font-size:14px;line-height:1.35}
.hl dt{font-weight:700}
.hl dd{margin:0;color:color-mix(in srgb,var(--ink) 72%,transparent)}
.helppop .shbtn{margin-left:10px}
.helppop .stuck{margin:14px 10px 0;font-size:13px;color:var(--mute)}
.helppop .stuck a{color:var(--ink)}
@media (hover:hover){.helpb:hover{background:var(--lem)}}
.notepop{padding:10px;display:flex;gap:6px;min-width:280px}
.notepop input{flex:1;min-width:0;height:38px;padding:0 12px;border:1px solid var(--line);background:var(--paper);border-radius:999px;outline:0}
.notepop input:focus{border-color:var(--ink)}

/* the video side */
.acol{position:sticky;top:84px;display:flex;flex-direction:column;gap:16px;padding-top:4px;min-width:0}
.vslot{position:relative}
.vcard{background:var(--raise);border:3px solid var(--raise);border-radius:14px;box-shadow:var(--die)}
.vid{position:relative;aspect-ratio:16/9;border-radius:11px;background:#161616;overflow:hidden;container-type:inline-size}
/* the video fills its box whatever its own size, letterboxed when it isn't 16:9 */
.vcard .vid>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0E0E0E}
.stage{position:absolute;inset:0;display:flex;justify-content:center;align-items:flex-end;gap:13cqw}

/* The captions' look, on every player and clip, as caption_style.py burns them into downloads: Inter SemiBold,
   white, each line on its own black box at 75% with slightly rounded corners. The burn's sizes are of the font's
   full height (ascender + descender = 1.21em in Inter), so here they're divided by 1.21: text 4% of the frame's
   short edge = 3.306cqw on 9:16, padding .24 = .29em, rounding .25 = .3em, line pitch 1.6 = 1.936em. */
@font-face{font-family:'Cutdowns Captions';src:url(/static/systems/fonts/Inter-SemiBold.ttf) format('truetype');font-weight:600;font-display:swap}
.cap{position:absolute;left:6%;right:6%;bottom:7%;margin:0;text-align:center;font-family:'Cutdowns Captions',system-ui,sans-serif;font-weight:600;font-size:max(11px,1.674cqw);line-height:1.936;color:#fff}
.cap .bx,.ccap.house .bx{padding:.29em;border-radius:.3em;background:rgba(0,0,0,.75);color:#fff;-webkit-box-decoration-break:clone;box-decoration-break:clone}

.spk{position:absolute;top:10px;right:10px;padding:4px 8px 3px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase}
/* a clip from the recording plays over the episode: the episode's words and voices aren't what it says */
.vid.onrec>.cap,.vid.onrec>.spk{display:none}
.ctrl{display:flex;align-items:center;gap:14px;padding:0 2px}
.playb{flex:none;width:42px;height:42px;border:0;border-radius:999px;background:var(--ink);color:var(--tang);display:flex;align-items:center;justify-content:center}
.scrub{flex:1;position:relative;height:6px;border-radius:999px;background:color-mix(in srgb,var(--ink) 12%,transparent);cursor:pointer;touch-action:none}
.scrub::before{content:'';position:absolute;left:0;right:0;top:-12px;bottom:-12px}
.scrub .f{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--ink)}
.scrub .kn{position:absolute;top:-5px;width:16px;height:16px;margin-left:-8px;border-radius:999px;background:var(--ink);box-shadow:0 0 0 3px var(--paper),0 0 0 4px color-mix(in srgb,var(--ink) 13%,transparent)}
.tm{flex:none;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.04em;white-space:nowrap}
/* your clips and the episode, in the corner */
.shelf{position:relative;display:flex;flex-direction:column;flex:0 1 auto;min-height:150px;background:var(--raise);border:3px solid var(--raise);border-radius:14px;box-shadow:var(--die);overflow:hidden}
.shtabs{flex:none;display:flex;align-items:center;gap:8px;padding:6px 8px 6px 6px;border-bottom:1px solid var(--line)}
.shseg{display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--soft)}
.sht{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:0;border-radius:999px;background:none;font-size:14px;font-weight:600;color:color-mix(in srgb,var(--ink) 66%,transparent)}
.sht[aria-selected=true]{background:var(--seg);color:var(--ink);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 12%,transparent),0 2px 4px -2px rgba(14,14,14,.3)}
.sht .n{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--ink);color:var(--on-ink);font-family:var(--mono);font-weight:500;font-size:10.5px;display:inline-flex;align-items:center;justify-content:center}
.sht.eptab,.sht.eptab[aria-selected=true]{color:var(--co-t)}
.sht.eptab i{width:7px;height:7px;border-radius:999px;background:var(--co-t)}
.sht.eptab .n{background:var(--co);color:#fff}
.shtot{margin-left:auto;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.04em;color:var(--mute);white-space:nowrap}
.shtog{display:none;flex:none;width:34px;height:34px;border:0;border-radius:999px;background:none;align-items:center;justify-content:center;transition:transform .15s}
.shelf.open .shtog{transform:scaleY(-1)}
.shlist{position:relative;flex:1 1 auto;min-height:0;overflow:auto;padding:4px;background:var(--raise)}
.shlist.pg{touch-action:pan-y}
/* the view being left, frozen where it was, while the next one slides in */
.shghost{position:absolute;left:0;right:0;pointer-events:none}
.shr{display:flex;align-items:center;gap:2px;border-radius:10px}
.shgo{flex:1;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:center;padding:7px 8px;border:0;border-radius:10px;background:none;text-align:left;color:var(--ink)}
.shgo .sw{grid-row:1/3;width:10px;height:30px;border-radius:999px;background:var(--c);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 18%,transparent)}
.shr.epr .shgo .sw{width:3px;margin:0 3px;border-radius:2px;background:var(--co-t);box-shadow:none}
.shn{font-size:14.5px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shr.epr .shn{font-family:var(--mono);font-weight:500;font-size:12.5px;letter-spacing:.02em}
.shm{font-size:12.5px;line-height:1.3;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shp,.shd{flex:none;width:34px;height:34px;border:0;border-radius:999px;background:none;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.shd{color:var(--mute)}
.sha{flex:none;height:32px;margin-right:4px;padding:0 12px;border:0;border-radius:999px;background:var(--lem);box-shadow:inset 0 0 0 1.5px var(--ink);font-size:13.5px;font-weight:700;white-space:nowrap}
.sha.wide{display:block;width:calc(100% - 8px);height:38px;margin:4px 4px 6px}
.shempty{margin:0;padding:14px 12px;font-size:14px;line-height:1.4;color:var(--mute)}
/* categories fold; a clip opens to show its moments */
.shcat{display:flex;align-items:center;gap:7px;width:100%;margin:8px 0 0;padding:7px 8px 5px;border:0;border-radius:8px;background:none;font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);text-align:left}
.shcat:first-child{margin-top:0}
.shcat svg{flex:none;color:var(--mute);transition:transform .15s}
.shcat[aria-expanded=false] svg{transform:rotate(-90deg)}
.shcat i{flex:1;height:1px;background:var(--line)}
.shcat .cc{text-transform:none;letter-spacing:.02em}
.mt{color:var(--mute)}
/* the chevron keeps to the right edge, whatever sits beside it */
.shr.clr{position:relative;padding-right:30px}
.shcv{position:absolute;right:9px;top:50%;margin-top:-7px;display:flex;color:var(--mute)}
.shcv svg{transform:rotate(-90deg)}
.shgo .sw.empty{background:none;box-shadow:none;border:1.5px dashed color-mix(in srgb,var(--ink) 50%,transparent)}
.shm .ok{display:inline-flex;align-items:center;gap:3px;color:var(--ink);font-weight:600}
/* a clip's own page: the way back and the arrows to the clips above and below, its name, then its moments */
.shpg{padding-bottom:6px}
.shpgbar{display:flex;align-items:center;gap:2px}
.shback{display:inline-flex;align-items:center;gap:2px;height:32px;margin-right:auto;padding:0 12px 0 4px;border:0;border-radius:999px;background:none;font-size:14px;font-weight:600;color:var(--ink)}
.shback svg{transform:rotate(90deg)}
.shstep{flex:none;width:32px;height:32px;border:0;border-radius:999px;background:none;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.shstep[data-shstep="-1"] svg{transform:rotate(180deg)}
.shstep:disabled{opacity:.3;cursor:default}
.shpghd{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px;align-items:center;padding:8px 2px 10px 8px}
.shpghd .sw{align-self:stretch;width:10px;min-height:34px;border-radius:999px;background:var(--c);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 18%,transparent)}
.shpghd .sw.empty{background:none;box-shadow:none;border:1.5px dashed color-mix(in srgb,var(--ink) 50%,transparent)}
.shpgt{min-width:0;display:flex;flex-direction:column;gap:2px}
.shpgk{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.shpgn{margin:0;font-size:17px;font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.shpghd .shm{white-space:normal}
/* where you can change it, its name renames where you tap it, and the category above it is the browser's own list,
   unseen over its label (16px, so a phone doesn't zoom in on it) */
.shpgn .nm{font:inherit;letter-spacing:inherit;background:none;padding:0;border-radius:2px}
.shcats{position:relative;align-self:flex-start;display:inline-flex;align-items:center;gap:2px;margin:-2px 0 -2px -5px;padding:2px 5px;border-radius:6px}
.shcats svg{flex:none;width:12px;height:12px}
.shcats select{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer;font-size:16px;-webkit-appearance:none;appearance:none}
.shcats:has(select:focus-visible){box-shadow:0 0 0 2px var(--ink)}
.shcatnew input{width:100%;height:32px;margin-bottom:2px;padding:0 12px;border:1px solid var(--ink);border-radius:999px;background:var(--paper);font-size:16px;outline:0}
@media (hover:hover){.shpgn .nm:not(:focus):hover{box-shadow:0 1.5px 0 color-mix(in srgb,var(--ink) 35%,transparent)}.shcats:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)}}
.shbody{padding:0 8px 4px 28px}
/* the row you came back to, a clip that just changed, and moments that just went in, light up for a moment */
@keyframes shlit{from{background:var(--flash)}to{background:transparent}}
.shr.lit,.shmo.lit{animation:shlit 1.6s ease-out}
.shmo{display:flex;align-items:flex-start;border-top:1px solid var(--line)}
.shmg{flex:1;min-width:0;display:flex;gap:10px;padding:8px 6px 8px 0;border:0;border-radius:8px;background:none;text-align:left;color:var(--ink)}
.shmg .tm{flex:none;width:38px;font-family:var(--mono);font-size:11px;line-height:19px;color:var(--mute)}
.shmg .wd{flex:1;min-width:0;font-size:13.5px;line-height:19px;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.shmg .k{--hc:var(--c);background:linear-gradient(var(--hc),var(--hc)) no-repeat 0 88%/100% 55%;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.shmg .x{color:color-mix(in srgb,var(--ink) 45%,transparent);text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:var(--ink)}
/* the words of a clip from the recording: not lines of this transcript, so nothing to press */
.shmx{flex:none;width:30px;height:30px;margin-top:3px;border:0;border-radius:999px;background:none;display:flex;align-items:center;justify-content:center;color:var(--mute)}
.shnote,.shhint{margin:0;padding:8px 0;border-top:1px solid var(--line);font-size:13.5px;line-height:1.4}
.shhint{color:var(--mute)}
.shacts{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding-top:9px;border-top:1px solid var(--line)}
.shbtn{flex:none;height:32px;padding:0 14px;border:0;border-radius:999px;background:var(--ink);color:var(--on-ink);font-size:13.5px;font-weight:700;white-space:nowrap}
.shbtn.q{background:var(--raise);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.shtip{flex:1 1 170px;font-size:12.5px;line-height:1.35;color:var(--mute)}
.shdone{flex:none;display:inline-flex;align-items:center;gap:4px;height:32px;margin-right:4px;padding:0 10px;font-size:13px;font-weight:600;color:var(--mute);white-space:nowrap}
/* moments in your own order: the dots drag one to a new place, and Join makes two that meet into one */
.grip{flex:none;display:flex;align-items:center;justify-content:center;width:26px;height:36px;padding:0;border:0;border-radius:8px;background:none;color:color-mix(in srgb,var(--ink) 42%,transparent);cursor:grab;touch-action:none}
[data-sort]{position:relative}
[data-sort].lift{z-index:8;background:var(--raise);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 13%,transparent),0 18px 34px -14px rgba(14,14,14,.55)}
[data-sort].shift{transition:transform .16s ease}
body.sorting .join{visibility:hidden}
.join{position:absolute;z-index:3;height:22px;padding:0 10px;border:1.5px solid var(--ink);border-radius:999px;background:var(--raise);color:var(--ink);font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.shms .grip{position:absolute;left:-27px;top:5px;width:24px;height:30px}
.shmo.lift{border-radius:8px}
.shmo .join{right:40px;bottom:-11px}
.shdone.wide{display:flex;justify-content:center;height:38px;margin:4px 4px 6px}
@media (hover:hover){.grip:hover{background:var(--soft2);color:var(--ink)}.join:hover{background:var(--lem)}}
@media (hover:hover){.shgo:hover,.shp:hover,.shd:hover,.shtog:hover{background:var(--soft)}.sht:not([aria-selected=true]):hover{color:var(--ink)}.sha:hover{background:#ffd900}.shcat:hover,.shmg:hover,.shmx:hover{background:var(--soft2)}.shback:hover,.shstep:not(:disabled):hover{background:var(--soft)}.shbtn:hover{background:var(--inkh)}.shbtn.q:hover{background:var(--lem)}}
@media (min-width:1024px){.acol{max-height:calc(100vh - 96px)}}
/* clips */
.clipsw{padding:24px 28px 100px}
.chead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 24px}
.h1c{margin:0;font-family:var(--disp);font-weight:400;font-size:clamp(44px,5.4vw,64px);line-height:.93;letter-spacing:-.015em}
.csum{margin:12px 0 0;font-family:var(--mono);font-weight:500;font-size:12px;line-height:16px;letter-spacing:.04em;text-transform:uppercase}
.cacts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding-bottom:2px}
.cacts .pill-tang,.cacts .pill-ink{height:46px}
.cacts .pill-tang{padding:0 18px 0 8px}
.cacts .pill-tang .ic{width:28px;height:28px}
.cset{margin-top:18px;border-top:2px solid var(--ink);padding-top:12px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 30px}
.grp{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.lbl{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.lbl.dark{color:var(--ink)}
.fmt{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 12px;border:1px solid var(--line);border-radius:999px;background:var(--raise);color:var(--mute);font-size:14px;font-weight:600}
.fmt[aria-pressed=true]{border:2px solid var(--ink);background:var(--lem);color:var(--ink)}
.fmt i{display:inline-block;border-radius:2px;background:currentColor}
.fmt .fv{width:9px;height:16px}.fmt .fs{width:13px;height:13px}.fmt .fw{width:18px;height:10px}
.selw{position:relative;display:inline-flex;align-items:center}
.selw select{appearance:none;-webkit-appearance:none;height:36px;padding:0 36px 0 14px;border:1px solid var(--line);border-radius:999px;background:var(--raise);font-size:14px;font-weight:600}
.selw svg{position:absolute;right:12px;pointer-events:none}
/* a switch (the button), not the colour mark in the corner list, which shares the name */
button.sw{position:relative;flex:none;width:46px;height:28px;padding:0;border:2px solid var(--ink);border-radius:999px;background:var(--raise)}
button.sw i{position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:999px;background:var(--ink);transition:left .15s}
button.sw[aria-checked=true]{background:var(--lem)}
button.sw[aria-checked=true] i{left:21px}

.cstat{margin:0 0 0 auto;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.zexp{margin:10px 0 0;font-size:14px;line-height:1.45;color:color-mix(in srgb,var(--ink) 72%,transparent);max-width:760px}
.zexp b{color:var(--ink)}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:44px 40px;padding-top:40px;align-items:start}
.card{position:relative;min-width:0;background:var(--raise);border:3px solid var(--raise);border-radius:14px;box-shadow:var(--die)}
.cprev{position:relative;aspect-ratio:9/16;border-radius:10px;overflow:hidden;background:var(--bg);container-type:inline-size}
.cst{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}

.cst .hd{width:33cqw;height:33cqw;border-radius:999px;background:rgba(255,255,255,.1)}
.cst .bd{width:79cqw;height:62cqw;border-radius:40cqw 40cqw 0 0;background:rgba(255,255,255,.1);margin-top:4cqw}
.cprev.play .cst .hd,.cprev.play .cst .bd{background:rgba(255,255,255,.17)}
.cprev .kick2{position:absolute;top:14px;left:12px;background:#fff;padding:4px 8px 3px;border-radius:999px;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.04em;text-transform:uppercase}

.ccap{position:absolute;left:6%;right:6%;top:50%;margin:0;text-align:center;font-family:var(--disp);font-size:10.5cqw;line-height:1.02;text-transform:uppercase;color:#fff;text-shadow:2px 0 0 #0E0E0E,-2px 0 0 #0E0E0E,0 2px 0 #0E0E0E,0 -2px 0 #0E0E0E,0 4px 0 #0E0E0E}

.ntag{position:absolute;left:10px;bottom:14px;max-width:calc(100% - 20px);background:#fff;border-radius:8px;padding:9px 12px 10px;box-shadow:0 0 0 1px rgba(14,14,14,.08)}
.nm{display:inline;font-family:var(--disp);font-weight:400;font-size:19px;line-height:1.1;letter-spacing:-.01em;background:linear-gradient(var(--c),var(--c)) no-repeat 0 88%/100% 62%;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .08em;outline:0;cursor:text;-webkit-user-select:text;user-select:text}
.nm:focus{box-shadow:0 2px 0 var(--ink)}
.rbar{position:absolute;left:0;top:0;height:5px;background:var(--tang);transition:width .15s linear}
.pbar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.18);display:none}
.pbar i{display:block;height:100%;width:0;background:var(--lem)}
.cprev.play .pbar{display:block}
.cfoot{padding:12px 6px 6px}
.crow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 8px;min-height:28px}
.cm{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.chip{flex:none;display:inline-flex;align-items:center;padding:4px 9px 3px;border-radius:999px;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;background:var(--ink);color:var(--on-ink)}
.chip.rendering{background:var(--tang);color:var(--ink)}
.cbtns{display:flex;align-items:center;gap:2px;margin:8px 0 0 -6px}
.cbtns .bb{height:36px;font-size:14px;padding:0 12px 0 10px}
.cbtns .morew{margin-left:auto}
.cbtns .bb.icon{width:36px;padding:0}
/* Mark ready, where the render chip was once it has rendered */
.rdy{flex:none;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px 0 9px;border:1px solid var(--line);border-radius:999px;background:var(--raise);color:var(--ink);font-size:13px;font-weight:700;white-space:nowrap}
.rdy i{width:12px;height:12px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--ink)}
.rdy.on{border:2px solid var(--ink);background:var(--lem);padding:0 10px 0 8px}
/* a clip named before it has moments */
.card.empty .cprev{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:0 10px 40px;background:var(--soft3)}
.card.empty .cprev .bb{position:relative;z-index:1;padding:0 16px}
.card.empty .cprev::after{content:'';position:absolute;inset:8px;border:2px dashed color-mix(in srgb,var(--ink) 20%,transparent);border-radius:6px;pointer-events:none}
.card.empty .kick2{box-shadow:0 0 0 1px var(--line)}
.cempty{margin:0;text-align:center;font-family:var(--mono);font-weight:500;font-size:11px;line-height:1.4;letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
/* categories: a header across the grid */
.cgh{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:0 0 -18px;font-family:var(--mono);font-weight:500;font-size:12px;line-height:16px;letter-spacing:.05em;text-transform:uppercase}
.cgh i{flex:1;height:1px;background:var(--line)}
.cgh .cc{text-transform:none;letter-spacing:.02em}
/* the ⋯ menu on a card */
.cardpop{left:auto;right:0}
.pop.up{top:auto;bottom:calc(100% + 8px)}
.pop.down{bottom:auto;top:calc(100% + 8px)}
.cardpop .it .rd{flex:none;width:14px;height:14px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--ink);display:flex;align-items:center;justify-content:center}
.cardpop .it[aria-checked=true] .rd{background:radial-gradient(circle,var(--ink) 0 3.5px,transparent 4px)}
.cardpop .it .rd.plus{box-shadow:none}
.pop .it.danger{color:var(--red-t)}
.pop .it .itsub{display:block;margin-top:2px;font-size:12.5px;font-weight:400;line-height:1.35;color:var(--mute)}
.catform{display:flex;gap:6px;padding:4px}
.catform input{flex:1;min-width:0;height:38px;padding:0 12px;border:1px solid var(--line);background:var(--paper);border-radius:999px;outline:0}
.catform input:focus{border-color:var(--ink)}
/* adding clips by name */
.newc.form{grid-column:span 2;min-height:0;align-self:start;align-items:stretch;justify-content:flex-start;gap:12px;padding:18px;border-style:solid;text-align:left}
.newc.form textarea{width:100%;min-height:118px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper);font:inherit;font-size:15px;line-height:1.45;resize:vertical;outline:0}
.afin{height:38px;padding:0 14px;border:1px solid var(--line);background:var(--paper);border-radius:999px;font-size:15px;outline:0}
.newc.form textarea:focus,.afin:focus{border-color:var(--ink)}
.afrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.snote{position:absolute;top:-22px;right:-26px;z-index:3;width:148px;padding:14px 12px 12px;background:var(--lem);border-radius:3px;box-shadow:0 0 0 1px rgba(14,14,14,.1),0 12px 18px -10px rgba(14,14,14,.55)}
.snote::before{content:'';position:absolute;top:-9px;left:50%;width:56px;height:18px;margin-left:-28px;background:rgba(255,255,255,.75);box-shadow:0 0 0 1px rgba(14,14,14,.08)}
.snote p{margin:0;font-family:var(--mark);font-size:15px;line-height:1.18}
.newc{min-height:300px;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:0 16px;border:2px dashed var(--ink);border-radius:12px;background:var(--raise);text-align:center}
.newc .pl{width:52px;height:52px;border-radius:999px;background:var(--ink);color:var(--on-ink);display:flex;align-items:center;justify-content:center}
.newc b{font-family:var(--disp);font-weight:400;font-size:22px;line-height:1}
.newc small{font-family:var(--mono);font-weight:500;font-size:11px;line-height:1.4;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
@media (hover:hover){.fmt[aria-pressed=false]:hover{border-color:var(--ink);color:var(--ink)}.newc:not(.form):hover{background:var(--lemt)}.rdy:not(.on):hover{border-color:var(--ink)}.rdy.on:hover{background:#ffd900}}

/* the episode: what stays in, in the order it plays */
.epw{padding:24px 28px 100px}
.stk.co{background:var(--co);color:#fff}
.csum .csumb{margin:0 0 0 10px;padding:0 0 1px;border:0;border-bottom:2px solid var(--ink);background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;white-space:nowrap}
.cacts .pill-ink svg{flex:none}
/* Play and Pause take the same room, so nothing beside the button moves when it changes */
.swap{display:inline-grid}
.swap>span{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.swap>.b,.on>.swap>.a{visibility:hidden}
.on>.swap>.b{visibility:visible}
.apv{flex:none;display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 18px 0 12px;border:2px solid var(--ink);border-radius:999px;background:var(--raise);color:var(--ink);font-size:15px;font-weight:700;white-space:nowrap}
.apv i{width:16px;height:16px;border-radius:999px;box-shadow:inset 0 0 0 2px var(--ink)}
.apv[aria-pressed=true]{background:var(--lem);padding-left:16px}
.apv[aria-pressed=true] i{display:none}
.apv span{display:inline-flex;align-items:center;gap:6px}
.apvtip{flex:1 1 260px;font-size:14px;line-height:1.4;color:color-mix(in srgb,var(--ink) 72%,transparent)}
.eset .lnk{font-size:15px}
.epgrid{display:grid;grid-template-columns:minmax(0,1fr) clamp(320px,31vw,460px);gap:40px;padding-top:24px;align-items:start}
.epcol{min-width:0}
.ecoach{display:flex;align-items:flex-start;gap:6px;margin:0 0 4px 12px;font-family:var(--mark);font-size:18px;line-height:1.1;color:var(--co-t);transform:rotate(-2deg);transform-origin:0 100%;pointer-events:none}
.ecoach svg{flex:none;margin-top:4px}
.ecoach.gone{visibility:hidden}
.eplist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;max-width:880px}
.epp{display:grid;grid-template-columns:26px 30px minmax(0,1fr);column-gap:8px;padding:10px 14px 14px 6px;background:var(--raise);border-radius:14px;box-shadow:var(--die)}
.epp::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--co-t)}
.epp .grip{grid-column:1;grid-row:1;margin-top:1px}
.epn{grid-column:2;grid-row:1;padding-top:8px;font-family:var(--disp);font-size:24px;line-height:1;color:var(--co-t);text-align:center}
.epmain{grid-column:3;grid-row:1;min-width:0}
.ephd{display:flex;align-items:center;flex-wrap:wrap;gap:2px 12px;min-height:38px}
.eptm{font-family:var(--mono);font-weight:500;font-size:12.5px;letter-spacing:.04em;white-space:nowrap}
.epmeta{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.epacts{margin-left:auto;display:flex;align-items:center;gap:2px}
.epacts .bb{height:36px;padding:0 12px;font-size:14px}
.epacts .bb.icon{width:36px;padding:0}
.epacts .bb[aria-expanded=true]{background:var(--lem)}
.eptx{margin:2px 0 0;padding-right:4px;font-size:16px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.epp.open .eptx{display:block}
.eptx .who2{margin-right:6px;font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.eptx .x{color:color-mix(in srgb,var(--ink) 45%,transparent);text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:var(--ink)}
.eptx .now{box-shadow:0 3px 0 var(--ink)}
.epmore{margin-top:6px;padding:0 0 1px;border:0;border-bottom:2px solid var(--line);background:none;font-size:13.5px;font-weight:600}
.epnotes{list-style:none;margin:10px 0 0;padding:9px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.4}
.epnotes li{display:flex;align-items:flex-start;gap:4px}
.epnotes b{flex:none;margin-right:2px}
.epnotes .nx{flex:none;width:24px;height:22px;margin-left:auto;padding:0;border:0;border-radius:999px;background:none;color:var(--mute);display:flex;align-items:center;justify-content:center}
.epp.playing{box-shadow:0 0 0 2px var(--co-t),0 10px 18px -10px rgba(14,14,14,.45)}
.epp .join{left:50%;bottom:-19px;margin-left:-26px}
.eppop{left:auto;right:0}
.epside{position:sticky;top:84px;display:flex;flex-direction:column;gap:16px;min-width:0;padding-top:4px}
.epbar{flex:1;position:relative;display:flex;gap:3px;height:8px;cursor:pointer;touch-action:none}
.epbar::before{content:'';position:absolute;left:0;right:0;top:-12px;bottom:-12px}
.epbar i{position:relative;min-width:3px;border-radius:999px;background:color-mix(in srgb,var(--co-t) 18%,transparent);overflow:hidden}
.epbar b{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--co-t)}
.epdl{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px 0 12px}
.epdlnote{margin:-8px 0 0;font-size:13px;line-height:1.4;color:var(--mute)}
.epempty{max-width:560px;margin:34px 0 0;padding:26px 26px 24px;border:2px dashed var(--ink);border-radius:14px}
.epempty b{display:block;font-family:var(--disp);font-weight:400;font-size:26px;line-height:1}
.epempty p{margin:10px 0 18px;font-size:16px;line-height:1.5}
/* notes left outside every moment, which the current version takes anywhere on the video */
.epother{max-width:880px;margin:22px 0 0;padding:12px 16px 14px;border-radius:14px;background:var(--raise);box-shadow:var(--die)}
.epother h3{margin:0 0 8px;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.epother .epnotes{margin:0;padding:0;border:0}
.epother .eptm{margin-right:8px}
.epdl:disabled{opacity:.6;cursor:progress}
@media (hover:hover){.epnotes .nx:hover{background:var(--soft2);color:var(--ink)}.epmore:hover{border-bottom-color:var(--ink)}.apv[aria-pressed=false]:hover{background:var(--lemt)}.apv[aria-pressed=true]:hover{background:#ffd900}.csum .csumb:hover{color:var(--co-t);border-bottom-color:var(--co-t)}}

/* toast */
#toast{position:fixed;left:50%;bottom:24px;z-index:60;display:flex;align-items:center;gap:6px;width:max-content;max-width:min(calc(100vw - 32px),760px);padding:8px 8px 8px 18px;border-radius:999px;background:var(--toast);color:#fff;font-size:15px;font-weight:600;box-shadow:0 14px 28px -14px rgba(0,0,0,.6);transform:translate(-50%,140%);opacity:0;transition:transform .2s,opacity .2s;pointer-events:none}
#toast.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
#toast span{padding:6px 6px 6px 0;line-height:1.3}
#toast button{flex:none;height:34px;padding:0 14px;border:0;border-radius:999px;background:var(--lem);color:#0E0E0E;font-weight:700;white-space:nowrap}
#toast button.q{background:transparent;color:var(--lem)}
/* Back to playing: shows while something plays and you have scrolled the transcript away from it */
#follow{position:fixed;left:50%;bottom:24px;z-index:55;display:flex;align-items:center;gap:8px;height:42px;padding:0 18px 0 14px;border:0;border-radius:999px;background:var(--ink);color:var(--on-ink);font-size:15px;font-weight:700;white-space:nowrap;transform:translateX(-50%);box-shadow:0 14px 28px -14px rgba(0,0,0,.6);cursor:pointer}
#follow[hidden]{display:none}
#follow svg{color:var(--lem)}

/* narrower screens */
@media (min-width:1200px){:root{--lw:100px}}
@media (max-width:1199px){
  .ln{grid-template-columns:var(--tsw) minmax(0,1fr)}
  .lab{grid-column:2;grid-row:1;flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:10px;text-align:left;padding:4px 0 0}
  .row.inep::before{left:-12px}
  .ts{grid-column:1;grid-row:2}
  .tx{grid-column:2;grid-row:2}
  .search{margin-left:0}
}
@media (max-width:1023px){
  .pick{grid-template-columns:minmax(0,1fr);gap:18px;padding:14px 24px 120px}
  .acol{position:static;order:-1;max-width:620px;width:100%;margin:0 auto}
  .shelf{min-height:0}
  .shtog{display:flex}
  .shelf:not(.open) .shlist{display:none}
  .shelf:not(.open) .shtabs{border-bottom:0}
  .shlist{max-height:50vh}
  .vcard.pip{position:fixed;top:77px;right:12px;width:min(46vw,300px);z-index:45}
  /* the Episode page's player lives below its list, so it floats at the bottom, clear of the header and its buttons */
  .epside .vcard.pip{top:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  body.eppip #toast{bottom:calc(min(46vw,300px) * .5625 + 40px)}
  .epgrid{grid-template-columns:minmax(0,1fr);gap:22px;padding-top:18px}
  .epside{position:static;max-width:620px;width:100%;margin:0 auto;padding-top:0}
  .eplist{max-width:none}
}
@media (max-width:699px){
  :root{--tsw:46px}
  .row.later{contain-intrinsic-size:auto 70px}
  #hdr{position:static}
  .hin{flex-wrap:wrap;gap:10px 8px;padding:10px 16px;min-height:0}
  .wm{font-size:20px}
  .vsep{display:none}
  .logo{order:1}
  .ep{order:2;flex:1 1 0}
  .ttl{display:block}
  .ttl{font-size:14px}
  .av{order:3;width:36px;height:36px;min-width:0;padding:0;font-size:13px}
  .brk{display:block;order:4;flex-basis:100%;height:0}
  .tabs{order:5;flex:1;margin:0;gap:2px}
  .tab{height:36px;padding:0 12px;font-size:14px}
  .share{order:6;margin:0;height:36px;padding:0 6px}
  .share .btxt{display:none}
  .upload{order:2;height:38px}
  .upload .btxt{font-size:14px}
  .home{padding:20px 16px 70px}
  .wall{gap:22px}
  .pick{padding:12px 16px 200px}
  .tx{font-size:17px;padding-right:2px}
  .search{height:42px}
  #ribbon{flex-wrap:nowrap;gap:10px;font-size:10.5px;min-height:30px;padding:4px 12px}.rbx{display:none}
  /* the header stays in reach on an episode's pages, so the tabs and its settings are a glance away mid-transcript */
  #app:not([data-view=home]) #hdr{position:sticky}
  html{scroll-padding-top:calc(var(--hdrh,0px) + 8px)}
  .h1c{font-size:32px}
  .rule{margin:4px 0 16px}
  .etag b{font-size:20px}
  #dock{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));top:auto!important;align-items:stretch;gap:8px;z-index:40;background:var(--raise);border-radius:22px;padding:10px 10px 8px;box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 14%,transparent),0 -8px 28px -10px rgba(14,14,14,.35)}
  .bar{transform:none;border-radius:0;flex-wrap:wrap;row-gap:6px;padding:0 0 0 6px;box-shadow:none;background:transparent}
  .bspace{display:block;flex:1;order:3}
  .bbrk{display:block;flex-basis:100%;height:0;order:6}
  .dur{order:1}.cutpill{order:2}#bPlay{order:4}#bX{order:5}#bMake{order:7;flex:1}.addw{order:8}.notew{order:9}.bsep{display:none}
  .editing{order:-3;align-self:flex-start}.coach2{order:-2}.minip{order:-1}
  .minip{display:flex;gap:3px;height:8px;margin:0 6px}
  .minip i{height:100%;border-radius:999px;background:var(--lem);box-shadow:inset 0 0 0 1.5px var(--ink)}
  .minip b{flex:none;width:6px}
  .coach2{margin:0 4px;padding:0;transform:none;font-size:17px;max-width:none}
  .coach{font-size:18px}
  .pop{top:auto;bottom:calc(100% + 8px);left:auto;right:0}
  /* on a phone, How it works is a sheet at the bottom of the screen */
  .helpw{order:3}
  .helpb{width:36px;height:36px;font-size:15px}
  .pop.helppop{position:fixed;top:auto;bottom:calc(10px + env(safe-area-inset-bottom,0px));left:10px;right:10px;width:auto;max-width:none;z-index:50;border-radius:22px;padding:10px 10px 14px}
  .notepop{min-width:0;width:calc(100vw - 40px)}
  .clipsw,.epw{padding:18px 16px 90px}
  .epp{grid-template-columns:24px 22px minmax(0,1fr);column-gap:6px;padding:8px 10px 12px 2px}
  .epn{font-size:19px;padding-top:9px}
  .ephd{min-height:36px;column-gap:10px}
  .epacts{order:3;flex-basis:100%;margin:0 0 0 -8px}
  .epacts .bb{padding:0 10px;font-size:13.5px}
  .epacts .lg,.cacts .lg{display:none}
  .vcard.pip{top:calc(var(--hdrh,0px) + 8px)}
  .eptx{font-size:15px}
  .epdlnote{margin-top:-10px}
  .ecoach{font-size:16px;margin-left:8px}
  .cset{gap:14px 20px}
  .cstat{margin:0}
  .cgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px;padding-top:30px}
  .nm{font-size:15px}
  .ntag{left:6px;bottom:8px;padding:7px 9px 8px;max-width:calc(100% - 12px)}
  .cprev .kick2{top:8px;left:8px;font-size:10px}
  .cbtns .bb{padding:0 8px;font-size:13px}
  .cbtns .lg,.cprev .lg{display:none}
  /* who marked it ready stays on a phone, a long name cut short */
  .rdy .lg{display:inline-block;max-width:5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
  .card.empty .cprev .bb{height:34px;padding:0 12px;font-size:13px}
  .rdy{height:26px;font-size:12px;padding:0 9px 0 8px}
  .cgh{margin-bottom:-10px}
  .cm{font-size:10.5px}
  .chip{font-size:10px;padding:3px 7px 2px}
  .crow{flex-wrap:wrap;gap:6px}
  .snote{width:118px;right:-8px;top:-18px;padding:12px 10px 10px}
  .snote p{font-size:13px}
  .newc{min-height:220px}
  #toast{flex-wrap:wrap;justify-content:flex-end;border-radius:18px;padding:10px 10px 10px 16px;width:calc(100vw - 24px)}
  #toast span{flex:1 1 100%;padding:2px 0 4px}
}
@media (max-width:380px){.cbtns [data-cplay]{width:36px;padding:0}.cbtns [data-cplay] span{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* the episode's name in the header opens its settings */
button.ep{height:40px;margin:0 -2px 0 -8px;padding:0 10px 0 8px;border:0;border-radius:999px;background:none;color:inherit;text-align:left}
button.ep .gear{flex:none;display:inline-flex;color:var(--mute)}
button.ep:disabled{cursor:default}
button.ep:disabled .gear{display:none}
@media (hover:hover){button.ep:not(:disabled):hover{background:var(--soft)}button.ep:not(:disabled):hover .gear{color:var(--ink)}}

/* a speaker's name above their lines: click it to fix who says that line */
.row .whow{display:block;height:13px;margin:10px 0 6px calc(var(--lw) + var(--tsw))}
.who{position:relative;top:-2px;display:inline-block;margin:0 0 0 -6px;padding:2px 6px 1px;border:0;border-radius:6px;background:none;font-family:var(--mono);font-weight:500;font-size:11.5px;line-height:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.who:disabled{cursor:default}
.who[aria-expanded=true]{background:var(--lem)}
@media (hover:hover){.who:not(:disabled):hover{background:var(--soft)}}
.whopop{min-width:240px}
.whopop .it .rd{flex:none;width:14px;height:14px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--ink)}
.whopop .it[aria-checked=true] .rd{background:radial-gradient(circle,var(--ink) 0 3.5px,transparent 4px)}
.pophint{margin:6px 10px 6px;padding-top:8px;border-top:1px solid var(--line);font-size:13px;line-height:1.45;color:var(--mute)}
.pophint .lnk{font-size:13px}

/* sheets: Settings and Share slide in over a dimmed page */
#scrim{position:fixed;inset:0;z-index:50;background:var(--scrim);opacity:0;transition:opacity .2s}
#scrim.show{opacity:1}
.sheet{position:fixed;top:0;right:0;bottom:0;z-index:55;display:flex;flex-direction:column;width:min(460px,100vw);background:var(--raise);box-shadow:-24px 0 48px -24px rgba(14,14,14,.55);transform:translateX(104%);transition:transform .22s ease;outline:0}
.sheet.show{transform:none}
.shhd{flex:none;display:flex;align-items:flex-start;gap:12px;padding:20px 18px 16px 26px;border-bottom:2px solid var(--ink)}
.shhd h2{margin:0;font-family:var(--disp);font-weight:400;font-size:30px;line-height:1;letter-spacing:-.01em}
.shhd p{margin:8px 0 0;font-size:14px;line-height:1.35;color:var(--mute)}
.shx{flex:none;margin-left:auto;width:40px;height:40px;padding:0;border:1.5px solid var(--line);border-radius:999px;background:var(--raise);display:flex;align-items:center;justify-content:center}
.shbd{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:4px 26px 44px}
.sec{padding:20px 0 22px;border-top:1px solid var(--line)}
.sec:first-child{border-top:0}
.sec h3{margin:0 0 12px;font-family:var(--mono);font-weight:500;font-size:11.5px;line-height:14px;letter-spacing:.05em;text-transform:uppercase}
.sec .hint{margin:8px 0 0;font-size:13.5px;line-height:1.45;color:var(--mute)}
.sec .lead{margin:0 0 14px;font-size:15px;line-height:1.45}
.fin{display:block;width:100%;height:44px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper);font-size:16px;outline:0}
.fin:focus{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.file{display:flex;align-items:center;gap:12px}
.fic{flex:none;width:42px;height:42px;border-radius:10px;background:var(--soft);display:flex;align-items:center;justify-content:center}
.file b{display:block;font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.file small{display:block;margin-top:2px;font-size:13px;color:var(--mute)}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:14px}
.bb.q2{height:38px;padding:0 16px;box-shadow:inset 0 0 0 1.5px var(--ink);font-size:14.5px}
.acts .lnk{font-size:14.5px}
.swrow{display:flex;align-items:center;gap:12px;margin-top:16px}
.swl{font-size:15px;font-weight:600}
.busy{display:flex;flex-direction:column;gap:10px;padding:4px 0}
.busy .bl{font-size:14.5px;line-height:1.4}
.prog2{position:relative;height:8px;border-radius:999px;background:color-mix(in srgb,var(--ink) 10%,transparent);box-shadow:inset 0 0 0 1.5px var(--ink);overflow:hidden}
.prog2 i{position:absolute;left:0;top:0;bottom:0;background:var(--tang);box-shadow:inset 0 0 0 1.5px var(--ink);border-radius:999px;transition:width .1s linear}
.prog2 i.ind{width:40%;animation:ind .9s ease-in-out infinite alternate}
@keyframes ind{from{left:0}to{left:60%}}
.spkrow{display:flex;align-items:center;gap:12px;margin-top:8px}
.spkrow .fin{flex:1;min-width:0}
.spkrow .cnt{flex:none;width:62px;font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--mute);text-align:right}
.ask{padding:16px 16px 18px;border-radius:14px;background:var(--lem);box-shadow:inset 0 0 0 2px var(--ink)}
.ask h3{margin:0 0 6px;font-family:var(--disp);font-weight:400;font-size:22px;line-height:1;letter-spacing:-.01em;text-transform:none}
.ask p{margin:0 0 6px;font-size:14px;line-height:1.45}
.ask .fin{border-color:rgba(14,14,14,.35)}
.ask .cnt{color:rgba(14,14,14,.7)}
.ask .bb.primary{margin-top:14px}

.danger h3{color:var(--red-t)}
.delrow{display:flex;gap:8px;margin-top:12px}
.delrow .fin{flex:1;min-width:0}
.bdel{flex:none;height:44px;padding:0 18px;border:0;border-radius:999px;background:#c62a1d;color:#fff;font-weight:700}
.bdel:disabled{opacity:.35;cursor:default}
.linkrow{display:flex;gap:8px}
.linkbox{flex:1;min-width:0;display:flex;align-items:center;height:44px;padding:0 14px;border-radius:12px;background:var(--soft3);font-family:var(--mono);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.linkrow .bb.primary{height:44px;padding:0 18px}
.cp>.swap>.a{visibility:hidden}
.cp>.swap>.b{visibility:visible}

.seeas{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin-top:18px;padding:14px 16px;border:2px solid var(--ink);border-radius:14px;background:var(--raise);color:var(--ink);font-size:15.5px;font-weight:700;text-align:left}
.plist{list-style:none;margin:0;padding:0}
.plist li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.plist li:first-child{border-top:0;padding-top:0}
.plist .ava{flex:none;width:38px;height:38px;border-radius:999px;background:var(--ink);color:var(--on-ink);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.plist .ava.inv{background:var(--raise);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.plist .pn{flex:1;min-width:0}
.plist b{display:block;font-size:15px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plist small{display:block;font-size:13px;line-height:1.35;color:var(--mute)}
.plist .role{flex:none;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.sec h4.sub{margin:18px 0 8px;font-size:15px;font-weight:700}
.invite{display:flex;flex-wrap:wrap;gap:8px}
.invite .fin{flex:1 1 100%}
.invite .selw{flex:1}
.invite .selw select{width:100%;height:44px;border-radius:12px}
.invite .bb.primary{height:44px;padding:0 22px}
@media (hover:hover){.shx:hover,.seeas:hover{background:var(--lem)}.bb.q2:hover{background:var(--lem)}.bdel:not(:disabled):hover{background:#a82215}}

/* what your client sees first: the password, if there is one, and their name */

/* after a new video: one line naming the clips to check, and the old cut only when you ask for it */
.recut{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;max-width:760px;margin:0 0 12px calc(var(--lw) + var(--tsw) - 60px);padding:10px 14px;border-radius:14px;background:var(--raise);box-shadow:inset 0 0 0 1.5px var(--tang);font-size:14.5px;line-height:1.4}
.recut .rcm{flex:1 1 240px}
.rchip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 10px;border:1px solid var(--line);border-radius:999px;background:var(--raise);color:var(--ink);font-size:13.5px;font-weight:600;white-space:nowrap}
.rchip i{width:14px;height:8px;border-radius:999px;background:var(--c);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 22%,transparent)}
.recut .lnk{margin-left:auto;font-size:14px}

@media (hover:hover){.rchip:hover{border-color:var(--ink)}}

/* a client: no settings or sharing, no making, renaming or deleting clips, and Add to is the main button */

.nm.ro{cursor:default;-webkit-user-select:none;user-select:none}

/* the thumbnail on the wall: whoever is talking in the chosen frame is lit, and close frames are close */

@media (pointer:coarse){body.sheeted{overflow:hidden}}
@media (max-width:1199px){.recut{margin-left:0}}
@media (max-width:699px){
  .sheet{top:auto;left:0;width:auto;max-height:calc(100vh - 48px);border-radius:22px 22px 0 0;transform:translateY(104%);box-shadow:0 -18px 40px -20px rgba(14,14,14,.5)}
  .shhd{padding:16px 14px 12px 18px}
  .shhd h2{font-size:26px}
  .shbd{padding:0 18px calc(28px + env(safe-area-inset-bottom,0px))}
  button.ep{gap:6px}
  button.ep .no{display:none}
  
  .whopop{top:calc(100% + 6px);bottom:auto;left:0;right:auto}
  .recut{font-size:14px}
}
/* the players' own controls: speed, mute, full screen */
.ctrl{gap:10px}
.ci{flex:none;width:34px;height:34px;padding:0;border:0;border-radius:999px;background:none;color:var(--ink);display:flex;align-items:center;justify-content:center}
.ctrl .ci+.ci{margin-left:-6px}
.spw{flex:none}
.spd{height:30px;min-width:42px;padding:0 9px;border:1.5px solid var(--line);border-radius:999px;background:var(--raise);color:var(--ink);font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.02em}
.spd.on{background:var(--lem);border-color:var(--ink)}
.spdpop{left:auto;right:0;min-width:214px}
.spdpop .it{justify-content:space-between;padding:9px 12px;font-family:var(--mono);font-weight:500;font-size:14px}
.spdpop .it small{display:inline;margin:0}
.spdpop .it[aria-checked=true]{background:var(--lem)}
/* the clips under the scrubber, clear of the playhead */
/* the clips under the scrubber, one thin row clear of the playhead; each band answers a press across a tall column */
.scrub .mk{position:absolute;left:0;right:0;top:14px;height:5px}
.scrub .mk i{position:absolute;top:0;height:5px;border-radius:2px;background:var(--c);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 30%,transparent);cursor:pointer}
.scrub .mk i::before{content:'';position:absolute;top:-6px;bottom:-14px;left:calc(-1 * var(--pl,0px));right:calc(-1 * var(--pr,0px))}
.scrub .mk i:hover,.scrub .mk i.on{top:-1px;height:7px;box-shadow:0 0 0 1.5px var(--ink);z-index:1}
.stip{position:absolute;bottom:calc(100% + 14px);transform:translateX(-50%);padding:5px 9px 4px;border-radius:8px;background:var(--ink);color:var(--on-ink);font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.03em;white-space:nowrap;pointer-events:none;z-index:3}
body.fulled{overflow:hidden}
.player.full{position:fixed;inset:0;z-index:58;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;margin:0;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));background:#0E0E0E;color:#fff}
.player.full .vslot,.player.full .ctrl{width:min(100%,calc((100vh - 100px) * 16 / 9))}
.player.full .vslot{height:auto!important}
.player.full .vcard{position:relative!important;inset:auto!important;width:auto!important;border-color:#0E0E0E;box-shadow:none}
.player.full .ctrl{padding:0}
.player.full .playb{background:#fff}
.player.full .scrub{background:rgba(255,255,255,.22)}
.player.full .scrub .f{background:rgba(255,255,255,.55)}
.player.full .scrub .kn{background:#fff;box-shadow:0 0 0 3px #0E0E0E}
.player.full .scrub .mk i{box-shadow:0 0 0 1px rgba(0,0,0,.6)}
.player.full .scrub .mk i:hover,.player.full .scrub .mk i.on{box-shadow:0 0 0 1.5px #fff}
.player.full .ci{color:#fff}
.player.full .spd{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.player.full .spd.on{background:var(--lem);color:var(--ink);border-color:var(--lem)}
.player.full .epbar i{background:rgba(255,255,255,.2)}
@supports (height:100dvh){.player.full .vslot,.player.full .ctrl{width:min(100%,calc((100dvh - 100px) * 16 / 9))}}
/* Ask */
.search{cursor:text}
.askb{flex:none;height:32px;margin-right:-11px;padding:0 15px;border:1.5px solid var(--ink);border-radius:999px;background:var(--raise);color:var(--ink);font-size:14px;font-weight:700}
.askb.on{background:var(--ink);color:var(--on-ink)}
.askb.cue{background:var(--lem)}
.search.live{position:sticky;top:calc(var(--hdrh,0px) + 10px);z-index:25;background:var(--paper);box-shadow:0 0 0 10px var(--paper)}
.qnav{flex:none;display:flex;gap:2px;margin-right:-4px}
.qnav[hidden]{display:none}
.qstep{width:30px;height:30px;padding:0;border:0;border-radius:999px;background:none;color:var(--ink);display:flex;align-items:center;justify-content:center}
.row.qcur .w.m{background:var(--lemt2)}
.ah.cur{box-shadow:inset 0 0 0 2px var(--ink)}
.askp{margin:10px 0 0 calc(var(--lw) + var(--tsw) - 60px);max-width:760px;padding:10px 10px 10px 16px;border-radius:20px;background:var(--raise);box-shadow:0 0 0 1px var(--line),0 12px 26px -20px rgba(14,14,14,.5)}
.askh{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:34px}
.askh b{font-size:15.5px;line-height:1.3}
.askx{flex:none;width:34px;height:34px;padding:0;border:0;border-radius:999px;background:none;color:var(--ink);display:flex;align-items:center;justify-content:center}
.askn{margin:2px 6px 10px 0;font-size:14.5px;line-height:1.45;color:var(--mute)}
.askeg{display:flex;flex-wrap:wrap;gap:8px;padding:0 6px 4px 0}
.chipq{height:34px;padding:0 14px;border:1.5px solid var(--line);border-radius:999px;background:var(--raise);color:var(--ink);font-size:14px;font-weight:600}
.askp .prog2{margin:8px 6px 8px 0}
.askl{position:relative;list-style:none;margin:2px 0 0 -10px;padding:4px;display:grid;gap:6px;max-height:min(52vh,460px);overflow-y:auto;overscroll-behavior:contain}
.ah{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px;border-radius:14px;background:var(--soft4)}
.ahp{width:34px;height:34px;padding:0;border:0;border-radius:999px;background:var(--ink);color:var(--tang);display:flex;align-items:center;justify-content:center}
.ahgo{display:grid;gap:2px;min-width:0;padding:2px 0;border:0;background:none;color:var(--ink);text-align:left}
.aht{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.04em;color:var(--mute)}
.ahgo b{font-size:15px;line-height:1.3}
.ahq{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14px;color:var(--mute)}
.ahgo b.said{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:500}
.ahg{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:104px;height:34px;padding:0 12px;border:1.5px solid var(--ink);border-radius:999px;background:var(--raise);color:var(--ink);font-size:14px;font-weight:700}
.ahg.on{background:var(--lem)}
.helppop .keys{display:flex;flex-wrap:wrap;gap:6px 14px;margin:2px 10px 12px;font-size:13px;color:var(--mute)}
.helppop .keys span{display:inline-flex;align-items:center;gap:6px}
.helppop kbd{display:inline-block;min-width:22px;padding:2px 6px 1px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--line),0 1px 0 var(--line);background:var(--raise);color:var(--ink);font-family:var(--mono);font-size:11.5px;text-align:center}
@media (hover:hover){.ci:hover{background:var(--soft)}.spd:not(.on):hover{border-color:var(--ink)}.player.full .ci:hover{background:rgba(255,255,255,.14)}.askb:not(.on):hover,.chipq:hover,.ahg:not(.on):hover{background:var(--lem)}.askb.on:hover{background:var(--inkh)}.askx:hover{background:var(--soft)}.qstep:hover{background:var(--soft)}.ahgo:hover b{text-decoration:underline;text-underline-offset:3px}}
@media (max-width:1199px){.askp{margin-left:0}}
@media (max-width:699px){
  .ctrl{gap:8px}
  .ci{width:30px;height:30px}
  .ctrl .ci+.ci{margin-left:-4px}
  .spd{min-width:38px;padding:0 7px}
  .tot{display:none}
  .askp{padding:8px 8px 8px 12px}
  .ah{grid-template-columns:32px minmax(0,1fr);gap:4px 10px;padding:8px}
  .ahp{width:32px;height:32px}
  .ahg{grid-column:2;justify-self:start;height:32px;min-width:96px}
}
/* the Clips page: formats per clip, downloads, deleted clips */
/* a clip with its own formats wears them on its preview, lemon because someone chose them */
.cprev .ffmt{position:absolute;top:14px;right:12px;z-index:2;display:flex;align-items:center;gap:5px;height:23px;padding:0 8px;border-radius:999px;background:var(--lem);box-shadow:0 0 0 1.5px var(--ink)}
.ffmt i{display:block;border-radius:1.5px;background:var(--ink)}
.ffmt .fv{width:7px;height:12px}.ffmt .fp{width:9px;height:11px}.ffmt .fs{width:10px;height:10px}.ffmt .fw{width:13px;height:8px}
.fmt .fp{width:12px;height:15px}
.cardpop{max-height:calc(100vh - 24px);overflow:auto}
.cardpop .fsrc.mine{color:var(--ink)}
.fmth{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px;margin:4px 0 0}
.fmth h4{margin:0 10px}
.fmtr{flex:none;height:26px;margin-right:6px;padding:0 10px;border:0;border-radius:999px;background:none;color:var(--ink);font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.fmtgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:2px 4px 6px}
.pop .it.fmti{flex-direction:column;justify-content:center;gap:7px;height:60px;padding:6px 2px;border:1px solid var(--line);border-radius:10px;font-family:var(--mono);font-weight:500;font-size:12px;color:var(--mute)}
.pop .it.fmti[aria-checked=true]{border:2px solid var(--ink);background:var(--lem);color:var(--ink)}
.pop .it.fmti i{width:auto;height:auto;border-radius:2px;background:currentColor;box-shadow:none}
.pop .it.fmti i.fv{width:9px;height:16px}.pop .it.fmti i.fp{width:12px;height:15px}.pop .it.fmti i.fs{width:13px;height:13px}.pop .it.fmti i.fw{width:18px;height:10px}
.trashl{margin:30px 0 0;text-align:center}
.trashl .lnk{font-size:15px}
.tlist{list-style:none;margin:0;padding:0}
.tlist li{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.tlist li:first-child{border-top:0;padding-top:4px}
.tlist i{flex:none;width:10px;height:36px;border-radius:999px;background:var(--c);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 20%,transparent)}
.tlist .pn{flex:1;min-width:0}
.tlist .pn b{display:block;font-size:15.5px}
.tlist .pn small{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--mute)}
.tlist .pn small span{white-space:nowrap}
.tnone{margin:4px 0 0;font-size:15px;color:var(--mute)}
@media (hover:hover){.fmtr:hover{background:var(--lem)}.pop .it.fmti[aria-checked=false]:hover{border-color:var(--ink);color:var(--ink);background:var(--raise)}}
@media (max-width:699px){.cprev .ffmt{top:8px;right:8px;height:21px;gap:4px;padding:0 6px}}
/* The episode's name opens its settings, so it stays in the header at every width: the number and the tagline give way first. */
@media (max-width:1279px){button.ep .no{display:none}}
/* An episode's way back to Home, beside its name, as well as the logo (Drew, 2026-10-13). It's an arrow alone where the
   header is tight, and gone wherever the logo doesn't go Home: your client's link, and looking as your client or editor. */
.backh{flex:none;display:inline-flex;align-items:center;gap:3px;height:36px;margin:0 -10px 0 -8px;padding:0 12px 0 6px;border:0;border-radius:999px;background:none;color:var(--mute);font-size:14px;font-weight:600;white-space:nowrap}
@media (hover:hover){.backh:hover{background:var(--soft);color:var(--ink)}}
body.looking .backh{display:none!important}
@media (max-width:1023px){.backh{width:36px;margin-right:0;padding:0;justify-content:center}.backh .bt{display:none}}
@media (max-width:699px){.backh{order:2;margin:0 0 0 -4px}}
@media (min-width:700px) and (max-width:1023px){
  .hin{gap:12px;padding:0 20px}
  .tabs{margin-left:0;gap:2px}
  .tab{padding:0 12px}
  .share{padding:0 6px}
  .share .btxt{display:none}
}
@supports (height:100dvh){@media (max-width:699px){.sheet{max-height:calc(100dvh - 48px)}}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.prog2 i.ind{animation:none}}
/* Home: the wall's cards say where each episode is at, and a stopped upload or transcription has its way out on the card */

.ecard>.eopen{flex:none;display:block;width:100%;padding:0;border:0;border-radius:9px;background:none;color:inherit;text-align:left}
.efoot .est{min-width:0;line-height:1.35}
.edot{flex:none;width:10px;height:10px;border-radius:999px;background:var(--ink)}
.edot.lem{background:var(--lem);box-shadow:0 0 0 1.5px var(--ink)}
.edot.co{background:var(--co);box-shadow:0 0 0 1.5px var(--ink)}

.efoot .prog{min-width:40px}
.efoot .prog i{transition:width .2s linear}
.eact{flex:none;margin-left:auto;height:30px;padding:0 12px;border:1.5px solid var(--ink);border-radius:999px;background:var(--raise);color:var(--ink);font-family:'Instrument Sans',system-ui,sans-serif;font-size:13px;font-weight:700;letter-spacing:0;text-transform:none;white-space:nowrap}
.vh{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
/* dragging a file over Home: all of it is the target */
.dropz{position:fixed;inset:0;z-index:70;display:flex;padding:16px;background:rgba(255,225,77,.22);pointer-events:none}
.dropz>div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;border:3px dashed var(--ink);border-radius:24px;background:color-mix(in srgb,var(--paper) 88%,transparent);text-align:center}
.dropz b{font-family:var(--disp);font-weight:400;font-size:clamp(36px,7vw,72px);line-height:.95;letter-spacing:-.01em}
.dropz span{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.05em;text-transform:uppercase}
@media (hover:hover){.eact:hover{background:var(--lem);color:#0E0E0E}}
/* your account */
.av{border:0}

.tinv .fin{flex:1 1 200px}
.tinv .bb.primary{flex:none}
.plist .tmx{flex:none;height:32px;padding:0 12px;font-size:13.5px}

/* signed out */

@media (max-width:699px){.eact{height:32px}}

/* ---------- The live version, beside the current one ---------- */
/* The band at the top says which version this is, and opens the same place in the current version. */
#ribbon a{flex:none;display:inline-flex;align-items:center;height:24px;padding:0 11px;border:1.5px solid rgba(255,255,255,.55);border-radius:999px;color:#fff;text-decoration:none}
@media (hover:hover){#ribbon a:hover{background:#fff;color:#0E0E0E}}
/* A frame from the episode on its card, once one exists; until then the two silhouettes. */
.thumb .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.prog.ind i{width:40%;animation:ind .9s ease-in-out infinite alternate}
.wallmsg{margin:28px 0 0;font-size:18px;color:var(--mute)}
/* Settings, Share and your account: a question about something that can't be taken back is asked where it was
   pressed; the thumbnail is chosen by scrubbing; an invite link shows when email isn't set up. */
.conf{margin-top:14px;padding:14px 16px 12px;border-radius:14px;background:var(--lemt);box-shadow:inset 0 0 0 1.5px var(--ink)}
.conf b{display:block;font-size:15px;line-height:1.35;overflow-wrap:anywhere}
.conf p{margin:4px 0 0;font-size:14px;line-height:1.45}
.conf .acts{margin-top:12px}
.plist li.cnfrow{display:block;padding:0 0 10px;border-top:0}
.plist li.cnfrow .conf{margin-top:0}
/* Settings, Transcript: ours and yours, the one in use filled in. */
.choice{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:4px 12px;padding:12px 14px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line)}
.choice+.choice,.choice+.conf,.conf+.choice{margin-top:8px}
.choice.on{box-shadow:inset 0 0 0 2px var(--ink)}
.choice .rd{width:18px;height:18px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--ink)}
.choice.on .rd{background:radial-gradient(circle,var(--ink) 0 4.5px,transparent 5px)}
.choice b{display:block;font-size:15px;line-height:1.3}
.choice small{display:block;margin-top:1px;font-size:13px;line-height:1.35;color:var(--mute);overflow-wrap:anywhere}
.choice .inuse{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase}
.choice .tmx{height:32px;padding:0 12px;font-size:13.5px}
.warnl{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;font-size:14px;line-height:1.45;color:var(--red-t)}
.warnl svg{flex:none;margin-top:4px}
.spks{margin:4px 74px 10px 2px;font-size:13px;line-height:1.4;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.setpic{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;border-radius:12px;background:#161616;overflow:hidden;color:rgba(255,255,255,.7);font-size:13.5px}
.setpic img{display:block;width:100%;height:100%;object-fit:cover}
.fpick video{display:block;width:100%;aspect-ratio:16/9;border-radius:12px;background:#161616}
.fpick input[type=range]{display:block;width:100%;margin:12px 0 0;accent-color:var(--ink)}
.fpick .acts{margin-top:10px}
.fpt{margin-right:auto;font-family:var(--mono);font-weight:500;font-size:12.5px;letter-spacing:.03em}
.pwrow{display:flex;gap:8px;margin-top:12px}
.pwrow .fin{flex:1;min-width:0}
.pwrow .bb.primary{height:44px;padding:0 18px}
.invlink{margin-top:12px;padding:12px 14px 14px;border-radius:14px;background:var(--soft4)}
.invlink p{margin:0 0 10px;font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.whoin{display:flex;gap:8px;padding:6px 6px 2px}
.whoin .fin{flex:1;min-width:0;height:38px;font-size:15px}
a.lnk{text-decoration:none}
a.pill-ink{text-decoration:none}
/* A silence of five seconds or more is a line of its own, grabbed like any other, and says how long it is. */
.row.gaprow .tx{font-family:var(--mono);font-weight:500;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.w.gapw{padding:0 2px}
/* What Pick says while the transcript loads, or when there isn't one yet. */
.pickmsg{margin:28px 0;font-size:17px;line-height:1.5;color:var(--mute)}
.pickmsg .shbtn{margin-left:8px}
.shnote{white-space:pre-line}
/* "Couldn't save your last change": the shared save engine's warning, in this look. */
.clip-save-warn{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:400;display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;font-size:14px;font-weight:600;color:#fff;background:var(--red-t);box-shadow:var(--die);opacity:0;transform:translateX(-50%) translateY(8px);pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.clip-save-warn.show{opacity:1;transform:translateX(-50%) translateY(0)}
.clip-save-warn .csw-dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:csw 1.2s ease-in-out infinite}
@keyframes csw{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.clip-save-warn .csw-dot{animation:none}}
/* Clips, live: a card plays its clip on itself, with the episode's video moved in while it plays. A 16:9 clip shows
   its whole frame (dashed edges at rest); a vertical one fills the card, as it's made from the middle of the picture. */
.cprev>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0E0E0E}
.cprev.wide>video{object-fit:contain}
.cprev.vid .cst,.cprev.vid::before{display:none}
.cprev>img.cfr{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0E0E0E}
.cprev.wide>img.cfr{object-fit:contain}
.cprev:not(.fr)>img.cfr{opacity:0}
.cprev.fr .cst,.cprev.vid>img.cfr{display:none}
.cprev.wide::before{content:'';position:absolute;left:0;right:0;top:50%;height:56.25cqw;transform:translateY(-50%);border-top:1px dashed rgba(255,255,255,.4);border-bottom:1px dashed rgba(255,255,255,.4);pointer-events:none}
/* Captions on a clip as they burn into it (caption_style.py, the house look). On 9:16, up to two balanced lines
   43.8% of the frame wide, their boxes ending 35.6% up: right above Instagram's Reels overlays and left of its
   buttons. On 16:9, one line 3.6% of the short edge, sitting 30% of the frame's height above its bottom. */
.ccap.house{top:auto;bottom:35.6%;left:calc(28.1% + .29em);right:calc(28.1% + .29em);font-family:'Cutdowns Captions',system-ui,sans-serif;font-weight:600;font-size:max(8px,3.306cqw);line-height:1.791;letter-spacing:0;text-transform:none;text-shadow:none;white-space:nowrap}
.ccap.house .bx:empty{display:none}
/* made for Stories: right above the reply bar (STORIES_BOX_BOTTOM), as wide as any caption */
.ccap.house.stories{bottom:19.9%;left:calc(4% + .29em);right:calc(4% + .29em)}
.cprev.wide .ccap.house{bottom:calc(50% - 11.25cqw);left:4%;right:4%;font-size:max(7px,1.674cqw);line-height:1.2;white-space:nowrap;overflow:hidden}
.cprev.wide .ccap.house .bx{display:inline-block;max-width:100%;overflow:hidden}
.ccap.off{display:none}
.cacts button:disabled{opacity:.6;cursor:progress}
/* Send with nothing new or changed to send says so, quietly */
.cacts .pill-tang.idle{opacity:.5}
/* The next step, where you'll look for it: on the Episode page once it's sent, and on the Clips page while the episode
   is still being made. Cobalt, the episode's colour. */
.band{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;max-width:900px;margin:18px 0 0;padding:14px 18px;border-radius:14px;background:var(--raise);box-shadow:inset 0 0 0 1.5px var(--co),inset 5px 0 0 var(--co);font-size:15px;line-height:1.45}
.band .bt{flex:1 1 300px;min-width:0;margin:0}
.band .bacts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.band .busy{flex:1 1 300px;min-width:0}
/* Your client's view: their name first, on a card over the episode; then the episode without the team's controls,
   where Add to is the main button. The band at the top says whose view it is and has the way back to yours. */
.sheet.hello{top:50%;right:auto;bottom:auto;left:50%;display:block;width:min(420px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;padding:24px 24px 18px;border-radius:20px;box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 13%,transparent),0 30px 60px -24px rgba(14,14,14,.6);transform:translate(-50%,-46%);opacity:0;transition:transform .2s,opacity .2s}
.sheet.hello.show{transform:translate(-50%,-50%);opacity:1}
.kind h2{margin-bottom:14px}
.kindb{display:block;width:100%;margin:0 0 10px;padding:14px 16px;border:0;border-radius:14px;background:var(--soft);text-align:left;color:var(--ink)}
.kindb b{display:block;font-size:16px;font-weight:700}
.kindb span{display:block;margin-top:3px;font-size:13.5px;line-height:1.45;color:var(--mute)}
.kindb[data-kind=recording] b{color:var(--co-t)}
.kindx{margin:6px 0 0;text-align:center}
@media (hover:hover){.kindb:hover{background:var(--soft2)}}
.hwm{margin:0 0 16px}
.hfrom{margin:0;font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.hello h2{margin:6px 0 16px;font-family:var(--disp);font-weight:400;font-size:26px;line-height:1;letter-spacing:-.01em;overflow-wrap:anywhere}
.hl2{display:block;margin:14px 0 8px;font-size:15px;font-weight:700}
.hello .hint{margin:8px 0 0;font-size:13.5px;line-height:1.45;color:var(--mute)}
.hgo{width:100%;justify-content:center;height:48px;margin-top:18px;padding:0 20px}
.hnote{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:13px;line-height:1.45;color:var(--mute)}
.hnote .lnk{font-size:13px;text-decoration:none}
body.looking .tabs{margin-right:auto}
body.looking .av:disabled{cursor:default}
@supports (height:100dvh){.sheet.hello{max-height:calc(100dvh - 32px)}}
/* Home, when you're the video editor on someone's episodes */
.edband{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:0 0 22px;padding:14px 18px;border-radius:14px;background:var(--raise);box-shadow:inset 0 0 0 1.5px var(--tang);font-size:15px;line-height:1.45}
.edband p{flex:1 1 320px;margin:0}

/* ---------- the landing page (cutdowns-landing.html, body.lp): what a stranger sees at cutdowns.io ---------- */
.lp{font-size:17px;line-height:1.5}
.lp a{color:inherit;text-decoration:none}
.lpin{max-width:1180px;margin:0 auto;padding:0 32px}
.lphdr{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--line)}
.lphdr .lpin{min-height:64px;display:flex;align-items:center;gap:14px}
.lpnav{display:flex;gap:4px;margin-left:auto}
.lpnav a{padding:8px 12px;border-radius:999px;font-size:15px;font-weight:600}
.lpsign{margin-left:4px}
.lp .pill-tang{padding:0 18px 0 6px;font-weight:700}
.lpbig{height:52px!important;font-size:18px;padding:0 24px 0 8px!important}
.lpbig .ic{width:36px;height:36px}
.lpeye{margin:0 0 12px;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.lph1{margin:0;font-family:var(--disp);font-weight:400;font-size:clamp(50px,8.4vw,112px);line-height:.93;letter-spacing:-.015em}
.lph2{margin:0 0 14px;font-family:var(--disp);font-weight:400;font-size:clamp(32px,4.4vw,52px);line-height:1;letter-spacing:-.01em}
.lpsub{margin:26px 0 0;max-width:560px;font-size:21px;line-height:1.45}
.lplead{margin:0;max-width:520px;color:var(--mute)}
.lpcta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:30px}
.lpnote{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--mute)}
.lphero{padding-top:64px;padding-bottom:40px}
.lphl{--hc:var(--lem);color:inherit;background:linear-gradient(var(--hc),var(--hc)) no-repeat 0 88%/100% 62%;padding:0 .1em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lp .c1{--hc:var(--clip-1)}
.lp .c2{--hc:var(--clip-2)}
.lp .c4{--hc:var(--clip-4)}
.lpln{display:grid;grid-template-columns:54px minmax(0,1fr);margin:0;padding:3px 0;font-size:17px;line-height:1.55}
.lpln.sm{font-size:15px}
.lpln .t{padding-top:4px;font-family:var(--mono);font-size:12px;color:var(--mute)}
.lpwin{margin-top:52px;border-radius:16px;background:var(--raise);box-shadow:var(--die),0 30px 60px -30px rgba(14,14,14,.35);overflow:hidden}
.lpwbar{display:flex;align-items:center;gap:8px;min-height:54px;padding:0 18px;border-bottom:1px solid var(--line)}
.lpwbar .wm{font-size:16px;margin-right:6px}
.lpwttl{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lpwtab{padding:6px 14px;border-radius:999px;font-size:14px;font-weight:600}
.lpwtab.on{background:var(--lem);font-weight:700}
.lpwtab i{font-style:normal;margin-left:4px;padding:0 6px;border-radius:999px;background:var(--ink);color:var(--on-ink);font-family:var(--mono);font-size:11px}
.lpwtab.epi{color:var(--co-t)}
.lpwgrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;padding:22px 22px 26px}
.lpside{display:flex;flex-direction:column;gap:12px}
.lpclip,.lppick{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:2px 10px;padding:12px 14px;border-radius:12px;background:var(--raise);box-shadow:var(--die)}
.lpclip small,.lppick small{grid-column:2/4;font-family:var(--mono);font-size:12px;color:var(--mute)}
.lppick small{grid-column:3}
.lpdot{width:12px;height:12px;border-radius:999px;background:var(--hc,var(--lem))}
/* the sample to try: Pick's transcript, bar and clips, at the size of the window it sits in */
.lpdemo{--lw:0px}
.lpwttl small{font-weight:500;color:var(--mute)}
.lpdcol{position:relative;min-width:0}
.lpdemo .ln{grid-template-columns:var(--tsw) minmax(0,1fr)}
.lpdemo .lab{grid-column:2;grid-row:1;flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:10px;text-align:left;padding:4px 0 0}
.lpdemo .ts{grid-column:1;grid-row:2;cursor:pointer}
.lpdemo .tx{grid-column:2;grid-row:2;font-size:17px}
.lpdemo .coach{margin:2px 0 8px var(--tsw)}
.lpdsel{position:absolute;inset:0;pointer-events:none}
.lpdock{position:absolute;left:var(--tsw);z-index:6;display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:calc(100% - var(--tsw))}
.lpdock .bar{max-width:100%;flex-wrap:wrap;row-gap:4px;padding:6px 6px 6px 14px;border-radius:24px;background:var(--raise);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 13%,transparent),0 12px 22px -12px rgba(14,14,14,.5)}
.lpdock .coach2{margin:0 0 0 8px;font-size:18px}
.lpdock .bar>*{order:0}
.lpframe{position:relative;display:block;width:min(100%,200px);aspect-ratio:9/16;margin:0 auto;border-radius:14px;background:var(--look-1);overflow:hidden;box-shadow:var(--die)}
.lpcap{position:absolute;left:12px;right:12px;bottom:24%;text-align:center;color:#fff;font-weight:700;font-size:16px;line-height:1.25;text-shadow:0 0 3px #000,0 2px 0 #000}
.lpcap .now{color:var(--lem)}
.lpfmt{position:absolute;top:10px;right:10px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;font-family:var(--mono);font-size:11px}
.lpbtn{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border:0;border-radius:999px;background:#fff;color:#0E0E0E;display:flex;align-items:center;justify-content:center;transition:opacity .2s}
.lpframe.on .lpbtn{opacity:0}
.lpprog{position:relative;width:min(100%,200px);height:5px;margin:10px auto 4px;border-radius:999px;background:var(--soft2);overflow:hidden}
.lpprog b{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ink)}
.lpclip.on{box-shadow:0 0 0 2px var(--ink)}
.lpclip .bb.icon{width:32px;height:32px}
#dClips{display:flex;flex-direction:column;gap:10px}
.lpdnone,.lpdmore{margin:0;font-size:14px;color:var(--mute);text-align:center}
.lpdmore{color:var(--ink)}
.lpfacts{border-block:2px solid var(--ink);background:var(--lem)}
.lpfacts .lpin{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-block:14px;font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.03em;text-transform:uppercase}
.lpsec{padding-top:88px}
.lpsteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:30px}
.lpstep{padding:24px 24px 26px}
.lpstep h3{margin:10px 0 8px;font-size:21px;line-height:1.25}
.lpstep p{margin:0;color:var(--mute)}
.lpstep .step-alt{margin-top:14px;color:var(--ink)}
.lpn{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--tang);font-family:var(--mono);font-weight:500;font-size:12px}
.lpvis{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.lpfile{display:flex;justify-content:space-between;gap:10px;font-size:15px}
.lpfile small,.lpmono{font-family:var(--mono);font-size:12px;color:var(--mute)}
.lpbar{height:8px;margin:10px 0 8px;border-radius:999px;background:var(--soft2);overflow:hidden}
.lpbar i{display:block;height:100%;background:var(--ink)}
.lpsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:center}
.lppanel{padding:22px 24px}
.lplink{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:8px 8px 8px 16px;border:1px solid var(--line);border-radius:999px;font-family:var(--mono);font-size:13px}
.lplink span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lplink b{padding:6px 14px;border-radius:999px;background:var(--ink);color:var(--on-ink);font-family:'Instrument Sans',sans-serif;font-size:14px}
.lpby{margin:0 0 10px 54px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.lphand{margin:0 0 12px}
.lppanel .lppick{margin-bottom:10px}
.lptl{position:relative;height:40px;margin:16px 0;border-radius:8px;background:var(--soft)}
.lptl i{position:absolute;top:6px;bottom:6px;display:flex;align-items:center;padding:0 8px;border-radius:5px;background:var(--hc);font-style:normal;font-family:var(--mono);font-size:11px;white-space:nowrap;overflow:hidden}
.lpframes{display:flex;flex-wrap:wrap;align-items:flex-end;gap:28px;margin-top:34px}
.lpfr{display:grid;justify-items:start;gap:4px}
.lpfr small{font-family:var(--mono);font-size:12px;color:var(--mute)}
.lpfr .box{display:block;height:150px;margin-bottom:8px;border-radius:10px;background:var(--look-1);box-shadow:var(--die)}
.lpfr .f916{aspect-ratio:9/16;background:var(--tang)}
.lpfr .f45{aspect-ratio:4/5}
.lpfr .f11{aspect-ratio:1}
.lpfr .f169{aspect-ratio:16/9;height:110px}
.lpprice{padding:34px 36px;background:var(--lemt)}
.lpend{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding-bottom:96px}
.lpfoot{border-top:1px solid var(--line)}
.lpfoot .lpin{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;min-height:64px;font-size:14px;color:var(--mute)}
.lpfoot .sp{flex:1}
@media (hover:hover){.lpnav a:hover{background:var(--lem)}.lpfoot a:hover{color:var(--ink)}}
@media (max-width:900px){
  .lpnav{display:none}
  .lpsign{margin-left:auto}
  .lpwgrid,.lpsplit,.lpsteps{grid-template-columns:minmax(0,1fr)}
  .lpsplit{gap:24px}
}
@media (max-width:600px){
  .lpin{padding:0 16px}
  .lphdr .wm{font-size:18px}
  .lphdr .logo{order:0}
  .lphdr .lpin{gap:6px}
  .lpsign{padding:0 10px}
  .lphero{padding-top:36px}
  .lpsub{font-size:18px}
  .lpwbar .lpwtab:not(.on),.lpwbar .wm{display:none}
  .lpwgrid{padding:14px}
  .lpdock{left:0;max-width:100%}
  .lpln{grid-template-columns:46px minmax(0,1fr);font-size:15px}
  .lpby{margin-left:46px}
  .lpsec{padding-top:60px}
  .lpfr .box{height:110px}
  .lpfr .f169{height:80px}
}

/* ---------- the sign-in page (cutdowns-signin.html, body.si): the landing page's header and footer around one card ---------- */
.si{min-height:100vh;display:flex;flex-direction:column}
.simain{flex:1;display:flex;justify-content:center;align-items:flex-start;padding:72px 16px 96px}
.siwrap{width:min(500px,100%)}
.sih1{margin:0;font-family:var(--disp);font-weight:400;font-size:clamp(38px,6vw,52px);line-height:1;letter-spacing:-.01em}
.sisub{margin:16px 0 0;font-size:18px;line-height:1.45;color:var(--mute)}
.sisub b{color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.sicard{margin-top:28px;padding:22px 22px 20px}
.sictx{margin:0 0 26px;padding:14px 18px;border-radius:14px;background:var(--raise);box-shadow:inset 0 0 0 1.5px var(--tang);font-size:15px;line-height:1.45;overflow-wrap:anywhere}
.sigoo{width:100%;height:48px;display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:999px;background:var(--raise);box-shadow:inset 0 0 0 1.5px var(--ink);font-size:16px;font-weight:600;overflow:hidden}
.sigoo span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sior{display:flex;align-items:center;gap:12px;margin:18px 0;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.sior::before,.sior::after{content:'';flex:1;height:1px;background:var(--line)}
.silab{display:block;margin:0 0 8px;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.siin{display:block;width:100%;height:48px;padding:0 18px;border:1.5px solid var(--line);border-radius:999px;background:var(--paper);font-size:17px;outline:0}
.siin:focus{border-color:var(--ink)}
.sigo{width:100%;height:52px;margin-top:12px;justify-content:center;padding:0 18px 0 8px!important;font-size:17px}
.sigo .ic{width:34px;height:34px}
.sigo:disabled{opacity:.55;cursor:default}
.simsg{margin:14px 0 0;font-size:15px;line-height:1.45;color:var(--mute)}
.simsg:empty{display:none}
.simsg.bad{color:var(--red-t)}
.sinew{margin:22px 0 0;font-size:15px;color:var(--mute)}
.sinew .lnk{color:var(--ink)}
.sifacts p{display:flex;align-items:baseline;gap:12px;margin:0;font-size:16px;line-height:1.45}
.sifacts p+p{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.sifacts .lpn{flex:none;width:104px;text-align:center;background:var(--lem)}
.sirow{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.sifine{margin-top:22px}
.sifine a{color:var(--ink);text-decoration:underline}
/* the download page (cutdowns-get.html, body.si too): option A of the mockups, "One button", with the headline from
   option D (Drew, 2026-10-14). Centred: what you get, the download, the apps it works with; then three steps side by
   side, each with a picture of what's on screen. */
.si [hidden]{display:none!important}
.gtmain{flex:1}
.gtsign{margin-left:auto}
.gthero{display:flex;flex-direction:column;align-items:center;padding-top:72px;text-align:center}
.gth1{margin:0;max-width:900px;font-family:var(--disp);font-weight:400;font-size:clamp(40px,6.4vw,80px);line-height:.98;letter-spacing:-.015em;text-wrap:balance}
.gtsub{margin:22px 0 0;max-width:560px;font-size:20px;line-height:1.45;color:var(--mute);text-wrap:balance}
.gtcta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}
.gtfine{margin:14px 0 0}
.gtworks{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.gtworks li{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;background:var(--soft);font-size:15px;font-weight:600}
.gtworks li::before{content:'';width:9px;height:9px;border-radius:999px;background:var(--clip-2)}
.gtnote{display:flex;gap:12px;align-items:flex-start;margin:24px 0 0;max-width:520px;padding:14px 16px;border-radius:12px;background:var(--lemt);box-shadow:inset 0 0 0 1.5px var(--lem);font-size:15px;line-height:1.45;text-align:left}
.gtnote:empty{display:none}
.gtnote.wait::before{content:'';flex:none;width:20px;height:20px;margin-top:1px;border-radius:999px;border:3px solid var(--lem);border-top-color:var(--ink);animation:gtspin 1.4s linear infinite}
.gtnote.bad{background:var(--soft4);box-shadow:inset 0 0 0 1.5px var(--line)}
@keyframes gtspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.gtnote.wait::before{animation:none}}
.gtdl,.gtnot{display:flex;flex-direction:column;align-items:center}
.gtnot .gtnote{background:var(--soft);box-shadow:none}
.gtnot .bb{margin-top:16px}
.gtsteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:64px 0 0;padding:0;list-style:none}
.gtsteps>li{display:flex;flex-direction:column;gap:12px;min-width:0}
.gtsteps h2{display:flex;align-items:center;gap:10px;margin:0;font-size:21px;line-height:1.25}
.gtsteps .num{flex:none;width:30px;height:30px;border-radius:999px;background:var(--ink);color:var(--lem);font-family:var(--mono);font-weight:500;font-size:13px;display:flex;align-items:center;justify-content:center}
.gtsteps p{margin:0;font-size:16px;line-height:1.5;color:var(--mute)}
.gtsteps p b{color:var(--ink);font-weight:600}
.gtsteps .gtmw{margin-top:auto}
.gtmenu{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:36px;padding-top:18px;border-top:1px solid var(--line);font-size:15px;color:var(--mute)}
.gtmenu b{color:var(--ink);font-weight:600}
.gtpath{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px;color:var(--mute)}
.gtpath b{padding:1px 8px;border-radius:6px;background:var(--soft);color:var(--ink);font-weight:600;white-space:nowrap}
/* the little Mac window under each step */
.gtmw{border-radius:10px;background:var(--paper);box-shadow:0 0 0 1px rgba(14,14,14,.16),0 10px 20px -14px rgba(14,14,14,.6);overflow:hidden;font-size:13px}
.gtmw .tb{display:flex;align-items:center;gap:5px;height:24px;padding:0 10px;background:var(--soft)}
.gtmw .tb i{width:8px;height:8px;border-radius:999px;background:rgba(14,14,14,.2)}
.gtmw .tb span{flex:1;margin-right:24px;text-align:center;font-size:11.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gtmw .wb{min-height:132px;padding:16px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;font-weight:600;text-align:center}
.gtmw .tile{width:48px;height:48px;background:url(/static/systems/cutdowns-logo.svg) center/contain no-repeat}
.gtmw .gtapps{align-self:stretch;display:grid;gap:5px;text-align:left}
.gtmw .gtapps span{display:flex;align-items:center;gap:8px;padding:4px 9px;border-radius:8px;box-shadow:inset 0 0 0 1.5px var(--ink)}
.gtmw .gtapps span::before{content:'✓';flex:none;width:15px;height:15px;border-radius:5px;background:var(--ink);color:var(--on-ink);font-size:10px;line-height:15px;text-align:center}
.gtmw .gtapps+.go{align-self:flex-end}
.gtmw .wm{font-size:14px;align-self:flex-start}
.gtmw .code{align-self:flex-start;font-family:var(--mono);font-weight:500;font-size:20px;letter-spacing:.12em}
.gtmw .go{align-self:flex-start;padding:4px 12px;border:1.5px solid var(--ink);border-radius:999px;background:var(--tang);font-size:12.5px;font-weight:700}
.gtend{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;padding:28px 0 88px}
.gtend a{color:var(--ink);text-decoration:underline}
@media (max-width:900px){
  .gtsteps{grid-template-columns:minmax(0,1fr);gap:32px;max-width:520px;margin-left:auto;margin-right:auto}
  .gtmenu{max-width:520px;margin-left:auto;margin-right:auto}
}
@media (max-width:600px){
  .simain{padding-top:40px}
  .sisub{font-size:16px}
  .sicard{padding:18px 16px 16px}
  .sirow .bb{flex:1 1 auto}
  .gthero{padding-top:40px}
  .gtsub{font-size:17px}
  .gtcta{align-self:stretch}
  .gtcta .pill-tang{flex:1 1 auto;justify-content:center}
  .gtsteps{margin-top:48px}
}