/* CINEMAKER v4 — "Forest & Mustard": flat editorial surfaces, generous space, one accent, Stage-style controls */
:root{--forest:#0b493a;--forest2:#0e3a2f;--black:#162c05;--mustard:#eab54d;--mustard2:#dfaf34;--vanilla:#fff1d6;--bone:#f6ead4;--espresso:#2c1f14;--olive:#4b5138;
  --bg:#f4ead6;--card:#fbf4e6;--ink:#1f2a1a;--ink2:#5c6a52;--ink3:#9aa28f;--ln:rgba(22,44,5,.12);--ac:var(--mustard);--ac2:var(--forest);--r:14px;
  --sh:0 1px 0 rgba(22,44,5,.05);--sh2:0 18px 40px -24px rgba(22,44,5,.35)}
html.dark{--bg:#0b2f27;--card:#0f3a30;--ink:#f3ecdc;--ink2:#b9c2ad;--ink3:#7d8a74;--ln:rgba(255,241,214,.12);--ac2:var(--mustard);--sh2:0 18px 40px -24px rgba(0,0,0,.6)}
*{box-sizing:border-box;margin:0;padding:0}
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800&display=swap");
html,body{max-width:100%;overflow-x:hidden}
body{background:var(--bg);color:var(--ink);font:14px/1.5 -apple-system,"SF Pro Text",Inter,system-ui,sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased}
img,video{max-width:100%}
a{color:var(--ac2)}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.2px}
.crumb{font-size:11.5px;color:var(--ink2)}
h2{font-size:10.5px;letter-spacing:2.6px;color:var(--ink3);font-weight:800;margin:20px 0 12px;text-transform:uppercase}
.hint{font-size:12.5px;color:var(--ink2);margin-top:12px;line-height:1.55}
.g{color:#1f8a5b}.r{color:#c7432f}.y{color:#b8791a}.b{color:#1f7f7d}
html.dark .g{color:#5fd3a0}html.dark .r{color:#ff8a74}html.dark .y{color:#f0c25e}html.dark .b{color:#6cd3cf}
.stat{color:var(--ink);font-weight:800}

/* ---------- top bar: quiet ---------- */
.top{display:flex;align-items:center;gap:18px;padding:22px 44px 6px;position:sticky;top:0;z-index:30;background:var(--bg)}
.logo{font-size:13px;font-weight:900;letter-spacing:5px}.logo i{font-style:normal;color:var(--ac2)}
.top .sp{margin-left:auto}
.top .crumb.mono{display:none}
.themes{display:none}
/* ---------- tabs: editorial text row ---------- */
.tabs{display:flex;gap:34px;padding:10px 0 0;border-bottom:1px solid var(--ln);margin:0 44px}
.stage{position:relative;flex:0 0 auto;min-width:0;border:none;background:transparent;box-shadow:none;padding:12px 0 16px;cursor:pointer;color:var(--ink2);border-radius:0;overflow:visible;transition:color .2s}
.stage .n{position:static;font-size:11px;opacity:1;letter-spacing:0;font-weight:800;color:var(--ink3);margin-right:8px}
.stage .t{display:inline;font-size:15px;font-weight:700;letter-spacing:-.1px}
.stage .s{display:none}
.stage:hover{color:var(--ink);transform:none}
.stage.ac{color:var(--ink);background:transparent}
.stage.ac::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--ac2);border-radius:3px 3px 0 0}
.stage.ac .n{color:var(--ac2)}
.stage.small{min-width:0;padding:12px 0 16px}.stage.small .n{display:none}
.stage.small:first-of-type{margin-left:auto}

.wrap{padding:30px 44px 120px;max-width:1560px;width:100%;margin:0 auto}
.panel{background:var(--card);border:1px solid var(--ln);border-radius:var(--r);padding:24px 26px;margin-bottom:18px;box-shadow:var(--sh)}
.panel.flat{background:transparent}
.panel.warn{border-color:rgba(199,67,47,.35)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
input,select,textarea{background:var(--bg);border:1px solid var(--ln);border-radius:10px;color:var(--ink);padding:10px 13px;font-size:13.5px;outline:none;font-family:inherit;width:100%;transition:.14s}
textarea{resize:vertical;line-height:1.55}
input:focus,textarea:focus,select:focus{border-color:var(--ac2);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac2) 18%,transparent)}
input[type=range]{background:var(--ln);height:4px;padding:0;border:none;box-shadow:none;-webkit-appearance:none;border-radius:99px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--ac2);border:3px solid var(--card);box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:grab}
input[type=checkbox]{width:18px;height:18px;-webkit-appearance:none;appearance:none;border-radius:5px;background:var(--card);border:1.5px solid var(--ink3);cursor:pointer;position:relative;vertical-align:middle;padding:0}
input[type=checkbox]:checked{background:var(--ac2);border-color:var(--ac2)}
input[type=checkbox]:checked::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:900}
table{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
th{text-align:left;color:var(--ink3);font-size:10.5px;letter-spacing:1.8px;padding:8px 10px;font-weight:800}
td{padding:9px 10px;border-top:1px solid var(--ln);vertical-align:middle;overflow:hidden;text-overflow:ellipsis}

/* ---------- buttons ---------- */
.pill{border:1.5px solid var(--ink);background:transparent;color:var(--ink);border-radius:99px;padding:9px 16px;font-size:12.5px;font-weight:700;cursor:pointer;transition:.15s;text-decoration:none;display:inline-block;line-height:1.3}
.pill:hover{background:var(--ink);color:var(--bg)}
.pill.ac{background:var(--ac);color:var(--espresso);border-color:var(--ac)}
.pill.ac:hover{background:var(--mustard2);border-color:var(--mustard2);color:var(--espresso)}
.pill.gr{background:var(--forest);color:var(--vanilla);border-color:var(--forest)}
.pill.ghost{border-color:var(--ln)}
.pill:disabled{opacity:.35;cursor:not-allowed;background:transparent;color:var(--ink)}
.ico{border:1px solid var(--ln);background:var(--card);color:var(--ink2);border-radius:8px;padding:4px 9px;font-size:11px;font-weight:700;cursor:pointer;text-decoration:none;line-height:1.4}
.ico:hover{color:var(--ink);border-color:var(--ink)}
.ico.ac{background:var(--ac);color:var(--espresso);border-color:var(--ac)}
.chip{padding:6px 12px;border-radius:99px;font-size:12px;font-weight:600;color:var(--ink2);border:1px solid var(--ln);cursor:pointer;background:transparent}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.on{color:var(--vanilla);background:var(--forest);border-color:var(--forest)}
html.dark .chip.on{color:var(--espresso);background:var(--mustard);border-color:var(--mustard)}
.chip.r{color:#c7432f;border-color:rgba(199,67,47,.4)}
.chips{display:flex;gap:8px;margin:10px 0;flex-wrap:wrap;align-items:center}
.chips small{width:66px;font-size:10px;letter-spacing:2px;color:var(--ink3);font-weight:800}
.lock{display:inline-block;padding:6px 13px;border-radius:99px;font-size:11px;font-weight:700;color:var(--ink2);border:1px solid var(--ln)}
.code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12px;line-height:1.55;background:var(--bg);border:1px solid var(--ln);border-radius:10px;padding:12px 14px;white-space:pre-wrap;cursor:copy;margin-top:4px}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:var(--forest);color:var(--vanilla);font-weight:700;font-size:13px;padding:11px 22px;border-radius:99px;box-shadow:var(--sh2);opacity:0;transition:.3s;pointer-events:none;z-index:99;max-width:80vw}
.toast.on{opacity:1}
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--forest)}
.lbox{width:380px;background:var(--vanilla);border-radius:18px;padding:40px;color:var(--espresso)}
.lbox .logo{font-size:22px;text-align:center;display:block;margin-bottom:4px;color:var(--espresso)}.lbox .logo i{color:var(--forest)}
.lbox .sub{text-align:center;font-size:10.5px;letter-spacing:2px;color:#7a6a55;margin-bottom:24px}
.lbox input{margin-bottom:12px;background:#fff8ea;border-color:rgba(0,0,0,.1)}
.filebtn{position:relative;overflow:hidden;display:inline-block}.filebtn input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.demo{position:fixed;top:18px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:2px;font-weight:800;color:var(--forest);border:1px solid var(--forest);border-radius:99px;padding:4px 12px;z-index:40;background:var(--bg)}
html.dark .demo{color:var(--mustard);border-color:var(--mustard)}

/* ---------- collapsibles ---------- */
.ephead,.acthead{display:flex;align-items:center;gap:10px;padding:12px 0;background:transparent;border:none;border-top:1px solid var(--ln);border-radius:0;margin:6px 0 0;font-weight:700;font-size:14px;cursor:pointer;user-select:none;box-shadow:none}
.acthead.sticky{position:static}
.chev{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ink);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:10px;flex:none;background:transparent}
.cathead{font-size:10.5px;letter-spacing:2px;color:var(--ink3);font-weight:800;margin:16px 2px 8px}
details.fold{border-top:1px solid var(--ln);padding:0;margin:14px 0 0;background:transparent}
details.fold summary{cursor:pointer;padding:12px 0;font-weight:700;font-size:11px;letter-spacing:2px;color:var(--ink3);text-transform:uppercase;list-style:none}
details.fold summary::before{content:'▸ '}details.fold[open] summary::before{content:'▾ '}

/* ---------- elements ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.grid.big{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.el{position:relative;background:var(--card);border:1px solid var(--ln);border-radius:12px;overflow:hidden;font-size:11.5px;transition:.18s}
.el:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.el.main{border-color:var(--forest)}
.el img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:var(--bg);cursor:zoom-in}
.el .noimg{width:100%;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;color:var(--ink3);background:var(--bg)}
.noimg.outline{background:repeating-linear-gradient(135deg,var(--bg) 0 8px,color-mix(in srgb,var(--ink) 5%,var(--bg)) 8px 16px)}
.noimg.outline svg{width:50%;height:50%;fill:none;stroke:var(--ink3);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.el .b{padding:9px 11px}.el .tag{font-weight:700;font-size:12px}
.el select{padding:3px 6px;font-size:10.5px;border-radius:7px;margin-top:5px}
.spin{position:absolute;top:10px;right:10px;width:16px;height:16px;border-radius:50%;border:2px solid var(--ln);border-top-color:var(--ac2);animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.cand{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#111}.cand img{aspect-ratio:16/10;object-fit:cover;width:100%}.cand span{position:absolute;bottom:4px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:1px;color:#fff;text-shadow:0 1px 3px #000}
.progress{height:4px;border-radius:99px;background:var(--ln);margin-top:14px;overflow:hidden}.progress>div{height:100%;background:var(--ac2);transition:width .5s}
.regbar{border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);padding:10px 0;margin-bottom:10px;font-size:12px}
.tg{display:inline-block;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;padding:1px 7px;border-radius:99px;border:1px solid var(--ln);color:var(--ink2);margin:1px 2px 1px 0}
.tg.ok{color:#1f8a5b;border-color:rgba(31,138,91,.35)}.tg.no{color:#c7432f;border-color:rgba(199,67,47,.4);cursor:pointer}.tg.main{font-weight:800}
.qcb{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:2px 8px;border-radius:99px;border:1px solid var(--ln)}
.qcb.pass{color:#1f8a5b;border-color:rgba(31,138,91,.4)}.qcb.flagged{color:#b8791a;border-color:rgba(184,121,26,.45)}.qcb.rejected{color:#c7432f;border-color:rgba(199,67,47,.45)}
.v{font-size:9.5px;color:var(--ac2);margin-left:4px;font-weight:800}

/* ---------- script ---------- */
.drop{border:1.5px dashed var(--ink3);border-radius:var(--r);padding:34px;text-align:center;transition:.15s;cursor:pointer;background:transparent}
.drop.over{border-color:var(--ac2);background:color-mix(in srgb,var(--ac2) 6%,transparent)}
.drop b{display:block;font-size:17px;margin-bottom:4px}
.srcchip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:99px;border:1px solid var(--ln);font-size:11.5px;margin:3px 4px 0 0}.srcchip i{font-style:normal;color:var(--ink3);cursor:pointer}
.chatbox{margin-top:12px;min-height:220px;max-height:420px;overflow:auto;border-top:1px solid var(--ln);padding:14px 0}
.chatempty{color:var(--ink2);font-size:13px;line-height:1.6}.chatempty ul{margin:6px 0 0 18px}.chatempty li{margin:3px 0}
.bubble{border:1px solid var(--ln);border-radius:14px;padding:11px 14px;font-size:13px;margin-bottom:9px;max-width:92%}.bubble.me{background:transparent;color:var(--ink2);margin-left:auto;border:none}.bubble b{color:var(--ac2)}
.cmdbar{position:fixed;left:50%;transform:translateX(-50%);width:min(880px,calc(100vw - 88px));bottom:24px;display:flex;gap:12px;align-items:center;background:var(--card);border:1.5px solid var(--ink);border-radius:99px;padding:8px 8px 8px 20px;box-shadow:var(--sh2);z-index:25}
.cmdbar input{border:none;background:transparent;flex:1;padding:6px 0;box-shadow:none}
.intbox{margin-top:12px;border-top:1px solid var(--ln);padding-top:12px}.intsum{margin:6px 0 0 18px;font-size:13px;line-height:1.55}
.issue{border-top:1px solid var(--ln);padding:10px 0;font-size:13px}.sevdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;background:#b8791a}.issue.sev-high .sevdot{background:#c7432f}.issue.sev-low .sevdot{background:#9aa28f}
table.units td{padding:8px;font-size:12.5px}table.units span[contenteditable]{outline:none;border-bottom:1px dashed transparent}table.units span[contenteditable]:focus{border-bottom-color:var(--ac2)}table.units select{width:auto;padding:3px 6px;font-size:11px;border-radius:7px}

/* ---------- project list / hero (elements, generations) ---------- */
.projstrip{display:flex;gap:12px;overflow-x:auto;padding:4px 0 16px;scrollbar-width:thin}
.proj{position:relative;flex:0 0 190px;display:block;padding:0;background:transparent;border:none;cursor:pointer;transition:.15s}
.proj video,.proj .pthumb{width:100%;aspect-ratio:16/9;border-radius:10px;object-fit:cover;background:var(--forest);display:block}
.proj .pthumb{background:repeating-linear-gradient(135deg,var(--card) 0 8px,var(--bg) 8px 16px);border:1px solid var(--ln)}
.proj .pthumb.plus{display:flex;align-items:center;justify-content:center;font-size:30px;color:var(--ink3)}
.proj .pct{position:absolute;top:8px;right:8px;font-size:10px;font-weight:800;background:var(--vanilla);color:var(--espresso);padding:2px 7px;border-radius:99px}
.proj .pbody{padding:8px 2px 0}.proj .ptitle{font-weight:700;font-size:13px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.proj .pbar{height:3px;background:var(--ln);margin-top:6px;border-radius:9px;overflow:hidden}.proj .pbar>div{height:100%;background:var(--ac2)}
.proj.on video,.proj.on .pthumb{outline:3px solid var(--ac2);outline-offset:2px}
.proj:hover{transform:translateY(-2px)}
.hero{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;padding:28px 0 22px;border-bottom:1px solid var(--ln);margin-bottom:20px}
.hero h1{font-size:40px;letter-spacing:-1px;margin:2px 0 8px;font-weight:800;line-height:1.05}
.hero .logline{color:var(--ink2);font-size:14px;max-width:560px;line-height:1.5}
.kpi{display:flex;gap:22px;flex-wrap:wrap;justify-content:flex-end}
.kpi>div{flex:0 0 auto;background:transparent;border:none;padding:0;min-width:0;text-align:right}
.kpi .crumb{letter-spacing:2px;font-size:10px;font-weight:800}.kpi .stat{font-size:30px;display:block;margin-top:0;line-height:1.1}
@media(max-width:980px){.hero{grid-template-columns:1fr}.kpi{justify-content:flex-start}.kpi>div{text-align:left}}

/* ---------- PRODUCTION: control room, calm ---------- */
.cmdhead{display:grid;grid-template-columns:1.3fr auto auto;gap:28px;align-items:end;padding:10px 0 22px;border-bottom:1px solid var(--ln);margin-bottom:22px;background:transparent;border-radius:0;box-shadow:none}
.cmdhead h1{font-size:40px;letter-spacing:-1px;font-weight:800;line-height:1.05;margin:4px 0 8px}
.cmdhead .crumb{font-size:13px}
.ch-stats{display:flex;gap:26px;justify-content:flex-end}
.ch-stats>div{min-width:0;text-align:right;background:transparent;border:none;padding:0}
.ch-stats b{display:block;font-size:28px;line-height:1.1}.ch-stats small{font-size:13px;color:var(--ink3)}.ch-stats span{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--ink3);font-weight:800}
.ch-act{display:flex;gap:8px;justify-content:flex-end;align-self:end;padding-bottom:4px}
.missbar{border:1px solid rgba(199,67,47,.35);border-radius:10px;padding:8px 14px;margin-bottom:18px;font-size:12.5px}
.prod3{display:grid;grid-template-columns:220px 1fr 400px;gap:28px;align-items:start}
@media(max-width:1240px){.prod3{grid-template-columns:190px 1fr 340px}}
@media(max-width:980px){.prod3{grid-template-columns:1fr}.inspector{position:static}}
.acts-rail,.inspector{background:transparent;border:none;padding:0;box-shadow:none}
.inspector{position:sticky;top:96px;max-height:calc(100vh - 110px);overflow:auto;padding-left:24px;border-left:1px solid var(--ln)}
.railhead,.inshead{font-size:10.5px;letter-spacing:2.6px;font-weight:800;color:var(--ink3);margin:0 0 10px;display:flex;justify-content:space-between;align-items:center}
.projlist .pj{display:flex;gap:9px;align-items:center;border:none;border-radius:8px;padding:6px 0;margin-bottom:2px;cursor:pointer;background:transparent;color:var(--ink2)}
.projlist .pj:hover{color:var(--ink)}.projlist .pj.on{color:var(--ink)}
.projlist .pj video,.projlist .pj .pthumb{width:46px;aspect-ratio:16/10;border-radius:6px;object-fit:cover;background:var(--forest);flex:none;display:block}
.projlist .pj.on video,.projlist .pj.on .pthumb{outline:2px solid var(--ac2);outline-offset:2px}
.projlist .pj .pjt{font-size:12.5px;font-weight:700;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.projlist .pj .pbar{display:none}.projlist .pj .crumb{font-size:10.5px}
.projlist .pj.new{color:var(--ink3);font-size:12px;font-weight:700;padding-top:8px}
.actitem{border:none;border-top:1px solid var(--ln);border-radius:0;padding:10px 0;margin:0;cursor:pointer;background:transparent;transition:.12s;color:var(--ink2)}
.actitem:hover{color:var(--ink)}.actitem.on{color:var(--ink);box-shadow:none}
.actitem .ai-t{font-weight:700;font-size:13px}.actitem .ai-s{display:none}
.actitem.on .ai-s{display:block;white-space:normal;line-height:1.4;margin:3px 0}
.actitem .pbar{height:3px;background:var(--ln);margin-top:8px;overflow:hidden;border-radius:9px}.actitem .pbar>div{height:100%;background:var(--ac2)}
.actitem .ico{margin-top:8px}
.board{min-width:0}
.boardhead{display:flex;gap:12px;align-items:center;padding:0 0 14px}
.legend{font-size:10.5px;color:var(--ink3);display:flex;gap:10px;align-items:center}.legend .d{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:3px}
.d.draft{background:#9aa28f}.d.rendering{background:#e0a33a}.d.rendered{background:#1f8a5b}.d.flag{background:#d07c2c}.d.blocked{background:#c7432f}
.shotgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px 18px}
.shot{background:transparent;border:none;border-radius:0;overflow:visible;cursor:pointer;transition:.18s;box-shadow:none}
.shot .sthumb{position:relative;aspect-ratio:16/9;background:var(--forest);border-radius:10px;overflow:hidden;transition:.18s}
.shot:hover .sthumb{transform:translateY(-3px);box-shadow:var(--sh2)}
.shot.on .sthumb{outline:3px solid var(--ac2);outline-offset:3px}
.sthumb video,.sthumb .noimg{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:auto}
.sthumb .noimg.outline{background:repeating-linear-gradient(135deg,var(--forest) 0 8px,var(--forest2) 8px 16px)}.sthumb .noimg.outline svg{stroke:rgba(255,241,214,.35)}
.stpill{position:absolute;left:8px;bottom:8px;font-size:9.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;padding:3px 8px;border-radius:99px;background:var(--vanilla);color:var(--espresso)}
.stpill.rendered{background:#1f8a5b;color:#fff}.stpill.rendering{background:var(--mustard);color:var(--espresso)}.stpill.blocked,.stpill.failed{background:#c7432f;color:#fff}
.stv,.stseg{position:absolute;right:8px;font-size:9.5px;font-weight:800;background:var(--vanilla);color:var(--espresso);padding:2px 7px;border-radius:99px}.stv{bottom:8px}.stseg{top:8px;background:var(--mustard)}
.stcheck{position:absolute;left:8px;top:8px}
.sbody{padding:9px 2px 0}.stitle{font-weight:700;font-size:13.5px;margin-top:1px;line-height:1.3}
.uctl{font-size:10.5px;color:var(--ink3);margin-top:2px}
.sact{opacity:0;transition:.15s}.shot:hover .sact,.shot.on .sact{opacity:1}.sact .ico{padding:3px 8px}

/* inspector = the desk */
.institle{font-size:18px;font-weight:800;margin:2px 0 10px;line-height:1.25;letter-spacing:-.2px}
.insvid{width:100%;aspect-ratio:16/9;border-radius:10px;background:var(--forest);display:block;object-fit:cover}
.insvid.noimg.outline{background:repeating-linear-gradient(135deg,var(--forest) 0 8px,var(--forest2) 8px 16px)}.insvid.noimg.outline svg{stroke:rgba(255,241,214,.35)}
.insqc{margin-top:12px;padding:10px 0;border-top:1px solid var(--ln);font-size:12px}
.inssec{font-size:10.5px;letter-spacing:2.4px;font-weight:800;color:var(--ink3);margin:18px 0 8px;display:flex;justify-content:space-between;align-items:center;gap:10px}.inssec .crumb{letter-spacing:0;font-weight:500;text-transform:none;text-align:right}
.desk{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:6px}
.knob{text-align:center;cursor:pointer;user-select:none}
.knob .k{width:54px;height:54px;margin:0 auto 6px;border-radius:50%;background:var(--card);border:1.5px solid var(--ink);position:relative;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
html.dark .knob .k{border-color:var(--vanilla)}
.knob .k::after{content:'';position:absolute;left:50%;top:5px;width:3px;height:14px;margin-left:-1.5px;background:var(--ac2);border-radius:3px}
.knob:hover .k{box-shadow:0 0 0 4px color-mix(in srgb,var(--ac2) 18%,transparent)}
.knob small{font-size:9.5px;letter-spacing:1.8px;color:var(--ink3);display:block;font-weight:800}.knob b{font-size:12px;display:block;line-height:1.2}
.faders{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.fader{display:flex;flex-direction:column;align-items:center;gap:6px}
.fader input{writing-mode:vertical-lr;direction:rtl;height:86px;width:4px;-webkit-appearance:none;background:var(--ln);border-radius:9px}
.fader input::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:12px;border-radius:3px;background:var(--ink);cursor:grab;border:none;box-shadow:0 2px 6px rgba(0,0,0,.25)}
html.dark .fader input::-webkit-slider-thumb{background:var(--vanilla)}
.fader label{font-size:9.5px;letter-spacing:1.8px;color:var(--ink3);font-weight:800}.fader b{font-size:12px}
.inschips{display:none}
#insp{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;line-height:1.5;background:transparent;border-color:var(--ln)}

/* ---------- generations ---------- */
.clipgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.clipcard{position:relative;background:transparent;border:none;border-radius:0;overflow:visible;transition:.15s}
.clipcard video{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--forest);display:block;cursor:pointer;border-radius:10px}
.clipcard:hover video{transform:translateY(-3px);box-shadow:var(--sh2)}
.clipcard .b{padding:8px 2px;display:flex;align-items:center;gap:8px}.clipcard .num{color:var(--ac2);font-weight:800}
.clipcard.flagged video{outline:2px solid #b8791a;outline-offset:2px}.clipcard.rejected video{outline:2px solid #c7432f;outline-offset:2px}
.segtag{position:absolute;top:8px;left:8px;font-size:9px;font-weight:800;letter-spacing:1px;background:var(--mustard);color:var(--espresso);padding:2px 7px;border-radius:99px;z-index:2}
.thumb{width:96px;aspect-ratio:16/9;object-fit:cover;border-radius:6px;background:var(--forest);display:block;cursor:pointer}
.thumb.empty{background:var(--bg);border:1px dashed var(--ln)}
.pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;max-height:300px;overflow:auto;padding:4px;margin-top:6px}
.pick{border:2px solid transparent;border-radius:10px;overflow:hidden;cursor:pointer;background:var(--card)}
.pick.on{border-color:var(--ac2)}.pick video,.pick .noimg{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--forest)}
.pick .pb{padding:6px 8px;font-size:11px;display:flex;flex-direction:column;gap:1px}.pick .pb span{color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650}.st::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}

/* ---------- modal, scene editor ---------- */
.modal{position:fixed;inset:0;background:rgba(11,73,58,.55);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:80;padding:20px}
.modal.on{display:flex}
.mbox{position:relative;background:var(--card);border-radius:18px;padding:26px 28px;width:min(720px,96vw);max-height:92vh;overflow:auto;box-shadow:var(--sh2)}
.mbox.wide{width:min(1180px,96vw)}
.mx{position:absolute;top:14px;right:16px;border:none;background:transparent;color:var(--ink2);font-size:16px;cursor:pointer}
.mbox .row>input,.mbox .row>select,.mbox .row>textarea{flex:1;width:auto;min-width:120px}.mbox .row>select{flex:0 1 auto}
.gm{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;margin-top:12px}@media(max-width:900px){.gm{grid-template-columns:1fr}}
.strip{position:relative;display:flex;gap:2px;margin-top:8px;border-radius:8px;overflow:hidden;background:#111;min-height:44px}
.strip img{flex:1;min-width:0;aspect-ratio:16/9;object-fit:cover;cursor:pointer;opacity:.9}.strip .mark{position:absolute;top:0;bottom:0;width:2px;background:var(--mustard);left:0;pointer-events:none}
.rng{position:relative;height:34px;margin-top:6px}.rng-track{position:absolute;left:0;right:0;top:15px;height:4px;background:var(--ln);border-radius:99px}.rng-sel{position:absolute;top:13px;height:8px;background:var(--ac2);border-radius:99px;pointer-events:none}
.rng input[type=range]{position:absolute;left:0;right:0;top:9px;width:100%;background:transparent;pointer-events:none;-webkit-appearance:none;height:16px}
.rng input[type=range]::-webkit-slider-thumb{pointer-events:auto;width:18px;height:18px;border-radius:50%;background:var(--card);border:3px solid var(--ac2);cursor:ew-resize;-webkit-appearance:none}
canvas.frame{width:100%;aspect-ratio:16/9;border-radius:10px;background:#111;display:block}
.age{font-size:10.5px;padding:3px 9px;border-radius:99px;border:1px solid var(--ln)}.age.old{color:#c7432f;border-color:rgba(199,67,47,.4)}
#gtip{position:fixed;display:none;z-index:120;max-width:320px;background:var(--forest);color:var(--vanilla);font-size:12px;line-height:1.45;padding:9px 12px;border-radius:10px;pointer-events:none}
body.guide [data-g]{outline:1px dashed var(--ac2);outline-offset:2px}
.qe{border:1px solid var(--ln);border-radius:10px;overflow:hidden;font-size:11px}

/* ---------- motion (kept subtle) ---------- */
@media(prefers-reduced-motion:no-preference){
  @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .wrap>*,.shotgrid>.shot,.grid>.el,.clipgrid>.clipcard{animation:rise .4s cubic-bezier(.2,.8,.2,1) both}
  .shotgrid>.shot:nth-child(2){animation-delay:.04s}.shotgrid>.shot:nth-child(3){animation-delay:.08s}.shotgrid>.shot:nth-child(4){animation-delay:.12s}.shotgrid>.shot:nth-child(n+5){animation-delay:.16s}
  .stpill.rendering{animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{50%{opacity:.55}}
  .pill,.ico,.chip,.shot .sthumb,.el,.proj{transition:all .18s ease}
}
:focus-visible{outline:2px solid var(--ac2);outline-offset:2px}


/* ================= v4.1 — POSTER MODE: negative space, display type, less text ================= */
:root{--disp:"Anton","Oswald","Impact",system-ui,sans-serif;--bg:#f3ead8;--card:#f8f1e2}
body{font-family:Inter,-apple-system,system-ui,sans-serif}
.wrap{padding:26px 64px 140px;max-width:1680px}
.top{padding:26px 64px 6px}.tabs{margin:0 64px;gap:40px}
.logo{font-family:var(--disp);font-weight:400;font-size:18px;letter-spacing:4px}
.stage .t{font-family:var(--disp);font-weight:400;font-size:20px;letter-spacing:.8px;text-transform:uppercase}
.stage .n{font-family:Inter;font-size:10px;vertical-align:top;margin-right:6px}
.hint,.legend,.boardhead .crumb,.lock,.top .crumb:not(#roleLabel){display:none}
.top .crumb{display:inline}
h2{font-family:Inter;font-size:10px;letter-spacing:3px}
/* giant poster headline */
.cmdhead{grid-template-columns:1fr auto;align-items:end;padding:26px 0 30px;border-bottom:1px solid var(--ln);margin-bottom:30px}
.cmdhead>.ch-l>.crumb:first-child{display:none}
.cmdhead h1{font-family:var(--disp);font-weight:400;font-size:clamp(40px,4.8vw,72px);line-height:.92;letter-spacing:.5px;text-transform:uppercase;margin:0 0 14px;max-width:18ch}
.cmdhead .ch-l>.crumb{font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--ink3);font-weight:700}
.ch-stats{gap:28px;justify-content:flex-end;align-items:flex-end}
.ch-stats b{font-family:var(--disp);font-weight:400;font-size:44px;line-height:.9;letter-spacing:.5px}
.ch-stats span{font-size:9.5px;letter-spacing:2.5px}
.ch-stats>div:nth-child(n+5){display:none}
.ch-act{grid-column:2;justify-content:flex-end;margin-top:18px}
.missbar{border:none;padding:0;margin:-12px 0 24px;font-size:12.5px;color:#c7432f}
/* rails */
.prod3{grid-template-columns:150px 1fr 360px;gap:44px}
.railhead{display:none}
.projlist{margin-bottom:26px}
.projlist .pj{padding:5px 0}.projlist .pj video,.projlist .pj .pthumb{width:40px}.projlist .pj .crumb{display:none}
.projlist .pj .pjt{font-size:12px;-webkit-line-clamp:1;font-weight:600}.projlist .pj.on .pjt{font-weight:800}
.projlist .pj.new{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--ink3)}
.actitem{border:none;padding:10px 0 14px;color:var(--ink3)}
.actitem .ai-n{font-family:var(--disp);font-weight:400;font-size:40px;line-height:.9;letter-spacing:1px;color:currentColor}
.actitem .ai-t{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;margin-top:4px;color:var(--ink2)}
.actitem .ai-s{display:none}.actitem.on .ai-s{display:none}
.actitem .crumb{font-size:11px;margin-top:2px}
.actitem .pbar{height:2px;margin-top:6px;width:80px}
.actitem.on{color:var(--ink)}.actitem.on .ai-t{color:var(--ink)}
.actitem .ico{display:none}.actitem.on .ico{display:inline-block;margin-top:8px}
/* board */
.boardhead{padding:0 0 18px}
.shotgrid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:34px 22px}
.shot .sthumb{border-radius:4px}
.shot .sbody{padding:10px 0 0}
.suid{font-size:11px;color:var(--ink3);font-weight:600}
.stitle{font-family:Inter;font-size:13.5px;font-weight:700}
.stpill{left:0;bottom:0;border-radius:0 4px 0 0;padding:4px 10px;font-size:9px}
.stv,.stseg{right:0;border-radius:0 0 0 4px}.stv{bottom:0}.stseg{top:0}
.stcheck{left:8px;top:8px}
.shot .sact{margin-top:8px}
/* inspector */
.inspector{padding-left:28px}
.inshead{font-family:var(--disp);font-weight:400;font-size:30px;letter-spacing:1px;color:var(--ink);margin:0 0 4px;text-transform:uppercase}
.inshead .crumb{font-family:Inter;font-size:11px;letter-spacing:1px;color:var(--ink3)}
.institle{font-size:14px;font-weight:600;color:var(--ink2);margin:0 0 12px}
.insvid{border-radius:4px}
.inssec{font-size:9.5px;letter-spacing:3px;margin:22px 0 10px}
.knob .k{width:58px;height:58px;border-width:2px}
.knob small{font-size:8.5px}.knob b{font-size:11.5px}
#insp{font-size:11px}
/* elements, script, generations — same quietness */
.hero h1{font-family:var(--disp);font-weight:400;font-size:clamp(40px,4.8vw,72px);line-height:.92;text-transform:uppercase;letter-spacing:.5px}
.hero .logline{display:none}
.kpi .stat{font-family:var(--disp);font-weight:400;font-size:44px}
.kpi .crumb{font-size:9.5px;letter-spacing:2.5px}
.panel{background:transparent;border:none;padding:0;margin-bottom:34px;box-shadow:none}
.panel.chatpanel{border-top:1px solid var(--ln);padding-top:18px}
.drop{padding:54px 30px}.drop b{font-family:var(--disp);font-weight:400;font-size:28px;letter-spacing:1px;text-transform:uppercase}.drop .crumb{display:block;max-width:520px;margin:4px auto 0}
.grid{gap:22px}.el{border:none;border-radius:0;background:transparent}.el img,.el .noimg{border-radius:4px}.el .b{padding:8px 0}.el:hover{box-shadow:none}.el.main img,.el.main .noimg{outline:2px solid var(--forest);outline-offset:3px}
html.dark .el.main img,html.dark .el.main .noimg{outline-color:var(--mustard)}
.ephead{font-family:var(--disp);font-weight:400;font-size:22px;letter-spacing:1px;text-transform:uppercase;padding:16px 0}
.clipcard video{border-radius:4px}
.acthead{font-family:var(--disp);font-weight:400;font-size:22px;letter-spacing:1px;text-transform:uppercase}
.acthead .crumb{font-family:Inter;font-size:11px;letter-spacing:1px}
.regbar{border:none;padding:0}
.projstrip{gap:18px}.proj{flex-basis:170px}.proj .ptitle{font-size:12px}.proj .pbar,.proj .crumb{display:none}
.pill{font-size:12px;letter-spacing:.3px}
details.fold summary{font-size:10px;letter-spacing:3px}
.cmdbar{border-width:1.5px}
.demo{top:22px}
/* dark mode keeps the poster */
html.dark{--bg:#0b493a;--card:#0f5242}
html.dark .stpill.rendered{background:var(--mustard);color:var(--espresso)}
html.dark .stpill.rendering{background:var(--vanilla)}

/* dark mode: thumbnails must read against the forest ground */
html.dark .shot .sthumb,html.dark .proj video,html.dark .proj .pthumb,html.dark .projlist .pj video,html.dark .projlist .pj .pthumb,html.dark .insvid,html.dark .clipcard video,html.dark .el .noimg{background:#083a2e;box-shadow:inset 0 0 0 1px rgba(255,241,214,.14)}
html.dark .proj .pthumb{background:repeating-linear-gradient(135deg,#0d4c3d 0 8px,#0a4234 8px 16px)}
html.dark .stpill.ready{background:rgba(255,241,214,.12);color:var(--vanilla)}
.hero h1{font-size:clamp(40px,4.8vw,72px)!important;max-width:18ch}
.hero{grid-template-columns:minmax(0,1fr) auto;gap:40px}

/* ================= v4.2 — MID-CENTURY POSTER: colour blocks, duotone stills, type as image ================= */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;900&family=Archivo+Black&display=swap");
:root{--cream:#efe6d0;--paper:#f5eedc;--ink:#1d1d1b;--ink2:#4a4842;--ink3:#8a867a;--ln:rgba(29,29,27,.14);
  --c1:#e7a63a;--c2:#4aaea8;--c3:#df634c;--c4:#a7b48f;--c5:#d9552b;--c6:#f0a6a0;
  --bg:var(--cream);--card:var(--paper);--ac:var(--ink);--ac2:var(--ink);--forest:#1d1d1b;--mustard:var(--c1);--r:0;
  --disp:"Anton","Impact",sans-serif;--wide:"Archivo Black","Archivo",Inter,sans-serif;--sh2:none}
html.dark{--bg:#171613;--card:#201f1b;--ink:#efe6d0;--ink2:#bdb6a6;--ink3:#7d786c;--ln:rgba(239,230,208,.16);--ac2:var(--c1);--forest:#efe6d0}
body{font-family:"Archivo",Inter,system-ui,sans-serif;font-weight:500}
.wrap{padding:10px 64px 140px}
/* top + tabs */
.top{padding:28px 64px 8px}
.logo{font-family:var(--wide);font-size:15px;letter-spacing:3px}.logo i{color:var(--ink)}
.demo{border-color:var(--ink);color:var(--ink);border-radius:0;font-family:var(--wide);font-size:9px}
.tabs{margin:0 64px;gap:0;border-bottom:2px solid var(--ink)}
.stage{padding:14px 22px 14px 0}
.stage .t{font-family:var(--wide);font-size:15px;letter-spacing:.3px;color:var(--ink2)}
.stage .n{font-family:var(--wide);font-size:10px;color:var(--ink3)}
.stage.ac{background:transparent}.stage.ac .t,.stage.ac .n{color:var(--ink)}
.stage.ac::after{height:5px;background:var(--ink);border-radius:0;bottom:-2px}
/* buttons = ink blocks */
.pill,.ico,button.pill.ac{border-radius:0;border:2px solid var(--ink);background:transparent;color:var(--ink);font-family:var(--wide);font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;padding:9px 14px;font-weight:400}
.pill.ac,.ico.ac{background:var(--ink);color:var(--cream)}
.pill:disabled{opacity:.3}
.ico{padding:5px 9px;font-size:9.5px;border-width:1.5px}
input,textarea,select{border-radius:0;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font-family:"Archivo",Inter,sans-serif}
.tg{border-radius:0;font-family:ui-monospace,Menlo,monospace}
/* ---- production poster head ---- */
.cmdhead{position:relative;overflow:hidden;background:var(--c1);color:var(--ink);padding:22px 34px 26px;margin:22px 0 34px;border:none;display:grid;grid-template-columns:1fr auto;min-height:380px;border-radius:0}
.cmdhead.pc-2{background:var(--c2)}.cmdhead.pc-3{background:var(--c3)}.cmdhead.pc-4{background:var(--c4)}.cmdhead.pc-5{background:var(--c5);color:var(--cream)}
.cmdhead .ch-l{position:relative;z-index:2;align-self:end}
.ch-meta{display:flex;gap:36px;margin-bottom:34px;font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.3px}
.ch-meta span{display:flex;flex-direction:column;gap:2px}.ch-meta i{font-style:normal;font-family:var(--wide);font-size:8.5px;letter-spacing:1.5px;text-transform:uppercase;opacity:.7}
.cmdhead h1{font-family:var(--disp);font-weight:400;font-size:clamp(64px,8.5vw,150px);line-height:.84;text-transform:uppercase;margin:0;letter-spacing:0;max-width:none;color:currentColor;mix-blend-mode:normal}
.cmdhead h1 span{display:block}
.cmdhead .ch-l>.crumb{display:none}
.ch-still{position:absolute;right:26%;top:0;bottom:0;width:40%;z-index:1;pointer-events:auto}
.ch-still video{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15) brightness(.95);mix-blend-mode:multiply;opacity:.9}
.ch-stats{position:relative;z-index:2;align-self:start;display:flex;gap:26px;padding-top:6px}
.ch-stats b{font-family:var(--disp);font-size:64px;line-height:.9;color:currentColor}
.ch-stats b.g,.ch-stats b.y{color:currentColor}
.ch-stats span{font-family:var(--wide);font-size:8.5px;letter-spacing:2px;color:currentColor;opacity:.75}
.ch-act{position:relative;z-index:2;grid-column:2;align-self:end;justify-self:end;margin:0}
.ch-act .pill{border-color:currentColor;color:currentColor}.ch-act .pill.ac{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.missbar{font-family:var(--wide);font-size:11px;color:var(--c5);margin:-14px 0 28px}
/* ---- rails ---- */
.prod3{grid-template-columns:170px 1fr 380px;gap:48px}
.projlist .pj{padding:6px 0}.projlist .pj video,.projlist .pj .pthumb{border-radius:0;width:34px;aspect-ratio:1;filter:grayscale(1)}
.projlist .pj.on video,.projlist .pj.on .pthumb{outline:2px solid var(--ink);outline-offset:2px;filter:none}
.projlist .pj .pjt{font-family:var(--wide);font-size:11px;letter-spacing:.3px}
.projlist .pj.new{font-family:var(--wide);font-size:9.5px;letter-spacing:1.5px;color:var(--ink3)}
.actitem{padding:12px 0 16px;border-bottom:1px solid var(--ln)}
.actitem .ai-n{font-family:var(--disp);font-size:54px;line-height:.85;color:var(--ink);opacity:.25}
.actitem.on .ai-n{opacity:1}
.actitem:nth-of-type(2).on .ai-n{color:var(--c1)}.actitem:nth-of-type(3).on .ai-n{color:var(--c2)}.actitem:nth-of-type(4).on .ai-n{color:var(--c3)}.actitem:nth-of-type(5).on .ai-n{color:var(--c4)}.actitem:nth-of-type(6).on .ai-n{color:var(--c5)}
.actitem .ai-t{font-family:var(--wide);font-size:9.5px;letter-spacing:1.2px;color:var(--ink2);margin-top:6px}
.actitem .crumb{font-family:ui-monospace,Menlo,monospace;font-size:10px}
.actitem .pbar{display:none}
/* ---- shot board: duotone cards ---- */
.shotgrid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:38px 24px}
.shot .sthumb{border-radius:0;background:var(--c1);transition:none}
.shot.ac-2 .sthumb{background:var(--c2)}.shot.ac-3 .sthumb{background:var(--c3)}.shot.ac-4 .sthumb{background:var(--c4)}.shot.ac-5 .sthumb{background:var(--c5)}
.shot .sthumb video{filter:grayscale(1) contrast(1.1);mix-blend-mode:multiply;opacity:.92;transition:filter .25s,opacity .25s}
.shot .sthumb .tint{display:none}
.shot .sthumb .noimg{background:transparent;opacity:.35}
.shot:hover .sthumb{transform:none;box-shadow:none}
.shot:hover .sthumb video,.shot.on .sthumb video{filter:none;mix-blend-mode:normal;opacity:1}
.shot.on .sthumb{outline:3px solid var(--ink);outline-offset:4px}
.stpill{left:0;bottom:0;border-radius:0;background:var(--ink)!important;color:var(--cream)!important;font-family:var(--wide);font-size:8.5px;letter-spacing:1.5px;padding:6px 10px;text-transform:uppercase}
.stv,.stseg{border-radius:0;background:var(--cream);color:var(--ink);font-family:var(--wide);font-size:8.5px}
.stcheck input{border-radius:0;accent-color:var(--ink)}
.suid{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:var(--ink3)}
.stitle{font-family:var(--wide);font-size:13px;letter-spacing:.2px;font-weight:400}
/* ---- inspector ---- */
.inspector{padding-left:0}
.inshead{font-family:var(--disp);font-size:44px;color:var(--ink);line-height:.9;letter-spacing:0}
.inshead .crumb{font-family:ui-monospace,Menlo,monospace;font-size:10px}
.institle{font-family:var(--wide);font-size:13px;font-weight:400;margin:8px 0 14px}
.insvid{border-radius:0}
.inssec{font-family:var(--wide);font-size:8.5px;letter-spacing:2.5px;color:var(--ink3);border-top:1px solid var(--ln);padding-top:12px;margin:24px 0 12px}
.knob .k{border-radius:50%;border:2px solid var(--ink);background:transparent;box-shadow:none}
.knob .k::after{background:var(--ink)}
.knob small,.knob b{font-family:var(--wide)}
.fader input[type=range]{accent-color:var(--ink)}
/* ---- script / elements / generations ---- */
.projstrip .proj video,.projstrip .proj .pthumb{border-radius:0;filter:grayscale(1)}
.proj.on video,.proj.on .pthumb{outline:3px solid var(--ink);outline-offset:3px;filter:none}
.proj .ptitle{font-family:var(--wide);font-size:11px;font-weight:400}
.proj .pct,.proj .badge{border-radius:0;background:var(--ink);color:var(--cream);font-family:var(--wide);font-size:9px}
.hero{background:var(--c2);color:var(--ink);padding:24px 34px 28px;margin:22px 0 30px;border:none;min-height:300px;align-items:end}
.hero h1,.hero h1.stack{font-family:var(--disp);font-size:clamp(60px,7.5vw,130px)!important;line-height:.84;letter-spacing:0;max-width:none;text-transform:uppercase}
.hero h1.stack span{display:block}
.hero .heroL>.crumb{font-family:var(--wide);font-size:8.5px;letter-spacing:2px;opacity:.7}
.hero .pill{border-color:currentColor;color:currentColor}
.kpi .stat{font-family:var(--disp);font-size:64px;line-height:.9;color:currentColor}.kpi .stat.g,.kpi .stat.y{color:currentColor}
.kpi .crumb{font-family:var(--wide);font-size:8.5px;letter-spacing:2px;opacity:.75;color:currentColor}
h2,.inssec,.railhead{font-family:var(--wide);font-size:8.5px;letter-spacing:2.5px;color:var(--ink3)}
.drop{border:2px dashed var(--ink);border-radius:0;background:transparent;padding:64px 30px}
.drop b{font-family:var(--disp);font-size:56px;line-height:.9;letter-spacing:0}
.drop .crumb{font-family:ui-monospace,Menlo,monospace;font-size:10.5px}
.chip,.style .pill,.stylechip{border-radius:0}
.stylechip.on,.chip.on{background:var(--ink);color:var(--cream)}
.el{background:var(--c1);padding:14px 14px 0;border-radius:0;display:flex;flex-direction:column;min-height:300px}
.grid .el:nth-child(5n+2){background:var(--c2)}.grid .el:nth-child(5n+3){background:var(--c3)}.grid .el:nth-child(5n+4){background:var(--c4)}.grid .el:nth-child(5n){background:var(--c6)}
.el .b{order:-1;padding:0 0 10px;color:var(--ink)}
.el .tag{font-family:var(--wide);font-size:17px;letter-spacing:-.2px;color:var(--ink)}
.el .b .crumb{font-family:ui-monospace,Menlo,monospace;font-size:10px;color:var(--ink);opacity:.75}
.el img,.el .noimg{border-radius:0;margin-top:auto;filter:grayscale(1) contrast(1.1);mix-blend-mode:multiply;outline:none!important;aspect-ratio:4/5;object-fit:cover;object-position:top}
.el:hover img{filter:none;mix-blend-mode:normal}
.el .noimg{background:transparent;opacity:.4}
.el .ico{border-color:var(--ink);color:var(--ink)}.el .ico.ac{background:var(--ink);color:var(--cream)}
.el .row.st,.el .chip{color:var(--ink)}
.ephead,.acthead{font-family:var(--disp);font-size:30px;letter-spacing:0;border-bottom:2px solid var(--ink);padding:14px 0}
.clipcard video{border-radius:0;filter:grayscale(1);transition:filter .25s}.clipcard:hover video{filter:none}
.panel.chatpanel{border-top:2px solid var(--ink)}
.cmdbar{border-radius:0;border:2px solid var(--ink);background:transparent}
.cmdbar button{border-radius:0;background:var(--ink);color:var(--cream)}
.toast{border-radius:0;background:var(--ink);color:var(--cream);font-family:var(--wide);font-size:11px}
/* dark: ink ground, blocks stay */
html.dark .cmdhead,html.dark .hero,html.dark .el{color:#1d1d1b}
html.dark .cmdhead.pc-5{color:var(--cream)}
html.dark .stpill{background:var(--cream)!important;color:#1d1d1b!important}
html.dark .pill.ac,html.dark .ico.ac,html.dark .cmdbar button{background:var(--cream);color:#1d1d1b}
html.dark .ch-act .pill.ac{background:#1d1d1b;color:var(--cream)}
html.dark .shot.on .sthumb{outline-color:var(--cream)}
html.dark .shot .sthumb,html.dark .proj video,html.dark .proj .pthumb,html.dark .projlist .pj video,html.dark .projlist .pj .pthumb,html.dark .insvid,html.dark .clipcard video,html.dark .el .noimg{box-shadow:none}
.stage.small{padding-right:22px}.stage.small:last-child{padding-right:0}
.cmdhead h1{font-size:clamp(56px,7vw,120px)}
.cmdhead{min-height:0}
html.dark .shot .sthumb{background:var(--c1)}html.dark .shot.ac-2 .sthumb{background:var(--c2)}html.dark .shot.ac-3 .sthumb{background:var(--c3)}html.dark .shot.ac-4 .sthumb{background:var(--c4)}html.dark .shot.ac-5 .sthumb{background:var(--c5)}
html.dark .projlist .pj .pthumb,html.dark .proj .pthumb{background:#2a2925}
.hero{background:var(--c4)}

/* ================= RACK: plugin-grade controls ================= */
.rack{--rk:#1d1d1b;--rkl:#f5eedc;--lcd:#e7a63a;background:var(--rk);color:var(--rkl);padding:18px 18px 14px;margin-top:4px;border-radius:0;position:relative}
.rack::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px);pointer-events:none}
.rack small{font-family:var(--wide);font-size:8px;letter-spacing:1.8px;color:rgba(245,238,220,.6);display:block;text-align:center}
.rack .lcd{display:block;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11px;color:var(--lcd);background:var(--softd);border:1px solid rgba(255,255,255,.08);padding:3px 6px;text-align:center;min-width:56px;margin:6px auto 0;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.rackrow{display:grid;gap:10px;padding:8px 0 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.rackrow:last-child{border:none;padding-bottom:0}
.rackrow.knobs{grid-template-columns:repeat(4,1fr)}
.rk{text-align:center;cursor:ns-resize;user-select:none;touch-action:none}
.rk svg{width:76px;height:76px;display:block;margin:4px auto 0;overflow:visible}
.rk .trk{fill:none;stroke:rgba(255,255,255,.14);stroke-width:3;stroke-linecap:round}
.rk .val{fill:none;stroke:var(--lcd);stroke-width:3;stroke-linecap:round}
.rk line{stroke:rgba(255,255,255,.25);stroke-width:1.5}.rk line.on{stroke:var(--lcd)}
.rk .cap{fill:#2a2a27;stroke:var(--softd);stroke-width:1.5;filter:drop-shadow(0 3px 4px rgba(0,0,0,.6))}
.rk:hover .cap{fill:#333330}
.rk .ptr{stroke:var(--rkl);stroke-width:3;stroke-linecap:round}
.rackrow.mix{grid-template-columns:40px 40px 40px 40px 1fr;gap:14px;align-items:end}
.fd{text-align:center;cursor:ns-resize;user-select:none;touch-action:none;display:flex;flex-direction:column;align-items:center}
.fd .lcd{order:-1;margin:0 0 8px;min-width:40px;padding:3px 2px}
.fdt{position:relative;width:26px;height:128px;background:var(--softd);border:1px solid rgba(255,255,255,.08)}
.fdt i{position:absolute;right:-7px;width:4px;height:1px;background:rgba(255,255,255,.25)}.fdt i.maj{width:7px;right:-10px;background:rgba(255,255,255,.45)}
.fdf{position:absolute;left:11px;width:4px;bottom:0;background:var(--lcd)}
.fdc{position:absolute;left:-4px;width:34px;height:18px;margin-bottom:-9px;background:linear-gradient(#3a3a37,#1b1b19);border:1px solid var(--softd);box-shadow:0 3px 6px rgba(0,0,0,.6)}
.fdc::after{content:'';position:absolute;left:4px;right:4px;top:8px;height:2px;background:var(--rkl)}
.fd small{margin-top:8px}
.vu{text-align:center;display:flex;flex-direction:column;align-items:center}
.vu .lcd{order:-1;margin:0 0 8px;min-width:40px;padding:3px 2px}
.vut{width:26px;height:128px;display:grid;grid-template-rows:repeat(12,1fr);gap:2px;background:var(--softd);padding:3px;border:1px solid rgba(255,255,255,.08)}
.vut i{background:rgba(255,255,255,.06)}.vut i.on{background:#6fcf97}.vut i.on.warm{background:var(--lcd)}.vut i.on.hot{background:#df634c}
.vu small{margin-top:8px}
.eq{display:flex;flex-direction:column;min-width:0}
.eqh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}.eqh small{text-align:left}.eqh .crumb{color:rgba(245,238,220,.5);font-size:9px}
.eq svg{width:100%;height:128px;background:var(--softd);border:1px solid rgba(255,255,255,.08);display:block;touch-action:none}
.eq .gr{stroke:rgba(255,255,255,.08);stroke-width:1}
.eq .fill{fill:rgba(231,166,58,.18)}.eq .ln{fill:none;stroke:var(--lcd);stroke-width:2}
.eq .nd{fill:#1d1d1b;stroke:var(--rkl);stroke-width:2;cursor:ns-resize}.eq .nd:hover{fill:var(--lcd)}
.eqx{display:flex;justify-content:space-between;font-family:ui-monospace,Menlo,monospace;font-size:9px;color:rgba(245,238,220,.45);margin-top:4px;padding:0 4px}
.rackrow.sws{grid-template-columns:repeat(5,1fr);padding-top:14px}
.sw{text-align:center;cursor:pointer;user-select:none}
.sw.lk{cursor:default;opacity:.85}
.swt{width:26px;height:44px;margin:0 auto 6px;background:var(--softd);border:1px solid rgba(255,255,255,.1);position:relative;border-radius:2px}
.swt i{position:absolute;left:3px;right:3px;height:18px;top:22px;background:linear-gradient(#3a3a37,#1b1b19);border:1px solid var(--softd);transition:top .12s}
.sw.on .swt i{top:3px}
.sw.on .swt::after{content:'';position:absolute;left:50%;bottom:5px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--lcd);box-shadow:0 0 6px var(--lcd)}
.sw.on small{color:var(--rkl)}
html.dark .rack{--rk:#111110}
.vu .lcd,.fd .lcd{min-width:44px;font-size:10px;padding:3px 1px}
.rackrow.mix{grid-template-columns:44px 44px 44px 44px 1fr;gap:12px}
/* ---- console ---- */
.rack .mod{padding:10px 0 4px}
.rack .modt{font-family:var(--wide);font-size:8px;letter-spacing:2.5px;color:var(--lcd);margin:0 0 2px;display:flex;align-items:center;gap:8px}
.rack .modt::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.1)}
.rackrow.knobs.k5{grid-template-columns:repeat(5,1fr);gap:6px}
.rackrow.knobs.k5 .rk svg{width:62px;height:62px}
.fdpair{display:grid;grid-template-columns:1fr 1fr;gap:4px;align-items:end}
.fdpair .fdt,.fdpair .vut{height:78px;width:18px}.fdpair .fdc{width:26px;left:-4px;height:14px;margin-bottom:-7px}.fdpair .fdf{left:7px}
.fdpair .fd .lcd,.fdpair .vu .lcd{min-width:30px;font-size:9px;padding:2px 0}
.fdpair .sw{align-self:end;padding-bottom:2px}.fdpair .swt{width:20px;height:36px}.fdpair .swt i{height:14px;top:18px}.fdpair .sw.on .swt i{top:3px}
.fdpair small,.rack .sws small{font-size:7px;letter-spacing:1.2px}
.rackrow.mix.time,.rackrow.mix.time2{grid-template-columns:44px 44px 44px 1fr;gap:12px}
.rackrow.mix.time2{border-bottom:none}
.eq.spd .ln{stroke:#6fcf97}.eq.spd .fill{fill:rgba(111,207,151,.15)}
.rackrow.sws.s6{grid-template-columns:repeat(7,1fr);gap:4px}
.rackrow.sws.s6 .fdt{height:70px;width:18px}.rackrow.sws.s6 .fdc{width:26px;left:-4px;height:14px;margin-bottom:-7px}.rackrow.sws.s6 .fdf{left:7px}.rackrow.sws.s6 .fd .lcd{min-width:30px;font-size:9px;padding:2px 0}
.conhead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1)}
.conhead .ver{display:flex;align-items:center;gap:4px}.conhead .ver small{margin-right:6px;text-align:left}
.vb{font-family:var(--wide);font-size:8.5px;letter-spacing:1px;padding:4px 8px;border:1px solid rgba(255,255,255,.25);background:transparent;color:rgba(245,238,220,.7);cursor:pointer;border-radius:0}
.vb.on{background:var(--rkl);color:#1d1d1b;border-color:var(--rkl)}
.led{font-family:ui-monospace,Menlo,monospace;font-size:9.5px;letter-spacing:.5px;padding:4px 8px;background:var(--softd);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:6px;white-space:nowrap}
.led::before{content:'';width:7px;height:7px;border-radius:50%;background:#6fcf97;box-shadow:0 0 6px #6fcf97}
.led.amber{color:var(--lcd)}.led.amber::before{background:var(--lcd);box-shadow:0 0 6px var(--lcd)}
.led.green{color:#6fcf97}
.rolock{font-family:ui-monospace,Menlo,monospace;font-size:10px;color:var(--lcd);padding:8px 0 2px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.rack.ro .rk,.rack.ro .fd,.rack.ro .sw,.rack.ro .eq .nd{cursor:not-allowed}
.rack.ro .rk .val,.rack.ro .fdf,.rack.ro .eq .ln{filter:saturate(.6)}
.difflist{display:flex;flex-wrap:wrap;gap:4px;padding:8px 0 0}
.dk{font-family:ui-monospace,Menlo,monospace;font-size:9px;color:#1d1d1b;background:var(--lcd);padding:2px 6px}
.prod3{grid-template-columns:170px 1fr 420px}

/* ================= v4.5 — "STATIC" HEAD + SOFT NEUMORPHIC HORIZONTAL CONSOLE ================= */
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@700;800;900&display=swap");
:root{--teal:#2f7c80;--teal2:#3a8f93;--soft:#e8e2d6;--soft2:#efe9de;--softd:#c9c2b4;--mute1:#d9b26a;--mute2:#6f9c98;--mute3:#d28b7a;--mute4:#a9b39a}
/* ---- poster head, Static style ---- */
.cmdhead,.cmdhead.pc-1,.cmdhead.pc-2,.cmdhead.pc-3,.cmdhead.pc-4,.cmdhead.pc-5{background:var(--paper);color:var(--teal);padding:30px 0 0;margin:8px 0 26px;min-height:0;display:block;overflow:visible;border-bottom:18px solid var(--teal)}
.cmdhead .ch-l{position:relative;z-index:1}
.ch-meta{position:absolute;left:34%;top:-2px;z-index:3;gap:42px;margin:0;color:var(--teal)}
.ch-meta i{opacity:.6}
.cmdhead h1{font-family:"Jost","Futura","Avenir Next",sans-serif;font-weight:900;text-transform:none;letter-spacing:-.045em;font-size:clamp(120px,15.5vw,260px);line-height:.82;margin:12px 0 0;white-space:nowrap;overflow:visible;color:var(--teal)}
.cmdhead h1 span{display:inline}
.ch-sub{font-family:var(--wide);font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--teal);margin:8px 0 0 4px}
.ch-still{position:absolute;right:12%;bottom:-18px;top:auto;width:34%;aspect-ratio:16/10;height:auto;z-index:2;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.ch-still video{filter:saturate(.75) contrast(1.05);mix-blend-mode:normal;opacity:1}
.ch-stats{position:absolute;right:0;bottom:22px;z-index:3;gap:22px;align-self:auto;padding:0}
.ch-stats b{font-family:"Jost",sans-serif;font-weight:900;font-size:44px;color:var(--teal)}
.ch-stats span{color:var(--teal)}
.ch-act{position:absolute;left:0;bottom:22px;justify-self:auto}
.ch-act .pill{border-color:var(--teal);color:var(--teal)}.ch-act .pill.ac{background:var(--teal);color:var(--paper);border-color:var(--teal)}
.cmdhead .ch-l{min-height:0;padding-bottom:84px}
.missbar{margin:0 0 22px}
/* ---- the soft console ---- */
.rack{--rk:var(--soft);--rkl:#3a3a36;--lcd:var(--teal);background:var(--rk);color:var(--rkl);padding:16px 22px 18px;margin:0 0 34px;border-radius:22px;box-shadow:10px 10px 28px rgba(120,110,90,.22),-10px -10px 28px rgba(255,255,255,.85)}
.rack::before{display:none}
.rack small{color:#8a867a}
.rack .lcd{color:var(--teal);background:var(--soft);border:none;box-shadow:inset 3px 3px 6px rgba(120,110,90,.25),inset -3px -3px 6px rgba(255,255,255,.8);border-radius:6px;font-weight:600}
.rackrow{border-bottom:none}
.conmods{display:grid;grid-template-columns:1.25fr 1.35fr 1.25fr 1.1fr 1fr;gap:18px;align-items:start}
.rack .mod{padding:12px 14px 10px;border-radius:16px;box-shadow:inset 4px 4px 10px rgba(120,110,90,.16),inset -4px -4px 10px rgba(255,255,255,.75)}
.rack .modt{color:#8a867a}.rack .modt::after{background:rgba(120,110,90,.18)}
.rk .trk{stroke:rgba(120,110,90,.22)}
.rk .val{stroke:var(--teal)}
.rk line{stroke:rgba(120,110,90,.35)}.rk line.on{stroke:var(--teal)}
.rk .cap{fill:var(--soft);stroke:none;filter:drop-shadow(3px 3px 4px rgba(120,110,90,.35)) drop-shadow(-3px -3px 4px rgba(255,255,255,.9))}
.rk:hover .cap{fill:var(--soft2)}
.rk .ptr{stroke:var(--teal);stroke-width:3}
.fdt,.vut,.eq svg,.swt{background:var(--soft);border:none;box-shadow:inset 3px 3px 7px rgba(120,110,90,.28),inset -3px -3px 7px rgba(255,255,255,.8);border-radius:8px}
.fdt i{background:rgba(120,110,90,.35)}.fdt i.maj{background:rgba(120,110,90,.55)}
.fdf{background:var(--teal);border-radius:3px}
.fdc{background:var(--soft);border:none;border-radius:5px;box-shadow:3px 3px 6px rgba(120,110,90,.35),-2px -2px 5px rgba(255,255,255,.9)}
.fdc::after{background:var(--teal)}
.vut i{background:rgba(120,110,90,.12);border-radius:2px}.vut i.on{background:var(--mute2)}.vut i.on.warm{background:var(--mute1)}.vut i.on.hot{background:var(--mute3)}
.eq .gr{stroke:rgba(120,110,90,.18)}.eq .fill{fill:rgba(47,124,128,.14)}.eq .ln{stroke:var(--teal)}.eq.spd .ln{stroke:var(--mute2)}.eq.spd .fill{fill:rgba(111,156,152,.16)}
.eq .nd{fill:var(--soft);stroke:var(--teal)}.eq .nd:hover{fill:var(--teal)}
.eqh .crumb,.eqx{color:#8a867a}
.swt i{background:var(--soft);border:none;border-radius:4px;box-shadow:2px 2px 5px rgba(120,110,90,.35),-2px -2px 4px rgba(255,255,255,.9)}
.sw.on .swt::after{background:var(--teal);box-shadow:0 0 6px var(--teal)}
.sw.on small{color:var(--rkl)}
.conhead{border-bottom:none;padding-bottom:12px}
.contitle{display:flex;align-items:baseline;gap:12px}.contitle b{font-family:"Jost",sans-serif;font-weight:900;font-size:26px;color:var(--teal);letter-spacing:-.02em}.contitle span{font-family:var(--wide);font-size:11px;color:#8a867a}
.conhead .ver{margin-left:auto;margin-right:12px}
.vb{border:none;color:#8a867a;border-radius:8px;box-shadow:3px 3px 6px rgba(120,110,90,.25),-3px -3px 6px rgba(255,255,255,.85);padding:6px 10px}
.vb.on{background:var(--teal);color:var(--paper);box-shadow:inset 2px 2px 5px rgba(0,0,0,.25)}
.led{background:var(--soft);border:none;border-radius:8px;box-shadow:inset 3px 3px 6px rgba(120,110,90,.25),inset -3px -3px 6px rgba(255,255,255,.8);color:var(--teal)}
.led::before{background:var(--mute2);box-shadow:0 0 6px var(--mute2)}
.led.amber{color:#b08a3a}.led.amber::before{background:var(--mute1);box-shadow:0 0 6px var(--mute1)}
.rolock{color:#b08a3a}
.difflist{padding:0 0 10px}.dk{background:var(--mute1);color:#3a3a36;border-radius:4px}
.rack.ro .rk .val,.rack.ro .fdf,.rack.ro .eq .ln{filter:saturate(.4);opacity:.7}
/* inspector lighter now */
.prod3{grid-template-columns:170px 1fr 380px}
html.dark .rack{--rk:#2a2925;--rkl:#e6dfd0;box-shadow:10px 10px 28px rgba(0,0,0,.5),-10px -10px 28px rgba(255,255,255,.04)}
html.dark .rack .mod,html.dark .fdt,html.dark .vut,html.dark .eq svg,html.dark .swt,html.dark .led,html.dark .rack .lcd{box-shadow:inset 4px 4px 10px rgba(0,0,0,.45),inset -4px -4px 10px rgba(255,255,255,.05);background:#2a2925}
html.dark .rk .cap,html.dark .fdc,html.dark .swt i,html.dark .eq .nd{fill:#33322d;background:#33322d}
html.dark .cmdhead{background:var(--bg)}
.conmods{grid-template-columns:1fr 1fr 1fr;grid-template-areas:"cam light perf" "time time fx"}
.conmods .mod:nth-child(1){grid-area:cam}.conmods .mod:nth-child(2){grid-area:time}.conmods .mod:nth-child(3){grid-area:light}.conmods .mod:nth-child(4){grid-area:perf}.conmods .mod:nth-child(5){grid-area:fx}
.conmods .mod:nth-child(2) .rackrow.mix.time,.conmods .mod:nth-child(2) .rackrow.mix.time2{grid-template-columns:44px 44px 44px minmax(220px,1fr)}
.conmods .mod:nth-child(2){display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
.conmods .mod:nth-child(2) .modt{grid-column:1/-1}
.eqh small{white-space:nowrap}.eqh .crumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%}
.eq svg{min-width:0}
.ch-still{right:0;width:30%}
.ch-meta{left:36%}
/* ---- composer + action ---- */
.conact{display:flex;align-items:center;gap:8px}.conact .pill{border-radius:10px;border:none;box-shadow:3px 3px 8px rgba(120,110,90,.3),-3px -3px 8px rgba(255,255,255,.9);color:var(--teal)}.conact .pill.ac{background:var(--teal);color:var(--paper);box-shadow:3px 3px 8px rgba(47,124,128,.35)}
.conhead{display:flex;gap:14px;align-items:center}.conhead .ver{margin-left:auto}
.composer{padding:14px 16px 14px;margin:0 0 16px;border-radius:16px;box-shadow:inset 4px 4px 10px rgba(120,110,90,.16),inset -4px -4px 10px rgba(255,255,255,.75)}
.cmpbox{position:relative}
.cmpbox textarea{width:100%;border:none;border-radius:10px;background:var(--soft);box-shadow:inset 3px 3px 7px rgba(120,110,90,.28),inset -3px -3px 7px rgba(255,255,255,.8);padding:12px 14px;font:600 16px/1.45 "Archivo",Inter,sans-serif;color:#3a3a36;resize:none}
.cmpbox textarea::placeholder{color:#9a968a;font-weight:500}
.cmpmenu{display:none;position:absolute;left:14px;top:100%;z-index:20;min-width:280px;background:var(--soft2);border-radius:12px;box-shadow:8px 8px 24px rgba(120,110,90,.35),-4px -4px 12px rgba(255,255,255,.8);padding:6px;margin-top:4px}
.cmpmenu.on{display:block}
.cmpi{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;cursor:pointer;font-size:12px}
.cmpi b{font-family:ui-monospace,Menlo,monospace;color:var(--teal)}.cmpi span{color:#8a867a;font-size:10.5px;margin-left:auto}.cmpi i{font-style:normal;font-size:9px}
.cmpi.on,.cmpi:hover{background:rgba(47,124,128,.12)}.cmpi.dim{color:#9a968a;cursor:default}
.difflist .crumb{color:#8a867a}
/* ---- v4.7: emotion sliders, composer strip, match shot ---- */
.conmods{grid-template-columns:1.1fr 1fr 1fr;grid-template-areas:"cam light emo" "time time perf"}
.conmods .mod:nth-child(3){grid-area:light}.conmods .mod:nth-child(4){grid-area:emo}.conmods .mod:nth-child(5){grid-area:perf}
.rackrow.knobs.k3{grid-template-columns:1fr 1fr 1.2fr}
.rackrow.sws.s4{grid-template-columns:repeat(4,1fr)}
.audionote{font-family:var(--wide);font-size:8px;letter-spacing:1.8px;color:#9a968a;text-align:center;padding:6px 0 0}
.rack .modt .vb{margin-left:6px;font-size:7.5px;padding:3px 7px}
.emos{display:flex;flex-direction:column;gap:7px;padding:6px 0 2px}
.emo-row{display:grid;grid-template-columns:58px 1fr 36px;align-items:center;gap:8px}
.emo-row small{text-align:left;font-size:7.5px}
.emo-row .lcd{margin:0;min-width:0;padding:2px 0;font-size:9.5px}
.hs{position:relative;height:14px;border-radius:7px;background:var(--soft);box-shadow:inset 2px 2px 5px rgba(120,110,90,.3),inset -2px -2px 5px rgba(255,255,255,.8);cursor:ew-resize;touch-action:none}
.hsf{position:absolute;left:0;top:4px;bottom:4px;border-radius:4px;background:var(--teal);opacity:.8;margin-left:3px}
.hsc{position:absolute;top:-4px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--soft);box-shadow:3px 3px 6px rgba(120,110,90,.35),-2px -2px 5px rgba(255,255,255,.9)}
.hsc::after{content:'';position:absolute;left:8px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--teal)}
.cmpstrip{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;align-items:flex-end;scrollbar-width:thin}
.cmpcat{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--wide);font-size:7.5px;letter-spacing:1.5px;color:#8a867a;padding:6px 0;flex:none;align-self:stretch;border-left:3px solid var(--c4);padding-left:4px}
.cmpt{flex:none;width:78px;cursor:pointer;text-align:center;border-radius:10px;padding:4px 4px 5px;box-shadow:3px 3px 7px rgba(120,110,90,.25),-3px -3px 7px rgba(255,255,255,.85);background:var(--soft)}
.cmpt img,.cmpt .noimg{width:70px;height:70px;object-fit:cover;object-position:top;border-radius:7px;display:block;margin:0 auto 4px;border-bottom:4px solid var(--c4)}
.cmpt b{font-family:ui-monospace,Menlo,monospace;font-size:9px;color:#3a3a36;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmpt.dead{opacity:.45}
.cmpt:hover{transform:translateY(-2px)}
.cat-Characters img,.cat-Characters .noimg,.cmpcat.cat-Characters{border-color:var(--mute1)}
.cat-Creatures img,.cat-Creatures .noimg,.cmpcat.cat-Creatures{border-color:var(--mute3)}
.cat-Props img,.cat-Props .noimg,.cmpcat.cat-Props{border-color:var(--mute4)}
.cat-Locations img,.cat-Locations .noimg,.cmpcat.cat-Locations{border-color:var(--teal)}
.cmpstrip.typing .cmpt:first-of-type{outline:2px solid var(--teal);outline-offset:2px}
.cmpmenu{display:none!important}
.matchgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:12px}
.mshot{cursor:pointer}.mshot video{width:100%;border-radius:8px;display:block}.mshot b{display:block;margin-top:6px;font-family:var(--wide);font-size:11px;font-weight:400}
.rackrow.sws.s4 .fdt{height:70px;width:18px}.rackrow.sws.s4 .fdc{width:26px;left:-4px;height:14px;margin-bottom:-7px}.rackrow.sws.s4 .fdf{left:7px}.rackrow.sws.s4 .fd .lcd{min-width:30px;font-size:9px;padding:2px 0}
/* ================= v4.8 — THE SCORE ================= */
.conmods.v5{grid-template-columns:1.15fr 1fr 1fr;grid-template-areas:"cam light emo" "timing timing perf"}
.conmods.v5 .mod.cam{grid-area:cam}.conmods.v5 .mod.light{grid-area:light}.conmods.v5 .mod.emo{grid-area:emo}.conmods.v5 .mod.timing{grid-area:timing}.conmods.v5 .mod.perf{grid-area:perf}
.beat{margin-left:auto;font-family:ui-monospace,Menlo,monospace;font-size:9px;color:var(--teal);letter-spacing:0;text-transform:none}
.rack .modt{display:flex}
/* score */
.score{margin:4px 0 16px;padding:12px 16px 10px;border-radius:16px;box-shadow:inset 4px 4px 10px rgba(120,110,90,.16),inset -4px -4px 10px rgba(255,255,255,.75)}
.scorehead{display:flex;align-items:flex-end;gap:16px;margin-bottom:6px}.scorehead small{text-align:left;flex:none}
.ruler{position:relative;flex:1;height:12px;margin-left:82px}.ruler span{position:absolute;font-family:ui-monospace,Menlo,monospace;font-size:8.5px;color:#8a867a;transform:translateX(-50%)}
.lane{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:12px;padding:4px 0}
.lane small{text-align:left}.lane.on small{color:var(--teal)}
.lanebar{position:relative;height:22px;border-radius:6px;box-shadow:inset 2px 2px 5px rgba(0,0,0,.18),inset -2px -2px 5px rgba(255,255,255,.5);cursor:copy}
.kf{position:absolute;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--soft);box-shadow:2px 2px 5px rgba(120,110,90,.4),-2px -2px 4px rgba(255,255,255,.9);cursor:grab;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--teal);touch-action:none}
.kf.on{background:var(--teal);color:var(--paper);box-shadow:0 0 0 3px rgba(47,124,128,.25)}
.lanebar.cuts{background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(120,110,90,.15) 9px 10px)}
.cut{position:absolute;top:-3px;bottom:-3px;width:4px;margin-left:-2px;background:var(--mute3);border-radius:2px;cursor:ew-resize;box-shadow:0 0 0 2px var(--soft)}
.onerline{position:absolute;left:4px;right:4px;top:50%;height:3px;margin-top:-1.5px;background:var(--teal);border-radius:2px;opacity:.5}
/* camera pad */
.camwrap{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:center}
.stagepad{position:relative;width:150px;height:150px;border-radius:50%;box-shadow:inset 4px 4px 10px rgba(120,110,90,.3),inset -4px -4px 10px rgba(255,255,255,.8);cursor:crosshair}
.stagepad svg{width:100%;height:100%}
.stagepad .ring{fill:none;stroke:rgba(120,110,90,.25);stroke-width:1}.stagepad .ring.on{stroke:var(--teal);stroke-width:2}
.stagepad .subj{fill:var(--mute1)}.stagepad .subjt{font:700 8px Archivo,sans-serif;fill:#3a3a36;text-anchor:middle}
.stagepad .camico path{fill:var(--teal)}
.padlabels span{position:absolute;left:0;right:0;text-align:center;font-family:var(--wide);font-size:6.5px;letter-spacing:1.5px;color:#9a968a}
.camside{display:flex;flex-direction:column;gap:6px}
.frames,.angarc,.lenses{display:flex;flex-wrap:wrap;gap:4px}
.fchip,.achip,.lchip,.wchip,.tchip{font-family:var(--wide);font-size:7.5px;letter-spacing:.8px;padding:5px 8px;border-radius:8px;cursor:pointer;color:#6a665a;box-shadow:2px 2px 5px rgba(120,110,90,.25),-2px -2px 5px rgba(255,255,255,.85)}
.fchip.on,.achip.on,.lchip.on,.wchip.on,.tchip.on{background:var(--teal);color:var(--paper);box-shadow:inset 2px 2px 4px rgba(0,0,0,.25)}
.moves{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:10px}
.mv{text-align:center;padding:6px 2px;border-radius:10px;cursor:pointer;box-shadow:3px 3px 7px rgba(120,110,90,.25),-3px -3px 7px rgba(255,255,255,.85)}
.mv i{display:block;font-style:normal;font-size:16px;color:var(--teal);line-height:1.1}.mv small{font-size:6.5px;letter-spacing:.8px}
.mv.on{background:var(--teal)}.mv.on i,.mv.on small{color:var(--paper)}
.rackrow.knobs.k2{grid-template-columns:1fr 1fr}
/* light */
.matchbtn{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border:none;border-radius:12px;background:var(--teal);color:var(--paper);cursor:pointer;box-shadow:4px 4px 10px rgba(47,124,128,.35),-2px -2px 6px rgba(255,255,255,.6);margin:6px 0 10px;text-align:left}
.matchbtn b{font-family:var(--wide);font-size:12px;letter-spacing:1.5px;font-weight:400}.matchbtn small{color:rgba(255,255,255,.8);text-align:left;font-size:8px}
.matchbtn.on{background:var(--mute1);color:#3a3a36}.matchbtn.on small{color:#5a564c}
.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.sw8{aspect-ratio:1;border-radius:10px;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;padding:5px;color:#fff;box-shadow:3px 3px 7px rgba(120,110,90,.3);position:relative;overflow:hidden}
.sw8 b{font-family:var(--wide);font-size:7px;letter-spacing:.6px;font-weight:400;text-shadow:0 1px 2px rgba(0,0,0,.5)}.sw8 small{display:none}
.sw8.on{outline:3px solid var(--teal);outline-offset:2px}
.sky{position:relative;height:54px;margin:12px 0 6px;border-radius:10px;background:linear-gradient(90deg,#1e2a57 0%,var(--acc) 22%,#f2b05c 29%,#e9f1f7 45%,#fff6d6 55%,#f2b05c 71%,var(--acc) 79%,#1e2a57 100%);box-shadow:inset 2px 2px 5px rgba(0,0,0,.25);cursor:ew-resize;touch-action:none}
.skyarc{position:absolute;left:25%;right:25%;top:8px;bottom:8px;border:1.5px dashed rgba(255,255,255,.45);border-bottom:none;border-radius:100px 100px 0 0}
.sun{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff3c4;box-shadow:0 0 10px 3px rgba(255,220,120,.9)}
.skyt{position:absolute;left:0;right:0;bottom:2px;display:flex;justify-content:space-between;padding:0 4px;font-family:ui-monospace,Menlo,monospace;font-size:7.5px;color:rgba(255,255,255,.75)}
.skylcd{position:absolute;right:6px;top:6px;margin:0;min-width:44px}
.weather{display:flex;flex-wrap:wrap;gap:4px}
.kelvin{position:relative;height:16px;border-radius:8px;margin-top:10px;background:linear-gradient(90deg,#ff9a3c,#ffd9a0,#fff,#cfe2ff,#9bbcff);cursor:pointer;box-shadow:inset 2px 2px 4px rgba(0,0,0,.2)}
.kpt{position:absolute;top:-3px;width:6px;height:22px;margin-left:-3px;background:#3a3a36;border-radius:3px}
.kelvin .lcd{position:absolute;right:0;top:-26px;margin:0;min-width:48px}
/* wheel */
.wheelwrap{display:grid;grid-template-columns:170px 1fr;gap:14px;align-items:center}
.wheel{position:relative;width:170px;height:170px;border-radius:50%;cursor:crosshair;box-shadow:6px 6px 14px rgba(120,110,90,.35),-4px -4px 10px rgba(255,255,255,.9);touch-action:none;user-select:none}
.wheelfade{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,var(--soft) 0%,rgba(232,226,214,.85) 18%,rgba(232,226,214,0) 62%)}
.petal{position:absolute;transform:translate(-50%,-50%);font-family:var(--wide);font-size:6.5px;letter-spacing:.8px;color:rgba(255,255,255,.95);text-shadow:0 1px 2px rgba(0,0,0,.45);pointer-events:none}
.dot{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--soft);border:3px solid #3a3a36;box-shadow:0 2px 6px rgba(0,0,0,.4);pointer-events:none}
.emoread div{display:grid;grid-template-columns:64px 1fr 28px;align-items:center;gap:6px;margin-bottom:6px}
.emoread b{font-family:var(--wide);font-size:8px;letter-spacing:1px;font-weight:400}.emoread i{display:block;height:8px;border-radius:4px;background:var(--teal)}.emoread span{font-family:ui-monospace,Menlo,monospace;font-size:10px;color:var(--teal);text-align:right}
/* timing */
.modebar{display:flex;align-items:center;gap:14px;margin:6px 0 10px}
.modeseg,.lenseg{display:flex;border-radius:10px;padding:3px;box-shadow:inset 3px 3px 6px rgba(120,110,90,.25),inset -3px -3px 6px rgba(255,255,255,.8)}
.modeseg span,.lenseg span{font-family:var(--wide);font-size:8px;letter-spacing:1.2px;padding:6px 12px;border-radius:8px;cursor:pointer;color:#8a867a}
.modeseg span.on,.lenseg span.on{background:var(--teal);color:var(--paper)}
.lenseg{margin-left:auto}.lenseg span{padding:6px 8px}
.transrow{margin:0 0 10px}.transrow>small{text-align:left;margin-bottom:4px}
.gap{display:grid;grid-template-columns:36px 1fr;align-items:center;gap:8px;margin:4px 0}
.tchips{display:flex;flex-wrap:wrap;gap:4px}
.curves2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.curves2 .eq svg{height:96px}
.conmods.v5 .mod{display:block}
.conmods.v5 .rackrow.knobs.k2,.conmods.v5 .rackrow.knobs.k3{gap:8px}
.conmods.v5 .rackrow.knobs.k2 .rk svg,.conmods.v5 .rackrow.knobs.k3 .rk svg{width:58px;height:58px}
.conmods.v5 .mod.timing .rackrow.knobs.k3{grid-template-columns:1fr 1fr 60px;max-width:420px}
.conmods.v5 .mod.timing .vu .lcd{min-width:44px}
.emoread .crumb{font-size:9.5px;line-height:1.35}
.swatches{margin-bottom:4px}.sw8 b{font-size:6.5px}
/* plutchik */
.conmods.v5{grid-template-columns:1.05fr .95fr 1.15fr}
.pwrap{display:flex;flex-direction:column;align-items:center;gap:8px}
.pwheel{width:100%;max-width:330px;aspect-ratio:1;cursor:crosshair;touch-action:none;user-select:none;border-radius:50%;box-shadow:inset 5px 5px 12px rgba(120,110,90,.25),inset -5px -5px 12px rgba(255,255,255,.85)}
.pwheel svg{width:100%;height:100%;overflow:visible}
.ringd{fill:none;stroke:rgba(60,50,30,.35);stroke-dasharray:3 3;stroke-width:.8}
.pedge{fill:none;stroke:rgba(40,30,10,.45);stroke-width:.9}
.pl{font:500 7px Archivo,Inter,sans-serif;fill:#1d1d1b;text-anchor:middle;pointer-events:none}.pl.dk{fill:#fff;font-weight:600}
.dyad{font:500 7px Archivo,Inter,sans-serif;fill:#5a564c;text-anchor:middle;pointer-events:none}
.dot2{fill:#fff;stroke:#1d1d1b;stroke-width:3;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.emoread2{text-align:center}.emoread2 b{font-family:"Jost",sans-serif;font-weight:900;font-size:26px;letter-spacing:-.01em;text-transform:uppercase;display:block;line-height:1}
.emoread2 .dy{font-family:var(--wide);font-size:9px;letter-spacing:1px;color:var(--teal);display:block;margin-top:2px}
.emoread2 .crumb{display:block;font-size:9.5px;margin-top:4px}
.pl.dk{font-size:6.2px}
/* ================= v5.0 — ACTION HEADINGS + MOOD BOARD ================= */
h2.act,.rack .modt,.railhead.big{font-family:var(--disp);font-weight:400;font-size:24px;letter-spacing:.5px;text-transform:uppercase;color:var(--ink);line-height:1;display:flex;align-items:baseline;gap:10px}
.rack .modt{color:#3a3a36;font-size:22px;margin-bottom:8px}
.rack .modt::after{display:none}
.rack .modt .beat,h2.act .beat{font-family:ui-monospace,Menlo,monospace;font-size:9.5px;letter-spacing:0;text-transform:none;color:var(--teal);margin-left:auto;font-weight:400}
.rack .modt .vb{font-family:var(--wide);font-size:7.5px}
.railhead.big{display:block;font-size:20px;margin-bottom:10px}
.boardhead{display:flex;align-items:center;gap:10px}
.hero .heroL>.crumb{font-family:var(--disp);font-size:22px;letter-spacing:.5px;opacity:.9;font-weight:400}
.drop b{font-size:56px}
html.dark h2.act{color:var(--cream)}
/* mood board */
.eboard{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
.ecol{display:flex;flex-direction:column;gap:3px}
.efam{font-family:var(--wide);font-size:6.5px;letter-spacing:1px;text-align:center;padding:2px 0 3px;white-space:nowrap;overflow:hidden}
.ecell{height:40px;display:flex;align-items:center;justify-content:center;text-align:center;font:600 8.5px/1.1 Archivo,Inter,sans-serif;color:#1d1d1b;border-radius:6px;cursor:pointer;padding:2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 2px 4px rgba(60,50,30,.18);transition:transform .12s}
.ecell.r2{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.ecell:hover{transform:translateY(-2px)}
.ecell.on{outline:3px solid #1d1d1b;outline-offset:-3px;transform:scale(1.06);z-index:1;box-shadow:0 6px 12px rgba(0,0,0,.3)}
.edyrow{display:grid;grid-template-columns:auto repeat(8,1fr);gap:5px;align-items:center;margin-top:8px}
.edyrow small{text-align:left;font-size:6.5px}
.edy{font:600 7.5px/1.1 Archivo,Inter,sans-serif;text-align:center;padding:6px 2px;border-radius:14px;cursor:pointer;color:#1d1d1b;background:linear-gradient(90deg,var(--a),var(--b));opacity:.8;box-shadow:0 2px 4px rgba(60,50,30,.2)}
.edy.on{opacity:1;outline:2px solid #1d1d1b;transform:scale(1.06)}
.emoread2{margin-top:10px}.emoread2 b{font-size:32px}

/* ================= v5.1 — DISCORD LANGUAGE: navy ground, blurple, gradient glows, pill buttons, wide heavy display ================= */
@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;900&family=Noto+Sans:wght@400;500;600;700&display=swap");
:root{--navy:var(--bg);--navy2:var(--card);--navy3:var(--navy3);--blurple:var(--acc);--blurple2:var(--acc3);--pink:var(--acc3);--coral:#ff6b6b;--yellow:#fee75c;--green:var(--ok);--white:#fff;
  --bg:var(--navy);--card:var(--navy2);--paper:var(--navy2);--ink:#fff;--ink2:#c7c9e6;--ink3:#8a8db8;--ln:rgba(255,255,255,.1);--ac:var(--blurple);--ac2:var(--blurple2);--teal:var(--blurple2);--teal2:var(--blurple);
  --soft:var(--navy3);--soft2:#22254f;--softd:#0b0c22;--cream:var(--bg);--c1:#fee75c;--c2:var(--acc);--c3:#ff6b6b;--c4:var(--ok);--c5:var(--acc3);--c6:#eb459e;--mute1:#fee75c;--mute2:var(--acc3);--mute3:#ff6b6b;--mute4:var(--ok);
  --disp:"Unbounded","Archivo Black",sans-serif;--wide:"Unbounded","Archivo Black",sans-serif;--r:16px}
html.dark{--bg:#f6f6fe;--card:#fff;--paper:#fff;--ink:var(--bg);--ink2:#3d4066;--ink3:#7d80a8;--ln:rgba(13,15,43,.1);--soft:#eef0ff;--soft2:#fff;--navy2:#fff;--navy3:#eef0ff;--cream:#f6f6fe}
body{font-family:"Noto Sans",Inter,system-ui,sans-serif;font-weight:500;background:var(--bg) radial-gradient(60% 40% at 80% -10%,rgba(88,101,242,.35),transparent 60%) no-repeat,radial-gradient(40% 30% at 0% 100%,rgba(255,115,250,.18),transparent 60%) no-repeat}
body{background:radial-gradient(60% 40% at 80% -10%,rgba(88,101,242,.35),transparent 60%),radial-gradient(40% 30% at 0% 100%,rgba(255,115,250,.18),transparent 60%),var(--bg)}
.logo{font-family:var(--disp);font-weight:900;font-size:14px;letter-spacing:1px;color:var(--ink)}.logo i{color:var(--blurple2)}
.demo{border-color:var(--blurple2);color:var(--blurple2);border-radius:999px}
.tabs{border-bottom:none;gap:6px;margin:6px 64px 0}
.stage{padding:10px 18px;border-radius:999px;background:transparent}
.stage .t,.stage .n{font-family:"Noto Sans",sans-serif;font-weight:700;font-size:14px;letter-spacing:0;color:var(--ink2)}
.stage.ac{background:var(--blurple)}.stage.ac .t,.stage.ac .n{color:#fff}.stage.ac::after{display:none}
.pill,.ico,button.pill.ac,.vb,.matchbtn,.conact .pill{border-radius:999px;border:none;font-family:"Noto Sans",sans-serif;font-weight:700;text-transform:none;letter-spacing:0;font-size:13px;padding:10px 20px;background:var(--navy3);color:#fff;box-shadow:none}
.pill.ac,.ico.ac,.conact .pill.ac,.cmdbar button,.ch-act .pill.ac{background:var(--blurple);color:#fff;box-shadow:0 8px 24px -8px rgba(88,101,242,.8)}
.pill.ac:hover,.ico.ac:hover{background:var(--blurple2)}
.ico{padding:6px 12px;font-size:11px}
.vb{font-size:11px;padding:6px 12px;color:var(--ink2)}.vb.on{background:#fff;color:var(--navy)}
html.dark .pill,html.dark .ico,html.dark .vb{background:#e4e6ff;color:var(--navy)}
input,textarea,select{border-radius:12px;border:none;background:var(--navy3);color:var(--ink)}
html.dark input,html.dark textarea,html.dark select{background:#eef0ff}
.panel{background:transparent}
.panel.chatpanel,.cmdbar{border:none;background:var(--navy2);border-radius:24px;padding:18px}
.cmdbar{padding:6px}
/* ---- headings ---- */
h2.act,.rack .modt,.railhead.big,.cmdhead h1,.hero h1,.drop b,.ephead,.acthead,.inshead,.contitle b,.emoread2 b,.fread b,.ch-stats b,.kpi .stat,.actitem .ai-n{font-family:var(--disp);font-weight:900;letter-spacing:-.02em;text-transform:uppercase}
h2.act,.railhead.big{font-size:20px;color:var(--ink)}
.rack .modt{font-size:18px;color:#fff}html.dark .rack .modt{color:var(--navy)}
.cmdhead,.cmdhead.pc-1,.cmdhead.pc-2,.cmdhead.pc-3,.cmdhead.pc-4,.cmdhead.pc-5{background:linear-gradient(135deg,var(--navy3) 0%,var(--bg) 60%);color:#fff;border-bottom:none;border-radius:32px;padding:34px 40px 30px;position:relative;overflow:hidden;box-shadow:0 30px 80px -40px rgba(88,101,242,.6)}
.cmdhead::before{content:'';position:absolute;right:-10%;top:-40%;width:60%;height:160%;background:radial-gradient(closest-side,rgba(88,101,242,.55),rgba(255,115,250,.25) 50%,transparent 75%);filter:blur(20px);pointer-events:none}
.cmdhead h1{font-size:clamp(48px,6.4vw,104px);line-height:.95;color:#fff;white-space:normal;letter-spacing:-.03em}
.ch-sub{color:var(--ink2);font-family:"Noto Sans",sans-serif;font-weight:700;letter-spacing:0;font-size:18px;text-transform:none;margin-top:8px}
.ch-meta{position:static;margin:0 0 20px;color:var(--ink2)}.ch-meta i{color:var(--ink3);opacity:1}
.ch-still{right:40px;bottom:30px;width:26%;border-radius:20px;overflow:hidden;box-shadow:0 20px 40px -16px rgba(0,0,0,.7)}
.ch-stats{right:40px;bottom:auto;top:34px}.ch-stats b{color:#fff;font-size:40px}.ch-stats span{color:var(--ink3)}
.ch-act{left:40px;bottom:30px}.ch-act .pill{background:var(--navy3);color:#fff;border:none}
.cmdhead .ch-l{padding-bottom:70px}
html.dark .cmdhead{background:linear-gradient(135deg,#e9ebff,#fff 60%);color:var(--navy)}html.dark .cmdhead h1{color:var(--navy)}html.dark .ch-stats b{color:var(--navy)}
.missbar{color:var(--coral)}
/* ---- rails / board ---- */
.projlist .pj .pjt{font-family:"Noto Sans",sans-serif;font-weight:700;font-size:13px}
.projlist .pj.on video,.projlist .pj.on .pthumb,.proj.on video,.proj.on .pthumb{outline-color:var(--blurple)}
.actitem .ai-n{font-size:44px;color:var(--ink);opacity:.25}.actitem.on .ai-n{opacity:1;color:var(--blurple2)}
.actitem .ai-t{font-family:"Noto Sans",sans-serif;font-weight:700;font-size:11px;letter-spacing:.5px}
.shot .sthumb{border-radius:18px}.shot.on .sthumb{outline:3px solid var(--blurple2);outline-offset:4px}
.shot .sthumb video{filter:none;mix-blend-mode:normal;opacity:1}
.stpill{background:var(--blurple)!important;color:#fff!important;border-radius:999px;left:10px;bottom:10px;font-family:"Noto Sans",sans-serif;font-weight:700;font-size:10px;letter-spacing:.3px;text-transform:none}
.stv,.stseg{border-radius:999px;background:#fff;color:var(--navy);font-family:"Noto Sans",sans-serif;font-weight:700}
.stitle{font-family:"Noto Sans",sans-serif;font-weight:700;font-size:14px}
.inshead{font-size:34px;color:var(--ink)}
.insvid{border-radius:18px}
/* ---- the console: dark glass ---- */
.rack{--rk:var(--navy2);--rkl:#fff;--lcd:var(--blurple2);background:var(--navy2);color:#fff;border-radius:28px;box-shadow:0 40px 80px -40px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06)}
html.dark .rack{--rk:#fff;--rkl:var(--navy);background:#fff;color:var(--navy);box-shadow:0 30px 60px -30px rgba(13,15,43,.3)}
.rack small{color:var(--ink3)}
.rack .lcd{color:var(--blurple2);background:var(--softd);box-shadow:none;border-radius:8px}
html.dark .rack .lcd{background:#eef0ff;color:var(--blurple)}
.rack .mod,.score,.composer{background:var(--navy3);box-shadow:none;border-radius:20px}
html.dark .rack .mod,html.dark .score,html.dark .composer{background:#f3f4ff}
.rk .cap{fill:var(--navy3);stroke:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}html.dark .rk .cap{fill:#fff;filter:drop-shadow(0 4px 8px rgba(13,15,43,.2))}
.rk .trk{stroke:rgba(255,255,255,.12)}html.dark .rk .trk{stroke:rgba(13,15,43,.12)}
.rk .val,.rk .ptr{stroke:var(--blurple2)}.rk line.on{stroke:var(--blurple2)}
.fdt,.vut,.eq svg,.swt,.hs{background:var(--softd);box-shadow:none}html.dark .fdt,html.dark .vut,html.dark .eq svg,html.dark .swt{background:#e4e6ff}
.fdf,.hsf{background:var(--blurple2)}.fdc,.hsc,.swt i{background:var(--navy3);box-shadow:0 3px 8px rgba(0,0,0,.5)}html.dark .fdc,html.dark .swt i{background:#fff}
.fdc::after{background:var(--blurple2)}
.vut i.on{background:var(--green)}.vut i.on.warm{background:var(--yellow)}.vut i.on.hot{background:var(--coral)}
.eq .fill{fill:rgba(88,101,242,.25)}.eq .ln{stroke:var(--blurple2)}.eq.spd .ln{stroke:var(--green)}.eq.spd .fill{fill:rgba(87,242,135,.18)}
.eq .nd{fill:var(--navy);stroke:#fff}.eq .nd:hover{fill:var(--blurple)}
.sw.on .swt::after{background:var(--green);box-shadow:0 0 8px var(--green)}
.led{background:var(--softd);box-shadow:none;border-radius:999px;color:var(--blurple2)}.led.amber{color:var(--yellow)}.led.amber::before{background:var(--yellow);box-shadow:0 0 6px var(--yellow)}.led.green{color:var(--green)}.led::before{background:var(--green)}
.dk{background:var(--yellow);color:var(--navy);border-radius:999px;padding:3px 9px}
.contitle b{font-size:24px;color:#fff}html.dark .contitle b{color:var(--navy)}
.lanebar{box-shadow:none;border-radius:999px}.lanebar.cuts{background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(255,255,255,.12) 9px 10px)}
.kf{background:#fff;color:var(--navy);box-shadow:0 3px 8px rgba(0,0,0,.5)}.kf.on{background:var(--blurple);color:#fff;box-shadow:0 0 0 4px rgba(88,101,242,.35)}
.cut{background:var(--coral);box-shadow:0 0 0 2px var(--navy3)}.onerline{background:var(--blurple2)}
.fchip,.achip,.lchip,.wchip,.tchip,.mv,.modeseg,.lenseg,.edy{box-shadow:none;background:var(--softd);color:var(--ink2);border-radius:999px}
.mv{border-radius:14px}.mv i{color:#fff}html.dark .mv i{color:var(--navy)}
.fchip.on,.achip.on,.lchip.on,.wchip.on,.tchip.on,.modeseg span.on,.lenseg span.on,.mv.on{background:var(--blurple);color:#fff;box-shadow:none}
.stagepad{box-shadow:none;background:var(--softd)}.stagepad .ring{stroke:rgba(255,255,255,.15)}.stagepad .ring.on{stroke:var(--blurple2)}.stagepad .camico path{fill:var(--blurple2)}.stagepad .subj{fill:var(--yellow)}
.matchbtn{background:linear-gradient(90deg,var(--blurple),var(--pink));color:#fff;border-radius:18px;box-shadow:0 12px 30px -10px rgba(255,115,250,.6)}.matchbtn small{color:rgba(255,255,255,.85)}
.matchbtn.on{background:var(--green);color:var(--navy)}.matchbtn.on small{color:rgba(13,15,43,.7)}
.sw8{border-radius:14px;box-shadow:none}.sw8.on{outline:3px solid #fff}
.sky{border-radius:14px;box-shadow:none}.kelvin{box-shadow:none}.kpt{background:#fff}
.cmpbox textarea{background:var(--softd);color:#fff;box-shadow:none;border-radius:16px;font-family:"Noto Sans",sans-serif}
.cmpt{background:var(--softd);box-shadow:none;border-radius:12px}.cmpt b{color:#fff}.cmpcat{color:var(--ink3)}
/* ---- fluid mood ---- */
.fluidwrap{display:grid;grid-template-columns:1fr 150px;gap:14px;align-items:center}
.fluid{position:relative;width:100%;aspect-ratio:1;border-radius:28px;cursor:crosshair;touch-action:none;user-select:none;overflow:hidden;filter:saturate(1.15)}
.fcore{position:absolute;inset:0;background:radial-gradient(circle,rgba(13,15,43,.9) 0%,rgba(13,15,43,.35) 22%,transparent 45%);pointer-events:none}
.ffam{position:absolute;transform:translate(-50%,-50%);font-family:var(--disp);font-weight:900;font-size:7px;letter-spacing:.5px;color:rgba(255,255,255,.9);text-shadow:0 1px 4px rgba(0,0,0,.6);pointer-events:none}
.fdy{position:absolute;transform:translate(-50%,-50%);font:700 7.5px "Noto Sans",sans-serif;color:#fff;background:rgba(13,15,43,.45);padding:3px 7px;border-radius:999px;cursor:pointer;backdrop-filter:blur(4px)}
.fdy:hover{background:#fff;color:var(--navy)}
.fdot{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#fff;border:3px solid var(--navy);box-shadow:0 0 0 6px var(--g),0 0 30px 10px var(--g);pointer-events:none}
.fread b{display:block;font-size:20px;line-height:1.05;word-break:break-word}
.fscale{display:flex;align-items:center;gap:6px;margin:8px 0 4px;font:600 8px "Noto Sans",sans-serif;color:var(--ink3)}.fscale i{flex:1;height:6px;border-radius:3px}
.fread .crumb{font-size:10px;line-height:1.35}
/* ---- script / elements / generations ---- */
.drop{border:2px dashed rgba(255,255,255,.2);border-radius:28px;background:var(--navy2)}.drop b{font-size:44px;color:#fff}html.dark .drop b{color:var(--navy)}
.hero{background:linear-gradient(135deg,var(--navy3),var(--bg) 60%);border-radius:32px;color:#fff}.hero h1,.hero h1.stack{font-size:clamp(44px,5.6vw,92px)!important;letter-spacing:-.03em}.hero .heroL>.crumb{font-size:16px;color:var(--blurple2)}
.kpi .stat{color:#fff;font-size:40px}
html.dark .hero{background:linear-gradient(135deg,#e9ebff,#fff 60%);color:var(--navy)}html.dark .kpi .stat{color:var(--navy)}
.el{border-radius:20px;padding:14px}.el .tag{font-family:"Noto Sans",sans-serif;font-weight:800;font-size:15px}.el img,.el .noimg{filter:none;mix-blend-mode:normal;border-radius:12px}
.ephead,.acthead{font-size:22px;border-bottom:1px solid var(--ln);color:var(--ink)}
.clipcard video{border-radius:14px;filter:none}
.proj video,.proj .pthumb{border-radius:14px;filter:none}.projlist .pj video,.projlist .pj .pthumb{border-radius:8px;filter:none}
.proj .pthumb,.projlist .pj .pthumb{background:var(--navy3)}
.toast{border-radius:999px;background:var(--blurple);color:#fff;font-family:"Noto Sans",sans-serif;font-weight:700}
.top{background:transparent}
html.dark .stage .t,html.dark .stage .n{color:var(--ink2)}html.dark .stage.ac .t,html.dark .stage.ac .n{color:#fff}
/* ================= v5.2 — calmer titles · semantic colour ================= */
.cmdhead h1{font-size:clamp(36px,4.2vw,60px)}.cmdhead .ch-l{padding-bottom:56px}.cmdhead,.cmdhead.pc-1,.cmdhead.pc-2,.cmdhead.pc-3,.cmdhead.pc-4,.cmdhead.pc-5{padding:26px 36px 24px}
.ch-sub{font-size:15px}.ch-stats b{font-size:32px}.ch-still{width:22%;bottom:24px}
.hero h1,.hero h1.stack{font-size:clamp(32px,3.8vw,54px)!important}.hero{padding:22px 30px 24px;min-height:0}.kpi .stat{font-size:32px}
/* semantic colours: green = go/render · blurple = select/navigate · amber = light · pink = mood & new · coral = stop/destructive · yellow = pending change */
.pill.go,.ico.go{background:linear-gradient(90deg,var(--ok),#3ddc84);color:var(--bg);box-shadow:0 10px 26px -10px rgba(87,242,135,.7)}
.pill.go:hover{background:#7bf5a3}
.ch-act .pill.ac{background:linear-gradient(90deg,var(--ok),#3ddc84);color:var(--bg)}
.ch-act .pill.ac:disabled{background:var(--navy3);color:var(--ink3);box-shadow:none}
.vb.newshot{background:transparent;border:2px solid var(--pink);color:var(--pink)}.vb.newshot.on{background:var(--pink);color:var(--bg)}
.ico[title*="cancel"],.ico[title*="Stop"]{background:rgba(255,107,107,.15);color:var(--coral)}
.dk{background:var(--yellow);color:var(--bg)}
.stpill.rendered{background:var(--green)!important;color:var(--bg)!important}.stpill.rendering{background:var(--yellow)!important;color:var(--bg)!important}.stpill.blocked,.stpill.failed{background:var(--coral)!important;color:var(--bg)!important}.stpill.draft{background:var(--navy3)!important;color:#fff!important}
/* one accent per module */
.mod.cam .fchip.on,.mod.cam .achip.on,.mod.cam .lchip.on,.mod.cam .mv.on{background:var(--blurple);color:#fff}
.mod.light{--acc:var(--warn)}.mod.light .wchip.on{background:var(--warn);color:var(--bg)}.mod.light .sw8.on{outline-color:var(--warn)}.mod.light .kpt{background:var(--warn)}.mod.light .sun{box-shadow:0 0 10px 3px rgba(240,163,58,.95)}
.mod.light .matchbtn{background:linear-gradient(90deg,var(--warn),var(--acc3))}
.mod.emo .beat,.mod.emo .modt{color:#fff}
.mod.timing .modeseg span.on,.mod.timing .lenseg span.on,.mod.timing .tchip.on{background:var(--green);color:var(--bg)}
.mod.timing .rk .val,.mod.timing .rk .ptr{stroke:var(--green)}.mod.timing .rk line.on{stroke:var(--green)}.mod.timing .lcd{color:var(--green)}
.mod.perf .rk .val,.mod.perf .rk .ptr{stroke:var(--coral)}.mod.perf .rk line.on{stroke:var(--coral)}.mod.perf .lcd{color:var(--coral)}.mod.perf .sw.on .swt::after{background:var(--coral);box-shadow:0 0 8px var(--coral)}
.lane:nth-child(2) small{color:var(--blurple2)}.lane:nth-child(3) small{color:var(--warn)}.lane:nth-child(4) small{color:var(--pink)}.lane.cutlane small{color:var(--green)}
.lane.on small{text-decoration:underline}
.kf.on{background:#fff;color:var(--navy);box-shadow:0 0 0 4px rgba(255,255,255,.25)}
.cut{background:var(--green)}
.stage.ac{background:#fff}.stage.ac .t,.stage.ac .n{color:var(--navy)}
.cmpt:hover{outline:2px solid var(--pink)}
html.dark .stage.ac{background:var(--navy)}html.dark .stage.ac .t,html.dark .stage.ac .n{color:#fff}
html.dark .mod.emo .modt,html.dark .mod.emo .beat{color:var(--navy)}
/* ================= v5.3 — softer light mode · neumorphic depth in both modes ================= */
html.dark{--bg:#dcdeec;--card:#e6e8f4;--paper:#e6e8f4;--navy2:#e6e8f4;--navy3:#d3d6e8;--softd:#c9ccdf;--soft:#e6e8f4;--ink:#1b1d3d;--ink2:#44476b;--ink3:#7a7da0;--ln:rgba(27,29,61,.12)}
html.dark body{background:radial-gradient(60% 40% at 80% -10%,rgba(88,101,242,.18),transparent 60%),radial-gradient(40% 30% at 0% 100%,rgba(255,115,250,.12),transparent 60%),var(--bg)}
:root{--neu-out:8px 8px 20px rgba(0,0,0,.45),-6px -6px 16px rgba(255,255,255,.045);--neu-in:inset 5px 5px 12px rgba(0,0,0,.45),inset -4px -4px 10px rgba(255,255,255,.04);--neu-btn:4px 4px 10px rgba(0,0,0,.4),-3px -3px 8px rgba(255,255,255,.05)}
html.dark{--neu-out:8px 8px 20px rgba(27,29,61,.18),-6px -6px 16px rgba(255,255,255,.9);--neu-in:inset 5px 5px 12px rgba(27,29,61,.16),inset -4px -4px 10px rgba(255,255,255,.85);--neu-btn:4px 4px 10px rgba(27,29,61,.18),-3px -3px 8px rgba(255,255,255,.9)}
.cmdhead,.cmdhead.pc-1,.cmdhead.pc-2,.cmdhead.pc-3,.cmdhead.pc-4,.cmdhead.pc-5,.hero,.rack,.panel.chatpanel,.drop{box-shadow:var(--neu-out)}
html.dark .cmdhead,html.dark .hero{background:linear-gradient(135deg,#eef0fb,#e0e2f0 60%)}
html.dark .rack,html.dark .panel.chatpanel,html.dark .drop{background:var(--card)}
.rack .mod,.score,.composer{box-shadow:var(--neu-in)}
html.dark .rack .mod,html.dark .score,html.dark .composer{background:var(--card)}
.pill,.ico,.vb,.fchip,.achip,.lchip,.wchip,.tchip,.mv,.modeseg,.lenseg,.edy,.cmpt,.stage{box-shadow:var(--neu-btn)}
.stage{background:var(--card)}
.pill.go,.pill.ac,.ico.ac,.vb.on,.fchip.on,.achip.on,.lchip.on,.wchip.on,.tchip.on,.mv.on,.stage.ac{box-shadow:inset 3px 3px 8px rgba(0,0,0,.25),inset -2px -2px 6px rgba(255,255,255,.12)}
.fdt,.vut,.eq svg,.swt,.hs,.stagepad,.lanebar,.cmpbox textarea,.rack .lcd,.led,.kelvin,.sky,input,textarea,select{box-shadow:var(--neu-in)}
.rk .cap{filter:drop-shadow(4px 4px 6px rgba(0,0,0,.5)) drop-shadow(-3px -3px 5px rgba(255,255,255,.05))}
html.dark .rk .cap{fill:#e6e8f4;filter:drop-shadow(4px 4px 6px rgba(27,29,61,.25)) drop-shadow(-3px -3px 5px rgba(255,255,255,.95))}
.fdc,.hsc,.swt i,.kf,.cut{box-shadow:var(--neu-btn)}
.shot .sthumb{box-shadow:var(--neu-out)}
.sw8{box-shadow:var(--neu-btn)}
.fluid{box-shadow:var(--neu-out)}
.el{box-shadow:var(--neu-out)}
html.dark .stpill.draft{background:var(--navy3)!important;color:var(--ink)!important}
html.dark .cmpbox textarea,html.dark .rack .lcd{background:var(--softd);color:var(--ink)}
html.dark .cmpt b,html.dark .fread .crumb{color:var(--ink)}
html.dark .vb{color:var(--ink2)}html.dark .vb.on{background:var(--navy);color:#fff}
html.dark .mv i{color:var(--ink)}
html.dark .fchip,html.dark .achip,html.dark .lchip,html.dark .wchip,html.dark .tchip,html.dark .modeseg,html.dark .lenseg{background:var(--card);color:var(--ink2)}
html.dark .stagepad,html.dark .lanebar.cuts,html.dark .fdt,html.dark .vut,html.dark .eq svg,html.dark .swt{background:var(--softd)}
html.dark .kf{background:#fff;color:var(--navy)}
html.dark .cmdhead::before{opacity:.5}
html.dark a,html.dark .demo{color:var(--blurple);border-color:var(--blurple)}
html.dark .missbar a{color:var(--blurple)}
/* ================= EDIT TAB ================= */
.edhead{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:10px 0 16px}
.seqpick{display:flex;gap:6px;flex-wrap:wrap}.seqpick .vb small{opacity:.6}
.edact{display:flex;gap:8px;align-items:center;margin-left:auto}
.edbody{display:grid;grid-template-columns:220px 1fr;gap:18px;margin-bottom:16px}
.bin{background:var(--card);border-radius:20px;padding:14px;box-shadow:var(--neu-in);max-height:520px;overflow:auto}
.binlist{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.binclip{cursor:grab;border-radius:12px;padding:6px;background:var(--navy3);box-shadow:var(--neu-btn)}html.dark .binclip{background:var(--card)}
.binclip video{width:100%;border-radius:8px;display:block}.binclip b{display:block;font-size:12px;margin-top:4px}
.program{display:flex;flex-direction:column;gap:12px}
.monitor{background:#000;border-radius:20px;overflow:hidden;box-shadow:var(--neu-out)}
.monitor video{width:100%;aspect-ratio:16/9;display:block;background:#000;max-height:420px;object-fit:contain}
.monbar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--card)}
.monbar .lcd{margin:0;font-size:13px;padding:4px 10px}
.tl{position:relative;overflow-x:auto;background:var(--card);border-radius:20px;padding:8px 0 16px;box-shadow:var(--neu-in);user-select:none}
.ruler2{position:relative;height:18px;margin:0 16px}.ruler2 span{position:absolute;font-family:ui-monospace,Menlo,monospace;font-size:9px;color:var(--ink3);transform:translateX(-50%)}
.track{position:relative;height:92px;margin:4px 16px 0;background:repeating-linear-gradient(90deg,transparent 0 27px,rgba(255,255,255,.04) 27px 28px);border-radius:10px}
.tclip{position:absolute;top:6px;height:80px;border-radius:12px;background:linear-gradient(180deg,#2b2f6e,var(--navy3));box-shadow:var(--neu-btn);cursor:grab;overflow:hidden;padding:8px 12px;border:2px solid transparent;touch-action:none}
html.dark .tclip{background:linear-gradient(180deg,#fff,#e6e8f4)}
.tclip.on{border-color:var(--blurple2);box-shadow:0 0 0 3px rgba(88,101,242,.35)}
.tclip b{font-family:"Noto Sans",sans-serif;font-weight:800;font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tclip .crumb{font-family:ui-monospace,Menlo,monospace;font-size:9.5px;white-space:nowrap}
.tclip .th{position:absolute;inset:0;background-size:cover;opacity:.25;pointer-events:none}
.tedge{position:absolute;top:0;bottom:0;width:10px;cursor:ew-resize;background:rgba(88,101,242,.0)}.tedge.l{left:0;border-left:3px solid var(--blurple2);border-radius:10px 0 0 10px}.tedge.r{right:0;border-right:3px solid var(--blurple2);border-radius:0 10px 10px 0}
.tedge:hover{background:rgba(88,101,242,.35)}
.gap2{position:absolute;top:6px;height:80px;border-radius:12px;border:2px dashed rgba(255,115,250,.45);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--pink);font:700 10px "Noto Sans",sans-serif;letter-spacing:1px}
.gap2.tail{border-style:dotted;color:var(--ink3);border-color:var(--ln)}
.gap2.on,.gap2:hover{background:rgba(255,115,250,.12)}
.playhead{position:absolute;top:8px;bottom:16px;width:2px;background:var(--green);margin-left:16px;pointer-events:none;box-shadow:0 0 8px var(--green)}
.playhead::before{content:'';position:absolute;top:-2px;left:-6px;border:7px solid transparent;border-top:9px solid var(--green)}
.nmark{position:absolute;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--yellow);margin-left:-4px;box-shadow:0 0 6px var(--yellow)}
.notes{background:var(--card);border-radius:16px;padding:12px 14px;box-shadow:var(--neu-in);display:flex;flex-direction:column;gap:6px}
.note{display:flex;gap:8px;align-items:center;font-size:13px;cursor:pointer;padding:4px 6px;border-radius:8px}.note:hover{background:rgba(255,255,255,.05)}.note b{font-family:ui-monospace,Menlo,monospace;color:var(--yellow);font-size:11px}.note.done{opacity:.45;text-decoration:line-through}.note .ico{margin-left:auto}
.gapfill{background:var(--card);border-radius:16px;padding:12px 14px;box-shadow:var(--neu-in)}
.frames{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}.frames::before{content:'→';grid-column:2;grid-row:1;font-size:24px;color:var(--pink)}
.fr{display:flex;flex-direction:column;gap:4px}.fr:first-child{grid-column:1}.fr:last-child{grid-column:3}.fr canvas{width:100%;border-radius:10px;background:#000;display:block}.fr small{text-align:left}
.fillbar{display:flex;align-items:center;gap:10px;padding:10px 14px;margin-bottom:10px;border-radius:14px;background:rgba(255,115,250,.12);border:1px solid rgba(255,115,250,.4)}
.fillbar b{font-family:var(--wide);font-size:10px;letter-spacing:1px;color:var(--pink)}.fillbar img{height:44px;border-radius:6px}.fillbar span{color:var(--pink)}.fillbar .vb{margin-left:auto}
.monitor video{max-height:300px}
.fr canvas{max-height:130px;object-fit:cover}
.edbody{margin-bottom:12px}
.edwrap .rack{margin:0}
.edwrap .conmods{grid-template-columns:1fr 1fr 1fr}
/* ================= v5.6 — real estate: one-row header, 16:9 viewer, wide timeline, 2-row bin ================= */
.top{padding:10px 28px;gap:12px;min-height:56px}
.tabs{position:absolute;left:190px;top:10px;margin:0;gap:2px;z-index:31}
.stage{padding:8px 12px}.stage .t,.stage .n{font-size:12px}.stage .n{display:none}
.top .crumb{display:none}.top .pill{padding:7px 14px;font-size:12px}
.wrap{padding:12px 28px 80px;max-width:none}
.demo{top:14px;left:auto;right:360px;transform:none;font-size:8px;padding:3px 8px}
h2.act{font-size:16px}.rack .modt{font-size:15px}
/* production / generations heads → compact bars */
.cmdhead,.cmdhead.pc-1,.cmdhead.pc-2,.cmdhead.pc-3,.cmdhead.pc-4,.cmdhead.pc-5{padding:16px 22px;border-radius:18px;margin:4px 0 14px;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:22px}
.cmdhead .ch-l{padding-bottom:0}.cmdhead h1{font-size:26px;line-height:1.1;display:inline;margin-right:10px}.ch-sub{display:inline;font-size:13px;color:var(--ink2)}.ch-meta{display:none}.ch-still{display:none}.cmdhead::before{opacity:.35}
.ch-stats{position:static;gap:18px}.ch-stats b{font-size:22px}.ch-stats span{font-size:8px}
.ch-act{position:static;display:flex;gap:8px}
.hero{padding:14px 22px;border-radius:18px;margin:4px 0 14px;min-height:0;display:grid;grid-template-columns:1fr auto;align-items:center;gap:22px}
.hero h1.one{font-size:24px!important;line-height:1.1;letter-spacing:-.01em;display:inline;margin-right:10px}.hero .heroL>.crumb{display:inline;font-size:10px;letter-spacing:1.5px;margin-right:12px}.hero .logline{display:inline;font-size:12px;color:var(--ink3)}
.kpi{display:flex;gap:18px;align-items:center}.kpi .stat{font-size:22px}.kpi .crumb{font-size:8px}
.prod3{grid-template-columns:150px 1fr 340px;gap:24px}
.score{padding:10px 14px}
/* edit */
.edhead{margin:2px 0 10px}
.edtop{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start}
.monframe{aspect-ratio:16/9;background:#000;width:100%;max-height:48vh}
.monframe video{width:100%;height:100%;object-fit:contain;display:block;max-height:none}
.monitor{border-radius:16px}
.edside{display:flex;flex-direction:column;gap:10px;max-height:calc(48vh + 48px);overflow:auto}
.tlwrap{margin:12px 0 0}
.tlhead{display:flex;align-items:center;gap:12px;padding:0 4px 6px}.tlhead small{font-family:var(--wide);font-size:8px;letter-spacing:1.8px;color:var(--ink3)}
.tl{padding:6px 0 10px;border-radius:14px}
.track{height:74px}.tclip,.gap2{height:62px;top:6px}.tclip{padding:6px 10px}
.bin{margin-top:12px;max-height:none;overflow:visible;padding:10px 14px 12px;border-radius:16px}
.binlist{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:var(--bz,120px);gap:8px;overflow-x:auto;margin-top:4px;padding-bottom:6px;scrollbar-width:thin}
.binclip{padding:4px;border-radius:10px}.binclip video{aspect-ratio:16/9;object-fit:cover}.binclip b{font-size:10px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.edwrap .rack{margin:12px 0 0}
.notes{padding:10px 12px}
.gapfill{padding:10px 12px}.frames{grid-template-columns:1fr 1fr;gap:8px}.frames::before{display:none}.fr:first-child,.fr:last-child{grid-column:auto}.fr canvas{max-height:90px}
.stage.small{margin:0;padding:8px 12px}.stage.small:first-of-type{margin-left:0}
.tabs{left:170px}
.monframe{height:min(46vh,520px);width:auto;max-width:100%;aspect-ratio:16/9;margin:0 auto}
.monitor{display:flex;flex-direction:column;align-items:stretch}
.clipgrid,.gengrid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.projstrip{gap:10px;margin-bottom:6px}.proj{flex-basis:150px}.proj video,.proj .pthumb{aspect-ratio:16/9}

/* ================= v6 — SOFT · PREMIUM · MINIMAL ================= */
:root{--bg:var(--navy);--card:var(--card);--navy:var(--navy);--navy2:var(--card);--navy3:var(--navy3);--softd:var(--navy);--soft:var(--card);--ink:#f1f1f6;--ink2:#b9bacb;--ink3:#7d7f95;--ln:rgba(255,255,255,.07);
  --blurple:var(--acc);--blurple2:var(--acc3);--pink:var(--acc3);--green:var(--ok);--yellow:#f2d06b;--coral:#ff8a7a;--teal:var(--blurple2);
  --neu-out:10px 10px 24px rgba(0,0,0,.45),-8px -8px 20px rgba(255,255,255,.035);--neu-in:inset 5px 5px 12px rgba(0,0,0,.4),inset -4px -4px 10px rgba(255,255,255,.035);--neu-btn:5px 5px 12px rgba(0,0,0,.4),-4px -4px 10px rgba(255,255,255,.04)}
html.dark{--bg:#e6e6ee;--card:#eeeef5;--navy:var(--navy);--navy2:#eeeef5;--navy3:#e0e1ec;--softd:#d9dae6;--soft:#eeeef5;--ink:#1f2033;--ink2:#4a4c66;--ink3:#858799;--ln:rgba(31,32,51,.1);
  --neu-out:10px 10px 24px rgba(31,32,51,.14),-8px -8px 20px rgba(255,255,255,.95);--neu-in:inset 5px 5px 12px rgba(31,32,51,.12),inset -4px -4px 10px rgba(255,255,255,.9);--neu-btn:5px 5px 12px rgba(31,32,51,.14),-4px -4px 10px rgba(255,255,255,.95)}
body,html.dark body{background:var(--bg)}
/* header: logo · centred tabs · actions */
.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:12px 28px;gap:12px;min-height:60px}
.top .logo{justify-self:start}.top .sp{display:none}.top>button,.top>.crumb{justify-self:end}
.top{grid-template-areas:"logo tabs act"}.top .logo{grid-area:logo}
.top #darkBtn{grid-area:act;justify-self:end;margin-right:190px}.top #guideBtn{grid-area:act;justify-self:end;margin-right:100px}.top #prodToggle{grid-area:act;justify-self:end}
.tabs{position:absolute;left:50%;top:12px;transform:translateX(-50%);display:flex;gap:4px;background:var(--card);padding:4px;border-radius:999px;box-shadow:var(--neu-in)}
.stage{padding:8px 16px;border-radius:999px;background:transparent;box-shadow:none}.stage .t{font-size:12.5px;font-weight:700;color:var(--ink2)}
.stage.ac{background:var(--blurple);box-shadow:0 6px 18px -6px color-mix(in srgb,var(--acc) 70%,transparent)}.stage.ac .t{color:#fff}
html.dark .stage.ac{background:var(--blurple)}html.dark .stage.ac .t{color:#fff}
.demo{left:50%;transform:translateX(-50%);top:58px;right:auto;border:none;background:var(--card);color:var(--ink3);box-shadow:var(--neu-btn)}
/* surfaces */
.cmdhead,.cmdhead.pc-1,.cmdhead.pc-2,.cmdhead.pc-3,.cmdhead.pc-4,.cmdhead.pc-5,.hero,html.dark .cmdhead,html.dark .hero{background:var(--card);color:var(--ink);box-shadow:var(--neu-out);border-radius:22px}
.cmdhead::before{background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 35%,transparent),color-mix(in srgb,var(--acc) 18%,transparent) 50%,transparent 75%);opacity:.7}
.cmdhead h1,.hero h1.one{color:var(--ink)}.ch-stats b,.kpi .stat{color:var(--ink)}
.rack,html.dark .rack{background:var(--card);color:var(--ink);box-shadow:var(--neu-out);border-radius:24px}
.rack .mod,.score,.composer,html.dark .rack .mod,html.dark .score,html.dark .composer{background:var(--card);box-shadow:var(--neu-in);border-radius:18px}
.rack .modt,html.dark .rack .modt{color:var(--ink)}
.pill,.ico,.vb,.stage,.fchip,.achip,.lchip,.wchip,.tchip,.mv,.modeseg,.lenseg,.edy,.cmpt,.binclip{background:var(--card);color:var(--ink2);box-shadow:var(--neu-btn);border-radius:999px}
html.dark .pill,html.dark .ico,html.dark .vb{background:var(--card);color:var(--ink2)}
.pill.ac,.ico.ac,.cmdbar button{background:var(--blurple);color:#fff;box-shadow:0 8px 22px -8px color-mix(in srgb,var(--acc) 80%,transparent)}
.pill.go{background:linear-gradient(90deg,var(--ok),#49c98a);color:#14261c}
.vb.on,html.dark .vb.on{background:var(--ink);color:var(--bg)}
.led{background:var(--softd);box-shadow:var(--neu-in)}
input,textarea,select,html.dark input,html.dark textarea,html.dark select{background:var(--softd);color:var(--ink);box-shadow:var(--neu-in);border-radius:12px}
.rack .lcd,html.dark .rack .lcd{background:var(--softd);color:var(--blurple2);box-shadow:var(--neu-in)}
.panel.chatpanel,html.dark .panel.chatpanel,.drop,html.dark .drop,.bin,.tl,.notes,.gapfill,.monbar{background:var(--card);box-shadow:var(--neu-out)}
.tl,.notes,.gapfill{box-shadow:var(--neu-in)}
.monitor{box-shadow:var(--neu-out)}
/* segmented rows (shared) */
.segrow{display:flex;align-items:center;gap:10px;margin:6px 0}
.segrow small,.lab{font-family:var(--wide);font-size:7.5px;letter-spacing:1.6px;color:var(--ink3);min-width:48px;text-align:left}
.lab{display:block;margin:10px 0 4px}
.seg{display:flex;gap:2px;padding:3px;border-radius:999px;box-shadow:var(--neu-in);background:var(--softd);flex-wrap:nowrap}
.seg.wrap{flex-wrap:wrap;border-radius:14px}
.seg span{font:600 10px/1 "Noto Sans",sans-serif;padding:6px 10px;border-radius:999px;cursor:pointer;color:var(--ink3);white-space:nowrap}
.seg span.on{background:var(--card);color:var(--ink);box-shadow:var(--neu-btn)}
.seg.mini span{padding:4px 8px;font-size:9px}
/* camera cards */
.movegrid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:8px}
.mvc{border-radius:14px;padding:8px 6px 6px;text-align:center;cursor:pointer;box-shadow:var(--neu-btn);background:var(--card);transition:transform .12s}
.mvc:hover{transform:translateY(-2px)}
.mvc svg{width:34px;height:34px;display:block;margin:0 auto 4px}.mvc path{fill:none;stroke:var(--ink2);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mvc b{display:block;font:700 10px "Noto Sans",sans-serif;color:var(--ink)}.mvc small{display:block;font-size:8px;color:var(--ink3);letter-spacing:0;text-transform:none;line-height:1.2;margin-top:2px}
.mvc.on{box-shadow:var(--neu-in);background:var(--softd)}.mvc.on path{stroke:var(--blurple2)}.mvc.on b{color:var(--blurple2)}
/* light */
.lread{display:flex;align-items:center;gap:10px;margin:8px 0 2px}.lread b{font-family:var(--wide);font-size:13px;color:var(--ink)}.lread .seg{margin-left:auto}
.sky{height:46px;border-radius:999px;box-shadow:var(--neu-in);background:linear-gradient(90deg,#23253f 0%,#4b58a8 22%,#f0b26a 29%,#eef3fa 45%,#fff7dc 55%,#f0b26a 71%,#4b58a8 79%,#23253f 100%)}
.skyarc{display:none}.skyt span{font-family:"Noto Sans",sans-serif;font-size:8px}
.wxbar{position:relative;height:34px;border-radius:999px;box-shadow:var(--neu-in);cursor:ew-resize;touch-action:none;opacity:.95}
.wxk{position:absolute;top:3px;width:28px;height:28px;margin-left:-14px;border-radius:50%;background:var(--card);box-shadow:var(--neu-btn);border:3px solid var(--blurple2)}
.wxt{position:absolute;inset:0;display:flex;justify-content:space-around;align-items:center;pointer-events:none}.wxt span{font:600 8px "Noto Sans",sans-serif;color:rgba(255,255,255,.7);text-shadow:0 1px 2px rgba(0,0,0,.5)}.wxt span.on{color:#fff;font-weight:800}
.matchbtn{background:linear-gradient(90deg,var(--blurple),var(--pink));border-radius:16px;margin:4px 0 6px;padding:10px 14px}
.matchbtn.on{background:var(--green);color:#14261c}
/* actors */
.actorpick{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px}
.actor{flex:none;width:68px;text-align:center;cursor:pointer;border-radius:12px;padding:4px;box-shadow:var(--neu-btn);background:var(--card)}
.actor img,.actor .noimg{width:60px;height:60px;object-fit:cover;object-position:top;border-radius:9px;display:block;margin:0 auto 3px}
.actor b{font:700 9px ui-monospace,Menlo,monospace;color:var(--ink);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.actor small{font-size:8px;color:var(--ink3);text-transform:none;letter-spacing:0}
.actor.on{box-shadow:var(--neu-in);background:var(--softd)}.actor.on b{color:var(--blurple2)}.actor.keep{opacity:.6}
.actorbody.dim .fluidwrap{opacity:.35;pointer-events:none}
.keepsw{display:flex;align-items:center;gap:6px;font:600 10px "Noto Sans",sans-serif;color:var(--ink2);cursor:pointer;margin-left:auto}
.keepsw i{width:30px;height:16px;border-radius:999px;background:var(--softd);box-shadow:var(--neu-in);position:relative}.keepsw i::after{content:'';position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--ink3);transition:.15s}
.keepsw.on i::after{left:16px;background:var(--green)}
.fluidwrap{grid-template-columns:150px 1fr}.fluid{border-radius:20px;box-shadow:var(--neu-out)}
.fread b{font-size:18px}
.conmods.v6{grid-template-columns:1.2fr .9fr 1.1fr;grid-template-areas:"cam light emo" "timing timing timing"}
.conmods.v6 .mod.cam{grid-area:cam}.conmods.v6 .mod.light{grid-area:light}.conmods.v6 .mod.emo{grid-area:emo}.conmods.v6 .mod.timing{grid-area:timing}
.conmods.v6 .mod{display:block}
.curves2{grid-template-columns:1fr 1fr}
/* elements: calm cards, category as a thin line */
.el,.grid .el:nth-child(5n+2),.grid .el:nth-child(5n+3),.grid .el:nth-child(5n+4),.grid .el:nth-child(5n){background:var(--card);color:var(--ink);box-shadow:var(--neu-out);border-top:3px solid var(--ink3)}
.el .tag,.el .b .crumb,.el .row.st,.el .chip{color:var(--ink)}.el .b .crumb{color:var(--ink3)}
.el img,.el .noimg{filter:none;mix-blend-mode:normal}
.el .ico{background:var(--card);color:var(--ink2)}.el .ico.ac{background:var(--blurple);color:#fff}
.cmpt img,.cmpt .noimg{border-bottom-width:3px}
.cat-Characters img,.cat-Characters .noimg,.cmpcat.cat-Characters{border-color:var(--blurple2)}
.cat-Creatures img,.cat-Creatures .noimg,.cmpcat.cat-Creatures{border-color:var(--pink)}
.cat-Props img,.cat-Props .noimg,.cmpcat.cat-Props{border-color:var(--yellow)}
.cat-Locations img,.cat-Locations .noimg,.cmpcat.cat-Locations{border-color:var(--green)}
/* shot board + lanes */
.shot .sthumb{background:var(--softd);box-shadow:var(--neu-out)}
.stpill{background:var(--card)!important;color:var(--ink)!important;box-shadow:var(--neu-btn)}
.stpill.rendered{background:var(--green)!important;color:#14261c!important}.stpill.rendering{background:var(--yellow)!important;color:#2a2410!important}.stpill.blocked,.stpill.failed{background:var(--coral)!important;color:#2a1410!important}
.lanebar{background:var(--softd)!important;box-shadow:var(--neu-in)}
.lane:nth-child(2) .lanebar{background:var(--softd)!important}
.kf{background:var(--card);color:var(--ink);box-shadow:var(--neu-btn)}.kf.on{background:var(--blurple);color:#fff}
.tclip,html.dark .tclip{background:var(--card);box-shadow:var(--neu-btn);border-radius:12px}.tclip.on{border-color:var(--blurple2)}
.tclip b,.tclip .crumb{color:var(--ink)}.tclip .crumb{color:var(--ink3)}
.gap2{border-color:color-mix(in srgb,var(--acc) 50%,transparent);color:var(--pink)}
.toast{background:var(--card);color:var(--ink);box-shadow:var(--neu-out)}
h2.act,.rack .modt,.railhead.big{font-size:15px;letter-spacing:.2px}
.projstrip .proj .ptitle,.projlist .pj .pjt{color:var(--ink)}
/* ---- v6 features ---- */
.forecast{display:flex;align-items:center;gap:18px;padding:10px 16px;margin:0 0 14px;border-radius:14px;background:var(--card);box-shadow:var(--neu-in);font-size:12px;color:var(--ink2)}
.forecast b{color:var(--ink)}.forecast.over{color:var(--coral)}.forecast em{font-style:normal;color:var(--coral);font-weight:800}
.bud{position:relative;flex:1;height:8px;border-radius:4px;background:var(--softd);overflow:hidden;min-width:120px}.bud i{position:absolute;left:0;top:0;bottom:0;background:var(--green);border-radius:4px}.bud i.fc{background:repeating-linear-gradient(90deg,var(--blurple2) 0 4px,transparent 4px 7px);opacity:.7}
.issue{padding:10px 12px;border-radius:12px;background:var(--card);box-shadow:var(--neu-in);margin:8px 0;font-size:13px}.issue b{font-family:ui-monospace,Menlo,monospace;color:var(--blurple2)}.issue .sev{font:700 9px "Noto Sans",sans-serif;letter-spacing:1px;text-transform:uppercase;margin-left:8px;color:var(--yellow)}.issue.high .sev{color:var(--coral)}.issue .ico{margin-top:6px}
.gfbar{display:flex;align-items:center;gap:8px;margin:0 0 12px;flex-wrap:wrap}.gfbar select{padding:6px 10px;font-size:12px;max-width:160px}
.fixq{padding:12px 14px;border-radius:16px;background:var(--card);box-shadow:var(--neu-in);margin-bottom:14px}.fixrow{display:flex;gap:10px;overflow-x:auto}.fixi{flex:none;width:130px}.fixi video{width:100%;border-radius:8px}.fixi b{display:block;font-size:11px;margin-top:4px}
.clipcard{position:relative}.gsel{position:absolute;left:8px;top:8px;z-index:2}.taketag{position:absolute;right:8px;top:8px;font:700 9px "Noto Sans",sans-serif;background:var(--card);color:var(--ink);padding:3px 8px;border-radius:999px;box-shadow:var(--neu-btn)}
.clipgrid.listview{display:flex;flex-direction:column;gap:6px}.clipgrid.listview .clipcard{display:grid;grid-template-columns:160px 1fr;gap:12px;align-items:center}.clipgrid.listview .clipcard video{width:160px;height:90px;object-fit:cover}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cmpv video{width:100%;border-radius:12px;background:#000;margin-top:6px}
.elx{margin-top:8px}.states{display:flex;flex-wrap:wrap;gap:4px}.stc{font:600 9.5px "Noto Sans",sans-serif;padding:3px 8px;border-radius:999px;background:var(--softd);color:var(--ink2);cursor:pointer}.stc.add{color:var(--blurple2)}
.sp3{display:grid;grid-template-columns:1.2fr .8fr 1.2fr;gap:14px;margin:14px 0}.sp3 .panel,.wrap .panel{background:var(--card);box-shadow:var(--neu-out);border-radius:18px;padding:16px 18px}
.budrow{display:grid;grid-template-columns:1fr 1.2fr auto auto;gap:10px;align-items:center;padding:6px 0;font-size:12.5px}
.track.titles,.track.music{margin-top:6px;height:34px;background:var(--softd);border-radius:10px}.track.music{height:44px}
.trl{position:sticky;left:6px;top:2px;font-family:var(--wide);font-size:7px;letter-spacing:1.5px;color:var(--ink3);z-index:1;pointer-events:none}
.mcue{position:absolute;top:4px;height:36px;border-radius:10px;background:linear-gradient(180deg,#3a2d55,#2b2340);box-shadow:var(--neu-btn);padding:4px 10px;cursor:grab;overflow:hidden;touch-action:none;border:2px solid transparent}
.mcue b{font:700 10px "Noto Sans",sans-serif;color:#e9d8ff;display:block;white-space:nowrap}.mcue .crumb{font-size:8.5px;white-space:nowrap}.mcue.submitted{opacity:.6;border-style:dashed;border-color:var(--pink)}.mcue.fail{border-color:var(--coral)}.mcue.on{border-color:var(--pink)}
.mcue .wave{position:absolute;left:0;right:0;bottom:0;height:10px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--acc) 50%,transparent) 0 2px,transparent 2px 4px);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);opacity:.8}
.mregion{position:absolute;top:2px;bottom:2px;border-radius:8px;background:color-mix(in srgb,var(--acc) 18%,transparent);border:2px dashed var(--pink);display:flex;align-items:center;justify-content:center}.mregion span{font:700 10px "Noto Sans",sans-serif;color:var(--pink)}
.tcard{position:absolute;top:4px;height:26px;border-radius:8px;background:var(--card);box-shadow:var(--neu-btn);padding:4px 10px;cursor:grab;overflow:hidden}.tcard b{font:700 10px "Noto Sans",sans-serif;color:var(--ink);white-space:nowrap}
.gapfill.music textarea,.gapfill.music input{width:100%}
.modal{background:rgba(20,21,32,.8)!important;backdrop-filter:blur(10px)}.modal>div,.modal .box{background:var(--card)!important;color:var(--ink);border-radius:22px;box-shadow:var(--neu-out)}
/* ================= v7 — ground vs cards · cardboard light · equal header buttons · stacked tracks ================= */
:root{--bg:var(--navy);--card:var(--card);--navy2:var(--card);--navy3:var(--navy3);--softd:var(--navy);--soft:var(--card)}
html.dark{--bg:#cfcbc2;--card:#e3dfd6;--navy2:#e3dfd6;--navy3:#d6d2c8;--softd:#c4c0b6;--soft:#e3dfd6;--ink:#2b2a26;--ink2:#55534c;--ink3:#88857c;--ln:rgba(43,42,38,.12);--blurple:#5e6ad8;--blurple2:#6f7be6;
  --neu-out:9px 9px 22px rgba(60,55,45,.22),-8px -8px 18px rgba(255,255,255,.55);--neu-in:inset 5px 5px 12px rgba(60,55,45,.18),inset -4px -4px 10px rgba(255,255,255,.55);--neu-btn:4px 4px 10px rgba(60,55,45,.2),-3px -3px 8px rgba(255,255,255,.55)}
html.dark body{background:var(--bg)}
html.dark .seg span.on,html.dark .vb.on{color:var(--ink)}html.dark .vb.on{background:var(--card);box-shadow:var(--neu-in)}
html.dark .stage.ac{background:var(--blurple)}html.dark .rack .lcd{color:var(--blurple)}
/* header: three equal buttons on the right */
.top #darkBtn,.top #guideBtn,.top #prodToggle{width:104px;padding:8px 0;text-align:center;margin:0;justify-self:auto}
.top{grid-template-columns:1fr auto auto}.top .logo{grid-column:1}.top #darkBtn{grid-column:2;margin-right:8px}.top #guideBtn{grid-column:3;margin-right:112px}.top #prodToggle{grid-column:3;justify-self:end}
.top .crumb{display:none}.top>button:not(#darkBtn):not(#guideBtn):not(#prodToggle){display:none}
/* timeline with track heads */
.tlgrid{display:grid;grid-template-columns:88px 1fr}
.thcol{display:flex;flex-direction:column;gap:6px;padding:6px 6px 6px 10px;position:sticky;left:0;z-index:3;background:var(--card)}
.thead{height:74px;display:flex;flex-direction:column;justify-content:center;gap:4px;border-radius:10px;background:var(--softd);box-shadow:var(--neu-in);padding:4px 8px}
.thead.ruler{height:18px;background:transparent;box-shadow:none;align-items:center;justify-content:center;padding:0}.thead.ruler .vb{font-size:9px;padding:2px 8px}
.thead b{font:800 11px "Noto Sans",sans-serif;color:var(--ink)}.thead .tbtn{display:inline-block;font:700 9px "Noto Sans",sans-serif;width:18px;height:18px;line-height:18px;text-align:center;border-radius:6px;background:var(--card);color:var(--ink3);cursor:pointer;margin-right:3px;box-shadow:var(--neu-btn)}
.thead .tbtn.on{background:var(--yellow);color:#2a2410}.thead.muted b{opacity:.4}
.thead:nth-child(n+2){flex-direction:row;align-items:center;gap:2px}.thead:nth-child(n+2) b{margin-right:auto}
.tracks{overflow-x:auto;padding:6px 6px 10px 0}
.track{position:relative;height:74px;margin-top:6px;background:var(--softd);border-radius:10px;box-shadow:var(--neu-in)}
.track.v{background:repeating-linear-gradient(90deg,transparent 0 27px,rgba(255,255,255,.03) 27px 28px),var(--softd)}
.track.muted{opacity:.45}
.tclip.locked{cursor:not-allowed;opacity:.7}
.track.titles{height:34px}.track.music{height:74px}.mcue{height:62px}.mcue.cover{background:linear-gradient(180deg,#2f4a55,#23343e)}
.tclip .x,.mcue .x,.tcard .x{position:absolute;right:6px;top:6px;width:18px;height:18px;line-height:18px;text-align:center;border-radius:50%;background:var(--card);color:var(--ink2);font-size:10px;font-style:normal;cursor:pointer;opacity:0;box-shadow:var(--neu-btn)}
.tclip:hover .x,.mcue:hover .x,.tcard:hover .x{opacity:1}.tclip .x:hover,.mcue .x:hover{background:var(--coral);color:#2a1410}
.tcard .x{top:4px;width:16px;height:16px;line-height:16px}
.dragghost{position:absolute;top:6px;height:62px;border-radius:12px;border:2px dashed var(--blurple2);background:color-mix(in srgb,var(--acc) 15%,transparent);display:flex;align-items:center;justify-content:center;font:700 11px "Noto Sans",sans-serif;color:var(--blurple2);pointer-events:none}
.playhead{margin-left:0;top:6px;bottom:10px}
.ruler2{height:18px;margin:0}.nmark{top:4px}
/* bin: single row, wide cards, duration badge */
.binlist.one{grid-template-rows:auto;grid-auto-columns:var(--bz,150px);padding:4px 2px 8px}
.binclip{position:relative;border-radius:12px}.binclip .dur{position:absolute;right:8px;top:8px;font:700 9px ui-monospace,Menlo,monospace;background:var(--card);color:var(--ink);padding:2px 6px;border-radius:999px;box-shadow:var(--neu-btn)}
.edside .gapfill+.gapfill{margin-top:10px}
.gapfill.music .seg.wrap span{font-size:9.5px}
.thead.tt{height:34px}
.thead.ruler{height:18px;overflow:visible}.thead.ruler .vb{font-size:8px;padding:1px 7px;line-height:14px}
.top{display:flex;align-items:center;gap:8px;grid-template-columns:none}
.top .logo{margin-right:auto}
.top #darkBtn,.top #guideBtn,.top #prodToggle{width:104px;margin:0;grid-column:auto;justify-self:auto}
.top>*{order:5}.top .logo{order:0}.top #darkBtn{order:6}.top #guideBtn{order:7}.top #prodToggle{order:8}.top .logo{position:relative;z-index:2}
.top .logo .ver{font:700 9px "Noto Sans",sans-serif;color:var(--ink3);margin-left:8px;letter-spacing:.5px;vertical-align:middle}
#seqname.flash{box-shadow:0 0 0 2px var(--green)}

body[data-tab="Script"] .wrap{padding-bottom:140px}
.cmdbar{z-index:40}
.keysbar{margin:6px 28px 0;padding:8px 14px;border-radius:12px;background:rgba(255,138,122,.12);color:var(--coral);font-size:12px;box-shadow:var(--neu-in)}.keysbar b{color:var(--coral)}.keysbar a{color:var(--ink);margin-left:6px}

/* ================= v7.3 — LANDING HERO · ANIMATION SYSTEM · PERFORMANCE ================= */
/* landing */
.login{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:40px;padding:40px 6vw;background:var(--bg);overflow:hidden;position:relative}
.lstage{position:relative;height:min(70vh,620px);perspective:1200px;perspective-origin:60% 45%}
.lglow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none;animation:drift 14s ease-in-out infinite alternate}
.lglow.a{width:46%;height:60%;left:8%;top:10%;background:radial-gradient(circle,color-mix(in srgb,var(--acc) 70%,transparent),transparent 70%)}
.lglow.b{width:40%;height:50%;right:4%;bottom:6%;background:radial-gradient(circle,color-mix(in srgb,var(--acc) 55%,transparent),transparent 70%);animation-delay:-7s}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(4%,-5%,0) scale(1.08)}}
.lscene{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;transition:transform .1s linear}
.lcard{position:absolute;border-radius:20px;background:var(--card);box-shadow:var(--neu-out),0 40px 80px -30px rgba(0,0,0,.7);padding:14px;transform-style:preserve-3d;animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.lcard span{font:700 10px "Noto Sans",sans-serif;color:var(--ink3);letter-spacing:.5px;display:block;margin-top:8px}
.lcard .lc-t{font-family:var(--disp);font-weight:900;font-size:12px;color:var(--ink);margin:0 0 10px;letter-spacing:-.01em}
.lcard.c1{left:6%;top:8%;width:54%;aspect-ratio:16/10;transform:translateZ(60px) rotateY(-6deg);animation-delay:.05s}
.lcard.c1 .frame{display:block;width:100%;height:calc(100% - 30px);border-radius:12px;background:linear-gradient(135deg,#2b2352 0%,var(--acc) 35%,var(--acc3) 70%,#ffb36b 100%);background-size:200% 200%;animation:shimmer 12s ease-in-out infinite alternate;box-shadow:inset 0 0 60px rgba(0,0,0,.35)}
@keyframes shimmer{from{background-position:0% 0%}to{background-position:100% 100%}}
.lcard.c2{right:2%;top:22%;width:44%;transform:translateZ(120px) rotateY(-10deg) rotateX(3deg);animation-delay:.25s}
.lcard.c2 .lane{display:block;height:10px;border-radius:999px;margin:6px 0;background:linear-gradient(90deg,var(--blurple),var(--pink));opacity:.85;width:92%}
.lcard.c2 .lane.l2{background:linear-gradient(90deg,var(--warn),var(--acc));width:78%}.lcard.c2 .lane.l3{background:repeating-linear-gradient(90deg,var(--green) 0 4px,transparent 4px 12px);opacity:.7;width:96%}
.lcard.c3{left:18%;bottom:6%;width:40%;transform:translateZ(180px) rotateY(5deg) rotateX(-4deg);animation-delay:.45s}
.lcard.c3 .wave{display:block;height:28px;border-radius:8px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--acc) 75%,transparent) 0 2px,transparent 2px 5px);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.lbox{max-width:440px;width:100%;justify-self:center;background:var(--card);padding:34px;border-radius:26px;box-shadow:var(--neu-out);animation:rise .8s cubic-bezier(.2,.8,.2,1) both .2s}
.lbox h1{font-family:var(--disp);font-weight:900;font-size:30px;line-height:1.05;letter-spacing:-.02em;margin:14px 0 10px;color:var(--ink)}
.lbox .sub{font-size:13px;color:var(--ink2);margin:0 0 22px;letter-spacing:0;text-transform:none}
.lbox input{width:100%;margin-bottom:10px;padding:12px 14px}
.lbox .hint{margin-top:12px;font-size:12px}
@media(max-width:980px){.login{grid-template-columns:1fr;padding:28px 5vw}.lstage{height:46vh}}
/* ---- animation system: one easing, one rhythm, restrained ---- */
:root{--ease:cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.wrap>*{animation:rise .5s var(--ease) both}
.conmods .mod,.shotgrid .shot,.clipgrid .clipcard,.grid .el,.sp3 .panel{animation:rise .55s var(--ease) both}
.conmods .mod:nth-child(2),.shotgrid .shot:nth-child(3n+2),.clipgrid .clipcard:nth-child(3n+2),.grid .el:nth-child(3n+2){animation-delay:.06s}
.conmods .mod:nth-child(3),.shotgrid .shot:nth-child(3n),.clipgrid .clipcard:nth-child(3n),.grid .el:nth-child(3n){animation-delay:.12s}
.conmods .mod:nth-child(4){animation-delay:.18s}
.pill,.ico,.vb,.mvc,.seg span,.stage,.actor,.cmpt,.binclip,.sw8{transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease),color .18s var(--ease)}
.pill:hover,.ico:hover,.vb:hover,.stage:hover{transform:translateY(-1px)}
.pill:active,.ico:active,.vb:active,.mvc:active,.seg span:active{transform:translateY(1px) scale(.985)}
.shot .sthumb,.clipcard video,.binclip{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.shot:hover .sthumb{transform:translateY(-3px)}.binclip:hover{transform:translateY(-2px)}
.rk .cap,.rk .ptr,.rk .val{transition:transform .35s var(--ease)}
.fdc,.hsc,.wxk,.sun{transition:left .12s linear,bottom .12s linear}
.kf,.tclip,.mcue{transition:box-shadow .2s var(--ease),border-color .2s var(--ease)}
.modal{animation:fade .25s var(--ease) both}@keyframes fade{from{opacity:0}to{opacity:1}}
.modal>div{animation:rise .35s var(--ease) both}
.toast{transition:transform .3s var(--ease),opacity .3s var(--ease)}
.led::before{animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.stpill.rendering{animation:pulse 1.6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* ---- performance: paint only what's on screen ---- */
.clipgrid,.shotgrid,.grid,.binlist{content-visibility:auto;contain-intrinsic-size:1px 600px}
.shot .sthumb video,.clipcard video,.binclip video{content-visibility:auto}
/* v7.3 landing fixes: kill legacy login palette leaks, spread the 3D cards */
.lbox .logo{color:var(--ink);font-family:var(--disp);font-weight:900;font-size:15px;letter-spacing:3px;text-align:left;display:inline-block;margin:0}.lbox .logo i{color:var(--ac2,var(--green));font-style:normal}
.lbox input{background:var(--bg);border:1px solid var(--line,rgba(127,127,127,.18));color:var(--ink);box-shadow:var(--neu-in,none)}
.lbox input::placeholder{color:var(--ink3)}
.lcard.c1{left:2%;top:4%;width:56%}
.lcard.c2{right:0;top:40%;width:42%}
.lcard.c3{left:14%;bottom:2%;width:38%}
@media(max-width:980px){.lcard.c2{top:34%}}
.lcard.c3{left:8%;bottom:12%}

/* ================= v7.4 — WHOLE SITE IN THE LANDING LANGUAGE ================= */
/* ambient ground: the landing's glows follow into the app, fixed so they never scroll away */
body{background:var(--bg)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(55% 45% at 85% -5%,color-mix(in srgb,var(--acc) 22%,transparent),transparent 62%),
             radial-gradient(40% 35% at -5% 105%,color-mix(in srgb,var(--acc) 16%,transparent),transparent 60%),
             radial-gradient(30% 25% at 55% 110%,rgba(255,179,107,.09),transparent 60%);
  animation:drift 24s ease-in-out infinite alternate}
html.dark body::before{background:radial-gradient(55% 45% at 85% -5%,rgba(94,106,216,.14),transparent 62%),
             radial-gradient(40% 35% at -5% 105%,rgba(214,120,200,.12),transparent 60%)}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-2%,1.5%,0) scale(1.04)}}
/* floating surfaces: every working card sits on the ground like the landing cards */
.panel,.mod,.el,.binclip,.tl,.edside,.lcd,.modal>div{position:relative;background:var(--card);border-radius:22px;box-shadow:var(--neu-out),0 1px 0 rgba(255,255,255,.04) inset;border:1px solid rgba(255,255,255,.035)}
html.dark .panel,html.dark .mod,html.dark .el,html.dark .binclip,html.dark .tl,html.dark .edside{border-color:rgba(255,255,255,.4)}
.panel{padding:22px 24px}
.panel::before,.mod::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 30%)}
html.dark .panel::before,html.dark .mod::before{background:linear-gradient(180deg,rgba(255,255,255,.5),transparent 30%)}
/* the rendered frame glows like the landing hero frame */
.shot .sthumb,.clipcard video,.clipcard .thumb,.pthumb,.edviewer,.viewer,.vwrap{border-radius:14px;overflow:hidden;box-shadow:0 18px 40px -18px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.05)}
.shot .sthumb::after,.pthumb::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 40px rgba(0,0,0,.25)}
.shot:hover .sthumb,.clipcard:hover video{box-shadow:0 24px 50px -16px color-mix(in srgb,var(--acc) 45%,transparent),0 0 0 1px color-mix(in srgb,var(--acc) 35%,transparent)}
/* 3D tilt on hover — same perspective feel as the landing stage */
.shot,.clipcard,.el,.binclip{transform-style:preserve-3d;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.shot:hover,.clipcard:hover{transform:perspective(900px) rotateX(2deg) rotateY(-2deg) translateY(-4px)}
.el:hover{transform:perspective(900px) rotateY(3deg) translateY(-5px);box-shadow:var(--neu-out),0 30px 50px -24px color-mix(in srgb,var(--acc) 35%,transparent)}
.binclip:hover{transform:translateY(-3px)}
/* gradient signal: the one accent line that runs through the whole product */
.tabs{background:var(--card);box-shadow:var(--neu-in),0 0 0 1px rgba(255,255,255,.03)}
.tabs .on,.tabs button.on,.tabs .tab.on{background:linear-gradient(90deg,var(--blurple),var(--pink));color:#fff;box-shadow:0 8px 22px -10px color-mix(in srgb,var(--acc) 80%,transparent)}
.pill.go{background:linear-gradient(90deg,var(--acc),var(--acc3) 120%);color:#fff;border:none;box-shadow:0 10px 24px -12px color-mix(in srgb,var(--acc) 90%,transparent)}
.pill.go:hover{filter:brightness(1.08);transform:translateY(-1px)}
.pbar>i,.pbar>b,.lane.fill,.meter>i{background:linear-gradient(90deg,var(--blurple),var(--pink))}
h1.act,h2.act,.act{letter-spacing:-.01em}
h2.act::after{content:"";display:inline-block;width:28px;height:3px;border-radius:3px;margin-left:12px;vertical-align:middle;background:linear-gradient(90deg,var(--blurple),var(--pink));opacity:.8}
/* hero / command head gets the landing's depth */
.cmdhead{border-radius:26px;box-shadow:var(--neu-out);overflow:hidden}
.cmdhead h1{font-size:clamp(28px,4vw,46px);letter-spacing:-.02em;line-height:1}
/* console: modules float as a stage, not a form */
.conmods.v6 .mod{box-shadow:var(--neu-out);border-radius:22px}
.conmods.v6 .mod:hover{transform:translateY(-2px)}
/* timeline: the cut sits in a lit well */
.tl{box-shadow:var(--neu-in),0 0 0 1px rgba(255,255,255,.03)}
.tl .clip,.tl .cue{box-shadow:0 8px 18px -8px rgba(0,0,0,.6)}
/* modals: glass over the glow */
.modal{background:rgba(14,15,22,.72)!important;backdrop-filter:blur(14px) saturate(1.2)}
html.dark .modal{background:rgba(60,58,50,.45)!important}
/* header: floats, blurs the ground behind it */
.top{background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
/* touch + reduced motion: no tilt */
@media(hover:none){.shot:hover,.clipcard:hover,.el:hover,.binclip:hover{transform:none}}
@media(prefers-reduced-motion:reduce){body::before{animation:none}.shot,.clipcard,.el,.binclip{transition:none}}
.monitor{border-radius:18px;box-shadow:var(--neu-out),0 30px 60px -30px color-mix(in srgb,var(--acc) 35%,transparent);overflow:hidden}
.monframe{position:relative}.monframe::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 18%,transparent),inset 0 0 60px rgba(0,0,0,.3)}

/* ================= v7.5 — APP = LANDING. Same ground, same glows, same type, same card depth ================= */
:root{--bg:var(--bg);--card:var(--card);--navy2:var(--card);--navy3:var(--navy3);--softd:#0b0c12;--soft:var(--card);
  --neu-out:12px 12px 28px rgba(0,0,0,.55),-8px -8px 22px rgba(255,255,255,.03),0 40px 80px -40px rgba(0,0,0,.8);
  --neu-in:inset 6px 6px 14px rgba(0,0,0,.55),inset -4px -4px 10px rgba(255,255,255,.03)}
html.dark{--bg:#cfcbc2;--card:#e3dfd6}
/* the two landing glows, app-wide, big and slow */
body::before{background:none}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:radial-gradient(circle at 22% 28%,color-mix(in srgb,var(--acc) 34%,transparent),transparent 36%),
             radial-gradient(circle at 82% 78%,color-mix(in srgb,var(--acc) 26%,transparent),transparent 34%),
             radial-gradient(circle at 60% 110%,rgba(255,179,107,.10),transparent 30%);
  filter:blur(60px);animation:drift 18s ease-in-out infinite alternate}
html.dark body::after{opacity:.45}
/* landing typography inside the app: section heads are the landing headline */
h2.act,h1.act,.edhead h2,.boardhead h2{font-family:var(--disp);font-weight:900;font-size:22px;line-height:1.05;letter-spacing:-.02em;text-transform:none}
h2.act::after{display:none}
.cmdhead h1{font-family:var(--disp);font-weight:900;font-size:clamp(34px,4.4vw,54px);letter-spacing:-.03em;line-height:.98}
.cmdhead .ch-meta span i,.lab,.modt,.lc-t,.stat i,.crumb.k{font:700 10px "Noto Sans",sans-serif;letter-spacing:.6px;text-transform:uppercase;color:var(--ink3)}
.stat b,.stats b,.kpi b{font-family:var(--disp);font-weight:900;background:linear-gradient(90deg,var(--acc3),var(--acc3));-webkit-background-clip:text;background-clip:text;color:transparent}
/* hero strip = the landing's rendered-frame card */
.cmdhead,.cmdhead.pc-1,.cmdhead.pc-2,.cmdhead.pc-3,.cmdhead.pc-4,.cmdhead.pc-5{background:var(--card);border:1px solid rgba(255,255,255,.05);position:relative;overflow:hidden}
.cmdhead::before{content:"";position:absolute;left:-10%;top:-60%;width:55%;height:220%;pointer-events:none;opacity:.55;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 55%,transparent),transparent);filter:blur(40px)}
.cmdhead::after{content:"";position:absolute;right:-8%;bottom:-80%;width:40%;height:200%;pointer-events:none;opacity:.4;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 50%,transparent),transparent);filter:blur(40px)}
.cmdhead{isolation:isolate}.cmdhead::before,.cmdhead::after{z-index:-1}
/* every surface: landing card rim + depth */
.panel,.mod,.el,.binclip,.tl,.edside,.monitor,.rack,.drop,.modal>div{border:1px solid rgba(255,255,255,.05);box-shadow:var(--neu-out)}
html.dark .panel,html.dark .mod,html.dark .el,html.dark .binclip,html.dark .tl,html.dark .edside,html.dark .monitor,html.dark .rack,html.dark .drop,html.dark .modal>div{border-color:rgba(255,255,255,.5)}
/* thumbnails carry the hero gradient as a placeholder / frame glow */
.shot .sthumb,.pthumb,.clipcard .thumb{background:linear-gradient(135deg,#2b2352 0%,var(--acc) 35%,var(--acc3) 70%,#ffb36b 100%);background-size:200% 200%}
.noimg{background:linear-gradient(135deg,#2b2352,var(--acc) 50%,var(--acc3));opacity:.9}
.shot .sthumb video,.pthumb video,.pthumb img,.el img{position:relative;z-index:1}
/* header: the landing's logo treatment, rail floats */
.top .logo{font-family:var(--disp);font-weight:900;letter-spacing:3px}.top .logo i{color:var(--acc3)}
.tabs{border:1px solid rgba(255,255,255,.05)}
/* buttons: pill rim like the landing inputs, primary = gradient */
.pill{border-color:rgba(255,255,255,.12);background:var(--card);box-shadow:var(--neu-btn)}
html.dark .pill{border-color:rgba(0,0,0,.12)}
.pill:hover{border-color:color-mix(in srgb,var(--acc) 50%,transparent)}
.pill.go,.pill.ac{background:linear-gradient(90deg,var(--acc),var(--acc3) 120%);color:#fff;border:none}
input,textarea,select{background:var(--bg)!important;border:1px solid rgba(255,255,255,.08)!important;color:var(--ink);box-shadow:var(--neu-in)}
html.dark input,html.dark textarea,html.dark select{border-color:rgba(0,0,0,.1)!important}
input:focus,textarea:focus{border-color:color-mix(in srgb,var(--acc) 60%,transparent)!important;outline:none}
/* project strip cards = landing cards in miniature */
.pthumb{border-radius:14px}
.projstrip .proj,.pstrip .proj{border-radius:16px;box-shadow:var(--neu-out)}
/* console score lanes are already the landing's lanes — brighten them */
.lane.cam,.score .lane{opacity:1}
@media(prefers-reduced-motion:reduce){body::after{animation:none}}

/* ================= v7.6 — PERFORMANCE: same look, no per-frame cost ================= */
/* glows: pre-composited, no blur filter, no animation (filter:blur on a full-viewport fixed layer was repainting every frame) */
body::before,body::after{animation:none!important;filter:none!important;transform:none!important}
body::after{background:radial-gradient(ellipse 42% 38% at 22% 26%,color-mix(in srgb,var(--acc) 26%,transparent),transparent 70%),
                       radial-gradient(ellipse 38% 34% at 82% 80%,color-mix(in srgb,var(--acc) 20%,transparent),transparent 70%),
                       radial-gradient(ellipse 30% 22% at 60% 108%,rgba(255,179,107,.08),transparent 70%)}
/* header: no backdrop blur (forces the whole scrolling page to re-composite) */
.top{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}
/* no 3D tilt / preserve-3d anywhere — hover becomes a cheap translate */
.shot,.clipcard,.el,.binclip,.lcard{transform-style:flat}
.shot:hover,.clipcard:hover,.el:hover{transform:translateY(-3px)}
.conmods.v6 .mod:hover{transform:none}
/* hero backlights: static, no blur filter */
.cmdhead::before,.cmdhead::after{filter:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 32%,transparent),transparent)}
.cmdhead::after{background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 26%,transparent),transparent)}
/* editor surfaces: flat shadows, no content-visibility (it fights the timeline's scroll/measure) */
.tl,.tl *,.monitor,.edside,.binlist,.binclip{content-visibility:visible!important;contain:none!important}
.tl .clip,.tl .cue{box-shadow:none;transition:none}
.tl{box-shadow:var(--neu-in)}
.binclip,.binclip:hover{transform:none;transition:none;box-shadow:var(--neu-btn)}
.monitor{box-shadow:var(--neu-out)}
.clipgrid,.shotgrid,.grid{content-visibility:visible;contain-intrinsic-size:auto}
/* modals: lighter blur */
.modal{backdrop-filter:blur(6px)}
/* entrance animations only once, never on timeline redraws */
.tl *,.edside *,.binlist *{animation:none!important}

/* ================= v7.7 — PRODUCER GUIDE ================= */
.guidetab{display:flex;align-items:center;gap:14px;margin:2px 0 14px;padding:0 4px}
.guidetab span{font-family:var(--disp);font-weight:900;font-size:13px;letter-spacing:.14em;color:var(--ink3)}
.guidetab .pill.sm{margin-left:auto}
.gstrip{display:grid;grid-template-columns:1fr auto;grid-template-areas:"big btn" "line btn";align-items:center;gap:2px 16px;padding:12px 16px 12px 18px;margin:0 0 14px;border-radius:14px;background:var(--bg);box-shadow:var(--neu-in);border-left:3px solid transparent;border-image:linear-gradient(180deg,var(--acc),var(--acc3)) 1}
.gstrip .gbig{grid-area:big;font-family:var(--disp);font-weight:900;font-size:18px;letter-spacing:-.01em;line-height:1.05;color:var(--ink)}
.gstrip .gline{grid-area:line;font-size:12.5px;color:var(--ink2);line-height:1.4}
.gstrip .pill.sm{grid-area:btn;padding:6px 12px;font-size:11px}
.mod .gstrip{margin:0 0 10px;padding:10px 12px}.mod .gstrip .gbig{font-size:14px}.mod .gstrip .gline{font-size:11.5px}
.gmod .gbig{font-family:var(--disp);font-weight:900;font-size:26px;letter-spacing:-.02em;line-height:1.05;margin-bottom:8px}
.gmod .gline{font-size:14px;color:var(--ink2);margin-bottom:14px}
.gmod .gmore p{font-size:13.5px;line-height:1.55;color:var(--ink);margin:0 0 10px}.gmod .gmore b{color:var(--ink)}.gmod .gmore i{font-style:normal;color:var(--acc3);font-weight:700}
.pill.sm{padding:5px 11px;font-size:11px}
body.noguide .gstrip,body.noguide .guidetab{display:none}
@media(max-width:700px){.gstrip{grid-template-columns:1fr;grid-template-areas:"big" "line" "btn"}.gstrip .pill.sm{justify-self:start}}

/* ================= v7.8 — SEPARATION: ground vs segment, guide boxes, header rail ================= */
/* ground clearly darker than segments; segments one clear step lighter, with a visible rim */
:root{--bg:var(--bg);--card:var(--card);--navy2:var(--card);--navy3:var(--navy3);--softd:var(--softd);--soft:var(--card);--ln:rgba(255,255,255,.1)}
html.dark{--bg:#bdb8ad;--card:#ebe7df;--navy2:#ebe7df;--navy3:#ddd8ce;--softd:#aca79c;--soft:#ebe7df;--ln:rgba(43,42,38,.16)}
.panel,.mod,.el,.binclip,.tl,.edside,.monitor,.rack,.drop,.modal>div,.cmdhead,.cmdhead.pc-1,.cmdhead.pc-2,.cmdhead.pc-3,.cmdhead.pc-4,.cmdhead.pc-5,.projstrip .proj,.proj,.tabs{
  background:var(--card);border:1px solid rgba(255,255,255,.09);box-shadow:0 14px 34px -18px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.05) inset}
html.dark .panel,html.dark .mod,html.dark .el,html.dark .binclip,html.dark .tl,html.dark .edside,html.dark .monitor,html.dark .rack,html.dark .drop,html.dark .modal>div,html.dark .cmdhead,html.dark .proj,html.dark .tabs{
  border-color:rgba(43,42,38,.14);box-shadow:0 12px 28px -16px rgba(60,55,45,.45),0 1px 0 rgba(255,255,255,.8) inset}
.panel::before,.mod::before{display:none}
/* inset wells inside a segment (inputs, timeline, rails) sit on the ground colour so they read as "inside" */
.tl,input,textarea,select,.tabs{background:var(--bg)!important}
.tl{border:1px solid rgba(255,255,255,.06)}
/* glows toned down so they never fill the gap between segments */
body::after{opacity:.55}
/* guide boxes: their own colour — indigo tint, centered text */
.gstrip{background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 22%,transparent),color-mix(in srgb,var(--acc) 14%,transparent));border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);border-left:1px solid color-mix(in srgb,var(--acc) 45%,transparent);border-image:none;box-shadow:none;
  grid-template-columns:1fr;grid-template-areas:"big" "line" "btn";justify-items:center;text-align:center;gap:4px;padding:14px 18px}
html.dark .gstrip{background:linear-gradient(135deg,rgba(94,106,216,.16),rgba(214,120,200,.12));border-color:rgba(94,106,216,.45)}
.gstrip .gbig{color:#fff;font-size:19px}html.dark .gstrip .gbig{color:#1f2033}
.gstrip .gline{color:rgba(255,255,255,.8);max-width:720px}html.dark .gstrip .gline{color:#3a3b52}
.gstrip .pill.sm{justify-self:center;margin-top:6px;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff}html.dark .gstrip .pill.sm{background:rgba(31,32,51,.08);color:#1f2033;border-color:rgba(31,32,51,.25)}
.mod .gstrip .gbig{font-size:15px}
.guidetab{justify-content:center;position:relative}.guidetab span{color:var(--acc3)}.guidetab .pill.sm{position:absolute;right:4px;margin:0}
/* header: every button the same width, rail centered */
.top{display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center}
.top .logo{grid-column:1;justify-self:start;margin:0}
.tabs{grid-column:2;position:static;transform:none;justify-self:center}
.top .acts,.top>button,.top>.crumb{grid-column:3}
.top>button{justify-self:end}
.top .tabs button,.tabs .tab{min-width:104px;width:104px;text-align:center;padding-left:0;padding-right:0}
.top #darkBtn,.top #guideBtn,.top #prodToggle{width:104px;min-width:104px;text-align:center;padding-left:0;padding-right:0}
/* group the right-side buttons so they sit together and end flush */
.top #darkBtn{justify-self:end;margin-right:0}.top #guideBtn{justify-self:end}.top #prodToggle{justify-self:end}
.top{column-gap:8px}
.top>#darkBtn,.top>#guideBtn,.top>#prodToggle{grid-column:3;grid-row:1}
.top>#darkBtn{margin-right:224px}.top>#guideBtn{margin-right:112px}.top>#prodToggle{margin-right:0}
/* v7.8b: the tab rail lives outside .top — keep it absolutely centred on the header row; equal-width stages */
.tabs{position:absolute;left:50%;top:12px;transform:translateX(-50%);grid-column:auto;justify-self:auto;z-index:31;display:flex;gap:4px;padding:4px}
.tabs .stage{width:104px;min-width:104px;justify-content:center;text-align:center;padding-left:0;padding-right:0;box-sizing:border-box}
.tabs .stage .t{text-align:center}
.top .crumb.mono{display:none}
/* v7.9: playhead lives inside the scrolled track area — position it against that, not the outer well */
.tracks{position:relative}
.playhead{margin-left:0;left:0;top:0;bottom:0;will-change:left}
.dragghost{background:color-mix(in srgb,var(--acc) 25%,transparent);border:1px dashed color-mix(in srgb,var(--acc) 80%,transparent);color:#fff;border-radius:8px;position:absolute;top:4px;bottom:4px;display:flex;align-items:center;justify-content:center;font:700 10px "Noto Sans",sans-serif;pointer-events:none}
/* glows scroll with the page instead of living on a fixed layer (fixed + gradients repaint on every scroll frame) */
body::after{display:none}
body{background:var(--bg) radial-gradient(ellipse 42% 38% at 22% 10%,color-mix(in srgb,var(--acc) 16%,transparent),transparent 70%) no-repeat}
html.dark body{background:var(--bg) radial-gradient(ellipse 42% 38% at 22% 10%,rgba(94,106,216,.12),transparent 70%) no-repeat}
/* header rail: tighter stages so the row fits at 1280+ */
.tabs .stage{width:92px;min-width:92px}.tabs .stage .t{font-size:10.5px}
.mod>.gstrip,.score>.gstrip,.conmods .gstrip{grid-column:1/-1;width:100%}
/* ================= v8.0 — BEAT BOARD ================= */
.bb-head{display:flex;align-items:center;gap:12px;margin:6px 0 8px}
.bb-mode{display:inline-flex;background:var(--bg);border-radius:999px;padding:3px;box-shadow:var(--neu-in)}.bb-mode span{padding:5px 12px;border-radius:999px;font:800 10.5px "Noto Sans",sans-serif;letter-spacing:.08em;cursor:pointer;color:var(--ink3)}.bb-mode span.on{background:linear-gradient(90deg,var(--acc),var(--acc3));color:#fff}
.bb-add{display:flex;gap:6px;margin-left:auto}
.bb-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 2px}.bb-chips>small{font:700 9px "Noto Sans",sans-serif;letter-spacing:.12em;color:var(--ink3);min-width:92px}
.bb-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:var(--card);border:1px solid var(--ln);font-size:11.5px;cursor:pointer;color:var(--ink)}.bb-chip b{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:var(--acc3)}.bb-chip.on{border-color:var(--acc3);box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 35%,transparent)}.bb-chip i{font-style:normal;color:var(--ink3);margin-left:2px}.bb-chip i:hover{color:#ff8a7a}
.bb-chips .crumb{margin-left:auto;font-size:10.5px}
.bb-seg{margin:12px 0 4px}.bb-seg>small{font:700 9px "Noto Sans",sans-serif;letter-spacing:.12em;color:var(--ink3);display:block;margin-bottom:6px}
.bb-segrow{display:flex;align-items:stretch;gap:6px;flex-wrap:wrap}
.bb-shot{flex:1 1 120px;min-width:120px;background:var(--bg);border-radius:12px;padding:8px 12px;box-shadow:var(--neu-in);display:flex;flex-direction:column;gap:2px}.bb-shot b{font-family:var(--disp);font-weight:900;font-size:12px;letter-spacing:.02em}.bb-shot span{font-size:11px;color:var(--ink2)}
.bb-cut,.bb-tr{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px 8px;border-radius:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 18%,transparent),color-mix(in srgb,var(--acc) 14%,transparent));border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);min-width:84px}
.bb-cut small,.bb-tr small{font:700 8.5px "Noto Sans",sans-serif;letter-spacing:.1em;color:var(--acc3)}
.bb-cut input{width:54px!important;padding:3px 6px!important;text-align:center;font-family:ui-monospace,Menlo,monospace;font-size:11px;border-radius:8px}.bb-cut i{font-style:normal;font-size:10px;color:var(--ink3)}.bb-cut u{text-decoration:none;cursor:pointer;color:var(--ink3);font-size:11px}.bb-cut u:hover{color:#ff8a7a}
.bb-tr select{font-size:11px;padding:3px 6px!important;border-radius:8px;max-width:140px}
.bb-read{margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--bg);box-shadow:var(--neu-in)}.bb-read>small{font:700 9px "Noto Sans",sans-serif;letter-spacing:.12em;color:var(--ink3);display:block;margin-bottom:6px}
.bb-read .rl{display:flex;gap:10px;align-items:baseline;font-size:12px;padding:3px 0;border-top:1px solid var(--ln)}.bb-read .rl:first-of-type{border-top:none}.bb-read .rl b{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--acc3);min-width:64px}.bb-read .rl i{font-style:normal;font:800 9px "Noto Sans",sans-serif;letter-spacing:.1em;padding:2px 7px;border-radius:999px}.bb-read .cutmark{background:var(--ok);color:#14261c}.bb-read .trmark{background:var(--acc3);color:#2b1a2e}.bb-read .rl span{color:var(--ink2)}
/* the camera / light modules say which beat they edit */
.score .beat{font-size:10px}
.bb-seg,.bb-read,.bb-chips,.bb-seg>small,.bb-read>small{text-align:left}
.bb-cut{flex-direction:row;flex-wrap:wrap;gap:4px;align-items:center}.bb-cut small{width:100%;text-align:center}
/* ================= v8.1 — THE SHOT segment · mini-players ================= */
.prod3{grid-template-columns:150px 1fr!important}
.inspanel{position:static!important;max-height:none!important;overflow:visible!important;padding:22px 24px!important;border-left:none!important;margin:0 0 18px}
.insgrid{display:grid;grid-template-columns:minmax(320px,1.1fr) 1.4fr;gap:26px;align-items:start}
@media(max-width:980px){.insgrid{grid-template-columns:1fr}}
.inspanel .inshead{display:flex;align-items:baseline;gap:12px}.inspanel .inshead>span:first-child{font-family:var(--disp);font-weight:900;font-size:28px;letter-spacing:-.02em}
.inspanel .institle{font-size:14px;color:var(--ink2);margin:0 0 10px}
.inspanel .insvid{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;background:#000;box-shadow:0 18px 40px -18px rgba(0,0,0,.8)}
.inspanel .inssec{font:700 10px "Noto Sans",sans-serif;letter-spacing:.14em;color:var(--ink3);margin:16px 0 6px;padding-top:10px;border-top:1px solid var(--ln)}
.inspanel .inscol.b .inssec:first-child{margin-top:0;padding-top:0;border-top:none}
.inspanel textarea{min-height:260px;font-family:ui-monospace,Menlo,monospace;font-size:12px;line-height:1.5}
.inspanel .row{flex-wrap:wrap;gap:8px}
/* mini-player: same take on every module, blurred when the take you are editing does not exist yet */
.mod,.score{position:relative}
.minip{position:absolute;top:10px;right:12px;width:112px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000;box-shadow:0 8px 18px -8px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08);z-index:3}
.minip video,.minip .minip-ph{width:100%;height:100%;object-fit:cover;display:block}
.minip .minip-ph{background:linear-gradient(135deg,#2b2352,var(--acc) 50%,var(--acc3))}
.minip span{position:absolute;left:0;right:0;bottom:0;font:800 7.5px "Noto Sans",sans-serif;letter-spacing:.1em;text-align:center;padding:2px 0;background:rgba(0,0,0,.55);color:#fff}
.minip.new video,.minip.new .minip-ph{filter:blur(4px) saturate(.8);transform:scale(1.08)}
.minip.new span{background:linear-gradient(90deg,var(--acc),var(--acc3))}
.mod .modt,.score .scorehead{padding-right:124px}
.score .minip{top:8px}
@media(max-width:980px){.minip{display:none}.mod .modt,.score .scorehead{padding-right:0}}
/* v8.2 scrub */
.playhead{pointer-events:auto;cursor:ew-resize;width:2px}
.playhead::before{content:"";position:absolute;left:-7px;top:-2px;width:16px;height:14px;border-radius:4px 4px 8px 8px;background:var(--green);box-shadow:0 2px 8px rgba(0,0,0,.6)}
.playhead::after{content:"";position:absolute;left:-8px;top:0;bottom:0;width:18px}
body.scrubbing{cursor:ew-resize;user-select:none}
.tracks{cursor:text}.tracks .ruler2{cursor:ew-resize}
.mregfields{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin:6px 0 8px}.mregfields label{display:flex;flex-direction:column;gap:3px;font:700 9px "Noto Sans",sans-serif;letter-spacing:.1em;color:var(--ink3)}.mregfields label input{width:70px!important;padding:5px 8px!important;font-family:ui-monospace,Menlo,monospace;font-size:12px}.mregfields label i{display:none}.mregfields .crumb{flex-basis:100%;font-size:10.5px}
.mregion span{font:800 11px ui-monospace,Menlo,monospace;color:#fff;background:rgba(0,0,0,.45);padding:2px 8px;border-radius:999px}
/* ================= v8.4 — PRODUCTION FLOW ================= */
.pflow{display:flex;flex-direction:column;gap:14px}
.pflow .cmdhead{margin:0}
.step{background:var(--card);border:1px solid rgba(255,255,255,.09);border-radius:22px;box-shadow:0 14px 34px -18px rgba(0,0,0,.85)}
html.dark .step{border-color:rgba(43,42,38,.14)}
.stephead{display:flex;align-items:center;gap:14px;padding:14px 20px;cursor:pointer;user-select:none}
.stephead b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:900 13px var(--disp);background:linear-gradient(135deg,var(--acc),var(--acc3));color:#fff;flex:none}
.step[data-k="productions"] .stephead b{background:var(--bg);color:var(--ink3);font-size:11px}
.stephead span{font-family:var(--disp);font-weight:900;font-size:17px;letter-spacing:-.01em}
.stephead em{font-style:normal;font-size:12.5px;color:var(--ink2);margin-left:4px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stephead em b{color:var(--ink);font:inherit;font-weight:800;width:auto;height:auto;background:none;display:inline}
.stephead i{font-style:normal;color:var(--ink3);transition:transform .2s}
.step.closed .stephead i{transform:rotate(-90deg)}
.step.closed .stepbody{display:none}
.stepbody{padding:0 20px 20px}
.stepnav{display:flex;gap:4px;margin-right:6px}
.step .board{min-width:0}.step .boardhead h2{display:none}
.step .acts-rail{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.step .gstrip{margin-top:4px}
/* sub rows inside SHAPE */
.sub{border-top:1px solid var(--ln)}.sub:first-of-type{border-top:none}
.subhead{display:flex;align-items:center;gap:12px;padding:12px 4px;cursor:pointer;user-select:none}
.subhead span{font:800 11px "Noto Sans",sans-serif;letter-spacing:.14em;color:var(--ink3);min-width:150px}
.subhead em{font-style:normal;font-size:13px;color:var(--ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.subhead i{font-style:normal;color:var(--ink3);transition:transform .2s}.sub.closed .subhead i{transform:rotate(-90deg)}
.sub.closed .subbody{display:none}
.subbody{padding:0 0 14px}
.subbody .mod,.subbody .score{box-shadow:none;border:none;background:var(--bg);border-radius:16px}
.subbody .mod .gstrip,.subbody .score .gstrip{display:none}
/* the stage: big player */
.stage{background:var(--card);border:1px solid rgba(255,255,255,.09);border-radius:22px;box-shadow:0 14px 34px -18px rgba(0,0,0,.85);padding:16px 20px 14px}
.stagehead{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.stagetitle{display:flex;align-items:baseline;gap:12px}.stagetitle b{font-family:var(--disp);font-weight:900;font-size:28px;letter-spacing:-.02em}.stagetitle span{font-size:14px;color:var(--ink2)}
.stagestate{margin-left:auto;display:flex;gap:8px}
.led{font:800 9.5px "Noto Sans",sans-serif;letter-spacing:.12em;padding:5px 10px;border-radius:999px;background:var(--bg);color:var(--ink3)}.led.green{background:var(--ok);color:#14261c}.led.amber{background:#f2d06b;color:#2b2410}.led.pink{background:linear-gradient(90deg,var(--acc),var(--acc3));color:#fff}
.stageplayer{background:#000;border-radius:16px;overflow:hidden;aspect-ratio:16/9;max-height:62vh;margin:0 auto;box-shadow:0 24px 60px -24px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06)}
.stageplayer video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.stage-empty{width:100%;height:100%;position:relative;display:grid;place-items:center}.stage-empty .minip-ph{position:absolute;inset:0;filter:blur(30px) saturate(.7);opacity:.5}.stage-empty span{position:relative;font:700 13px "Noto Sans",sans-serif;color:#fff;background:rgba(0,0,0,.5);padding:8px 14px;border-radius:999px}
.stagebar{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.stagebar .sb-l{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.stagebar .sb-l .row{margin:0!important}.stagebar .sb-r{margin-left:auto;display:flex;gap:8px;align-items:center}
.stagebar .ver small{margin-right:4px}
/* sticky render bar */
.renderbar{position:sticky;bottom:12px;z-index:20;display:flex;align-items:center;gap:14px;padding:10px 16px 10px 20px;border-radius:999px;background:var(--card);border:1px solid color-mix(in srgb,var(--acc) 35%,transparent);box-shadow:0 18px 40px -14px rgba(0,0,0,.9)}
.renderbar .rb-t{font-size:13px}.renderbar .rb-t b{font-family:var(--disp);font-weight:900}
.renderbar .rb-s{font-size:11.5px;color:var(--ink2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.renderbar .rb-a{display:flex;gap:8px}
/* mini-players stay but the stage is the main thing */
.subbody .minip{top:8px;right:10px;width:96px}
@media(max-width:980px){.stagetitle b{font-size:22px}.renderbar{border-radius:18px;flex-wrap:wrap}}
.stageplayer{max-width:1080px}
/* ================= v8.5 — module redesigns ================= */
/* keep content readable on very wide screens */
.subbody>.mod,.subbody>.score,.stagebar,.stagehead{max-width:1240px;margin-left:auto;margin-right:auto}
.stagebar{justify-content:center;gap:12px}.stagebar .sb-l,.stagebar .sb-r{margin:0;justify-content:center}
.stagebar .pill,.stagebar .vb{padding:12px 20px;font-size:14px;border-radius:999px}.stagebar .vb{min-width:48px}.stagebar .ver small{font-size:11px}
/* question blocks shared by camera / actor / timing */
.qblock{margin:14px 0 0}.qblock>small{display:block;font:800 10px "Noto Sans",sans-serif;letter-spacing:.14em;color:var(--acc3);margin-bottom:8px}
.qopts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}.qopts.tight{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.qopt{background:var(--card);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:10px 12px;cursor:pointer;display:flex;flex-direction:column;gap:2px;transition:border-color .15s,transform .15s}
.qopt b{font-size:13px}.qopt span{font-size:11px;color:var(--ink3);line-height:1.3}
.qopt:hover{border-color:color-mix(in srgb,var(--acc) 50%,transparent)}.qopt.on{background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 28%,transparent),color-mix(in srgb,var(--acc) 20%,transparent));border-color:var(--acc3)}.qopt.on span{color:var(--ink2)}
html.dark .qopt{border-color:rgba(43,42,38,.12)}
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}.qgrid.three{grid-template-columns:1fr 1fr 1fr}
@media(max-width:980px){.qgrid,.qgrid.three{grid-template-columns:1fr}}
/* camera */
.mod.cam.v2 .camtop{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;background:var(--card);border-radius:16px;padding:14px 18px;margin-top:6px}
.camnow{display:flex;align-items:center;gap:12px}.camnow svg{width:56px;height:56px}.camnow path{fill:none;stroke:var(--acc3);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.camnow b{font-family:var(--disp);font-weight:900;font-size:20px;display:block}.camnow small{color:var(--ink3);font-size:12px}
.camsay{font-size:14px;line-height:1.5;color:var(--ink2)}.camsay b{color:var(--ink)}
.movegrid.v2{grid-template-columns:repeat(5,1fr);gap:10px}.movegrid.v2 .mvc{padding:14px 8px 10px;border-radius:14px}.movegrid.v2 .mvc svg{width:44px;height:44px}.movegrid.v2 .mvc b{font-size:13px;display:block}.movegrid.v2 .mvc small{font-size:10.5px;line-height:1.3;display:block;color:var(--ink3)}
.movegrid.v2 .mvc.on{background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 30%,transparent),color-mix(in srgb,var(--acc) 20%,transparent));box-shadow:0 0 0 1px var(--acc3)}.movegrid.v2 .mvc.on path{stroke:#fff}
@media(max-width:980px){.movegrid.v2{grid-template-columns:repeat(3,1fr)}.mod.cam.v2 .camtop{grid-template-columns:1fr}}
/* light XY */
.lgrid{display:grid;grid-template-columns:minmax(380px,1.3fr) minmax(260px,.9fr);gap:22px;align-items:start;margin-top:6px}
@media(max-width:980px){.lgrid{grid-template-columns:1fr}}
.lpad{position:relative;aspect-ratio:16/9;border-radius:16px;cursor:crosshair;box-shadow:var(--neu-in),inset 0 0 0 1px rgba(255,255,255,.08);overflow:hidden;user-select:none;touch-action:none}
.lpx{position:absolute;left:0;right:0;bottom:4px;display:flex;justify-content:space-between;padding:0 8px;font:700 9px "Noto Sans",sans-serif;letter-spacing:.12em;color:rgba(255,255,255,.75);text-shadow:0 1px 2px #000;pointer-events:none}
.lpy{position:absolute;top:0;bottom:0;left:6px;display:flex;flex-direction:column;justify-content:space-around;font:700 9px "Noto Sans",sans-serif;letter-spacing:.12em;color:rgba(255,255,255,.75);text-shadow:0 1px 2px #000;pointer-events:none}
.ldot{position:absolute;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid #111;box-shadow:0 0 0 3px rgba(255,255,255,.5),0 6px 16px rgba(0,0,0,.6);transform:translate(-50%,-50%);pointer-events:none}
.lpadhint{text-align:center;font-size:10.5px;color:var(--ink3);margin-top:6px}
.lkey b{font-family:var(--disp);font-weight:900;font-size:26px;letter-spacing:-.02em;display:block;line-height:1}.lkey span{font-size:12px;color:var(--ink2);display:block;margin:4px 0 12px}
.lpresets{display:flex;flex-wrap:wrap;gap:6px}.lpresets span{padding:6px 11px;border-radius:999px;background:var(--card);border:1px solid rgba(255,255,255,.08);font-size:12px;cursor:pointer}.lpresets span.on{background:linear-gradient(90deg,var(--acc),var(--acc3));color:#fff;border-color:transparent}
.mod.light.v2 .matchbtn,.mod.light.v2 .sky,.mod.light.v2 .wxbar,.mod.light.v2 .lread{display:none}
/* actor EI */
.actorpick.v2{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 10px}.actorpick.v2 .actor{width:96px;border-radius:14px;padding:6px;background:var(--card);text-align:center;cursor:pointer;border:1px solid rgba(255,255,255,.07)}.actorpick.v2 .actor img,.actorpick.v2 .actor .noimg{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block}.actorpick.v2 .actor b{display:block;font-size:11px;margin-top:5px;font-family:ui-monospace,Menlo,monospace}.actorpick.v2 .actor small{display:block;font-size:10px;color:var(--g,var(--ink3))}.actorpick.v2 .actor.on{border-color:var(--acc3);box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 35%,transparent)}
.eisay{font-size:14px;line-height:1.5;color:var(--ink2);background:var(--card);border-radius:14px;padding:12px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}.eisay b{color:var(--ink)}.eisay .keepsw{margin-left:auto}
.eigrid{display:grid;grid-template-columns:300px 1fr 1fr;gap:22px;margin-top:14px;align-items:start}.eigrid.dim>*:not(.eictl){opacity:.35;pointer-events:none}
@media(max-width:1100px){.eigrid{grid-template-columns:1fr 1fr}}@media(max-width:760px){.eigrid{grid-template-columns:1fr}}
.eiwheel .fluid{width:100%;aspect-ratio:1;border-radius:50%}.eistate{font-family:var(--disp);font-weight:900;font-size:24px;text-align:center;margin-top:12px;letter-spacing:-.01em}
.eim{display:grid;grid-template-columns:92px 1fr 30px;align-items:center;gap:8px;font:700 9px "Noto Sans",sans-serif;letter-spacing:.12em;color:var(--ink3);cursor:pointer;padding:3px 0}.eim:hover span{color:var(--ink)}
.eimbar{height:10px;border-radius:999px;background:var(--bg);box-shadow:var(--neu-in);overflow:hidden}.eimbar i{display:block;height:100%;border-radius:999px;transition:width .3s var(--ease)}.eim b{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--ink2);text-align:right}
.eirange{width:100%;-webkit-appearance:none;appearance:none;height:10px;border-radius:999px;background:linear-gradient(90deg,var(--bg),var(--c,var(--acc3)));box-shadow:var(--neu-in);margin:4px 0 2px;outline:none}.eirange::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid #111;box-shadow:0 4px 12px rgba(0,0,0,.5);cursor:pointer}
.eirl{display:flex;justify-content:space-between;font-size:10px;color:var(--ink3)}
.eictl .qblock{margin-top:0;margin-bottom:12px}.eictl .qopts.tight{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.mod.emo.v2 .lab{display:block;margin:0 0 6px}
/* timing */
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:6px}@media(max-width:980px){.tgrid{grid-template-columns:1fr}}
.tblock .lab{display:block;margin-bottom:8px}
.tpre{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-bottom:10px}.tp{background:var(--card);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:9px 11px;cursor:pointer}.tp b{font-size:12.5px;display:block}.tp span{font-size:10.5px;color:var(--ink3)}.tp.on{background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 28%,transparent),color-mix(in srgb,var(--acc) 20%,transparent));border-color:var(--acc3)}
.mod.timing.v2 .eq{width:100%}.mod.timing.v2 .eq svg{width:100%;height:auto;border-radius:12px}
.mod.timing.v2 .eq.spd .fill{fill:url(#gspd)}.mod.timing.v2 .eq.spd .ln{stroke:var(--ok);stroke-width:3}.mod.timing.v2 .eq.int .ln{stroke:var(--acc3);stroke-width:3}
.mod.timing.v2 .eq .fill{opacity:.6}.mod.timing.v2 .eq.spd .fill{fill:var(--ok);opacity:.22}.mod.timing.v2 .eq.int .fill{fill:var(--acc3);opacity:.22}.mod.timing.v2 .eq .nd{fill:#fff;stroke:#111;stroke-width:3;r:7}
.mod.timing.v2 .modebar,.mod.timing.v2 .transrow,.mod.timing.v2 .curves2,.mod.timing.v2 .segrow{display:none}
/* ================= v8.6 — SHOT TIMELINE ================= */
.score.v3 .bb-head{margin:4px 0 10px;align-items:center}.score.v3 .bb-head .modt{font-family:var(--disp);font-weight:900;font-size:18px}
.score.v3 .bb-add .crumb{font-size:11px;margin-left:8px}
.tlx{display:flex;flex-direction:column;gap:6px;background:var(--bg);border-radius:16px;padding:12px 14px 14px;box-shadow:var(--neu-in)}
.tlrow{display:grid;grid-template-columns:84px 1fr;gap:12px;align-items:stretch}.tlrow>small{font:800 9.5px "Noto Sans",sans-serif;letter-spacing:.14em;color:var(--ink3);align-self:center}
.tlrow.frames>small{color:var(--ink3)}
.tlframes{display:flex;gap:2px;height:64px;border-radius:10px;overflow:hidden;background:#000}.tlframes i{flex:1;background:#151622 center/cover no-repeat;display:block}.tlframes i.ph{background:linear-gradient(135deg,#2b2352,var(--acc) 60%,var(--acc3));opacity:.35;filter:blur(2px)}
.tlrow.ruler{height:14px}.tlruler{position:relative;height:14px}.tlruler span{position:absolute;transform:translateX(-50%);font:700 9px ui-monospace,Menlo,monospace;color:var(--ink3)}
.tlane{position:relative;height:58px;border-radius:12px;background:var(--card);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);cursor:copy;overflow:visible}
.tlane.cuts{height:34px;cursor:pointer}
.tlane.cam{background:repeating-linear-gradient(90deg,transparent 0 16.66%,rgba(255,255,255,.025) 16.66% 33.33%),var(--card)}
.tlane.over{box-shadow:inset 0 0 0 2px var(--ok)}.tlane.light.over{box-shadow:inset 0 0 0 2px #f2b05c}
body.beatdrag-cam .tlane.cam,body.beatdrag-light .tlane.light{box-shadow:inset 0 0 0 2px rgba(95,211,154,.5);animation:pulse 1.2s ease-in-out infinite}body.beatdrag-light .tlane.light{box-shadow:inset 0 0 0 2px rgba(242,176,92,.6)}
.dropghost{position:absolute;top:0;bottom:0;width:2px;background:#fff;pointer-events:none}.dropghost{font:800 10px ui-monospace,Menlo,monospace;color:#fff;padding-left:6px;line-height:58px;white-space:nowrap}
.tblk{position:absolute;top:4px;bottom:4px;border-radius:9px;display:flex;align-items:center;gap:8px;padding:0 10px 0 8px;cursor:grab;user-select:none;overflow:hidden;box-shadow:0 6px 14px -6px rgba(0,0,0,.8)}
.tblk.cam{background:linear-gradient(180deg,rgba(95,211,154,.32),rgba(95,211,154,.18));border:1px solid rgba(95,211,154,.55)}.tblk.cam svg{width:26px;height:26px;flex:none}.tblk.cam path{fill:none;stroke:var(--ok);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tblk.light{background:linear-gradient(180deg,color-mix(in srgb,var(--lc) 45%,transparent),color-mix(in srgb,var(--lc) 22%,transparent));border:1px solid color-mix(in srgb,var(--lc) 70%,transparent)}.tblk.light>i{width:14px;height:14px;border-radius:50%;background:var(--lc);box-shadow:0 0 10px var(--lc);flex:none}
.tblk div{min-width:0;line-height:1.15}.tblk b{font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tblk span{font-size:10px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.tblk em{position:absolute;right:8px;top:4px;font:800 9px ui-monospace,Menlo,monospace;color:rgba(255,255,255,.6);font-style:normal}
.tblk.on{box-shadow:0 0 0 2px #fff,0 8px 20px -6px rgba(0,0,0,.8)}
.tblk .tr{position:absolute;right:6px;bottom:4px}.tblk .tr select{font-size:9px;padding:1px 4px!important;border-radius:6px;max-width:110px}
.tlane.cuts .cut{position:absolute;top:-4px;bottom:-4px;width:4px;margin-left:-2px;background:var(--ok);border-radius:2px;cursor:ew-resize;box-shadow:0 0 0 2px var(--bg)}.tlane.cuts .cut b{position:absolute;top:-2px;left:8px;font:800 9px ui-monospace,Menlo,monospace;color:var(--ok);white-space:nowrap}
.tlane.cuts .onerline{position:absolute;left:6px;right:6px;top:50%;height:3px;margin-top:-1px;border-radius:2px;background:linear-gradient(90deg,var(--acc),var(--acc3))}
.score.v3 .bb-read{margin-top:12px}
/* movement / light cards */
.mvcard{position:relative;border-radius:14px;padding:10px 14px;cursor:grab;user-select:none;background:linear-gradient(135deg,rgba(95,211,154,.28),rgba(95,211,154,.12));border:1px solid rgba(95,211,154,.6);box-shadow:0 10px 24px -12px rgba(95,211,154,.6);min-width:260px}
.mvcard:active{cursor:grabbing}.mvcard.dragging{opacity:.5}
.mvcard small{display:block;font:800 9px "Noto Sans",sans-serif;letter-spacing:.14em;color:var(--ok);margin-bottom:6px}
.mvrow{display:flex;align-items:center;gap:12px}.mvrow svg{width:40px;height:40px;flex:none}.mvrow path{fill:none;stroke:var(--ok);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.mvrow b{font-family:var(--disp);font-weight:900;font-size:18px;display:block;letter-spacing:-.01em}.mvrow span{font-size:11.5px;color:var(--ink2)}
.mvcard>i{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-style:normal;color:rgba(255,255,255,.5);font-size:16px}
.mvcard.light{background:linear-gradient(135deg,color-mix(in srgb,var(--lc) 38%,transparent),color-mix(in srgb,var(--lc) 14%,transparent));border-color:color-mix(in srgb,var(--lc) 75%,transparent);box-shadow:0 10px 24px -12px var(--lc);margin-bottom:12px}.mvcard.light small{color:var(--lc)}.mvcard.light .mvrow>i{width:26px;height:26px;border-radius:50%;background:var(--lc);box-shadow:0 0 14px var(--lc);flex:none}
.camtop.v3{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;background:var(--card);border-radius:16px;padding:14px 18px;margin-top:6px}
@media(max-width:980px){.camtop.v3{grid-template-columns:1fr}}
/* visual options */
.vopts{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.vopt{background:var(--card);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:10px 8px 8px;cursor:pointer;text-align:center;transition:border-color .15s}
.vopt svg{width:44px;height:36px;display:block;margin:0 auto 6px}.vopt svg *{fill:none;stroke:var(--ink2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.vopt svg circle[r="2"],.vopt svg circle[r="2.2"],.vopt svg circle[r="2.5"],.vopt svg circle[r="3"]{fill:var(--ink2)}
.vopt b{font-size:12.5px;display:block}.vopt span{font-size:10px;color:var(--ink3);display:block;line-height:1.25;margin-top:2px}
.vopt:hover{border-color:color-mix(in srgb,var(--acc) 50%,transparent)}.vopt.on{background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 28%,transparent),color-mix(in srgb,var(--acc) 20%,transparent));border-color:var(--acc3)}.vopt.on svg *{stroke:#fff}.vopt.on svg circle[r="2"],.vopt.on svg circle[r="2.2"],.vopt.on svg circle[r="2.5"],.vopt.on svg circle[r="3"]{fill:#fff}
/* ================= v8.7 ================= */
/* light field with weather bars */
.lpad.v3{aspect-ratio:2/1}
.wxbands{position:absolute;inset:0;display:flex;flex-direction:column}
.wxband{flex:1;position:relative;border-bottom:1px solid rgba(0,0,0,.35);cursor:pointer;transition:filter .15s}.wxband:last-child{border-bottom:none}
.wxband b{position:absolute;left:0;top:50%;transform:translateY(-50%);font:800 10px "Noto Sans",sans-serif;letter-spacing:.1em;color:#fff;background:rgba(0,0,0,.62);padding:4px 10px 4px 8px;border-radius:0 999px 999px 0;text-transform:uppercase;white-space:nowrap}
.wxband.on{outline:2px solid #fff;outline-offset:-2px;z-index:1}.wxband.on b{background:#fff;color:#111}
.lpad.v3 .lpx{bottom:auto;top:4px;color:#fff;font-size:9px}
/* templates */
.tplbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:12px 0 4px;padding:10px 12px;border-radius:12px;background:var(--card);border:1px dashed rgba(255,255,255,.14)}
.tplbar>small{font:800 9px "Noto Sans",sans-serif;letter-spacing:.14em;color:var(--ink3);margin-right:4px}
.tpl{display:inline-flex;align-items:center;gap:6px;padding:6px 8px 6px 12px;border-radius:999px;background:var(--bg);border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);font-size:12px;cursor:pointer;user-select:none}.tpl:hover{border-color:var(--acc3)}.tpl i{font-style:normal;color:var(--ink3);font-size:11px;padding:0 3px}.tpl i:hover{color:#ff8a7a}
.tplbar .pill.sm{margin-left:auto}
/* EI wheel v3 */
.eigrid.v3{grid-template-columns:minmax(340px,440px) 1fr;gap:28px}
@media(max-width:980px){.eigrid.v3{grid-template-columns:1fr}}
.fluid.v3{width:100%;aspect-ratio:1;border-radius:50%;position:relative;box-shadow:0 30px 60px -20px rgba(0,0,0,.9),inset 0 -18px 40px rgba(0,0,0,.55),inset 0 14px 30px rgba(255,255,255,.18),0 0 0 1px rgba(255,255,255,.08);cursor:crosshair;touch-action:none;overflow:hidden;transition:box-shadow .2s}
.fluid.v3 .ftint{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,var(--g) 0%,color-mix(in srgb,var(--g) 70%,transparent) var(--gr,30%),transparent 100%);mix-blend-mode:soft-light;opacity:.95;pointer-events:none}
.fluid.v3::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.0) 40%,rgba(0,0,0,.45) 100%);pointer-events:none}
.fluid.v3 .fgloss{position:absolute;left:12%;top:5%;width:76%;height:40%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0));pointer-events:none;filter:blur(1px)}
.fluid.v3 .fcore{position:absolute;left:50%;top:50%;width:26%;height:26%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fff 0%,rgba(255,255,255,.2) 60%,transparent 100%);opacity:.22;pointer-events:none}
.fluid.v3 .ffam{position:absolute;transform:translate(-50%,-50%);font:900 10px "Noto Sans",sans-serif;letter-spacing:.12em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);pointer-events:none}
.fluid.v3 .fdot{width:30px;height:30px;border:4px solid #fff;box-shadow:0 0 0 4px var(--g),0 10px 24px rgba(0,0,0,.6)}
.eistate{font-size:30px;margin-top:14px;-webkit-text-fill-color:currentColor;background:none}
.mod.emo.v3{background:linear-gradient(135deg,color-mix(in srgb,var(--g) 10%,var(--bg)),var(--bg) 60%)}
.eictl.v3 .lab{display:block;margin-bottom:4px}.eictl.v3 .eirange{background:linear-gradient(90deg,var(--bg),var(--g))}
/* fluent curves */
.eq.v3 svg{width:100%;height:auto;border-radius:14px;background:var(--bg);box-shadow:var(--neu-in)}.eq.v3 .ln{fill:none;stroke-width:3.5;stroke-linecap:round}.eq.v3 .gr{stroke:rgba(255,255,255,.06);stroke-width:1}.eq.v3 .nd{fill:#fff;stroke:#111;stroke-width:3;cursor:ns-resize;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}.eq.v3 .nd:hover{r:9}
.mod.timing.v2 .eq .fill{opacity:1}
/* v8.8 apply buttons */
.subhead .applyp{margin-left:8px;flex:none}.subhead .applyp.go{box-shadow:0 6px 16px -8px color-mix(in srgb,var(--acc) 90%,transparent)}
/* v8.8 edit layout: the monitor is sized by height (16:9), the side panel takes the rest of the width */
.edtop{grid-template-columns:auto minmax(360px,1fr);gap:18px}
.monitor{width:min(100%,calc((min(52vh,620px)) * 16 / 9 + 8px))}
.monframe{height:auto;width:100%;aspect-ratio:16/9;max-height:min(52vh,620px)}
.edside{max-height:calc(min(52vh,620px) + 56px);padding:16px 18px}
.edside .gapfill.music textarea{min-height:110px}
.edside .mregfields label input{width:86px!important}
.edside .lpresets span,.edside .pill{font-size:12.5px}
.edside .notes{margin-top:auto}
@media(max-width:1100px){.edtop{grid-template-columns:1fr}.monitor{width:100%}}
.edtop{grid-template-columns:minmax(0,1.45fr) minmax(380px,1fr)}
.monitor{width:100%}
.monframe{width:100%;height:auto;aspect-ratio:16/9;max-height:64vh}
.monframe video{width:100%;height:100%;object-fit:contain;background:#000}
.edside{max-height:calc(64vh + 56px)}
.modelpick{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.modelpick select{font-size:12.5px}
/* ================= v9.0 — camera rig ================= */
.bedge{position:absolute;top:0;bottom:0;width:10px;cursor:ew-resize;z-index:2}.bedge.l{left:0;border-radius:9px 0 0 9px}.bedge.r{right:0;border-radius:0 9px 9px 0}.bedge:hover{background:rgba(255,255,255,.18)}
.tblk{padding-left:14px;padding-right:14px}
.camrig{display:grid;grid-template-columns:minmax(420px,1.5fr) minmax(300px,1fr);gap:22px;margin-top:12px;align-items:start}
@media(max-width:980px){.camrig{grid-template-columns:1fr}}
.camstagewrap .lab,.camside .lab{display:block;margin-bottom:6px}
.camstage{width:100%;aspect-ratio:16/9;border-radius:16px;box-shadow:var(--neu-in),inset 0 0 0 1px rgba(255,255,255,.08);cursor:grab;touch-action:none;user-select:none;display:block}
.camstage .land{fill:#151734}.camstage .minaret{fill:#1f2250}.camstage .grid line{stroke:color-mix(in srgb,var(--acc) 14%,transparent);stroke-width:1}
.camstage .frustum{stroke:rgba(95,211,154,.7);stroke-width:1.5}
.camstage .subject path{fill:#e8e6f0}.camstage .subject .shadow{fill:rgba(0,0,0,.5)}
.camstage .cam rect,.camstage .cam path{fill:var(--ok)}.camstage .cam .lens{fill:var(--bg);stroke:#fff;stroke-width:2}.camstage .cam .lens2{fill:var(--acc3)}
.camstage .lab{font:800 10px "Noto Sans",sans-serif;letter-spacing:.12em;fill:rgba(255,255,255,.55)}.camstage .lab.r{text-anchor:end;fill:#fff}
.camstage .vf rect{fill:rgba(0,0,0,.55);stroke:rgba(255,255,255,.35);stroke-width:1}.camstage .vf path{fill:#fff}.camstage .vf text{font:800 8px "Noto Sans",sans-serif;letter-spacing:.12em;fill:rgba(255,255,255,.6)}
.orbit{width:150px;height:150px;display:block;margin:0 auto 6px;cursor:grab;touch-action:none;user-select:none}
.orbit .ring{fill:none;stroke:rgba(255,255,255,.1);stroke-width:2}.orbit .arc{fill:none;stroke:color-mix(in srgb,var(--acc) 50%,transparent);stroke-width:2;stroke-dasharray:3 4}.orbit .tick{fill:rgba(255,255,255,.25)}.orbit .tick.on{fill:var(--ok)}
.orbit .subj{fill:#e8e6f0}.orbit .shadow{fill:rgba(0,0,0,.5)}.orbit .handle circle{fill:var(--ok);stroke:var(--bg);stroke-width:3}.orbit .handle path{fill:var(--bg)}.orbit .lab{font:800 10px "Noto Sans",sans-serif;letter-spacing:.12em;fill:#fff;text-anchor:middle}
.knobs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 12px}
.knob{text-align:center;cursor:ns-resize;user-select:none;touch-action:none;background:var(--card);border-radius:14px;padding:8px 6px 10px;border:1px solid rgba(255,255,255,.06)}
.knob svg{width:92px;height:92px;display:block;margin:0 auto}
.knob .body{fill:var(--bg);stroke:rgba(255,255,255,.08);stroke-width:2}.knob .face{fill:url(#none);fill:#22233a;stroke:rgba(255,255,255,.12);stroke-width:1;filter:drop-shadow(0 6px 10px rgba(0,0,0,.7))}
.knob .tk{stroke:rgba(255,255,255,.18);stroke-width:2;stroke-linecap:round}.knob .tk.lit{stroke:var(--acc3)}
.knob .ptr line{stroke:#fff;stroke-width:3;stroke-linecap:round}.knob .ptr circle{fill:var(--acc3)}
.knob small{display:block;font:800 9px "Noto Sans",sans-serif;letter-spacing:.14em;color:var(--ink3);margin-top:4px}.knob b{display:block;font-size:13px}.knob span{display:block;font-size:10px;color:var(--ink3)}
.mod.cam.v4 .qgrid,.mod.cam.v4 .vopts{display:none}
/* ================= v9.1 — actor v4 ================= */
.eigrid.v4{display:grid;grid-template-columns:minmax(340px,460px) 1fr;gap:28px;margin-top:14px;align-items:start}
@media(max-width:980px){.eigrid.v4{grid-template-columns:1fr}}
.fluid.v4{width:100%;aspect-ratio:1;border-radius:50%;position:relative;box-shadow:0 30px 60px -20px rgba(0,0,0,.9),inset 0 -18px 40px rgba(0,0,0,.55),inset 0 14px 30px rgba(255,255,255,.18),0 0 0 1px rgba(255,255,255,.08),0 0 60px -10px var(--g);cursor:crosshair;touch-action:none;overflow:hidden}
.fluid.v4 .ftint{position:absolute;inset:0;border-radius:50%;background:var(--g);opacity:calc(var(--gf,0) * .92);pointer-events:none;transition:opacity .08s}
.fluid.v4 .fgloss{position:absolute;left:12%;top:5%;width:76%;height:40%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0));pointer-events:none}
.fluid.v4::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(0,0,0,0) 45%,rgba(0,0,0,.5) 100%);pointer-events:none}
.fluid.v4 .ffam{position:absolute;transform:translate(-50%,-50%);font:900 10px "Noto Sans",sans-serif;letter-spacing:.12em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);pointer-events:none;opacity:calc(1 - var(--gf,0) * .55)}
.fluid.v4 .fdot{width:30px;height:30px;border:4px solid #fff;box-shadow:0 0 0 4px var(--g),0 10px 24px rgba(0,0,0,.6)}
.fface{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 10px 20px rgba(0,0,0,.5))}
.face .skin{fill:#fff7ea;stroke:rgba(0,0,0,.35);stroke-width:1.5}.face .feat path,.face .feat ellipse{stroke:#2b2a33;stroke-width:4;stroke-linecap:round}.face .feat .eye{fill:#2b2a33;stroke:none}.face .feat ellipse:not(.eye){fill:#5a2530}.face .tear{stroke:var(--acc);stroke-width:3}
.eistate{font-size:30px;margin-top:14px;-webkit-text-fill-color:currentColor;background:none}
.mod.emo.v4{background:linear-gradient(135deg,color-mix(in srgb,var(--g) calc(var(--gf,0) * 22%),var(--bg)),var(--bg) 70%);transition:background .15s}
/* sliders: thick and gradient, everywhere */
input[type=range]{-webkit-appearance:none;appearance:none;height:18px;border-radius:999px;background:linear-gradient(90deg,#2a2b3c,var(--acc) 60%,var(--acc3));box-shadow:var(--neu-in),inset 0 0 0 1px rgba(255,255,255,.08);outline:none;margin:4px 0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:4px solid #111;box-shadow:0 4px 12px rgba(0,0,0,.6);cursor:pointer}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid #111}
.eirange.big{height:22px;background:linear-gradient(90deg,var(--navy),var(--g))}.eirange.big.show{background:linear-gradient(90deg,var(--navy),var(--acc3) 50%,var(--g))}
.eictl.v4 .lab{display:block;margin-bottom:4px}
/* XY pads */
.padgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:16px}
.xypad{position:relative;aspect-ratio:1;border-radius:16px;cursor:crosshair;touch-action:none;user-select:none;overflow:hidden;box-shadow:var(--neu-in),inset 0 0 0 1px rgba(255,255,255,.08);
  background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 55%,transparent),color-mix(in srgb,var(--acc) 35%,transparent) 50%,rgba(255,179,107,.5)),var(--bg)}
.xypad[data-id=act]{background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 50%,transparent),rgba(255,138,122,.55)),linear-gradient(90deg,var(--navy),#2a2b3c)}
.xypad[data-id=tb]{background:linear-gradient(180deg,rgba(95,211,154,.15),color-mix(in srgb,var(--acc) 55%,transparent)),linear-gradient(90deg,var(--navy),color-mix(in srgb,var(--acc) 60%,transparent))}
.xypad[data-id=gaze]{background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.2),transparent 55%),linear-gradient(90deg,color-mix(in srgb,var(--acc) 50%,transparent),var(--navy) 50%,rgba(95,211,154,.5))}
.xypad .pl{position:absolute;left:10px;top:8px;font:800 9px "Noto Sans",sans-serif;letter-spacing:.14em;color:#fff;text-shadow:0 1px 2px #000}
.xypad .ax{position:absolute;font:700 8.5px "Noto Sans",sans-serif;letter-spacing:.1em;color:rgba(255,255,255,.7);text-transform:uppercase;text-shadow:0 1px 2px #000;pointer-events:none}.xypad .ax.l{left:8px;top:50%;transform:translateY(-50%) rotate(-90deg);transform-origin:left center;left:14px}.xypad .ax.r{right:8px;top:50%;transform:translateY(-50%) rotate(90deg);transform-origin:right center;right:14px}.xypad .ax.t{left:50%;top:8px;transform:translateX(-50%)}.xypad .ax.b{left:50%;bottom:8px;transform:translateX(-50%)}
.xypad .ppt{position:absolute;transform:translate(-50%,-50%);font:700 9.5px "Noto Sans",sans-serif;color:rgba(255,255,255,.55);white-space:nowrap;pointer-events:none;padding:2px 6px;border-radius:999px}.xypad .ppt.on{color:#fff;background:rgba(0,0,0,.45)}
.xypad .pdot{position:absolute;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid #111;transform:translate(-50%,-50%);box-shadow:0 0 0 3px rgba(255,255,255,.4),0 6px 16px rgba(0,0,0,.6);pointer-events:none}
.xypad .pread{position:absolute;right:10px;bottom:8px;font-size:12px;color:#fff;background:rgba(0,0,0,.55);padding:3px 9px;border-radius:999px;pointer-events:none}
.xypad[data-id=tb] .ppt:not(.on){display:none}.xypad .ppt.on{z-index:1}
/* ================= v9.2 — cinematic stage ================= */
.camstage.v2{border-radius:18px;box-shadow:0 30px 60px -24px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.08);cursor:grab}
.camstage.v2.dragging{cursor:grabbing}
.camstage.v2 .stars circle{fill:#fff;opacity:.55}
.camstage.v2 .dunes.far{fill:#241d3f}.camstage.v2 .dunes.near{fill:#1a1631}.camstage.v2 .minaret{fill:#12102a}
.camstage.v2 .grid line{stroke:var(--acc3);stroke-width:1;opacity:.22}
.camstage.v2 .rail{stroke:rgba(255,255,255,.25);stroke-width:3;stroke-linecap:round}.camstage.v2 .rail2{stroke:rgba(255,255,255,.10);stroke-width:3;stroke-linecap:round}
.camstage.v2 .cone{mix-blend-mode:screen}
.camstage.v2 .subject .body{fill:#d9d4e6}.camstage.v2 .subject .rim{mix-blend-mode:screen;opacity:.8}.camstage.v2 .subject .shadow{fill:rgba(0,0,0,.7)}
.camstage.v2 .camg{transform-box:view-box;transition:transform .45s cubic-bezier(.2,.8,.2,1)}.camstage.v2.dragging .camg{transition:none}
.camstage.v2 .cbody{fill:var(--ok)}.camstage.v2 .cmag{fill:#3fae7a}.camstage.v2 .clens{fill:var(--bg);stroke:#fff;stroke-width:3}.camstage.v2 .clens2{fill:var(--acc3)}.camstage.v2 .rec{fill:#ff5a5a}
.camstage.v2 .camg .shadow{fill:rgba(0,0,0,.55)}
.camstage.v2 .lab{font:800 11px "Noto Sans",sans-serif;letter-spacing:.14em;fill:rgba(255,255,255,.6)}.camstage.v2 .lab.r{text-anchor:end;fill:#fff}
.camstage.v2 .vf rect{fill:rgba(0,0,0,.6);stroke:rgba(255,255,255,.35);stroke-width:1}.camstage.v2 .vf .safe{fill:none;stroke:rgba(255,255,255,.18);stroke-dasharray:3 3}.camstage.v2 .vf .body{fill:#fff}.camstage.v2 .vf text{font:800 9px "Noto Sans",sans-serif;letter-spacing:.14em;fill:rgba(255,255,255,.7)}
.camstage.v2 .cone,.camstage.v2 .subject,.camstage.v2 .vf{transition:all .45s cubic-bezier(.2,.8,.2,1)}
/* ================= v9.3 ================= */
.fluid.v4 .fgloss{opacity:.7}
.face.q .feat path,.face.q .feat ellipse{stroke:rgba(255,255,255,.85);stroke-width:3.5;stroke-linecap:round;fill:none}.face.q .feat ellipse[rx="4.5"]{fill:rgba(255,255,255,.85);stroke:none}
.fface{width:30%;opacity:.9;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
.eictl.v4 .eirange.big{height:30px;width:min(100%,360px);display:block;border-radius:999px}
.eictl.v4 .eirl{width:min(100%,360px);font-size:10px}
.eictl.v4 .lab{font-size:10px}
/* combinable pads */
.xypad.v2 .pgrid{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(180deg,rgba(255,255,255,.09) 1px,transparent 1px);background-size:calc(100% / var(--nx)) 100%,100% calc(100% / var(--ny));pointer-events:none}
.xypad.v2[data-id=act]{background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 55%,transparent),rgba(255,90,90,.6)),linear-gradient(90deg,var(--bg),#3a3b5c)}
.xypad.v2[data-id=gaze]{background:linear-gradient(180deg,rgba(242,208,107,.35),color-mix(in srgb,var(--acc) 50%,transparent)),linear-gradient(90deg,#1a1b2e,rgba(95,211,154,.55))}
.xypad.v2 .pread{font-size:13px;padding:5px 11px}
.xypad.v2 .ax.b{left:12px;transform:none}.xypad.v2 .ax.t{left:auto;right:12px;transform:none}
/* ================= v9.4 ================= */
.applyp{display:none!important}
.tgrid{grid-template-rows:auto auto auto}.tblock{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start}.tblock .lab{align-self:start}
.stage3d{width:100%;aspect-ratio:16/9;border-radius:18px;box-shadow:0 30px 60px -24px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.08);cursor:grab;touch-action:none;user-select:none;display:block}
.stage3d.drawing{cursor:crosshair}
.stage3d .stars circle{fill:#fff;opacity:.5}
.stage3d .grid line{stroke:var(--acc3);stroke-width:1;opacity:.16}.stage3d .grid line.ax{opacity:.45;stroke:#c7ccff}
.stage3d .ring{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1;stroke-dasharray:4 6}
.stage3d .facing{stroke:#fff;stroke-width:2;opacity:.6}.stage3d .tiny{font:800 9px "Noto Sans",sans-serif;letter-spacing:.14em;fill:rgba(255,255,255,.7);text-anchor:middle}
.stage3d .cone{fill:rgba(95,211,154,.28);mix-blend-mode:screen}
.stage3d .subject .body{fill:#d9d4e6}.stage3d .subject .rim{fill:url(#none);fill:rgba(255,217,166,.25);mix-blend-mode:screen}.stage3d .subject .shadow{fill:rgba(0,0,0,.65)}
.stage3d .pole{stroke:rgba(255,255,255,.25);stroke-width:1.5;stroke-dasharray:3 4}.stage3d .shadow{fill:rgba(0,0,0,.5)}
.stage3d .camg{cursor:grab}.stage3d .cbody{fill:var(--ok)}.stage3d .cmag{fill:#3fae7a}.stage3d .clens{fill:var(--bg);stroke:#fff;stroke-width:3}.stage3d .clens2{fill:var(--acc3)}.stage3d .rec{fill:#ff5a5a}
.stage3d .pathg{fill:none;stroke:rgba(255,80,80,.35);stroke-width:2;stroke-dasharray:4 5}.stage3d .pathglow{fill:none;stroke:var(--bad);stroke-width:10;opacity:.25;stroke-linecap:round;stroke-linejoin:round;filter:blur(3px)}.stage3d .path{fill:none;stroke:var(--bad);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.stage3d .pstart{fill:#fff;stroke:var(--bad);stroke-width:3}.stage3d .pend{fill:var(--bad);stroke:#fff;stroke-width:3}
.stage3d .lab{font:800 11px "Noto Sans",sans-serif;letter-spacing:.14em;fill:rgba(255,255,255,.6)}.stage3d .lab.r{text-anchor:end;fill:#fff}.stage3d .lab.d{fill:#ff8a8a;letter-spacing:.04em;font-weight:700}
.stagebar3d{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}.stagebar3d .lab{margin:0 auto 0 0}
.lockchk{display:inline-flex;align-items:center;gap:8px;font-size:12px;cursor:pointer;user-select:none}.lockchk i{width:34px;height:20px;border-radius:999px;background:var(--bg);box-shadow:var(--neu-in);position:relative;display:inline-block}.lockchk i::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .15s}.lockchk.on i{background:linear-gradient(90deg,var(--acc),var(--ok))}.lockchk.on i::after{left:17px}
.camrig.v5{grid-template-columns:minmax(460px,1.8fr) minmax(240px,.8fr)}
.camrig.v5 .knobs{grid-template-columns:repeat(2,1fr)}
@media(max-width:980px){.camrig.v5{grid-template-columns:1fr}}
/* ================= v9.5 — orbit sphere ================= */
.stage3d.orbit{cursor:grab}.stage3d.orbit.dragging{cursor:grabbing}
.stage3d.orbit .wf{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.1}.stage3d.orbit .wf.eq{stroke:color-mix(in srgb,var(--acc) 60%,transparent);stroke-width:1.6}.stage3d.orbit .wb{fill:none;stroke:rgba(255,255,255,.07);stroke-width:1}
.stage3d.orbit .floor{fill:rgba(0,0,0,.35);stroke:rgba(255,255,255,.06)}
.stage3d.orbit .beam{stroke:rgba(255,255,255,.7);stroke-width:2;stroke-linecap:round}
.stage3d.orbit .halo{fill:rgba(95,211,154,.18)}
.stage3d.orbit .subj .card{fill:var(--card);stroke:rgba(255,255,255,.25);stroke-width:2;filter:drop-shadow(0 16px 30px rgba(0,0,0,.7))}.stage3d.orbit .subj .sil{fill:#d9d4e6}
.stage3d.orbit .tiny{font:800 10px "Noto Sans",sans-serif;letter-spacing:.14em;fill:rgba(255,255,255,.8);text-anchor:middle}
.stage3d.orbit .lab.c{text-anchor:middle;fill:rgba(255,255,255,.75)}
.stage3d.orbit .nudge text{font:400 28px sans-serif;fill:rgba(255,255,255,.5);text-anchor:middle;cursor:pointer;user-select:none}.stage3d.orbit .nudge text:hover{fill:#fff}
.stage3d.orbit .path{stroke:var(--bad);stroke-width:3.5}.stage3d.orbit .pathglow{stroke:var(--bad);stroke-width:12}
/* ================= v9.6 — three-column stage ================= */
.stage.s3{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(480px,2fr) minmax(300px,1fr);gap:18px;align-items:stretch}
@media(max-width:1200px){.stage.s3{grid-template-columns:1fr}}
.stageL{display:flex;flex-direction:column;gap:8px;min-height:0}.lp-head{display:flex;align-items:center;justify-content:space-between}.lp-head .lab{margin:0}
.liveprompt{flex:1;min-height:320px;width:100%;font-family:ui-monospace,Menlo,monospace;font-size:12px;line-height:1.55;padding:12px 14px;border-radius:14px;resize:vertical}
.lp-note{font-size:10.5px}
.stageC{min-width:0}.stageC .stageplayer{max-width:none}
.stageR .mod.timing{background:var(--bg);border-radius:16px;box-shadow:var(--neu-in);padding:14px 16px;border:none;height:100%}
.stageR .mod.timing .tgrid{grid-template-columns:1fr;gap:12px}.stageR .mod.timing .tpre{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}.stageR .mod.timing .qgrid.three{grid-template-columns:1fr}.stageR .mod.timing .minip{display:none}.stageR .mod.timing .modt{padding-right:0}
.stageR .mod.timing .gstrip{display:none}
.stageR{max-height:calc(64vh + 120px);overflow:auto;border-radius:16px}
.stage3d.orbit{aspect-ratio:4/3;max-height:560px}
.stage3d,.camstage{height:auto!important}
/* ================= v9.8 ================= */
.stage3d.orbit .cam3d .ff{fill:#6fe0a8;stroke:var(--bg);stroke-width:1.5}.stage3d.orbit .cam3d .ft{fill:#8cf0bf;stroke:var(--bg);stroke-width:1.5}.stage3d.orbit .cam3d .fs{fill:#3fae7a;stroke:var(--bg);stroke-width:1.5}.stage3d.orbit .cam3d .fb{fill:#2c7f58;stroke:var(--bg);stroke-width:1.5}
.stage3d.orbit .cam3d .clens{fill:var(--bg);stroke:#fff;stroke-width:2}.stage3d.orbit .cam3d .clens2{fill:var(--acc3)}.stage3d.orbit .cam3d .rec{fill:#ff5a5a}
.stage3d.orbit .readout rect{fill:rgba(10,11,17,.75);stroke:rgba(255,255,255,.18)}.stage3d.orbit .readout .ro1{font:900 16px var(--disp);fill:#fff;letter-spacing:.02em}.stage3d.orbit .readout .ro2{font:700 12px "Noto Sans",sans-serif;fill:rgba(255,255,255,.85)}.stage3d.orbit .readout .ro3{font:700 10px ui-monospace,Menlo,monospace;fill:var(--acc3);letter-spacing:.08em}
.stage3d.orbit .pend{cursor:grab}.stage3d.orbit .pend circle{fill:var(--bad);stroke:#fff;stroke-width:3}.stage3d.orbit .pend .halo{fill:rgba(255,77,77,.2);stroke:none}.stage3d.orbit .pend text{fill:#ff8a8a}
.stage3d.dirmode{cursor:crosshair}
.zoomrow{display:flex;align-items:center;gap:10px;margin-top:10px}.zoomrow small{font:800 9px "Noto Sans",sans-serif;letter-spacing:.14em;color:var(--ink3)}.zoomrow span{font-size:10px;color:var(--ink3)}.zoomrow input{flex:1;height:14px;background:linear-gradient(90deg,#2a2b3c,var(--ok))}.zoomrow b{font:700 12px ui-monospace,Menlo,monospace;min-width:52px;text-align:right}
.stagebar3d.v2 .lockchk{display:none}
/* ================= v9.9 — aim handle · keyframe timeline · lanes ================= */
.stage3d.orbit .aimh{cursor:grab}.stage3d.orbit .aimh circle{fill:#fff;stroke:#111;stroke-width:3}.stage3d.orbit .aimh .halo{fill:rgba(255,255,255,.15);stroke:none}.stage3d.orbit .aimh text{fill:rgba(255,255,255,.8)}
.kftl{display:flex;align-items:center;gap:10px;margin-top:10px}.kftl .lcd{min-width:58px;text-align:center}
.kfbar{position:relative;flex:1;height:34px;border-radius:10px;background:var(--bg);box-shadow:var(--neu-in);cursor:pointer;user-select:none;touch-action:none}
.kfbar>i{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.08)}
.kfseg{position:absolute;top:11px;height:12px;border-radius:6px;background:rgba(95,211,154,.22)}.kfseg.path{background:repeating-linear-gradient(90deg,rgba(255,77,77,.55) 0 6px,rgba(255,77,77,.2) 6px 12px)}
.kfd{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;background:var(--ok);transform:rotate(45deg);border-radius:4px;cursor:pointer;border:2px solid var(--bg);box-shadow:0 4px 10px rgba(0,0,0,.6)}.kfd.on{background:#fff;box-shadow:0 0 0 3px rgba(95,211,154,.5)}.kfd b{position:absolute;inset:0;display:grid;place-items:center;transform:rotate(-45deg);font:900 9px "Noto Sans",sans-serif;color:var(--bg)}
.kfph{position:absolute;top:-4px;bottom:-4px;width:3px;margin-left:-1px;background:#fff;border-radius:2px;box-shadow:0 0 8px #fff;pointer-events:none}.kfph::before{content:"";position:absolute;left:-6px;top:-4px;width:15px;height:10px;background:#fff;border-radius:3px 3px 6px 6px}
.kflanes{display:flex;flex-direction:column;gap:3px;margin-top:12px}
.kflane{display:grid;grid-template-columns:86px 1fr;gap:8px;align-items:center}.kflane small{font:800 8.5px "Noto Sans",sans-serif;letter-spacing:.12em;color:var(--ink3);text-align:right}
.kflbar{position:relative;height:20px;border-radius:6px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)}
.kfm{position:absolute;top:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;background:var(--acc3);cursor:pointer;border:2px solid var(--bg)}.kfm.inh{background:transparent;border:2px solid color-mix(in srgb,var(--acc) 50%,transparent)}.kfm.on{box-shadow:0 0 0 3px rgba(255,255,255,.35)}
.kfm span{position:absolute;left:14px;top:50%;transform:translateY(-50%);font:600 9.5px "Noto Sans",sans-serif;color:var(--ink2);white-space:nowrap;pointer-events:none;opacity:.85}.kfm.inh span{opacity:.35}
.flash{outline:2px solid #fff;outline-offset:2px;transition:outline .2s}
/* ================= v10.0 ================= */
.lcardv2{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--lc) 38%,transparent),color-mix(in srgb,var(--lc) 14%,transparent));border:1px solid color-mix(in srgb,var(--lc) 75%,transparent);margin-bottom:12px}.lcardv2 .mvrow{flex:1}.lcardv2 .mvrow>i{width:26px;height:26px;border-radius:50%;background:var(--lc);box-shadow:0 0 14px var(--lc);flex:none}
.matchbig{display:block;width:100%;margin-top:12px;padding:16px 18px;border-radius:16px;border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 30%,transparent),color-mix(in srgb,var(--acc) 20%,transparent));color:#fff;text-align:left;cursor:pointer}.matchbig b{display:block;font-family:var(--disp);font-weight:900;font-size:16px}.matchbig small{display:block;font-size:11px;color:rgba(255,255,255,.75);margin-top:3px}.matchbig.go{border-color:var(--ok);background:linear-gradient(135deg,rgba(95,211,154,.35),rgba(95,211,154,.15))}
.mvcard .sendtl{position:absolute;right:12px;top:50%;transform:translateY(-50%);padding:8px 12px;font-size:11px}
.mvcard{padding-right:150px}
/* pinned beat timeline */
.step[data-k="shape"] .sub[data-k="sub:score"]{position:sticky;top:64px;z-index:12;background:var(--card);box-shadow:0 18px 30px -20px rgba(0,0,0,.9)}
.step[data-k="shape"] .sub[data-k="sub:score"].closed{position:static}
/* prompt dock */
#promptdock{position:fixed;left:18px;bottom:84px;width:360px;max-height:46vh;display:none;flex-direction:column;background:var(--card);border:1px solid color-mix(in srgb,var(--acc) 35%,transparent);border-radius:16px;box-shadow:0 24px 50px -20px rgba(0,0,0,.9);z-index:25;overflow:hidden}
#promptdock.show{display:flex}#promptdock .pd-h{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--ln)}#promptdock .pd-h .lab{margin:0}
#promptdock pre{margin:0;padding:10px 12px;font:11.5px/1.5 ui-monospace,Menlo,monospace;white-space:pre-wrap;overflow:auto;color:var(--ink2)}
#promptdock.min{max-height:40px}#promptdock.min pre{display:none}
@media(max-width:1100px){#promptdock{display:none!important}}
/* v10.1 — Cut the Time fits beside the player, no scroll */
.stageR{max-height:none;overflow:visible}
.stage.s3{align-items:stretch}
.stageR .mod.timing{padding:10px 12px;display:flex;flex-direction:column;gap:6px;height:100%;max-height:calc(64vh + 120px);overflow:hidden}
.stageR .mod.timing .modt{font-size:12px;margin-bottom:2px}.stageR .mod.timing .modt .beat{display:none}
.stageR .mod.timing .tgrid{display:flex;flex-direction:column;gap:6px;grid-template-rows:none}
.stageR .mod.timing .tblock{display:block}
.stageR .mod.timing .tblock .lab{font-size:9.5px;margin-bottom:4px;letter-spacing:.08em}
.stageR .mod.timing .tpre{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px}
.stageR .mod.timing .tp{padding:3px 8px;border-radius:999px;flex:0 0 auto}.stageR .mod.timing .tp b{font-size:10.5px;display:inline}.stageR .mod.timing .tp span{display:none}
.stageR .mod.timing .eq svg{height:58px;border-radius:8px}
.stageR .mod.timing .eqh{margin-bottom:2px}.stageR .mod.timing .eqh small{font-size:9px}.stageR .mod.timing .eqh .crumb{display:none}
.stageR .mod.timing .qgrid.three{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.stageR .mod.timing .qblock>small{font-size:9.5px;display:block;margin-bottom:3px}
.stageR .mod.timing .qopts.tight{display:flex;flex-wrap:wrap;gap:4px}
.stageR .mod.timing .qopt{padding:3px 8px;border-radius:999px;flex-direction:row;gap:4px;align-items:baseline}.stageR .mod.timing .qopt b{font-size:10.5px}.stageR .mod.timing .qopt span{display:none}
.stageR .mod.timing .qopt.on span{display:inline;font-size:9.5px;opacity:.7}
@media(max-width:1100px){.stageR .mod.timing{max-height:none;overflow:visible}.stageR .mod.timing .eq svg{height:80px}}
.stageR .mod.timing .eq .nd{r:6}.stageR .mod.timing .eq .ln{vector-effect:non-scaling-stroke}.stageR .mod.timing .eq .gr{vector-effect:non-scaling-stroke}
/* v10.1 — composer as step 1 */
.step[data-k="compose"] .composer{margin:0;box-shadow:none;background:transparent;padding:4px 20px 16px}
.step[data-k="compose"] .composer .modt{display:none}
.step[data-k="compose"] .cmpbox textarea{min-height:118px;font-size:17px;line-height:1.5;padding:16px 18px}
.step[data-k="pick"] .stephead b{background:var(--bg);color:var(--ink3)}
.step[data-k="pick"] .stephead span{font-weight:700;opacity:.85}
/* v10.2 — film camera · presets row · sparse lanes */
.stage3d.orbit .cam3d.film polygon{stroke:#06070c;stroke-width:.8;stroke-linejoin:round}
.stage3d.orbit .cam3d.film .body.ff{fill:#3a3d49}.stage3d.orbit .cam3d.film .body.ft{fill:#4a4e5c}.stage3d.orbit .cam3d.film .body.fs{fill:#2c2f3a}.stage3d.orbit .cam3d.film .body.fb{fill:#22242d}
.stage3d.orbit .cam3d.film .handle{fill:#1d1f27}.stage3d.orbit .cam3d.film .handle.ft{fill:#2e313c}
.stage3d.orbit .cam3d.film .mag.side.s0{fill:#343746}.stage3d.orbit .cam3d.film .mag.side.s1{fill:#2a2d39}.stage3d.orbit .cam3d.film .mag.cap{fill:#4d5163}
.stage3d.orbit .cam3d.film .lens.side.s0{fill:#15161c}.stage3d.orbit .cam3d.film .lens.side.s1{fill:#1f2128}.stage3d.orbit .cam3d.film .lens.cap{fill:#0d0e12}
.stage3d.orbit .cam3d.film .hood{fill:#101117}.stage3d.orbit .cam3d.film .hood.ff{fill:#07080b}
.stage3d.orbit .cam3d.film .eye{fill:#1a1c24}.stage3d.orbit .cam3d.film .eye.fb{fill:var(--acc)}
.stage3d.orbit .cam3d.film .glass{fill:var(--acc);stroke:var(--acc3);stroke-width:1.2;opacity:.95}.stage3d.orbit .cam3d.film .glint{fill:#fff;opacity:.55}.stage3d.orbit .cam3d.film .rec{fill:var(--bad);filter:drop-shadow(0 0 4px var(--bad))}
.stage3d.orbit .cam3d.film .ff{fill:#3a3d49}
.mod.cam .qblock.presets{margin:0 0 12px}.mod.cam .qblock.presets>small{display:block;margin-bottom:6px}
.mod.cam .qblock.presets .movegrid.v2{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.mod.cam .qblock.presets .mvc{flex:0 0 auto;min-width:96px;padding:8px 10px;border-radius:12px}.mod.cam .qblock.presets .mvc svg{width:22px;height:22px}.mod.cam .qblock.presets .mvc small{display:none}
.kflanes.v2 .kfm.set{background:var(--ok)}.kflanes.v2 .kfm.on{background:#fff;border-color:var(--ok);box-shadow:0 0 0 3px rgba(95,211,154,.35)}
.kfhint{font-size:10.5px;opacity:.75}
/* v10.3 — notification centre · fill panel · fresh clip */
#notis{position:fixed;top:14px;right:16px;z-index:300;display:flex;flex-direction:column;gap:8px;width:min(360px,calc(100vw - 32px))}
.noti{background:var(--card);border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);border-radius:16px;padding:12px 14px;box-shadow:0 18px 40px -14px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.3);animation:notiIn .35s ease}
.noti .nt{display:flex;align-items:center;gap:10px}.noti .nt b{font-family:var(--disp);font-weight:900;font-size:13.5px;letter-spacing:-.01em}.noti .nt i{margin-left:auto;font-style:normal;cursor:pointer;opacity:.6;font-size:12px}.noti .nt i:hover{opacity:1}
.noti>span{display:block;font-size:11.5px;color:var(--ink2);margin-top:3px}.noti .na{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
@keyframes notiIn{from{transform:translateY(-12px);opacity:0}to{transform:none;opacity:1}}
.tclip.fresh{outline:3px solid var(--ok);outline-offset:-1px;box-shadow:0 0 0 4px rgba(95,211,154,.3),0 0 24px rgba(95,211,154,.5);animation:freshPulse 1.2s ease-in-out infinite alternate}
@keyframes freshPulse{from{box-shadow:0 0 0 3px rgba(95,211,154,.25),0 0 12px rgba(95,211,154,.35)}to{box-shadow:0 0 0 6px rgba(95,211,154,.45),0 0 30px rgba(95,211,154,.7)}}
.gapfill.fillv2 .modt{display:flex;align-items:center;gap:10px}.gapfill.fillv2 .frames{display:flex;gap:10px;margin:8px 0}.gapfill.fillv2 .fr{flex:1;min-width:0}.gapfill.fillv2 .fr img{width:100%;border-radius:10px;display:block;aspect-ratio:16/9;object-fit:cover}.gapfill.fillv2 .fr small{display:block;font-size:9.5px;letter-spacing:.08em;margin-top:4px;color:var(--ink3)}
.gapfill.fillv2 .fillprompt{margin-top:6px}.gapfill.fillv2 .fillprompt .lab{display:block;margin-bottom:6px}.gapfill.fillv2 .composer{padding:0;margin:0;box-shadow:none;background:transparent}.gapfill.fillv2 .cmpbox textarea{min-height:96px}
.pill.go.big{font-size:13.5px;padding:10px 18px}
/* v10.3 — the big stage player replaces the per-module mini-players (they covered buttons) */
.pflow .mod .minip,.pflow .score .minip{display:none!important}
/* v10.4 — videography controls · keyframe popover */
.vctrls{display:flex;flex-direction:column;gap:12px}
.vc{background:var(--card);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:10px 12px}
.vc>small{display:flex;align-items:baseline;gap:8px;font:800 9.5px "Noto Sans",sans-serif;letter-spacing:.12em;color:var(--ink3);margin-bottom:8px}.vc>small em{font-style:normal;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink2);font-size:11px;margin-left:auto}
.lensrow{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.lensopt{text-align:center;cursor:pointer;padding:6px 4px;border-radius:10px;border:1px solid transparent;transition:.15s}.lensopt:hover{background:rgba(255,255,255,.04)}.lensopt.on{border-color:var(--acc3);background:color-mix(in srgb,var(--acc) 14%,transparent)}
.lensopt svg{width:44px;height:44px;display:block;margin:0 auto 2px}.lensopt .barrel{fill:#15161c;stroke:#4a4e5c;stroke-width:2}.lensopt .glass{fill:var(--acc);stroke:var(--acc3);stroke-width:1}.lensopt.on .glass{fill:var(--acc)}.lensopt .glint{fill:#fff;opacity:.6}
.lensopt b{display:block;font-size:12.5px}.lensopt b i{font-style:normal;font-size:9px;opacity:.6;margin-left:1px}.lensopt span{font-size:9.5px;color:var(--ink3)}
.srow{display:flex;align-items:center;gap:8px}.srow span{font-size:15px}.srow input.thick.short{flex:1;height:22px;margin:0}
.arow{display:flex;align-items:center;gap:12px}.arow>div{flex:0 0 84px}.arow input{flex:1}
svg.aper,svg.level{width:84px;height:84px;display:block}
.aper .ring{fill:#121318;stroke:#4a4e5c;stroke-width:3}.aper .hole{fill:#05060a}.aper .blade{fill:#2c2f3a;stroke:var(--bg);stroke-width:.8}.aper .light{fill:var(--acc3);opacity:.85;filter:drop-shadow(0 0 6px var(--acc))}.aper .fnum{text-anchor:middle;font:900 10px "Noto Sans",sans-serif;fill:#fff}
.level .ring{fill:#121318;stroke:#4a4e5c;stroke-width:3}.level .horizon{stroke:#fff;stroke-width:1.5}.level .ground{fill:#2f3a5e;opacity:.9}.level .sun{fill:#ffd36a}.level .mark{stroke:var(--acc3);stroke-width:2}.level .deg{text-anchor:middle;font:800 9px "Noto Sans",sans-serif;fill:#c9cde6}
.chips{display:flex;flex-wrap:wrap;gap:5px}.chip{padding:4px 9px;border-radius:999px;background:var(--bg);border:1px solid rgba(255,255,255,.08);font-size:11px;cursor:pointer}.chip.on{background:linear-gradient(135deg,var(--acc),var(--acc3));color:#fff;border-color:transparent}
#kfpop{position:absolute;z-index:320;background:var(--card);border:1px solid color-mix(in srgb,var(--acc) 50%,transparent);border-radius:16px;padding:12px;box-shadow:0 24px 50px -16px rgba(0,0,0,.9);animation:notiIn .2s ease}
#kfpop .kph{display:flex;align-items:center;margin-bottom:8px}#kfpop .kph b{font-family:var(--disp);font-weight:900;font-size:12.5px;letter-spacing:.04em}#kfpop .kph i{margin-left:auto;font-style:normal;cursor:pointer;opacity:.6}
#kfpop .vc{border:none;padding:0;background:transparent}#kfpop .kpf{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.flash{outline:2px solid var(--ok);outline-offset:3px;border-radius:14px}
@media(max-width:900px){.lensrow{grid-template-columns:repeat(6,1fr)}.lensopt svg{width:34px;height:34px}}
/* v10.4b — big scrubber */
.kftl[data-v]{gap:12px;margin-top:12px}.kftl[data-v] .play{width:44px;height:44px;border-radius:50%;font-size:15px;display:grid;place-items:center}
.kftl[data-v] .lcd{min-width:70px;font-size:15px;padding:8px 10px}
.kfbar.big{height:56px;border-radius:14px}.kfbar.big>i{background:rgba(255,255,255,.07)}.kfbar.big>i u{position:absolute;bottom:4px;left:4px;font:700 9px "Noto Sans",sans-serif;color:var(--ink3);text-decoration:none;letter-spacing:.05em}
.kfbar.big .kfd{width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:6px}.kfbar.big .kfd b{font-size:11px}
.kfbar.big .kfph{width:4px;margin-left:-2px;top:-8px;bottom:-8px}.kfbar.big .kfph::before{left:-9px;top:-6px;width:22px;height:14px;border-radius:6px}
.kfbar.big .kfseg{top:8px;bottom:8px}
#kfpop.all{max-height:70vh;overflow:auto}#kfpop .kprow{display:flex;align-items:flex-start;gap:8px;padding:6px 0;border-top:1px solid rgba(255,255,255,.06)}#kfpop .kprow .vc{flex:1;min-width:0}#kfpop .kprow .pill.x{flex:none;margin-top:2px}
/* v10.5 — lens barrel · aperture drag · lanes clickable · presets breathing room */
.lenspull{cursor:ew-resize;touch-action:none;user-select:none;padding:4px 0}.lensbarrel{width:100%;height:74px;display:block}
.lensbarrel .mount{fill:#1a1c24;stroke:#4a4e5c;stroke-width:1.5}.lensbarrel .tube{fill:#24262f;stroke:#3c3f4c;stroke-width:1}.lensbarrel .grip{fill:#15161c}.lensbarrel .front{fill:#101117;stroke:#4a4e5c}.lensbarrel .glass{fill:var(--acc);stroke:var(--acc3);stroke-width:1}.lensbarrel .glint{fill:#fff;opacity:.6}
.lensbarrel .mm{font:900 13px "Noto Sans",sans-serif;fill:#fff;text-anchor:middle}.lensbarrel .nm{font:600 9px "Noto Sans",sans-serif;fill:#9a9eb8;text-anchor:middle;letter-spacing:.08em}
.aperdrag{cursor:ns-resize;touch-action:none;user-select:none}.aperlegend{display:flex;flex-direction:column;gap:6px;font-size:10px;color:var(--ink3)}
.dofc .arow>div.aperdrag{flex:0 0 96px}.dofc svg.aper{width:96px;height:96px}
.kflbar{cursor:copy}.kflhint{font-size:10px;color:var(--ink3);margin:0 0 6px 94px}
.mod.cam .qblock.presets{margin:18px 0 22px;padding:14px 16px;background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:16px}
.mod.cam .qblock.presets>small{margin-bottom:10px}
.mod.cam .qblock.presets .movegrid.v2{gap:8px;padding:2px 0 6px}
.mod.cam .qblock.presets .mvc{min-width:84px;padding:10px 10px 8px;border-radius:12px}.mod.cam .qblock.presets .mvc b{font-size:12px}
.mod.cam .tplbar{margin:14px 0}
.mod.cam .camstagewrap>.stagebar3d{margin-top:6px}
.camstagewrap{position:relative}
.zoomrow.v{position:absolute;right:14px;top:64px;bottom:24px;width:48px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;background:rgba(10,11,20,.55);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:8px 0;backdrop-filter:blur(6px)}
.zoomrow.v small{font:800 8.5px "Noto Sans",sans-serif;letter-spacing:.14em;color:var(--ink3)}.zoomrow.v .zt,.zoomrow.v .zb{font-size:9.5px;color:var(--ink2);letter-spacing:.08em;text-transform:uppercase}
.zoomrow.v input.zoom{flex:1;width:16px;margin:6px 0;writing-mode:vertical-lr;direction:ltr;height:auto;min-height:120px;background:linear-gradient(180deg,var(--acc3),var(--acc) 40%,#2a2b3c)}
.zoomrow.v b{font-size:11px;font-family:ui-monospace,monospace;color:#fff}
.stage3d.orbit .nudge text:nth-child(4){display:none}
.zoomrow.v{bottom:auto;height:min(440px,58vh)}
.lensbarrel{height:104px}
/* v10.6 */
.sendtl,.lcardv2 .sendtl,.mvcard .sendtl,#promptdock{display:none!important}
.mvcard,.lcardv2{cursor:default}.mvcard i.grip,.mvcard>i{display:none}
.tlph{position:absolute;top:10px;bottom:10px;width:3px;margin-left:-1px;background:#fff;box-shadow:0 0 10px #fff;z-index:5;pointer-events:none;border-radius:2px}.tlph::before{content:"";position:absolute;left:-8px;top:-2px;width:19px;height:12px;background:#fff;border-radius:5px}
.tlph b{position:absolute;top:-2px;left:14px;font:800 10px ui-monospace,monospace;color:#fff;background:rgba(0,0,0,.6);padding:1px 5px;border-radius:5px;white-space:nowrap}
.tlframes,.tlruler{cursor:ew-resize;touch-action:none}
.tlane.alane{height:44px;cursor:copy;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);opacity:.95}
.adot{position:absolute;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--g);border:3px solid var(--bg);box-shadow:0 0 0 2px var(--g);cursor:grab}.adot.on{border-color:#fff}
.adot b{position:absolute;left:26px;top:-3px;font:700 10px "Noto Sans",sans-serif;color:#fff;white-space:nowrap;text-shadow:0 1px 2px #000}.adot span{position:absolute;left:26px;top:10px;font:600 9px "Noto Sans",sans-serif;color:rgba(255,255,255,.8);white-space:nowrap;text-shadow:0 1px 2px #000}
.step[data-k="details"].tuck{display:none}.hoodlink{margin:6px auto 0;display:block;opacity:.7}
.bb-read{display:none}
.tlane.alane{background:none!important;overflow:hidden}.tlane.alane::before{content:"";position:absolute;inset:0;background:var(--rb);opacity:.85;border-radius:inherit}
/* v10.7 */
html,body{overflow-x:clip}
.mod.cam .camtop{display:none!important}
.lcardv2{display:none!important}
.mod.light .matchbig{margin-top:4px}
.step[data-k="shape"] .sub[data-k="sub:score"]{top:62px}
/* production strip: lean — title, counters, Collect / Render all */
.pflow .cmdhead{padding:14px 22px;min-height:0}.pflow .cmdhead h1,.pflow .cmdhead .ht{font-size:28px}
/* v10.8 — fill popup · notes track */
.fillpop{min-width:min(760px,92vw)}.fillpop .fp-h{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}.fillpop .fp-h b{font-family:var(--disp);font-weight:900;font-size:18px}
.fillpop .frames{display:flex;gap:12px;margin:6px 0 12px}.fillpop .fr{flex:1;min-width:0}.fillpop .fr canvas{width:100%;height:auto;aspect-ratio:16/9;display:block;border-radius:10px;background:#000}.fillpop .fr small{display:block;font-size:9.5px;letter-spacing:.08em;margin-top:4px;color:var(--ink3)}
.fillpop .fillprompt .lab{display:block;margin-bottom:6px}.fillpop .composer{padding:0;margin:0;box-shadow:none;background:transparent}.fillpop .cmpbox textarea{min-height:96px}
.fillpop .fp-f{display:flex;align-items:center;gap:8px;margin-top:12px}
.edside .notes{display:none}
.track.notes{position:relative;height:30px;margin:0 0 6px;border-radius:8px;background:repeating-linear-gradient(90deg,rgba(255,213,106,.06) 0 28px,rgba(255,213,106,.1) 28px 29px);box-shadow:inset 0 0 0 1px rgba(255,213,106,.25);cursor:text;touch-action:none}
.nspan{position:absolute;top:3px;height:24px;border-radius:6px;background:linear-gradient(180deg,var(--warn),#f2b05c);color:#221a08;font:700 11px "Noto Sans",sans-serif;display:flex;align-items:center;padding:0 10px;box-shadow:0 3px 8px rgba(0,0,0,.4);cursor:pointer;overflow:hidden;white-space:nowrap}
.nspan.ghost{background:rgba(255,214,106,.35);border:1px dashed var(--warn);pointer-events:none}.nspan.done{opacity:.5;text-decoration:line-through}
.nspan .ne{position:absolute;top:0;bottom:0;width:7px;cursor:ew-resize}.nspan .ne.l{left:0}.nspan .ne.r{right:0}.nspan span{pointer-events:none}
.nspan .nedit{background:transparent;border:none;outline:none;font:700 11px "Noto Sans",sans-serif;color:#221a08;width:100%;box-shadow:none;padding:0;height:auto}
.thead.notes{height:30px;margin-bottom:0;background:rgba(255,213,106,.08);box-shadow:inset 0 0 0 1px rgba(255,213,106,.25);flex-direction:row;align-items:center;gap:6px}.thead.notes b{font-size:10px;color:var(--warn)}.thead.notes .crumb{font-size:9px}
/* v10.8 — scene editor trimmer repaired (the global thick-slider skin broke the dual range) */
.rng{height:48px;margin-top:10px}.rng-track{top:21px;height:6px;background:#1c1d2a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}.rng-sel{top:18px;height:12px;background:linear-gradient(90deg,var(--ok),var(--acc) 50%,var(--acc3));box-shadow:0 0 12px color-mix(in srgb,var(--acc) 45%,transparent)}
.rng input[type=range]{top:8px;height:32px;background:transparent!important;box-shadow:none!important;border-radius:0;margin:0}
.rng input[type=range]::-webkit-slider-runnable-track{background:transparent;height:32px}
.rng input[type=range]::-webkit-slider-thumb{pointer-events:auto;width:26px;height:26px;margin-top:3px;border-radius:50%;background:#fff;border:4px solid var(--acc);box-shadow:0 4px 12px rgba(0,0,0,.6);cursor:ew-resize;-webkit-appearance:none}
.rng input[type=range]::-moz-range-thumb{pointer-events:auto;width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid var(--acc);cursor:ew-resize}
.rng #se0::-webkit-slider-thumb{border-color:var(--ok)}.rng #se1::-webkit-slider-thumb{border-color:var(--acc3)}.rng #se0::-moz-range-thumb{border-color:var(--ok)}.rng #se1::-moz-range-thumb{border-color:var(--acc3)}
.strip{position:relative;border-radius:10px;min-height:72px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}.strip .shade{position:absolute;top:0;bottom:0;background:rgba(5,6,12,.72);pointer-events:none;z-index:2}.strip .shade.a{left:0;border-right:2px solid var(--ok)}.strip .shade.b{right:0;border-left:2px solid var(--acc3)}
.strip .inlab,.strip .outlab{position:absolute;top:4px;z-index:3;font:800 9.5px ui-monospace,monospace;padding:2px 6px;border-radius:6px;background:rgba(0,0,0,.7);color:#fff;pointer-events:none}.strip .inlab{color:var(--ok);margin-left:4px}.strip .outlab{color:var(--acc3);margin-right:4px}
.modal .ico{padding:8px 14px;border-radius:999px}
/* v10.8 — compact pinned timeline */
.top{transition:transform .25s ease}body.hidetop .top{transform:translateY(-100%)}
body.hidetop .step[data-k="shape"] .sub[data-k="sub:score"]{top:0}
.sub[data-k="sub:score"].stuck .subhead{display:none}
.sub[data-k="sub:score"].stuck .tlph b{font-size:9px}
.sub[data-k="sub:score"].stuck .subbody{padding-bottom:6px}
.sub[data-k="sub:score"].stuck .tlph b{display:none}

/* v10.9 — timeline keeps its size when pinned; the camera stage gives up its empty space instead */
.stage3d.orbit{aspect-ratio:16/9!important;max-height:400px!important}
.stage3d.orbit .nudge{display:none}
.zoomrow.v{top:48px;height:min(300px,70%)}
.mod.cam .camrig.v5{gap:14px}
.kflhint{margin-bottom:3px}
.mod.cam .qblock.presets{margin:10px 0 14px;padding:10px 14px}
.mod.cam .tplbar{margin:8px 0}
/* v11.0 — timeline quick panel */
#kfpop.tl{max-height:72vh;overflow:auto;z-index:340}#kfpop.tl .kprow{border-top:none;padding:4px 0}
.chip.emo{background:var(--c);color:var(--bg);border-color:transparent;font-weight:700}
.tlane.cam,.tlane.light{cursor:pointer}.tblk{cursor:pointer}
/* v11.0 — stage bar inside the sphere box, no dark strip */
.mod.cam .stagebar3d.v2{position:absolute;top:10px;left:12px;z-index:4;display:flex;gap:6px;align-items:center;background:transparent;padding:0;margin:0;height:auto}
.mod.cam .stagebar3d.v2 .lab{display:none}.mod.cam .stagebar3d.v2 .pill{background:rgba(10,11,20,.6);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12)}
.mod.cam .camstagewrap{padding-top:0;background:transparent}.mod.cam .camrig.v5{margin-top:0}
.stage3d.orbit text.lab.c{display:none}
.mod.cam .qblock.presets .mvc{cursor:grab}.mod.cam .qblock.presets .mvc.dragging{opacity:.5}
body.beatdrag-cam .tlane.cam{box-shadow:inset 0 0 0 2px var(--ok),0 0 18px rgba(95,211,154,.4)}
.mod.cam .prerow{display:flex;gap:12px;align-items:stretch}.mod.cam .prerow .movegrid.v2{flex:1;min-width:0}
.mod.cam .tplbar.inpresets{margin:0;flex:0 0 auto;max-width:320px;flex-direction:column;align-items:stretch;justify-content:center;border-style:solid;border-color:rgba(255,255,255,.08);padding:8px 10px}
.mod.cam .tplbar.inpresets>small{margin:0 0 4px}.mod.cam .tplbar.inpresets .pill.sm{margin:4px 0 0}.mod.cam .tplbar.inpresets .tpl{display:inline-block}
.tlrow>small[title^="@"]{font-size:9px;letter-spacing:.06em;text-transform:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* v11.1 — "Leave as-is" is a real button */
.keepsw{display:inline-flex!important;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;font:800 13px "Noto Sans",sans-serif;letter-spacing:.02em;background:var(--card);border:2px solid var(--ok);color:#fff;cursor:pointer;margin-left:auto;box-shadow:0 6px 18px -8px rgba(95,211,154,.6);transition:.15s}
.keepsw::after{content:"— keep this performance exactly as rendered";font-weight:500;font-size:11px;opacity:.7}
.keepsw i{width:22px;height:22px;border-radius:50%;border:2px solid var(--ok);display:inline-block;position:relative;flex:none}
.keepsw.on{background:linear-gradient(135deg,#3fae7a,var(--ok));color:#07130d;border-color:transparent}.keepsw.on i{background:#fff;border-color:#fff}.keepsw.on i::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;font-size:13px;color:#1f7a3c;font-weight:900}
.keepsw.on::after{opacity:.85;content:"— locked: this character will not be re-directed"}
.eisay{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#kfpop .lpad.mini{height:150px;border-radius:12px;position:relative;overflow:hidden;cursor:crosshair;touch-action:none}
#kfpop .lpad.mini .wxbands{position:absolute;inset:0;display:flex;flex-direction:column}#kfpop .lpad.mini .wxband{flex:1;display:flex;align-items:center;padding-left:8px;font-size:9px;opacity:.85}#kfpop .lpad.mini .wxband b{font-weight:700;text-shadow:0 1px 2px #000}#kfpop .lpad.mini .wxband.on{outline:1px solid #fff;outline-offset:-1px}
#kfpop .lpad.mini .lpx{position:absolute;left:0;right:0;bottom:2px;display:flex;justify-content:space-between;padding:0 4px;font:700 8px ui-monospace,monospace;color:#fff;opacity:.8;pointer-events:none}
#kfpop .lpad.mini .ldot{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#fff;border:3px solid #111;box-shadow:0 0 0 2px #fff;pointer-events:none}
#kfpop .lpad.mini .lpx{top:auto!important;bottom:2px!important;background:none!important}
#kfpop .eiwheel.mini{display:flex;justify-content:center;padding:6px 0}
#kfpop .fluid.mini{position:relative;width:220px;height:220px;border-radius:50%;cursor:crosshair;touch-action:none;box-shadow:0 10px 30px rgba(0,0,0,.6),inset 0 0 40px rgba(0,0,0,.35)}
#kfpop .fluid.mini .ftint{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.25),rgba(0,0,0,0) 55%,rgba(0,0,0,.35) 100%);pointer-events:none}
#kfpop .fluid.mini .flab{position:absolute;transform:translate(-50%,-50%);font:800 8.5px "Noto Sans",sans-serif;letter-spacing:.08em;color:var(--bg);opacity:.8;pointer-events:none;text-transform:uppercase}
#kfpop .fluid.mini .fdot{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:#fff;border:3px solid var(--bg);box-shadow:0 0 0 3px var(--g),0 0 14px var(--g);pointer-events:none}
/* v11.3 — camera beside the player */
.stage.s3{grid-template-columns:minmax(240px,.75fr) minmax(420px,1.5fr) minmax(460px,1.25fr)}
.stageR.camR{max-height:none;overflow:visible}
.stageR.camR .mod.cam{background:var(--bg);border-radius:16px;box-shadow:var(--neu-in);padding:12px 14px;border:none}
.stageR.camR .mod.cam .modt{font-size:12px}
.stageR.camR .mod.cam .qblock.presets{margin:8px 0 10px;padding:8px 10px}.stageR.camR .prerow{flex-direction:column;gap:8px}.stageR.camR .tplbar.inpresets{max-width:none;flex-direction:row;align-items:center;padding:6px 10px}.stageR.camR .tplbar.inpresets>small{margin:0 6px 0 0}.stageR.camR .tplbar.inpresets .pill.sm{margin:0 0 0 auto}
.stageR.camR .camrig.v5{display:flex;flex-direction:column;gap:10px}.stageR.camR .camrig.v5 .camside{order:-1}
.stageR.camR .vctrls{display:grid;grid-template-columns:1fr 1fr;gap:8px}.stageR.camR .vc{padding:8px 10px}
.stageR.camR .lensbarrel{height:70px}.stageR.camR .dofc svg.aper,.stageR.camR svg.level{width:64px;height:64px}.stageR.camR .dofc .arow>div.aperdrag,.stageR.camR .arow>div{flex:0 0 64px}
.stageR.camR .stage3d.orbit{max-height:320px!important}
.stageR.camR .kflanes.v2 .kflane{grid-template-columns:70px 1fr}.stageR.camR .kflhint{margin-left:78px}
.stageR.camR .kftl[data-v] .play{width:36px;height:36px}.stageR.camR .kfbar.big{height:44px}
#kfpop.full{max-height:80vh;overflow:auto}#kfpop.full .mod{background:transparent;box-shadow:none;padding:0;border:none}#kfpop.full .gstrip{display:none}
@media(max-width:1200px){.stage.s3{grid-template-columns:1fr}}
.stageR.camR .gstrip{display:none}.stageR.camR .zoomrow.v{top:44px;height:236px}
.stageR.camR .stage3d.orbit .readout{display:none}
/* v11.4 — one screen */
.stage.s3.s4{display:grid;grid-template-columns:minmax(520px,1.1fr) minmax(520px,1fr);gap:16px;align-items:start}
.stage.s4 .stageC{display:flex;flex-direction:column;gap:10px;min-width:0}
.stage.s4 .stageC .stageplayer{max-height:46vh}.stage.s4 .stageC .stageplayer video{max-height:46vh;width:100%;object-fit:contain;background:#000}
.stage.s4 .stageC .score{margin:0}.stage.s4 .score .bb-head .crumb{display:none}.stage.s4 .tlx{padding:10px 12px}
.stage.s4 .tlframes{height:44px}.stage.s4 .tlane{height:46px}.stage.s4 .tlane.alane{height:34px}
.modpanel{background:var(--bg);border-radius:18px;box-shadow:var(--neu-in);padding:10px 12px 12px;min-width:0}
.mtabs{display:flex;gap:6px;margin-bottom:10px}.mtab{flex:1;padding:10px 0;border-radius:12px;background:var(--card);border:1px solid rgba(255,255,255,.07);color:var(--ink2);font:900 12px var(--disp);letter-spacing:.1em;cursor:pointer;transition:.2s}.mtab.on{background:linear-gradient(135deg,var(--acc),var(--acc3));color:#fff;border-color:transparent;box-shadow:0 10px 24px -12px color-mix(in srgb,var(--acc) 80%,transparent)}
.modstage{position:relative;perspective:1600px;max-height:calc(100vh - 150px);overflow:auto;overflow-x:hidden;transform-style:preserve-3d}
.modstage .face{display:none;transform-origin:50% 50%;backface-visibility:hidden;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .3s}
.modstage .face.on{display:block;animation:faceIn .5s cubic-bezier(.2,.7,.2,1)}
.modstage .face.out{display:block;animation:faceOut .26s ease-in forwards}
@keyframes faceIn{from{transform:rotateY(-80deg) translateX(60px);opacity:0}to{transform:none;opacity:1}}
@keyframes faceOut{from{transform:none;opacity:1}to{transform:rotateY(70deg) translateX(-60px);opacity:0}}
.modstage .mod{background:transparent;box-shadow:none;border:none;padding:4px 2px}.modstage .gstrip{display:none}.modstage .mod .modt{font-size:12px}
.modstage .mod.cam .qblock.presets{margin:6px 0 10px;padding:8px 10px}.modstage .prerow{flex-direction:column;gap:8px}.modstage .tplbar.inpresets{max-width:none;flex-direction:row;align-items:center;padding:6px 10px}.modstage .tplbar.inpresets>small{margin:0 6px 0 0}.modstage .tplbar.inpresets .pill.sm{margin:0 0 0 auto}
.modstage .camrig.v5{display:flex;flex-direction:column;gap:10px}.modstage .camrig.v5 .camside{order:-1}.modstage .vctrls{display:grid;grid-template-columns:1fr 1fr;gap:8px}.modstage .vc{padding:8px 10px}
.modstage .lensbarrel{height:66px}.modstage svg.aper,.modstage svg.level{width:64px;height:64px}.modstage .dofc .arow>div.aperdrag,.modstage .arow>div{flex:0 0 64px}
.modstage .stage3d.orbit{max-height:300px!important}.modstage .zoomrow.v{top:44px;height:220px}.modstage .stage3d.orbit .readout{display:none}
.modstage .kflanes.v2 .kflane{grid-template-columns:70px 1fr}.modstage .kflhint{margin-left:78px}.modstage .kftl[data-v] .play{width:36px;height:36px}.modstage .kfbar.big{height:44px}
.step[data-k="shape"].empty{display:none}
.step[data-k="shape"] .sub[data-k="sub:score"]{position:static}
@media(max-width:1150px){.stage.s3.s4{grid-template-columns:1fr}.modstage{max-height:none}}
.stage.s4 .score .gstrip{display:none}.stage.s4 .stageC .stage-empty{min-height:220px}.stage.s4 .stageC .stageplayer{width:100%}
.stage.s4 .score .bb-head{flex-wrap:wrap;gap:8px}
/* v11.5 — one tool row, small template chip, bigger sphere */
.modstage .vctrls{grid-template-columns:repeat(4,1fr);gap:6px}
.modstage .vc{padding:6px 8px}.modstage .vc>small{margin-bottom:4px;font-size:8.5px}.modstage .vc>small em{font-size:9.5px}
.modstage .lensc{order:1}.modstage .dofc{order:2}.modstage .stabc{order:3}.modstage .tiltc{order:4}
.modstage .lensbarrel{height:56px}.modstage svg.aper,.modstage svg.level{width:52px;height:52px}.modstage .dofc .arow>div.aperdrag,.modstage .arow>div{flex:0 0 52px}
.modstage .aperlegend{display:none}.modstage .arow{gap:6px}.modstage .srow span{font-size:12px}
.modstage .stabc .srow{margin-top:14px}
.modstage .prerow{flex-direction:row;align-items:center;gap:8px}
.modstage .tplbar.inpresets{flex:0 0 auto;max-width:220px;padding:4px 8px;border:1px dashed rgba(255,255,255,.14);border-radius:10px;background:transparent;flex-direction:row;align-items:center;gap:4px}
.modstage .tplbar.inpresets>small{display:none}.modstage .tplbar.inpresets .pill.sm{margin:0;font-size:10px;padding:4px 9px;white-space:nowrap}
.modstage .tplbar.inpresets .tpl{font-size:10px}
.modstage .stage3d.orbit{max-height:390px!important}.modstage .zoomrow.v{height:280px}
.promptoverlay{position:absolute;inset:8%;z-index:8;background:rgba(8,9,16,.9);backdrop-filter:blur(10px);border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);border-radius:18px;padding:16px 18px;overflow:auto;box-shadow:0 30px 60px -20px rgba(0,0,0,.9)}
.stage.s4 .stageC .stageplayer{position:relative;min-height:260px}
.promptoverlay .po-h{display:flex;align-items:center;margin-bottom:8px}.promptoverlay .po-h b{font-family:var(--disp);font-weight:900;font-size:15px;letter-spacing:.02em}.promptoverlay .po-h i{margin-left:auto;font-style:normal;cursor:pointer;opacity:.6;font-size:14px}.promptoverlay .po-h i:hover{opacity:1}
.promptoverlay .composer{background:transparent;box-shadow:none;padding:0;margin:0}
.promptoverlay .cmpbox textarea{min-height:90px}
.step[data-k="compose"].tuck{display:none}
.nspan .nedit{background:#fff9e8!important;color:var(--card)!important;box-shadow:none!important;border-radius:4px;padding:0 6px!important}
.nspan{color:#221a08}
/* v11.5c — camera module centred; sphere bigger; lanes + scrubber same width, bottom-aligned */
.modstage .mod.cam{max-width:780px;margin:0 auto}
.modstage .mod.cam .camstagewrap{display:flex;flex-direction:column}
.modstage .stage3d.orbit{max-height:440px!important;width:100%}
.modstage .zoomrow.v{top:48px;height:300px;bottom:auto}
.modstage .kflanes.v2{margin-top:auto;width:100%}
.modstage .kflanes.v2 .kflane{grid-template-columns:86px 1fr}
.modstage .kflhint{margin-left:94px}
.modstage .kftl[data-v]{width:100%}
.modstage .mod.light,.modstage .mod.emo,.modstage .mod.timing{max-width:900px;margin:0 auto}
/* v11.6 — camera module fills & centres; light map below its console; actor fits with the face; time unsqueezed */
.modstage .camrig.v5{align-items:stretch}
.modstage .mod.cam.v5{display:block}
.modstage .camstagewrap{width:100%}
/* LIGHT: console (exterior/quick/templates/match) on top, gradient map below */
.modstage .mod.light .lgrid{display:flex;flex-direction:column-reverse;gap:14px}
.modstage .mod.light .lpad.v3{height:300px}
/* ACTOR: fits without scrolling, face stays in the wheel */
.modstage .eigrid.v4{display:grid;grid-template-columns:300px 1fr;gap:16px;margin-top:8px}
.modstage .eiwheel.v4 .fluid{width:280px;height:280px}
.modstage .eistate{font-size:18px;margin-top:6px}
.modstage .padgrid{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.modstage .xypad{aspect-ratio:1/0.9}
.modstage .eictl.v4 .eirange.big{height:24px}
.modstage .mod.emo .fface{display:block}
/* TIME: room to breathe (undo the old stageR squeeze that still matched) */
.stageR.modpanel .mod.timing{max-height:none;overflow:visible;padding:14px 16px;display:block}
.stageR.modpanel .mod.timing .tgrid{display:grid;grid-template-columns:1fr;gap:14px}
.stageR.modpanel .mod.timing .tpre{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-bottom:10px}
.stageR.modpanel .mod.timing .tp{padding:9px 11px;border-radius:12px}.stageR.modpanel .mod.timing .tp b{font-size:12.5px;display:block}.stageR.modpanel .mod.timing .tp span{display:block;font-size:10.5px}
.stageR.modpanel .mod.timing .eq svg{height:120px;border-radius:10px}
.stageR.modpanel .mod.timing .eqh .crumb{display:inline}
.stageR.modpanel .mod.timing .qgrid.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 18px;margin-top:10px}
.stageR.modpanel .mod.timing .qopts.tight{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.stageR.modpanel .mod.timing .qopt{padding:10px 12px;border-radius:12px;flex-direction:column;gap:2px}.stageR.modpanel .mod.timing .qopt b{font-size:12.5px}.stageR.modpanel .mod.timing .qopt span{display:block;font-size:10.5px;opacity:.8}
.stageR.modpanel .mod.timing .modt .beat{display:inline}
.modstage .fface{width:40%}
.modstage .face.q .feat path,.modstage .face.q .feat ellipse{stroke:rgba(12,13,20,.75)!important}
.modstage .face.q .feat ellipse[rx="4.5"]{fill:rgba(12,13,20,.75)!important;stroke:none!important}
/* v11.7 */
.modstage .face{animation:none!important}.modstage .face.out{display:none!important}
.modstage.turning{}
/* LIGHT: the map is the hero */
.modstage .mod.light .lpad.v3{height:min(52vh,560px)}
.modstage .mod.light .wxband b{font-size:12px}
.modstage .mod.light .lpx span{font-size:12px}
/* ACTOR: pads row on top, wheel + sliders below */
.modstage .eigrid.v5{display:grid;grid-template-columns:minmax(340px,440px) 1fr;gap:20px;margin-top:10px;align-items:start}
.modstage .eigrid.v5 .padgrid{grid-column:1/-1;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:0}
.modstage .eigrid.v5 .xypad{aspect-ratio:1/0.72;border-radius:16px}
.modstage .eigrid.v5 .xypad .pl{font-size:11px}.modstage .eigrid.v5 .xypad .ax{font-size:10px}
.modstage .eigrid.v5 .xypad .pread{font-size:14px;padding:8px 14px}
.modstage .eiwheel.v4 .fluid{width:min(420px,100%);height:auto;aspect-ratio:1}
.modstage .eistate{font-size:22px}
.modstage .eictl.v4 .eirange.big{height:28px}
/* TIME: use the room */
.stageR.modpanel .mod.timing .eq svg{height:180px}
.stageR.modpanel .mod.timing .tgrid{gap:20px}
.stageR.modpanel .mod.timing .tblock .lab{font-size:11px;margin-bottom:10px}
.stageR.modpanel .mod.timing .qgrid.three{margin-top:18px}
.stageR.modpanel .mod.timing .tp{padding:12px 14px}.stageR.modpanel .mod.timing .qopt{padding:12px 14px}
.modstage .mod.light .lpad.v3{aspect-ratio:auto;width:100%;height:min(52vh,540px)}
.modstage .mod.light .lgrid{align-items:stretch}
.modstage .mod.light .lpadwrap{width:100%}
/* v11.8 */
.stage.s4 .score .bb-head .modt{display:none}
.stage.s4 .score .bb-head{padding:2px 0 6px}
.tlrow>small.lt{cursor:pointer;text-decoration:underline dotted rgba(255,255,255,.25);text-underline-offset:3px}.tlrow>small.lt:hover{color:var(--acc3)}
.modreset{float:right;margin:0 0 6px 10px;opacity:.75}.modreset:hover{opacity:1}
.stage.s4 .stageC .stageplayer video::-webkit-media-controls{display:none!important}
/* v11.8 — production header = one slim strip */
.pflow .cmdhead{display:flex!important;grid-template-columns:none;align-items:center;gap:18px;padding:8px 18px!important;min-height:0;margin:0 0 8px;border:1px solid rgba(255,255,255,.06);border-radius:14px;background:var(--card)}
.pflow .cmdhead h1,.pflow .cmdhead .ht{font-size:17px!important;line-height:1;letter-spacing:0;margin:0;text-transform:none}
.pflow .cmdhead .ch-l>.crumb,.pflow .cmdhead .crumb{font-size:10px}
.pflow .cmdhead .stat{font-size:16px}.pflow .cmdhead .stat+small,.pflow .cmdhead small{font-size:7.5px}
.pflow .cmdhead .ch-m{display:flex;gap:14px;margin-left:auto;align-items:center}
.pflow .cmdhead .vb,.pflow .cmdhead .pill{padding:6px 12px;font-size:11px}
.pflow .missbar{margin:0 0 8px;padding:6px 14px;font-size:11px;border-radius:10px}
.pflow .forecast{margin:0 0 10px;padding:4px 14px;font-size:11px;opacity:.8}
.pflow .forecast .stat{font-size:13px}
.pflow .keysbar{margin:0 0 8px;font-size:11px}
/* v11.9 */
.padunit{display:flex;flex-direction:column;min-width:0}
.padhead{display:flex;flex-direction:column;align-items:center;gap:5px;margin-bottom:8px}
.padhead b{font:800 11px "Noto Sans",sans-serif;letter-spacing:.14em;color:var(--ink2)}
.padhead .pread{font-size:12.5px;color:#fff;background:var(--card);border:1px solid rgba(255,255,255,.12);padding:4px 12px;border-radius:999px;white-space:nowrap}
.xypad.v3{position:relative;aspect-ratio:1/0.8;border-radius:16px;cursor:crosshair;touch-action:none;user-select:none;overflow:hidden;box-shadow:var(--neu-in),inset 0 0 0 1px rgba(255,255,255,.08)}
.xypad.v3 .ax{position:absolute;font:700 9.5px "Noto Sans",sans-serif;letter-spacing:.1em;color:rgba(255,255,255,.8);text-transform:uppercase;text-shadow:0 1px 2px #000;pointer-events:none}
.xypad.v3 .ax.l{left:8px;top:50%;transform:translateY(-50%)}.xypad.v3 .ax.r{right:8px;top:50%;transform:translateY(-50%)}
.xypad.v3 .ax.t{top:6px;left:50%;transform:translateX(-50%)}.xypad.v3 .ax.b{bottom:6px;left:50%;transform:translateX(-50%)}
.xypad.v3 .pdot{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:#fff;border:3px solid rgba(0,0,0,.55);box-shadow:0 0 0 3px rgba(255,255,255,.35),0 6px 14px rgba(0,0,0,.5);pointer-events:none}
.xypad.v3 .pgrid{position:absolute;inset:0;background:linear-gradient(135deg,rgba(120,90,200,.55),rgba(40,60,120,.55));background-image:repeating-linear-gradient(90deg,transparent 0 calc(100%/var(--nx) - 1px),rgba(255,255,255,.14) calc(100%/var(--nx) - 1px) calc(100%/var(--nx))),repeating-linear-gradient(0deg,transparent 0 calc(100%/var(--ny) - 1px),rgba(255,255,255,.14) calc(100%/var(--ny) - 1px) calc(100%/var(--ny)))}
.xypad.v3[data-id="act"]{background:linear-gradient(135deg,#7b4bd8 0%,#5a3fb0 50%,#c04f5f 100%)}
.xypad.v3[data-id="tb"]{background:linear-gradient(135deg,#5a51c8 0%,#7a4fb8 55%,#a05ab0 100%)}
.xypad.v3[data-id="gaze"]{background:linear-gradient(135deg,#5d6b57 0%,#4c6a8a 55%,#4d7ba8 100%)}
.acttop{display:flex;align-items:center;gap:24px;background:var(--card);border-radius:16px;padding:12px 16px;margin:8px 0 4px}
.acttop .actsliders{flex:1;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;align-items:center}
.acttop .actsliders small.lab{grid-row:1}.acttop .actsliders input{grid-row:2;width:100%}.acttop .actsliders .eirl{grid-row:3;display:flex;justify-content:space-between;font-size:10px;color:var(--ink3)}
.acttop .keepsw{flex:0 0 auto;margin:0}
.modstage .eigrid.v5 .xypad.v3{aspect-ratio:1/0.85;min-height:180px}
.stageR.modpanel .mod.timing .tpre.engy{grid-template-columns:repeat(4,1fr)}
#ctxm{position:absolute;z-index:360;background:var(--card);border:1px solid color-mix(in srgb,var(--acc) 50%,transparent);border-radius:14px;padding:10px 12px;box-shadow:0 24px 50px -16px rgba(0,0,0,.9);max-width:340px}
#ctxm small{display:block;font:800 8.5px "Noto Sans",sans-serif;letter-spacing:.14em;color:var(--ink3);margin:4px 0 6px}
#ctxm .cx-h b{font-family:var(--disp);font-weight:900;font-size:12px;letter-spacing:.04em}
#ctxm .cx-a{display:flex;gap:6px;margin-top:10px}#ctxm .pill.x{border-color:rgba(255,90,90,.5)}
/* v12.0 — light map polish */
.lphases{position:absolute;inset:0;pointer-events:none;z-index:2}
.lphases i{position:absolute;top:0;bottom:0;border-left:1px solid rgba(255,255,255,.09)}
.lphases i:first-child{border-left:none}
.lphases i em{position:absolute;top:24px;left:50%;transform:translateX(-50%);font:700 9px "Noto Sans",sans-serif;font-style:normal;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55);text-shadow:0 1px 3px rgba(0,0,0,.8);white-space:nowrap}
.modstage .lpad.v3 .wxband{outline:none!important;position:relative}
.modstage .lpad.v3 .wxband::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,7,12,.22),transparent 35%,transparent 65%,rgba(6,7,12,.22));pointer-events:none}
.modstage .lpad.v3 .wxband.on{outline:none!important}
.modstage .lpad.v3 .wxband.on b{background:rgba(255,255,255,.92);color:#111;border-radius:999px}
.modstage .lpad.v3 .wxband b{padding:3px 10px;border-radius:999px;background:rgba(6,7,12,.55)}
/* v12.0 — resize / move handles that read as such */
.tblk .bedge{width:16px;display:flex;align-items:center;justify-content:center;background:rgba(6,7,12,.45)}
.tblk .bedge::after{content:"↔";font-size:11px;color:rgba(255,255,255,.85);text-shadow:0 1px 2px #000}
.tblk .bedge:hover{background:rgba(255,255,255,.22)}
.tblk{cursor:grab}.tblk:active{cursor:grabbing}
.tblk>i:not(.bedge){display:none}
.tblk::before{content:"✥";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:13px;color:rgba(255,255,255,.5);text-shadow:0 1px 2px #000;pointer-events:none}
.tblk.cam::before{color:rgba(255,255,255,.45)}
.adot{cursor:grab}
/* phase labels: only in the first band row, clear of the hour numbers */
.lphases i em{top:38px}
.stage.s3.s4{grid-template-rows:auto 1fr}
.stage.s4 .promptrow{grid-column:1/-1;grid-row:1;min-width:0}
.stage.s4 .stageC{grid-row:2}.stage.s4 .stageR{grid-row:2}
.stage.s4 .promptrow .stageL{display:flex;flex-direction:row;align-items:stretch;gap:14px;background:var(--bg);border-radius:14px;box-shadow:var(--neu-in);padding:10px 14px}
.stage.s4 .promptrow .lp-head{flex:0 0 110px;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px}
.stage.s4 .promptrow .liveprompt{flex:1;min-height:96px;max-height:none;font-size:11.5px!important;line-height:1.45}
.stage.s4 .promptrow .lp-note{display:none}
.stage.s4 .promptrow .cmpslot{background:var(--bg);border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);border-radius:14px;padding:12px 16px}
.stage.s4 .promptrow .cmpslot .po-h{display:flex;align-items:center;margin-bottom:6px}.stage.s4 .promptrow .cmpslot .po-h b{font-family:var(--disp);font-weight:900;font-size:14px}.stage.s4 .promptrow .cmpslot .po-h i{margin-left:auto;font-style:normal;cursor:pointer;opacity:.6}
.stage.s4 .promptrow .composer{background:transparent;box-shadow:none;padding:0;margin:0}
.elbtn{position:absolute;right:10px;margin-top:-40px;opacity:.8;z-index:3}
.elmenu{display:none;position:absolute;left:0;right:0;z-index:5;background:var(--card);border:1px solid color-mix(in srgb,var(--acc) 50%,transparent);border-radius:12px;padding:8px;box-shadow:0 20px 44px -14px rgba(0,0,0,.9);max-height:220px;overflow:auto}
.elmenu.on{display:flex;flex-wrap:wrap;gap:5px}
.elmenu .chip i{font-style:normal;font-size:8.5px;opacity:.6;margin-left:5px}
/* v12.1 — top tabs styled like the module selectors; phase names as pills */
.tabs{gap:8px;border-bottom:none}
.top .tabs button,.tabs .tab{min-width:0;width:auto;flex:1;max-width:220px;padding:12px 0;border-radius:12px;background:var(--card);border:1px solid rgba(255,255,255,.07);color:var(--ink2);font:900 12px var(--disp);letter-spacing:.1em;text-transform:uppercase;text-align:center;transition:.2s}
.top .tabs button:hover{color:#fff;border-color:color-mix(in srgb,var(--acc) 40%,transparent)}
.tabs .on,.tabs button.on,.tabs .tab.on{background:linear-gradient(135deg,var(--acc),var(--acc3))!important;color:#fff!important;border-color:transparent!important;box-shadow:0 10px 24px -12px color-mix(in srgb,var(--acc) 80%,transparent)}
.lphases i em{top:34px;background:rgba(6,7,12,.65);padding:3px 10px;border-radius:999px;letter-spacing:.14em;color:rgba(255,255,255,.85);backdrop-filter:blur(4px)}
.lpdiff{flex:1;min-height:96px;max-height:150px;overflow:auto;white-space:pre-wrap;font:500 11.5px ui-monospace,Menlo,monospace;line-height:1.45;color:var(--ink2);background:var(--card);border-radius:10px;padding:10px 12px;cursor:text;box-shadow:var(--neu-in)}
.lpdiff mark{background:linear-gradient(90deg,rgba(95,211,154,.28),color-mix(in srgb,var(--acc) 22%,transparent));color:#fff;border-radius:4px;padding:0 2px;box-shadow:inset 0 0 0 1px rgba(95,211,154,.35)}
.lpdiff{resize:vertical;min-height:70px;max-height:none}
.stage.s4 .promptrow .liveprompt{resize:vertical}
/* v12.4 */
#lpcount.over{color:#ff6a6a;font-weight:800}
.tabs{width:min(920px,64vw);gap:8px;padding:4px;border-radius:16px}
.tabs .stage{flex:1;width:auto;min-width:0;border-radius:12px!important;background:var(--card);border:1px solid rgba(255,255,255,.07);padding:12px 0!important;display:flex;align-items:center;justify-content:center}
.tabs .stage .n,.tabs .stage .s{display:none}
.tabs .stage .t{font:900 12px var(--disp);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.tabs .stage:hover .t{color:#fff}
.tabs .stage.ac{background:linear-gradient(135deg,var(--acc),var(--acc3))!important;border-color:transparent;box-shadow:0 10px 24px -12px color-mix(in srgb,var(--acc) 80%,transparent),0 0 0 2px rgba(255,255,255,.15)}
.tabs .stage.ac .t{color:#fff}
@media(max-width:1200px){.tabs{width:min(860px,78vw)}}
/* v12.5 — fill popup: slim frames, the gap in the middle */
.fillpop .frames.gapv{display:grid;grid-template-columns:minmax(180px,280px) 1fr minmax(180px,280px);gap:14px;align-items:center;margin:6px 0 12px}
.fillpop .gapmid{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px}
.fillpop .gapmid>b{font:900 26px var(--disp);letter-spacing:.02em}
.fillpop .gapmid .garr{display:flex;align-items:center;gap:8px;width:100%;font-style:normal}
.fillpop .gapmid .garr u{flex:1;height:0;border-top:2px dashed color-mix(in srgb,var(--acc) 55%,transparent);text-decoration:none}
.fillpop .gapmid .garr em{font:700 10px "Noto Sans",sans-serif;font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--acc3);white-space:nowrap}
.fillpop .gapmid .mono{font-size:11px;color:var(--ink3)}
.fillpop .fr img{width:100%;border-radius:10px;display:block;aspect-ratio:16/9;object-fit:cover}
.fillpop.done .pill.go.big{font-size:14px}
/* v12.6 */
.modstage{max-height:none;overflow:visible}
*::-webkit-scrollbar{width:9px;height:9px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px;border:2px solid rgba(0,0,0,.4)}*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.25)}
.tabs{width:min(1100px,74vw)}
.tabs .stage{padding:16px 0!important}.tabs .stage .t{font-size:13px}
#thinking{position:fixed;right:22px;bottom:22px;z-index:400;display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid color-mix(in srgb,var(--acc) 50%,transparent);border-radius:999px;padding:10px 18px;box-shadow:0 18px 40px -14px rgba(0,0,0,.9);opacity:0;pointer-events:none;transform:translateY(8px);transition:.25s}
#thinking.on{opacity:1;transform:none}
#thinking i{width:14px;height:14px;border-radius:50%;border:2.5px solid color-mix(in srgb,var(--acc) 30%,transparent);border-top-color:var(--acc3);animation:spin .8s linear infinite}
#thinking b{font:700 12px "Noto Sans",sans-serif;color:var(--ink)}
@keyframes spin{to{transform:rotate(360deg)}}
.promptrow.busy .lpdiff,.promptrow.busy .liveprompt{position:relative;overflow:hidden}
.promptrow.busy .stageL{background:linear-gradient(110deg,var(--bg) 40%,color-mix(in srgb,var(--acc) 12%,transparent) 50%,var(--bg) 60%);background-size:220% 100%;animation:shimmer 1.4s linear infinite}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
.stage.s4 .promptrow{position:relative}
#thinking.inprompt{position:absolute;top:12px;left:50%;right:auto;bottom:auto;transform:translate(-50%,8px);z-index:12}
#thinking.inprompt.on{transform:translate(-50%,0)}
/* v13.0 — generating pill + spinning amber LEDs */
#genpill{position:fixed;left:22px;bottom:22px;z-index:400;display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid rgba(242,176,92,.55);border-radius:999px;padding:10px 18px;box-shadow:0 18px 40px -14px rgba(0,0,0,.9);opacity:0;pointer-events:none;transform:translateY(8px);transition:.25s}
#genpill.on{opacity:1;transform:none}
#genpill i{width:14px;height:14px;border-radius:50%;border:2.5px solid rgba(242,176,92,.3);border-top-color:#f2b05c;animation:spin .8s linear infinite}
#genpill b{font:800 12px "Noto Sans",sans-serif;color:#f2b05c}#genpill span{font:500 11px "Noto Sans",sans-serif;color:var(--ink2)}
.led.amber{position:relative;padding-left:26px}
.led.amber::before{content:"";position:absolute;left:8px;top:50%;margin-top:-6px;width:12px;height:12px;border-radius:50%;border:2px solid rgba(242,176,92,.35);border-top-color:#f2b05c;animation:spin .8s linear infinite}
.tile.submitted .st,.card.submitted .st{animation:pulseA 1.2s ease-in-out infinite alternate}
@keyframes pulseA{from{opacity:.55}to{opacity:1}}
/* v13.1 */
.edshot .esh{display:flex;align-items:baseline;gap:8px}.edshot .esh b{font-family:var(--disp);font-weight:900;font-size:16px}.edshot .esh span{font-size:11px;color:var(--ink2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.edshot .esh em{font-style:normal;font-size:10px;color:var(--ok);font-weight:800}
.edside .mtabs.mini{margin:4px 0 8px}.edside .mtabs.mini .mtab{padding:8px 0;font-size:10px}
.edside .edmods .mod{background:transparent;box-shadow:none;border:none;padding:0}
.edside .edmods .gstrip{display:none}
.edside .edmods .stage3d.orbit{max-height:240px!important}
.edside .edmods .vctrls{grid-template-columns:1fr 1fr;gap:6px}
.edside .edmods .lpad.v3{height:220px;aspect-ratio:auto;width:100%}
.edside .edmods .eigrid.v5{grid-template-columns:1fr;gap:10px}.edside .edmods .fluid{width:min(260px,100%)!important}
.edside .edmods .padgrid{grid-template-columns:1fr!important}
.edside .edmods .tpre{grid-template-columns:1fr 1fr}
.fillside .fp-h{display:flex;align-items:center}.fillside .fp-h b{font-family:var(--disp);font-weight:900;font-size:15px}.fillside .fp-h i{margin-left:auto;font-style:normal;cursor:pointer;opacity:.6}
.fillside .fr{margin-top:10px}.fillside .fr canvas{width:100%;aspect-ratio:16/9;border-radius:10px;background:#000;display:block}.fillside .fr small{display:block;font-size:9px;letter-spacing:.08em;margin-top:4px;color:var(--ink3)}
.fillside .gapmid.v{display:flex;align-items:center;gap:10px;margin:14px 0}
.fillside .gapmid.v u{flex:1;height:0;border-top:2px dashed color-mix(in srgb,var(--acc) 55%,transparent)}
.fillside .gapmid.v div{display:flex;flex-direction:column;align-items:center}.fillside .gapmid.v b{font:900 20px var(--disp)}.fillside .gapmid.v em{font:700 8.5px "Noto Sans",sans-serif;font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--acc3)}
.fillside .cmpbox textarea{min-height:80px}
.fullprod{min-width:min(1100px,94vw);max-height:82vh;overflow:auto}
.fullprod .fpbody .gstrip{display:none}
/* the popup fill (still used elsewhere): breathing room between the frames */
.fillpop .frames.gapv{gap:26px}
/* v13.2 — identical panel in Edit + popup */
.edside .modpanel{margin-top:8px;padding:8px 10px 10px}
.edside .modpanel .mtab{padding:9px 0;font-size:10.5px}
.edside .modpanel .modstage{max-height:none;overflow:visible}
.fullprod.v2{min-width:min(1000px,94vw);max-height:84vh;overflow:auto}
.fullprod.v2 .modpanel{background:transparent;box-shadow:none;padding:0;margin-top:8px}
.edside .edmods{display:none}
#edprompt{background:var(--bg);border-radius:14px;box-shadow:var(--neu-in);padding:10px 14px;margin:0 0 10px}
#edprompt .lp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
#edprompt .lpdiff2{min-height:60px;resize:vertical;overflow:auto;white-space:pre-wrap;font:500 11.5px ui-monospace,Menlo,monospace;line-height:1.45;color:var(--ink2);background:var(--card);border-radius:10px;padding:10px 12px;cursor:text;box-shadow:var(--neu-in)}
#edprompt .lpdiff2 mark{background:linear-gradient(90deg,rgba(95,211,154,.28),color-mix(in srgb,var(--acc) 22%,transparent));color:#fff;border-radius:4px;padding:0 2px;box-shadow:inset 0 0 0 1px rgba(95,211,154,.35)}
#edprompt .liveprompt2{width:100%;min-height:90px;resize:vertical;font:500 11.5px ui-monospace,Menlo,monospace;line-height:1.45}
/* v13.3 — the prompt row spans the top of the edit grid; monitor + console stay side by side */
#edprompt{grid-column:1/-1}
.edtop{grid-template-columns:minmax(0,1.35fr) minmax(420px,1fr);align-items:start}
.edside{min-width:0}

/* v13.4 — EDIT IS PRODUCTION: one screen, sequence timeline under the score, collapsible console */
body.edprod{overflow:hidden}
body.edprod #app{padding-bottom:6px}
.edhead.slim{display:flex;align-items:center;gap:8px;padding:2px 2px 6px;margin:0}
.edhead.slim h2{display:none}
.edhead.slim .seqpick{display:flex;gap:6px;overflow-x:auto;max-width:38vw;scrollbar-width:none}
.edhead.slim .edact{margin-left:auto;display:flex;gap:6px;align-items:center}
.eflow .step{display:none!important}
.eflow .guidetab,.eflow .keysbar,.eflow .forecast{display:none!important}
.edstage{position:relative}
.edstage .stageC .stageplayer{max-height:30vh;min-height:170px}
.edstage .stageC .stageplayer .monframe{height:100%;display:flex;align-items:center;justify-content:center}
.edstage .stageC .stageplayer .monframe video{width:100%;max-height:30vh;object-fit:contain;background:#000;display:block;cursor:pointer}
.edstage .monbar{display:flex;align-items:center;gap:8px;padding:2px 6px;flex-wrap:wrap}
.edstage .promptrow .liveprompt{max-height:16vh;overflow:auto}
.edstage .tlframes{height:34px}.edstage .tlane{height:38px}.edstage .tlane.alane{height:26px}
.edstage .tlwrap.edtl{margin-top:6px}
.edstage .edtl .tl{max-height:24vh;overflow:auto}
.edstage.nopanel{grid-template-columns:1fr 0!important;gap:0}
.edstage.nopanel .stageR{display:none!important}
.edstage.nopanel .promptrow{grid-column:1}
#paneltog{display:none;position:absolute;top:2px;right:0;z-index:40;font:800 10px/1 Inter,system-ui;letter-spacing:1.5px;padding:8px 12px;border-radius:10px;border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);background:var(--bg);color:var(--tx);cursor:pointer;box-shadow:var(--neu-out)}
.edstage.nopanel #paneltog{display:block}
.mtabs .paneloff{flex:0 0 auto;max-width:52px;opacity:.7}
.bin.drawer{position:fixed;left:14px;right:14px;bottom:0;z-index:90;transform:translateY(102%);transition:transform .28s;border-radius:16px 16px 0 0;background:var(--bg);box-shadow:0 -14px 44px rgba(0,0,0,.5);max-height:42vh;overflow:auto;visibility:hidden}
.bin.drawer.open{transform:none;visibility:visible}
.bin.drawer .tlhead{position:sticky;top:0;background:var(--bg);z-index:2}
.edstage .stageR .edside.sidealt{padding:4px 2px}
@media(max-width:1150px){body.edprod{overflow:auto}.edstage.nopanel{grid-template-columns:1fr!important}}
/* v13.4b — fit the screen: no guides on the edit screen, capped prompt, tighter rows */
body.edprod .guidetab,body.edprod #guides,body.edprod .guideline{display:none!important}
.edstage .promptrow .liveprompt,.edstage .promptrow .lpdiff{max-height:13vh;overflow:auto}
.edstage .stagehead{padding:4px 6px}
.edstage .stagebar{padding:4px 6px}
.edhead.slim .seqpick input,.edhead.slim input#seqname{height:30px}
/* v13.4c — hard fit: the stage owns the viewport height; the player flexes, everything else keeps its row */
body.edprod .pflow.eflow{margin:0}
.edstage{height:calc(100vh - 128px);grid-template-rows:auto minmax(0,1fr)!important;overflow:hidden}
.edstage .stageC{height:100%;min-height:0;display:flex;flex-direction:column;gap:6px}
.edstage .stageC .stageplayer{flex:1 1 0;min-height:120px;max-height:none;overflow:hidden}
.edstage .stageC .stageplayer .monframe{height:100%}
.edstage .stageC .stageplayer .monframe video{height:100%;max-height:none}
.edstage .stageC .stagehead{flex:0 0 auto;padding:2px 6px}
.edstage .stageC .monbar{flex:0 0 auto}
.edstage .stageC .stagebar{flex:0 0 auto;padding:2px 6px}
.edstage .stageC .stagebar .sb-l,.edstage .stageC .stagebar .sb-r{gap:6px}
.edstage .stageC .stagebar .pill,.edstage .stageC .stagebar .vb{padding:6px 10px;font-size:11px}
.edstage .stageC .score{flex:0 0 auto}
.edstage .stageC .tlwrap.edtl{flex:0 0 auto;margin-top:0}
.edstage .tlframes{height:26px}.edstage .tlane{height:30px}.edstage .tlane.alane{height:20px}
.edstage .tlx{padding:6px 10px}
.edstage .edtl .tl{max-height:21vh;overflow:auto}
.edstage .stageR.modpanel{max-height:100%;min-height:0;overflow:auto}
.edstage .promptrow .liveprompt,.edstage .promptrow .lpdiff{max-height:9vh;overflow:auto}
.edhead.slim{flex-wrap:nowrap;height:42px;overflow:hidden}
.edhead.slim .seqpick{flex-wrap:nowrap}
.edhead.slim .seqpick .vb,.edhead.slim .edact .pill{white-space:nowrap;padding:6px 10px;font-size:11px}
body.edprod .guides-banner{display:none!important}
/* v13.4d — the guide banner never overlaps the edit screen */
body.edprod>.wrap:not(#app){display:none!important}
.edhead.slim .gstrip{display:none!important}
/* v13.4e — specificity: the fit rules must beat .stage.s3.s4 */
.stage.s3.s4.edstage{height:calc(100vh - 128px);grid-template-rows:auto minmax(0,1fr);overflow:hidden}
.stage.s3.s4.edstage .stageC{height:100%;min-height:0;display:flex;flex-direction:column;gap:6px}
.stage.s3.s4.edstage .stageC .stageplayer{flex:1 1 0;min-height:120px;max-height:none;overflow:hidden}
.stage.s3.s4.edstage .stageC .stageplayer video{max-height:none;height:100%}
.stage.s3.s4.edstage .tlframes{height:26px}
.stage.s3.s4.edstage .tlane{height:30px}
.stage.s3.s4.edstage .tlane.alane{height:20px}
.stage.s3.s4.edstage .tlx{padding:6px 10px}
.stage.s3.s4.edstage .stageR{max-height:100%;min-height:0;overflow:auto}
.stage.s3.s4.edstage.nopanel{grid-template-columns:1fr 0!important;gap:0 0}

/* v13.5 — deadspace pass: scroll lock that actually locks, slim prompt row, slim head, monbar + takes on ONE row, tighter gaps */
html.edlock{overflow:hidden}
.stage.s3.s4.edstage{gap:8px 16px}
.stage.s3.s4.edstage .promptrow .stageL{padding:6px 12px}
.stage.s3.s4.edstage .promptrow .liveprompt,.stage.s3.s4.edstage .promptrow .lpdiff{min-height:34px}
.stage.s3.s4.edstage .stagehead{padding:0 6px;min-height:0}
.stage.s3.s4.edstage .stagehead .stagetitle b{font-size:20px}
.edbars{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:0 4px}
.edbars .monbar{flex:1 1 auto;min-width:240px;padding:0}
.edbars .stagebar{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:0}
.edbars .stagebar .sb-l,.edbars .stagebar .sb-r{display:flex;align-items:center;gap:6px}
.stage.s3.s4.edstage .stageC{gap:6px}
.stage.s3.s4.edstage .tlhead{padding:2px 8px}
.stage.s3.s4.edstage .score .bb-head{padding:0 0 4px}

/* v13.6 — prompt collapses to a bottom bar (collapsed by default, opens as an overlay); the top is free, the console never scrolls, player + timeline get the room */
.stage.s3.s4.edstage{grid-template-rows:minmax(0,1fr) auto;height:calc(100vh - 112px)}
.stage.s3.s4.edstage .promptrow{grid-row:2;grid-column:1/-1;position:relative;min-width:0}
.stage.s3.s4.edstage .stageC{grid-row:1}
.stage.s3.s4.edstage .stageR{grid-row:1}
.promptrow.edp .edp-bar{display:flex;align-items:center;gap:10px;padding:7px 14px;border-radius:12px;background:var(--bg);box-shadow:var(--neu-in);cursor:pointer;font-size:11px;font-weight:800;letter-spacing:1.5px}
.promptrow.edp .stageL{display:none}
.promptrow.edp.open .stageL{display:flex;position:absolute;bottom:calc(100% + 10px);left:0;right:0;z-index:70;box-shadow:0 -18px 50px rgba(0,0,0,.55);max-height:52vh;overflow:auto}
.promptrow.edp .cmpslot{position:absolute;bottom:calc(100% + 10px);left:0;right:0;z-index:72;box-shadow:0 -18px 50px rgba(0,0,0,.55)}
.stage.s3.s4.edstage .promptrow .liveprompt,.stage.s3.s4.edstage .promptrow .lpdiff{max-height:40vh;min-height:60px}
.edstage .edtl .tl{max-height:28vh;overflow:auto}
.stage.s3.s4.edstage .stageR{overflow:hidden;max-height:none}
.edstage .stageR .stage3d{max-height:32vh}
.edstage .stageR .modstage{max-height:none}
/* v13.6b — exact fit: no clipped console lanes, prompt bar fully visible */
.stage.s3.s4.edstage{height:calc(100vh - 148px)}
.edstage .stageR .stage3d{max-height:28vh}
.edstage .edtl .tl{max-height:26vh}
.edstage .stageR .mod{padding-bottom:6px}

/* v13.7 — three empty rows reclaimed: their controls stack vertically beside the player; smaller top menu; exact-fit stage; timeline grows */
body.edprod #edprompt{display:none!important}
body.edprod .top{padding:4px 0}
body.edprod #tabs .stage,body.edprod .tabs .stage{padding:8px 16px;font-size:11.5px;letter-spacing:1.5px;min-height:0}
body.edprod .tabs{margin-bottom:2px}
.edstage .prow2{display:flex;gap:12px;flex:1 1 0;min-height:150px}
.stage.s3.s4.edstage .stageC .prow2 .stageplayer{flex:1 1 auto;min-height:0;height:auto;max-height:none}
.edstage .prow2 .stageplayer .monframe{height:100%}
.edstage .prow2 .stageplayer .monframe video{height:100%}
.edstage .vstrip{flex:0 0 170px;display:flex;flex-direction:column;gap:12px;min-width:0;overflow:hidden;padding:2px 0}
.edstage .vstrip .stagehead{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:0}
.edstage .vstrip .stagehead .stagetitle{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.edstage .vstrip .stagehead .stagetitle b{font-size:22px}
.edstage .vstrip .stagehead .stagestate{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.edstage .vstrip .vs-bb .bb-head,.edstage .vstrip .vs-th .tlhead{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:0;position:static}
.edstage .vstrip .crumb{display:none}
.edstage .vstrip .tlhead input[type=range]{width:100%!important}
.edstage .vstrip .tlhead small,.edstage .vstrip .bb-head small{opacity:.6}
.edstage .vstrip button,.edstage .vstrip .vb{width:100%;text-align:center}
.edstage .vstrip .seg{display:flex}
.stage.s3.s4.edstage .stageC .tlwrap.edtl{flex:1 1 0;min-height:130px;display:flex;flex-direction:column}
.edstage .edtl .tl{flex:1 1 0;height:auto;max-height:none;overflow:auto}
.stage.s3.s4.edstage .stageC .score{flex:0 0 auto}
.edstage .tlframes{height:24px}.edstage .tlane{height:28px}.edstage .tlane.alane{height:18px}
.edstage .score .tlx{padding:4px 10px}
/* v13.7b — the menu really shrinks (beats the !important base rule); tighter strip so fit/zoom stay visible */
body.edprod .tabs .stage{padding:8px 0!important}
body.edprod .tabs .stage .t{font-size:11px!important}
body.edprod .top{padding:2px 0;min-height:0}
body.edprod .tabs{gap:6px}
.edstage .vstrip{gap:8px}
.edstage .vstrip .stagehead .stagetitle b{font-size:18px}
.edstage .vstrip .stagehead .stagetitle span{font-size:11px;line-height:1.3}
.edstage .vstrip .vb,.edstage .vstrip button{padding:6px 8px;font-size:11px}
.edstage .vstrip .seg span{padding:5px 8px;font-size:10.5px}
.edstage .vstrip .vs-th small,.edstage .vstrip .vs-bb small{display:none}
body.edprod #app{padding-bottom:0}

/* v13.8 — no TIMELINE bar · prompt is a popup · draw-a-clip region · thin NOTES line · tracks never scroll */
.edstage .edtl > .tlhead{display:none!important}
.stage.s3.s4.edstage{grid-template-rows:minmax(0,1fr)}
.stage.s3.s4.edstage .promptrow{display:none}
.edstage .vstrip .vs-prompt{display:flex;align-items:center;justify-content:center;gap:6px}
.edstage .vstrip .vs-prompt .pch{font:600 10px ui-monospace,monospace;opacity:.65}
#modal .epop .stageL{display:flex;flex-direction:column;gap:8px;background:var(--bg);border-radius:14px;padding:12px 14px;box-shadow:var(--neu-in)}
#modal .epop .stageL .lp-head{display:flex;gap:10px;align-items:center}
#modal .epop .liveprompt,#modal .epop .lpdiff{width:100%;min-height:220px;max-height:56vh;overflow:auto}
#modal .epop .cmpslot{margin-bottom:10px}
.track.v{position:relative}
.vregion{position:absolute;top:2px;bottom:2px;background:color-mix(in srgb,var(--acc) 16%,transparent);border:1px dashed color-mix(in srgb,var(--acc) 85%,transparent);border-radius:8px;pointer-events:none;display:flex;align-items:center;justify-content:center;z-index:4}
.vregion span{font:800 10px ui-monospace,monospace;color:#aab4ff;white-space:nowrap}
/* NOTES: thin yellow line until clicked */
.track.notes{height:7px;margin:0 0 4px;cursor:pointer;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(255,213,106,.5);background:rgba(255,213,106,.14)}
.track.notes .nspan{top:1px;height:5px;padding:0;border-radius:3px;box-shadow:none}
.track.notes .nspan span,.track.notes .nspan .ne{display:none}
.track.notes.nopen{height:30px;margin:0 0 6px;cursor:text;background:repeating-linear-gradient(90deg,rgba(255,213,106,.06) 0 28px,rgba(255,213,106,.1) 28px 29px);box-shadow:inset 0 0 0 1px rgba(255,213,106,.25)}
.track.notes.nopen .nspan{top:3px;height:24px;padding:0 10px;border-radius:6px;box-shadow:0 3px 8px rgba(0,0,0,.4)}
.track.notes.nopen .nspan span{display:inline}
.track.notes.nopen .nspan .ne{display:block}
.thead.notes{height:7px;overflow:hidden;padding:0;justify-content:center}
.thead.notes b{font-size:8px;line-height:7px;opacity:.7}
.thead.notes.nopen{height:30px;padding:0 6px}
.thead.notes.nopen b{font-size:11px;line-height:normal;opacity:1}
/* tracks never scroll vertically — the player gives up space instead */
.stage.s3.s4.edstage .stageC .tlwrap.edtl{flex:0 0 auto;min-height:0}
.edstage .edtl .tl{max-height:none;overflow:visible}
.edstage .prow2{min-height:110px}
/* v13.8c — collapse handle on the console's LEFT edge, centered; reopen handle on the screen's right edge, centered */
.edstage .stageR{position:relative}
#paneledge{position:absolute;left:0;top:50%;transform:translateY(-50%);width:18px;height:92px;z-index:45;border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);border-radius:0 10px 10px 0;background:var(--bg);color:var(--ink2);cursor:pointer;font-size:12px;padding:0;box-shadow:var(--neu-out);opacity:.75}
#paneledge:hover{opacity:1;color:#fff}
#paneltog{position:absolute;top:50%;right:0;bottom:auto;transform:translateY(-50%);width:20px;height:104px;padding:0;font-size:13px;letter-spacing:0;border-radius:10px 0 0 10px;opacity:.85}
#paneltog:hover{opacity:1}
/* v13.8d — the thin NOTES line wins whatever tries to inflate it */
.track.notes:not(.nopen){height:15px!important;min-height:0!important;padding:0!important;margin:0 0 5px!important}
.thead.notes:not(.nopen){height:15px!important;min-height:0!important;padding:0 8px!important}

/* v13.9 — wider editor half; console can never push the columns (tab switches leave the editor untouched); the last strip of dead space below is used; console fits without clipping */
.stage.s3.s4.edstage{grid-template-columns:minmax(0,1.38fr) minmax(0,1fr)!important}
.stage.s3.s4.edstage.nopanel{grid-template-columns:1fr 0!important}
.stage.s3.s4.edstage .stageC,.stage.s3.s4.edstage .stageR{min-width:0}
.edstage .stageC > :last-child{margin-bottom:0}
.edstage .tlwrap.edtl{padding-bottom:2px}
.edstage .stageR .stage3d{max-height:24vh}
.edstage .stageR .kflbar{height:14px}
.edstage .stageR .kfl2 .kflrow{margin:2px 0}
.edstage .stageR .mtabs{margin-bottom:6px}
.edstage .stageR .mod{padding:8px 10px 6px}
/* v13.9b — tighter stage padding, single-row transport where possible */
.stage.s3.s4.edstage{padding:10px 14px 8px}
.edbars{gap:6px}
.edbars .monbar{min-width:0}
.edbars .ico,.edbars .pill,.edbars .vb{padding:5px 9px;font-size:11px}

/* v14.0 — THE row fix: one grid row, always. The stage never sizes itself to the console's content again; the player absorbs all leftover height (console open or collapsed). */
.stage.s3.s4.edstage{grid-template-rows:minmax(0,1fr)!important;height:calc(100vh - 150px)}
.stage.s3.s4.edstage .promptrow{grid-row:auto}
.stage.s3.s4.edstage .stageC,.stage.s3.s4.edstage .stageR{grid-row:1!important}
.stage.s3.s4.edstage .stageC{height:100%!important;min-height:0}
.stage.s3.s4.edstage .stageR{max-height:100%}

/* v14.1 — filled consoles with breathing room · clip thumbnails · head-only playhead · MUSIC tab · collapsible shot lanes */
.edstage .stageR.modpanel{display:flex;flex-direction:column}
.edstage .stageR .modstage{flex:1 1 auto;min-height:0}
.edstage .stageR .modstage .face.on{display:flex;flex-direction:column;height:100%;min-height:0}
.edstage .stageR .modstage .face.on>.mod{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between;min-height:0;gap:10px}
.edstage .stageR .modstage .face.on>.notes{flex:1 1 auto}
.edstage.noscore .stageC>.score{display:none}
/* clip thumbnails */
.tclip{overflow:hidden}
.tclip .thm{position:absolute;inset:0;display:flex;z-index:0;opacity:.45;pointer-events:none;border-radius:inherit;overflow:hidden}
.tclip .thm i{flex:1 1 0;background-size:cover;background-position:center;min-width:0}
.tclip>b,.tclip>.crumb{position:relative;z-index:2;text-shadow:0 1px 4px rgba(0,0,0,.9)}
.tclip .tedge,.tclip .x{z-index:3}
/* playhead: grab the HEAD, perfectly centered on the line */
.playhead{pointer-events:none}
.playhead::before,.playhead::after{display:none!important}
.playhead .phh{position:absolute;top:-3px;left:50%;transform:translateX(-50%);width:16px;height:15px;border-radius:5px 5px 9px 9px;background:var(--green);box-shadow:0 2px 8px rgba(0,0,0,.6);cursor:ew-resize;pointer-events:auto}
.tlph::before{left:50%!important;transform:translateX(-50%)}
#ruler{cursor:ew-resize}
/* MUSIC tab */
.modmusic .gapfill.music{background:none;box-shadow:none;padding:0}
.mdur{display:flex;align-items:center;gap:10px;margin:8px 0 6px}
.mdur input[type=range]{flex:1}
.mdur b{font-size:12px;min-width:48px;text-align:right}
.sunop{display:flex;flex-direction:column;gap:6px;margin:10px 0;padding:10px 12px;border-radius:12px;background:var(--bg);box-shadow:var(--neu-in)}
.sunop .supr{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sunop .seg span{padding:4px 9px;font-size:10.5px}
.sunop input[type=range]{width:110px}
.sunop input[id=mneg]{margin-top:2px}
/* v14.2 — greyed vocal set, cue view, drawn-region hold outline */
.vocalset{display:flex;flex-direction:column;gap:6px;transition:opacity .2s}
.vocalset.off{opacity:.35;pointer-events:none}
.vocalset textarea{min-height:44px;max-height:80px;font-size:11.5px}
.vregion.hold{border-style:dashed;background:color-mix(in srgb,var(--acc) 10%,transparent)}
.vregion span{background:rgba(10,11,17,.7);padding:1px 6px;border-radius:6px}
#mrefnote a{color:var(--ac2)}
/* v14.4 — the Title-card lane (T) is gone */
body.edprod .thead.tt,body.edprod #ttrack{display:none!important}
/* v14.5 — clip thumbnails in TRUE COLOR; labels keep a scrim so they stay readable */
.tclip .thm{opacity:1}
.tclip .thm::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,10,.72) 0,rgba(5,6,10,.15) 46%,rgba(5,6,10,0) 70%)}
.tclip.on .thm::after{background:linear-gradient(180deg,rgba(5,6,10,.6) 0,rgba(5,6,10,.1) 46%,rgba(5,6,10,0) 70%)}

/* v14.6 — the ruler, the playhead and every track share x=0: no more 16px offset (music triggers exactly on the block) */
body.edprod #tracks .track{margin-left:0!important;margin-right:0!important}
/* real waveforms */
.mcue{overflow:hidden}
.mcue canvas.wv{position:absolute;left:0;bottom:1px;height:26px;pointer-events:none;opacity:.95;z-index:0}
.mcue>b,.mcue>.crumb{position:relative;z-index:2;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.mcue .tedge,.mcue .x{z-index:3}

/* v14.7 — divider right (console narrower, content intact) · hover hints */
.stage.s3.s4.edstage{grid-template-columns:minmax(0,1.52fr) minmax(0,1fr)!important}
.stage.s3.s4.edstage.nopanel{grid-template-columns:1fr 0!important}
.edstage .stageR .mod{padding-left:8px;padding-right:8px}
.edstage .stageR .modstage .face.on>.mod{gap:8px}
#hinty{position:fixed;z-index:400;display:none;background:#14151f;color:#dfe2ff;border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);border-radius:9px;padding:7px 10px;font:500 11px/1.45 Inter,system-ui,sans-serif;box-shadow:0 12px 30px rgba(0,0,0,.55);pointer-events:none;white-space:normal}

/* v14.9 — console truly fills its column (it was content-sized: align start), narrower console, breathing room inside */
.stage.s3.s4.edstage{grid-template-columns:minmax(0,1.64fr) minmax(0,1fr)!important}
.stage.s3.s4.edstage.nopanel{grid-template-columns:1fr 0!important}
.stage.s3.s4.edstage .stageR{height:100%!important;align-self:stretch}
.edstage .stageR .mod{padding-left:6px;padding-right:6px}
.edstage .stageR .modstage .face.on>.mod{gap:14px;justify-content:space-evenly}
/* actor: centered wheel above the pads */
.edstage .mod.emo .eigrid.v5{display:flex;flex-direction:column;align-items:center;gap:12px}
.edstage .mod.emo .eigrid.v5 .eiwheel{width:min(58%,340px);margin:0 auto}
.edstage .mod.emo .eigrid.v5 .padgrid{width:100%}
/* v14.9b — narrower console: the four camera tool cards sit 2×2 so HORIZON never clips */
.edstage .modstage .vctrls{grid-template-columns:1fr 1fr;gap:8px}
.edstage .modstage .vctrls{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.edstage .modstage .vc{min-width:0}
.edstage .modstage .lensrow{flex-wrap:wrap}
/* v14.9c — the console content SHRINKS with the column (it was pinned at 780px min-content) */
.edstage .modstage .face{min-width:0;width:100%}
.edstage .modstage .face>.mod{min-width:0;max-width:none;width:100%}
.edstage .modstage .mod *{min-width:0}
.edstage .qblock.presets{overflow-x:auto}

/* v15.0 — ONE control strip (categorized) on the left; main column = player → lanes → timeline; the button rows below the player are gone */
.edcols{display:flex;gap:12px;flex:1 1 0;min-height:0}
.edmain{flex:1 1 0;display:flex;flex-direction:column;gap:6px;min-width:0;min-height:0}
.stage.s3.s4.edstage .stageC .edmain .stageplayer{flex:1 1 0;min-height:110px;max-height:none}
.edstage .vstrip{flex:0 0 178px;overflow-y:auto;overflow-x:hidden;padding-right:3px;scrollbar-width:thin}
.vs-h{font:800 9px Inter,system-ui,sans-serif;letter-spacing:2px;color:var(--ink3);margin:12px 0 2px;border-top:1px solid rgba(255,255,255,.07);padding-top:9px;width:100%}
.vstrip .monbar{display:flex!important;flex-direction:column;align-items:stretch;gap:6px;padding:0!important;min-width:0}
.vstrip .monbar .sp{display:none}
.vstrip .monbar .lcd{text-align:center;width:100%}
.vstrip .monbar .ico,.vstrip .monbar label{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 8px}
.vstrip .stagebar{display:flex!important;flex-direction:column;align-items:stretch;gap:6px;padding:0!important}
.vstrip .stagebar .sb-l,.vstrip .stagebar .sb-r{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:0}
.vstrip .stagebar .pill,.vstrip .stagebar .vb,.vstrip .stagebar button{width:100%;text-align:center;justify-content:center}
.vstrip .stagebar .ver{display:flex;flex-direction:row;flex-wrap:wrap;gap:4px;justify-content:center;align-items:center}
.vstrip .stagebar .row{flex-direction:column;align-items:stretch;gap:6px}
/* v15.0b — the strip spans only the player row; lanes + timeline keep FULL width below */
.edcols{align-items:stretch}
.edcols .stageplayer{flex:1 1 0;min-width:0}
.stage.s3.s4.edstage .stageC .edcols .stageplayer{min-height:110px;max-height:none;height:auto}
.edstage .vstrip{max-height:100%}
/* v15.0c — wider strip (player moves right), two-column button grids */
.edstage .vstrip{flex:0 0 262px}
.vstrip .monbar{display:grid!important;grid-template-columns:1fr 1fr;gap:6px}
.vstrip .monbar .crumb{display:none}
.vstrip .monbar label{grid-column:1/-1;justify-content:center;display:flex;gap:6px}
.vstrip .stagebar .sb-l .row,.vstrip .stagebar .sb-r .row{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.vstrip .stagebar .sb-l .row .pill,.vstrip .stagebar .sb-r .row .pill{width:auto}
/* v15.0d — the cue library */
.mlib{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.mrow{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;background:var(--card);border:1px solid rgba(255,255,255,.06);cursor:grab}
.mrow:active{cursor:grabbing}
.mrow .mmeta{flex:1;min-width:0;display:flex;flex-direction:column}
.mrow .mmeta b{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow .mstyle{font-size:10px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow .ico{flex:0 0 auto}
/* v15.1 — QC verdict badges hidden everywhere */
.verd,.qcbadge,.led.qc,.tg.qcflag{display:none!important}

/* v15.2 — Logic-style cue audio: clean edges, fades, volume envelope; the .io in the logo */
.logo .tld{font-style:normal;font-weight:800;font-size:.55em;color:var(--ac2,var(--acc3));letter-spacing:1px;margin-left:1px;vertical-align:super}
.tedge.l,.tedge.r{border:none!important}
.tedge:hover{background:color-mix(in srgb,var(--acc) 28%,transparent)}
.mcue{overflow:hidden}
.mcue canvas.wv{transition:none}
svg.venv{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible}
svg.venv .vl{stroke:var(--warn);stroke-width:2;fill:none;pointer-events:stroke;cursor:ns-resize}
svg.venv .vk{fill:var(--warn);stroke:var(--card);stroke-width:1.5;pointer-events:all;cursor:grab}
svg.venv .fd{fill:rgba(10,11,17,.55);stroke:rgba(255,214,106,.8);stroke-width:1;pointer-events:none}
svg.venv .fh{fill:var(--warn);opacity:.85;pointer-events:all;cursor:ew-resize}
.mcue>b,.mcue>.crumb{z-index:5}
.mcue .x{z-index:6}

/* v15.3 — wider strip, zoom under the player, resizable player/lanes split, consoles packed from the top with the hero element absorbing the leftover */
.edstage .vstrip{flex:0 0 300px}
.pcol{flex:1 1 0;display:flex;flex-direction:column;min-width:0;min-height:0;gap:6px}
.pcol .stageplayer{flex:1 1 0;min-height:0}
.zoombar{display:flex;align-items:center;gap:10px;padding:2px 6px;flex:0 0 auto}
.zoombar input[type=range]{flex:1;width:auto!important}
.vsplit{height:11px;margin:1px 0;border-radius:6px;cursor:ns-resize;background:transparent;position:relative;flex:0 0 auto}
.vsplit::after{content:'';position:absolute;left:50%;top:4px;width:52px;height:3px;transform:translateX(-50%);border-radius:2px;background:color-mix(in srgb,var(--acc) 45%,transparent)}
.vsplit:hover::after{background:color-mix(in srgb,var(--acc) 90%,transparent)}
.tlwrap.edtl.grow{flex:1 1 0!important;display:flex;flex-direction:column;min-height:0}
.tlwrap.edtl.grow .tl{flex:1 1 0;max-height:none}
/* consoles: no floating voids — content packs from the top, last block absorbs the bottom */
.edstage .stageR .modstage .face.on>.mod{justify-content:flex-start;gap:12px}
.edstage .mod.light>*:last-child{flex:1 1 auto;min-height:0}
.edstage .mod.timing>*:last-child{flex:1 1 auto;min-height:0}
.edstage .mod.cam .kfl2{margin-top:auto}
.edstage .modreset{margin-bottom:0}
/* actor: slightly smaller pads + wheel, compact character picker, zero console scroll */
.edstage .eigrid.v5 .eiwheel{width:min(46%,300px)}
.edstage .padgrid{gap:8px}
.edstage .mod.emo .actor{width:56px}
.edstage .mod.emo .actor img,.edstage .mod.emo .actor video{width:56px;height:56px}

/* ================= v15.4 — strip eats the pillarbox (no console scroll) · EDIT THE CUT under the player beside zoom ================= */
.edstage .vstrip{flex:0 0 340px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.13) transparent}
.edstage .vstrip::-webkit-scrollbar{width:5px}
.edstage .vstrip::-webkit-scrollbar-thumb{background:rgba(255,255,255,.13);border-radius:3px}
.edstage .vstrip::-webkit-scrollbar-track{background:transparent}
.zoombar{gap:8px;flex-wrap:nowrap;min-width:0}
.zoombar .monbar{display:flex!important;flex-direction:row;align-items:center;gap:6px;padding:0!important;background:transparent!important;box-shadow:none!important;flex:0 0 auto;flex-wrap:nowrap;min-width:0}
.zoombar .monbar .lcd{width:auto;text-align:center;font-size:12px;padding:3px 8px;margin:0}
.zoombar .monbar .ico,.zoombar .monbar label{width:auto;display:flex;align-items:center;justify-content:center;gap:5px;padding:5px 10px;white-space:nowrap}
.zoombar .monbar .crumb,.zoombar .monbar .sp{display:none}
.zoombar>small.lab{flex:0 0 auto}
.zoombar input[type=range]{flex:1 1 auto;min-width:70px;width:auto!important}
.zoombar .vb{flex:0 0 auto}
/* v15.4b — the wide strip lays out as TWO columns: THIS SHOT left · VIEW right — nothing scrolls */
.edstage .vstrip{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 12px;align-content:start}
.edstage .vstrip .stagehead,.edstage .vstrip .vs-prompt{grid-column:1/-1}
.edstage .vstrip .vs-h[data-l="THIS SHOT"]{grid-column:1;grid-row:3}
.edstage .vstrip .stagebar{grid-column:1;grid-row:4/span 6}
.edstage .vstrip .vs-h[data-l="VIEW"]{grid-column:2;grid-row:3}
.edstage .vstrip .vs-score{grid-column:2;grid-row:4}
.edstage .vstrip .vs-bb{grid-column:2;grid-row:5}
.edstage .vstrip .binbtn{grid-column:2;grid-row:6}
.edstage .vstrip .vs-th{display:none}
.edstage .vstrip{grid-auto-rows:max-content}
.edstage .vstrip .stagehead{height:max-content;margin-bottom:0}
.edstage .vstrip{gap:6px 12px}
.edstage .vstrip .vs-h{margin:4px 0 0;line-height:1.1;padding:0}
.vstrip .stagebar .ver{display:grid;grid-template-columns:1fr 1fr;gap:4px;max-height:96px;overflow-y:auto;scrollbar-width:thin}
.vstrip .stagebar .ver .pill{width:auto}
.vstrip .stagebar .ver small{grid-column:1/-1}

/* ================= v15.5 — sound editor + grabbable envelope ================= */
svg.venv .vlh{stroke:rgba(255,214,106,.01);stroke-width:16;fill:none;pointer-events:stroke;cursor:ns-resize}
svg.venv .vkh{fill:rgba(255,214,106,.01);pointer-events:all;cursor:grab}
svg.venv .vk{pointer-events:none}
svg.venv .fh{width:11px;height:11px;cursor:ew-resize}
.cueed .cuegrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.cueed .cuecard{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:7px;min-width:0}
.cueed .cuecard>.lab{margin:0 0 2px;font-size:9px;letter-spacing:2px;opacity:.7}
.cueed .cr{display:grid;grid-template-columns:58px 1fr 44px;align-items:center;gap:8px}
.cueed .cr small{font-size:9px;letter-spacing:1px;opacity:.65}
.cueed .cr b{font:600 10px ui-monospace,monospace;text-align:right;white-space:nowrap}
.cueed .cr input[type=range]{width:100%;min-width:0}
.cueed .seg{display:flex;margin-bottom:2px}
.cueed textarea,.cueed input[type=text],.cueed input:not([type]){width:100%}

/* ================= v15.6 — envelope grabs · big cue editor · strip rebuilt · clip browser ================= */
/* the cue label must never swallow the envelope again */
.mcue>b,.mcue>.crumb{pointer-events:none}
svg.venv{z-index:6}
/* --- big cue --- */
.cueed .bigwrap{margin:2px 0 10px}
.cueed .bigcue{position:relative;height:132px;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#332a4d,#241e36);box-shadow:var(--neu-in),inset 0 0 0 1px rgba(255,255,255,.07);cursor:crosshair;touch-action:none}
.cueed .bigcue canvas.bwv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cueed .bigcue svg.bauto{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cueed .bigcue .bighead{position:absolute;left:10px;top:8px;display:flex;flex-direction:column;gap:1px;pointer-events:none;text-shadow:0 1px 5px rgba(0,0,0,.9)}
.cueed .bigcue .bighead b{font:700 11px "Noto Sans",sans-serif;color:#efe2ff}
.cueed .bigcue .bighead span{font:600 9px ui-monospace,monospace;opacity:.72}
.cueed .bigcue .bigpar{position:absolute;right:10px;top:8px;pointer-events:none}
.cueed .bigcue .bigpar .pn{font:800 9px Inter,system-ui,sans-serif;letter-spacing:2px;text-shadow:0 1px 5px rgba(0,0,0,.9)}
.cueed .bigcue .bph{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.6);pointer-events:none;z-index:7}
svg.bauto .bbg{fill:transparent;pointer-events:all}
svg.bauto .bl{stroke:var(--pc,var(--warn));stroke-width:2.5;fill:none;pointer-events:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.7))}
svg.bauto .blh{stroke:rgba(255,255,255,.01);stroke-width:22;fill:none;pointer-events:stroke;cursor:ns-resize}
svg.bauto .bk{fill:var(--pc,var(--warn));stroke:#16121f;stroke-width:2;pointer-events:none}
svg.bauto .bkh{fill:rgba(255,255,255,.01);pointer-events:all;cursor:grab}
svg.bauto .bfd{fill:rgba(10,11,17,.5);stroke:var(--pc,var(--warn));stroke-width:1;pointer-events:none}
svg.bauto .bfh{fill:var(--pc,var(--warn));opacity:.9;pointer-events:all;cursor:ew-resize}
.cueed .bigtabs{display:flex;gap:4px;margin-top:7px;flex-wrap:wrap}
.cueed .bigtabs .bt{flex:1 1 auto;padding:5px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03);color:var(--ink2);font:800 8.5px Inter,system-ui,sans-serif;letter-spacing:1.3px;cursor:pointer;white-space:nowrap}
.cueed .bigtabs .bt.on{background:linear-gradient(135deg,var(--acc),var(--acc3));color:#fff;border-color:transparent}
.cueed .bighint{margin-top:6px;font-size:9.5px;line-height:1.45}
.cueed .cr{grid-template-columns:56px 1fr 42px 22px}
.cueed .kfb{width:20px;height:20px;padding:0;border-radius:6px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:var(--ink3);font-size:10px;line-height:1;cursor:pointer}
.cueed .kfb.on{background:linear-gradient(135deg,var(--acc),var(--acc3));color:#fff;border-color:transparent}
.cueed .kfsp{display:block;width:20px}
/* --- shot-lanes toggle sits by the lanes --- */
.edstage .lanesbar{display:flex;align-items:center;gap:7px;padding:1px 4px 3px;flex:0 0 auto}
.edstage .lanesbar .lb-t{width:20px;height:18px;padding:0;border-radius:6px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:var(--ink2);font-size:10px;line-height:1;cursor:pointer}
.edstage .lanesbar .lb-l{font:800 8.5px Inter,system-ui,sans-serif;letter-spacing:2px;color:var(--ink3);cursor:pointer;user-select:none}
.edstage .lanesbar:hover .lb-t{border-color:var(--pink)}
/* --- strip: uniform buttons, stacked cuts/one-take, quiet status --- */
.edstage .vstrip .stagebar .pill,.edstage .vstrip .stagebar .vb,.edstage .vstrip .stagebar button{width:100%;padding:8px 10px;font-size:11.5px;justify-content:center}
.edstage .vstrip .led.stat{width:100%;justify-content:center;background:transparent!important;box-shadow:none!important;border:1px dashed rgba(126,224,200,.35);color:var(--ink3);font:600 9.5px Inter,system-ui,sans-serif;letter-spacing:.3px;padding:5px 8px;text-transform:none;opacity:.85}
.edstage .vstrip .vs-bb .seg,.edstage .vstrip .vs-bb .modeseg{display:flex;flex-direction:column;gap:4px}
.edstage .vstrip .vs-bb .seg span,.edstage .vstrip .vs-bb .modeseg span{width:100%;text-align:center;border-radius:8px;padding:7px 8px}
/* --- clip browser takeover --- */
.edstage .vstrip.browsing{display:flex!important;flex-direction:column;overflow:hidden}
.cbrow{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;gap:6px}
.cbhead{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.cbhead small{font:800 8.5px Inter,system-ui,sans-serif;letter-spacing:1.6px;color:var(--ink3);white-space:nowrap}
.cbhead .vb{width:auto!important;padding:5px 9px!important;font-size:10px!important}
.cbhead .cbz{display:flex;align-items:center;gap:5px;margin-left:auto;min-width:0}
.cbhead .cbz input{width:64px!important}
.cblist{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--bz),1fr));gap:8px;overflow-y:auto;min-height:0;flex:1 1 auto;padding-right:4px;scrollbar-width:thin;align-content:start}
.cbclip{border-radius:10px;overflow:hidden;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);cursor:grab;transition:border-color .15s,transform .15s}
.cbclip:hover{border-color:var(--pink);transform:translateY(-1px)}
.cbthumb{position:relative;aspect-ratio:16/9;background:#0c0d14;overflow:hidden}
.cbthumb video{width:100%;height:100%;object-fit:cover;pointer-events:none;display:block}
.cbscrub{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--pink);box-shadow:0 0 6px var(--pink)}
.cbdur{position:absolute;right:4px;bottom:4px;font:700 8.5px ui-monospace,monospace;font-style:normal;background:rgba(6,7,12,.7);padding:1px 5px;border-radius:5px}
.cbclip>b{display:flex;align-items:baseline;gap:5px;padding:5px 7px;font:700 10px "Noto Sans",sans-serif;color:var(--ink);white-space:nowrap;overflow:hidden}
.cbclip>b small{font-size:8.5px;opacity:.55;font-weight:600}
/* strip auto-tighten (no scrolling, ever) */
.edstage .vstrip.tight{gap:4px 10px}
.edstage .vstrip.tight .stagebar .pill,.edstage .vstrip.tight .stagebar .vb,.edstage .vstrip.tight .stagebar button{padding:6px 8px;font-size:10.5px}
.edstage .vstrip.tight .vs-h{margin:2px 0 0;padding-top:6px}
.edstage .vstrip.tight .stagehead .stagetitle b{font-size:15px}
.edstage .vstrip.tight .vs-bb .modeseg span{padding:5px 8px}
.edstage .vstrip.tighter{gap:3px 8px}
.edstage .vstrip.tighter .stagebar .pill,.edstage .vstrip.tighter .stagebar .vb,.edstage .vstrip.tighter .stagebar button{padding:4px 7px;font-size:9.5px}
.edstage .vstrip.tighter .stagehead .stagetitle b{font-size:13px}
.edstage .vstrip.tighter .stagehead .stagetitle span{display:none}
.edstage .vstrip.tighter .led.stat{padding:3px 6px;font-size:8.5px}
.edstage .vstrip.tighter .vs-h{border-top:none;padding-top:2px}
.edstage .vstrip .cutw{width:100%}
.edstage .vstrip.browsing>*:not(.cbrow){display:none!important}
.cblist{grid-auto-rows:max-content!important}
.cbclip{align-self:start}

/* ================= v15.7 — fluid envelopes · EQ curve · strip reflow · actor picker · readable headings ================= */
/* strip: one column, THE CUT under THIS SHOT */
.edstage .vstrip{display:flex!important;flex-direction:column;gap:7px;align-content:stretch}
.edstage .vstrip>*{grid-column:auto!important;grid-row:auto!important}
.edstage .vstrip .vs-th,.edstage .vstrip .vs-score{display:none!important}
.edstage .vstrip .stagebar .row{display:grid;grid-template-columns:1fr;gap:6px}
/* Fix a segment — the lead action */
.edstage .vstrip .fixbig{display:flex!important;flex-direction:column;align-items:center;gap:1px;width:100%;
  padding:11px 12px!important;border-radius:14px!important;border:1px solid color-mix(in srgb,var(--acc) 50%,transparent)!important;
  background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 22%,transparent),color-mix(in srgb,var(--acc) 22%,transparent))!important;
  color:var(--ink)!important;font:800 13px Inter,system-ui,sans-serif!important;letter-spacing:.4px;box-shadow:0 10px 26px -16px color-mix(in srgb,var(--acc) 90%,transparent)}
.edstage .vstrip .fixbig:hover{border-color:var(--pink)!important;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 34%,transparent),color-mix(in srgb,var(--acc) 34%,transparent))!important}
.edstage .vstrip .fixbig em{font-style:normal;font-size:15px;line-height:1}
.edstage .vstrip .fixbig small{font:600 9px Inter,system-ui,sans-serif;letter-spacing:.2px;opacity:.62;text-transform:none}
.edstage .vstrip .secbtn{opacity:.9}
/* PROMPT — visible, not a hairline */
.edstage .vstrip .vs-prompt.big{display:flex!important;flex-direction:column;align-items:center;gap:1px;width:100%;
  padding:9px 12px!important;border-radius:13px!important;border:1px dashed rgba(255,255,255,.24)!important;
  background:rgba(255,255,255,.045)!important;font:800 11.5px Inter,system-ui,sans-serif!important;letter-spacing:1.1px;color:var(--ink)!important}
.edstage .vstrip .vs-prompt.big:hover{border-color:var(--pink)!important;background:color-mix(in srgb,var(--acc) 10%,transparent)!important}
.edstage .vstrip .vs-prompt.big em{font-style:normal;opacity:.8}
.edstage .vstrip .vs-prompt.big small{font:600 9px Inter,system-ui,sans-serif;letter-spacing:.2px;opacity:.55;text-transform:none}
.edstage .vstrip .vs-prompt.big .pch{font:700 9.5px ui-monospace,monospace;opacity:.6}
/* section headings in the strip read as headings */
.edstage .vstrip .vs-h{font-size:10px;letter-spacing:2.4px;color:var(--ink2);opacity:.95}
/* --- EQ curve pad --- */
.cueed .eqcard{grid-column:1/-1}
.cueed .eqpad{position:relative;height:122px;border-radius:10px;overflow:hidden;background:linear-gradient(180deg,rgba(126,200,224,.07),rgba(10,11,17,.35));box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);touch-action:none}
.cueed .eqpad svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cueed .eqpad .eqlab{position:absolute;bottom:4px;font:700 8px ui-monospace,monospace;font-style:normal;opacity:.45;pointer-events:none}
.cueed .eqpad .eqlab.l{left:6px}.cueed .eqpad .eqlab.m{left:50%;transform:translateX(-50%)}.cueed .eqpad .eqlab.h{right:6px}
svg .eqg{stroke:rgba(255,255,255,.07);stroke-width:1}
svg .eqz{stroke:rgba(255,255,255,.16);stroke-width:1;stroke-dasharray:3 4}
svg .eqfill{fill:url(#eqf1);pointer-events:none}
svg .eqline{stroke:url(#eqg1);stroke-width:2.5;fill:none;pointer-events:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
svg .eqn{fill:#eaf6ff;stroke:#16121f;stroke-width:2;pointer-events:none}
svg .eqnh{fill:rgba(255,255,255,.01);pointer-events:all;cursor:ns-resize}
svg .eqt{fill:#eaf6ff;font:700 9px ui-monospace,monospace;text-anchor:middle;pointer-events:none;opacity:.85}
.cueed .eqread{font:600 9.5px ui-monospace,monospace;opacity:.65;text-align:center;margin-top:2px}
.cueed .eqread b{color:var(--ink);opacity:.95}
.cueed .eqkf{display:flex;align-items:center;gap:5px;justify-content:center;margin-top:2px}
.cueed .eqkf span,.cueed .eqkf small{font:800 8px Inter,system-ui,sans-serif;letter-spacing:1.4px;opacity:.5}
/* --- actor: the element picker keeps its natural height --- */
.edstage .mod.emo .actorpick,.edstage .mod.emo .actorpick.v2{flex:0 0 auto!important;height:auto!important;min-height:max-content!important;overflow:visible!important}
.edstage .mod.emo .eigrid{min-height:0}
/* --- right console: section titles you can actually read --- */
.edstage .modstage .modt{font-size:12.5px!important;letter-spacing:1.6px;color:var(--ink)!important;opacity:1;font-weight:900}
.edstage .modstage .modt .beat,.edstage .modstage .modt span{font-size:9.5px;opacity:.6;letter-spacing:.4px}
.edstage .modstage .lab,.edstage .modstage small.lab{font-size:9.5px!important;letter-spacing:2px!important;color:var(--ink2)!important;opacity:.95!important;font-weight:800}
.edstage .modstage .cuecard>.lab{padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:4px}
/* the viewer column holds player → zoom → shot lanes; the strip stands beside all of it */
.edstage .edcols{align-items:stretch}
.edstage .edcols .pcol{display:flex;flex-direction:column;min-width:0;min-height:0}
.edstage .edcols .pcol>.stageplayer{flex:0 1 auto;min-height:0}
.edstage .edcols .pcol>.score{flex:1 1 auto;min-height:0;overflow:hidden}
.edstage .vstrip{overflow:hidden;max-height:100%}
.edstage .vstrip .vs-prompt.big{padding:7px 12px!important;gap:0}
.edstage .vstrip .vs-prompt.big small{display:none}
.edstage .vstrip.tight .fixbig{padding:8px 10px!important;font-size:12px!important}
.edstage .vstrip.tight .fixbig small{display:none}
.edstage .vstrip.tighter .fixbig{padding:6px 9px!important;font-size:11px!important}
.edstage .vstrip .fixbig .ft,.edstage .vstrip .vs-prompt.big .ft{display:flex;align-items:center;gap:7px;justify-content:center;width:100%}
.edstage .vstrip .vs-prompt.big{padding:8px 12px!important}
/* actor: the wheel and pads give way so the whole console fits without scrolling */
.edstage .mod.emo .eigrid.v5{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1 1 auto;min-height:0}
.edstage .mod.emo .eigrid.v5 .eiwheel{width:auto!important;height:auto!important;flex:1 1 auto;min-height:110px;max-height:min(30vh,270px);aspect-ratio:1;align-self:center}
.edstage .mod.emo .eigrid.v5 .padgrid{width:100%;flex:0 1 auto;min-height:0}

.edstage .mod.emo .eictl{flex:0 0 auto}
.edstage .mod.emo .acttop{flex:0 0 auto}
.edstage .mod.emo .eigrid.v5{gap:6px}
.edstage .mod.emo .eigrid.v5 .eiwheel{max-height:min(29vh,262px)}

/* ================= v15.8 — EXPORT tab ================= */
.xpwrap{max-width:1180px;margin:0 auto;padding:0 4px 40px}
.xpbusy{margin:10px 0;padding:10px 14px;border-radius:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 16%,transparent),color-mix(in srgb,var(--acc) 16%,transparent));border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);font:700 12px Inter,system-ui,sans-serif;letter-spacing:.4px}
.xpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px;margin-top:14px}
.xpcard{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:18px;background:var(--card);box-shadow:var(--neu-out);border:1px solid rgba(255,255,255,.06)}
.xpcard .xph{display:flex;flex-direction:column;gap:4px}
.xpcard .xph b{font:900 14px Inter,system-ui,sans-serif;letter-spacing:2px;color:var(--ink)}
.xpcard .xph small{font:600 10.5px Inter,system-ui,sans-serif;line-height:1.5;opacity:.6}
.xpcard .seg{display:flex;gap:4px}
.xpcard .seg span{flex:1;text-align:center;padding:8px 6px;border-radius:9px;font-size:11px;font-weight:800;cursor:pointer;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.xpcard .seg span.on{background:linear-gradient(135deg,var(--acc),var(--acc3));color:#fff;border-color:transparent}
.xprow{display:flex;align-items:center;gap:10px}
.xprow>small{font:800 9px Inter,system-ui,sans-serif;letter-spacing:2px;opacity:.6;width:88px;flex:0 0 auto}
.xprow select{flex:1;min-width:0;padding:8px 10px;border-radius:9px}
.xprow.chk{align-items:flex-start;gap:9px;padding:9px 11px;border-radius:11px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);cursor:pointer}
.xprow.chk input{margin-top:2px;flex:0 0 auto}
.xprow.chk span{display:flex;flex-direction:column;gap:2px;min-width:0}
.xprow.chk b{font:800 11px Inter,system-ui,sans-serif;letter-spacing:.4px}
.xprow.chk small{font:600 10px Inter,system-ui,sans-serif;opacity:.55;line-height:1.45}
.xpfacts{display:flex;flex-wrap:wrap;gap:6px}
.xpfacts span{font:700 9.5px ui-monospace,monospace;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.045);opacity:.75}
.xpgo{margin-top:auto;width:100%;justify-content:center;padding:12px 14px!important;font-size:12.5px!important;letter-spacing:.5px}
.xpgo[disabled]{opacity:.35;cursor:not-allowed;filter:grayscale(1)}
.xprend{font:700 10px ui-monospace,monospace;opacity:.6;text-decoration:none;color:var(--ink2)}
.xprend:hover{opacity:1;color:var(--pink)}
.xpfoot{margin-top:16px;text-align:center;opacity:.5}
.xpchk{display:flex;flex-direction:column;gap:5px;margin:2px 0 6px}
.xpck{font:700 9.5px Inter,system-ui,sans-serif;letter-spacing:.3px;padding:5px 9px;border-radius:8px;line-height:1.4}
.xpck.ok{background:rgba(87,242,135,.09);color:#8ef0ae;border:1px solid rgba(87,242,135,.22)}
.xpck.bad{background:rgba(255,107,107,.1);color:#ff9b9b;border:1px solid rgba(255,107,107,.3)}
.xpck.note{background:rgba(255,255,255,.04);color:var(--ink2);border:1px solid rgba(255,255,255,.1)}
.xpck.wait{background:rgba(255,255,255,.04);color:var(--ink3);border:1px dashed rgba(255,255,255,.14)}
.xprow select option:disabled{opacity:.4}
/* v15.10 — Export sections */
.xpsec{display:flex;align-items:center;gap:14px;margin:22px 0 2px}
.xpsec h3{margin:0;font:900 12px Inter,system-ui,sans-serif;letter-spacing:3.4px;color:var(--ink2)}
.xpsec span{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.14),transparent)}
.xpseq{padding:5px 10px;border-radius:9px;font:700 11px Inter,system-ui,sans-serif;max-width:220px}
.xpinst{width:100%;justify-content:center;padding:9px 12px!important;font-size:11px!important;background:linear-gradient(135deg,var(--acc),var(--acc3))!important;color:#fff!important;border:none!important}
.xpinst[disabled]{opacity:.6;cursor:wait}

/* ================= v16.0 — Episode P&L ================= */
.pnlbox{margin-top:16px}
.pnlhead{display:flex;flex-direction:column;gap:3px;margin-bottom:12px}
.pnlhead b{font:900 13px Inter,system-ui,sans-serif;letter-spacing:2.6px}
.pnlhead small{font:600 10.5px Inter,system-ui,sans-serif;opacity:.55}
.pnltot{display:flex;flex-wrap:wrap;gap:26px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);margin-bottom:14px}
.pnltot>div{display:flex;flex-direction:column;gap:2px}
.pnltot span{font:800 8.5px Inter,system-ui,sans-serif;letter-spacing:2px;opacity:.5}
.pnltot b{font:800 20px Inter,system-ui,sans-serif}
.pnlwrap{overflow-x:auto}
table.pnl{width:100%;border-collapse:collapse;font-size:12px}
table.pnl th{text-align:left;font:800 8.5px Inter,system-ui,sans-serif;letter-spacing:1.8px;opacity:.5;padding:0 12px 8px 0;white-space:nowrap}
table.pnl th.pn-n,table.pnl td.pn-n{text-align:right}
table.pnl td{padding:9px 12px 9px 0;border-top:1px solid rgba(255,255,255,.06);vertical-align:top;white-space:nowrap}
table.pnl td b{display:block;font:700 13px Inter,system-ui,sans-serif}
table.pnl td small{display:block;font:600 9px Inter,system-ui,sans-serif;opacity:.45;margin-top:1px}
table.pnl td.pn-ep b{font-size:13.5px;letter-spacing:.4px}
table.pnl .pn-hot b,table.pnl b.pn-hot,.pnltot b.pn-hot{color:#ff9b9b}
.pnlnote{margin-top:12px;opacity:.6}

/* ================= v16.1 — one button size in the strip · bigger wheel · emoji face ================= */
.edstage .vstrip .bigbtn{width:100%;min-height:50px;padding:11px 12px!important;border-radius:14px!important;
  font:800 12.5px Inter,system-ui,sans-serif!important;letter-spacing:.4px;display:flex!important;align-items:center;justify-content:center;text-align:center}
.edstage .vstrip .fixbig{min-height:50px}
.edstage .vstrip.tight .bigbtn,.edstage .vstrip.tight .fixbig{min-height:42px;padding:8px 10px!important;font-size:11.5px!important}
.edstage .vstrip.tighter .bigbtn,.edstage .vstrip.tighter .fixbig{min-height:36px;padding:6px 9px!important;font-size:10.5px!important}
/* --- actor: full character thumb --- */
.edstage .mod.emo .actor{width:96px!important}
.edstage .mod.emo .actor img,.edstage .mod.emo .actor video{width:96px!important;height:auto!important;max-height:112px;object-fit:contain!important;background:rgba(0,0,0,.35);border-radius:9px}
.edstage .mod.emo .actor b,.edstage .mod.emo .actor small{display:block;text-align:center;white-space:normal;line-height:1.25}
/* --- actor: the wheel owns its own height, the label sits under it, the pads start below --- */
.edstage .mod.emo .eigrid.v5 .eiwheel{width:100%!important;height:auto!important;max-height:none!important;aspect-ratio:auto!important;
  flex:0 0 auto!important;min-height:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.edstage .mod.emo .eigrid.v5 .eiwheel .fluid{flex:1 1 auto;aspect-ratio:1;min-height:120px;align-self:center}
.edstage .mod.emo .eigrid.v5 .eiwheel .eistate{flex:0 0 auto;position:static!important;width:100%;text-align:center}
.edstage .mod.emo .eigrid.v5 .padgrid{margin-top:10px}

/* --- the emoji face --- */
.fface{pointer-events:none}
.fface .femo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;
  font-size:calc(var(--wpx,200px) * var(--sz,0.34));line-height:1;filter:drop-shadow(0 4px 14px rgba(0,0,0,.65));
  transform:rotate(var(--tilt,0deg));transition:transform .18s ease}
.fface .femo.pop{animation:femopop .24s cubic-bezier(.34,1.56,.64,1)}
@keyframes femopop{0%{transform:rotate(var(--tilt,0deg)) scale(.88)}60%{transform:rotate(var(--tilt,0deg)) scale(1.05)}100%{transform:rotate(var(--tilt,0deg)) scale(1)}}
/* v16.1b — reclaim height so the wheel can actually breathe */
.edstage .vstrip .stagebar,.edstage .vstrip .sb-l,.edstage .vstrip .sb-r,.edstage .vstrip .stagebar .row{width:100%!important;max-width:none!important}
.edstage .mod.emo .actorpick .actor img,.edstage .mod.emo .actorpick .actor video{max-height:84px!important}
.edstage .mod.emo .actorpick .actor small{font-size:8.5px}
.edstage .mod.emo .acttop{gap:8px}
.edstage .mod.emo .acttop .actsliders{gap:8px;padding:8px 10px}
.edstage .mod.emo .acttop .actsliders .lab,.edstage .mod.emo .acttop .actsliders small{font-size:8.5px}
.edstage .mod.emo .acttop .eirl{font-size:8px;margin-top:1px}
.edstage .mod.emo .acttop .keepsw{padding:7px 10px}
.edstage .mod.emo .eigrid.v5{gap:5px}
.edstage .mod.emo .eigrid.v5 .eiwheel .fluid{min-height:150px}

.edstage .mod.emo .eigrid.v5 .padgrid{margin-top:8px}
/* v16.1c — free real height for the wheel; it can never overflow the console */
.edstage .mod.emo .acttop{padding:8px 10px!important}
.edstage .mod.emo .actsliders{gap:6px!important;padding:6px 8px!important}
.edstage .mod.emo .actsliders>*{gap:2px}
.edstage .mod.emo .actsliders input[type=range]{margin:2px 0}
.edstage .mod.emo .actorpick{padding:0 2px 4px!important;gap:8px!important}
.edstage .mod.emo .actorpick .actor img,.edstage .mod.emo .actorpick .actor video{max-height:76px!important}
.edstage .mod.emo .eictl .tplbar{padding:6px 10px}

.edstage .mod.emo .eigrid.v5 .eiwheel .fluid{flex:0 0 auto!important;min-height:0!important;max-height:none!important;width:200px;height:200px;aspect-ratio:auto!important}
.edstage .mod.emo .eigrid.v5 .eiwheel .eistate{font-size:15px;line-height:1.2}
/* the xy pads were 180px tall and overflowing the console — they size with the room now */
.edstage .mod.emo .padgrid .xypad,.edstage .mod.emo .padgrid .xypad.v3{height:var(--padh,112px)!important;aspect-ratio:auto!important;max-height:none!important;min-height:0!important}
.edstage .mod.emo .padgrid .padunit{overflow:visible}
/* v16.1d — emoji font stack, usable pads, readable slider ends */
.fface .femo{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","EmojiOne Color",sans-serif}
.edstage .mod.emo .padgrid{--padh:124px}
.edstage .mod.emo .acttop .eirl{display:flex;justify-content:space-between;gap:6px;font-size:7.5px;white-space:nowrap}
.edstage .mod.emo .acttop .actsliders{gap:12px!important}
.edstage .mod.emo .acttop .actsliders>*{min-width:0}

/* v16.1e — pads size from --padh alone; the wheel yields the difference */
.edstage .mod.emo .eigrid.v5 .padgrid>*{max-height:none!important}
.edstage .mod.emo .padgrid .padunit{display:flex;flex-direction:column;min-height:0}
/* v16.1f — the pads hold their size; the wheel is the only thing that flexes */
.edstage .mod.emo .eigrid.v5 .padgrid{flex:0 0 auto!important}
.edstage .mod.emo .padgrid .padunit{flex:0 0 auto!important}
.edstage .mod.emo .padgrid .xypad,.edstage .mod.emo .padgrid .xypad.v3{flex:0 0 auto!important;height:var(--padh,148px)!important}
/* v16.1g — tighter performance row buys the wheel real height */
.edstage .mod.emo .acttop{padding:7px 9px!important;gap:9px}
.edstage .mod.emo .actsliders{display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important;padding:4px 6px!important;align-items:start}
.edstage .mod.emo .actsliders>*{display:flex;flex-direction:column;gap:1px;min-width:0}
.edstage .mod.emo .actsliders .lab{font-size:8px!important;letter-spacing:1.4px}
.edstage .mod.emo .actsliders input[type=range]{margin:1px 0!important}
.edstage .mod.emo .acttop .eirl{font-size:7px;opacity:.5}
.edstage .mod.emo .eistate{font-size:14px!important;line-height:1.15;padding:0!important;margin:0!important}
/* wheel labels scale with the wheel so they never clip */
.edstage .mod.emo .fluid .ffam{font-size:calc(var(--wpx,200px)*0.048)!important;letter-spacing:.5px}

/* ================= v16.2 — the face is centred and on top · the wheel survives a re-render · taller pads ================= */
.edstage .mod.emo .fluid{position:relative}
.edstage .mod.emo .fluid .fface{position:absolute!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;
  width:46%!important;height:46%!important;aspect-ratio:auto!important;transform:translate(-50%,-50%)!important;
  z-index:9!important;opacity:1!important;overflow:visible!important;display:block!important;filter:none!important;pointer-events:none}
.edstage .mod.emo .fluid .fface .femo{position:absolute;inset:0;font-size:calc(var(--wpx,240px)*var(--sz,0.34))}
/* a freshly rendered wheel is never zero-sized */
.edstage .mod.emo .eigrid.v5 .eiwheel .fluid{width:240px;height:240px}
/* the three pads get real height back */
.edstage .mod.emo .padgrid{--padh:170px}
.edstage .mod.emo .eigrid.v5 .eiwheel{max-height:none!important;aspect-ratio:auto!important;width:100%!important;height:auto!important}

/* ================= v16.2 — share a project · live presence · admin password ================= */
.shwrap{min-width:min(520px,86vw)}
.shlist{display:flex;flex-direction:column;gap:6px;max-height:52vh;overflow-y:auto;scrollbar-width:thin}
.shrow{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);cursor:pointer}
.shrow.on{border-color:color-mix(in srgb,var(--acc) 50%,transparent);background:color-mix(in srgb,var(--acc) 9%,transparent)}
.shrow input{flex:0 0 auto}
.shav{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(135deg,var(--acc),var(--acc3));color:#fff;font:800 10.5px Inter,system-ui,sans-serif;letter-spacing:.4px;font-style:normal}
.shname{display:flex;flex-direction:column;gap:1px;min-width:0}
.shname b{font:700 12.5px Inter,system-ui,sans-serif}
.shname i{font-style:normal;opacity:.5;font-weight:600}
.shname small{font:600 9.5px Inter,system-ui,sans-serif;opacity:.5}
.shon{margin-left:auto;font:800 8.5px Inter,system-ui,sans-serif;letter-spacing:1.4px;color:#8ef0ae;
  background:rgba(87,242,135,.12);border:1px solid rgba(87,242,135,.3);padding:3px 8px;border-radius:999px}
.shnote{margin-top:12px;opacity:.55}
.proj{position:relative}
.shbar{position:absolute;left:8px;right:8px;bottom:6px;display:flex;align-items:center;gap:3px;pointer-events:none}
.shbar .shav.sm{width:20px;height:20px;font-size:8px;border:1.5px solid var(--card);margin-right:-6px}
.shbar .shav.sm.live{box-shadow:0 0 0 2px var(--ok)}
.shbar .shav.sm.more{background:rgba(255,255,255,.16);color:var(--ink2)}
.shbtn{margin-left:auto;pointer-events:all;font:800 8.5px Inter,system-ui,sans-serif;letter-spacing:1px;padding:4px 8px;border-radius:999px;
  background:rgba(6,7,12,.72);border:1px solid rgba(255,255,255,.16);color:var(--ink2);cursor:pointer;opacity:0;transition:opacity .15s}
.proj:hover .shbtn{opacity:1}
.shbtn:hover{border-color:var(--pink);color:#fff}
#livebar{position:fixed;right:14px;bottom:14px;z-index:60;display:none;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;
  background:rgba(6,7,12,.86);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);font:700 10.5px Inter,system-ui,sans-serif}
#livebar i{font-style:normal;padding:2px 8px;border-radius:999px;background:linear-gradient(135deg,var(--acc),var(--acc3));color:#fff}
#livebar small{opacity:.55;font-weight:600}
.lvdot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
#cutnudge{position:fixed;right:14px;bottom:60px;z-index:61;display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:14px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 95%,transparent),color-mix(in srgb,var(--acc) 95%,transparent));color:#fff;font:700 11.5px Inter,system-ui,sans-serif;box-shadow:0 18px 40px -18px #000}
#cutnudge .pill{background:rgba(0,0,0,.28);color:#fff;border:none;padding:5px 10px}
.pwbox{margin-top:16px}
.pwh{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}
.pwh b{font:900 12px Inter,system-ui,sans-serif;letter-spacing:2.4px}
.pwh small{font:600 10px Inter,system-ui,sans-serif;opacity:.55}
.pwrow{gap:8px;flex-wrap:wrap;align-items:center}
.pwrow select,.pwrow input{padding:8px 10px;border-radius:9px;min-width:190px}

/* ================= v16.3 — Script page: 1-2-3, choices first, sane widths ================= */
.scpage .panel{max-width:1000px;margin-left:auto;margin-right:auto}
.scpage .projstrip{max-width:1000px;margin-left:auto;margin-right:auto}
.scpage .panel input[type=text],.scpage .panel input:not([type]),.scpage .panel textarea{width:100%;max-width:none}
.scpage .panel .row{flex-wrap:wrap}
.scbox{padding:18px 0 4px;border-top:1px solid rgba(255,255,255,.07)}
.scbox:first-child{border-top:none;padding-top:2px}
.scstep{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.scstep i{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--acc),var(--acc3));color:#fff;font:900 14px Inter,system-ui,sans-serif;font-style:normal}
.scstep span{display:flex;flex-direction:column;gap:2px;min-width:0}
.scstep b{font:900 14px Inter,system-ui,sans-serif;letter-spacing:.3px}
.scstep small{font:600 10.5px Inter,system-ui,sans-serif;opacity:.55;line-height:1.5}
.sctarget{margin-bottom:14px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08)}
.sctarget>small{display:block;font:800 9px Inter,system-ui,sans-serif;letter-spacing:2.2px;opacity:.55;margin-bottom:8px}
.sctline{display:flex;align-items:center;gap:16px}
.sctline input[type=range]{flex:1;width:auto!important;min-width:0}
.sctline b{font:900 26px Inter,system-ui,sans-serif;min-width:96px;text-align:right;letter-spacing:-.5px}
.scpage .chips{margin-top:0!important}
.scpage #drop{margin-top:0}
.scpage #sbrief{margin-top:10px}
.scpage .scbox:last-of-type{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.scpage .scbox:last-of-type .scstep{flex:1 1 100%}
/* the drop zone need not be a landing strip, and the ask bar must not sit on the buttons */
.scpage #drop{padding:26px 20px}
.scpage #drop b{font-size:clamp(18px,2.4vw,30px)}
.scpage{padding-bottom:96px}
.scpage .scbox:last-of-type{padding-bottom:8px}

/* ================= v16.4 — read-out beside the wheel, labels at the rim, no clipping ================= */
.edstage .mod.emo .eigrid.v5 .eiwheel{flex-direction:row!important;align-items:center;justify-content:center;gap:18px}
.edstage .mod.emo .eigrid.v5 .eiwheel .eistate{order:-1!important;flex:0 0 auto;position:static!important;
  width:auto!important;max-width:34%;text-align:right!important;margin:0!important;
  font-family:var(--disp)!important;font-weight:900!important;font-size:clamp(22px,3.4vw,44px)!important;line-height:1.05!important;letter-spacing:-.02em}
/* the wheel labels ride the rim and are never cut */
.edstage .mod.emo .fluid{overflow:visible!important}
.edstage .mod.emo .eiwheel,.edstage .mod.emo .eigrid,.edstage .mod.emo .padgrid{overflow:visible}
.edstage .mod.emo .fluid .ffam{font-family:var(--disp)!important;font-weight:900!important;white-space:nowrap;
  font-size:calc(var(--wpx,220px)*0.055)!important;letter-spacing:.04em!important;
  text-shadow:0 1px 5px rgba(0,0,0,.85),0 0 12px rgba(0,0,0,.5)}
/* keep the round gradient round even with overflow visible */
.edstage .mod.emo .fluid .ftint,.edstage .mod.emo .fluid .fgloss{border-radius:50%}
/* the read-out wraps instead of sliding under the wheel */
.edstage .mod.emo .eigrid.v5 .eiwheel .eistate{max-width:38%!important;white-space:normal!important;overflow-wrap:anywhere;
  font-size:clamp(20px,2.6vw,34px)!important;line-height:1.02!important}

/* ================= v16.5 — a left console you can read at a glance ================= */
.edstage .vstrip .vs-h{display:flex;flex-direction:column;gap:2px;border-top:none;padding:10px 0 0;margin:2px 0 0;position:relative}
.edstage .vstrip .vs-h b{font:900 11px Inter,system-ui,sans-serif;letter-spacing:2.6px}
.edstage .vstrip .vs-h small{font:600 9.5px Inter,system-ui,sans-serif;letter-spacing:.2px;opacity:.5;line-height:1.4;text-transform:none}
.edstage .vstrip .vs-h::before{content:"";position:absolute;left:-10px;top:12px;bottom:2px;width:3px;border-radius:3px;background:rgba(255,255,255,.14)}
.edstage .vstrip .vs-h.g-shot b{color:#cfc4ff}
.edstage .vstrip .vs-h.g-shot::before{background:linear-gradient(180deg,var(--acc),var(--acc3))}
.edstage .vstrip .vs-h.g-cut b{color:#a9e8de}
.edstage .vstrip .vs-h.g-cut::before{background:linear-gradient(180deg,#3fd0c0,#4aa8ff)}
/* one button shape, three weights */
.edstage .vstrip .navbtn{display:flex!important;align-items:center;gap:11px;width:100%;text-align:left!important;
  min-height:54px;padding:10px 14px!important;border-radius:14px!important;cursor:pointer;transition:transform .12s,border-color .15s,background .15s}
.edstage .vstrip .navbtn em{font-style:normal;font-size:17px;line-height:1;flex:0 0 auto;width:22px;text-align:center;opacity:.95}
.edstage .vstrip .navbtn span{display:flex;flex-direction:column;gap:1px;min-width:0}
.edstage .vstrip .navbtn b{font:800 12.5px Inter,system-ui,sans-serif;letter-spacing:.5px;white-space:nowrap}
.edstage .vstrip .navbtn small{font:600 9.5px Inter,system-ui,sans-serif;opacity:.58;line-height:1.35;text-transform:none;letter-spacing:0;white-space:normal}
.edstage .vstrip .navbtn:hover{transform:translateY(-1px)}
.edstage .vstrip .navbtn.pri{background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 30%,transparent),color-mix(in srgb,var(--acc) 30%,transparent))!important;
  border:1px solid color-mix(in srgb,var(--acc) 55%,transparent)!important;color:var(--ink)!important;box-shadow:0 12px 28px -18px color-mix(in srgb,var(--acc) 95%,transparent)}
.edstage .vstrip .navbtn.pri:hover{background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 44%,transparent),color-mix(in srgb,var(--acc) 44%,transparent))!important;border-color:var(--pink)!important}
.edstage .vstrip .navbtn.sec{background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.16)!important;color:var(--ink)!important}
.edstage .vstrip .navbtn.sec:hover{border-color:color-mix(in srgb,var(--acc) 70%,transparent)!important;background:color-mix(in srgb,var(--acc) 10%,transparent)!important}
.edstage .vstrip .navbtn.nav{background:rgba(74,168,255,.09)!important;border:1px solid rgba(74,168,255,.34)!important;color:var(--ink)!important}
.edstage .vstrip .navbtn.nav:hover{border-color:#4aa8ff!important;background:rgba(74,168,255,.18)!important}
/* takes row reads as a row of takes */
.edstage .vstrip .takesrow{display:flex!important;flex-wrap:wrap;gap:6px;width:100%}
.edstage .vstrip .takesrow .pill,.edstage .vstrip .takesrow .vb{flex:1 1 70px;width:auto!important;min-height:34px;font-size:12px!important}
/* add-a-cut is a full-width action, not a chip */
.edstage .vstrip .cutbig{width:100%!important;min-height:40px;padding:9px 12px!important;border-radius:12px!important;
  font:800 11px Inter,system-ui,sans-serif!important;letter-spacing:.6px;
  background:rgba(63,208,192,.1)!important;border:1px dashed rgba(63,208,192,.42)!important;color:#a9e8de!important}
.edstage .vstrip .cutbig:hover{background:rgba(63,208,192,.2)!important;border-style:solid!important}
/* the way out of the browser */
.cbbackbig{display:flex!important;align-items:center;justify-content:center;gap:8px;width:100%!important;flex:1 1 100%!important;
  min-height:44px;padding:11px 14px!important;border-radius:13px!important;order:-1;
  font:800 12px Inter,system-ui,sans-serif!important;letter-spacing:1.2px;
  background:rgba(74,168,255,.14)!important;border:1px solid rgba(74,168,255,.4)!important;color:#cfe6ff!important}
.cbbackbig:hover{background:rgba(74,168,255,.26)!important;border-color:#4aa8ff!important}
.cbbackbig em{font-style:normal;font-size:16px;line-height:1}
.cbhead{flex-wrap:wrap;row-gap:8px}
.edstage .vstrip.tight .navbtn{min-height:46px;padding:8px 12px!important}
.edstage .vstrip.tight .navbtn small{display:none}
.edstage .vstrip.tighter .navbtn{min-height:38px;padding:6px 10px!important}
.edstage .vstrip.tighter .navbtn small{display:none}
.edstage .vstrip.tighter .vs-h small{display:none}
/* the back button must beat the compact .cbhead rule */
.cbhead .cbbackbig,.vstrip .cbhead .cbbackbig{width:100%!important;padding:11px 14px!important;font-size:12px!important;letter-spacing:1.2px}
/* add-a-cut spans the group */
.edstage .vstrip .vs-bb .bb-head{width:100%}
.edstage .vstrip .vs-bb .bb-head>.cutbig,.edstage .vstrip .cutbig{width:100%!important;max-width:none!important;align-self:stretch}
.edstage .vstrip .vs-bb .bb-add{width:100%!important;display:flex;align-items:stretch}
.edstage .vstrip.browsing>*:not(.cbrow){display:none!important}
/* v16.6 — new production feedback */
.flashfield{animation:flashfield 1.3s ease}
@keyframes flashfield{0%,100%{box-shadow:none}18%,70%{box-shadow:0 0 0 2px var(--pink),0 0 22px -4px var(--pink)}}
.npflag{flex:1 1 100%;font:800 9px Inter,system-ui,sans-serif;letter-spacing:2.2px;color:var(--warn);
  background:rgba(255,214,106,.1);border:1px dashed rgba(255,214,106,.4);border-radius:999px;padding:6px 12px;margin-bottom:8px;text-align:center}
.projstrip.nonesel .proj.on{outline:none}

/* ================= v16.7 — custom style references ================= */
.srefbox{margin-top:14px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.srhead{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}
.srhead b{font:900 10px Inter,system-ui,sans-serif;letter-spacing:2.4px}
.srhead small{font:600 10px Inter,system-ui,sans-serif;opacity:.55;line-height:1.5}
.srgrid{display:flex;flex-wrap:wrap;gap:8px}
.srthumb{position:relative;width:92px;height:62px;border-radius:9px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#0c0d14}
.srthumb img{width:100%;height:100%;object-fit:cover;display:block}
.srthumb i{position:absolute;right:3px;top:3px;width:18px;height:18px;line-height:17px;text-align:center;border-radius:50%;
  background:rgba(6,7,12,.8);color:#fff;font-size:9px;font-style:normal;cursor:pointer;opacity:0;transition:opacity .15s}
.srthumb:hover i{opacity:1}
.srthumb i:hover{background:var(--coral)}
.sradd{width:92px;height:62px;border-radius:9px;border:1px dashed rgba(255,255,255,.22);background:rgba(255,255,255,.02);
  color:var(--ink3);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.sradd:hover{border-color:var(--pink);color:var(--ink)}
.sradd em{font-style:normal;font-size:17px;line-height:1}
.sradd span{font:700 8.5px Inter,system-ui,sans-serif;letter-spacing:.6px}
.srrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.srdraft{margin-top:10px;font:600 10px Inter,system-ui,sans-serif;opacity:.75;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.srbrief{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07)}
.srbrief .lab{display:block;font:800 8.5px Inter,system-ui,sans-serif;letter-spacing:2px;opacity:.5;margin-bottom:6px}
.srbrief textarea{width:100%;font-size:11.5px;line-height:1.55}
/* v16.8 — integrate feedback */
.intwait{display:flex;align-items:center;gap:8px}
.interr{margin-top:10px;padding:14px 16px;border-radius:14px;background:rgba(255,107,107,.09);border:1px solid rgba(255,107,107,.35);display:flex;flex-direction:column;gap:6px}
.interr b{font:800 12px Inter,system-ui,sans-serif;letter-spacing:.4px;color:#ff9b9b}
.interr span{font:600 11px Inter,system-ui,sans-serif;opacity:.85;line-height:1.5}
.interr details{margin-top:4px}
.interr summary{font:700 10px Inter,system-ui,sans-serif;opacity:.6;cursor:pointer}
.interr pre{margin:6px 0 0;padding:8px 10px;border-radius:8px;background:rgba(6,7,12,.6);font:500 10px ui-monospace,monospace;white-space:pre-wrap;max-height:180px;overflow:auto}
.introw{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.intnote{margin-top:6px;opacity:.7}
/* v16.8 — the writer's room box */
.scpage .askbig{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:14px;padding:18px 20px;border-radius:16px;
  background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.16)}
.scpage .askbig .askhint{display:flex;flex-direction:column;gap:3px;text-align:center}
.scpage .askbig .askhint b{font:900 12px Inter,system-ui,sans-serif;letter-spacing:2.6px}
.scpage .askbig .askhint span{font:600 10.5px Inter,system-ui,sans-serif;opacity:.55;line-height:1.5}
.scpage .askbig .askhint em{font-style:normal;font-weight:800;opacity:.85}
.scpage .askbig textarea{width:100%;min-height:88px;padding:12px 14px;border-radius:12px;font-size:13px;line-height:1.55}
.scpage .askrow{display:flex;align-items:center;gap:10px;justify-content:center}
/* delete a production */
.proj .projdel{position:absolute;left:6px;top:6px;width:22px;height:22px;line-height:20px;text-align:center;border-radius:50%;
  background:rgba(6,7,12,.78);border:1px solid rgba(255,255,255,.16);color:var(--ink2);font-size:10px;cursor:pointer;opacity:0;transition:opacity .15s;z-index:3}
.proj:hover .projdel{opacity:1}
.proj .projdel:hover{background:var(--coral);color:#fff;border-color:var(--coral)}
.delwrap{min-width:min(460px,86vw)}
.delwarn{line-height:1.6;margin-bottom:14px}
.dellab{display:block;font:700 11px Inter,system-ui,sans-serif;margin-bottom:6px;opacity:.8}
.dellab b{font-weight:900}
.delwrap input{width:100%;padding:10px 12px;border-radius:10px;font-size:13px}
.pill.danger{background:var(--coral)!important;color:#fff!important;border-color:transparent!important}
.pill.danger[disabled]{opacity:.35;cursor:not-allowed}

/* ================= v16.8 — printing / PDF export ================= */
@media print{
  html,body{background:#0b0c14!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #tabs{flex-wrap:wrap!important;gap:4px!important;justify-content:flex-start!important}
  #tabs .stage{padding:5px 10px!important;min-width:0!important;flex:0 0 auto!important}
  #tabs .stage .t{font-size:10.5px!important;letter-spacing:.06em!important;white-space:nowrap}
  #tabs .stage .s,#tabs .stage .n{display:none!important}
  .guidetab,#livebar,#cutnudge,#hinty,.askbig,#cmdbar,.keysbar,.projdel,.shbtn{display:none!important}
  .panel,.xpcard,.srefbox{break-inside:avoid;page-break-inside:avoid;box-shadow:none!important}
  .scstep,.issue,.beatrow,tr{break-inside:avoid;page-break-inside:avoid}
  .chatbox{max-height:none!important;overflow:visible!important}
  .scpage .panel{max-width:none!important}
  a[href]:after{content:""}
}
.srmode{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.srm{padding:8px 11px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);display:flex;flex-direction:column;gap:2px}
.srm.on{background:rgba(87,242,135,.08);border-color:rgba(87,242,135,.3)}
.srm b{font:800 9px Inter,system-ui,sans-serif;letter-spacing:1.6px;opacity:.75}
.srm.on b{color:#8ef0ae;opacity:1}
.srm span{font:600 10px Inter,system-ui,sans-serif;opacity:.6;line-height:1.5}
.srm code{font:600 9.5px ui-monospace,monospace;background:rgba(0,0,0,.3);padding:1px 5px;border-radius:4px}

/* ================= v17.1 — process bar in the header ================= */
#procbar{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;cursor:pointer;user-select:none;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);flex:0 0 auto;margin-left:10px;transition:border-color .2s,background .2s;overflow:hidden}
#procbar:hover{border-color:rgba(255,255,255,.24)}
#procbar .pdot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--ink3);transition:background .2s,box-shadow .2s}
#procbar .ptxt{font:700 11px Inter,system-ui,sans-serif;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink2)}
#procbar .pms{font:600 9.5px ui-monospace,monospace;opacity:.5;flex:0 0 auto}
#procbar .pcar{font-style:normal;font-size:9px;opacity:.45;flex:0 0 auto}
#procbar[data-s="work"]{background:color-mix(in srgb,var(--acc) 14%,transparent);border-color:color-mix(in srgb,var(--acc) 45%,transparent)}
#procbar[data-s="work"] .pdot{background:var(--acc);box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 70%,transparent);animation:procpulse 1.1s infinite}
#procbar[data-s="work"] .ptxt{color:#cfd4ff}
#procbar[data-s="ok"]{background:rgba(87,242,135,.1);border-color:rgba(87,242,135,.35)}
#procbar[data-s="ok"] .pdot{background:var(--ok)}
#procbar[data-s="ok"] .ptxt{color:#8ef0ae}
#procbar[data-s="fail"]{background:rgba(255,107,107,.12);border-color:rgba(255,107,107,.5)}
#procbar[data-s="fail"] .pdot{background:#ff6b6b}
#procbar[data-s="fail"] .ptxt{color:#ff9b9b}
@keyframes procpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 65%,transparent)}70%{box-shadow:0 0 0 7px rgba(109,124,255,0)}100%{box-shadow:0 0 0 0 rgba(109,124,255,0)}}
#proclog{position:fixed;left:28px;top:58px;transform:none;z-index:80;display:none;width:min(560px,92vw);max-height:52vh;overflow-y:auto;
  background:rgba(10,11,18,.97);border:1px solid rgba(255,255,255,.14);border-radius:14px;box-shadow:0 24px 60px -22px #000;backdrop-filter:blur(10px);padding:10px}
#proclog.on{display:block}
.plhead{display:flex;align-items:center;justify-content:space-between;font:800 8.5px Inter,system-ui,sans-serif;letter-spacing:2px;opacity:.5;padding:2px 6px 8px}
.plrow{display:flex;align-items:baseline;gap:8px;padding:5px 8px;border-radius:8px;font:600 10.5px Inter,system-ui,sans-serif}
.plrow:nth-child(odd){background:rgba(255,255,255,.025)}
.plrow b{font-weight:800;font-family:ui-monospace,monospace;font-size:9.5px;flex:0 0 auto;min-width:140px}
.plrow span{opacity:.6;flex:1;min-width:0}
.plrow i{font-style:normal;font:600 9px ui-monospace,monospace;opacity:.45}
.plrow.ok b{color:#8ef0ae}
.plrow.fail b{color:#ff9b9b}
.plrow.fail span{color:#ff9b9b;opacity:.85}
@media print{#procbar,#proclog{display:none!important}}
/* v17.1b: the process bar rides in the header's left cell, beside the logo — never under the centred tab rail */
.top>.hdlft{grid-column:1;grid-row:1;justify-self:start;display:flex;align-items:center;gap:12px;min-width:0}
.top>.hdlft>.logo{grid-column:auto;justify-self:auto;margin:0;flex:0 0 auto}
#procbar{flex:0 0 auto;margin:0}
@media(max-width:900px){#procbar .pms{display:none}#procbar{max-width:160px!important}}
/* v17.1b: keep a left gutter beside the centred tab rail so the header's left cell has room */
.tabs{width:min(920px,max(768px,calc(100vw - 840px)))}
#procbar.mini .ptxt,#procbar.mini .pms{display:none}
#procbar.mini{padding:6px 8px;gap:5px}
#procbar{padding:6px 10px;gap:6px}
#procbar .ptxt{font-size:10.5px;letter-spacing:0}
#procbar .pcar{margin-left:1px}

/* ================= v17.2 — beat sheet build progress ================= */
.bsprog{margin:0 0 12px;padding:10px 14px;border-radius:12px;background:color-mix(in srgb,var(--acc) 10%,transparent);border:1px solid color-mix(in srgb,var(--acc) 32%,transparent)}
.bsp-l{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.bsp-l b{font:800 11px Inter,system-ui,sans-serif;letter-spacing:.4px;color:#cfd4ff}
.bsp-l span{font:700 10px ui-monospace,monospace;opacity:.65}
.bsp-t{height:5px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
.bsp-t i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--acc),var(--acc3));transition:width .35s ease}
.pmk{display:inline-block;width:16px;text-align:center;font:800 11px Inter,system-ui,sans-serif;margin-right:4px}
.pmk.on{color:var(--ok)}
.pmk.off{color:var(--ink3);opacity:.6}
/* v17.2 — the beat sheet table reads as a table again: no one-word-per-line camera column,
   no truncated tags, and the row actions (prompt mark, edit, delete) sit on one line */
table.units{table-layout:auto;width:100%}
table.units th,table.units td{vertical-align:top}
table.units th:nth-child(4),table.units td:nth-child(4){min-width:210px}
table.units th:nth-child(5),table.units td:nth-child(5){min-width:190px}
table.units th:nth-child(6),table.units td:nth-child(6){min-width:206px}
table.units td:nth-child(6) .tg{margin:0 3px 3px 0}
table.units th:last-child,table.units td:last-child{width:100px;min-width:100px;white-space:nowrap;text-align:right}
table.units td:last-child .ico{margin-left:3px}
table.units td .crumb{line-height:1.45}
table.units th:nth-child(2),table.units td:nth-child(2){min-width:170px}
table.units th:nth-child(1),table.units td:nth-child(1){width:74px;white-space:nowrap}
table.units th:nth-child(3),table.units td:nth-child(3){width:64px}

/* ================= v17.3 — the pill breathes, the script page reads one way, naming is a card ================= */

/* the process pill: a moving gradient while work is in flight */
#procbar.live{background:linear-gradient(100deg,var(--acc),#a06bff,var(--acc3),#57f2b0,var(--acc));
  background-size:300% 100%;animation:procflow 2.4s linear infinite;border-color:transparent;
  box-shadow:0 0 0 1px rgba(180,170,255,.35),0 10px 30px -12px color-mix(in srgb,var(--acc) 95%,transparent)}
#procbar.live .ptxt{color:#fff}
#procbar.live .pdot{background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.65);animation:procpulse 1.1s infinite}
@keyframes procflow{0%{background-position:0% 50%}100%{background-position:300% 50%}}
#procbar[data-s="ok"]{transition:background .3s,border-color .3s}

/* the script under the conversation */
.scfinal{margin:16px 0 0;border-radius:16px;border:1px solid var(--ln);background:rgba(255,255,255,.02);overflow:hidden}
.scfhead{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--ln);background:rgba(255,255,255,.03)}
.scfhead b{font:900 10.5px var(--disp),Inter,system-ui,sans-serif;letter-spacing:.18em}
.scfmeta{font:600 10.5px Inter,system-ui,sans-serif;opacity:.55}
.scfjump{margin-left:auto;font-size:10.5px!important;padding:5px 12px!important}
.scfbody{max-height:min(58vh,620px);overflow-y:auto;padding:18px 22px}
.scftext{margin:0;white-space:pre-wrap;word-break:break-word;font:400 13.5px/1.75 Inter,system-ui,sans-serif;color:var(--ink)}
.scfinal.empty .scftext{opacity:.45;font-style:italic}
.scfinal.justmerged{border-color:rgba(87,242,135,.55);box-shadow:0 0 0 1px rgba(87,242,135,.22),0 18px 44px -26px rgba(87,242,135,.6)}
.scfinal.justmerged .scfhead{background:rgba(87,242,135,.09)}

/* the box you type in ends the page and stays in reach */
.scpage .panel.chatpanel .askbig{position:sticky;bottom:12px;z-index:12;margin-top:16px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(12,13,22,.92);box-shadow:0 -10px 34px -22px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.07)}
html.light .scpage .panel.chatpanel .askbig{background:rgba(250,250,255,.94)}

/* naming a production */
.epname{display:flex;gap:16px;align-items:flex-start;margin:14px 0 4px;padding:18px 20px;border-radius:18px;
  border:1px dashed rgba(255,255,255,.16);background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 7%,transparent),color-mix(in srgb,var(--acc) 5%,transparent));transition:.25s}
.epname.named{border-style:solid;border-color:color-mix(in srgb,var(--acc) 50%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 13%,transparent),color-mix(in srgb,var(--acc) 8%,transparent))}
.epnmark{flex:0 0 auto;width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--acc),var(--acc3));box-shadow:0 14px 30px -16px color-mix(in srgb,var(--acc) 95%,transparent)}
.epnmark i{font-style:normal;font-size:26px;color:#fff;line-height:1}
.epnbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.epnbody>small{font:900 9.5px var(--disp),Inter,system-ui,sans-serif;letter-spacing:.2em;opacity:.6}
.epnfield input#stitle{width:100%;background:transparent!important;border:none!important;box-shadow:none!important;
  padding:2px 0!important;font:800 25px var(--disp),Inter,system-ui,sans-serif;letter-spacing:-.01em;color:var(--ink)}
.epnfield input#stitle::placeholder{color:var(--ink3);opacity:.45;font-weight:700}
.epnfield input#stitle:focus{outline:none}
.epnfield{border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:6px}
.epname.named .epnfield{border-bottom-color:color-mix(in srgb,var(--acc) 55%,transparent)}
.epnhint{font:500 11px/1.55 Inter,system-ui,sans-serif;opacity:.5}
@media(max-width:760px){.epnmark{width:48px;height:48px;border-radius:13px}.epnmark i{font-size:20px}
  .epnfield input#stitle{font-size:20px}}
#procbar.live .pms,#procbar.live .pcar{color:#fff;opacity:.85}

/* ================= v17.4 — the transcript folds, the merge is marked, one button runs the loop ================= */
.chatfold{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  padding:10px 14px;margin:0 0 10px;border-radius:12px;border:1px solid var(--ln);background:rgba(255,255,255,.03);color:var(--ink2)}
.chatfold:hover{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.05)}
.chatfold .cfi{font-size:10px;opacity:.6;width:10px}
.chatfold b{font:900 10px var(--disp),Inter,system-ui,sans-serif;letter-spacing:.18em}
.chatfold .cfn{font:700 10.5px Inter,system-ui,sans-serif;opacity:.55;flex:0 0 auto}
.chatfold .cflast{font:500 11px Inter,system-ui,sans-serif;opacity:.42;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatfold .cfx{margin-left:auto;font:800 9.5px Inter,system-ui,sans-serif;letter-spacing:.12em;opacity:.5;text-transform:uppercase}

/* what the last merge added */
mark.scfadd{background:rgba(87,242,135,.16);color:#c9f7d8;border-radius:3px;
  box-shadow:inset 2px 0 0 rgba(87,242,135,.85);padding:1px 5px 1px 8px;display:inline-block;width:100%}
html.light mark.scfadd{background:rgba(24,160,80,.13);color:#0d4a25}

/* a box you can actually write in */
.askbig #askbigt{min-height:150px;font-size:13.5px;line-height:1.6}
.scpage .panel.chatpanel .askbig .askrow{gap:10px;flex-wrap:wrap}
.scfjump.ac{background:linear-gradient(135deg,var(--acc),var(--acc3))!important;color:#fff!important;border-color:transparent!important;
  box-shadow:0 8px 22px -12px color-mix(in srgb,var(--acc) 90%,transparent)}
.scfjump[disabled]{opacity:.5;cursor:not-allowed}
/* the promptlist reader */
.plwrap{width:min(1080px,94vw);display:flex;flex-direction:column;max-height:86vh}
.plhead{display:flex;align-items:center;gap:14px;padding:0 0 12px;border-bottom:1px solid var(--ln);flex:0 0 auto}
.plhead h2{margin:0;font:900 15px var(--disp),Inter,system-ui,sans-serif;letter-spacing:.14em}
.plbody{overflow-y:auto;padding:14px 2px 0;display:flex;flex-direction:column;gap:14px}
.plu{border:1px solid var(--ln);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.02)}
.plu.none{opacity:.55;border-style:dashed}
.pluh{display:flex;align-items:center;gap:12px;padding:9px 14px;background:rgba(255,255,255,.04);border-bottom:1px solid var(--ln)}
.pluh b{font-size:11.5px;letter-spacing:.06em}
.pluh span{font:800 12px Inter,system-ui,sans-serif}
.pluh i{font:600 10.5px ui-monospace,monospace;font-style:normal;opacity:.5;margin-left:auto}
.plup{margin:0;padding:14px 16px;white-space:pre-wrap;word-break:break-word;font:400 12px/1.65 ui-monospace,SFMono-Regular,monospace;color:var(--ink2);max-height:340px;overflow-y:auto}
.plu.none .plup{font-style:italic}
/* create the production — the last thing on the page */
.screate{display:flex;align-items:center;gap:20px;margin:18px 0 40px;padding:20px 24px;border-radius:20px;
  border:1px dashed rgba(255,255,255,.14);background:rgba(255,255,255,.02);transition:.25s}
.screate.ready{border-style:solid;border-color:color-mix(in srgb,var(--acc) 50%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 11%,transparent),color-mix(in srgb,var(--acc) 7%,transparent))}
.screate.done{border-style:solid;border-color:rgba(87,242,135,.45);background:rgba(87,242,135,.07)}
.screate .scrl{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.screate .scrl b{font:800 17px var(--disp),Inter,system-ui,sans-serif}
.screate .scrl span{font:500 11.5px Inter,system-ui,sans-serif;opacity:.55}
.screatego{flex:0 0 auto;padding:16px 34px;border-radius:14px;cursor:pointer;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);color:var(--ink2);font:900 13px var(--disp),Inter,system-ui,sans-serif;letter-spacing:.1em;transition:.2s}
.screatego.on{background:linear-gradient(135deg,var(--acc),var(--acc3));color:#fff;border-color:transparent;
  box-shadow:0 16px 36px -16px color-mix(in srgb,var(--acc) 95%,transparent)}
.screatego.on:hover{transform:translateY(-1px);box-shadow:0 20px 44px -16px color-mix(in srgb,var(--acc) 100%,transparent)}
.screatego[disabled]{opacity:.45;cursor:not-allowed}
.screate.done .screatego.on{background:linear-gradient(135deg,#2fd67a,var(--ok));box-shadow:0 16px 36px -16px rgba(87,242,135,.9)}
@media(max-width:760px){.screate{flex-direction:column;align-items:stretch}.screatego{width:100%}}

/* ================= v17.5 — the prompt sheet drawer, plain chat, Script done? ================= */
.psbtn{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:70;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:9px;padding:20px 11px;
  border:1px solid rgba(255,255,255,.12);border-left:none;border-radius:0 14px 14px 0;
  background:rgba(16,17,28,.94);backdrop-filter:blur(12px);color:var(--ink2);transition:.2s}
html.light .psbtn{background:rgba(250,250,255,.96)}
.psbtn:hover{background:color-mix(in srgb,var(--acc) 20%,transparent);border-color:color-mix(in srgb,var(--acc) 50%,transparent);color:#fff;padding-left:15px}
.psbtn span{writing-mode:vertical-rl;font:900 10px var(--disp),Inter,system-ui,sans-serif;letter-spacing:.22em}
.psbtn i{font-style:normal;font-size:13px;opacity:.65}
.psbtn b{font:800 9.5px ui-monospace,monospace;background:linear-gradient(135deg,var(--acc),var(--acc3));color:#fff;
  padding:2px 6px;border-radius:99px}
.psbtn.has{border-color:color-mix(in srgb,var(--acc) 40%,transparent)}
.psbtn.on{left:min(640px,52vw);border-radius:0 14px 14px 0}

.psdraw{position:fixed;left:0;top:0;bottom:0;width:min(640px,52vw);z-index:69;
  transform:translateX(-102%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;background:rgba(10,11,19,.98);backdrop-filter:blur(18px);
  border-right:1px solid rgba(255,255,255,.1);box-shadow:24px 0 60px -30px rgba(0,0,0,.95)}
html.light .psdraw{background:rgba(252,252,255,.99)}
.psdraw.on{transform:none}
.pshead{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--ln);flex:0 0 auto}
.pshead b{font:900 12px var(--disp),Inter,system-ui,sans-serif;letter-spacing:.18em}
.pshead span{font:600 10.5px Inter,system-ui,sans-serif;opacity:.55}
.pshead .pill{margin-left:0}
.pshead .pill:nth-of-type(1){margin-left:auto}
.psbody{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px}
.psu{border:1px solid var(--ln);border-radius:13px;overflow:hidden;background:rgba(255,255,255,.02)}
.psu.none{opacity:.5;border-style:dashed}
.psu.fresh{border-color:rgba(87,242,135,.6);box-shadow:0 0 0 1px rgba(87,242,135,.2)}
.psuh{display:flex;align-items:center;gap:10px;padding:8px 12px;background:rgba(255,255,255,.04);border-bottom:1px solid var(--ln)}
.psuh b{font-size:11px}.psuh span{font:800 11.5px Inter,system-ui,sans-serif;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.psuh i{font:600 10px ui-monospace,monospace;font-style:normal;opacity:.45;flex:0 0 auto}
.psu pre{margin:0;padding:12px 14px;white-space:pre-wrap;word-break:break-word;
  font:400 11.5px/1.62 ui-monospace,SFMono-Regular,monospace;color:var(--ink2);max-height:300px;overflow-y:auto}
.psempty{padding:40px 24px;text-align:center;display:flex;flex-direction:column;gap:10px}
.psempty b{font:800 15px var(--disp),Inter,system-ui,sans-serif}
.psempty span{font:500 12px/1.7 Inter,system-ui,sans-serif;opacity:.55}

/* the create bar leads with the question */
.scrq{font:900 9.5px var(--disp),Inter,system-ui,sans-serif;letter-spacing:.22em;opacity:.5;margin-bottom:2px}
.screate.ready .scrq{color:#a5adff;opacity:.9}
.screate.done .scrq{color:#8ef0ae;opacity:.9}

/* the story room is a conversation now */
.scpage .panel.chatpanel .chatempty{padding:26px 22px;display:flex;flex-direction:column;gap:9px}
.scpage .panel.chatpanel .chatempty b{font:800 14px var(--disp),Inter,system-ui,sans-serif}
.scpage .panel.chatpanel .chatempty span{font:500 12px/1.75 Inter,system-ui,sans-serif;opacity:.55}
.askrow .clearchat{margin-left:auto}
@media(max-width:820px){.psbtn.on{left:0;top:auto;bottom:0;transform:none;border-radius:14px 14px 0 0}
  .psdraw{width:100vw}}
.chkwait{display:flex;align-items:center;gap:10px;padding:10px 14px;margin-top:8px;border-radius:11px;
  background:color-mix(in srgb,var(--acc) 8%,transparent);border:1px solid color-mix(in srgb,var(--acc) 25%,transparent)}
.chkwait i{width:12px;height:12px;border-radius:50%;border:2px solid color-mix(in srgb,var(--acc) 35%,transparent);
  border-top-color:var(--acc);animation:procspin .8s linear infinite;flex:0 0 auto}
@keyframes procspin{to{transform:rotate(360deg)}}
.chkwait span{font:600 11px Inter,system-ui,sans-serif;opacity:.7}
/* pick one of the takes */
.optwrap{width:min(1040px,94vw)}
.optgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.optcard{border:1px solid var(--ln);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.02);transition:.2s}
.optcard:hover{border-color:color-mix(in srgb,var(--acc) 55%,transparent);transform:translateY(-2px)}
.optcard img{display:block;width:100%;height:auto;background:#0b0c14}
.optbar{display:flex;align-items:center;gap:10px;padding:9px 12px;border-top:1px solid var(--ln)}
.optbar b{font:800 10.5px var(--disp),Inter,system-ui,sans-serif;letter-spacing:.14em;opacity:.7}
.optbar .pill{margin-left:auto}
.optbtn{position:absolute;left:8px;bottom:8px;z-index:4}
.el{position:relative}

/* ================= v17.9 — custom style, tidied ================= */
.srhead{margin-bottom:12px}
.srhead b{display:block;font:900 11px var(--disp),Inter,system-ui,sans-serif;letter-spacing:.2em;margin-bottom:4px}
.srhead small{font:500 11.5px/1.6 Inter,system-ui,sans-serif;opacity:.5}
.srgrid{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.srthumb{position:relative;width:112px;height:74px;border-radius:10px;overflow:hidden;border:1px solid var(--ln)}
.srthumb img{width:100%;height:100%;object-fit:cover;display:block}
.srthumb i{position:absolute;top:4px;right:4px;width:18px;height:18px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-style:normal;font-size:10px;cursor:pointer;
  background:rgba(6,7,12,.8);color:#fff;opacity:0;transition:.15s}
.srthumb:hover i{opacity:1}
.sradd{width:112px;height:74px;border-radius:10px;border:1px dashed rgba(255,255,255,.2);background:transparent;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;color:var(--ink3)}
.sradd:hover{border-color:color-mix(in srgb,var(--acc) 60%,transparent);color:var(--ink2)}
.sradd em{font-style:normal;font-size:17px;line-height:1}
.sradd span{font:700 9px Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.srstat{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:11px;
  border:1px solid var(--ln);background:rgba(255,255,255,.02)}
.srstat.on{border-color:rgba(87,242,135,.3);background:rgba(87,242,135,.06)}
.srstat .srdot{width:7px;height:7px;border-radius:50%;background:var(--ink3);flex:0 0 auto}
.srstat.on .srdot{background:var(--ok)}
.srstat b{font:800 11.5px Inter,system-ui,sans-serif}
.srstat i{font:600 10.5px Inter,system-ui,sans-serif;font-style:normal;opacity:.5}
.srstat .pill{margin-left:auto}
.srmode{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.srm{font:600 10.5px Inter,system-ui,sans-serif;padding:5px 10px;border-radius:8px;
  background:rgba(255,255,255,.03);border:1px solid var(--ln);opacity:.75}
.srm code{font:600 10px ui-monospace,monospace;opacity:.9}
.srm.ok{color:#8ef0ae;border-color:rgba(87,242,135,.3);background:rgba(87,242,135,.07);opacity:1}
.srm.no{color:#ff9b9b;border-color:rgba(255,107,107,.35);background:rgba(255,107,107,.07);opacity:1}
.srm.warn{color:#ffd58a;border-color:rgba(255,193,110,.3);background:rgba(255,193,110,.07);opacity:1}
.srfold{margin-top:10px}
.srtog{background:none;border:none;cursor:pointer;padding:2px 0;color:var(--ink3);
  font:700 10px Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.srtog:hover{color:var(--ink2)}
.srfold textarea{width:100%;margin-top:8px;font:400 12px/1.65 Inter,system-ui,sans-serif}
.srfold .srrow{display:flex;gap:8px;margin-top:8px}
.srdraft{margin-bottom:10px;padding:8px 12px;border-radius:10px;background:rgba(255,193,110,.08);
  border:1px solid rgba(255,193,110,.25);font:600 11px Inter,system-ui,sans-serif}
/* image model picker */
.imgm{margin-top:18px;padding:16px 18px;border-radius:14px;border:1px solid var(--ln);background:rgba(255,255,255,.02)}
.imgm>b{display:block;font:900 10px var(--disp),Inter,system-ui,sans-serif;letter-spacing:.2em;margin-bottom:3px}
.imgm>span{display:block;font:500 11px Inter,system-ui,sans-serif;opacity:.5;margin-bottom:12px}
.imgmrow{display:flex;flex-wrap:wrap;gap:10px}
.imgmb{flex:1;min-width:190px;padding:12px 14px;border-radius:12px;cursor:pointer;text-align:left;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:var(--ink2);transition:.2s}
.imgmb:hover{border-color:color-mix(in srgb,var(--acc) 50%,transparent)}
.imgmb.on{border-color:transparent;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 90%,transparent),color-mix(in srgb,var(--acc) 85%,transparent));color:#fff;
  box-shadow:0 10px 26px -14px color-mix(in srgb,var(--acc) 95%,transparent)}
.imgmb i{display:block;font-style:normal;font:800 13px var(--disp),Inter,system-ui,sans-serif;margin-bottom:3px}
.imgmb small{display:block;font:600 9.5px ui-monospace,monospace;opacity:.6}
.imgmb.on small{opacity:.8}
.imgmnote{display:block;margin-top:11px;font:500 10.5px/1.6 Inter,system-ui,sans-serif;opacity:.45}

/* v18.1 — one line, not three boxes */
.srbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 13px;border-radius:11px;
  border:1px solid var(--ln);background:rgba(255,255,255,.02)}
.srbar.on{border-color:rgba(87,242,135,.3);background:rgba(87,242,135,.06)}
.srbar.bad{border-color:rgba(255,107,107,.4);background:rgba(255,107,107,.07)}
.srbar .srdot{width:7px;height:7px;border-radius:50%;background:var(--ink3);flex:0 0 auto}
.srbar.on .srdot{background:var(--ok)}
.srbar.bad .srdot{background:#ff6b6b}
.srbar b{font:800 11.5px Inter,system-ui,sans-serif}
.srbar code{font:600 10px ui-monospace,monospace;opacity:.6;padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.05)}
.srbar i{font:600 10.5px Inter,system-ui,sans-serif;font-style:normal;opacity:.5}
.srbar .sp{margin-left:auto}
.srbar .pill.warn{background:rgba(255,193,110,.16)!important;border-color:rgba(255,193,110,.45)!important;color:#ffd58a!important}
.srwarn{font:600 10.5px Inter,system-ui,sans-serif;font-style:normal;color:#ffd58a;opacity:.9}
.srmode{display:none}

/* v18.2 — the merge button points down at the screenplay it builds */
.askrow.centred{justify-content:center;align-items:center;gap:12px}
.askrow.centred .crumb{order:-1;opacity:.45}
#intBtn{font-size:13px!important;padding:12px 26px!important}
#intBtn .dn{display:inline-block;margin-left:6px;font-size:15px;line-height:1;transform:translateY(1px);animation:dnbob 1.8s ease-in-out infinite}
@keyframes dnbob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.scfinal.below{margin-top:14px;border-color:color-mix(in srgb,var(--acc) 28%,transparent)}
.scfinal.below .scfhead b{color:#cfd4ff}
/* a screenplay reads as a screenplay */
.scftext.screenplay{font:400 13px/1.62 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1px}

/* ================= v18.3 — script view, stale beats, start over ================= */
.scvwrap{width:min(1100px,94vw);display:flex;flex-direction:column;max-height:88vh}
.scvhead{display:flex;align-items:center;gap:10px;padding:0 0 12px;border-bottom:1px solid var(--ln);flex:0 0 auto}
.scvhead h2{margin:0;font:900 14px var(--disp),Inter,system-ui,sans-serif;letter-spacing:.16em}
.scvtext{flex:1;min-height:58vh;margin-top:14px;width:100%;resize:vertical;
  font:400 13.5px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1px;
  background:rgba(255,255,255,.02);border:1px solid var(--ln);border-radius:12px;padding:22px 26px;color:var(--ink)}
.scvbtn{margin-left:auto}
.scfhead .scvbtn+.scfjump{margin-left:8px}
.scftext[contenteditable]{outline:none;cursor:text;border-radius:8px;transition:background .15s}
.scftext[contenteditable]:focus{background:color-mix(in srgb,var(--acc) 5%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 25%,transparent)}
.bsstale{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;padding:10px 14px;border-radius:11px;
  background:rgba(255,193,110,.09);border:1px solid rgba(255,193,110,.3)}
.bsstale b{font:800 11.5px Inter,system-ui,sans-serif;color:#ffd58a}
.bsstale .pill{margin-left:0}
.intok{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.intok b{font:800 12.5px Inter,system-ui,sans-serif;color:#8ef0ae}
.intok span{font:500 11.5px Inter,system-ui,sans-serif;opacity:.6}
.intok code{font:600 10.5px ui-monospace,monospace;padding:3px 8px;border-radius:6px;
  background:rgba(255,255,255,.05);opacity:.8}
.intok i{font:600 10.5px Inter,system-ui,sans-serif;font-style:normal;color:#ffd58a;opacity:.85}
#sobtn{width:auto!important;min-width:0!important;padding-left:14px!important;padding-right:14px!important}
#sobtn{display:inline-flex!important;align-items:center;gap:6px;flex:0 0 auto;cursor:pointer;
  padding:6px 11px;border-radius:999px;white-space:nowrap;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--ink2);transition:.18s}
#sobtn:hover{border-color:rgba(255,107,107,.55);background:rgba(255,107,107,.12);color:#ff9b9b}
#sobtn i{font-style:normal;font-size:12px;line-height:1}
#sobtn i{font-size:13px}
.scstep{position:relative}
.scstep .soinline{position:absolute;right:0;top:50%;transform:translateY(-50%)}

/* ===== v18.4 — Integrate stands alone, right above the screenplay it writes ===== */
.scpage .panel.chatpanel .intgate{display:flex;flex-direction:column;align-items:center;gap:8px;
  margin:18px 0 6px;padding:14px 0 4px;position:relative}
.scpage .panel.chatpanel .intgate:before{content:'';position:absolute;left:12%;right:12%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line,var(--ln2)) 22%,var(--line,var(--ln2)) 78%,transparent)}
.scpage .panel.chatpanel .intgate .crumb{letter-spacing:.14em;text-transform:uppercase;font-size:10px;opacity:.62}
.scpage .panel.chatpanel .intgate #intBtn{font-size:15px;padding:12px 26px;border-radius:13px;font-weight:800}
.scpage .panel.chatpanel .intgate #intBtn .dn{display:inline-block;margin-left:6px;animation:intdn 1.4s ease-in-out infinite}
@keyframes intdn{0%,100%{transform:translateY(0);opacity:.75}50%{transform:translateY(4px);opacity:1}}
.scpage .panel.chatpanel .askrow.centred{justify-content:center}

/* ===== v18.5 — the process dock: what the console is doing, on the side, in full ===== */
#procbar{display:none !important}
#pdock{position:fixed;right:0;top:96px;width:314px;z-index:70;
  font:500 13px/1.45 var(--ui,ui-sans-serif,system-ui);
  transform:translateX(0);transition:transform .28s cubic-bezier(.4,0,.2,1)}
#pdock.shut{transform:translateX(302px)}
#pdock .pdtab{position:absolute;left:-1px;top:14px;transform:translateX(-100%);
  width:30px;height:44px;border:1px solid var(--line,var(--ln2));border-right:0;
  border-radius:11px 0 0 11px;background:var(--card,#12162a);color:var(--fg,#e8ecff);
  cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;opacity:.75}
#pdock .pdtab:hover{opacity:1}
#pdock .pdbody{border:1px solid var(--line,var(--ln2));border-right:0;border-radius:14px 0 0 14px;
  background:var(--card,#12162a);box-shadow:-14px 0 40px rgba(0,0,0,.34);
  padding:13px 14px 12px;backdrop-filter:blur(9px)}
#pdock .pdhead{display:flex;align-items:center;gap:8px;margin-bottom:9px}
#pdock .pdstate{font-size:10.5px;letter-spacing:.19em;font-weight:800;opacity:.72}
#pdock .pdclock{margin-left:auto;font-variant-numeric:tabular-nums;font-size:12px;opacity:.62}
#pdock .pddot{width:9px;height:9px;border-radius:50%;background:#4b5474;flex:0 0 auto}
#pdock[data-s="work"] .pddot{background:linear-gradient(120deg,var(--acc),#3ecfff,var(--acc));
  background-size:280% 280%;animation:pdrun 1.5s linear infinite;box-shadow:0 0 12px color-mix(in srgb,var(--acc) 75%,transparent)}
#pdock[data-s="ok"] .pddot{background:#35d39a;box-shadow:0 0 10px rgba(53,211,154,.55)}
#pdock[data-s="fail"] .pddot{background:#ff5f6d;box-shadow:0 0 10px rgba(255,95,109,.6)}
@keyframes pdrun{0%{background-position:0% 50%}100%{background-position:280% 50%}}
#pdock[data-s="work"] .pdbody{border-color:color-mix(in srgb,var(--acc) 50%,transparent)}
#pdock[data-s="fail"] .pdbody{border-color:rgba(255,95,109,.55)}
#pdock .pdnow{font-size:15px;font-weight:700;line-height:1.3;margin-bottom:8px}
#pdock .pdwait{font-size:12.5px;line-height:1.5;opacity:.86;padding:9px 10px;border-radius:9px;
  background:color-mix(in srgb,var(--acc) 12%,transparent);border:1px solid color-mix(in srgb,var(--acc) 28%,transparent);margin-bottom:10px}
#pdock .pderr{display:none;font-size:12.5px;line-height:1.5;padding:10px 11px;border-radius:9px;
  background:rgba(255,95,109,.13);border:1px solid rgba(255,95,109,.42);margin-bottom:10px}
#pdock .pderr b{display:block;font-size:13.5px;margin-bottom:5px;color:#ff8f98}
#pdock .pderr span{display:block;opacity:.9}
#pdock .pderr i{display:block;margin-top:7px;font-style:normal;opacity:.82;
  padding-top:7px;border-top:1px solid rgba(255,95,109,.28)}
#pdock .pderr .pill{margin-top:9px}
#pdock .pdlog{max-height:212px;overflow:auto;border-top:1px solid var(--line,var(--ln2));padding-top:8px}
#pdock .pdrow{display:flex;gap:7px;align-items:baseline;padding:4px 0;font-size:11.5px;opacity:.8}
#pdock .pdrow b{flex:0 0 auto;font-weight:700}
#pdock .pdrow span{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.72}
#pdock .pdrow i{flex:0 0 auto;font-style:normal;opacity:.5;font-variant-numeric:tabular-nums}
#pdock .pdrow.fail b{color:#ff8f98}
#pdock .pdrow.ok b{color:#35d39a}
@media(max-width:1100px){#pdock{display:none}}

/* ===== v18.5 — Fast / Deep ===== */
.tierchip{display:inline-flex;align-items:center;gap:5px;margin-top:9px;
  padding:3px 4px 3px 10px;border:1px solid var(--line,var(--ln2));border-radius:999px;background:rgba(255,255,255,.03)}
.tierchip>span{font-size:9.5px;letter-spacing:.17em;font-weight:800;opacity:.5}
.tierchip .tc{border:0;background:transparent;color:inherit;cursor:pointer;
  padding:4px 11px;border-radius:999px;font-size:12px;font-weight:700;opacity:.55}
.tierchip .tc.on{background:var(--ac,var(--acc));color:#fff;opacity:1}

/* ===== v18.5 — a failed merge is impossible to miss ===== */
.intfail{border:1px solid rgba(255,95,109,.5);background:rgba(255,95,109,.1);
  border-radius:13px;padding:15px 16px;margin:10px 0}
.intfail .ifhead{font-size:16px;font-weight:800;color:#ff8f98;margin-bottom:7px}
.intfail .ifmsg{font-size:13.5px;line-height:1.55;opacity:.92}
.intfail .ifhint{margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,95,109,.3);
  font-size:13px;line-height:1.55;opacity:.88}
.intfail .ifrow{display:flex;align-items:center;gap:11px;margin-top:12px}

/* ===== v18.8 — the console asks its own questions ===== */
.cmask h2{margin:0 0 10px;font-size:19px;line-height:1.25}
.cmask .cmaskb{font-size:13.5px;line-height:1.6;opacity:.9}
.cmask .cmaskb p{margin:9px 0 0}
.cmask .cmasklist{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 4px}
.cmask .cmasklist span{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;
  background:rgba(255,255,255,.06);border:1px solid var(--line,var(--ln2))}
.cmask .cmaskcost{margin-top:12px;padding:9px 12px;border-radius:9px;font-size:13px;font-weight:700;
  background:color-mix(in srgb,var(--acc) 13%,transparent);border:1px solid color-mix(in srgb,var(--acc) 30%,transparent)}
.cmask .cmaskd{margin-top:12px;font-size:13px;opacity:.9}
.cmask .cmaski{width:100%;margin-top:8px}
.cmask .cmaskrow{display:flex;gap:9px;justify-content:flex-end;margin-top:16px}

/* ===== v19.2 — header furniture ===== */
#pdock.inhdr{position:static;width:auto;top:auto;right:auto;transform:none;margin-left:10px;
  display:flex;align-items:center}
#pdock.inhdr .pdtab{position:static;transform:none;width:auto;height:28px;padding:0 10px;
  border:1px solid var(--line,var(--ln2));border-radius:9px;gap:6px;font-size:11px;font-weight:700;
  letter-spacing:.06em;white-space:nowrap}
#pdock.inhdr .pdtab:after{content:'LOG';opacity:.8}
#pdock.inhdr[data-s="work"] .pdtab{border-color:color-mix(in srgb,var(--acc) 60%,transparent);
  background:linear-gradient(120deg,color-mix(in srgb,var(--acc) 22%,transparent),rgba(62,207,255,.18));opacity:1}
#pdock.inhdr[data-s="work"] .pdtab:after{content:'WORKING'}
#pdock.inhdr[data-s="fail"] .pdtab{border-color:rgba(255,95,109,.65);background:rgba(255,95,109,.16)}
#pdock.inhdr[data-s="fail"] .pdtab:after{content:'STOPPED'}
#pdock.inhdr .pdbody{position:absolute;top:52px;left:10px;width:340px;border:1px solid var(--line,var(--ln2));
  border-radius:14px;z-index:90}
#pdock.inhdr.shut .pdbody{display:none}
#pdock.inhdr.shut{transform:none}

#draftb{margin-left:10px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  opacity:0;transition:opacity .3s;white-space:nowrap;font-weight:700}
#draftb[data-s="saving"]{opacity:.5}
#draftb[data-s="saved"]{opacity:.75;color:#35d39a}
#draftb[data-s="local"]{opacity:.7;color:#e8b23a}
#draftb[data-s="idle"]{opacity:0}
#soundo{margin-left:10px}

#epchip{display:inline-flex;align-items:center;gap:7px;margin-right:12px;padding:6px 13px;
  border:1px solid var(--line,var(--ln2));border-radius:999px;background:rgba(255,255,255,.04);
  max-width:280px;overflow:hidden}
#epchip i{font-style:normal;opacity:.5;font-size:11px}
#epchip b{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tierchip{display:none !important}

/* ===== v19.3 — five cards, one headline each ===== */
.scpage .panel.sccard{border:1px solid var(--line,var(--ln2));border-radius:20px;
  padding:26px 28px 24px;margin:18px auto 26px;max-width:1000px;background:rgba(255,255,255,.018)}
.scpage .panel.sccard > .schead{margin:0 0 20px;text-align:center}
.scpage .sccard .scnum{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;margin-bottom:12px;
  background:linear-gradient(135deg,var(--acc),var(--acc3));color:#fff;font-weight:800;font-size:15px}
.scpage .sccard .schead h2{margin:0 0 7px;font-size:clamp(19px,2.1vw,27px);line-height:1.16;
  font-weight:800;letter-spacing:-.01em}
.scpage .sccard .schead p{margin:0 auto;max-width:60ch;font-size:13.5px;line-height:1.55;opacity:.62}

/* the drawer handle you actually hit */
.psbtn.big{width:44px !important;padding:22px 0 !important}
.psbtn.big span{font-size:11.5px !important;letter-spacing:.16em !important;font-weight:800 !important}
.psbtn.big i{font-size:15px !important}
.psbtn.big b{font-size:11px !important}

/* Integrate: the button that carries the whole page */
.scpage .panel.chatpanel .intgate #intBtn{
  font-size:17px;padding:16px 40px;border-radius:15px;font-weight:800;letter-spacing:.01em;
  background:linear-gradient(120deg,var(--acc),var(--acc3) 55%,#3ecfff);border:0;color:#fff;
  box-shadow:0 10px 30px color-mix(in srgb,var(--acc) 34%,transparent)}
.scpage .panel.chatpanel .intgate #intBtn:hover{filter:brightness(1.08)}
.scpage .panel.chatpanel .intgate #intBtn:disabled{opacity:.55;box-shadow:none}

/* ===== v19.3 — the writer panel: instructions left, changes below ===== */
.scpage .askbig.withside{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}
.scpage .askbig.withside .askhint,
.scpage .askbig.withside #askbigt,
.scpage .askbig.withside .askrow,
.scpage .askbig.withside .scnotes{grid-column:1}
.scpage .askbig.withside .askside{grid-column:2;grid-row:1 / span 4;align-self:stretch;
  border:1px solid var(--line,var(--ln2));border-radius:14px;padding:16px 17px;
  background:rgba(255,255,255,.025)}
.askside h4{margin:0 0 11px;font-size:10.5px;letter-spacing:.17em;opacity:.55;font-weight:800}
.askside ol{margin:0;padding-left:19px;font-size:12.8px;line-height:1.75;opacity:.85}
.askside ol li{margin-bottom:5px}
.askside #sugbtn{width:100%;margin-top:14px;padding:11px 14px;font-weight:700;
  background:linear-gradient(120deg,var(--acc),var(--acc3));border:0;color:#fff}
.askside .askhint2{display:block;margin-top:9px;font-size:11.5px;line-height:1.5;opacity:.55}
@media(max-width:1200px){.scpage .askbig.withside{grid-template-columns:1fr}
  .scpage .askbig.withside .askside{grid-column:1;grid-row:auto}}

.scnotes{margin-top:14px}
.scnotes.on{padding-top:14px;border-top:1px solid var(--line,var(--ln2))}
.snhead{display:flex;align-items:center;gap:9px;font-size:10.5px;letter-spacing:.16em;
  font-weight:800;opacity:.6;margin-bottom:10px}
.snhead span{background:var(--ac,var(--acc));color:#fff;border-radius:999px;padding:1px 8px;
  font-size:10.5px;letter-spacing:0}
.snhead button{margin-left:auto}
.snote{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;margin-bottom:7px;
  border:1px solid var(--line,var(--ln2));border-radius:11px;background:rgba(255,255,255,.035)}
.snote span{flex:1 1 auto;font-size:13.2px;line-height:1.5}
.snote i{flex:0 0 auto;font-style:normal;font-size:11px;opacity:.5;padding-top:2px;max-width:170px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snx{flex:0 0 auto;border:0;background:transparent;color:inherit;opacity:.4;cursor:pointer;
  font-size:19px;line-height:1;padding:0 2px}
.snx:hover{opacity:1;color:#ff8f98}

/* ===== suggestions ===== */
.sugwrap .sughead{margin-bottom:16px}
.sugwrap .sughead h2{margin:0 0 5px;font-size:20px;letter-spacing:-.01em}
.suglist{display:grid;gap:10px;max-height:58vh;overflow:auto;padding-right:4px}
.sugcard{display:block;width:100%;text-align:left;cursor:pointer;color:inherit;
  border:1px solid var(--line,var(--ln2));border-radius:13px;padding:14px 16px;
  background:rgba(255,255,255,.03);transition:border-color .15s,transform .1s}
.sugcard:hover{border-color:color-mix(in srgb,var(--acc) 60%,transparent);transform:translateY(-1px)}
.sugcard.picked{opacity:.45;border-color:#35d39a}
.sugcard.picked:after{content:' ✓ added';color:#35d39a;font-size:11.5px;font-weight:700}
.sugkind{display:inline-block;font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  opacity:.55;font-weight:800;margin-bottom:6px}
.sugcard b{display:block;font-size:15px;margin-bottom:5px}
.sugnote{display:block;font-size:13px;line-height:1.55;opacity:.86}
.sugcard i{display:block;margin-top:7px;font-style:normal;font-size:11.5px;opacity:.5}
.sugfoot{display:flex;justify-content:flex-end;margin-top:14px}

/* ===== v19.3 — folding acts ===== */
#bs .acthead.fold{display:flex;align-items:center;gap:9px;padding:11px 13px;margin:14px 0 0;
  border:1px solid var(--line,var(--ln2));border-radius:12px;background:rgba(255,255,255,.035);
  user-select:none}
#bs .acthead.fold:hover{border-color:color-mix(in srgb,var(--acc) 50%,transparent)}
#bs .acthead .actcar{font-style:normal;opacity:.55;transition:transform .18s;flex:0 0 auto}
#bs .acthead .actcar:before{content:'▸'}
#bs .acthead.open .actcar{transform:rotate(90deg)}
#bs .acthead.fold + table.units{margin-top:8px}
#bs td.bsbeat{font-size:12.8px;line-height:1.5;opacity:.82;white-space:normal}
.scpage .scbox.sccard{border:1px solid var(--line,var(--ln2));border-radius:20px;
  padding:26px 28px 24px;margin:0 0 22px;background:rgba(255,255,255,.018)}
.scpage .scbox.sccard > .schead{margin:0 0 20px;text-align:center}
.scpage .panel.scwrap{border:0;background:transparent;padding:0;
  max-width:1000px;margin-left:auto;margin-right:auto}
.scpage .panel.scwrap > .scbox.sccard:last-child{margin-bottom:0}

/* ===== v19.4 — Elements: a column, not edge to edge ===== */
.elpage .grid,.elpage h2.act,.elpage .panel,.elpage .ephead,.elpage .cathead,
.elpage .boardhead,.elpage .progress{max-width:1360px;margin-left:auto;margin-right:auto}
.elpage{padding-left:26px;padding-right:26px}
.elpage h2.act.elhead{margin:34px auto 14px;font-size:clamp(17px,1.7vw,22px);letter-spacing:-.005em}
.elpage h2.act.elhead .beat{font-size:11px;opacity:.55;margin-left:9px}
.elpage .grid{gap:16px}
.impbtn{margin-left:6px}

/* ===== import from another production ===== */
.impwrap .imphead{margin-bottom:14px}
.impwrap .imphead h2{margin:0 0 4px;font-size:20px}
.impq{width:100%;margin-bottom:14px}
.implist{max-height:60vh;overflow:auto;padding-right:4px}
.impep{margin-bottom:20px}
.impep h4{margin:0 0 10px;font-size:11px;letter-spacing:.15em;opacity:.6;font-weight:800}
.impep h4 span{opacity:.5;margin-left:6px}
.impgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:11px}
.impcard{display:block;cursor:pointer;color:inherit;text-align:left;padding:0;overflow:hidden;
  border:1px solid var(--line,var(--ln2));border-radius:12px;background:rgba(255,255,255,.03)}
.impcard:hover{border-color:color-mix(in srgb,var(--acc) 65%,transparent)}
.impcard img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#0b0e18}
.impcard b{display:block;padding:8px 10px 2px;font-size:12.5px}
.impcard span{display:block;padding:0 10px 9px;font-size:10.5px;opacity:.5}
.impfoot{display:flex;justify-content:flex-end;margin-top:12px}

/* ===== v19.5 ===== */
.edside .readout.pinned{position:absolute !important;left:22px !important;top:50% !important;
  transform:translateY(-50%) !important;right:auto !important;bottom:auto !important;
  transition:none !important;pointer-events:none;text-align:left;max-width:210px}

/* ===== v19.6 — audio lanes, roles, selection, menu ===== */
:root{--lane-h:58px}
#atracks{position:relative}
#atracks .track.a{position:relative;height:var(--lane-h);border-bottom:1px solid var(--line,var(--ln2));
  background:rgba(78,163,255,.045)}
.aclip{position:absolute;top:5px;bottom:5px;border-radius:9px;overflow:hidden;cursor:grab;
  border:1px solid color-mix(in srgb,var(--rc,#4ea3ff) 55%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--rc,#4ea3ff) 26%,transparent),
    color-mix(in srgb,var(--rc,#4ea3ff) 12%,transparent));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.aclip.on{border-color:var(--rc,#4ea3ff);box-shadow:0 0 0 2px color-mix(in srgb,var(--rc,#4ea3ff) 45%,transparent)}
.aclip b{position:absolute;left:9px;top:6px;font-size:10.5px;font-weight:700;opacity:.85;
  pointer-events:none;white-space:nowrap}
.aclip .x{position:absolute;right:5px;top:4px;font-size:11px;opacity:0;cursor:pointer;font-style:normal}
.aclip:hover .x{opacity:.6}
.aclip .x:hover{opacity:1;color:#ff8f98}
.aclip .fade{position:absolute;top:0;bottom:0;cursor:ew-resize;
  background:linear-gradient(90deg,rgba(0,0,0,.62),transparent)}
.aclip .fade.in{left:0}
.aclip .fade.out{right:0;background:linear-gradient(270deg,rgba(0,0,0,.62),transparent)}
.aclip .fade:after{content:'';position:absolute;top:0;bottom:0;width:2px;background:rgba(255,255,255,.5)}
.aclip .fade.in:after{right:0}
.aclip .fade.out:after{left:0}

/* video clips carry their role colour and show when their sound has been lifted */
.tclip{border-left:3px solid var(--rc,var(--acc))}
.tclip.hasaud{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 6px,transparent 6px 12px)}
.tclip.hasaud:after{content:'♪ lifted';position:absolute;right:7px;bottom:5px;font-size:9.5px;opacity:.5}
.tclip.msel{outline:2px solid var(--ac,var(--acc));outline-offset:-2px}
#vtracks .track{height:var(--lane-h)}

/* ===== the console's own right-click menu ===== */
.edmenu{position:fixed;z-index:9999;min-width:236px;padding:6px;border-radius:13px;
  border:1px solid var(--line,var(--ln2));background:var(--card,#12162a);
  box-shadow:0 22px 60px rgba(0,0,0,.55);font-size:13px}
.edmenu .edrow{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;
  border-radius:9px;background:transparent;color:inherit;cursor:pointer;text-align:left;font-size:13px}
.edmenu .edrow:hover{background:rgba(255,255,255,.07)}
.edmenu .edrow i{font-style:normal;opacity:.6;width:15px;flex:0 0 auto;display:inline-flex;
  align-items:center;justify-content:center;border-radius:3px}
.edmenu .edrow em{margin-left:auto;font-style:normal;opacity:.4}
.edmenu .edsep{height:1px;margin:5px 8px;background:var(--line,var(--ln2))}
.edmenu .edsub{position:relative}
.edmenu .edsub:hover .edsubm{display:block}
.edmenu .edsubm{display:none;position:absolute;left:100%;top:-6px;min-width:170px;padding:6px;
  border-radius:13px;border:1px solid var(--line,var(--ln2));background:var(--card,#12162a);
  box-shadow:0 22px 60px rgba(0,0,0,.55)}
.edmenu .edsubm .edrow i{width:11px;height:11px;border-radius:3px;opacity:1}

/* ===== v19.7 — SCORE ===== */
.scorepage{padding:0}
.scorepage .schead{display:flex;align-items:center;gap:16px;padding:16px 26px;
  border-bottom:1px solid var(--line,var(--ln2))}
.scorepage .sctitle{display:flex;align-items:baseline;gap:12px}
.scorepage .sctitle h2{margin:0;font-size:19px;letter-spacing:.06em}
.scorepage .scacts{margin-left:auto;display:flex;gap:9px}
.scorepage .scbody{display:grid;grid-template-columns:390px 1fr;gap:0;height:calc(100vh - 132px)}
.scorepage .scleft{border-right:1px solid var(--line,var(--ln2));overflow:auto;padding:16px}
.scorepage .scright{display:flex;flex-direction:column;overflow:hidden}

.scmon{border:1px solid var(--line,var(--ln2));border-radius:14px;overflow:hidden;margin-bottom:16px}
.scmon video{width:100%;aspect-ratio:16/9;background:#000;display:block}
.scmonbar{display:flex;align-items:center;gap:10px;padding:9px 11px;background:rgba(255,255,255,.03)}
.scmonbar .lcd{font-size:12.5px}

/* Suno studio */
.studio{border:1px solid rgba(200,109,215,.35);border-radius:16px;padding:16px 17px;
  background:linear-gradient(165deg,rgba(200,109,215,.10),color-mix(in srgb,var(--acc) 5%,transparent) 55%,transparent)}
.sthead{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.stlogo{width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;
  justify-content:center;background:linear-gradient(135deg,var(--acc3),var(--acc));color:#fff;font-size:14px}
.sthead b{font-size:12px;letter-spacing:.16em}
.sthead .crumb{margin-left:auto;font-size:10.5px}
.stf{display:block;margin-bottom:11px}
.stf small{display:block;font-size:9.5px;letter-spacing:.15em;opacity:.5;margin-bottom:5px;font-weight:800}
.stf textarea,.stf input,.stf select{width:100%}
.strow{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.stchk{display:flex;align-items:center;gap:8px;font-size:13px;margin:4px 0 12px;cursor:pointer}
.stacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.stacts .pill.big{flex:1;padding:12px 16px;font-weight:800;
  background:linear-gradient(120deg,var(--acc3),var(--acc));border:0;color:#fff}
.stnote{margin-top:10px;font-size:11.5px;line-height:1.5;opacity:.55}

/* the score timeline */
.sctl{position:relative;flex:1;overflow:auto;padding:0 0 10px}
.scruler{position:relative;height:26px;border-bottom:1px solid var(--line,var(--ln2));
  position:sticky;top:0;background:var(--bg,#0b0e18);z-index:3}
.scruler span{position:absolute;top:7px;font-size:10px;opacity:.45;font-variant-numeric:tabular-nums}
.scph{position:absolute;top:26px;bottom:0;width:2px;background:#ff5f6d;z-index:5;pointer-events:none}
.sclanes{position:relative}
.sclane{position:relative;height:56px;border-bottom:1px solid var(--line,var(--ln2))}
.sclane.v{background:color-mix(in srgb,var(--acc) 5%,transparent)}
.sclane.m{background:rgba(200,109,215,.06);height:64px}
.scname{position:absolute;left:8px;top:6px;font-size:9.5px;letter-spacing:.14em;opacity:.4;
  font-weight:800;z-index:2;pointer-events:none}
.sccl{position:absolute;top:8px;bottom:8px;border-radius:8px;cursor:pointer;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--acc) 50%,transparent);background:color-mix(in srgb,var(--acc) 20%,transparent)}
.sccl:hover{background:color-mix(in srgb,var(--acc) 32%,transparent)}
.sccl b{position:absolute;left:8px;top:6px;font-size:10.5px;opacity:.85;white-space:nowrap}
.sccue{position:absolute;top:8px;bottom:8px;border-radius:9px;cursor:grab;overflow:hidden;
  border:1px solid rgba(200,109,215,.6);
  background:linear-gradient(180deg,rgba(200,109,215,.32),rgba(200,109,215,.16))}
.sccue.on{box-shadow:0 0 0 2px rgba(200,109,215,.7)}
.sccue.submitted{border-style:dashed;opacity:.75}
.sccue.fail{border-color:rgba(255,95,109,.7);background:rgba(255,95,109,.18)}
.sccue b{position:absolute;left:9px;top:7px;font-size:11px;white-space:nowrap;pointer-events:none}
.sccue span{position:absolute;left:9px;bottom:6px;font-size:9.5px;opacity:.6;white-space:nowrap;
  pointer-events:none}
.scaddm{padding:11px;text-align:center;font-size:11.5px;opacity:.45;cursor:pointer;
  border-bottom:1px solid var(--line,var(--ln2))}
.scaddm:hover{opacity:.9;background:rgba(255,255,255,.03)}
.sczoom{display:flex;align-items:center;gap:11px;padding:9px 16px;
  border-top:1px solid var(--line,var(--ln2))}
.sczoom input[type=range]{flex:1;max-width:260px}
.mdoor{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:10.5px;
  opacity:.45;pointer-events:none}
@media(max-width:1240px){.scorepage .scbody{grid-template-columns:1fr;height:auto}
  .scorepage .scleft{border-right:0;border-bottom:1px solid var(--line,var(--ln2))}}

/* ===== v19.8 — Generation page ===== */
.gnbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;position:sticky;top:0;z-index:24;
  background:linear-gradient(180deg,var(--bg) 70%,transparent);padding:12px 2px 14px;margin:0 0 6px}
.gnstat{display:flex;flex-direction:column;line-height:1.05;padding:4px 12px 4px 0;border-right:1px solid var(--line)}
.gnstat b{font-size:20px;font-weight:800}
.gnstat span{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;opacity:.55}
.gnstat.g b{color:var(--g)} .gnstat.y b{color:var(--y)}
.gnbar .pill.off{opacity:.4}
.gnsechead{font-size:11px;letter-spacing:2.6px;font-weight:800;opacity:.5;margin:26px 0 10px}
.gnscript,.gnwriter{padding:14px 16px;margin-bottom:12px}
.gnfold{display:flex;gap:8px;align-items:center;cursor:pointer;user-select:none}
.gnfold b{font-size:11px;letter-spacing:2.2px}
.gnscrbody{margin-top:10px;max-height:46vh;overflow:auto;border-top:1px solid var(--line);padding-top:10px}
.gnscrbody pre{white-space:pre-wrap;font-size:13px;line-height:1.55;margin:0}
.gnwriter>b{font-size:11px;letter-spacing:2.2px}
.crumb.block{display:block;margin:4px 0 8px}
.gnwriter textarea{width:100%;font-size:14px;line-height:1.5}
#gnwout .gnrw{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0}
#gnwout .gnrw.err{border-color:var(--r)}
#gnwout textarea{width:100%;margin-top:6px}
.acthead.gnact{display:flex;gap:8px;align-items:center}
.acthead.gnact .pill.sm{padding:3px 10px;font-size:11px}
.gnrows{display:flex;flex-direction:column;gap:8px;margin:8px 0 18px}
.gnrow{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;background:var(--card);transition:border-color .15s}
.gnrow:hover{border-color:var(--tint)}
.gnrow.done{border-left:3px solid var(--g)}
.gnrow.running{border-left:3px solid var(--y)}
.gnrow.failed{border-left:3px solid var(--r)}
.gnrow.todo{border-left:3px solid var(--line)}
.gnck{flex:0 0 auto;padding-top:2px}
.gnck input{width:16px;height:16px;cursor:pointer}
.gnmain{flex:1;min-width:0}
.gnhead{display:flex;gap:8px;align-items:center;cursor:pointer;user-select:none;flex-wrap:wrap}
.gnnum{font:700 11px/1 ui-monospace,monospace;opacity:.45;min-width:20px}
.gntitle{opacity:.8;font-size:13px}
.gnprompt{margin-top:8px;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;
  max-height:210px;overflow:auto;background:rgba(127,127,127,.07);border-radius:9px;padding:10px 12px;cursor:copy}
.gnacts{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;align-items:stretch}
.gnacts .pill.sm{padding:4px 12px;font-size:11px;white-space:nowrap}
.gngrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:12px;margin:10px 0 20px}
.gncard{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#0c0c0e;
  aspect-ratio:16/10;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end}
.gncard:hover{border-color:var(--tint)}
.gncard video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gncard .b{position:relative;z-index:2;display:flex;gap:6px;align-items:center;padding:6px 8px;
  background:linear-gradient(0deg,rgba(0,0,0,.82),transparent);font-size:11px}
.gncard .b .num{font-weight:800;opacity:.7}
.gncard .b .mono{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gncard .segtag{position:absolute;top:6px;left:6px;z-index:2;font-size:9px;letter-spacing:1px;
  background:rgba(0,0,0,.7);border-radius:6px;padding:2px 6px}
.gncard .qcb.corner{position:absolute;top:6px;right:6px;z-index:2}
.gnwait{position:absolute;inset:0;display:flex;gap:8px;align-items:center;justify-content:center;
  font-size:12px;opacity:.55;letter-spacing:.4px}
.gnwait.r{color:var(--r);opacity:.9}
.gncard.empty{background:repeating-linear-gradient(135deg,rgba(127,127,127,.05) 0 8px,transparent 8px 16px)}
.gncard.empty:hover .gnwait{opacity:1;color:var(--tint)}
.gncard.run{border-color:var(--y)}
.gnspin{width:12px;height:12px;border:2px solid var(--y);border-top-color:transparent;border-radius:50%;
  animation:gnspin .8s linear infinite;display:inline-block}
@keyframes gnspin{to{transform:rotate(360deg)}}

/* ===== v19.9 — Edit: the lanes actually collapse ===== */
/* The shot lanes (.score) live inside .pcol, not directly under .stageC — the old
   `.stageC>.score` rule matched nothing, so SHOT LANES toggled a class and nothing moved. */
.edstage.noscore .pcol>.score{display:none}
.edstage.noscore .lanesbar{opacity:.6}
.lanesbar{cursor:pointer}
.lanesbar:hover{opacity:1}
/* the notes lane was 7px — findable only by accident. 15px, labelled, and the whole
   strip is a hit target whether it is open or shut. */
.track.notes{height:15px;margin:0 0 5px;transition:height .12s}
.track.notes:hover{background:rgba(255,213,106,.26)}
.track.notes .nspan{top:3px;height:9px}
.thead.notes{height:15px;overflow:hidden;padding:0 8px;justify-content:flex-start;align-items:center;
  cursor:pointer;gap:5px;display:flex}
.thead.notes b{font-size:9px;letter-spacing:1.2px;color:var(--warn);line-height:1}
.thead.notes .crumb{display:none}
.thead.notes:hover{background:rgba(255,213,106,.2)}
.thead.notes .nchev{font-size:8px;color:var(--warn);opacity:.8}
.thead.notes.nopen{height:30px}
.thead.notes.nopen .crumb{display:inline;font-size:9px}

/* ===== v20.0 — plain words ===== */
.plainmore{margin-left:6px;font-size:11px;letter-spacing:.4px;opacity:.6;cursor:pointer;
  border-bottom:1px dotted currentColor;padding-bottom:1px}
.plainmore:hover{opacity:1;color:var(--tint)}
#plainb{font-size:11px;padding:4px 10px}

/* ===== v20.1 — the tab rail with eight stages =====
   The rail is a fixed-width absolutely-positioned strip sized when there were seven
   stages. Score made eight, each box dropped to ~88 px, and GENERATIONS (109 px at
   12/900 uppercase with .1em tracking) simply ran out of its box and over its neighbour.
   Nothing clipped it because the boxes were overflow:visible. Labels now stay on one
   line inside their box, and the type scales with the rail instead of being fixed. */
.tabs .stage{overflow:hidden;padding:12px 6px!important}
.tabs .stage .t{white-space:nowrap;overflow:hidden;text-overflow:clip;max-width:100%;
  font-size:clamp(8.6px,.66vw,12px);letter-spacing:.05em}
#tabs.nt8 .stage .t{font-size:clamp(8.2px,.6vw,11px);letter-spacing:.035em}
#tabs.nt7 .stage .t{font-size:clamp(8.8px,.68vw,12px);letter-spacing:.05em}
/* give the rail the room the header actually has, without crowding the pills either side */
.tabs{width:min(1000px,max(768px,calc(100vw - 780px)))}
@media(min-width:1600px){.tabs{width:min(1120px,calc(100vw - 760px))}}

/* ===== v20.2 — saved custom styles ===== */
.sprwrap{margin:0 0 16px;padding:0 0 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.sprhead{display:flex;align-items:baseline;gap:10px;margin-bottom:9px;flex-wrap:wrap}
.sprhead b{font:900 10px Inter,system-ui,sans-serif;letter-spacing:2.4px}
.sprrow{display:flex;gap:10px;flex-wrap:wrap}
.sprcard{position:relative;display:flex;flex-direction:column;gap:4px;align-items:flex-start;
  width:168px;padding:8px 9px 9px;border-radius:12px;cursor:pointer;text-align:left;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.1);transition:border-color .15s,transform .12s}
.sprcard:hover{border-color:var(--tint);transform:translateY(-1px)}
.sprcard b{font:800 12px Inter,system-ui,sans-serif;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.sprcard small{font:600 9.5px Inter,system-ui,sans-serif;opacity:.5}
.sprthumbs{display:flex;gap:3px;width:100%;height:46px;border-radius:7px;overflow:hidden;background:#0c0d14}
.sprthumbs img{flex:1;min-width:0;height:100%;object-fit:cover;display:block}
.sprx{position:absolute;right:5px;top:5px;width:18px;height:18px;line-height:16px;text-align:center;
  border-radius:50%;font-size:10px;font-style:normal;background:rgba(0,0,0,.62);opacity:0;transition:opacity .12s}
.sprcard:hover .sprx{opacity:.75}
.sprx:hover{opacity:1;background:var(--r,#c0392b)}
.sprcard.new{align-items:center;justify-content:center;border-style:dashed;text-align:center;gap:2px}
.sprcard.new b{font-size:11.5px}
.sprplus{font-size:22px;line-height:1;opacity:.6}
.sradd.big{width:110px;height:62px;font-size:11px;letter-spacing:1.6px;font-weight:800}
.sradd.big em{font-size:20px}

/* ===== v20.3 — element library as a two-pane room ===== */
.ellib{border:1px solid var(--line,rgba(255,255,255,.09));border-radius:18px;overflow:hidden;background:var(--card)}
.ellibhead{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line,rgba(255,255,255,.09));flex-wrap:wrap}
.ellibhead b{font:900 10.5px Inter,system-ui,sans-serif;letter-spacing:2.6px}
.elibq{width:190px;padding:6px 11px;border-radius:9px;font-size:12px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.ellibhead .pill.sm{padding:5px 12px;font-size:11.5px}
.ellibbody{display:grid;grid-template-columns:236px 1fr;min-height:320px}
.elibrail{border-right:1px solid var(--line,rgba(255,255,255,.09));padding:10px;
  display:flex;flex-direction:column;gap:3px;max-height:70vh;overflow:auto}
.elibitem{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;
  padding:9px 11px;border-radius:10px;cursor:pointer;background:transparent;border:1px solid transparent;width:100%}
.elibitem b{font:800 12.5px Inter,system-ui,sans-serif;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.elibitem span{font:600 10px Inter,system-ui,sans-serif;opacity:.5}
.elibitem:hover{background:rgba(255,255,255,.045)}
.elibitem.on{background:color-mix(in srgb,var(--acc) 16%,transparent);border-color:color-mix(in srgb,var(--acc) 50%,transparent)}
.elibitem.mine b::after{content:'●';margin-left:6px;font-size:8px;color:var(--g,#8ef0ae);vertical-align:middle}
.elibpane{padding:14px 16px 18px;max-height:70vh;overflow:auto}
.elibpane .cathead:first-child{margin-top:0}
@media(max-width:980px){.ellibbody{grid-template-columns:1fr}
  .elibrail{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line,rgba(255,255,255,.09));max-height:none}
  .elibitem{width:auto;flex:0 0 auto}}

/* ===== v20.4 — header right-hand cell ===== */
.top>.hdrgt{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:8px;min-width:0}
.top>.hdrgt>#epchip{margin-right:0}
.top>.hdrgt>.pill{flex:0 0 auto}

/* ===== v20.5 — the emotion word stops moving the wheel ===== */
/* .eistate sat in flow under the circle, so its own width — "Sad" vs "Anticipation" —
   changed the column and the circle jumped with every drag. It is now pinned beside the
   wheel at a fixed width, right-aligned, and cannot be hit. */
.eiwheel{position:relative}
.eiwheel .eistate{position:absolute;left:-14px;top:50%;transform:translate(-100%,-50%);
  width:150px;margin:0;text-align:right;pointer-events:none;line-height:1.05;
  white-space:normal;word-break:normal;hyphens:none}
@media(max-width:1500px){.eiwheel .eistate{position:static;transform:none;width:100%;
  text-align:center;margin-top:10px}}
.modstage .eiwheel .eistate{position:static;transform:none;width:100%;text-align:center;margin-top:8px}

/* ===== v20.5 — the Edit shot console folds away to the left ===== */
/* no transition here: the Edit stage re-renders often (updateEdSide, edRefresh), and a
   transition on flex-basis restarts from the open width every time, so the column visibly
   snapped back. Instant and reliable beats animated and wrong. The state is carried on the
   strip itself as well as on the stage, so a repaint of either keeps it folded. */
.edstage.vsfold .vstrip,.edstage .vstrip.vsfolded{flex:0 0 30px!important;width:30px!important;
  min-width:0!important;max-width:30px!important;overflow:hidden!important;padding:2px 0!important}
.edstage.vsfold .vstrip>*:not(.vsfoldb),.edstage .vstrip.vsfolded>*:not(.vsfoldb){display:none!important}
.vsfoldb{flex:0 0 auto;width:100%;padding:6px 0;border-radius:8px;cursor:pointer;
  font:800 10px Inter,system-ui,sans-serif;letter-spacing:1.4px;text-align:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.vsfoldb:hover{background:rgba(255,255,255,.1)}
.edstage.vsfold .vsfoldb,.edstage .vstrip.vsfolded .vsfoldb{writing-mode:vertical-rl;height:120px;width:26px;margin:0 auto;letter-spacing:2px}
/* smaller buttons, centred text — this column is a menu, not a page */
.edstage .vstrip .vb{padding:7px 8px!important;font-size:10.5px!important;text-align:center!important;
  line-height:1.25;letter-spacing:.4px}
.edstage .vstrip .vb b,.edstage .vstrip .vb .t{display:block;text-align:center;font-size:11px}
.edstage .vstrip .vb small,.edstage .vstrip .vb span.s{display:block;text-align:center;font-size:9px;opacity:.55;
  white-space:normal;line-height:1.3}
.edstage .vstrip .vs-h{text-align:center;font-size:9.5px;letter-spacing:2px}
.edstage .vstrip .pill,.edstage .vstrip button{font-size:10.5px}
/* the rail on its own row when the header is too narrow to hold it beside the pills.
   #tabs is a sibling of .top, not a child of it — it is absolutely positioned over the
   header — so the state class has to live on the rail itself. */
#tabs.rowmode,.tabs.rowmode{position:static!important;left:auto!important;right:auto!important;
  transform:none!important;max-width:none!important;min-width:0!important;display:flex!important;
  margin:8px auto 2px!important}
#tabs.rowmode .stage,.tabs.rowmode .stage{flex:1}
#tabs.rowmode .stage .t,.tabs.rowmode .stage .t{font-size:clamp(10px,.82vw,13px)!important;letter-spacing:.06em!important}
#tabs.rowmode .stage,.tabs.rowmode .stage{padding:11px 8px!important}

/* ===== v20.7 — Score studio ===== */
.studio .stf textarea{width:100%;font-size:13.5px;line-height:1.55;resize:vertical}
#ststyle{min-height:120px}
.stwheelrow{display:grid;grid-template-columns:180px 1fr;gap:14px;align-items:center;margin:14px 0 4px}
.mewheel{position:relative;width:180px;height:180px;border-radius:50%;cursor:crosshair;touch-action:none;
  user-select:none;background:#0c0d16;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 8px 24px rgba(0,0,0,.5);
  overflow:hidden}
.mefill{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    hsl(var(--mh,44deg) 85% 62% / calc(.25 + var(--mi,.5)*.75)) 0%,
    hsl(var(--mh,44deg) 70% 45% / calc(.10 + var(--mi,.5)*.45)) 55%,
    transparent 78%);
  transition:background .12s linear}
.melab{position:absolute;transform:translate(-50%,-50%);font:900 7.5px var(--disp),Inter,sans-serif;
  letter-spacing:.1em;color:rgba(255,255,255,.85);text-shadow:0 1px 4px rgba(0,0,0,.85);pointer-events:none;white-space:nowrap}
.medot{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#fff;
  border:3px solid var(--bg);box-shadow:0 0 0 4px rgba(255,255,255,.22),0 4px 14px rgba(0,0,0,.6);pointer-events:none}
.mestate{display:flex;flex-direction:column;gap:5px;align-items:flex-start;min-width:0}
.mestate b{font:900 22px var(--disp),Inter,sans-serif;letter-spacing:-.01em;line-height:1}
.mestate .pill.sm{padding:4px 11px;font-size:11px}
.mekeys{display:flex;flex-direction:column;gap:3px;width:100%;max-height:118px;overflow:auto;margin-top:2px}
.mekey{display:flex;align-items:center;gap:7px;font-size:11px;padding:3px 7px;border-radius:7px;
  background:rgba(255,255,255,.05)}
.mekey b{font:800 11px ui-monospace,monospace;color:var(--tint,var(--acc3))}
.mekey span{opacity:.65;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mekey i{font-style:normal;cursor:pointer;opacity:.45}
.mekey i:hover{opacity:1;color:var(--r,#ff5f6d)}
.stvoxrow{display:flex;gap:8px;margin:12px 0 4px}
.voxb{flex:1;padding:9px 8px;border-radius:11px;font:800 12px Inter,system-ui,sans-serif;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);transition:.14s}
.voxb:hover{border-color:rgba(200,109,215,.6)}
.voxb.on{background:linear-gradient(135deg,var(--acc),var(--acc3));border-color:transparent;color:#fff}
.stpv{margin:12px 0 4px;font-size:11.5px}
.stpv summary{cursor:pointer;opacity:.6;letter-spacing:.04em}
.stpv pre{margin:8px 0 0;padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.35);
  font:12px/1.6 ui-monospace,Menlo,monospace;white-space:pre-wrap;max-height:180px;overflow:auto}
.scdraw{position:absolute;top:6px;bottom:6px;border-radius:9px;pointer-events:none;
  background:rgba(200,109,215,.22);border:1.5px dashed rgba(200,109,215,.85)}
.scdraw.pinned{pointer-events:auto}
.scdraw i{position:absolute;right:4px;top:4px;width:17px;height:17px;line-height:15px;text-align:center;
  border-radius:50%;font-style:normal;font-size:10px;background:rgba(0,0,0,.6);cursor:pointer}
.scdraw i:hover{background:var(--r,#c0392b)}
.sclane.m{cursor:crosshair}
@media(max-width:1240px){.stwheelrow{grid-template-columns:1fr}.mewheel{margin:0 auto}}

/* ===== v20.8 — the library rail was unreadable =====
   .elibitem b inherited the page's dark ink on a dark panel. Names are the thing you
   navigate by here, so they get real weight, size and contrast. */
.elibitem b{font-size:15px!important;font-weight:800;color:#fff!important;letter-spacing:-.01em}
html:not(.dark) .elibitem b{color:var(--ink)!important}
.elibitem span{font-size:10.5px!important;color:rgba(255,255,255,.5)!important}
html:not(.dark) .elibitem span{color:var(--ink3)!important}
.elibitem{padding:10px 12px}
.elibitem.on b{color:#fff!important}
.elibitem.on span{color:rgba(255,255,255,.72)!important}
.ellibhead b{font-size:11.5px;color:#fff}
html:not(.dark) .ellibhead b{color:var(--ink)}
.impbtn.exp{background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 35%,transparent),rgba(200,109,215,.3));
  border-color:rgba(160,140,255,.55)}
.impbtn.exp:hover{background:linear-gradient(135deg,var(--acc),var(--acc3));border-color:transparent;color:#fff}

/* ===== v21.1/21.2 — a score console you can see all of ===== */
.scorepage .scbody{grid-template-columns:min(52vw,720px) 1fr}
.scorepage .scleft{padding:14px}
.studio.wide{padding:14px 15px}
.stgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.stcol{display:flex;flex-direction:column;gap:10px;min-width:0}
.studio.wide .stf small{font-size:9.5px;letter-spacing:1.6px}
.studio.wide #ststyle{min-height:84px;font-size:13px}
.studio.wide #stlyr{min-height:64px;font-size:13px}
.studio.wide .stwheelrow{grid-template-columns:150px 1fr;gap:12px;margin:2px 0}
.studio.wide .mewheel{width:150px;height:150px}
.studio.wide .mestate b{font-size:18px}
.studio.wide .mekeys{max-height:92px}
.studio.wide .stvoxrow{margin:2px 0}
.studio.wide .voxb{padding:7px 6px;font-size:11.5px}
.dirwrap{display:flex;flex-direction:column;gap:7px;margin-top:2px}
.dirhead{font-size:9.5px;letter-spacing:1.6px;opacity:.55}
.dirgrp{display:flex;flex-direction:column;gap:3px}
.dirgrp small{font-size:8.5px;letter-spacing:1.4px;opacity:.4}
.dirrow{display:flex;flex-wrap:wrap;gap:4px}
.dirchip{padding:4px 9px;border-radius:999px;font:600 10.5px Inter,system-ui,sans-serif;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);white-space:nowrap}
.dirchip:hover{border-color:rgba(200,109,215,.7)}
.dirchip.on{background:linear-gradient(135deg,var(--acc),var(--acc3));border-color:transparent;color:#fff}
.stpv.open{display:block;margin:2px 0 0}
.stpv.open small{font-size:9.5px;letter-spacing:1.6px;opacity:.55;display:block;margin-bottom:5px}
.stpv.open pre{margin:0;max-height:150px}
.sccue canvas.wav{position:absolute;left:0;top:2px;pointer-events:none;opacity:.85}
.sccue b,.sccue span{position:relative;z-index:1}
.sclib{margin-top:12px;border-top:1px solid var(--line,rgba(255,255,255,.1));padding-top:12px}
.sclibhead{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.sclibhead b{font:900 10px Inter,system-ui,sans-serif;letter-spacing:2.2px}
.sclibrows{display:flex;flex-direction:column;gap:4px;max-height:190px;overflow:auto}
.sclib .mrow{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:9px;
  background:rgba(255,255,255,.04);cursor:grab}
.sclib .mrow:hover{background:rgba(255,255,255,.08)}
.sclib .mmeta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sclib .mmeta b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sclib .mstyle{font-size:10px;opacity:.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scref{margin-top:8px;padding:7px 10px;border-radius:9px;font-size:11.5px;
  background:rgba(200,109,215,.14);border:1px solid rgba(200,109,215,.4)}
@media(max-width:1500px){.stgrid{grid-template-columns:1fr}}
/* fit the whole console on screen — Philip should never scroll to reach a control */
.scorepage .scmon video{max-height:30vh;object-fit:contain;background:#000}
.scorepage .scleft{overflow:auto;max-height:calc(100vh - 132px)}
.dirwrap{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;align-items:start}
.dirwrap .dirhead{grid-column:1/-1;margin-bottom:0}
.studio.wide .stgrid{gap:14px}
.studio.wide .stcol{gap:8px}
.sclibrows{max-height:120px}
.stpv.open pre{max-height:110px}
.studio.wide .mekeys{max-height:76px}
/* the monitor is a reference, not the show — the controls come first */
.scorepage .scmon video{max-height:20vh}
.studio.wide{padding:11px 13px}
.studio.wide .mewheel{width:128px;height:128px}
.studio.wide .stwheelrow{grid-template-columns:128px 1fr;gap:10px}
.studio.wide .mestate b{font-size:16px}
.studio.wide .mekeys{max-height:62px}
.studio.wide #ststyle{min-height:66px}
.studio.wide #stlyr{min-height:52px}
.dirchip{padding:3px 8px;font-size:10px}
.dirgrp small{font-size:8px}
.stpv.open pre{max-height:88px;font-size:11px;line-height:1.5}
.sclibrows{max-height:98px}
.sclib{margin-top:9px;padding-top:9px}
.studio.wide .stacts .pill.big{padding:9px 14px;font-size:12.5px}
details.sclib>summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
details.sclib>summary::-webkit-details-marker{display:none}
details.sclib>summary::before{content:'▸';font-size:9px;opacity:.55}
details.sclib[open]>summary::before{content:'▾'}
details.sclib>summary b{font:900 10px Inter,system-ui,sans-serif;letter-spacing:2.2px}
details.sclib .sclibhead{margin:8px 0 6px}

/* ===== v21.4 — cast groups ===== */
h2.act.elgh{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:26px}
h2.act.elgh:first-child{margin-top:6px}
.elgsub{font-family:Inter,system-ui,sans-serif;font-weight:600;font-size:11px;letter-spacing:0;
  text-transform:none;opacity:.42;margin-left:auto}

/* ===== v21.5 — sort the cast by hand ===== */
.elgdrop{border:1.5px dashed transparent;border-radius:16px;padding:2px 10px 8px;margin:0 -10px;transition:border-color .12s,background .12s}
#elcast.elsorting .elgdrop{border-color:rgba(255,255,255,.12)}
#elcast.elsorting .elgdrop.over{border-color:var(--tint,var(--acc3));background:color-mix(in srgb,var(--acc) 8%,transparent)}
.elgempty{opacity:.35;font-size:11.5px;padding:14px 4px 6px;letter-spacing:.2px}
#elcast .el[draggable=true]{cursor:grab}
#elcast .el.eldragging{opacity:.45;cursor:grabbing}

/* ================= v21.7 — three things asked for more than once ==================== */

/* 1. THE EMOTION WHEEL STOPS MOVING.
   The read-out sits in a flex row beside the circle, so its own width — "Sad" is 85px,
   "Anticipation" is 178px — pushed the circle sideways on every drag. My earlier fix only
   applied OUTSIDE the Edit console, and the console is exactly where it is used. One rule,
   everywhere: a fixed box the word cannot grow out of, held off the circle. */
.eiwheel .eistate,
.modstage .eiwheel .eistate,
.edstage .mod.emo .eistate{
  position:static!important;transform:none!important;
  flex:0 0 190px!important;width:190px!important;min-width:190px!important;max-width:190px!important;
  margin:0 26px 0 0!important;text-align:right!important;
  overflow-wrap:anywhere;hyphens:none;line-height:1.05;pointer-events:none}
.eiwheel{display:flex;align-items:center;justify-content:flex-start;gap:0}
.eiwheel .fluid{flex:0 0 auto}
@media(max-width:1200px){
  .eiwheel{flex-direction:column}
  .eiwheel .eistate,.modstage .eiwheel .eistate,.edstage .mod.emo .eistate{
    flex:0 0 auto!important;width:100%!important;max-width:100%!important;
    margin:0 0 8px 0!important;text-align:center!important}}

/* 2. THE LEFT CONSOLE FOLDS WITH THE SAME ARROW AS THE RIGHT ONE, and its buttons are
   menu-sized with centred text — it is a list of choices, not a page of paragraphs. */
.vsfoldb{all:unset;display:block;box-sizing:border-box;width:100%;padding:5px 0;margin:0 0 4px;
  text-align:center;cursor:pointer;font:700 13px/1 Inter,system-ui,sans-serif;
  color:var(--ink3,rgba(255,255,255,.5));border-radius:7px;transition:background .12s,color .12s}
.vsfoldb:hover{background:rgba(255,255,255,.07);color:#fff}
.edstage.vsfold .vsfoldb,.edstage .vstrip.vsfolded .vsfoldb{
  writing-mode:horizontal-tb;height:auto;width:100%;letter-spacing:0;padding:8px 0}
.edstage .vstrip .vb,.edstage .vstrip .navbtn,.edstage .vstrip .bigbtn,.edstage .vstrip .cutbig{
  padding:7px 9px!important;min-height:0!important;text-align:center!important;
  font-size:11px!important;line-height:1.25;border-radius:10px!important}
.edstage .vstrip .navbtn{display:flex!important;flex-direction:column;align-items:center!important;gap:2px;
  text-align:center!important}
.edstage .vstrip .navbtn em{width:auto;font-size:14px}
.edstage .vstrip .navbtn span{align-items:center;text-align:center}
.edstage .vstrip .fixbig,.edstage .vstrip .vs-prompt.big{padding:8px 9px!important;gap:1px}
.edstage .vstrip .fixbig b,.edstage .vstrip .vs-prompt.big b,.edstage .vstrip .navbtn b{font-size:11.5px!important}
.edstage .vstrip small,.edstage .vstrip .navbtn span small{font-size:9px!important;line-height:1.3}
.edstage .vstrip .bigbtn{min-height:0!important}

/* 3. THE CAMERA FACE FITS. The preset strip scrolled sideways and cut itself off, and the
   template box stole a column beside it for a label that says "none yet". */
.tplbar.inpresets{display:none!important}
.presetwrap,.presets,.presetrow{overflow:visible!important}
.face .presets,.face .presetrow,.modstage .presets{display:flex!important;flex-wrap:wrap!important;
  overflow-x:visible!important;gap:6px}
.face .presets::-webkit-scrollbar,.modstage .presets::-webkit-scrollbar{display:none}

/* ===== v21.9 — the wheel's own labels were the thing colliding =====
   .eistate never overlapped the circle's box. The petal labels are absolutely positioned on
   the rim and hang ~24px OUTSIDE it, so the read-out's right edge met ANGER's left edge.
   Labels pulled inside the disc, and the read-out held well clear of the whole assembly. */
.eiwheel .eistate,
.modstage .eiwheel .eistate,
.edstage .mod.emo .eistate{margin-right:64px!important}
.ffam{max-width:96px;text-align:center;line-height:1.05}

/* ================= v22.0 — three faults, found by looking instead of querying ========= */

/* 1. THE PRESET STRIP. It is .movegrid, not .presets — which is why every rule I wrote
   missed it. overflow-x:auto with nowrap is what cut "Steadicam" in half and put a
   scrollbar under the row. It wraps now and shows every preset. */
.movegrid,.movegrid.v2,.face .movegrid,.modstage .movegrid{
  flex-wrap:wrap!important;overflow-x:visible!important;overflow-y:visible!important;
  gap:6px!important}
.movegrid::-webkit-scrollbar,.movegrid.v2::-webkit-scrollbar{display:none!important}
.movegrid>*{flex:0 0 auto}

/* 2. THE FOLD HANDLE — the same 18x92 edge tab as the right console, mirrored. */
.edcols{position:relative}
/* a real column between the strip and the viewer — nothing to position, nothing to get wrong */
.vsfoldb{all:unset!important;position:static!important;
  flex:0 0 19px!important;align-self:center!important;width:19px!important;height:92px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  background:#0a0b17!important;border:1px solid rgba(255,255,255,.10)!important;border-left:0!important;
  border-radius:0 10px 10px 0!important;margin:0 6px 0 0!important;
  cursor:pointer;font:700 12px/1 Inter,system-ui,sans-serif;color:rgba(255,255,255,.55)!important;
  box-shadow:2px 0 10px rgba(0,0,0,.45)}
.vsfoldb:hover{color:#fff!important;background:#12142a!important}
.edstage.vsfold .vsfoldb{writing-mode:horizontal-tb!important;width:19px!important;
  letter-spacing:0!important;padding:0!important;margin:0 6px 0 0!important}
/* the strip no longer carries the button in its own flow */
.edstage .vstrip>.vsfoldb{display:none!important}

/* ================= v22.1 — Score console sized for the screen it is on ================
   The console was pinned to 720px while a 2557px window left a third of the screen empty,
   so every control inside it was squeezed and the chips were unreadable. It scales with the
   window now, and the controls scale with it. */
.scorepage .scbody{grid-template-columns:clamp(640px,42vw,1040px) 1fr!important}
.scorepage .scleft{padding:16px 18px}
.studio.wide .stgrid{gap:20px}
.studio.wide .mewheel{width:clamp(128px,10vw,190px)!important;height:clamp(128px,10vw,190px)!important}
.studio.wide .stwheelrow{grid-template-columns:clamp(128px,10vw,190px) 1fr!important;gap:16px}
.studio.wide .mestate b{font-size:clamp(16px,1.3vw,24px)}
.melab{font-size:clamp(7.5px,.52vw,10px)!important}
.dirchip{padding:5px 11px!important;font-size:clamp(10.5px,.72vw,13px)!important}
.dirgrp small{font-size:clamp(8.5px,.55vw,10px)!important}
.dirhead{font-size:clamp(9.5px,.62vw,11.5px)!important}
.studio.wide .stf small{font-size:clamp(9.5px,.6vw,11px)!important}
.studio.wide #ststyle{min-height:clamp(70px,7vh,110px);font-size:clamp(13px,.85vw,15px)}
.studio.wide #stlyr{min-height:clamp(56px,6vh,90px);font-size:clamp(13px,.85vw,15px)}
.stpv.open pre{max-height:clamp(90px,12vh,170px);font-size:clamp(11px,.72vw,13px)!important}
.voxb{padding:9px 8px!important;font-size:clamp(11.5px,.8vw,14px)!important}
.studio.wide .stacts .pill.big{padding:11px 18px;font-size:clamp(12.5px,.85vw,15px)}
.sclibrows{max-height:clamp(98px,14vh,200px)}
.scorepage .scmon video{max-height:clamp(150px,22vh,340px)}
/* the Score wheel's labels stay inside the disc at every size */
.mewheel .melab{max-width:74px;text-align:center;line-height:1.05;white-space:normal}
/* the direction chips were nearly invisible — they are controls, not hints */
.dirchip{color:rgba(255,255,255,.82)!important;background:rgba(255,255,255,.075)!important;
  border-color:rgba(255,255,255,.20)!important;font-weight:600!important}
.dirchip:hover{color:#fff!important;background:rgba(200,109,215,.22)!important}
.dirchip.on{color:#fff!important}
.dirgrp small{color:rgba(255,255,255,.45)!important}
.dirhead{color:rgba(255,255,255,.6)!important}

/* ================= v23.0 — the list ================= */

/* 3/4 · the Generation bar: bigger, centred */
.gnbar.big{justify-content:center;gap:14px;padding:18px 2px 20px}
.gnbar.big .gnstat{padding:4px 18px 4px 0}
.gnbar.big .pill{padding:12px 22px!important;font-size:14px!important;border-radius:14px!important;font-weight:700}
.gnbar.big .sp{display:none}
.gnbar .pill.ghost[disabled]{opacity:.45;cursor:not-allowed}
/* 2 · one line of what happens, above the prompt */
.gnbeat{margin:7px 0 0;font:500 13.5px/1.5 Inter,system-ui,sans-serif;color:rgba(255,255,255,.78);
  border-left:2px solid var(--tint,var(--acc3));padding-left:10px}
html:not(.dark) .gnbeat{color:var(--ink)}

/* 6 · the header chip is a production picker */
#epchip.picker{cursor:pointer}
#epchip.picker::after{content:'▾';margin-left:7px;opacity:.55;font-size:10px}
#epchip.picker:hover{background:rgba(255,255,255,.10)}
.epmenu{position:fixed;z-index:200;min-width:270px;max-height:60vh;overflow:auto;padding:7px;
  background:#0d0f1c;border:1px solid rgba(255,255,255,.14);border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.6)}
.epmhead{font:900 9px Inter,system-ui,sans-serif;letter-spacing:2.2px;opacity:.45;padding:6px 10px 8px}
.epmrow{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;
  padding:9px 11px;border-radius:10px;cursor:pointer;background:transparent;border:0;text-align:left}
.epmrow b{font:700 13px Inter,system-ui,sans-serif;color:#fff}
.epmrow span{font:600 10px Inter,system-ui,sans-serif;color:rgba(255,255,255,.45)}
.epmrow:hover{background:rgba(255,255,255,.08)}
.epmrow.on{background:color-mix(in srgb,var(--acc) 20%,transparent)}
.epmrow.new{border-top:1px solid rgba(255,255,255,.10);border-radius:0 0 10px 10px;margin-top:5px}
.epmempty{padding:10px;font-size:12px;opacity:.5}

/* 8 · camera presets fit on one line */
.movegrid .mvb,.movegrid>button{padding:7px 8px!important;min-width:0!important}
.movegrid .mvb b,.movegrid>button b{font-size:10.5px!important}
.movegrid svg,.movegrid .mvi{transform:scale(.85)}
.movegrid{gap:5px!important}

/* 9 · the empty black SET THE LIGHT panel goes */
.mod.light .lightbox,.mod.light .bigbox,.face[data-m="light"] .emptybox{display:none!important}
.mod.light>.modt+div:empty,.mod.light div:empty:not([class]){display:none!important}

/* 10 · the emotion wheel: read-out centred in the space beside it, petals pushed out */
.eiwheel{gap:0;justify-content:flex-start}
.eiwheel .eistate,.modstage .eiwheel .eistate,.edstage .mod.emo .eistate{
  flex:1 1 auto!important;width:auto!important;min-width:150px!important;max-width:none!important;
  margin:0!important;text-align:center!important;padding:0 18px!important}
.eiwheel .fluid{flex:0 0 auto;margin-left:0}
.ffam{font-size:clamp(8px,.62vw,11px)!important;max-width:110px}

/* 17 · a disabled control still has readable text */
button[disabled],.pill[disabled],.pill.off,button:disabled{color:rgba(255,255,255,.72)!important}
html:not(.dark) button[disabled],html:not(.dark) .pill[disabled]{color:rgba(255,255,255,.72)!important}

/* 18 · track-height grips */
.sclane{position:relative}
.scgrip{position:absolute;left:0;right:0;bottom:-3px;height:7px;cursor:ns-resize;z-index:4}
.scgrip:hover{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--acc) 55%,transparent))}
.scztools{display:flex;align-items:center;gap:9px}

/* 19 · musical direction drawn, not listed */
.dirwrap.v2{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.dirwrap.v2 .dirhead{grid-column:1/-1}
.dirgrp2{display:flex;flex-direction:column;gap:5px;min-width:0}
.dirgrp2>small{font:800 8.5px Inter,system-ui,sans-serif;letter-spacing:1.6px;color:rgba(255,255,255,.42)}
.dirrow2{display:flex;flex-wrap:wrap;gap:5px}
.dircard{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  width:88px;padding:6px 7px 5px;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);transition:.13s}
.dircard:hover{border-color:rgba(200,109,215,.75);background:rgba(200,109,215,.14)}
.dircard.on{background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 50%,transparent),rgba(200,109,215,.45));
  border-color:rgba(220,170,255,.8)}
.dgly{display:block;width:100%;height:22px}
.dgly svg{width:100%;height:22px;overflow:visible}
.dgly path{fill:none;stroke:rgba(255,255,255,.85);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dgly circle{fill:rgba(255,255,255,.85)}
.dircard.on .dgly path{stroke:#fff;stroke-width:2}
.dircard.on .dgly circle{fill:#fff}
.dircard b{font:700 10px Inter,system-ui,sans-serif;color:rgba(255,255,255,.92);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%}
.dircard i{font-style:normal;font:500 8.5px Inter,system-ui,sans-serif;color:rgba(255,255,255,.45)}

/* 20 · cue library rows scrub */
.sclib .mmeta.scrubbable{position:relative;padding-bottom:7px}
.slbar{position:relative;height:5px;margin-top:4px;border-radius:3px;cursor:pointer;
  background:rgba(255,255,255,.14)}
.slbar:hover{background:rgba(255,255,255,.24)}
.slph{position:absolute;top:-2px;width:2px;height:9px;background:#fff;border-radius:2px;left:0}
/* ten presets, one line: 10x78 + 9x4 = 816 inside an 872 box */
.movegrid{gap:4px!important}
.movegrid>*{width:78px!important;min-width:78px!important;max-width:78px!important;
  padding:6px 4px!important;box-sizing:border-box}
.movegrid>* b,.movegrid>* .mvt{font-size:10px!important;letter-spacing:0!important}
.movegrid>* small,.movegrid>* span:not(.mvi){font-size:8px!important;line-height:1.15!important}
.movegrid svg,.movegrid .mvi{transform:scale(.78)}
@media(max-width:1500px){.movegrid>*{width:70px!important;min-width:70px!important;max-width:70px!important}}
/* the read-out lives in the space to the LEFT of the circle, centred in it */
.studio.wide .stwheelrow{grid-template-columns:1fr clamp(128px,10vw,190px)!important;gap:14px}
.mestate{align-items:center!important;text-align:center;justify-content:center}
.mestate b{text-align:center}
.mestate .mekeys{width:100%}
.mestate .mekey{justify-content:flex-start}
/* the four direction groups sit side by side so nothing runs off the bottom */
.dirwrap.v2{grid-template-columns:repeat(4,1fr)!important;gap:8px 10px}
.dircard{width:100%!important}
.dirrow2{flex-direction:column;gap:4px}
/* last 75px: tighten the direction cards so the console fits with nothing cut off */
.dircard{padding:4px 6px 4px!important;border-radius:9px}
.dgly,.dgly svg{height:16px!important}
.dircard b{font-size:9.5px!important}
.dircard i{font-size:8px!important}
.dirrow2{gap:3px}
.dirwrap.v2{gap:6px 8px}
.studio.wide .mekeys{max-height:54px}
.studio.wide #ststyle{min-height:60px}
.scorepage .scmon video{max-height:clamp(140px,18vh,300px)}
.studio.wide{padding:10px 12px}
.studio.wide .stcol{gap:7px}
.scnote{margin-left:10px;font:600 11px Inter,system-ui,sans-serif;color:#ffb4b4;
  background:rgba(255,90,90,.14);border:1px solid rgba(255,120,120,.4);
  padding:3px 9px;border-radius:8px}
/* no shot under the playhead is a normal state while scoring, not an error */
.scorepage .scmon video.nopic{opacity:.25}
.scorepage .scmon{position:relative}
.scorepage .scmon::after{content:'';position:absolute;inset:0;pointer-events:none}

/* ===== v23.6 — the emotion words sit OUTSIDE the disc, spread, never truncated =====
   At 34% they were inside the colour and colliding at the top: ANTICIPATION ran into TRUST
   and was clipped to "ANTICIPAT". They ride outside the rim now, which needs room around
   the disc and nothing clipping it. */
.eiwheel,.mod.emo .eiwheel,.modstage .eiwheel{overflow:visible!important}
.eiwheel .fluid,.mod.emo .fluid{overflow:visible!important;margin:34px 62px 34px 46px}
.ffam{max-width:none!important;white-space:nowrap!important;
  font-size:clamp(9px,.68vw,12.5px)!important;letter-spacing:.06em!important;
  text-shadow:0 1px 5px rgba(0,0,0,.95),0 0 12px rgba(0,0,0,.7)!important}
/* the read-out gives the wheel its room back */
.eiwheel .eistate,.modstage .eiwheel .eistate,.edstage .mod.emo .eistate{
  flex:0 0 auto!important;min-width:120px!important;max-width:210px!important;padding:0 10px!important}
/* the Score wheel's words ride outside its disc too, and need the room to do it */
.mewheel{overflow:visible!important}
.studio.wide .stwheelrow{gap:26px!important}
.mewheel .melab{max-width:none!important;white-space:nowrap!important;
  font-size:clamp(8px,.58vw,10.5px)!important;letter-spacing:.06em!important;
  text-shadow:0 1px 5px rgba(0,0,0,.95),0 0 10px rgba(0,0,0,.7)!important}
.mewheel .mefill{border-radius:50%}
.studio.wide .mewheel{margin:26px 46px 26px 34px}
.studio.wide .mewheel{margin:20px 40px 20px 30px}
.studio.wide #ststyle{min-height:54px}
.scorepage .scleft{padding:14px 16px}
.studio.wide .stwheelrow{gap:20px!important}

/* v23.8 — the emotion wheel's label ring was hanging off the console.
   Measured in the browser, not guessed: the wheel's grid track was
   clamp(128px,10vw,190px) — the width of the disc alone — while the disc also
   carried 30px/40px side margins and the rim labels sit ~35px outside the disc
   edge. So the column's contents were ~200px wide inside a 128px track and the
   whole ring pushed past the panel: WONDER, CALM and SORROW were being cut off
   by the console's right edge at every width below full screen. The track now
   reserves the disc PLUS the ring, and the disc centres itself inside it. */
.studio.wide .stwheelrow{
  grid-template-columns:minmax(0,1fr) calc(clamp(128px,10vw,190px) + 96px)!important;
  gap:12px!important;align-items:center}
.studio.wide .mewheel{margin:18px auto!important}

/* v23.8b — Generation bar: stats parked on the left, buttons on the true page centre.
   The grid attempt sized the middle max-content track at one button's width
   (measured: 1128.73 / 210.52 / 1128.74 at 2557px) and stacked the four pills.
   NOTE: the first attempt reused the class name .gnacts, which already exists
   as the per-shot vertical action column (flex-direction:column) — the four
   pills inherited that and stacked. This block owns .gnactbar, its own name.
   Taking the stats out of the flow instead leaves the button row alone in a
   full-width flex box, so justify-content:center lands it on the page centre —
   measured 0px off. Below 1400px the stats come back into the flow and the row
   wraps normally rather than sitting on top of them. */
.gnbar.big.tri{display:flex!important;justify-content:center;align-items:center;
  position:relative;flex-wrap:nowrap;gap:0}
.gnbar.big.tri .gnstats{position:absolute;left:2px;top:50%;transform:translateY(-50%);
  display:flex;gap:10px;align-items:center;flex-wrap:nowrap}
.gnbar.big.tri .gnactbar{display:flex;gap:14px;align-items:center;
  justify-content:center;flex-wrap:nowrap;white-space:nowrap}
.gnbar.big.tri .gnmirror{display:none}
@media(max-width:1400px){
  .gnbar.big.tri{flex-wrap:wrap;gap:10px;justify-content:center}
  .gnbar.big.tri .gnstats{position:static;transform:none;flex-wrap:wrap}
  .gnbar.big.tri .gnactbar{flex-wrap:wrap}}

/* v23.8c — a greyed-out button still has to be readable.
   Philip asked for white text on greyed buttons and the colour was already
   white — but the whole element carried opacity .4 (and .3 on .pill.ac), which
   multiplies through to ~0.29 alpha and reads as unreadable grey mush, not as a
   white label. Disabled pills now keep full element opacity and are dimmed
   through their own background and border instead, so the text stays legible
   white while the button clearly reads as unavailable. */
.pill.off,.pill[disabled],.pill.ac[disabled],button.pill:disabled{
  opacity:1!important;
  color:rgba(255,255,255,.66)!important;
  background:rgba(255,255,255,.045)!important;
  border-color:rgba(255,255,255,.10)!important;
  cursor:not-allowed}
.pill.ghost[disabled]{opacity:1!important;color:rgba(255,255,255,.60)!important}

/* ===== v23.9 — the emotion read-out gets a HARD fixed box ==================
   Root cause of the "jumping" wheel: this exact selector from v16.4 —
   .edstage .mod.emo .eigrid.v5 .eiwheel .eistate — carries width:auto inside
   a centred flex row and outguns every later fix on specificity. The word's
   own width was the layout: change the word, re-centre the row, move the
   wheel, warp the drag. Same selector, later in the file, fixed box: the
   wheel can never move because of what the read-out says. */
.edstage .mod.emo .eigrid.v5 .eiwheel .eistate{
  flex:0 0 200px!important;width:200px!important;
  min-width:200px!important;max-width:200px!important;
  text-align:center!important;white-space:normal!important;overflow-wrap:anywhere}
.eiwheel .eistate,.modstage .eiwheel .eistate,.edstage .mod.emo .eistate{
  flex:0 0 190px!important;width:190px!important;
  min-width:190px!important;max-width:190px!important}

/* ===== v23.9b — wheel proportions, from Philip's screenshot ================
   Three sizes were off: the read-out rendered up to 44px and dwarfed the disc
   (and its height was subtracted from the room edActorFit gives the wheel, so
   the bigger the word, the SMALLER the circle); the disc carried 62/46px side
   margins plus a 380px JS cap; the dot was a 30px puck with a 4px ring. */
.edstage .mod.emo .eigrid.v5 .eiwheel .eistate,
.eiwheel .eistate,.modstage .eiwheel .eistate,.edstage .mod.emo .eistate{
  font-size:clamp(15px,1.4vw,24px)!important;line-height:1.05!important}
.eiwheel .fluid,.mod.emo .fluid{margin:24px 40px 24px 30px!important}
.fluid .fdot,.fluid.v3 .fdot,.fluid.v4 .fdot{
  width:16px!important;height:16px!important;margin:-8px 0 0 -8px!important;
  border:2px solid #fff!important;
  box-shadow:0 0 0 3px var(--g),0 6px 14px rgba(0,0,0,.5)!important}

/* ===== v23.9c — the read-out stays on ONE line and sits at the left edge ===
   The 200px fixed box (kept — it is what stopped the wheel jumping) was
   wrapping long words; nowrap keeps every word on one line inside it. The row
   spreads word-left / wheel-right instead of centring together. */
.edstage .mod.emo .eigrid.v5 .eiwheel .eistate,
.eiwheel .eistate,.modstage .eiwheel .eistate,.edstage .mod.emo .eistate{
  white-space:nowrap!important;overflow:visible!important;
  text-align:left!important;padding:0!important}
.edstage .mod.emo .eigrid.v5 .eiwheel,.eiwheel{
  justify-content:space-between!important}

/* ===== v23.9d — the read-out centres IN THE GAP between left edge and wheel.
   Flush-left was too far. The box itself fills the whole gap (stable width →
   the wheel still cannot move when the word changes), the text centres in it. */
.edstage .mod.emo .eigrid.v5 .eiwheel .eistate,
.eiwheel .eistate,.modstage .eiwheel .eistate,.edstage .mod.emo .eistate{
  flex:1 1 auto!important;width:auto!important;
  min-width:0!important;max-width:none!important;
  text-align:center!important;padding-left:48px!important}

/* ═══════════════════════════════════════════════════════════════════════
   v24.0 — THEME SYSTEM
   :root below is the single authoritative token block (11 earlier :root
   blocks are append-only history; this one is last so it wins). Values are
   byte-identical to what shipped before, so CINEMA renders unchanged.
   103 hardcoded field/surface hexes were swept into these tokens, which is
   what lets a theme be ~25 lines instead of a rewrite.
   Themes apply as html[data-theme="..."]. The old html.dark rules are dead
   v1 leftovers (forest/mustard) — the moon button that set .dark is gone,
   so they can never fire. Left in place rather than risk a 108-rule delete.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --bg:var(--bg); --softd:var(--softd);
  --card:var(--card); --soft:var(--card); --navy2:var(--card); --navy:var(--navy);
  --navy3:var(--navy3); --ln2:var(--ln2); --ln:rgba(255,255,255,.1);
  --railbg:var(--bg); --rail-ink:var(--ink);
}

/* ─── GREY — neutral field, colour only where you click ──────────────── */
html[data-theme="grey"]{
  --bg:#17181C; --softd:#121317;
  --card:#1F2026; --soft:#1F2026; --navy2:#1F2026; --navy:#1A1B20;
  --navy3:#282A31; --ln2:#31333B; --ln:rgba(255,255,255,.085);
  --ink:#E4E5EA; --ink2:#A2A5AE; --ink3:#797D88;
  --railbg:#1C1D22;
}

/* ─── STAGE — jewel field, gradient rail, amber action ───────────────── */
html[data-theme="stage"]{
  --bg:#4A0B47; --softd:#380734;
  --card:rgba(255,255,255,.085); --soft:rgba(255,255,255,.085);
  --navy2:rgba(255,255,255,.085); --navy:rgba(255,255,255,.06);
  --navy3:rgba(255,255,255,.13); --ln2:rgba(255,255,255,.18);
  --ln:rgba(255,255,255,.16);
  --ink:#FFFFFF; --ink2:rgba(255,255,255,.76); --ink3:rgba(255,255,255,.54);
  --railbg:linear-gradient(97deg,#E8228C,#8B2BC4);
}
html[data-theme="stage"] body{
  background:radial-gradient(ellipse at 50% 0%,#6E1461,#4A0B47 62%) fixed,#4A0B47}
html[data-theme="stage"] .top{background:var(--railbg);border-bottom-color:rgba(255,255,255,.2)}
html[data-theme="stage"] .pill.go,
html[data-theme="stage"] .pill.pri{background:#FF9E1B;color:#3A1C00;border-color:transparent}
html[data-theme="stage"] .tabs .tab.on,
html[data-theme="stage"] #tabs .on{background:rgba(255,255,255,.24);color:#fff}

/* the picker itself */
.thmwrap{position:relative;flex:0 0 auto}
.thmmenu{position:absolute;right:0;top:calc(100% + 7px);z-index:400;min-width:150px;
  background:var(--card);border:1px solid var(--ln2);border-radius:8px;padding:5px;
  box-shadow:0 16px 40px rgba(0,0,0,.5)}
.thmmenu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:none;border:0;color:var(--ink2);font:600 12px inherit;
  padding:8px 9px;border-radius:5px;cursor:pointer}
.thmmenu button:hover{background:var(--navy3);color:var(--ink)}
.thmmenu button[aria-checked="true"]{color:var(--ink)}
.thmmenu button:focus-visible{outline:2px solid var(--ink3);outline-offset:-2px}
.thmsw{width:15px;height:15px;border-radius:4px;flex:none;border:1px solid rgba(255,255,255,.22)}

/* ═══════════════════════════════════════════════════════════════════════
   v24.0b — COMPONENT DIET (the colour-study language, applied)
   Measured before: 126 distinct gradients, 25 corner radii, 4 button
   heights, ~40 !important size overrides fighting each other. That, not
   the palette, is what made the console feel heavy — and it is the same
   root cause behind "buttons too big", "text centred", "presets on a
   second row", "the UI is crammed" and "I don't want to scroll".
   One scale: 28px tall, 12px type, 600 weight, 6px radius, three variants.
   The gradient survives in exactly one place — the button that commits.
   ═══════════════════════════════════════════════════════════════════════ */

/* one radius */
.pill,.vb,.ico,.card,.panel,.mod,.preset,.chip,.seg,.binclip,.tclip,
.movegrid>*,.gnstat,.gncard,.gnrow,.sccue,.thmmenu,input,select,textarea{
  border-radius:6px!important}
.pill.round,.ico.round,.avatar,.fdot,.medot,.mefill,.fluid,.mewheel,
.mk-play,.scplay,.dot,.dot2{border-radius:50%!important}

/* one button */
.pill,.pill.sm,.gnbar .pill,.gnbar.big .pill,.top .pill,.hdrgt .pill{
  min-height:28px!important;height:auto!important;
  padding:0 13px!important;
  font-size:12px!important;font-weight:600!important;
  letter-spacing:0!important;
  display:inline-flex!important;align-items:center;justify-content:center;gap:6px;
  background:var(--navy3);border:1px solid var(--ln2);color:var(--ink2);
  background-image:none;
  box-shadow:none!important;
  transition:background .12s,color .12s,border-color .12s}
.pill:hover{color:var(--ink);border-color:var(--ink3)}
.pill.ghost{background:transparent!important;border-color:transparent!important;color:var(--ink3)}
.pill.ghost:hover{background:var(--navy3)!important;color:var(--ink)}
.pill.sm{min-height:24px!important;padding:0 10px!important;font-size:11px!important}

/* the ONE gradient — only the button that commits */
.pill.go,.pill.pri,#sendall{
  background-image:linear-gradient(95deg,var(--acc),var(--acc))!important;
  border-color:transparent!important;color:#fff!important}
.pill.go:hover,.pill.pri:hover{filter:brightness(1.08)}

/* the left column: flat, quiet, one weight */
.vb{
  min-height:30px!important;height:auto!important;
  padding:0 12px!important;font-size:12px!important;font-weight:600!important;
  letter-spacing:0!important;text-transform:none!important;
  background:var(--card)!important;background-image:none!important;
  border:1px solid var(--ln2)!important;color:var(--ink2)!important;
  box-shadow:none!important;
  display:flex!important;align-items:center;justify-content:center}
.vb:hover{color:var(--ink)!important;border-color:var(--ink3)!important}
.vb.go,.vb.pri{background-image:linear-gradient(95deg,var(--acc),var(--acc))!important;
  border-color:transparent!important;color:#fff!important}

/* presets: smaller, no sublabel, eight to a row instead of seven wrapping */
.movegrid>*{
  width:52px!important;min-width:52px!important;max-width:52px!important;
  min-height:44px!important;padding:5px 3px!important;
  background:var(--navy3)!important;background-image:none!important;
  border:1px solid var(--ln2)!important;box-shadow:none!important;
  display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.movegrid>* b,.movegrid>* .mvt{font-size:9px!important;font-weight:600!important;
  line-height:1.1!important;text-align:center;color:var(--ink2)}
.movegrid>* small,.movegrid>* span:not(.mvi){display:none!important}
.movegrid>*.on{border-color:var(--acc,var(--acc))!important;
  background:color-mix(in srgb,var(--acc,var(--acc)) 18%,transparent)!important}
.movegrid{gap:5px!important;flex-wrap:wrap!important;overflow:visible!important;
  max-height:none!important}

/* a greyed control still reads */
.pill.off,.pill[disabled],button.pill:disabled,.vb[disabled]{
  opacity:1!important;color:rgba(255,255,255,.6)!important;
  background:var(--navy)!important;background-image:none!important;
  border-color:var(--ln2)!important;cursor:not-allowed}
html[data-theme="day"] .pill.off{color:rgba(0,0,0,.42)!important}

/* v24.0c — the left strip: .bigbtn / .navbtn / .modeseg carried their own
   !important sizing that outranked the v24.0b .vb rule (radius stayed 10–13px,
   height 59px). Compound selectors so the diet actually lands. */
.edstage .vstrip .vb,
.vb.bigbtn,.vb.navbtn,.vb.bigbtn.navbtn,.vb.vs-prompt,.vb.vs-prompt.big,.vb.vs-score{
  min-height:30px!important;height:auto!important;
  padding:0 12px!important;border-radius:6px!important;
  font-size:12px!important;font-weight:600!important;line-height:1.2!important;
  letter-spacing:0!important;text-transform:none!important;
  background:var(--card)!important;background-image:none!important;
  border:1px solid var(--ln2)!important;color:var(--ink2)!important;
  box-shadow:none!important;
  display:flex!important;align-items:center;justify-content:center;gap:6px;text-align:center}
.edstage .vstrip .vb:hover,.vb.bigbtn:hover,.vb.navbtn:hover{
  color:var(--ink)!important;border-color:var(--ink3)!important}
/* the strapline under each big button was half its height — drop it */
.vb.bigbtn small,.vb.navbtn small,.vb.bigbtn em,.vb.navbtn em,
.vb.bigbtn span.sub,.vb.navbtn span.sub{display:none!important}
.vb.on{border-color:var(--acc)!important;color:var(--ink)!important;
  background:rgba(123,77,255,.16)!important}

/* the CUTS / ONE TAKE segmented control */
.modeseg,.vs-bb .modeseg{border-radius:6px!important;height:auto!important;
  background:var(--navy)!important;background-image:none!important;
  border:1px solid var(--ln2)!important;padding:3px!important;gap:3px!important;box-shadow:none!important}
.modeseg>*{border-radius:4px!important;min-height:24px!important;
  font-size:11px!important;font-weight:600!important;letter-spacing:0!important;
  background:transparent!important;background-image:none!important;color:var(--ink3)!important;
  box-shadow:none!important}
.modeseg>*.on{background:linear-gradient(95deg,var(--acc),var(--acc))!important;color:#fff!important}

/* section headers were 38px of empty rule — tighten */
.vstrip .vs-h{padding:8px 0 4px!important;min-height:0!important}
.vstrip .vs-h small,.vstrip .vs-h em{display:none!important}

/* v24.0d — two loud survivors found by screenshot, not by grep:
   .pill.ac.fixbig.navbtn.pri kept a 60px translucent gradient slab, and the
   active CUTS segment was wearing the commit gradient full-width. The brand
   gradient belongs to ONE control — the button that spends money — so the
   segmented control gets a quiet fill instead. */
.pill.ac.fixbig,.pill.fixbig,.pill.fixbig.navbtn,.pill.fixbig.pri{
  min-height:30px!important;height:auto!important;padding:0 12px!important;
  border-radius:6px!important;font-size:12px!important;font-weight:600!important;
  background:var(--card)!important;background-image:none!important;
  border:1px solid var(--ln2)!important;color:var(--ink2)!important;box-shadow:none!important}
.pill.fixbig small,.pill.fixbig em{display:none!important}
.pill.fixbig:hover{color:var(--ink)!important;border-color:var(--ink3)!important}

.modeseg>*.on{background:var(--navy3)!important;background-image:none!important;
  color:var(--ink)!important;box-shadow:inset 0 0 0 1px var(--ln2)!important}

/* v24.0e — the tab strip is the most dominant element on every screen and the
   diet skipped it: the tabs are not .pill, so they kept their large rounded
   slab look. That is why v24.0 read as "no change" on Script. Same language as
   everything else now — flat, 6px, one weight, quiet until active. */
#tabs>*,.tabs>*{
  min-height:30px!important;height:auto!important;
  padding:0 14px!important;border-radius:6px!important;
  font-size:12px!important;font-weight:600!important;letter-spacing:.02em!important;
  background:var(--card)!important;background-image:none!important;
  border:1px solid var(--ln2)!important;color:var(--ink3)!important;
  box-shadow:none!important;
  display:inline-flex!important;align-items:center;justify-content:center;
  transition:color .12s,border-color .12s,background .12s}
#tabs>*:hover,.tabs>*:hover{color:var(--ink)!important;border-color:var(--ink3)!important}
#tabs>*.ac,.tabs>*.ac,#tabs>*.on,.tabs>*.on{
  background:linear-gradient(95deg,var(--acc),var(--acc))!important;
  border-color:transparent!important;color:#fff!important}
/* the tab's own strapline doubled its height */
#tabs>* small,#tabs>* em,#tabs>* i,.tabs>* small{display:none!important}
#tabs,.tabs{gap:6px!important;padding:8px 0!important}
html[data-theme="stage"] #tabs>*.ac,html[data-theme="stage"] #tabs>*.on{background:rgba(255,255,255,.26)!important}
html[data-theme="grey"] #tabs>*.ac,html[data-theme="grey"] #tabs>*.on{background:var(--acc)!important}

/* ═══════════════════════════════════════════════════════════════════════
   v24.1 — THE LOGIN PAGE'S LANGUAGE, APPLIED TO THE APP
   Philip: "all i see is colour change… it had the same style as the login
   page". Correct, and the difference was never the palette. The login puts
   its content DIRECTLY on --bg with one thin border, roomy padding and a
   display-font heading. The app stacks filled navy --card slabs two and
   three deep, so every element sits in a box inside a box inside a box.
   Flattening that is the actual change.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1 · surfaces stop being slabs — field colour, one hairline, like .lbox */
.panel,.card,.mod,.gncard,.gnscript,.studio,.modstage,.vs-bb,
.scpanel,.mk-card,.binbox,.notes,.eictl,.eigrid{
  background:var(--bg)!important;background-image:none!important;
  border:1px solid var(--ln)!important;
  border-radius:10px!important;
  box-shadow:none!important;
  padding:18px!important}

/* 2 · a box inside a box loses its own box — this is what made it feel dense */
.panel .panel,.card .card,.mod .card,.panel .card,.card .panel,
.mod .panel,.studio .card,.studio .panel,.gncard .card,
.eigrid .eictl,.modstage .mod{
  background:transparent!important;border:0!important;
  border-radius:0!important;padding:0!important;box-shadow:none!important}

/* 3 · headings get the display face, like "Write one line." */
.modt,.gnsechead,.vs-h b,.mk-lab,.lab,.sechead,.stagetitle{
  font-family:var(--disp),Inter,system-ui,sans-serif!important;
  font-weight:900!important;letter-spacing:-.01em!important;
  color:var(--ink)!important;text-transform:none!important}
.modt,.stagetitle{font-size:20px!important;line-height:1.1!important;margin:0 0 4px!important}
.gnsechead,.sechead{font-size:17px!important;line-height:1.1!important}
.vs-h b{font-size:13px!important;letter-spacing:.04em!important}

/* 4 · inputs exactly as the login sets them */
input[type=text],input[type=number],input[type=password],input:not([type]),
textarea,select{
  background:var(--bg)!important;
  border:1px solid var(--ln)!important;
  border-radius:8px!important;
  padding:11px 13px!important;
  font-size:13px!important;color:var(--ink)!important;
  box-shadow:none!important}
input::placeholder,textarea::placeholder{color:var(--ink3)!important}
input:focus,textarea:focus,select:focus{
  border-color:var(--acc)!important;outline:none!important}

/* 5 · room to breathe — the login's whole trick is whitespace */
.wrap,.edstage,.stage{gap:16px!important}
.vstrip{gap:8px!important}
.mod>*+*{margin-top:12px}

/* 6 · the primary button, full width and confident, like Sign in → */
.pill.go,.vb.go,#sendall{
  min-height:38px!important;font-size:13px!important;letter-spacing:.01em!important}

/* v24.1b — the flatten was right, the blanket padding was not.
   18px !important landed on layout containers (.mod, .modstage, .eigrid,
   .vs-bb, .studio) as well as leaf panels, so the viewer shrank, the strip
   lost its buttons and the timeline took the screen. Padding now applies
   only to leaf surfaces; the flat treatment stays everywhere. */
.mod,.modstage,.eigrid,.vs-bb,.studio,.gnscript{padding:0!important}
.panel,.card,.gncard,.scpanel,.binbox,.notes,.eictl{padding:13px!important}
.wrap,.edstage,.stage{gap:12px!important}
.mod>*+*{margin-top:8px}

/* the preset tiles lost their diet when the flatten reset their box */
.movegrid>*{
  width:52px!important;min-width:52px!important;max-width:52px!important;
  min-height:44px!important;padding:5px 3px!important;
  background:var(--navy3)!important;border:1px solid var(--ln2)!important;
  border-radius:6px!important}
.movegrid>* small,.movegrid>* span:not(.mvi){display:none!important}

/* keep the viewer the biggest thing on the Edit screen */
.edstage .monitor,.edstage .monframe,.edtop{min-height:0!important}
.edtop{flex:1 1 auto!important}

/* v24.1c — revert two speculative rules from v24.1b. I added
   .edtop{flex:1 1 auto} and min-height:0 on the monitor to "keep the viewer
   big" without checking what they did to the flex row — they starved the
   left strip and its buttons (New shot / Fix a segment / Rewrite / Cuts /
   Clip browser) fell out of view. Neither rule was ever needed. */
.edtop{flex:none!important}
.edstage .monitor,.edstage .monframe{min-height:auto!important}
.vstrip{overflow:visible!important;min-height:0!important}
.vstrip .vb,.vstrip .pill{flex:none!important}

/* v24.1d — the strip's buttons are in the DOM but below the visible area:
   the flatten changed its height and the timeline now takes the lower half.
   Until the Edit grid is retuned properly, the strip scrolls so nothing is
   unreachable. */
.vstrip{overflow-y:auto!important;overflow-x:hidden!important;
  scrollbar-width:thin;scrollbar-color:var(--ln2) transparent}
.vstrip::-webkit-scrollbar{width:6px}
.vstrip::-webkit-scrollbar-thumb{background:var(--ln2);border-radius:3px}

/* ═══════════════════════════════════════════════════════════════════════
   v25.0 — SLATE
   Philip, on the third round of "I don't see much change": the problem was
   never the palette, and it was not the buttons either. Three things set the
   old tone, and I had touched none of them:
     1. TYPE. --disp is Anton, weight 900, uppercase. Heavy condensed caps
        read as loud and dated no matter what colour sits behind them. The
        reference uses light, large, sentence-case headings. That single
        change carries most of the "modernisation".
     2. BORDERS. I had been drawing a hairline around everything. The
        reference has almost none — surfaces separate by TONE.
     3. BLACK. var(--bg) with purple is high-contrast and heavy. Slate
        blue-grey is quieter and lets muted data colour do the work.
   Slate is the new default. Cinema, Grey and Stage remain in the picker.
   ═══════════════════════════════════════════════════════════════════════ */
html[data-theme="slate"],:root{
  --bg:var(--bg); --softd:var(--softd);
  --card:var(--card); --soft:var(--card); --navy2:var(--card); --navy:var(--navy);
  --navy3:var(--navy3); --ln2:var(--navy3); --ln:rgba(255,255,255,.06);
  --ink:var(--ink); --ink2:var(--ink2); --ink3:var(--ink3);
  --acc:var(--acc); --acc2:var(--acc); --acc3:var(--acc3);
  --ok:var(--ok); --warn:var(--warn); --bad:var(--bad);
  --railbg:var(--softd);
}

/* ── 1 · TYPE: light, large, sentence case ──────────────────────────── */
.modt,.gnsechead,.sechead,.stagetitle,h1,h2,h3,.vs-h b,.lab,.mk-lab{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif!important;
  text-transform:none!important;
  letter-spacing:-.015em!important;
  color:var(--ink)!important}
.stagetitle,h1{font-size:30px!important;font-weight:300!important;line-height:1.12!important}
.modt,h2{font-size:22px!important;font-weight:300!important;line-height:1.15!important;
  margin:0 0 10px!important;opacity:1!important}
.gnsechead,.sechead,h3{font-size:17px!important;font-weight:400!important}
.vs-h b{font-size:12px!important;font-weight:500!important;letter-spacing:.02em!important;
  color:var(--ink2)!important}
.lab,.mk-lab,.crumb,small{font-size:11px!important;font-weight:400!important;
  letter-spacing:.02em!important;text-transform:none!important;color:var(--ink3)!important}
body,button,input,select,textarea{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif!important;
  -webkit-font-smoothing:antialiased}

/* ── 2 · BORDERS GO. surfaces separate by tone ──────────────────────── */
.panel,.card,.mod,.gncard,.studio,.scpanel,.binbox,.notes,.eictl,
.modstage,.vs-bb,.gnscript{
  background:var(--card)!important;
  border:0!important;
  border-radius:12px!important;
  box-shadow:none!important}
.panel .panel,.card .card,.mod .card,.panel .card,.card .panel,
.mod .panel,.studio .card,.studio .panel{
  background:transparent!important;border:0!important;padding:0!important}

/* ── 3 · controls: quiet fills, no outlines ─────────────────────────── */
.pill,.vb,#tabs>*,.tabs>*,.movegrid>*{
  background:var(--navy3)!important;background-image:none!important;
  border:0!important;color:var(--ink2)!important;
  font-weight:500!important;letter-spacing:0!important;
  box-shadow:none!important}
.pill:hover,.vb:hover,#tabs>*:hover,.movegrid>*:hover{
  background:var(--navy4)!important}
.pill:hover,.vb:hover,#tabs>*:hover,.movegrid>*:hover{
  background:var(--navy4)}
#tabs>*.on,.tabs>*.on,.pill.go,.pill.pri,.vb.go,#sendall,.movegrid>*.on{
  background:var(--acc)!important;background-image:none!important;color:var(--accink)!important;
  font-weight:600!important}
.pill.ghost{background:transparent!important;color:var(--ink3)!important}
input,textarea,select{
  background:var(--softd)!important;border:0!important;
  border-radius:8px!important;color:var(--ink)!important}
input:focus,textarea:focus{box-shadow:0 0 0 2px var(--acc)!important}

/* ── 4 · the rail: flat, quiet, text-only like the reference nav ────── */
.top{background:var(--railbg)!important;border-bottom:0!important}
#tabs,.tabs{gap:4px!important}

/* v25.0b — the console tabs (.mtab) and timeline clips carried their own
   purple, outside the sweep above. Muted to the slate accent. */
.mtab.on,.mtab[aria-selected="true"],.contab.on{
  background:var(--acc)!important;background-image:none!important;
  color:var(--accink)!important;font-weight:600!important;border:0!important}
.mtab{background:var(--navy3)!important;background-image:none!important;
  border:0!important;color:var(--ink2)!important;font-weight:500!important}
.tclip,.tclip.on,.binclip{background:var(--navy4)!important;background-image:none!important;
  border:0!important;color:var(--ink)!important}
.mcue,.sccue{background:var(--cue)!important;background-image:none!important;border:0!important}

/* v25.1b — the lanes get the login page's calm: no outlines, no stripes,
   separation by tone alone, and one quiet accent line for the playhead. */
.track,.tlane,.sclane,.tlwrap,#tl,#tracks,.sctl{
  background:var(--softd)!important;border:0!important;box-shadow:none!important}
.track,.tlane,.sclane{
  border-bottom:1px solid rgba(255,255,255,.04)!important;
  border-radius:0!important}
.track:last-child,.tlane:last-child,.sclane:last-child{border-bottom:0!important}
.tlhead,.schead,.tlruler,#ruler,.mk-ruler{
  background:transparent!important;border:0!important;
  border-bottom:1px solid rgba(255,255,255,.05)!important;
  color:var(--ink3)!important;font-size:10px!important;font-weight:400!important;
  letter-spacing:.02em!important;text-transform:none!important}
.tclip,.binclip{background:var(--navy4)!important;border:0!important;border-radius:5px!important;
  box-shadow:none!important;font-weight:500!important;font-size:11px!important;color:var(--ink)!important}
.tclip.on,.tclip.sel{box-shadow:0 0 0 2px var(--acc)!important}
.mcue,.sccue{background:var(--cue)!important;border:0!important;border-radius:5px!important;
  box-shadow:none!important}
.phh,.mk-ph,#scph,.playhead{background:var(--acc)!important;box-shadow:none!important;width:1.5px!important}
.gap2{background:rgba(255,255,255,.03)!important;border:0!important;border-radius:5px!important;
  color:var(--ink3)!important}
.tlane b,.track b,.sclane b,.thcol{
  color:var(--ink3)!important;font-size:10px!important;font-weight:500!important;
  letter-spacing:.02em!important;text-transform:none!important;background:transparent!important}

/* v25.2b — vertical zoom now reaches EVERY lane. --lane-h was read by two
   rules only, so changing it moved almost nothing on screen. */
#vtracks .track,#atracks .track,#atracks .track.a,
#tl .track,#tracks .track,.tlane,.track.v,.track.music,.track.notes{
  height:var(--lane-h,58px)!important;min-height:0!important}

/* v25.2c — the page was scrolling BEHIND the menu: .tabs is position:absolute
   with a transparent background, so content ran underneath it. Header and tab
   strip now sit in normal flow, stuck to the top, on an opaque ground. */
.top{position:sticky!important;top:0!important;z-index:220!important;
  background:var(--railbg)!important}
.tabs,#tabs{
  position:sticky!important;top:auto!important;left:auto!important;
  transform:none!important;z-index:210!important;
  background:var(--railbg)!important;
  display:flex!important;justify-content:center!important;flex-wrap:wrap;
  width:100%!important;padding:8px 14px!important;margin:0!important}

/* ═══ v26.0 — the list ══════════════════════════════════════════════════ */

/* shot lanes at a third of their thickness */
.tlane{height:10px!important}
.tlane.alane{height:7px!important}
.tlrow{min-height:0!important;gap:4px!important}
.tlrow small{font-size:9px!important;line-height:1!important}

/* the drag grip on every lane border */
.lngrip{position:absolute;left:0;right:0;bottom:-3px;height:7px;cursor:ns-resize;z-index:14}
.lngrip{pointer-events:auto}
.tlane .lngrip{display:none!important}
.lngrip:hover{background:linear-gradient(180deg,transparent,var(--acc));opacity:.5}
.scgrip{display:none!important}   /* superseded by .lngrip */

/* SS1 — the empty half of SET THE LIGHT */
.mod.light .lgrid>*:empty,.mod.light .lpad:empty,.mod.light>div:empty,
.mod.light .modt+div:empty,.mod.light .bigbox,.mod.light .lightbox{display:none!important}
.mod.light{min-height:0!important}
.mod.light .lgrid{gap:10px!important}

/* SS2 — actor wheel centred, read-out on the left, no overlap */
.edstage .mod.emo .eigrid.v5 .eiwheel,.eiwheel{
  display:grid!important;grid-template-columns:1fr auto 1fr!important;
  align-items:center!important;gap:0!important}
.eiwheel .eistate,.modstage .eiwheel .eistate,.edstage .mod.emo .eistate{
  grid-column:1!important;justify-self:center!important;
  flex:0 0 auto!important;width:auto!important;max-width:none!important;
  min-width:0!important;padding:0 12px!important;text-align:center!important;
  white-space:nowrap!important}
.eiwheel .fluid{grid-column:2!important;justify-self:center!important;margin:18px 34px!important}
.eiwheel::after{content:"";grid-column:3}

/* voice buttons: readable in every state */
.voxb{color:var(--ink)!important;font-weight:600!important;background:var(--navy3)!important;
  border:0!important;border-radius:6px!important}
.voxb.on{background:var(--acc)!important;color:#FF9E1B!important}
.pill.on,.seg span.on,.lockchk.on{color:#fff!important}
#tabs>*.ac,.tabs>*.ac,#tabs>*.on,.tabs>*.on,.mtab.on{color:#fff!important}
.movegrid>*.on b,.movegrid>*.on .mvt{color:#fff!important}

/* ═══ v27.0 ════════════════════════════════════════════════════════════ */

/* light-over-time lane */
.lightlanewrap{margin:0 0 12px}
.lightlane{position:relative;height:26px;border-radius:6px;overflow:hidden;
  cursor:ew-resize;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.lightlane .llkf{position:absolute;top:0;bottom:0;width:2px;background:#fff;opacity:.8;
  transform:translateX(-1px);pointer-events:none}
.lightlane .llkf::after{content:"";position:absolute;top:-1px;left:-3px;width:8px;height:8px;
  background:#fff;transform:rotate(45deg)}
.lightlane .llph{position:absolute;top:0;bottom:0;width:1.5px;background:var(--acc);left:0;
  box-shadow:0 0 6px var(--acc);pointer-events:none}

/* musical direction field */
.scfield{margin:6px 0 4px}
.sffrow{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;margin-top:6px}
.sfpad{position:relative;width:168px;height:168px;border-radius:50%;flex:none;cursor:crosshair;
  background:radial-gradient(circle at 50% 50%,rgba(91,164,214,.30),rgba(41,58,75,.85) 72%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.sfpad .sfx,.sfpad .sfy{position:absolute;background:rgba(255,255,255,.10)}
.sfpad .sfx{left:8%;right:8%;top:50%;height:1px}
.sfpad .sfy{top:8%;bottom:8%;left:50%;width:1px}
.sfpad .sfl{position:absolute;font-size:8.5px;font-weight:700;letter-spacing:.06em;
  color:var(--ink3);white-space:nowrap;pointer-events:none}
.sfl-t{top:-14px;left:50%;transform:translateX(-50%)}
.sfl-b{bottom:-14px;left:50%;transform:translateX(-50%)}
.sfl-l{left:-8px;top:50%;transform:translate(-100%,-50%)}
.sfl-r{right:-8px;top:50%;transform:translate(100%,-50%)}
.sfdot{position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;
  border:2px solid var(--acc);transform:translate(-50%,-50%);
  box-shadow:0 2px 10px rgba(0,0,0,.5);pointer-events:none}
.sfread{min-width:0}
.sfread b{display:block;font-size:19px;font-weight:300;letter-spacing:-.01em;color:var(--ink);
  margin-bottom:5px}
.sfread span{font-size:11.5px;line-height:1.5;color:var(--ink3)}
.sflane{position:relative;height:16px;margin-top:12px;border-radius:5px;cursor:ew-resize;
  background:linear-gradient(90deg,rgba(91,164,214,.14),rgba(91,164,214,.30))}
.sflane .sfk{position:absolute;top:2px;width:8px;height:12px;border-radius:2px;
  background:var(--acc);transform:translateX(-4px)}
.dirwrap,.dirwrap.v2,.dircard,.dgly{display:none!important}

/* Score wheel wears the Actor wheel's clothes */
.mewheel{
  width:168px!important;height:168px!important;
  box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 0 40px rgba(255,255,255,.05)!important;
  position:relative}
.mewheel::after{content:"♪";position:absolute;inset:0;display:grid;place-items:center;
  font-size:44px;opacity:.22;color:#fff;pointer-events:none;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.mewheel .melab{font-size:clamp(8px,.56vw,10px)!important;font-weight:700!important;
  letter-spacing:.06em!important;color:var(--ink2)!important}
.mewheel .medot{width:14px!important;height:14px!important;border:2px solid var(--acc)!important;
  background:#fff!important;box-shadow:0 2px 10px rgba(0,0,0,.5)!important}
.studio.wide .stwheelrow{align-items:center!important}

/* Score console: same calm as everything else */
.studio,.studio.wide{gap:14px!important}
.studio .stcol{gap:12px!important}
.stpv{background:var(--softd)!important;border:0!important;border-radius:8px!important;padding:10px!important}
.stpv pre{white-space:pre-wrap;font-size:11.5px;line-height:1.55;color:var(--ink2);margin:0}
.stpv summary{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);
  cursor:pointer;margin-bottom:6px}

/* ═══ v27.1 ═══ */
/* direction field: eight bearings + two guide rings, dead centre */
.sffrow{grid-template-columns:1fr auto 1fr!important;align-items:center!important}
.sffrow .sfread{grid-column:1;justify-self:center;text-align:center}
.sfpad{grid-column:2;justify-self:center;margin:26px 44px!important}
.sffrow::after{content:"";grid-column:3}
.sfl-tl{top:9%;left:9%;transform:translate(-100%,-50%)}
.sfl-tr{top:9%;right:9%;transform:translate(100%,-50%)}
.sfl-bl{bottom:9%;left:9%;transform:translate(-100%,50%)}
.sfl-br{bottom:9%;right:9%;transform:translate(100%,50%)}
.sfring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.07);pointer-events:none}
.sfring.r1{inset:33%}
.sfring.r2{inset:16%}

/* the emotion wheel: same construction, soft gradient kept */
.mewheel,.fluid{
  box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.08)!important}
.mewheel::before,.fluid::before{content:"";position:absolute;inset:33%;border-radius:50%;
  border:1px solid rgba(255,255,255,.07);pointer-events:none}
.mewheel .melab,.fluid .ffam{font-weight:700!important;letter-spacing:.06em!important;
  color:var(--ink2)!important;text-shadow:0 1px 6px rgba(0,0,0,.9)!important}

/* both wheels centred in their row, identically */
.stwheelrow,.eiwheel,.edstage .mod.emo .eigrid.v5 .eiwheel{
  display:grid!important;grid-template-columns:1fr auto 1fr!important;align-items:center!important}
.stwheelrow>.mestate,.eiwheel .eistate,.edstage .mod.emo .eistate{
  grid-column:1!important;justify-self:center!important;text-align:center!important}
.stwheelrow>.mewheel,.eiwheel .fluid{grid-column:2!important;justify-self:center!important;
  margin:26px 44px!important}
.stwheelrow::after,.eiwheel::after{content:"";grid-column:3}

/* an active button inverts — never a third colour */
.voxb.on{background:var(--ink)!important;color:var(--bg)!important}
.voxb{background:var(--navy3)!important;color:var(--ink)!important}
.seg span.on,.lockchk.on{background:var(--ink)!important;color:var(--bg)!important}

/* ═══ v27.2 — takes as sublanes · SFX lanes ═══ */
.tkbadge{position:absolute;right:4px;top:3px;z-index:6;
  background:rgba(0,0,0,.45);color:#fff;border:0;border-radius:4px;
  font:600 9px/1 inherit;padding:3px 6px;cursor:pointer}
.tkbadge:hover{background:rgba(0,0,0,.68)}
.sctakes{margin:3px 0 5px;display:flex;flex-direction:column;gap:3px}
.sctk{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:5px;
  background:var(--navy3);font-size:11px;color:var(--ink2)}
.sctk.on{background:rgba(91,164,214,.18);color:var(--ink)}
.tkply{background:none;border:0;color:var(--ink2);cursor:pointer;font-size:11px;padding:0 2px}
.tkply:hover{color:var(--ink)}
.tknm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tkuse{background:var(--acc);color:var(--accink);border:0;border-radius:4px;
  font:600 10px/1 inherit;padding:4px 9px;cursor:pointer}
.tkon{font-size:9.5px;letter-spacing:.06em;color:var(--acc);text-transform:uppercase}

/* the two SFX lanes — pinned last, their own colour */
.sclane.sfx{position:relative;background:rgba(233,177,102,.06)!important;
  border-top:1px solid rgba(233,177,102,.16)!important}
.sclane.sfx .lnlab{position:absolute;left:6px;top:4px;z-index:3;
  font:600 9px/1 inherit;letter-spacing:.08em;color:var(--warn);opacity:.85;pointer-events:none}
.sccue.sfxcue{background:#8A6A3A!important;border:0!important;border-radius:5px!important;
  position:absolute;top:3px;bottom:3px;overflow:hidden;
  display:flex;align-items:center;padding-left:6px}
.sccue.sfxcue .cuenm{font-size:10px;font-weight:600;color:#fff;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.sccue.sfxcue.submitted{background:repeating-linear-gradient(45deg,#6D5430,#6D5430 6px,#7C6038 6px,#7C6038 12px)!important}
.sccue.sfxcue .cuewait{margin-left:6px;font-style:normal;opacity:.7;color:#fff;font-size:11px}
.scdraw.sfxdraw{background:rgba(233,177,102,.28);border:1px solid var(--warn);border-radius:5px}
#sfxq{background:var(--softd)!important;border:0!important;border-radius:8px!important;
  padding:12px 14px!important;font-size:14px!important;color:var(--ink)!important}

/* v27.3 — the emotion wheel was 175px off centre: .studio.wide .stwheelrow
   from v23.9 set a two-column grid with !important and outranked the v27.1
   rule. Same specificity, later in the file, so both circles now share one
   three-track layout: read-out | disc | mirror. */
.studio.wide .stwheelrow,.studio .stwheelrow{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
  align-items:center!important;gap:0!important}
.studio.wide .stwheelrow>.mestate,.studio .stwheelrow>.mestate{
  grid-column:1!important;justify-self:center!important;text-align:center!important;
  width:auto!important;min-width:0!important;max-width:none!important;padding:0 12px!important}
.studio.wide .stwheelrow>.mewheel,.studio .stwheelrow>.mewheel{
  grid-column:2!important;justify-self:center!important;margin:26px 44px!important}
.studio.wide .stwheelrow::after,.studio .stwheelrow::after{content:"";grid-column:3}

/* both circles the same diameter — the wheel was 128, the field 168 */
.mewheel{width:168px!important;height:168px!important}
.studio.wide .mewheel{width:168px!important;height:168px!important}

/* v27.4 — the pin list becomes a lane under the player */
.mekeys{display:none!important}
.moodlanewrap{margin:10px 0 4px}
.moodlanewrap .lab{display:block;margin-bottom:5px}
.moodlane{position:relative;height:26px;border-radius:6px;overflow:hidden;cursor:ew-resize;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.moodlane .mlkf{position:absolute;top:0;bottom:0;width:2px;background:#fff;opacity:.85;
  transform:translateX(-1px);cursor:pointer;z-index:3}
.moodlane .mlkf::after{content:"";position:absolute;top:-1px;left:-3px;width:8px;height:8px;
  background:#fff;transform:rotate(45deg)}
.moodlane .mlkf:hover{opacity:1;box-shadow:0 0 8px #fff}
.moodlane .mlph{position:absolute;top:0;bottom:0;width:1.5px;background:var(--acc);left:0;
  box-shadow:0 0 6px var(--acc);pointer-events:none;z-index:4}
.moodlane .mlend{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font:600 9px/1 var(--mono,inherit);color:rgba(255,255,255,.6);pointer-events:none}

/* ═══ v28 — Score console rebuilt ═══ */
.sthead{display:none!important}                 /* the player takes the height back */
.scorepage>.modt,.scorepage .schead{display:none!important}

.stgrid.v28{display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)!important;
  gap:26px!important;align-items:start!important}
.stgrid.v28 .stcol{display:flex;flex-direction:column;gap:12px;min-width:0}
.stgrid.v28 .stcol.right{gap:4px}

/* the prompt fills the left column so its foot lines up with the field circle */
.stgrid.v28 .stcol.left{height:100%}
.stgrid.v28 .stpv{flex:1 1 auto;min-height:150px;display:flex;flex-direction:column}
.stgrid.v28 .stpv pre{flex:1 1 auto;overflow:auto;margin:0}

.stvoxrow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.voxb{min-height:34px!important;font-size:12.5px!important;border-radius:6px!important}

.stacts.v28{display:flex;gap:10px;align-items:center;margin-top:2px}
.stacts.v28 .gen{flex:1 1 auto;min-height:42px!important;font-size:14px!important;
  font-weight:700!important;letter-spacing:.01em!important}
.stacts.v28 .ext{flex:0 0 auto;min-height:42px!important}
.stacts.v28 .ext[disabled]{opacity:1!important;color:rgba(255,255,255,.4)!important}

/* the cue lane and the direction lane, stacked, directly under the player */
.moodlanewrap .sflane{margin-top:6px!important}
.sflane .sfk{cursor:ew-resize}
.moodlane .mlkf{cursor:ew-resize}

/* a lane border you can actually pull */
.lnrz{position:absolute;left:0;right:0;bottom:-3px;height:8px;cursor:ns-resize;z-index:20}
.lnrz:hover{background:linear-gradient(180deg,transparent,var(--acc));opacity:.55}
.lngrip{display:none!important}

/* cue library drag */
.sclib .mrow[draggable],.mlib .mrow[draggable]{cursor:grab}
.sclib .mrow.dragging,.mlib .mrow.dragging{opacity:.5}
.sclane.dropok{outline:2px dashed var(--acc);outline-offset:-2px}

/* ═══ v29 — footer console, side-by-side circles, active tab ═══ */

/* the active tab is marked `ac` by tabs() — every earlier highlight rule
   targeted `.on`, which the tab strip never uses. */
#tabs>*.ac,.tabs>*.ac{
  background:var(--acc)!important;color:var(--accink)!important;font-weight:700!important}
html[data-theme="stage"] #tabs>*.ac{background:rgba(255,255,255,.26)!important;color:#fff!important}
html[data-theme="grey"] #tabs>*.ac{background:var(--acc)!important;color:#fff!important}

/* page: player + timeline on top, console underneath, full width */
.scorepage.footmode .scbody{align-items:stretch}
.scorepage.footmode .scleft{display:flex;flex-direction:column;min-height:0}
.scorepage.footmode .scmon{flex:1 1 auto;min-height:340px}
.scorepage.footmode .scmon video{width:100%;height:100%;object-fit:contain;background:#000}
.scfoot{margin-top:12px;background:var(--card);border-radius:12px;padding:14px 16px}

/* the console lays out横 across the footer */
.scfoot .studio.wide.v28{width:100%}
.scfoot .stgrid.v28{
  grid-template-columns:minmax(0,320px) minmax(0,1fr) minmax(0,1.15fr)!important;
  gap:22px!important;align-items:start!important}
.scfoot .stcol.right{grid-column:1;order:0}
.scfoot .stcol.left{grid-column:2 / span 2;order:1;
  display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)!important;
  grid-template-rows:auto auto auto auto;gap:10px 18px!important;align-content:start}
.scfoot .stcol.left .stvoxrow{grid-column:1}
.scfoot .stcol.left>label.stf:first-of-type{grid-column:1}
.scfoot .stcol.left .strow{grid-column:1}
.scfoot .stcol.left>label.stf:last-of-type{grid-column:1}
.scfoot .stcol.left .stpv{grid-column:2;grid-row:1 / span 3;min-height:0!important}
.scfoot .stcol.left .stacts.v28{grid-column:2;grid-row:4}

/* the circles, side by side */
.stcol.right.sidebyside{
  display:grid!important;grid-template-columns:1fr 1fr!important;
  gap:14px!important;align-items:start!important}
.stcol.right.sidebyside .stwheelrow{
  grid-template-columns:1fr!important;justify-items:center!important;gap:4px!important}
.stcol.right.sidebyside .stwheelrow>.mestate{grid-column:1!important;grid-row:1}
.stcol.right.sidebyside .stwheelrow>.mewheel{grid-column:1!important;grid-row:2;margin:10px auto!important}
.stcol.right.sidebyside .stwheelrow::after{display:none}
.stcol.right.sidebyside .scfield{margin:0}
.stcol.right.sidebyside .sffrow{
  grid-template-columns:1fr!important;justify-items:center!important;gap:4px!important}
.stcol.right.sidebyside .sffrow .sfread{grid-column:1!important;grid-row:1;text-align:center}
.stcol.right.sidebyside .sfpad{grid-column:1!important;grid-row:2;margin:10px auto!important}
.stcol.right.sidebyside .sffrow::after{display:none}
.stcol.right.sidebyside .mewheel,.stcol.right.sidebyside .sfpad{
  width:132px!important;height:132px!important}
.stcol.right.sidebyside .mestate b,.stcol.right.sidebyside .sfread b{font-size:17px!important}

@media(max-width:1300px){
  .scfoot .stgrid.v28{grid-template-columns:1fr!important}
  .scfoot .stcol.left{grid-column:1!important;grid-template-columns:1fr!important}
  .scfoot .stcol.left .stpv{grid-column:1!important;grid-row:auto!important}
  .scfoot .stcol.left .stacts.v28{grid-column:1!important;grid-row:auto!important}}

/* v29.1 — the page fits the screen, and the two circles line up.
   The player grew to 1034px and pushed the footer off the bottom (page 1688
   against a 1300 viewport). It is capped to the room actually available, and
   the two circle blocks are given equal-height read-outs so their discs sit
   on the same line. */
.scorepage.footmode{max-height:100vh}
.scorepage.footmode .scbody{
  height:calc(100vh - 300px);min-height:320px;max-height:calc(100vh - 300px)}
.scorepage.footmode .scleft{height:100%;min-height:0}
.scorepage.footmode .scmon{flex:1 1 auto;min-height:200px;max-height:none}
.scorepage.footmode .scright{height:100%;min-height:0;display:flex;flex-direction:column}
.scorepage.footmode .sctl{flex:1 1 auto;min-height:0;overflow:auto}

.stcol.right.sidebyside{align-items:start!important}
.stcol.right.sidebyside .mestate,
.stcol.right.sidebyside .sfread{
  min-height:74px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px}
.stcol.right.sidebyside .mestate .pill.sm{margin-top:2px}
.stcol.right.sidebyside .sfread span{display:block;max-height:34px;overflow:hidden}
.scfoot{max-height:290px;overflow:auto}

/* v29.2 — the 140px of masthead + tab strip was missing from the body's
   height calc, so page ran 1427 against a 1300 viewport. And the field carried
   a caption the wheel does not, which pushed its disc 53px lower. */
.scorepage.footmode .scbody{
  height:calc(100vh - 440px)!important;max-height:calc(100vh - 440px)!important;min-height:280px}
.stcol.right.sidebyside .scfield>.lab{display:none!important}
.stcol.right.sidebyside .scfield{margin-top:0!important}

/* v29.3 — the circle column was 320px for two 132px discs whose label rings
   each need ~35px of clearance a side (404px of content). Widened, discs
   trimmed, labels tightened so the eight bearings stay readable. */
.scfoot .stgrid.v28{
  grid-template-columns:minmax(0,470px) minmax(0,1fr) minmax(0,1.1fr)!important}
.stcol.right.sidebyside{gap:8px!important}
.stcol.right.sidebyside .mewheel,.stcol.right.sidebyside .sfpad{
  width:112px!important;height:112px!important;margin:8px auto!important}
.stcol.right.sidebyside .melab,.stcol.right.sidebyside .sfl{
  font-size:7.5px!important;letter-spacing:.04em!important}
.stcol.right.sidebyside .mestate b,.stcol.right.sidebyside .sfread b{font-size:15px!important}
.stcol.right.sidebyside .mestate,.stcol.right.sidebyside .sfread{min-height:62px}
.stcol.right.sidebyside .sfread span{font-size:10px;line-height:1.35;max-height:28px}
.stcol.right.sidebyside .mestate .crumb{font-size:10px}

/* ═══ v30 — narrower player, fields beneath it, nothing scrolls ═══ */

/* the picture gives back a third of its width */
.scorepage.v30 .scbody{
  display:grid!important;grid-template-columns:minmax(0,.66fr) minmax(0,1fr)!important;
  gap:14px!important;
  height:calc(100vh - 300px)!important;max-height:calc(100vh - 300px)!important}
.scorepage.v30 .scleft{
  display:flex;flex-direction:column;gap:8px;min-height:0;overflow:hidden}
.scorepage.v30 .scmon{flex:0 0 auto;aspect-ratio:16/9;min-height:0;max-height:44vh}
.scorepage.v30 .scmon video{width:100%;height:100%;object-fit:contain;background:#000}

/* both keyframe lanes exactly the same height */
.scorepage.v30 .moodlane,.scorepage.v30 .sflane{
  height:22px!important;min-height:22px!important;margin:0!important}
.scorepage.v30 .moodlanewrap{margin:0!important;display:flex;flex-direction:column;gap:5px}
.scorepage.v30 .moodlanewrap .lab{margin:0!important}

/* the fields sit under the player, compact, and never scroll */
.scorepage.v30 .scleft .stcol.left{
  display:grid!important;grid-template-columns:1fr 1fr!important;
  gap:8px 12px!important;align-content:start;flex:1 1 auto;min-height:0;overflow:hidden}
.scorepage.v30 .scleft .stvoxrow{grid-column:1 / -1}
.scorepage.v30 .scleft>.stcol.left>label.stf{grid-column:1 / -1}
.scorepage.v30 .scleft .strow{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.scorepage.v30 .scleft .stacts.v28{grid-column:1 / -1;margin-top:2px}
.scorepage.v30 .scleft textarea{min-height:52px;max-height:70px}
.scorepage.v30 .scleft .stf small{font-size:9.5px!important;letter-spacing:.1em}
.scorepage.v30 .scleft .voxb{min-height:28px!important;font-size:11.5px!important}
.scorepage.v30 .scleft .stacts.v28 .gen{min-height:38px!important;font-size:13px!important}
.scorepage.v30 .scleft .stacts.v28 .ext{min-height:38px!important}

/* footer: the two circles and the prompt, side by side */
.scorepage.v30 .scfoot{
  display:grid!important;grid-template-columns:minmax(0,470px) minmax(0,1fr)!important;
  gap:20px!important;align-items:start!important;
  max-height:250px!important;overflow:hidden!important;margin-top:10px}
.scorepage.v30 .scfoot .studio{display:contents!important}
.scorepage.v30 .scfoot .stgrid.v28{display:contents!important}
.scorepage.v30 .scfoot .stcol.right{grid-column:1}
.scorepage.v30 .scfoot .stpv{grid-column:2;margin:0;max-height:230px;overflow:auto}
.scorepage.v30 .scfoot .sclib{grid-column:1 / -1}

/* the console itself never scrolls */
.scorepage.v30{overflow:hidden}

/* v30.1 — measured: masthead 121 + body 1000 + footer 250 = 1371 against a
   1300 viewport, and the player was still 974px wide (1007 before). The body
   height now accounts for the masthead and the footer, and the picture column
   drops to .55fr — 1007 → ~670, a third narrower as asked. */
.scorepage.v30 .scbody{
  grid-template-columns:minmax(0,.55fr) minmax(0,1fr)!important;
  height:calc(100vh - 400px)!important;max-height:calc(100vh - 400px)!important}
.scorepage.v30 .scmon{max-height:36vh}
.scorepage.v30 .scfoot{max-height:222px!important;overflow:hidden!important}
.scorepage.v30 .scfoot .stpv{max-height:200px}
.scorepage.v30 .scfoot .sclib{display:none}   /* the library lives in its own drawer */

/* v30.2 — 869 was still only 14% off; .45fr lands ~670, the third asked for.
   Footer was scrolling because the circle block runs ~230px against a 222 cap. */
.scorepage.v30 .scbody{grid-template-columns:minmax(0,.45fr) minmax(0,1fr)!important}
.scorepage.v30 .scfoot{max-height:250px!important}
.scorepage.v30 .scfoot .stcol.right.sidebyside .mewheel,
.scorepage.v30 .scfoot .stcol.right.sidebyside .sfpad{
  width:96px!important;height:96px!important;margin:6px auto!important}
.scorepage.v30 .scfoot .stcol.right.sidebyside .mestate,
.scorepage.v30 .scfoot .stcol.right.sidebyside .sfread{min-height:52px}
.scorepage.v30 .scfoot .stcol.right.sidebyside .mestate b,
.scorepage.v30 .scfoot .stcol.right.sidebyside .sfread b{font-size:13px!important}

/* v30.4 — the picture takes the whole monitor; reference row above the prompt */
.scorepage.v30 .scleft .scmon{
  display:flex!important;flex-direction:column;min-height:0;
  aspect-ratio:auto!important;max-height:none!important;flex:1 1 auto}
.scorepage.v30 .scleft .scmon>video{
  flex:1 1 auto!important;min-height:0!important;
  height:auto!important;max-height:none!important;width:100%!important;
  object-fit:contain;background:#000}
.scorepage.v30 .scleft .scmon>.scmonbar{flex:0 0 auto}
.strefrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 4px}
.strefrow .refname{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.strefrow .refx{padding:0 8px!important}
.strefrow .refw{flex:1 1 140px;min-width:120px;margin:0}
.strefrow .refw input[type=range]{width:100%}

/* v30.4b — the picture takes the full column width at its own 16:9, so there is
   no pillarboxing left either; 754px wide gives 424px of picture. */
.scorepage.v30 .scleft .scmon>video{
  flex:0 0 auto!important;width:100%!important;height:auto!important;
  aspect-ratio:16/9;max-height:none!important;object-fit:contain}
.scorepage.v30 .scleft .scmon{justify-content:flex-start}
.scorepage.v30 .scleft .scmon{flex:0 0 auto!important}
.scorepage.v30 .scleft .stcol.left{flex:1 1 auto;min-height:0}
.scorepage.v30 .scleft textarea{min-height:46px;max-height:56px}

/* v31.0 — the storyboard contact sheet */
.sbbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;margin:10px 0;
  background:var(--card,var(--card));border:1px solid var(--ln,rgba(255,255,255,.1));border-radius:6px}
.sbgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:8px 0 16px}
.sbcard{position:relative;border-radius:6px;overflow:hidden;cursor:pointer;background:var(--panel);
  border:1px solid var(--ln,rgba(255,255,255,.1));transition:border-color .12s,transform .12s}
.sbcard:hover{border-color:rgba(255,255,255,.32)}
.sbcard.on{border-color:var(--action,var(--acc));box-shadow:0 0 0 1px var(--action,var(--acc))}
.sbcard.stale{border-color:color-mix(in srgb,var(--warn) 60%,transparent)}
.sbcard img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.sbempty{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:16/9;
  color:rgba(255,255,255,.3);font-size:22px;background:repeating-linear-gradient(45deg,var(--panel),var(--panel) 8px,var(--panel) 8px,var(--panel) 16px)}
.sbempty.big{aspect-ratio:16/9;font-size:13px;border-radius:6px}
.sbcard .b{display:flex;align-items:center;gap:6px;padding:6px 8px;font-size:11px;background:rgba(0,0,0,.35)}
.sbcard .b .num{opacity:.5}
.sbcard .b .ti{opacity:.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sbtick{position:absolute;top:6px;left:6px;width:20px;height:20px;border-radius:50%;
  background:var(--ready,var(--ok));color:var(--accink);font-size:12px;display:flex;align-items:center;justify-content:center}
.qcb.corner{position:absolute;top:6px;right:6px}
.sbinsp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin:0 0 18px;
  padding:14px;background:var(--card,var(--card));border:1px solid var(--action,var(--acc));border-radius:6px}
.sbileft img{width:100%;border-radius:6px;display:block}
.sbires{margin-top:8px;align-items:center;gap:8px}
.sbihead{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.sbihead .ti{opacity:.7}
.sbiacts{margin:8px 0 4px;gap:8px;align-items:center}
.sbwarn{padding:8px 10px;margin-bottom:8px;border-radius:6px;font-size:12px;
  background:color-mix(in srgb,var(--warn) 12%,transparent);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);color:var(--warn)}
.sbiright textarea{width:100%}
@media(max-width:1100px){.sbinsp{grid-template-columns:1fr}}
/* v31.4 — the open shot announces itself when it scrolls in */
.sbinsp{scroll-margin:24px;animation:sbin .18s ease-out}
@keyframes sbin{from{opacity:.2;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* v32.0 — the storyboard strip: one panel per shot */
.pbscene{margin:8px 0 18px;border:1px solid var(--ln,rgba(255,255,255,.1));border-radius:6px;overflow:hidden}
.pbhead{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--card,var(--card));
  border-bottom:1px solid var(--ln,rgba(255,255,255,.1));font-size:12px;flex-wrap:wrap}
.pbhead .gntitle{opacity:.75}
.pbstrip{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px;padding:12px;background:var(--panel)}
.pbpanel{position:relative;border-radius:6px;overflow:hidden;cursor:pointer;background:var(--panel);
  border:1px solid var(--ln,rgba(255,255,255,.1));transition:border-color .12s}
.pbpanel:hover{border-color:rgba(255,255,255,.34)}
.pbpanel.on{border-color:var(--action,var(--acc));box-shadow:0 0 0 1px var(--action,var(--acc))}
.pbpanel.stale{border-color:color-mix(in srgb,var(--warn) 60%,transparent)}
.pbpanel img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.pbn{position:absolute;top:6px;left:6px;z-index:2;min-width:20px;height:20px;padding:0 5px;border-radius:4px;
  background:rgba(0,0,0,.62);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.pbtxt{padding:7px 9px;font-size:11px;line-height:1.42;opacity:.82;min-height:52px}
.pbnote{padding:0 9px 7px;font-size:11px;color:var(--warn)}
.pbshot{padding:10px 12px;margin-bottom:10px;border-radius:6px;font-size:12.5px;line-height:1.5;
  background:rgba(255,255,255,.04);border:1px solid var(--ln,rgba(255,255,255,.1))}
.pbinsp{margin:0 12px 14px}

/* v32.2 — look picker on the storyboard bar */
.lkpick{display:flex;align-items:center;gap:8px;margin-left:14px}
.lkpick small{font-size:10px;letter-spacing:.14em;color:var(--faint,rgba(255,255,255,.45))}
.lkpick select{width:auto;min-width:210px;font-size:12px;padding:4px 8px}

/* v32.3 — the design pad */
.dshost:empty{display:none}
.dspanel{display:grid;grid-template-columns:260px minmax(0,1fr);gap:22px;margin:0 0 14px;padding:16px 18px;
  background:var(--card,var(--card));border:1px solid var(--ln,rgba(255,255,255,.1));border-radius:6px}
.dspad{position:relative;width:100%;aspect-ratio:1;border-radius:6px;cursor:crosshair;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.05),transparent 70%),var(--panel);
  border:1px solid var(--ln,rgba(255,255,255,.12))}
.dspad::before,.dspad::after{content:'';position:absolute;background:rgba(255,255,255,.08)}
.dspad::before{left:50%;top:6%;bottom:6%;width:1px}
.dspad::after{top:50%;left:6%;right:6%;height:1px}
.dscorner{position:absolute;transform:translate(-50%,-50%);font-size:10px;letter-spacing:.06em;
  color:rgba(255,255,255,.5);white-space:nowrap;pointer-events:none;text-align:center}
.dsaxis{position:absolute;font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.28);pointer-events:none}
.dsaxis.x{left:50%;bottom:4px;transform:translateX(-50%)}
.dsaxis.y{left:6px;top:50%;transform:translateY(-50%) rotate(-90deg);transform-origin:left center}
.dsdot{position:absolute;width:14px;height:14px;border-radius:50%;transform:translate(-50%,-50%);
  background:var(--action,var(--acc));box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 28%,transparent);pointer-events:none}
.dsnow{margin-top:8px;font-size:12px;font-weight:600;text-align:center}
.dschips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px}
.dschip{padding:4px 10px;border-radius:999px;font-size:11.5px;cursor:pointer;
  background:transparent;color:inherit;border:1px solid var(--ln,rgba(255,255,255,.18))}
.dschip.on{background:var(--action,var(--acc));border-color:var(--action,var(--acc));color:#fff}
.dsprev{font-size:12px;line-height:1.55;opacity:.62;max-height:132px;overflow:auto}
@media(max-width:820px){.dspanel{grid-template-columns:1fr}}

/* v33.0 — the World tab */
.wdbar{margin-bottom:10px}
.wdlist{display:flex;flex-direction:column;gap:12px;margin:8px 0 20px}
.wdrow{border:1px solid var(--ln,rgba(255,255,255,.1));border-radius:6px;padding:14px 16px;background:var(--card,var(--card))}
.wdrow.committed{border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.wdrow.proposed{border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.wdhead{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.wdbrief{margin:7px 0 0;font-size:13px;line-height:1.55;opacity:.7;max-width:96ch}
.wdprops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.wdprops.one{grid-template-columns:minmax(0,260px)}
.wdprop{margin:0;position:relative;border-radius:6px;overflow:hidden;background:var(--panel);
  border:1px solid var(--ln,rgba(255,255,255,.1))}
.wdprop img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.wdprop.wait{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  aspect-ratio:3/4;color:rgba(255,255,255,.35);font-size:11px}
.wdprop figcaption{display:flex;align-items:center;gap:8px;padding:8px 10px}
.wdprop .m{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.62}
.wdprop figcaption .pill{margin-left:auto}
@media(max-width:820px){.wdprops{grid-template-columns:1fr}}

/* v34.0 — the World Designer star field */
.wxhost:empty{display:none}
.wxhost{margin:0 0 16px}
.wxbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;
  background:var(--card,var(--card));border:1px solid var(--ln,rgba(255,255,255,.1));
  border-radius:6px 6px 0 0;border-bottom:0}
.stf.inline{display:flex;align-items:center;gap:7px;margin:0}
.stf.inline small{font-size:10px;letter-spacing:.13em;opacity:.5}
.stf.inline select{width:auto;font-size:12px;padding:4px 8px}
.wxnow{font-size:12px;opacity:.72}
.wxfield{position:relative;height:min(58vh,540px);overflow:hidden;cursor:grab;
  background:radial-gradient(ellipse at 50% 45%,var(--panel),var(--panel) 72%);
  border:1px solid var(--ln,rgba(255,255,255,.1));border-radius:0}
.wxfield.grab{cursor:grabbing}
.wxinner{position:absolute;inset:0;transform-origin:50% 50%;transition:transform .12s ease-out}
.wxnode{position:absolute;transform:translate(-50%,-50%) scale(var(--far,1));width:132px;
  border-radius:5px;overflow:hidden;cursor:pointer;background:var(--panel);
  border:1px solid rgba(255,255,255,.14);opacity:calc(.45 + var(--far,1)*.55);
  transition:opacity .15s,border-color .15s,box-shadow .15s}
.wxnode:hover{border-color:rgba(255,255,255,.55);opacity:1;z-index:5}
.wxnode.sel{border-color:var(--action,var(--acc));box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 40%,transparent);z-index:6;opacity:1}
.wxnode.on{border-color:var(--ready,var(--ok))}
.wxnode img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.wxempty{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;
  color:rgba(255,255,255,.25);font-size:15px}
.wxempty.big{aspect-ratio:16/9;font-size:12px;border-radius:6px;background:var(--panel)}
.wxname{display:block;padding:5px 7px;font-size:10.5px;letter-spacing:.03em;
  background:rgba(0,0,0,.42);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wxpin{position:absolute;top:4px;left:4px;width:17px;height:17px;border-radius:50%;
  background:var(--ready,var(--ok));color:var(--accink);font-size:10px;display:flex;align-items:center;justify-content:center}
.wxvote{position:absolute;top:4px;right:4px;font-size:11px;padding:1px 5px;border-radius:3px;background:rgba(0,0,0,.55)}
.wxvote.up{color:var(--ok)}.wxvote.down{color:var(--bad)}
.wxaxes{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-around;
  padding:6px 0;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.25);pointer-events:none;background:linear-gradient(transparent,rgba(0,0,0,.5))}
.wxtaste{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 14px;font-size:12px;
  background:var(--card,var(--card));border:1px solid var(--ln,rgba(255,255,255,.1));border-top:0;border-radius:0 0 6px 6px}
.wxtaste .tl{color:var(--ok)}.wxtaste .th{color:var(--bad)}
.wxinsp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-top:12px;
  padding:16px 18px;background:var(--card,var(--card));border:1px solid var(--action,var(--acc));border-radius:6px}
.wxileft img{width:100%;border-radius:6px;display:block}
.wxihead{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.wxfeels{margin:0 0 10px;font-size:14px;opacity:.85}
.wxtags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.wxtag{font-size:10.5px;letter-spacing:.06em;padding:2px 8px;border-radius:999px;
  border:1px solid var(--ln,rgba(255,255,255,.16));opacity:.7}
.wxdna{margin:0 0 12px;font-size:13px;line-height:1.55;opacity:.66}
.wxacts{gap:8px;align-items:center;flex-wrap:wrap}
@media(max-width:900px){.wxinsp{grid-template-columns:1fr}.wxnode{width:104px}}

/* v34.2 — the designer is the page, not a drawer */
.wsec{margin:0 0 18px}
.wsechead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;cursor:pointer;
  padding:12px 2px 10px;border-bottom:1px solid var(--ln,rgba(255,255,255,.1));margin-bottom:12px}
.wsechead.plain{cursor:default;margin-top:26px}
.wsechead b{font-size:12px;letter-spacing:.18em}
.wsechead .crumb{font-size:11.5px;opacity:.5}
.wsechead .chev{opacity:.55}
.wxhost{margin:0}
.wxfield{height:min(66vh,620px)}
.wxnode{width:150px}
@media(max-width:900px){.wxnode{width:112px}.wxfield{height:52vh}}

/* ============ v35.0 — THE WORLD ROOM ============ */
.wroom{margin:14px 0 22px;border:1px solid var(--navy3);background:var(--panel);border-radius:10px;padding:16px 16px 18px}
.wrreel{margin:0 0 18px}
.wrhead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--card);padding-bottom:8px;margin-bottom:12px}
.wrn{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.16em;color:var(--warn)}
.wrhead b{font-size:14px;letter-spacing:.06em}
.wrrail{display:grid;grid-auto-flow:column;grid-auto-columns:150px;gap:10px;overflow-x:auto;padding:2px 2px 12px;scroll-snap-type:x proximity}
.wrrail.looks{grid-auto-columns:220px}
.wrcard{margin:0;position:relative;cursor:pointer;border:1px solid var(--navy3);background:var(--card);border-radius:6px;overflow:hidden;scroll-snap-align:start;transition:border-color .15s}
.wrcard:hover{border-color:var(--navy4)}
.wrcard.pri{border-color:var(--warn);box-shadow:0 0 0 1px var(--warn)}
.wrcard.sec{border-color:#8a6a2c;box-shadow:0 0 0 1px #8a6a2c}
.wrcard img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.wrcard.l img{aspect-ratio:16/9}
.wrcard figcaption{padding:6px 8px 8px}
.wrcard figcaption b{display:block;font-size:11.5px;line-height:1.15;letter-spacing:.03em;text-transform:uppercase}
.wrcard figcaption span{display:block;font-family:ui-monospace,Menlo,monospace;font-size:8.5px;letter-spacing:.06em;color:#77737a;margin-top:2px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wrtag{position:absolute;top:6px;left:6px;z-index:2;font-style:normal;font-family:ui-monospace,Menlo,monospace;font-size:8.5px;letter-spacing:.1em;background:var(--warn);color:var(--card);padding:3px 7px 2px;border-radius:2px}
.wrcard.sec .wrtag{background:#8a6a2c;color:#eee}
.wracts{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.wract{background:none;border:1px solid var(--navy3);border-radius:4px;color:#9a969e;padding:6px 13px 5px;cursor:pointer;font-size:12px;letter-spacing:.06em;text-transform:uppercase;text-align:left}
.wract:hover{color:#eee;border-color:var(--navy4)}
.wract.on{background:var(--warn);border-color:var(--warn);color:var(--card)}
.wract small{display:block;font-size:9px;letter-spacing:.03em;text-transform:none;opacity:.75;margin-top:2px}
.wrsoul{border-top:1px solid var(--card);padding-top:12px}
.wrsoulhead{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.wrsoultxt{font-style:italic;font-size:13.5px;line-height:1.55;color:#ddd8d0;max-height:110px;overflow-y:auto;padding:2px 2px 4px}
.wrtrip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
@media(max-width:900px){.wrtrip{grid-template-columns:1fr}}
.wrplate{margin:0;position:relative;border:1px solid var(--navy3);border-radius:6px;overflow:hidden;background:var(--card)}
.wrplate img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;cursor:zoom-in}
.wrpl{position:absolute;top:8px;left:8px;z-index:2;font-family:ui-monospace,Menlo,monospace;font-size:9px;letter-spacing:.12em;background:rgba(10,10,12,.85);color:var(--warn);padding:4px 9px 3px;border-radius:2px}
.wrplate figcaption{display:flex;align-items:center;gap:8px;padding:8px 10px;justify-content:space-between}
.wrwait{display:flex;align-items:center;justify-content:center;gap:10px;aspect-ratio:16/9;color:#77737a;font-size:12px}


/* ═══════════════════════════════════════════════════════════════════════════
   v36.0 — SOFT COMPACT · ASH ⇄ FOG                          (2026-09-02)
   The whole console re-skinned on two ideas Philip chose from the UI
   directions page: SOFT controls (pills, tonal fills, no hairlines) at DESK
   density (compact padding, 30px lanes, 12.5px type), and two palettes he
   can flip between — ASH (warm neutral grey, sand accent) and FOG (today's
   slate, warmed, de-contrasted, teal accent).

   Mechanics:
   1. TOKENS. Both palettes redefine every variable the file has ever read
      (v1 forest/mustard names included, so the login page follows too).
      ASH sits on :root and html[data-theme="ash"]; FOG on
      html[data-theme="fog"]. The picker (features.js v36.0) offers only
      these two and maps the old stored values onto ash.
   2. LITERAL SWEEP. Before this block was appended, a scripted pass replaced
      the hard-coded v25–v35 hexes (#0C0D13 storyboard ground, #101118
      panels, #7C5CFF selection purple, #5BA4D6 slate blue, #2FBF6B green,
      the slate tonal steps) with var() reads, so the World Room, storyboard,
      design pad and timeline follow the theme instead of overriding it.
      This is the one deliberate exception to app.css being append-only —
      colour literals only, no rule was moved or removed.
   3. COMPONENTS. Everything below re-shapes the controls. !important is
      used where the v25 slate sweep used it, so this block wins.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · tokens ─────────────────────────────────────────────────────────── */
:root,html[data-theme="ash"]{
  --bg:#191A1C; --softd:#141416; --panel:#141416;
  --card:#212226; --soft:#212226; --navy2:#212226; --navy:#1E1F22;
  --navy3:#2B2C31; --navy4:#37383E; --cue:#3A3B33; --ln2:#2B2C31;
  --ln:rgba(255,255,255,.055); --lift:rgba(255,255,255,.05);
  --ink:#E9E6DF; --ink2:#A9A69E; --ink3:#76736C;
  --acc:#C79A6B; --acc2:#C79A6B; --acc3:#D6AD82; --accink:#1C1610;
  --ac:#C79A6B; --ac2:#C79A6B;
  --ok:#84B394; --warn:#D3A45F; --bad:#CC8B80;
  --action:#C79A6B; --ready:#84B394; --faint:rgba(233,230,223,.42);
  --railbg:#191A1C; --rail-ink:#E9E6DF;
  /* v1 names the login page still reads */
  --forest:#191A1C; --forest2:#141416; --black:#141416; --mustard:#C79A6B; --mustard2:#D6AD82;
  --vanilla:#212226; --bone:#2B2C31; --espresso:#E9E6DF; --olive:#A9A69E;
  --blurple:#8E8477; --pink:#C79A6B; --green:#84B394;
  --r:12px; --sh:none; --sh2:0 24px 48px -28px rgba(0,0,0,.6);
  --f1:#4A3B2A; --f2:#20191A; --f3:#5C4630;
}
html[data-theme="fog"]{
  --bg:#26313A; --softd:#1F2931; --panel:#1F2931;
  --card:#2E3B45; --soft:#2E3B45; --navy2:#2E3B45; --navy:#2A3640;
  --navy3:#384852; --navy4:#445762; --cue:#3E5B5C; --ln2:#384852;
  --ln:rgba(255,255,255,.06); --lift:rgba(255,255,255,.05);
  --ink:#DCE4E9; --ink2:#9FAFB9; --ink3:#74858F;
  --acc:#6FA9A2; --acc2:#6FA9A2; --acc3:#89BDB6; --accink:#0F2320;
  --ac:#6FA9A2; --ac2:#6FA9A2;
  --ok:#7FB79B; --warn:#D6A868; --bad:#D18C81;
  --action:#6FA9A2; --ready:#7FB79B; --faint:rgba(220,228,233,.42);
  --railbg:#26313A; --rail-ink:#DCE4E9;
  --forest:#26313A; --forest2:#1F2931; --black:#1F2931; --mustard:#6FA9A2; --mustard2:#89BDB6;
  --vanilla:#2E3B45; --bone:#384852; --espresso:#DCE4E9; --olive:#9FAFB9;
  --blurple:#5E7F85; --pink:#6FA9A2; --green:#7FB79B;
  --f1:#3B5560; --f2:#1E2A31; --f3:#4E6B63;
}
html,body{background:var(--bg)!important;color:var(--ink)}
html[data-theme="fog"] body,html[data-theme="ash"] body,body{background-image:none!important}

/* ── 2 · type: quiet, sentence-case, compact ────────────────────────────── */
body,button,input,select,textarea{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif!important;
  -webkit-font-smoothing:antialiased}
body{font-size:12.5px}
.stagetitle,h1{font-size:26px!important;font-weight:400!important;letter-spacing:-.02em!important}
.modt,h2{font-size:18px!important;font-weight:400!important;letter-spacing:-.015em!important}
.gnsechead,.sechead,h3{font-size:15px!important;font-weight:500!important}
.lab,.mk-lab,.crumb,small,.inssec,th,.chips small,.rlab,.wsechead b,.tlhead>small,.thead b{
  letter-spacing:.04em!important;text-transform:none!important;font-weight:500!important}
th{font-size:10.5px!important;color:var(--ink3)!important;padding:6px 10px!important}
td{padding:7px 10px!important;border-top:1px solid var(--ln)!important}
.guides-banner,.stagesub,.gsub{letter-spacing:.06em!important;text-transform:none!important;
  font-weight:500!important;color:var(--ink3)!important}

/* ── 3 · surfaces: tone, not lines ──────────────────────────────────────── */
.panel,.card,.mod,.gncard,.studio,.scpanel,.binbox,.notes,.eictl,.modstage,.vs-bb,.gnscript,
.wdrow,.wxbar,.wxtaste,.wxinsp,.dspanel,.pbshot,.wroom,.rack,.bin,.tlwrap,.monitor,.edside,
.gnstat,.gnrow,.step,.qopt,.stcard,.projlist .pj,.actitem,.inspector,.compose,.cmp,.el,.clipcard{
  background:var(--card)!important;border:0!important;border-radius:12px!important;box-shadow:none!important}
.panel .panel,.card .card,.mod .card,.panel .card,.card .panel,.mod .panel,.studio .card,.studio .panel{
  background:transparent!important;border:0!important;padding:0!important}
.pbgrid,.pbpanel,.wdprop,.wxfield,.wxnode,.dspad,.wxempty.big,.tl,.monframe,.shotgrid .shot,.shot,
.pbtxt,.sthumb,.binlist,.stfield{border-color:transparent!important}
.pbgrid,.tl,.wxfield,.dspad,.wroom,.monframe{background:var(--panel)!important;border:0!important;border-radius:10px!important}
.pbpanel,.wdprop,.wxnode,.shot,.binclip,.el,.clipcard,.stcard{background:var(--navy3)!important;border:0!important;border-radius:9px!important;overflow:hidden}
.pbpanel.on,.wxnode.sel,.shot.on,.shot.sel,.binclip.on,.el.on,.stcard.on{box-shadow:0 0 0 2px var(--acc)!important}
.pbpanel.stale{box-shadow:0 0 0 2px color-mix(in srgb,var(--warn) 65%,transparent)!important}
.wxnode.on{box-shadow:0 0 0 2px var(--ok)!important}
.wdrow.committed{box-shadow:inset 3px 0 0 var(--ok)!important}
.wdrow.proposed{box-shadow:inset 3px 0 0 var(--warn)!important}
hr,.divider{border-color:var(--ln)!important}

/* ── 4 · controls: pills, tonal, compact ────────────────────────────────── */
.pill,.vb,.ico,.chip,.btn,.tbtn,.mtab,.contab,.movegrid>*,.dschip,.wxtag,.lock,.stpill,.led,.refpick,
button.pill,button.vb{
  background:var(--navy3)!important;background-image:none!important;
  border:0!important;color:var(--ink2)!important;border-radius:999px!important;
  font-weight:500!important;letter-spacing:0!important;text-transform:none!important;
  box-shadow:none!important;line-height:1.25!important;transition:background .14s,color .14s}
.pill,.vb,.btn,.refpick{padding:6px 13px!important;font-size:12px!important}
.ico,.chip,.tbtn,.dschip,.wxtag,.lock,.stpill{padding:4px 10px!important;font-size:11px!important}
.tbtn{padding:0!important;width:16px!important;height:16px!important;border-radius:5px!important;font-size:9px!important}
.pill:hover,.vb:hover,.ico:hover,.chip:hover,.btn:hover,.mtab:hover,.movegrid>*:hover,.dschip:hover,.refpick:hover{
  background:var(--navy4)!important;color:var(--ink)!important;transform:none!important}
.pill.go,.pill.pri,.pill.ac,.vb.go,.vb.pri,.btn.go,.btn.pri,#sendall,.movegrid>*.on,.chip.on,.mtab.on,.mtab[aria-selected="true"],
.contab.on,.dschip.on,.ico.ac,.tbtn.on,.vb.on,.pill.on,.refpick.on{
  background:var(--acc)!important;background-image:none!important;color:var(--accink)!important;font-weight:600!important}
.pill.ghost,.vb.ghost,.btn.ghost{background:transparent!important;color:var(--ink3)!important}
.pill.ghost:hover,.vb.ghost:hover{background:var(--navy3)!important;color:var(--ink2)!important}
.pill.gr,.vb.gr{background:var(--ok)!important;color:var(--accink)!important}
.pill.r,.chip.r,.vb.r,.pill.danger,.vb.danger{background:transparent!important;color:var(--bad)!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bad) 45%,transparent)!important}
.pill:disabled,.vb:disabled,.btn:disabled{opacity:.35!important;background:var(--navy3)!important;color:var(--ink2)!important}
.led{padding:3px 9px!important;font-size:10px!important;font-weight:600!important;letter-spacing:.02em!important}
.led.amber,.led.warn{background:color-mix(in srgb,var(--warn) 20%,transparent)!important;color:var(--warn)!important}
.led.red,.led.stop{background:color-mix(in srgb,var(--bad) 20%,transparent)!important;color:var(--bad)!important}
.led.green,.led.ok,.led.on{background:color-mix(in srgb,var(--ok) 20%,transparent)!important;color:var(--ok)!important}

/* the rail */
.top{background:var(--bg)!important;border-bottom:0!important;padding:12px 24px 4px!important;gap:10px!important}
.top .logo{font-weight:700!important;letter-spacing:.16em!important;font-size:11.5px!important}
.top .logo i{color:var(--acc)!important}
#tabs,.tabs{display:flex!important;gap:3px!important;padding:3px!important;margin:6px auto 4px!important;
  background:var(--softd)!important;border-radius:999px!important;border:0!important;
  width:max-content!important;max-width:calc(100% - 48px)!important;overflow-x:auto}
#tabs>*,.tabs>*{flex:0 0 auto!important;background:transparent!important;border:0!important;border-radius:999px!important;
  padding:7px 18px!important;color:var(--ink3)!important;font-weight:500!important;box-shadow:none!important}
#tabs>* .t,.tabs>* .t{font-family:inherit!important;font-size:12.5px!important;font-weight:inherit!important;
  letter-spacing:0!important;text-transform:none!important}
#tabs>*:hover,.tabs>*:hover{color:var(--ink)!important;background:var(--navy3)!important}
#tabs>*.ac,.tabs>*.ac,#tabs>*.on,.tabs>*.on{background:var(--acc)!important;color:var(--accink)!important;font-weight:600!important}
#tabs>*.ac::after,.tabs>*.ac::after{display:none!important}
#tabs.rowmode .stage,.tabs.rowmode .stage{flex:0 0 auto!important;padding:7px 18px!important}
.thmmenu{background:var(--card)!important;border:0!important;border-radius:12px!important;box-shadow:var(--sh2)!important;padding:6px!important}
.thmmenu button{border-radius:8px!important;background:transparent!important;color:var(--ink2)!important;padding:8px 10px!important}
.thmmenu button:hover{background:var(--navy3)!important;color:var(--ink)!important}
.thmsw{border:0!important;border-radius:5px!important}

/* fields */
input,select,textarea,.stf select,.lkpick select{
  background:var(--softd)!important;border:0!important;border-radius:10px!important;color:var(--ink)!important;
  padding:8px 12px!important;font-size:12.5px!important;box-shadow:none!important}
input::placeholder,textarea::placeholder{color:var(--ink3)!important}
input:focus,textarea:focus,select:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 26%,transparent)!important;outline:none!important}
.code,pre,.lcd{background:var(--softd)!important;border:0!important;border-radius:10px!important;color:var(--ink2)!important}
.lcd,.tc,.mono{font-family:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace!important;font-variant-numeric:tabular-nums}
.lcd{color:var(--ink)!important;padding:5px 10px!important;font-size:12.5px!important}

/* checkboxes → soft tick, switches stay switches */
input[type=checkbox]{width:17px!important;height:17px!important;border-radius:5px!important;
  background:var(--navy3)!important;border:0!important;padding:0!important;box-shadow:none!important}
input[type=checkbox]:checked{background:var(--acc)!important}
input[type=checkbox]:checked::after{color:var(--accink)!important;font-size:11px!important}
input[type=radio]{accent-color:var(--acc)}
.keepsw,.sw,.tog{background:var(--navy4)!important;border:0!important;border-radius:999px!important}
.keepsw.on,.sw.on,.tog.on{background:var(--acc)!important}

/* sliders — 5px track, round ink thumb, accent fill where JS sets --p */
input[type=range]{-webkit-appearance:none!important;appearance:none!important;background:transparent!important;
  height:auto!important;padding:0!important;border:0!important;box-shadow:none!important;border-radius:0!important}
input[type=range]::-webkit-slider-runnable-track{height:5px!important;border-radius:99px!important;
  background:linear-gradient(to right,var(--acc) var(--p,0%),var(--navy4) var(--p,0%))!important;border:0!important}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none!important;width:17px!important;height:17px!important;
  border-radius:50%!important;background:var(--ink)!important;border:0!important;margin-top:-6px!important;
  box-shadow:0 2px 6px rgba(0,0,0,.35)!important;cursor:grab}
input[type=range]::-moz-range-track{height:5px;border-radius:99px;background:var(--navy4);border:0}
input[type=range]::-moz-range-progress{height:5px;border-radius:99px;background:var(--acc)}
input[type=range]::-moz-range-thumb{width:17px;height:17px;border-radius:50%;background:var(--ink);border:0}
input:focus[type=range]{box-shadow:none!important}
.knob .k{border-color:var(--navy4)!important;background:var(--softd)!important}

/* meters, bars, progress */
.pbar,.meter,.prog,.credbar{height:5px!important;border-radius:99px!important;background:var(--navy3)!important;border:0!important;overflow:hidden}
.pbar>i,.pbar>b,.pbar>span,.meter>i,.prog>i,.credbar>i{background:var(--acc)!important;border-radius:99px!important}
.pbar.ok>i,.pbar.done>i{background:var(--ok)!important}

/* status */
.g,.ok,.stok{color:var(--ok)!important}.r,.bad,.stbad{color:var(--bad)!important}.y,.warn,.stwarn{color:var(--warn)!important}
.b{color:var(--acc)!important}
.toast{background:var(--navy4)!important;color:var(--ink)!important;border:0!important;border-radius:999px!important;
  box-shadow:var(--sh2)!important;font-weight:500!important;padding:10px 20px!important}
.toast.err,.toast.bad{background:color-mix(in srgb,var(--bad) 28%,var(--navy4))!important}
.pbnote,.wxtaste .th{color:var(--warn)!important}
.wxtaste .tl,.wxvote.up{color:var(--ok)!important}.wxvote.down{color:var(--bad)!important}
.stepnum,.stepn,.step .n,.cmdhead .n{background:var(--acc)!important;color:var(--accink)!important;border:0!important}
.missbar{color:var(--bad)!important}
.demo{background:var(--warn)!important;color:var(--accink)!important}

/* ── 5 · timeline & edit — desk density in soft clothes ─────────────────── */
:root{--lane-h:30px}
.tl{padding:8px!important}
.thead{background:var(--softd)!important;border:0!important;border-radius:8px!important;color:var(--ink2)!important;font-size:11px!important}
.thead.muted{opacity:.5}
.track{background:var(--softd)!important;border:0!important;border-radius:8px!important}
.tclip,.binclip{background:var(--navy4)!important;background-image:none!important;border:0!important;
  border-radius:8px!important;color:var(--ink)!important;box-shadow:none!important}
.tclip.on,.tclip.sel{box-shadow:0 0 0 2px var(--acc)!important}
.tclip b{color:var(--ink)!important}.tclip .crumb{color:var(--ink2)!important}
.tedge{background:transparent!important}
.tclip.on .tedge{background:var(--acc)!important;opacity:.85;width:6px!important}
.gap2{border:1px dashed var(--ln2)!important;border-radius:8px!important;color:var(--ink3)!important;background:transparent!important}
.gap2.on,.gap2:hover{border-color:var(--acc)!important;color:var(--acc)!important;background:color-mix(in srgb,var(--acc) 10%,transparent)!important}
.mcue,.sccue,.mregion{background:color-mix(in srgb,var(--ok) 32%,var(--navy3))!important;background-image:none!important;border:0!important;
  border-radius:8px!important;color:var(--ink)!important}
.tcard{background:var(--navy3)!important;border:0!important;border-radius:8px!important;color:var(--ink2)!important}
.playhead,.ph{background:var(--bad)!important}
.playhead::before,.ph::before{background:var(--bad)!important;border-radius:2px!important}
.ruler2{color:var(--ink3)!important;font-size:9.5px!important}
.ruler2 span::after{background:var(--ink3)!important}
.nmark{background:var(--warn)!important}
.monbar{gap:8px!important}
.monframe{border-radius:10px!important;background:#000!important}
.tlane,.tlx{background:var(--softd)!important;border-color:transparent!important;border-radius:6px!important}
.binlist .binclip{border-radius:8px!important}
.binclip.used{opacity:.45}
.edprod .tabs .stage,.edprod #tabs .stage{padding:6px 14px!important}

/* ── 6 · World Room, storyboard, design pad ─────────────────────────────── */
.wroom{padding:14px 14px 16px!important}
.wrhead,.wsechead{border-bottom:1px solid var(--ln)!important}
.wxfield{border-radius:10px!important}
.wxnode img,.pbpanel img,.wdprop img{border-radius:0!important}
.wxname{background:rgba(0,0,0,.45)!important}
.pbn{background:rgba(0,0,0,.55)!important;border-radius:5px!important}
.pbtxt{color:var(--ink2)!important;opacity:1!important}
.dsdot{background:var(--acc)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 28%,transparent)!important}
.dspad::before,.dspad::after,.wxaxes{color:var(--ink3)!important}
.wxaxes{background:linear-gradient(transparent,rgba(0,0,0,.45))!important}

/* ── 7 · login & landing follow the palette ─────────────────────────────── */
.login{background:var(--bg)!important}
.lbox{background:var(--card)!important;color:var(--ink)!important;border-radius:16px!important;border:0!important;box-shadow:var(--sh2)!important}
.lbox .logo,.lbox h1{color:var(--ink)!important}.lbox .logo i{color:var(--acc)!important}
.lbox .sub,.lbox .hint{color:var(--ink3)!important}
.lbox input{background:var(--softd)!important;border:0!important;color:var(--ink)!important;margin-bottom:10px!important}
.lbox .pill.go{background:var(--acc)!important;color:var(--accink)!important;border-radius:999px!important}
.lbox a{color:var(--acc)!important}
.lglow.a{background:radial-gradient(circle,color-mix(in srgb,var(--acc) 55%,transparent),transparent 70%)!important}
.lglow.b{background:radial-gradient(circle,color-mix(in srgb,var(--ok) 40%,transparent),transparent 70%)!important}
.lcard{background:var(--card)!important;border-radius:16px!important;box-shadow:0 40px 80px -30px rgba(0,0,0,.7)!important}
.lcard.c1 .frame{background:linear-gradient(135deg,var(--f2) 0%,var(--f1) 40%,var(--acc) 75%,var(--f3) 100%)!important;border-radius:10px!important}
.lcard.c2 .lane{background:linear-gradient(90deg,var(--acc),var(--acc3))!important}
.lcard.c2 .lane.l2{background:linear-gradient(90deg,var(--warn),var(--navy4))!important}
.lcard.c2 .lane.l3{background:repeating-linear-gradient(90deg,var(--ok) 0 4px,transparent 4px 12px)!important}
.lcard .wave{background:var(--acc)!important}

/* ── 8 · scrollbars & selection ─────────────────────────────────────────── */
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:var(--navy4);border-radius:99px;border:2px solid var(--bg)}
*::-webkit-scrollbar-track{background:transparent}
::selection{background:color-mix(in srgb,var(--acc) 40%,transparent)}
:focus-visible{outline:2px solid var(--acc)!important;outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* v36.0 · the Script page's own boxes (v18 Cinemaid era) drew their own hairlines */
.scbox,.sccard,.sctarget,.epname,.srefbox,.drop,.askbig,.askside,.chatbox,.scfinal,.screate,.gstrip,
.stylecard,.stylebox,.reflist,.refbox,.mjbox,.notebox,.qbox,.lookbox{
  background:var(--card)!important;background-image:none!important;border:0!important;border-radius:12px!important;box-shadow:none!important}
.scbox .scbox,.sccard .sccard,.card .scbox,.panel .scbox,.scbox .sctarget,.scbox .epname,.scbox .srefbox,.scbox .drop{
  background:var(--softd)!important;border-radius:10px!important}
.drop{border:1px dashed var(--ln2)!important}
.drop:hover,.drop.over{border-color:var(--acc)!important}
.sprcard,.sradd,.psbtn,.screatego,.pdtab{background:var(--navy3)!important;border:0!important;border-radius:10px!important;color:var(--ink2)!important;box-shadow:none!important}
.sprcard.on,.pdtab.on,.psbtn.on,.screatego{background:var(--acc)!important;color:var(--accink)!important}
.sprcard.new,.sradd{border:1px dashed var(--ln2)!important;background:transparent!important;color:var(--ink3)!important}
.stagesub,.guides-banner,.gsub,.tabsub,.stagehint,#stagehint,.pagehint,.banner-guide{
  letter-spacing:.05em!important;text-transform:none!important;font-weight:500!important;color:var(--ink3)!important;font-size:11.5px!important}

/* v36.0 · second sweep — the v8 blurple family (#8FC4E8, rgba(109,124,255,·), rgba(139,151,255,·)) now reads the accent */
:root,html[data-theme="ash"]{--teal:var(--acc3);--coral:var(--bad);--yellow:var(--warn);--blurple:var(--acc);--blurple2:var(--acc3)}
html[data-theme="fog"]{--teal:var(--acc3);--coral:var(--bad);--yellow:var(--warn);--blurple:var(--acc);--blurple2:var(--acc3)}
.guidetab span{font-family:inherit!important;font-weight:500!important;font-size:11.5px!important;letter-spacing:.06em!important;color:var(--ink3)!important}
.mtab,.contab,.pdtab{text-transform:none!important;letter-spacing:0!important}
.kfm{background:var(--acc3)!important;border-color:var(--card)!important}
.kfm.inh{border-color:color-mix(in srgb,var(--acc) 50%,transparent)!important}
.bedge.l,.bedge.r{background:color-mix(in srgb,var(--acc) 60%,transparent)!important}
.beat{color:var(--acc3)!important;border-color:var(--acc3)!important}
.tlframes{background:var(--panel)!important;border-radius:8px!important}
.tlframes i.ph{background:var(--navy3)!important;opacity:.6!important;filter:none!important}
.tlane{background:var(--softd)!important}
.tlane.alane{box-shadow:none!important}

/* ═══════════════════════════════════════════════════════════════════════════
   v37.0 — SIMPLE MODE components (see features.js v37.0)
   ═══════════════════════════════════════════════════════════════════════════ */
.pghead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin:6px 0 16px;padding:0 2px}
.pgh-t{font-size:24px;font-weight:400;letter-spacing:-.02em;color:var(--ink);line-height:1.15}
.pgh-s{font-size:13px;color:var(--ink2);margin-top:5px;max-width:72ch;line-height:1.5}
.pgh-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pgh-r .pgh-primary{background:var(--acc)!important;color:var(--accink)!important;font-weight:600!important;
  padding:9px 18px!important;font-size:13px!important;border-radius:999px!important}
.pgh-r .pgh-x{background:var(--navy3)!important;color:var(--ink2)!important}

.stepstrip{display:flex;gap:4px;margin:0 0 16px;padding:3px;background:var(--softd);border-radius:999px;width:max-content;max-width:100%;overflow-x:auto}
.stepstrip .step{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;border:0;border-radius:999px;
  background:transparent;color:var(--ink3);font:500 12.5px/1.2 inherit;cursor:pointer;white-space:nowrap}
.stepstrip .step i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;
  font-weight:700;background:var(--navy3);color:var(--ink2)}
.stepstrip .step.done{color:var(--ink2)}.stepstrip .step.done i{background:color-mix(in srgb,var(--ok) 28%,transparent);color:var(--ok)}
.stepstrip .step.now{background:var(--navy3);color:var(--ink)}.stepstrip .step.now i{background:var(--acc);color:var(--accink)}
.stepstrip .step.todo{opacity:.6}
.stepstrip .step:hover{color:var(--ink)}

.s37fold{margin:10px 0 0}
.s37fold>summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;padding:9px 12px;border-radius:10px;
  background:var(--softd);color:var(--ink2);font-size:12.5px;font-weight:500;user-select:none}
.s37fold>summary::-webkit-details-marker{display:none}
.s37fold>summary::before{content:"›";display:inline-block;width:14px;color:var(--ink3);transition:transform .15s;font-size:15px;line-height:1}
.s37fold[open]>summary::before{transform:rotate(90deg)}
.s37fold>summary:hover{color:var(--ink);background:var(--navy3)}
.s37fold .fold-c{margin-left:auto;font-size:11px;color:var(--ink3);font-weight:400}
.s37fold[open]>summary{margin-bottom:10px}
.s37fold.inline{display:inline-block;margin:0}
.s37fold.inline>summary{padding:4px 10px;font-size:11.5px}
.s37fold.inline[open]>summary{margin-bottom:0}

.stepbar{display:none;width:100%;text-align:left;border:0;background:transparent;color:var(--ink2);padding:2px 0;
  align-items:baseline;gap:12px;font:inherit;cursor:pointer}
.stepbar b{color:var(--ink);font-weight:600}.stepbar span{color:var(--ink3);font-size:12px}
.stepbar em{margin-left:auto;font-style:normal;color:var(--acc);font-size:12px}
.s37-collapsed{padding:12px 18px!important;min-height:0!important}
.s37-collapsed>.stepbar{display:flex}
.s37-collapsed>*:not(.stepbar){display:none!important}
.s37-collapsed:hover{background:var(--navy3)!important}

.s37-hide{display:none!important}
.s37-quiet .gnstat{opacity:.75}
.s37-quiet{padding:8px 12px!important}
.s37note{padding:16px 18px;border-radius:12px;background:var(--card);color:var(--ink2);font-size:13.5px;margin:0 0 16px;line-height:1.5}
.s37note.empty{border-left:3px solid var(--acc)}
.s37note b{color:var(--ink);font-weight:600}
.s37note a{color:var(--acc);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--acc) 50%,transparent)}
#simpleBtn{font-size:11.5px!important}
body.simple .sbbar .gnstat b,body.simple .sbbar .gnstat{font-size:12px}
body.simple .schead p,body.simple .scbox .schead p{max-width:60ch;margin-left:auto;margin-right:auto}
body.simple .scnum{width:24px!important;height:24px!important;font-size:11px!important}
body.simple .scbox .schead h2,body.simple .sccard .schead h2{font-size:16px!important;text-transform:none!important}
body.simple .cmdhead h1{font-size:22px!important}
body.simple #paneltog{writing-mode:horizontal-tb!important;height:auto!important;width:auto!important;padding:8px 12px!important;
  border-radius:999px!important;background:var(--navy3)!important;color:var(--ink)!important;font-size:12px!important;
  top:10px!important;right:10px!important;left:auto!important;transform:none!important}
body.simple #paneltog b{font-weight:600}
body[data-tab="Script"] .pghead,body[data-tab="Script"] .stepstrip{max-width:1000px;margin-left:auto;margin-right:auto}
body.simple #drop{padding:22px!important}
body.simple #drop *{font-family:inherit!important;letter-spacing:.01em!important;text-transform:none!important;font-style:normal!important}
body.simple #drop b,body.simple #drop h2,body.simple #drop h3,body.simple #drop .dt{font-size:16px!important;font-weight:600!important;color:var(--ink)!important}
body.simple #drop small,body.simple #drop .crumb{font-size:11.5px!important;color:var(--ink3)!important}
body.simple .stage.nopanel .stageplayer{max-height:44vh!important}
body.simple .stage.nopanel .stageplayer .monframe,body.simple .stage.nopanel .stageplayer video{max-height:44vh!important;margin:0 auto}
body.simple .stage.nopanel .stageplayer{display:flex;justify-content:center}
#simpleBtn{margin-right:6px}
.s37-show{display:block!important;font-size:13.5px!important;color:var(--ink2)!important}
.s37-show b{color:var(--ink)!important}
body.simple .stage.nopanel .stageplayer{display:block!important}
body.simple .stage.nopanel .stageplayer .monframe{max-width:calc(44vh * 16 / 9)!important;margin:0 auto!important}
body.simple .stage.nopanel .stageplayer{background:var(--panel)!important;border-radius:10px!important}
body[data-tab="Team"] .pghead{max-width:840px;margin-left:auto;margin-right:auto}

/* ═══ v37.1 — the Script page as one column, one voice ═══ */
body.simple[data-tab="Script"] #app{max-width:820px;margin:0 auto;padding-left:24px;padding-right:24px}
body.simple[data-tab="Script"] .sctitle{font-size:26px;font-weight:400;letter-spacing:-.02em;color:var(--ink);margin:6px 0 14px}
body.simple[data-tab="Script"] .stepstrip{margin:0 0 18px}
body.simple[data-tab="Script"] .panel.scwrap{background:transparent!important;padding:0!important;margin:0!important}
body.simple[data-tab="Script"] .scbox.sccard,body.simple[data-tab="Script"] .panel.sccard{padding:24px 26px!important;margin:0 0 12px!important;text-align:left}
body.simple[data-tab="Script"] .scbox>*,body.simple[data-tab="Script"] .sccard>*{max-width:none!important;margin-left:0!important;margin-right:0!important}
body.simple[data-tab="Script"] .schead{text-align:left;padding:0 0 14px;margin:0 0 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--ln)}
body.simple[data-tab="Script"] .schead h2{font-size:17px!important;font-weight:500!important;text-transform:none!important;margin:0!important}
body.simple[data-tab="Script"] .scnum{width:22px!important;height:22px!important;font-size:11px!important;margin:0!important}
/* the brief */
body.simple[data-tab="Script"] .epname{display:block;margin:0 0 18px}
body.simple[data-tab="Script"] .epnbody{width:100%}
body.simple[data-tab="Script"] .epname small,body.simple[data-tab="Script"] .chips>small,body.simple[data-tab="Script"] .sctarget>small,body.simple[data-tab="Script"] .s37lab{
  display:block;font-size:11.5px!important;letter-spacing:.04em!important;text-transform:none!important;color:var(--ink3)!important;font-weight:500!important;margin:0 0 6px;width:auto!important}
body.simple[data-tab="Script"] .epnfield input{font-size:20px!important;padding:8px 0!important;background:transparent!important;border-radius:0!important;border-bottom:1px solid var(--ln2)!important}
body.simple[data-tab="Script"] .epnfield input:focus{box-shadow:none!important;border-bottom-color:var(--acc)!important}
body.simple[data-tab="Script"] .chips{display:block;margin:0 0 16px}
body.simple[data-tab="Script"] .chips .chip{margin:0 6px 6px 0}
body.simple[data-tab="Script"] .sctarget{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:0!important;background:transparent!important}
body.simple[data-tab="Script"] .sctarget>small{margin:0;min-width:52px}
body.simple[data-tab="Script"] .sctline{flex:1;display:flex;align-items:center;gap:12px}
body.simple[data-tab="Script"] .sctline b{font-size:14px!important;font-family:inherit!important;min-width:44px;text-align:right}
body.simple[data-tab="Script"] .s37mat{margin:0 0 6px}
body.simple[data-tab="Script"] #sbrief{min-height:132px;font-size:14px!important;line-height:1.55!important;padding:12px 14px!important}
body.simple[data-tab="Script"] #drop{margin:8px 0 0!important;padding:10px 14px!important;display:flex!important;align-items:baseline;gap:10px;text-align:left;border-radius:10px!important}
body.simple[data-tab="Script"] #drop b{font-size:12.5px!important;font-weight:500!important;color:var(--ink2)!important}
body.simple[data-tab="Script"] #drop .crumb{font-size:11px!important;color:var(--ink3)!important;font-family:inherit!important}
body.simple[data-tab="Script"] #srcs:not(:empty){margin:8px 0 0}
body.simple[data-tab="Script"] .s37fold{margin:12px 0 0}
body.simple[data-tab="Script"] .s37cta{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin:18px 0 0;padding-top:16px;border-top:1px solid var(--ln)}
body.simple[data-tab="Script"] .s37cta .pill.ac{padding:10px 20px!important;font-size:13.5px!important}
/* the beats */
body.simple[data-tab="Script"] #bs{margin:0}
/* refine */
body.simple[data-tab="Script"] .askbig{display:block!important;padding:0!important;background:transparent!important}
body.simple[data-tab="Script"] #askbigt{min-height:110px;width:100%;font-size:14px!important}
body.simple[data-tab="Script"] .askrow{justify-content:flex-start!important;gap:10px;margin-top:10px}
body.simple[data-tab="Script"] .intgate{text-align:left;justify-content:flex-start}
body.simple[data-tab="Script"] .scfinal,body.simple[data-tab="Script"] #screate{text-align:left}
body.simple[data-tab="Script"] .s37-collapsed{padding:14px 20px!important}
body.simple[data-tab="Script"] .stepbar span{margin-left:4px}

/* ============ v37.1 — Edit-tab paper cuts (2026-09-03) ============ */
/* 1 — the "Cut the episode" header band is gone; only the action buttons survive, right-aligned and slim */
.pghead[data-s37="edit"]{margin:0 0 8px!important;padding:0!important;min-height:0!important;justify-content:flex-end!important}
.pghead[data-s37="edit"] .pgh-l{display:none!important}

/* 2 — the "Shot console" pill becomes the same vertical chevron tab as the console's own collapse handle (#paneledge), mirrored onto the right edge */
body.simple #paneltog{writing-mode:horizontal-tb!important;width:18px!important;height:92px!important;padding:0!important;
  top:50%!important;right:0!important;left:auto!important;transform:translateY(-50%)!important;
  border-radius:10px 0 0 10px!important;background:var(--bg)!important;color:var(--ink2)!important;
  font-size:12px!important;letter-spacing:0!important;font-weight:400!important;opacity:.75;box-shadow:var(--neu-out)}
body.simple #paneltog:hover{opacity:1;color:#fff!important}
#paneltog b{display:none!important}

/* 3 — SHOT LANES expander is a vertical tab on the LEFT of the lanes; the row it used to occupy goes back to the lanes */
.edstage .lanesrow{display:flex;gap:6px;align-items:stretch;min-width:0}
.edstage .lanesrow>.score{flex:1 1 auto;min-width:0}
.edstage .lanesbar{flex:0 0 20px;flex-direction:column!important;justify-content:flex-start;align-items:center;gap:8px!important;
  padding:6px 0!important;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.02);align-self:stretch}
.edstage .lanesbar .lb-l{writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:2px}
.edstage.noscore .lanesrow{min-height:34px}

/* 3b — equal lane thickness in the Edit stage (frames strip keeps its thumbnails) */
.edstage .tlane,.edstage .tlane.alane,.edstage .tlane.cuts{height:16px!important}

/* ============ v37.2 — chevron alignment · uncropped lanes · no label (2026-09-03) ============ */
/* the two console chevrons sit on the same horizontal line */
#paneledge{top:120px!important;transform:none!important}
.edstage #paneltog,body.simple #paneltog{top:120px!important;transform:none!important}

/* the lanes row inherits the exact flex role the score had as a direct .pcol child — this is what cropped the lanes */
.edstage .edcols .pcol>.lanesrow{flex:1 1 auto;min-height:0;width:100%;overflow:hidden}
.edstage .lanesrow>.score{flex:1 1 auto;min-width:0;min-height:0;height:auto;overflow:hidden}

/* the SHOT LANES text goes — the tab is the chevron alone */
.edstage .lanesbar .lb-l{display:none!important}
.edstage .lanesbar{flex-basis:18px;border-radius:10px;padding:0!important;justify-content:center}
.edstage .lanesbar .lb-t{width:100%;height:64px;border:0;background:none;font-size:12px}
/* v37.2b — the s3.s4 rule (flex:0 0 auto) outranked the lanes-row sizing; end the fight */
.stage.s3.s4.edstage .stageC .lanesrow>.score,.edstage .lanesrow>.score{flex:1 1 auto!important;min-width:0!important;width:auto!important}
/* v37.2c — both chevrons take their vertical position from one shared var (set by JS to the player's centre) */
#paneledge{top:var(--chev-top,120px)!important;transform:none!important}
.edstage #paneltog,body.simple #paneltog{top:var(--chev-top,120px)!important;transform:none!important}

/* ============ v37.3 — small lanes tab · vsfoldb on the player line · truly uniform lanes ============ */
/* the folded-strip handle takes the same player-centre line as the console chevron */
.edcols>.vsfoldb{align-self:flex-start!important;margin-top:var(--chev-top,66px)!important}

/* the SHOT LANES tab is a small button, not a full-height rail */
.edstage .lanesbar{align-self:flex-start!important;height:auto!important;flex:0 0 18px!important;
  border:0!important;background:none!important;padding:0!important;border-radius:0!important}
.edstage .lanesbar .lb-t{width:18px;height:26px;border:1px solid rgba(255,255,255,.12)!important;
  border-radius:6px!important;background:rgba(255,255,255,.04)!important;font-size:10px}

/* lanes LOOK equal, not just measure equal: every block fills its 16px lane */
.edstage .tlane .tblk{height:100%!important;top:0!important;margin:0!important}
.edstage .tlane .adot{height:12px!important;width:12px!important;max-height:12px!important;top:2px!important}
.edstage .tlframes{height:16px!important}
/* v37.3b — an older margin!important shorthand outranked the player-line margin; outrank it back */
.edstage.vsfold .edcols>.vsfoldb,.edstage .edcols>.vsfoldb{margin:var(--chev-top,66px) 6px 0 0!important;align-self:flex-start!important}

/* ============ v37.4 — the lanes hug their content; the viewer takes the space ============ */
/* the lanes row stops absorbing the leftover column height (that was the void, expanded AND collapsed) */
.edstage .edcols .pcol>.lanesrow{flex:0 0 auto!important;min-height:0!important}
.stage.s3.s4.edstage .stageC .lanesrow>.score,.edstage .lanesrow>.score{flex:0 0 auto!important;height:auto!important;min-height:0!important}
/* the player is the flex:1 of the column — it grows by exactly what the lanes gave back */
.edstage .pcol .stageplayer{flex:1 1 0!important;min-height:220px}

/* ============ v37.5 — lanes full width when open · collapsed space goes to the timeline ============ */
/* expanded: the score fills the row horizontally (the v37.4 flex:0 collapsed its WIDTH — the row is horizontal) */
.stage.s3.s4.edstage .stageC .lanesrow>.score,.edstage .lanesrow>.score{flex:1 1 auto!important;min-width:0!important;width:auto!important;height:auto!important;min-height:0!important}

/* collapsed: the viewer column stops reserving the lanes' old height — the player keeps its
   16:9 frame (no grey letterbox band) and the TIMELINE inherits the freed space */
.edstage.noscore .edcols{flex:0 0 auto!important;height:auto!important;min-height:0!important}
.edstage.noscore .pcol .stageplayer{flex:0 0 auto!important;aspect-ratio:16/9;max-height:56vh;min-height:220px;width:100%}
.edstage.noscore .stageC .tlwrap.edtl{flex:1 1 auto!important;min-height:0!important}
/* v37.6 — the un-folded Soul block loses the fold chrome */
details[data-s37-fold="wd-soul"]{border:0!important;background:none!important;padding:0!important;margin:0!important}
details[data-s37-fold="wd-soul"]>summary{display:none!important}

/* ============ v37.7 — THE DESIGN FIELD ============ */
.wrfield{position:relative;width:min(420px,100%);aspect-ratio:1/1;border:1px solid #2a2a31;border-radius:10px;
  overflow:hidden;cursor:crosshair;background:#101014;user-select:none;touch-action:none}
.wrfield .fc{position:absolute;width:50%;height:50%;object-fit:cover;opacity:.42;pointer-events:none;filter:saturate(.85)}
.wrfield .fc.tl{left:0;top:0}.wrfield .fc.tr{right:0;top:0}.wrfield .fc.bl{left:0;bottom:0}.wrfield .fc.br{right:0;bottom:0}
.wrfield:hover .fc{opacity:.55}
.wrfield .fl{position:absolute;font:700 9px ui-monospace,Menlo,monospace;letter-spacing:.12em;color:#e8e5df;
  background:rgba(10,10,12,.72);padding:3px 7px;border-radius:3px;pointer-events:none}
.wrfield .fl.tl{left:8px;top:8px}.wrfield .fl.tr{right:8px;top:8px}
.wrfield .fl.bl{left:8px;bottom:8px}.wrfield .fl.br{right:8px;bottom:8px}
.wrfield .fax{position:absolute;font:600 8.5px ui-monospace,Menlo,monospace;letter-spacing:.1em;color:#8a8780;pointer-events:none}
.wrfield .fax.x{left:50%;bottom:3px;transform:translateX(-50%)}
.wrfield .fax.y{left:3px;top:50%;transform:translate(-50%,0) rotate(-90deg);transform-origin:center}
.wrfield .fdot{position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid #d9a441;
  background:rgba(217,164,65,.25);transform:translate(-50%,-50%);pointer-events:none;opacity:.35}
.wrfield .fdot.on{opacity:1;background:#d9a441;box-shadow:0 0 14px rgba(217,164,65,.5)}
.wrfon{font:700 9px ui-monospace,Menlo,monospace;letter-spacing:.12em;color:#141414;background:#d9a441;padding:3px 8px;border-radius:3px}
.wrfoff{font:700 9px ui-monospace,Menlo,monospace;letter-spacing:.12em;color:#77737a}

/* ============ v37.8 — THE STYLE ATLAS ============ */
.atfind{flex:1 1 240px;min-width:200px;background:rgba(255,255,255,.04);border:1px solid #2a2a31;border-radius:8px;
  color:#eee;padding:8px 12px;font-size:13px;outline:none}
.atfind:focus{border-color:#d9a441}
.atboard{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px 14px;
  max-height:460px;overflow-y:auto;padding:2px 2px 8px}
.atstyle .atsh{display:flex;align-items:baseline;gap:8px;margin-bottom:5px}
.atstyle .atsh b{font-size:12.5px;letter-spacing:.02em}
.atstyle .atsh span{font-family:ui-monospace,Menlo,monospace;font-size:8.5px;color:#77737a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atstyle .atg{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.atv{position:relative;aspect-ratio:16/9;border-radius:5px;overflow:hidden;cursor:pointer;background:#0d0d10}
.atv img{width:100%;height:100%;object-fit:cover;display:block}
.atv:hover{outline:1px solid #4a4a55}
.atv.sel{outline:2px solid #d9a441}
.atchk{position:absolute;top:4px;right:4px;width:17px;height:17px;border-radius:50%;background:#d9a441;color:#141414;
  font-size:10px;font-weight:700;font-style:normal;display:grid;place-items:center}
.attray{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding:10px 12px;
  background:rgba(217,164,65,.06);border:1px solid rgba(217,164,65,.25);border-radius:10px}
.atslot{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.05);border-radius:7px;padding:4px 8px 4px 4px;font-size:12px}
.atslot img{width:42px;height:24px;object-fit:cover;border-radius:4px}
.atslot b{font-weight:600}
.atslot i{font-style:normal;cursor:pointer;color:#77737a;margin-left:2px}
.atslot i:hover{color:#eee}

/* ============ v37.9 — atlas refit: one plate per style ============ */
.atboard.one{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;max-height:430px}
.atone{position:relative;border-radius:7px;overflow:hidden;cursor:pointer;background:#0d0d10;aspect-ratio:16/9}
.atone img{width:100%;height:100%;object-fit:cover;display:block}
.atone:hover{outline:1px solid #4a4a55}
.atone.sel{outline:2px solid #d9a441}
.atone .atcap{position:absolute;left:0;right:0;bottom:0;padding:14px 8px 5px;background:linear-gradient(transparent,rgba(8,8,10,.88))}
.atone .atcap b{display:block;font-size:11.5px;line-height:1.1}
.atone .atcap span{display:block;font-family:ui-monospace,Menlo,monospace;font-size:8px;color:#a9a69e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============ v38.3 — bigger plates · text diet ============ */
.atboard.one{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))!important;gap:12px!important;max-height:600px!important}
.atone .atcap b{font-size:12.5px}
/* the explainer crumbs go — the controls speak for themselves */
.wroom .wrhead .crumb{display:none!important}
.wroom .wrsoulhead .crumb{display:none!important}
body[data-tab="Elements"] .pghead .pgh-s{display:none!important}
.pghead[data-s37="cast"] .pgh-s{display:none!important}
.wsechead .crumb{display:none!important}
.wrsoultxt{font-size:13px;max-height:96px}

/* v38.4 — cast atlas plates: the lineup is wide (3 people), give cards more width */
.atboard.one.cast{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))!important}
.atboard.one.cast .atone img{aspect-ratio:16/9;object-fit:cover;width:100%}

/* ============================================================================
   v39.0 — THE PIPELINE: navigator rail, folded sections, Guided/Studio toggle
   ========================================================================= */
:root{--gdrail:248px}
body.gdslim{--gdrail:64px}
body.gd #tabs,body #simpleBtn{display:none!important}
#gdrail{position:fixed;left:0;top:60px;bottom:0;width:var(--gdrail);z-index:28;background:var(--card);border-right:1px solid var(--ln);display:flex;flex-direction:column;overflow:hidden;transition:width .22s cubic-bezier(.2,.8,.2,1)}
#gdrail .gdtop{display:flex;justify-content:flex-end;padding:8px 8px 0}
#gdrail .gdcol{width:28px;height:28px;border-radius:7px;color:var(--ink3);font-size:16px;line-height:1;display:grid;place-items:center;border:0;background:none;cursor:pointer}
#gdrail .gdcol:hover{background:var(--bg);color:var(--ink)}
#gdrail .gdep{margin:6px 10px 6px;padding:9px 11px;border:1px solid var(--ln);border-radius:10px;background:var(--bg);display:flex;align-items:center;gap:9px;text-align:left;cursor:pointer;color:var(--ink);width:calc(100% - 20px)}
#gdrail .gdep.on{border-color:var(--acc)}
#gdrail .gdep .gddot{width:8px;height:8px;border-radius:50%;background:var(--acc);flex:0 0 auto}
#gdrail .gdep b{display:block;font-weight:600;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#gdrail .gdep small{display:block;font:10.5px var(--mono);color:var(--ink3);letter-spacing:.3px}
#gdrail .gdsteps{display:flex;flex-direction:column;gap:2px;padding:6px 8px;flex:1;overflow:auto}
#gdrail .gdutil{border-top:1px solid var(--ln);padding:8px 8px 12px;display:flex;flex-direction:column;gap:2px}
#gdrail .gdstep{display:grid;grid-template-columns:30px 1fr;align-items:center;gap:10px;padding:8px 9px;border-radius:10px;border:0;background:none;cursor:pointer;text-align:left;color:var(--ink3);position:relative;width:100%}
#gdrail .gdstep:hover{background:var(--bg);color:var(--ink)}
#gdrail .gdstep.cur{background:color-mix(in srgb,var(--acc) 14%,transparent);color:var(--ink)}
#gdrail .gdstep .n{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--ln);display:grid;place-items:center;font:500 11px var(--mono);justify-self:center}
#gdrail .gdstep.done .n{border-color:var(--ok);color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}
#gdrail .gdstep.cur .n{background:var(--acc);border-color:var(--acc);color:#1c1406;font-weight:600}
#gdrail .gdstep .t{display:block;font-weight:700;font-size:12.5px;letter-spacing:.2px;white-space:nowrap}
#gdrail .gdstep .s{display:block;font:10.5px var(--mono);color:var(--ink3);white-space:nowrap;margin-top:1px}
#gdrail .gdstep.cur .s{color:var(--acc)}
#gdrail .gdutil .n{border:0;font-size:14px}
body.gdslim #gdrail .gdep{padding:9px 0;justify-content:center;margin:6px 10px}
body.gdslim #gdrail .gdep .l,body.gdslim #gdrail .gdstep .l{display:none}
body.gdslim #gdrail .gdstep{grid-template-columns:30px;justify-items:center;padding:8px 0}
body.gdslim #gdrail .gdtop{justify-content:center}
/* the page moves over */
#app.wrap,#app{padding-left:calc(var(--gdrail) + 32px)!important;padding-right:32px!important;max-width:none!important;transition:padding-left .22s cubic-bezier(.2,.8,.2,1)}
.cmdbar{left:calc(50% + var(--gdrail)/2)!important;width:min(880px,calc(100vw - var(--gdrail) - 88px))!important}
body.gdeps .projstrip.s37-hide,body.gdeps .projstrip.gd-hide{display:block!important}
.gd-hide{display:none!important}
/* header */
.gd-eyebrow{font:11px var(--mono);letter-spacing:.8px;text-transform:uppercase;color:var(--acc);margin-bottom:4px}
body.gd .pghead{max-width:960px;margin-bottom:14px}
/* sections */
body.gd #app>.gdsec{max-width:960px;border:1px solid var(--ln);border-radius:14px;background:var(--card);overflow:hidden;margin:0 0 8px}
body.gd #app>.gdsec.open{box-shadow:0 14px 40px -26px rgba(0,0,0,.55)}
body.gd #app>.gdsec.gdlock{opacity:.55}
.gdsec>.gdh{display:grid;grid-template-columns:28px 1fr auto;gap:14px;align-items:center;width:100%;padding:13px 18px;text-align:left;border:0;background:none;cursor:pointer;color:var(--ink);font:inherit}
.gdsec.open>.gdh{border-bottom:1px solid var(--ln)}
.gdsec>.gdh .m{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--ln);display:grid;place-items:center;font:500 11px var(--mono);color:var(--ink3)}
.gdsec.done>.gdh .m{border-color:var(--ok);color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}
.gdsec.open>.gdh .m{background:var(--acc);border-color:var(--acc);color:#1c1406;font-weight:600}
.gdsec>.gdh .t{font-weight:700;font-size:14px}
.gdsec>.gdh .sum{display:block;font-size:12.5px;color:var(--ink3);margin-top:1px}
.gdsec.done>.gdh .sum{color:var(--ok)}
.gdsec>.gdh .act{font:11px var(--mono);letter-spacing:.3px;color:var(--ink3)}
.gdsec.done>.gdh .act{color:var(--acc)}
.gdsec>.gdb{display:none;padding:16px 18px 14px}
.gdsec.open>.gdb{display:block}
.gdsec .gdb>.wroom.gdshell{margin:0 0 6px;padding:0;background:none;border:0}
.gdsec .gdb>.wroom.gdshell .wrreel{margin:0}
.gdsec .gdb .stepbar{display:none}
.gdsec .gdb>.sbbar{margin:0 0 14px}
.gdf{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:12px;border-top:1px dashed var(--ln)}
.gdf .hint{color:var(--ink3);font-size:12.5px;flex:1}
.gdf .pill.sm{padding:8px 14px;font-weight:700}
@media (max-width:900px){:root{--gdrail:64px}#gdrail .gdep .l,#gdrail .gdstep .l{display:none}#gdrail .gdstep{grid-template-columns:30px;justify-items:center}#gdrail .gdtop{display:none}#app.wrap,#app{padding-left:calc(var(--gdrail) + 14px)!important;padding-right:14px!important}}
.gdtog{display:inline-flex;border:1px solid var(--ln);border-radius:999px;overflow:hidden;margin-right:6px}
.gdtog button{padding:6px 13px;font-size:12px;font-weight:600;color:var(--ink3);border:0;background:none;cursor:pointer;font-family:inherit}
.gdtog button.on{background:var(--acc);color:#1c1406}
#gdrail .gdtop{justify-content:space-between;align-items:center;padding:10px 10px 0}
#gdrail .gdep .l{display:block;min-width:0;flex:1}
body.gdslim #gdtog{display:none}
body.gd #app>.sctitle{max-width:960px;margin-bottom:14px;font-size:24px;letter-spacing:-.02em;line-height:1.15}
body.gd #app>.sctitle .gd-eyebrow{font-size:11px;letter-spacing:.8px;line-height:1.4}
/* the Edit console needs the width — the navigator folds to icons there */
body.gd[data-tab="Edit"]:not(.gdeditwide){--gdrail:64px}
body.gd[data-tab="Edit"]:not(.gdeditwide) #gdrail .gdep .l,body.gd[data-tab="Edit"]:not(.gdeditwide) #gdrail .gdstep .l,body.gd[data-tab="Edit"]:not(.gdeditwide) #gdtog{display:none}
body.gd[data-tab="Edit"]:not(.gdeditwide) #gdrail .gdstep{grid-template-columns:30px;justify-items:center;padding:8px 0}
body.gd[data-tab="Edit"]:not(.gdeditwide) #gdrail .gdep{padding:9px 0;justify-content:center}
body.gd[data-tab="Edit"]:not(.gdeditwide) #gdrail .gdtop{justify-content:center}
/* the section header already names the act */
body.gd .gdsec .gdb>.acthead{display:none}

/* ===== v39.1 — pipeline pass two ===== */
body.gd #app>.gdsec,body.gd .pghead,body.gd #app>.sctitle{max-width:1320px}
.gdf{gap:10px;margin-top:14px;padding-top:12px}
.gdf .gdsp{flex:1}
.gdf .pill.gdback{padding:10px 16px;font-size:13px}
.gdf .pill.gdnext{padding:13px 26px;font-size:14.5px;font-weight:800;border-radius:12px;box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}
/* less scrolling: grids */
body.gd .gdsec .wdlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:12px;align-items:start}
body.gd .gdsec .wdlist>.wdrow{margin:0}
body.gd .gdsec .wdprops.one img,body.gd .gdsec .wdprops.one video{max-height:240px;width:auto}
body.gd .gdsec .atboard.one{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))!important;max-height:440px!important;gap:8px!important}
body.gd .gdsec .atboard.one.cast{grid-template-columns:repeat(auto-fill,minmax(236px,1fr))!important}
body.gd .gdsec .atboard:not(.one){max-height:440px;overflow:auto}
/* fluff out */
body.gd .pgh-s,body.gd .gdsec .gdb>.wsechead,body.gd .gdsec .sbbar .gnstat,body.gd .gdsec .wrhead .wrn,body.gd .gdsec .wrhead>b,body.gd .gdsec .wrhead .crumb,body.gd .gdsec .note,body.gd .gdsec .s37note:not(.empty){display:none!important}
body.gd .gdsec .sbbar{padding:0;border:0;background:none;box-shadow:none;margin:0 0 10px}
body.gd .gdsec .sbbar .sp{display:none}
body.gd .gdsec .wrhead{padding:0;margin:0 0 8px;min-height:0;justify-content:flex-end}
/* one button language inside the guided sections: primary = amber, secondary = outlined, same height */
body.gd .gdsec .pill{min-height:32px;padding:7px 14px;font-size:12.5px;font-weight:700;border-radius:9px;line-height:1.2}
body.gd .gdsec .pill.sm{min-height:30px;padding:6px 12px;font-size:12px}
body.gd .gdsec .pill.ghost{border:1px solid var(--ln);color:var(--ink);background:transparent}
body.gd .gdsec .pill.ghost:hover{border-color:var(--ink2)}
body.gd .gdsec .wdhead .pill{opacity:1;color:var(--ink);border:1px solid var(--ln)}
body.gd .gdsec .wdhead{margin-bottom:6px}
body.gd .gdsec .wracts{margin-bottom:8px}
/* v39.1b — committed cards go compact: picture left, name + brief right */
body.gd .gdsec .wdrow:has(.wdprops.one){display:grid;grid-template-columns:150px minmax(0,1fr);grid-template-areas:"props head" "props brief";gap:4px 14px;align-items:start;padding:12px}
body.gd .gdsec .wdrow:has(.wdprops.one)>.wdhead{grid-area:head}
body.gd .gdsec .wdrow:has(.wdprops.one)>.wdbrief{grid-area:brief;font-size:12.5px;line-height:1.45}
body.gd .gdsec .wdrow:has(.wdprops.one)>.wdprops.one{grid-area:props;grid-template-columns:1fr!important;margin:0!important}
body.gd .gdsec .wdrow:has(.wdprops.one) .wdprop img,body.gd .gdsec .wdrow:has(.wdprops.one) .wdprop video{max-height:none;width:100%;aspect-ratio:3/4;object-fit:cover}
body.gd .gdsec .wdlist{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
body.gd .gdsec .wdrow .pill,body.gd .gdsec .sbbar .pill{color:var(--ink)!important;opacity:1!important;font-size:12px!important;padding:6px 12px!important;border:1px solid var(--ln)!important;min-height:30px;border-radius:9px!important}
body.gd .gdsec .wdrow .pill.ac,body.gd .gdsec .sbbar .pill.ac{background:var(--acc)!important;color:#1c1406!important;border-color:var(--acc)!important}
body.gd .gdsec .wdrow:has(.wdprops.one){align-content:start}
body.gd .gdsec .wdrow:has(.wdprops.one)>.wdbrief{margin-top:2px}

/* ===== v39.2 — pipeline pass three ===== */
body.gd #app>.gdsec,body.gd .pghead,body.gd #app>.sctitle{max-width:1500px;margin-left:auto;margin-right:auto}
/* buttons live beside the open box, not under it */
body.gd #app>.gdsec.open{display:grid;grid-template-columns:minmax(0,1fr) 210px;grid-template-areas:"h h" "b f"}
body.gd #app>.gdsec.open>.gdh{grid-area:h}
body.gd #app>.gdsec.open>.gdb{grid-area:b;min-width:0}
body.gd #app>.gdsec>.gdf{display:none}
body.gd #app>.gdsec.open>.gdf{grid-area:f;display:flex;flex-direction:column;gap:10px;align-items:stretch;margin:0;padding:18px 18px 18px 0;border:0;position:sticky;top:76px;align-self:start}
body.gd #app>.gdsec.open>.gdf .gdsp{display:none}
body.gd #app>.gdsec.open>.gdf .pill.gdnext{order:0;padding:16px 18px;font-size:14.5px;text-align:center;justify-content:center;white-space:normal;line-height:1.25}
body.gd #app>.gdsec.open>.gdf .pill.gdback{order:1;text-align:center;justify-content:center}
/* bigger pictures */
body.gd .gdsec .wdrow:has(.wdprops.one){grid-template-columns:210px minmax(0,1fr)}
body.gd .gdsec .wdlist{grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}
body.gd .gdsec .atboard.one{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))!important;max-height:560px!important}
body.gd .gdsec .atboard.one.cast{grid-template-columns:repeat(auto-fill,minmax(310px,1fr))!important}
/* storyboard: the six panels of a scene on one line */
@media (min-width:1100px){body.gd .pbstrip{grid-template-columns:repeat(6,minmax(0,1fr))!important}}
@media (max-width:1099px){body.gd .pbstrip{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
/* shot lanes: thicker, square cuts */
.edstage .tlane,.edstage .tlane.cam,.edstage .tlane.light{height:66px!important;border-radius:3px!important}
.edstage .tlane.alane{height:66px!important;border-radius:3px!important}
.edstage .tlane.cuts{height:40px!important;border-radius:3px!important}
.edstage .tlane.cuts .cut{border-radius:0!important}
.edstage .tlframes{border-radius:3px!important;height:66px!important}
.edstage .tclip,.edstage .tblk{border-radius:3px!important}
.edstage .tlane.alane::before{border-radius:3px!important}
/* labelled handles */
.edstage #paneltog,.edstage #paneledge,.edstage .vsfoldb{writing-mode:vertical-rl;text-orientation:mixed;width:26px!important;height:auto!important;min-height:0!important;padding:12px 4px!important;font:800 9.5px "Noto Sans",system-ui,sans-serif!important;letter-spacing:.16em;line-height:1;display:flex!important;align-items:center;justify-content:center}
.edstage .chevl{white-space:nowrap}
/* v39.2b — the handles are relabelled in CSS: other layers keep rewriting their text */
.edstage #paneltog,.edstage #paneledge,.edstage .vsfoldb{font-size:0!important;color:transparent!important}
.edstage #paneltog *,.edstage #paneledge *,.edstage .vsfoldb *{display:none!important}
.edstage #paneltog::after,.edstage #paneledge::after,.edstage .vsfoldb::after{font:800 9.5px "Noto Sans",system-ui,sans-serif;letter-spacing:.16em;color:var(--ink2);white-space:nowrap}
.edstage #paneltog::after{content:"❮  CONSOLE"}
.edstage #paneledge::after{content:"CONSOLE  ❯"}
.edstage .vsfoldb::after{content:"CLIPS"}
.edstage #paneltog:hover::after,.edstage #paneledge:hover::after,.edstage .vsfoldb:hover::after{color:var(--ink)}
.edstage #paneltog::after,.edstage #paneledge::after{writing-mode:vertical-rl;text-orientation:mixed;display:block}
.edstage #paneltog,.edstage #paneledge{overflow:visible!important}

/* ============================================================================
   v39.3 — ONE LANGUAGE. Philip: "have eyes… lots of inconsistencies… console
   button vs clips button vs Back to the shot… streamline the entire site.
   I like the softness, light grey and the toggles" (reference dashboard).
   · Every control is one of four things: PRIMARY (accent fill), SOFT (tonal
     grey fill), CHIP (round, tonal, accent when on), SWITCH (on/off).
   · One height (34px; small 28px), one radius (10px; chips round), one type
     size (12.5px / small 11.5px), one weight (600; primary 700).
   · Cards: no hairline borders — a tonal surface with a soft ambient shadow.
   · CLOUD theme: the light-grey soft look with a charcoal navigator.
   ========================================================================= */
/* -- buttons -- */
.pill,.vb,.btn,.refpick,button.pill,button.vb,a.pill{
  min-height:34px!important;padding:0 14px!important;font-size:12.5px!important;font-weight:600!important;
  border-radius:10px!important;display:inline-flex!important;align-items:center;justify-content:center;gap:6px;
  background:var(--navy3)!important;color:var(--ink)!important;line-height:1.2!important;white-space:nowrap}
.pill.sm,.vb.sm,.btn.sm,.ico,.chip,.dschip,.wxtag,.stpill{min-height:28px!important;padding:0 11px!important;font-size:11.5px!important;font-weight:600!important;border-radius:9px!important;display:inline-flex!important;align-items:center;gap:5px}
.pill.go,.pill.pri,.pill.ac,.vb.go,.vb.pri,.btn.go,.btn.pri,#sendall,.pill.on,.vb.on{background:var(--acc)!important;color:var(--accink)!important;font-weight:700!important}
.pill.ghost,.vb.ghost,.btn.ghost{background:transparent!important;color:var(--ink2)!important}
.pill.ghost:hover,.vb.ghost:hover,.btn.ghost:hover{background:var(--navy3)!important;color:var(--ink)!important}
.pill.gr,.vb.gr{background:var(--ok)!important;color:var(--accink)!important}
.pill:disabled,.vb:disabled,.btn:disabled{opacity:.4!important}
.tbtn{width:18px!important;height:18px!important;border-radius:6px!important;min-height:0!important;padding:0!important}
/* -- chips (round, tonal, accent when on): atlas / act / cast / group chips -- */
.wract,.chip,.dschip,.mtab,.contab,.movegrid>*{border-radius:999px!important;background:var(--navy3)!important;border:0!important;color:var(--ink2)!important;
  text-transform:none!important;letter-spacing:0!important;font-size:12px!important;font-weight:600!important;padding:0 13px!important;min-height:30px!important;display:inline-flex!important;align-items:center;gap:6px;text-align:left}
.wract small{font-size:10.5px!important;color:inherit!important;opacity:.7;margin-left:4px;font-family:inherit!important;letter-spacing:0!important;text-transform:none!important}
.wract.on,.chip.on,.dschip.on,.mtab.on,.contab.on,.movegrid>*.on{background:var(--acc)!important;color:var(--accink)!important}
.wract.on small{opacity:.8}
.wracts{gap:6px!important}
/* -- section headers and page heads -- */
.gdsec>.gdh .t{font-size:14px!important;font-weight:700}
.gdsec>.gdh .sum{font-size:12px}
.pgh-t{font-size:26px!important;font-weight:700!important;letter-spacing:-.02em!important}
/* -- cards: tonal surface, no hairlines -- */
body.gd #app>.gdsec{border:0!important;background:var(--card);box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px -22px rgba(0,0,0,.5)}
body.gd #app>.gdsec.open{box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 24px 48px -28px rgba(0,0,0,.6)}
body.gd #app>.gdsec.open>.gdh{border-bottom-color:var(--ln)}
body.gd .gdsec .wdrow,body.gd .gdsec .wrreel,body.gd .gdsec .panel{border:0!important;background:var(--navy2)!important;box-shadow:none!important;border-radius:12px!important}
body.gd .gdsec .wdrow.committed{box-shadow:inset 3px 0 0 var(--ok)!important}
body.gd .gdsec .wdrow.proposed{box-shadow:inset 3px 0 0 var(--warn)!important}
#gdrail{border-right:0!important;background:var(--railbg)!important;box-shadow:12px 0 40px -30px rgba(0,0,0,.5)}
#gdrail .gdstep{color:color-mix(in srgb,var(--rail-ink) 60%,transparent)}
#gdrail .gdstep .t{color:inherit}
#gdrail .gdstep:hover{background:color-mix(in srgb,var(--rail-ink) 8%,transparent);color:var(--rail-ink)}
#gdrail .gdstep.cur{color:var(--rail-ink)}
#gdrail .gdstep .n{border-color:color-mix(in srgb,var(--rail-ink) 22%,transparent)}
#gdrail .gdep{background:color-mix(in srgb,var(--rail-ink) 7%,transparent);border:0;color:var(--rail-ink)}
#gdrail .gdep small{color:color-mix(in srgb,var(--rail-ink) 55%,transparent)}
#gdrail .gdutil{border-top-color:color-mix(in srgb,var(--rail-ink) 10%,transparent)}
#gdrail .gdcol{color:color-mix(in srgb,var(--rail-ink) 60%,transparent)}
/* -- the Guided switch -- */
.gdtog{border:0;background:color-mix(in srgb,var(--rail-ink) 10%,transparent);border-radius:999px;padding:3px;gap:0;position:relative}
.gdtog button{position:relative;z-index:1;padding:5px 12px;border-radius:999px;font-size:11.5px;font-weight:700;color:color-mix(in srgb,var(--rail-ink) 55%,transparent);transition:color .18s}
.gdtog button.on{background:var(--acc);color:var(--accink)}
/* -- the Edit handles: three of a kind -- */
.edstage #paneltog,.edstage #paneledge,.edstage .vsfoldb{background:var(--navy3)!important;border:0!important;border-radius:8px!important;box-shadow:none!important}
.edstage #paneltog::after,.edstage #paneledge::after,.edstage .vsfoldb::after{writing-mode:vertical-rl;text-orientation:mixed;display:block;color:var(--ink2)}
.edstage .vsfoldb{width:26px!important;padding:12px 4px!important}
.edstage .cbback.cbbackbig{font:700 12.5px inherit!important;letter-spacing:0!important;text-transform:none!important;background:var(--navy3)!important;color:var(--ink)!important;border-radius:10px!important;padding:0 14px!important;min-height:34px!important;display:inline-flex!important;align-items:center;gap:6px}
.edstage .cbback.cbbackbig em{font-style:normal}
/* -- top bar: same soft pills -- */
.top .pill{min-height:32px!important;padding:0 13px!important}

/* ── CLOUD theme: the light-grey soft look ───────────────────────────── */
html[data-theme="cloud"]{
  --bg:#EEF0F5; --softd:#E4E7EF; --panel:#E4E7EF;
  --card:#FFFFFF; --soft:#FFFFFF; --navy2:#F4F5F9; --navy:#F7F8FB;
  --navy3:#E7E9F0; --navy4:#DADDE7; --cue:#E9E4D3; --ln2:#DFE2EA;
  --ln:rgba(20,22,40,.07); --lift:rgba(20,22,40,.04);
  --ink:#23252E; --ink2:#5C6070; --ink3:#8E92A2;
  --acc:#5F6BD8; --acc2:#5F6BD8; --acc3:#8A7BE2; --accink:#FFFFFF;
  --ac:#5F6BD8; --ac2:#5F6BD8;
  --ok:#3FA872; --warn:#D99A3E; --bad:#D4675A;
  --action:#5F6BD8; --ready:#3FA872; --faint:rgba(35,37,46,.42);
  --railbg:#2B2D35; --rail-ink:#F2F3F7;
  --forest:#2B2D35; --forest2:#23252E; --black:#23252E; --mustard:#5F6BD8; --mustard2:#8A7BE2;
  --vanilla:#FFFFFF; --bone:#F4F5F9; --espresso:#23252E; --olive:#5C6070;
  --blurple:#5F6BD8; --pink:#8A7BE2; --green:#3FA872;
  --r:14px; --sh:none; --sh2:0 24px 48px -30px rgba(30,34,60,.25);
  --f1:#D9DCF2; --f2:#EEF0F5; --f3:#C9CDEA;
}
html[data-theme="cloud"] body{background:var(--bg)!important}
html[data-theme="cloud"] body.gd #app>.gdsec{box-shadow:0 12px 32px -20px rgba(30,34,60,.25)}
html[data-theme="cloud"] body.gd #app>.gdsec.open{box-shadow:0 24px 48px -26px rgba(30,34,60,.3)}
html[data-theme="cloud"] .top{background:var(--bg)!important}
html[data-theme="cloud"] .top .logo{color:var(--ink)!important}
html[data-theme="cloud"] #gdrail .gdstep.cur{background:linear-gradient(135deg,#6C79E6,#7B67D6);color:#fff}
html[data-theme="cloud"] #gdrail .gdstep.cur .n{background:#fff;border-color:#fff;color:#4C57C2}
html[data-theme="cloud"] #gdrail .gdstep.cur .s{color:rgba(255,255,255,.75)}
html[data-theme="cloud"] .gdsec.open>.gdh .m{background:var(--acc);color:#fff}
html[data-theme="cloud"] .gdtog{background:rgba(255,255,255,.1)}
html[data-theme="cloud"] .edstage .tlane,html[data-theme="cloud"] .tlframes{background:var(--navy3)}
html[data-theme="cloud"] .wroom,html[data-theme="cloud"] .wrreel{background:var(--card)!important}
/* v39.3b — top bar as one row; plate captions always white on the picture */
#hdrgt{display:flex!important;gap:8px!important;align-items:center!important;margin-left:auto!important;flex-wrap:nowrap}
.top .thmwrap{position:relative;display:inline-flex}
.atone .atcap b,.atone .atcap span,.atv .atcap b,.atv .atcap span,.atstyle .atsh b,.plate .cap{color:#fff!important}
.atone .atcap span{color:rgba(255,255,255,.75)!important}

/* ============================================================================
   v39.4 — TWO GREYS. Philip: "I don't like the bright white background.
   Use the two grey shades" (#26282E ground · #34363C surface, from his
   screenshot of the navigator). The cloud theme becomes GRAPHITE: no white
   anywhere, indigo accent kept. And the Edit control strip is flattened.
   ========================================================================= */
html[data-theme="cloud"]{
  --bg:#26282E; --softd:#202227; --panel:#202227;
  --card:#34363C; --soft:#34363C; --navy2:#2D2F36; --navy:#2A2C33;
  --navy3:#40434B; --navy4:#4C4F58; --cue:#3E4A5C; --ln2:#40434B;
  --ln:rgba(255,255,255,.06); --lift:rgba(255,255,255,.05);
  --ink:#ECEDF1; --ink2:#AEB1BC; --ink3:#7E8290;
  --acc:#5F6BD8; --acc2:#5F6BD8; --acc3:#8A7BE2; --accink:#FFFFFF;
  --ac:#5F6BD8; --ac2:#5F6BD8;
  --ok:#5FBF8C; --warn:#DDA654; --bad:#D9776C;
  --action:#5F6BD8; --ready:#5FBF8C; --faint:rgba(236,237,241,.42);
  --railbg:#26282E; --rail-ink:#ECEDF1;
  --forest:#26282E; --forest2:#202227; --black:#202227; --mustard:#5F6BD8; --mustard2:#8A7BE2;
  --vanilla:#34363C; --bone:#40434B; --espresso:#ECEDF1; --olive:#AEB1BC;
  --blurple:#5F6BD8; --pink:#8A7BE2; --green:#5FBF8C;
  --r:14px; --sh:none; --sh2:0 24px 48px -28px rgba(0,0,0,.55);
  --f1:#3A3F66; --f2:#26282E; --f3:#4A4F80;
}
html[data-theme="cloud"] body{background:var(--bg)!important}
html[data-theme="cloud"] body.gd #app>.gdsec{background:var(--card);box-shadow:0 12px 32px -22px rgba(0,0,0,.5)}
html[data-theme="cloud"] body.gd #app>.gdsec.open{box-shadow:0 24px 48px -26px rgba(0,0,0,.6)}
html[data-theme="cloud"] #gdrail{background:var(--railbg)!important;box-shadow:none;border-right:1px solid rgba(255,255,255,.05)!important}
html[data-theme="cloud"] #gdrail .gdep{background:#34363C}
html[data-theme="cloud"] .edstage .tlane,html[data-theme="cloud"] .tlframes{background:var(--navy3)}
html[data-theme="cloud"] .wroom,html[data-theme="cloud"] .wrreel{background:var(--navy2)!important}
html[data-theme="cloud"] .gdsec .wdrow,html[data-theme="cloud"] .gdsec .panel{background:var(--navy2)!important}
html[data-theme="cloud"] .top .logo{color:var(--ink)!important}
html[data-theme="cloud"] .gdtog{background:rgba(255,255,255,.08)}
html[data-theme="cloud"] .thmmenu{background:var(--card)!important}
html[data-theme="cloud"] input,html[data-theme="cloud"] textarea,html[data-theme="cloud"] select{background:var(--navy2)!important;color:var(--ink)!important;border-color:var(--ln2)!important}
/* a disabled primary must still read */
.pill.ac:disabled,.pill.go:disabled,.vb.go:disabled{background:var(--navy3)!important;color:var(--ink2)!important;opacity:.7!important}

/* ── the Edit control strip, flattened ───────────────────────────────── */
.edstage .vstrip .stagetitle b{font-size:16px!important;font-weight:700!important}
.edstage .vstrip .stagetitle span{font-size:11.5px!important;color:var(--ink2)!important}
.edstage .vstrip .vs-h{margin:16px 0 8px!important;padding:0!important;border:0!important;background:none!important}
.edstage .vstrip .vs-h b{font:700 10.5px system-ui,sans-serif!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:var(--ink3)!important}
.edstage .vstrip .vs-h small,.edstage .vstrip .bigbtn small,.edstage .vstrip .bigbtn .crumb,.edstage .vstrip .bb-add small,.edstage .vstrip .bb-add .crumb,.edstage .vstrip .newshot small,.edstage .vstrip .conact small,.edstage .vstrip .stagebar .row small,.edstage .vstrip .stagebar .crumb{display:none!important}
.edstage .vstrip .ver.takesrow{font:600 10.5px system-ui,sans-serif!important;letter-spacing:.1em!important;color:var(--ink3)!important;margin:0 0 8px!important}
.edstage .vstrip .vb,.edstage .vstrip .pill,.edstage .vstrip .bigbtn,.edstage .vstrip .bb-add,.edstage .vstrip .vs-score,.edstage .vstrip .vs-prompt{min-height:36px!important;padding:0 14px!important;border-radius:10px!important;font-size:12.5px!important;font-weight:600!important;background:var(--navy3)!important;color:var(--ink)!important;border:0!important;box-shadow:none!important;text-transform:none!important;letter-spacing:0!important;display:flex!important;align-items:center;justify-content:center;gap:6px;width:100%;margin:0 0 8px!important}
.edstage .vstrip .vb.go,.edstage .vstrip .vb.pri,.edstage .vstrip .pill.ac,.edstage .vstrip .pill.go{background:var(--acc)!important;color:var(--accink)!important;font-weight:700!important}
.edstage .vstrip .conact .vb,.edstage .vstrip .conact .pill{background:var(--navy3)!important;color:var(--ink)!important;font-weight:600!important}
.edstage .vstrip .vs-prompt .pch{font-size:10.5px!important;opacity:.7;margin-left:6px;font-weight:500}
.edstage .vstrip .stagebar{display:flex!important;flex-direction:column!important;gap:0!important;padding:0!important;background:none!important;border:0!important}
.edstage .vstrip .stagebar .row{flex-direction:column!important;gap:0!important;align-items:stretch!important}
.edstage .vstrip .modeseg{display:flex!important;gap:4px!important;padding:3px!important;background:var(--navy2)!important;border-radius:999px!important;margin:0 0 8px!important;border:0!important}
.edstage .vstrip .modeseg>*{flex:1;min-height:28px!important;border-radius:999px!important;background:transparent!important;color:var(--ink2)!important;font-size:12px!important;font-weight:600!important;text-transform:none!important;letter-spacing:0!important;display:flex!important;align-items:center;justify-content:center;border:0!important}
.edstage .vstrip .modeseg>.on,.edstage .vstrip .modeseg>[aria-selected="true"]{background:var(--acc)!important;color:var(--accink)!important}
.edstage .vstrip .bb-add{border:0!important;background:var(--navy3)!important;color:var(--ink)!important;opacity:1!important}
.edstage .vstrip .vs-bb,.edstage .vstrip .bb-head{padding:0!important;background:none!important;border:0!important}
.edstage .vstrip .led{font-size:10px!important}
.edstage .vstrip .modeseg{flex-direction:row!important}
.edstage .vstrip .vb *,.edstage .vstrip .bigbtn *{text-transform:none!important;letter-spacing:0!important;font-size:12.5px!important}
.edstage .vstrip .vs-prompt,.edstage .vstrip .binbtn,.edstage .vstrip .newshot{outline:0!important;border:0!important;box-shadow:none!important}
.edstage .vstrip .vs-prompt .pch{font-size:10.5px!important}

/* v39.5 — anywhere you can type reads ORANGE (Philip: "clearly indicate it's for typing") */
:root,html[data-theme="ash"],html[data-theme="fog"],html[data-theme="cloud"]{--type:#F2A650;--typeph:rgba(242,166,80,.55)}
input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]),textarea,select,[contenteditable="true"],[contenteditable=""],.cmdbar input,#cmd{
  color:var(--type)!important;caret-color:var(--type)!important;font-weight:500}
input::placeholder,textarea::placeholder,[contenteditable][data-placeholder]:empty::before{color:var(--typeph)!important;opacity:1!important}
select option{color:var(--type)}
input:focus:not([type=range]):not([type=checkbox]):not([type=radio]),textarea:focus,[contenteditable="true"]:focus{outline:0;box-shadow:0 0 0 2px color-mix(in srgb,var(--type) 45%,transparent)!important}
/* v39.6 — element pictures keep their own frame: a location is 16:9, a character 3:4 — never cropped to one shape */
.wdprop img,.wdprop video,body.gd .gdsec .wdrow:has(.wdprops.one) .wdprop img,body.gd .gdsec .wdrow:has(.wdprops.one) .wdprop video{aspect-ratio:auto!important;height:auto!important;width:100%!important;object-fit:contain!important;display:block}
.wdprop{background:var(--navy2)!important}
body.gd .gdsec .wdrow:has(.wdprops.one){grid-template-columns:260px minmax(0,1fr)}
/* v39.7 — grouped clip menu + shortcut sheet */
.edmenu.fcp{min-width:250px;max-height:calc(100vh - 24px);overflow:auto;padding:6px!important}
.edmenu .edgrp{font:700 9.5px system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);padding:8px 10px 3px}
.edmenu .edrow em{margin-left:auto;font-style:normal;font:500 10.5px ui-monospace,Menlo,monospace;color:var(--ink3);padding-left:14px}
.edkeys{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin:8px 0 4px}
.edkeys span{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink2)}
.edkeys b{font:600 11px ui-monospace,Menlo,monospace;color:var(--ink);background:var(--navy3);border-radius:6px;padding:3px 7px;min-width:72px;text-align:center}
body.gd #app>.sctitle .gd-eyebrow{display:block}
/* v39.9e — `.hint` has been display:none since the v8 skin; the scene editor writes its
   preview and fire result into #seout.hint, so Fix a segment looked dead. Inside modals
   and the shot console a .hint is output, not decoration. */
#modal .hint,.edstage .hint,#seout{display:block!important}
#seout:empty{display:none!important}
#seout textarea{width:100%;min-height:180px;font:12.5px/1.5 ui-monospace,Menlo,monospace;margin-top:6px}
.binsegs{display:contents}
.binclip.seg{position:relative;outline:1px dashed color-mix(in srgb,var(--acc) 60%,transparent)}
.binclip.seg .pill{margin-top:6px;width:100%;justify-content:center}
.tclip[data-fix="1"],.tclip.fix{box-shadow:inset 0 0 0 2px var(--ok)!important}
/* v39.9l — take captions: label above a full-width Choose (the row was clipping at 3-up) */
.wdprop figcaption{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:6px!important;padding:8px 10px 10px!important}
.wdprop .m{text-align:center;white-space:nowrap}
.wdprop figcaption .pill{margin-left:0!important;width:100%;justify-content:center}
.monttl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:6%;color:#f5f5f5;font-size:clamp(16px,3.2vw,40px);font-weight:600;letter-spacing:.02em;text-shadow:0 2px 6px rgba(0,0,0,.7);pointer-events:none;z-index:3}
/* v39.9y — tablet width (≤ 900px): the navigator folds to icons by itself and the monitor bar wraps */
@media (max-width:900px){
  body.gd:not(.gdwide){--gdrail:64px}
  body.gd:not(.gdwide) #gdrail .gdep{padding:9px 0;justify-content:center;margin:6px 10px}
  body.gd:not(.gdwide) #gdrail .gdep .l,body.gd:not(.gdwide) #gdrail .gdstep .l{display:none}
  body.gd:not(.gdwide) #gdrail .gdstep{grid-template-columns:30px;justify-items:center;padding:8px 0}
  .monbar,.zoombar .monbar{flex-wrap:wrap!important;row-gap:6px}
  .edact{flex-wrap:wrap}
}
@media (max-width:900px){
  .zoombar{flex-wrap:wrap!important;row-gap:6px}
  .zoombar .monbar{flex:1 1 100%!important;min-width:0}
}
.sclane .scname .sctog{display:inline-flex;gap:3px;margin-left:6px;vertical-align:middle}
.sclane .scname .sctog i{font-style:normal;font-size:9.5px;font-weight:700;width:16px;height:16px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;background:var(--navy4);color:var(--ink);opacity:.7;cursor:pointer}
.sclane .scname .sctog i.on{background:var(--acc);color:#fff;opacity:1}
.sclane.m.muted .sccue{opacity:.45}
.thead.fx{opacity:.85}.thead.fx b{font-size:10.5px}
.track.fx{position:relative;height:26px;background:var(--navy3);border-radius:6px;margin-top:3px}
.track.fx .sfxblk{position:absolute;top:2px;height:22px;border-radius:6px;background:var(--navy4);border:1px solid var(--acc3,var(--acc));padding:0 8px;font-size:10.5px;line-height:20px;white-space:nowrap;overflow:hidden;cursor:pointer}
.track.fx .sfxblk.submitted{opacity:.55;border-style:dashed}
.track.fx .sfxblk.fail{opacity:.4;border-color:var(--bad)}
/* v40.1q — the collapsed shot-lanes bar left a lone "▸" under the monitor; the left column's
   SHOT LANES button is the one door, so the bar only shows when the lanes are open */
body.gd .edstage .lanesbar.closed{display:none!important}
/* v40.1r — a placeholder must not read as typed text: same orange, clearly faded */
input::placeholder,textarea::placeholder{color:var(--type,#F2A650)!important;opacity:.42!important}
/* v40.1s — screen-test plates: caption above a full-width button, and the trio takes the room it has */
.wrplate figcaption{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:6px!important;padding:8px 8px 10px!important}
.wrplate figcaption .crumb{text-align:center;font-size:10.5px;line-height:1.3}
.wrplate figcaption .pill{margin:0!important;width:100%!important;justify-content:center;white-space:nowrap;padding-left:6px!important;padding-right:6px!important;font-size:11px!important}
body.gd .gdsec .wrsoul{max-width:none!important}
body.gd .gdsec .wrtrip{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;width:100%!important}
.wrplate figcaption .pill{white-space:normal!important;height:auto!important;min-height:28px;line-height:1.2!important;padding-top:6px!important;padding-bottom:6px!important}
/* v40.2 — shot lanes half as thick (Philip: "too thick, make them 50% thinner") */
.edstage .tlane,.edstage .tlane.cam,.edstage .tlane.light,.edstage .tlane.alane{height:33px!important}
.edstage .tlane.cuts{height:22px!important}
.edstage .tlframes{height:33px!important}
.edstage .tlframes img,.edstage .tlframes video,.edstage .tlframes .tf{height:33px!important;max-height:33px!important}
.edstage .tlane .adot{height:10px!important;width:10px!important;top:1px!important}
.edstage .tlane .kf,.edstage .tlane .key{top:auto!important}
/* v40.3 — resize bar: a real handle, visible, generous hit area */
.edstage .vsplit{height:14px!important;margin:2px 0!important;cursor:ns-resize!important;display:flex;align-items:center;justify-content:center;background:transparent!important}
.edstage .vsplit::after{content:'';width:88px;height:5px;border-radius:999px;background:var(--acc);opacity:.55;transition:opacity .15s,width .15s}
.edstage .vsplit:hover::after,body.vsplitting .edstage .vsplit::after{opacity:1;width:140px}
body.vsplitting{cursor:ns-resize;user-select:none}
/* Fix a segment under the player */
.edstage .fixunder{display:flex;justify-content:center;padding:6px 0 2px}
.edstage .fixunder .pill{min-width:220px;justify-content:center}
/* the collapsed shot-lanes "▸" never shows (Studio mode included) */
.edstage .lanesbar.closed{display:none!important}
/* v40.4 — a selected clip is unmistakable: accent frame + tint + tick, on every selected clip */
.tclip.msel{outline:3px solid var(--acc)!important;outline-offset:-3px!important;box-shadow:0 0 0 2px var(--acc),0 0 14px rgba(95,107,216,.55)!important;filter:brightness(1.18) saturate(1.1)}
.tclip.msel::before{content:'✓';position:absolute;top:2px;right:6px;z-index:5;font-size:11px;font-weight:800;color:#fff;background:var(--acc);border-radius:999px;width:16px;height:16px;line-height:16px;text-align:center}
.tclip.msel::after{content:'';position:absolute;inset:0;background:rgba(95,107,216,.18);pointer-events:none;z-index:4}
.edmarq{position:absolute;border:1.5px dashed var(--acc);background:rgba(95,107,216,.14);z-index:30;pointer-events:none;border-radius:4px}
/* v40.6b — pill row under the player; the clips panel is the browser */
.edstage .fixunder{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:6px 4px 2px}
.edstage .fixunder .pill{min-width:0;padding:6px 12px;font-size:11.5px;justify-content:center;white-space:nowrap}
.edstage .fixunder .pill.go{border-color:var(--ac);color:var(--ac)}
.edstage .fixunder .pill.go:hover{background:var(--ac);color:var(--espresso)}
.edstage .vstrip.browsing .cbhead .cbback{display:none!important}
.edstage .track.v{cursor:crosshair}
.edstage .track.v .tclip{cursor:grab}
/* v40.6e — Score: pinned lane names, movable SFX */
.sclane .scname,.sclane.sfx .lnlab{will-change:transform}
.sccue.sfxcue{cursor:grab}
.sccue.sfxcue.dragging{cursor:grabbing;opacity:.85;z-index:9}
/* v40.7 — Score edits picture · clip labels = name only · no zoom slider */
.edstage .zoombar>input[type=range],.edstage .zoombar>small.lab{display:none!important}
.tclip .crumb,.tclip b small{display:none!important}
.sccl{user-select:none;-webkit-user-select:none;cursor:grab}
.sccl.on{outline:2px solid var(--acc);outline-offset:-2px;background:color-mix(in srgb,var(--acc) 22%,transparent)}
.sccl .thm{position:absolute;inset:0;display:flex;z-index:0;pointer-events:none;border-radius:inherit;overflow:hidden}
.sccl .thm i{flex:1 1 0;background-size:cover;background-position:center;min-width:0}
.sccl .thm::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,10,.7) 0,rgba(5,6,10,.12) 50%,rgba(5,6,10,0) 75%)}
.sccl b{z-index:2;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.sccl .tedge{z-index:3;width:9px;cursor:ew-resize;border-color:color-mix(in srgb,var(--acc) 70%,transparent)}
.sccl .tedge.l{border-radius:8px 0 0 8px}.sccl .tedge.r{border-radius:0 8px 8px 0}
#ctxm .ctxi{padding:7px 10px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
#ctxm .ctxi:hover{background:color-mix(in srgb,var(--acc) 22%,transparent)}
/* v40.8 — clips follow the lane height · notes = one thin lane */
.edstage #tracks .track .tclip,.edstage #tracks .track .gap2,.edstage #tracks .track .mcue{top:3px!important;height:calc(var(--lane-h,58px) - 6px)!important;bottom:auto!important}
.edstage #tracks .track .aclip{top:3px!important;bottom:3px!important}
.edstage #tracks .track.fx .sfxblk{top:3px!important;height:calc(var(--lane-h,58px) - 6px)!important;line-height:calc(var(--lane-h,58px) - 8px)!important}
.edstage .tclip b{font-size:11px;line-height:1.1}
#tracks .track.notes,#tracks .track.notes.nopen,#tracks #ntrack{height:16px!important;padding:0!important;box-sizing:border-box!important;border:0!important;min-height:0!important;margin:0 0 4px!important;cursor:text!important;background:rgba(255,213,106,.10)!important;box-shadow:inset 0 0 0 1px rgba(255,213,106,.35)!important}
#tracks .track.notes .nspan,#tracks .track.notes.nopen .nspan{top:2px!important;height:12px!important;padding:0 6px!important;font-size:9px!important;border-radius:4px!important;box-shadow:none!important;line-height:12px}
#tracks .track.notes.nopen .nspan span{display:inline!important}
#tracks .track.notes.nopen .nspan .ne{display:block!important}
#tracks .track.notes .nspan .nedit{font-size:9px!important;height:12px!important;line-height:12px!important}
.thead.notes,.thead.notes.nopen{height:16px!important;min-height:0!important;padding:0 8px!important;font-size:9px!important}
.thead.notes .crumb{display:none!important}
.sclane.v .vregion{top:4px;bottom:4px}
/* v40.9 — envelopes on clips, half-height A lanes, cut lines, blade cursor */
#atracks .track.a{height:calc(var(--lane-h,58px)/2)!important;min-height:18px!important}
.edstage #tracks .track.a .aclip{top:2px!important;bottom:2px!important}
.tclip svg.cenv,.aclip svg.cenv,.sccl svg.cenv{z-index:5}
.tclip svg.cenv .vl,.sccl svg.cenv .vl{stroke:var(--warn);stroke-width:1.5;opacity:.85}
.tclip svg.cenv .vlh,.sccl svg.cenv .vlh{stroke-width:12}
.cutlines{position:absolute;inset:0;pointer-events:none;z-index:2}
.cutlines i{position:absolute;top:0;bottom:0;width:1px;background:color-mix(in srgb,var(--ink) 38%,transparent);opacity:.9}
#sctl .cutlines i{background:color-mix(in srgb,var(--ink) 30%,transparent)}
#sctl .cutlines{z-index:1}
body.blade,body.blade *{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M4 20 L20 4' stroke='%23ffd66a' stroke-width='2.4' stroke-linecap='round'/><path d='M4 20 l6 -1 -5 -5 z' fill='%23ffd66a'/><rect x='14' y='2' width='9' height='9' fill='none' stroke='%23ffd66a' stroke-width='1' rx='1' transform='rotate(45 18.5 6.5)' opacity='.8'/></svg>") 4 20,crosshair!important}
body.blade .tclip,body.blade .sccl{outline:1px dashed rgba(255,214,106,.5)}
.thead.a{font-size:10px}
/* v41.0 — cut lines on the clips, envelope polish, cropping thumbnails, no fat bars, vertical scroll */
.cutlines{display:none!important}
.tclip::before,.tclip::after,.sccl::before,.sccl::after{content:'';position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.42);z-index:4;pointer-events:none}
.tclip::before,.sccl::before{left:0}.tclip::after,.sccl::after{right:0}
.tclip .thm.abs,.sccl .thm.abs{display:block}
.tclip .thm.abs i,.sccl .thm.abs i{position:absolute;top:0;bottom:0;flex:none;background-size:cover;background-position:center}
.tclip .tedge{z-index:6!important;width:8px!important}
.tclip.on .tedge{background:transparent!important;width:8px!important;opacity:1}
.tclip.on .tedge.l{border-left:2px solid var(--acc)}.tclip.on .tedge.r{border-right:2px solid var(--acc)}
svg.cenv .fh{fill:var(--warn);stroke:var(--card);stroke-width:1.2;pointer-events:all;cursor:ew-resize}
svg.cenv .vl{stroke:var(--warn);stroke-width:1.5;fill:none;opacity:.9}
svg.cenv .vlh{stroke-width:14}
.edstage .tlwrap.edtl{min-height:0;overflow:hidden;display:flex;flex-direction:column}
.edstage .tlwrap.edtl>#tl,.edstage .tlwrap.edtl>.tl{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.edstage #tl .tlgrid,.edstage .tl .tlgrid{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;align-content:start}
/* v41.1 — monitor twin, gap marks */
.monframe .monbuf,.scmon .monbuf{position:absolute;inset:0;width:100%;height:100%;visibility:hidden;pointer-events:none}
.monframe{position:relative}.scmon{position:relative}
.gapmark{position:absolute;top:3px;bottom:3px;border-radius:4px;pointer-events:none;z-index:3;background:repeating-linear-gradient(135deg,rgba(255,95,95,.28) 0 4px,transparent 4px 9px);box-shadow:inset 0 0 0 1px rgba(255,95,95,.55);display:flex;align-items:center;justify-content:center}
.gapmark span{font:800 9px ui-monospace,monospace;color:#ff9f9f;background:rgba(10,11,17,.7);padding:1px 5px;border-radius:5px}
/* v41.3 — acting cues */
.cuebox{margin:12px 0 4px}
.cuebox .cuesel{width:100%;margin-top:4px;background:var(--softd);color:var(--ink);border:0;border-radius:8px;padding:7px 9px;font:600 12px "Noto Sans",sans-serif}
.cuebox .cuetxt{margin-top:6px;font-size:11px;line-height:1.45;color:var(--ink2);background:var(--softd);border-radius:8px;padding:7px 9px}
.cuebox .cuetxt b{color:var(--ink)}.cuebox .cuetxt p{margin:4px 0 0;font-family:ui-monospace,monospace;font-size:10.5px}
.cuebox .cuetxt.dim{opacity:.6}
/* v41.4 — sprite thumbnails paint per cell; music lanes half height */
.tclip .thm.abs i,.sccl .thm.abs i{background-size:auto;background-position:0 0}
.edstage #mtracks .track.music{height:calc(var(--lane-h,58px)/2)!important;min-height:18px!important}
.edstage #mtracks .track.music .mcue{top:2px!important;height:calc(var(--lane-h,58px)/2 - 4px)!important}

/* ===== v41.9 — BUFFER BAR: a thin red→green line on the top edge of every clip, showing how much
   of that clip the browser actually holds. It disappears once the clip is fully cached, so a clean
   timeline means a clean playback. ===== */
.tclip .bufbar,.sccl .bufbar{position:absolute;left:0;right:0;top:0;height:3px;z-index:7;pointer-events:none;
  border-radius:12px 12px 0 0;overflow:hidden;background:rgba(0,0,0,.34);opacity:1;transition:opacity .45s ease}
html.dark .tclip .bufbar,html.dark .sccl .bufbar{background:rgba(0,0,0,.18)}
.tclip .bufbar>b,.sccl .bufbar>b{display:block;height:100%;width:0;border-radius:12px 0 0 0;transition:width .28s linear,background-color .28s linear}
.tclip .bufbar.full,.sccl .bufbar.full{opacity:.42}
.tclip .bufbar,.sccl .bufbar{height:4px}
#bufchip{position:fixed;z-index:9000;left:18px;bottom:18px;display:none;align-items:center;gap:8px;
  padding:7px 12px;border-radius:999px;background:rgba(12,14,28,.9);color:#eef;font:700 11.5px/1 "Noto Sans",sans-serif;
  letter-spacing:.6px;box-shadow:0 6px 22px rgba(0,0,0,.4);pointer-events:none}
#bufchip.on{display:flex}
#bufchip i{width:9px;height:9px;border-radius:50%;background:#e0b021;animation:bufpulse 1.1s ease-in-out infinite}
#bufchip u{text-decoration:none;opacity:.62;font-weight:600}
.tclip .bufbar.load>b,.sccl .bufbar.load>b{animation:bufpulse 1.1s ease-in-out infinite}
@keyframes bufpulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.5)}}
.bufwrap{position:absolute;width:0;height:0;overflow:hidden;opacity:0;pointer-events:none;left:-9999px;top:-9999px}

/* ================= v41.15 — THE SCORE ROOM (standalone Score for a film on this Mac) ================= */
html.filmroom{--gdrail:0px}
html.filmroom #tabs.tabs,html.filmroom #gdrail,html.filmroom #epchip,html.filmroom #pkopen,html.filmroom #cmdbar,html.filmroom #simpleBtn,html.filmroom .top .crumb.mono,html.filmroom .keysbar{display:none!important}
html.filmroom body #app.wrap,html.filmroom body #app{padding-left:32px!important}
html.filmroom .scmonbar .fpx{margin-left:4px}
html.filmroom .scmonbar{flex-wrap:wrap;row-gap:6px}
html.filmroom .scacts .toedit{display:none!important}
html.filmroom .top .fpname{display:inline-block;font-size:12px;font-weight:700;opacity:.8;margin:0 4px 0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw}
html.filmroom .scorepage .sccl b{font-size:12px}
html.filmroom .pghead[data-s37="score"] .pgh-t,html.filmroom .pghead[data-s37="score"] .pgh-s{font-size:0!important;line-height:0!important}
html.filmroom .pghead[data-s37="score"] .pgh-t::before{content:'Score the film';font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
html.filmroom .pghead[data-s37="score"] .pgh-s::before{content:'Mark a region on a music lane, say what the cue does, and Suno writes music to that exact length. The film plays from your Mac; only the cues live here.';font-size:13px;line-height:1.5;color:var(--ink2);display:block;margin-top:5px;max-width:72ch}
html.filmroom .pghead[data-s37="score"] .pgh-l{flex:1 1 100%;min-width:0;width:100%}
html.filmroom .pghead[data-s37="score"] .pgh-t::before{white-space:nowrap}
html.filmroom .pghead[data-s37="score"] .pgh-s::before{width:min(72ch,100%);white-space:normal}
html.filmroom .pghead[data-s37="score"] .pgh-s{max-width:none!important;width:100%}
html.filmroom .pghead[data-s37="score"] .pgh-s::before{max-width:720px}
/* v41.17 — the Score left column scrolls instead of clipping the Generate row */
.scorepage .scleft{overflow-y:auto!important;overflow-x:hidden!important}
.scmonbar .scgen{font-weight:700}
/* v41.19 — the PROMPT box is editable */
.stpv pre[contenteditable]{outline:none;cursor:text;min-height:90px;border:1px solid transparent}
.stpv pre[contenteditable]:focus{border-color:var(--acc);background:var(--navy4)}
.stpv .stedit{display:inline-block;margin-left:10px;font-size:10.5px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--type,#F2A650)}
.stpv .stedit a{color:var(--acc);margin-left:8px;text-decoration:none}
/* v41.20 — wheels optional · takes strip · start over */
.stwchip{margin:0 0 8px 0;align-self:flex-start}
.scfoot.wheelsoff .stwheelrow,.scfoot.wheelsoff .scfield{opacity:.42;filter:saturate(.6)}
.scfoot.wheelsoff .stwheelrow:hover,.scfoot.wheelsoff .scfield:hover{opacity:.8}
.sctkstrip{margin:8px 0 2px;padding:8px 10px;border-radius:10px;background:var(--card)}
.sctkstrip .lab{display:block;margin-bottom:6px}
.sctkstrip .tkrow{display:flex;flex-wrap:wrap;gap:6px}
.sctkstrip .tkc{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:9px;background:var(--navy3);font-size:12px}
.sctkstrip .tkc.on{outline:1.5px solid var(--acc)}
.sctkstrip .tkc em{font-style:normal;color:var(--acc);font-weight:700;font-size:11px}
.sctkstrip .tkc span{opacity:.6;font-size:11px}
/* v41.21 — per-cue mute */
.sccue .cmute{position:absolute;left:4px;top:3px;z-index:6;width:16px;height:16px;border-radius:5px;border:0;padding:0;font:800 9.5px/16px "Noto Sans",sans-serif;background:var(--navy4);color:var(--ink2);cursor:pointer;opacity:.55}
.sccue:hover .cmute{opacity:1}
.sccue .cmute.on{background:var(--bad,#c0392b);color:#fff;opacity:1}
.sccue.cmuted{opacity:.42;filter:saturate(.4)}
.sccue.cmuted b{text-decoration:line-through}
/* ================= v41.22 — THE SCORE PAGE FLOWS (2026-09-12). The v29/v30 "nothing scrolls" layout sized every box to
   100vh minus a constant and hid the overflow — right for a 27" display, on a MacBook Air it clipped the STYLE box, the
   sliders, AVOID, the Generate row and half the wheels. Now the page scrolls like a page: columns and footer take the
   height of their content, only the timeline lanes keep a fixed working height and scroll inside. ================= */
html body #app.scorepage,html body #app.scorepage.footmode,html body #app.scorepage.v30{height:auto!important;max-height:none!important;overflow:visible!important}
html body #app.scorepage .scbody{height:auto!important;max-height:none!important;min-height:0!important;align-items:start!important}
html body #app.scorepage .scleft{height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important}
html body #app.scorepage .scright{height:auto!important;min-height:0!important;overflow:visible!important}
html body #app.scorepage .sctl{height:clamp(320px,52vh,720px)!important;min-height:320px!important;flex:0 0 auto!important;overflow:auto!important}
html body #app.scorepage .scmon{max-height:none!important}
html body #app.scorepage .scfoot{height:auto!important;max-height:none!important;overflow:visible!important}
html body #app.scorepage .scleft .stcol.left{overflow:visible!important;max-height:none!important;height:auto!important}
html body #app.scorepage .stpv{max-height:none!important}
html body #app.scorepage .stpv pre{max-height:none!important;overflow:visible!important}
html body{overflow-y:auto!important}
html body #app.scorepage .scfoot{padding-bottom:26px!important;margin-bottom:24px!important}
/* ================= v41.24 — THE SCORE ROOM, RE-PLANNED: console | player | prompt over the tracks ================= */
html body #app.scorepage .pghead{display:none!important}
html body #app.scorepage.sc4{height:calc(100vh - 66px)!important;max-height:calc(100vh - 66px)!important;overflow:hidden!important;padding-top:6px!important;padding-bottom:6px!important;display:flex;flex-direction:column}
html body #app.scorepage.sc4 .scbody{display:grid!important;grid-template-columns:var(--lw,340px) 6px minmax(0,1fr) 6px var(--rw,420px)!important;grid-template-rows:minmax(0,var(--th,52%)) 6px minmax(0,1fr)!important;gap:0!important;height:100%!important;max-height:100%!important;min-height:0!important;flex:1 1 auto;align-items:stretch!important}
html body #app.scorepage.sc4 .scbody>.scleft{grid-column:1;grid-row:1}
html body #app.scorepage.sc4 .scbody>.sc4h.l{grid-column:2;grid-row:1}
html body #app.scorepage.sc4 .scbody>.sc4c{grid-column:3;grid-row:1}
html body #app.scorepage.sc4 .scbody>.sc4h.r{grid-column:4;grid-row:1}
html body #app.scorepage.sc4 .scbody>.scfoot{grid-column:5;grid-row:1}
html body #app.scorepage.sc4 .scbody>.sc4h.b{grid-column:1/-1;grid-row:2}
html body #app.scorepage.sc4 .scbody>.scright{grid-column:1/-1;grid-row:3}
/* handles */
html body #app.scorepage.sc4 .sc4h{position:relative;background:transparent;z-index:5}
html body #app.scorepage.sc4 .sc4h.l,html body #app.scorepage.sc4 .sc4h.r{cursor:col-resize}
html body #app.scorepage.sc4 .sc4h.b{cursor:row-resize}
html body #app.scorepage.sc4 .sc4h::before{content:'';position:absolute;inset:0;margin:auto;background:var(--ln,rgba(255,255,255,.08));border-radius:3px}
html body #app.scorepage.sc4 .sc4h.l::before,html body #app.scorepage.sc4 .sc4h.r::before{width:2px;height:40px}
html body #app.scorepage.sc4 .sc4h.b::before{height:2px;width:60px}
html body #app.scorepage.sc4 .sc4h:hover::before{background:var(--acc)}
html body #app.scorepage.sc4 .sc4tog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:18px;height:18px;border-radius:9px;border:0;padding:0;background:var(--card);color:var(--ink);font-size:10px;line-height:18px;cursor:pointer;opacity:.75;z-index:6}
html body #app.scorepage.sc4 .sc4h.b .sc4tog{width:36px;height:14px;border-radius:7px;line-height:14px}
html body #app.scorepage.sc4 .sc4tog:hover{opacity:1;background:var(--acc);color:#111}
/* the three panels: the window's height, nothing below the fold */
html body #app.scorepage.sc4 .scleft,html body #app.scorepage.sc4 .scfoot,html body #app.scorepage.sc4 .sc4c,html body #app.scorepage.sc4 .scright{height:100%!important;max-height:100%!important;min-height:0!important;box-sizing:border-box}
html body #app.scorepage.sc4 .scleft{display:flex!important;flex-direction:column;gap:5px;padding:7px 9px!important;overflow:auto!important;border-right:0!important;background:var(--card);border-radius:12px}
html body #app.scorepage.sc4 .scfoot{display:flex!important;flex-direction:column;gap:6px;padding:8px 10px!important;margin:0!important;overflow:hidden!important;border-radius:12px}
html body #app.scorepage.sc4 .sc4c{display:flex;flex-direction:column;gap:6px;min-width:0;padding:0 8px}
html body #app.scorepage.sc4 .scright{display:flex!important;flex-direction:column;overflow:hidden!important;padding-top:6px}
html body #app.scorepage.sc4 .scright .sctl{flex:1 1 auto!important;min-height:0!important;height:auto!important;max-height:none!important;overflow:auto!important}
html body #app.scorepage.sc4 .scright .sczoom{flex:0 0 auto}
/* collapsed panels */
html body #app.scorepage.sc4 .scbody.lcol>.scleft>*,html body #app.scorepage.sc4 .scbody.rcol>.scfoot>*{display:none!important}
html body #app.scorepage.sc4 .scbody.lcol>.scleft,html body #app.scorepage.sc4 .scbody.rcol>.scfoot{padding:0!important;overflow:hidden!important}
html body #app.scorepage.sc4 .scbody.bcol{grid-template-rows:minmax(0,1fr) 6px 22px!important}
html body #app.scorepage.sc4 .scbody.bcol>.scright>*{display:none!important}
/* the player */
html body #app.scorepage.sc4 .sc4c .scmon{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;aspect-ratio:auto!important;max-height:none!important;background:transparent}
html body #app.scorepage.sc4 .sc4c .scmon video{flex:1 1 auto;min-height:0;width:100%;height:auto!important;object-fit:contain;background:#000;border-radius:10px}
html body #app.scorepage.sc4 .sc4c .scmonbar{flex:0 0 auto;justify-content:center;flex-wrap:wrap}
html body #app.scorepage.sc4 .sc4c .moodlanewrap,html body #app.scorepage.sc4 .sc4c .sctkstrip{flex:0 0 auto}
/* the console, laid out to fit 830 px */
html body #app.scorepage.sc4 .sc4acts{display:grid;grid-template-columns:1fr 1fr;gap:5px}
html body #app.scorepage.sc4 .sc4acts .pill{width:100%;justify-content:center;padding:5px 8px!important;font-size:11.5px!important}
html body #app.scorepage.sc4 .scleft .stcol.left{display:grid!important;grid-template-columns:1fr 1fr!important;gap:5px 8px!important;overflow:visible!important;height:auto!important;max-height:none!important;flex:0 0 auto}
html body #app.scorepage.sc4 .scleft .stcol.left>*{grid-column:span 2;margin:0!important}
html body #app.scorepage.sc4 .scleft .stcol.left>.strow{display:contents}
html body #app.scorepage.sc4 .scleft .stcol.left .stf:has(#stsw),html body #app.scorepage.sc4 .scleft .stcol.left .stf:has(#stwc){grid-column:span 1}
html body #app.scorepage.sc4 .scleft .stcol.left .stf:has(#stneg){grid-column:span 2}
html body #app.scorepage.sc4 .scleft textarea#ststyle{min-height:64px!important;height:72px!important;resize:vertical}
html body #app.scorepage.sc4 .scleft textarea#stlyr{min-height:44px!important;height:48px!important}
html body #app.scorepage.sc4 .scleft .stacts{display:flex;gap:6px;flex-wrap:wrap}
html body #app.scorepage.sc4 .scleft .stacts .pill{padding:6px 10px!important}
html body #app.scorepage.sc4 .scleft .strefrow,html body #app.scorepage.sc4 .scleft .stref{font-size:11px}
html body #app.scorepage.sc4 .scleft .stvoxrow .pill{padding:5px 8px!important;font-size:11.5px!important}
/* the prompt side */
html body #app.scorepage.sc4 .scfoot .stwchip{flex:0 0 auto;align-self:flex-start;margin:0!important}
html body #app.scorepage.sc4 .scfoot .studio,html body #app.scorepage.sc4 .scfoot .stgrid.v28{display:flex!important;flex-direction:column!important;flex:1 1 auto;min-height:0;gap:6px;grid-template-columns:none!important}
html body #app.scorepage.sc4 .scfoot .stcol.right.sidebyside{flex:0 0 auto;display:flex!important;flex-direction:row!important;justify-content:center;gap:10px!important;align-items:flex-start!important}
html body #app.scorepage.sc4 .scfoot .stcol.right.sidebyside .mewheel,html body #app.scorepage.sc4 .scfoot .stcol.right.sidebyside .sfpad{width:104px!important;height:104px!important;margin:4px auto!important}
html body #app.scorepage.sc4 .scfoot .stpv{flex:1 1 auto!important;min-height:80px!important;display:flex;flex-direction:column;margin:0!important;max-height:none!important}
html body #app.scorepage.sc4 .scfoot .stpv pre{flex:1 1 auto;min-height:0;overflow:auto!important;max-height:none!important}
html body #app.scorepage.sc4 .scfoot .stedit{flex:0 0 auto}
html body{overflow-y:hidden!important}
html body #app.scorepage.sc4 .scmonbar button.scgen,html body #app.scorepage.sc4 .scmonbar button.fpx,html body #app.scorepage.sc4 .scmonbar button.scwav,html body #app.scorepage.sc4 .scmonbar button.screset{display:none!important}
html body #app.scorepage.sc4 .sc4acts details.sc4x{grid-column:span 2;background:var(--navy3);border-radius:9px;padding:0 8px}
html body #app.scorepage.sc4 .sc4acts details.sc4x summary{cursor:pointer;font-size:11px;font-weight:700;letter-spacing:.3px;padding:5px 0;opacity:.85;list-style:none}
html body #app.scorepage.sc4 .sc4acts details.sc4x summary::-webkit-details-marker{display:none}
html body #app.scorepage.sc4 .sc4acts details.sc4x .sc4xin{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:2px 0 8px}
html body #app.scorepage.sc4 .scleft textarea#ststyle{height:60px!important}
html body #app.scorepage.sc4 .sc4acts .scgen{order:0}
html body #app.scorepage.sc4 .sc4acts .screset{order:1}
html body #app.scorepage.sc4 .sc4acts details.sc4x{order:5}
html body #app.scorepage.sc4 .scleft .strefrow .crumb{display:none!important}
html body #app.scorepage.sc4 .scleft .stcol.left .stf small,html body #app.scorepage.sc4 .scleft .stcol.left .lab{margin-bottom:1px!important}
html body #app.scorepage.sc4 .scleft .stcol.left>.strow>.stf{grid-column:span 1}
html body #app.scorepage.sc4 .sc4acts .scgen{display:none!important}
html body #app.scorepage.sc4 .sc4acts .screset{grid-column:span 2}
html body #app.scorepage.sc4 .scbody.lcol>.scleft *,html body #app.scorepage.sc4 .scbody.rcol>.scfoot *,html body #app.scorepage.sc4 .scbody.bcol>.scright *{display:none!important}
html body #app.scorepage.sc4 .sc4c .scmon video{flex:1 1 0px!important;height:100%!important;max-height:none!important;min-height:0!important;width:100%!important}
html body #app.scorepage.sc4 .sc4c .scmon{padding:0!important}
/* v41.24b — drag anywhere on a wider handle; controls left, text right */
html body #app.scorepage.sc4 .scbody{grid-template-columns:var(--lw,340px) 10px minmax(0,1fr) 10px var(--rw,420px)!important;grid-template-rows:minmax(0,var(--th,58%)) 10px minmax(0,1fr)!important}
html body #app.scorepage.sc4 .sc4h{touch-action:none;user-select:none}
html body #app.scorepage.sc4 .sc4h.l::before,html body #app.scorepage.sc4 .sc4h.r::before{width:3px;height:48px}
html body #app.scorepage.sc4 .sc4h.b::before{height:3px;width:72px}
body.sc4drag,body.sc4drag *{user-select:none!important}
body.sc4drag iframe,body.sc4drag video{pointer-events:none}
html body #app.scorepage.sc4 .scleft .sc4wheels{flex:0 0 auto;display:flex!important;flex-direction:row!important;justify-content:center;gap:8px!important;align-items:flex-start!important;margin-top:2px}
html body #app.scorepage.sc4 .scleft .sc4wheels .mewheel,html body #app.scorepage.sc4 .scleft .sc4wheels .sfpad{width:96px!important;height:96px!important;margin:4px auto!important}
html body #app.scorepage.sc4 .scleft .stwchip{flex:0 0 auto;align-self:stretch;margin:2px 0 0!important;font-size:11px!important}
html body #app.scorepage.sc4 .scleft.wheelsoff .sc4wheels{opacity:.42;filter:saturate(.6)}
html body #app.scorepage.sc4 .scleft.wheelsoff .sc4wheels:hover{opacity:.8}
html body #app.scorepage.sc4 .scfoot .sc4txt{flex:0 0 auto;margin:0!important}
html body #app.scorepage.sc4 .scfoot textarea#ststyle{height:120px!important;min-height:80px!important;resize:vertical}
html body #app.scorepage.sc4 .scfoot textarea#stlyr{height:56px!important;min-height:40px!important}
html body #app.scorepage.sc4 .scfoot .stpv{min-height:100px!important}
html body #app.scorepage.sc4 .scfoot .sc4txt,html body #app.scorepage.sc4 .scfoot .sc4txt textarea,html body #app.scorepage.sc4 .scfoot .sc4txt input{width:100%!important;max-width:none!important;box-sizing:border-box}
html body #app.scorepage.sc4 .scfoot .sc4txt{display:flex;flex-direction:column}
html body #app.scorepage.sc4 .scleft .sc4wheels .mewheel,html body #app.scorepage.sc4 .scleft .sc4wheels .sfpad{width:84px!important;height:84px!important;margin:2px auto!important}
html body #app.scorepage.sc4 .scleft .sc4wheels .mestate,html body #app.scorepage.sc4 .scleft .sc4wheels .sfread{min-height:0!important;gap:2px!important}
html body #app.scorepage.sc4 .scleft .sc4wheels .mestate b,html body #app.scorepage.sc4 .scleft .sc4wheels .sfread b{font-size:12px!important}
html body #app.scorepage.sc4 .scleft .sc4wheels .sfread span{max-height:14px!important;font-size:9px!important}
html body #app.scorepage.sc4 .scleft .sc4wheels .melab,html body #app.scorepage.sc4 .scleft .sc4wheels .sfl{font-size:6.5px!important}
html body #app.scorepage.sc4 .scleft .sc4wheels .mestate .pill.sm{padding:3px 8px!important;font-size:10.5px!important}
html body #app.scorepage.sc4 .scleft{gap:4px}
html body #app.scorepage.sc4 .sc4acts{gap:4px}
html body #app.scorepage.sc4 .scleft .stcol.left{gap:4px 8px!important}
/* v41.24c — the two wheels as two equal tiles in the console */
html body #app.scorepage.sc4 .scleft .sc4wheels{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important;align-items:start!important;justify-items:stretch}
html body #app.scorepage.sc4 .scleft .sc4wheels>.stwheelrow,html body #app.scorepage.sc4 .scleft .sc4wheels>.scfield{width:auto!important;min-width:0!important;margin:0!important;display:flex;flex-direction:column;align-items:center;overflow:visible}
html body #app.scorepage.sc4 .scleft .sc4wheels .sffrow{width:100%!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:2px!important}
html body #app.scorepage.sc4 .scleft .sc4wheels .mewheel,html body #app.scorepage.sc4 .scleft .sc4wheels .sfpad{width:78px!important;height:78px!important;margin:12px auto 10px!important}
html body #app.scorepage.sc4 .scleft .sc4wheels .mestate{align-items:center;text-align:center}
/* v41.26 — takes on the clip · cue tools · lane height slider */
.sctkstrip,.sccue .tkbadge{display:none!important}
.sccue .tkpick{position:absolute;right:4px;top:3px;z-index:7;display:flex;gap:2px}
.sccue .tkpick button{width:16px;height:16px;border-radius:5px;border:0;padding:0;font:800 9.5px/16px "Noto Sans",sans-serif;background:var(--navy4);color:var(--ink2);cursor:pointer;opacity:.7}
.sccue .tkpick button.on{background:var(--acc);color:#111;opacity:1}
.sccue:hover .tkpick button{opacity:1}
body.scblade .sccue{cursor:crosshair!important}
.sccue .sccut{position:absolute;top:0;bottom:0;width:2px;background:#fff;opacity:.9;pointer-events:none;z-index:8;box-shadow:0 0 6px rgba(255,255,255,.6)}
#scctx{position:fixed;z-index:9000;min-width:210px;background:var(--card);border-radius:12px;padding:6px;box-shadow:0 18px 50px -20px rgba(0,0,0,.8);font-size:12.5px}
#scctx .scctxh{padding:6px 10px 8px;font-weight:700;opacity:.7;font-size:11px;letter-spacing:.3px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#scctx button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;color:var(--ink);padding:7px 10px;border-radius:8px;cursor:pointer;text-align:left;font-size:12.5px}
#scctx button:hover{background:var(--navy4)}
#scctx button[disabled]{opacity:.35;cursor:default}
#scctx button i{width:16px;text-align:center;font-style:normal;opacity:.8}
#scctx button span{flex:1}
#scctx button small{opacity:.5;font-size:10.5px}
.sczoom .sclh{display:inline-flex;align-items:center;gap:6px;margin:0 10px}
.sczoom .sclh input{width:110px}
/* ================= v41.27 — buttons right · reference panel · library + uploads ================= */
html body #app.scorepage.sc4 .scfoot .stpv,html body #app.scorepage.sc4 .scfoot .stpv pre{width:100%!important;max-width:none!important;box-sizing:border-box}
html body #app.scorepage.sc4 .scfoot .sc4acts{flex:0 0 auto;margin-top:4px}
html body #app.scorepage.sc4 .scfoot .sc4st{flex:0 0 auto;display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
html body #app.scorepage.sc4 .scfoot .sc4st .pill{padding:7px 12px!important}
html body #app.scorepage.sc4 .scfoot .sc4st .gen{flex:1 1 auto;justify-content:center}
html body #app.scorepage.sc4 .scleft .sc4hide{display:none!important}
html body #app.scorepage.sc4 .scleft .sc4ref{flex:0 0 auto;display:flex;flex-direction:column;gap:5px}
html body #app.scorepage.sc4 .scleft .sc4ref .refzone{border:1.5px dashed var(--acc);border-radius:10px;padding:10px 12px;text-align:center;cursor:pointer;display:flex;flex-direction:column;gap:2px;transition:background .12s}
html body #app.scorepage.sc4 .scleft .sc4ref .refzone b{font-size:12.5px}
html body #app.scorepage.sc4 .scleft .sc4ref .refzone span{font-size:10.5px;opacity:.6}
html body #app.scorepage.sc4 .scleft .sc4ref .refzone:hover,html body #app.scorepage.sc4 .scleft .sc4ref .refzone.over{background:var(--navy4)}
html body #app.scorepage.sc4 .scleft .sc4ref .refcur,html body #app.scorepage.sc4 .scleft .sc4ref .refw{display:none}
html body #app.scorepage.sc4 .scleft .sc4ref.has .refcur{display:flex;align-items:center;gap:6px;background:var(--navy3);border-radius:8px;padding:4px 8px;font-size:12px}
html body #app.scorepage.sc4 .scleft .sc4ref.has .refcur .refnm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--acc);font-weight:700}
html body #app.scorepage.sc4 .scleft .sc4ref.has .refw{display:block}
html body #app.scorepage.sc4 .scleft .sc4ref.has .refzone{padding:6px 10px}
html body #app.scorepage.sc4 .scleft .sc4ref.has .refzone b{font-size:11px}
html body #app.scorepage.sc4 .scleft .sc4ref.has .refzone span{display:none}
html body #app.scorepage.sc4 .scleft details.sc4lib{flex:1 1 90px;min-height:70px;display:flex;flex-direction:column;overflow:hidden;background:var(--navy3);border-radius:10px;padding:6px 8px}
html body #app.scorepage.sc4 .scleft details.sc4lib summary{cursor:default;list-style:none;font-size:11px;font-weight:700;letter-spacing:.3px;padding:2px 0}
html body #app.scorepage.sc4 .scleft details.sc4lib summary::-webkit-details-marker{display:none}
html body #app.scorepage.sc4 .scleft details.sc4lib summary .crumb{display:none}
html body #app.scorepage.sc4 .scleft details.sc4lib .sclibhead{padding:0 0 4px}
html body #app.scorepage.sc4 .scleft details.sc4lib .sclibrows{flex:1 1 auto;min-height:0;overflow:auto}
html body #app.scorepage.sc4 .scleft details.sc4lib .mrow{padding:3px 4px;font-size:11.5px}
html body #app.scorepage.sc4 .scleft .sc4up{flex:0 0 auto;max-height:34%;display:flex;flex-direction:column;background:var(--navy3);border-radius:10px;padding:6px 8px;gap:4px}
html body #app.scorepage.sc4 .scleft .sc4up.over{outline:1.5px dashed var(--acc)}
html body #app.scorepage.sc4 .scleft .sc4up .sc4ph{display:flex;align-items:center;justify-content:space-between}
html body #app.scorepage.sc4 .scleft .sc4up .uprows{overflow:auto;min-height:0}
html body #app.scorepage.sc4 .scleft .sc4up .urow{display:flex;align-items:center;gap:6px;padding:3px 2px;font-size:11.5px}
html body #app.scorepage.sc4 .scleft .sc4up .umeta{flex:1;min-width:0;display:flex;flex-direction:column}
html body #app.scorepage.sc4 .scleft .sc4up .umeta b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11.5px}
html body #app.scorepage.sc4 .scleft .sc4up .umeta span{font-size:10px;opacity:.55}
html body #app.scorepage.sc4 .scleft .sc4bro{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:5px}
html body #app.scorepage.sc4 .scleft .sc4bro details.sc4lib{flex:1 1 50%;min-height:56px}
html body #app.scorepage.sc4 .scleft .sc4bro .sc4up{flex:1 1 40%;min-height:56px;max-height:none}
html body #app.scorepage.sc4 .scleft .sc4wheels .mewheel,html body #app.scorepage.sc4 .scleft .sc4wheels .sfpad{width:70px!important;height:70px!important;margin:10px auto 8px!important}
html body #app.scorepage.sc4 .scleft .sc4ref .refzone{padding:7px 10px}
html body #app.scorepage.sc4 .scleft.wheelsoff .sc4wheels{display:none!important}
html body #app.scorepage.sc4 .scleft .sc4ref .refzone{padding:6px 10px;flex-direction:row;align-items:baseline;justify-content:center;gap:8px;flex-wrap:wrap}
html body #app.scorepage.sc4 .scleft .sc4ref .refzone b{font-size:12px}
html body #app.scorepage.sc4 .scleft .sc4bro details.sc4lib,html body #app.scorepage.sc4 .scleft .sc4bro .sc4up{min-height:48px}
html body #app.scorepage.sc4 .scfoot .studio{flex:1 1 auto!important;min-height:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important}
html body #app.scorepage.sc4 .scfoot .stgrid.v28{flex:1 1 auto!important;min-height:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;gap:6px}
html body #app.scorepage.sc4 .scfoot .stgrid.v28 .stpv{flex:1 1 auto!important;min-height:90px!important;position:static!important;margin:0!important}
html body #app.scorepage.sc4 .scfoot .sc4st,html body #app.scorepage.sc4 .scfoot .sc4acts{flex:0 0 auto!important}
html body #app.scorepage.sc4 .scfoot textarea#ststyle{height:84px!important;min-height:60px!important}
html body #app.scorepage.sc4 .scfoot .sc4acts{grid-template-columns:1fr 1fr!important}
html body #app.scorepage.sc4 .scfoot .sc4acts .screset{grid-column:span 1!important;order:0}
html body #app.scorepage.sc4 .scfoot .sc4acts details.sc4x{grid-column:span 1!important;order:1}
html body #app.scorepage.sc4 .scfoot .sc4acts details.sc4x[open]{grid-column:span 2!important}
html body #app.scorepage.sc4 .scfoot .stgrid.v28 .stpv{overflow:hidden}
html body #app.scorepage.sc4 .scfoot .stgrid.v28 .stpv pre{flex:1 1 auto!important;min-height:40px!important;overflow:auto!important;display:block!important}
/* v41.28 — resizable region */
.scdraw.pinned{cursor:grab}
.scdraw.pinned .rh{position:absolute;top:0;bottom:0;width:9px;cursor:ew-resize;background:transparent;border-radius:9px}
.scdraw.pinned .rh.l{left:0;border-left:3px solid var(--acc)}
.scdraw.pinned .rh.r{right:0;border-right:3px solid var(--acc)}
.scdraw.pinned .rh:hover{background:color-mix(in srgb,var(--acc) 35%,transparent)}
/* v41.29 */
html body #app.scorepage.sc4 .scleft .sc4ref .refhint{font-size:11px;padding:2px 0}
html body #app.scorepage.sc4 .scleft .sc4ref.has .refhint{display:none}

/* ===== v41.32 — fold headers · master · gain lines on the cues (2026-09-13) ===== */
html body #app.scorepage.sc4 .scleft .sc4fh{flex:0 0 auto;display:flex;align-items:center;gap:6px;width:100%;margin:2px 0 0;padding:4px 6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:6px;color:var(--mut);font:600 10px/1.2 var(--font,inherit);letter-spacing:.08em;text-transform:uppercase;text-align:left;cursor:pointer}
html body #app.scorepage.sc4 .scleft .sc4fh i{font-style:normal;width:10px;color:var(--warn)}
html body #app.scorepage.sc4 .scleft .sc4fh:hover{color:var(--txt)}
html body #app.scorepage.sc4 .scleft .sc4closed.sc4closed,html body #app.scorepage.sc4 .scleft .sc4closed *{display:none!important}
html body #app.scorepage.sc4 .scleft .sc4master{flex:0 0 auto}
html body #app.scorepage.sc4 .scleft .sc4master .mrow{display:flex;align-items:center;gap:8px;padding:4px 6px}
html body #app.scorepage.sc4 .scleft .sc4master input[type=range]{flex:1 1 auto;min-width:0}
html body #app.scorepage.sc4 .scleft .sc4master em{font-style:normal;width:34px;text-align:right;color:var(--warn);font-size:11px}
/* the gain line on a cue: same look as the Edit envelope, under the trim edges, over the title */
.sccue svg.scenv{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;overflow:visible}
.sccue svg.scenv .vl{stroke:var(--warn);stroke-width:1.5;fill:none;opacity:.9;pointer-events:stroke;cursor:ns-resize}
.sccue svg.scenv .vlh{stroke:rgba(255,214,106,.01);stroke-width:14;fill:none;pointer-events:stroke;cursor:ns-resize}
.sccue svg.scenv .vk{fill:var(--warn);stroke:var(--card);stroke-width:1.5;pointer-events:none}
.sccue svg.scenv .vkh{fill:rgba(255,214,106,.01);pointer-events:all;cursor:grab}
.sccue svg.scenv .fd{fill:rgba(10,11,17,.55);stroke:rgba(255,214,106,.8);stroke-width:1;pointer-events:none}
.sccue svg.scenv .fh{fill:var(--warn);stroke:var(--card);stroke-width:1.2;pointer-events:all;cursor:ew-resize}
.sccue.on svg.scenv .vl{opacity:1}
.sccue .tedge{z-index:7}

/* ===== v41.33 — AUDIO EFFECTS panel (2026-09-13) ===== */
html body #app.scorepage.sc4 .scleft .sc4fx{flex:0 0 auto;display:flex;flex-direction:column;gap:4px;padding:2px 0 4px}
html body #app.scorepage.sc4 .scleft .sc4fx .fxwho{padding:0 6px;font-size:11px;color:var(--warn)}
html body #app.scorepage.sc4 .scleft .sc4fx.none .fxwho{color:var(--mut)}
html body #app.scorepage.sc4 .scleft .sc4fx.none .fxrows,html body #app.scorepage.sc4 .scleft .sc4fx.none .fxacts{opacity:.35;pointer-events:none}
html body #app.scorepage.sc4 .scleft .sc4fx .fxrows{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;padding:0 6px}
html body #app.scorepage.sc4 .scleft .sc4fx .fxr{display:grid;grid-template-columns:52px 1fr 46px;align-items:center;gap:6px;margin:0;min-height:20px}
html body #app.scorepage.sc4 .scleft .sc4fx .fxr small{font-size:9px;letter-spacing:.06em;color:var(--mut);white-space:nowrap}
html body #app.scorepage.sc4 .scleft .sc4fx .fxr input[type=range]{width:100%;min-width:0;margin:0}
html body #app.scorepage.sc4 .scleft .sc4fx .fxr em{font-style:normal;font-size:10px;text-align:right;color:var(--txt);white-space:nowrap}
html body #app.scorepage.sc4 .scleft .sc4fx .fxr.flt{grid-column:1/-1;grid-template-columns:52px 1fr}
html body #app.scorepage.sc4 .scleft .sc4fx .fxr[data-k="freq"]{grid-column:1/-1;grid-template-columns:52px 1fr 60px}
html body #app.scorepage.sc4 .scleft .sc4fx .fxr.flt.off + .fxr,html body #app.scorepage.sc4 .scleft .sc4fx .flt.off ~ .fxr[data-k="freq"]{opacity:.45}
html body #app.scorepage.sc4 .scleft .sc4fx .fxseg{display:inline-flex;gap:2px}
html body #app.scorepage.sc4 .scleft .sc4fx .fxseg button{font-size:10px;padding:2px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:transparent;color:var(--mut);cursor:pointer}
html body #app.scorepage.sc4 .scleft .sc4fx .fxseg button.on{background:var(--warn);color:#111;border-color:var(--warn)}
html body #app.scorepage.sc4 .scleft .sc4fx .fxacts{display:flex;gap:6px;padding:2px 6px 0;flex-wrap:wrap}
html body #app.scorepage.sc4 .scleft .sc4fx .fxrender{opacity:.55}
html body #app.scorepage.sc4 .scleft .sc4fx.dirty .fxrender{opacity:1;box-shadow:0 0 0 1px var(--warn) inset}

/* ===== v41.34 — fx automation lines · reverb tails · ◇ in the panel (2026-09-13) ===== */
.sccue svg.scenv.off{display:none}
.sccue svg.scauto{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;overflow:visible}
.sccue svg.scauto .al{stroke:#7fd7ff;stroke-width:1.6;fill:none;opacity:.95;pointer-events:stroke;cursor:ns-resize}
.sccue svg.scauto .alh{stroke:rgba(127,215,255,.01);stroke-width:14;fill:none;pointer-events:stroke;cursor:ns-resize}
.sccue svg.scauto .ak{fill:#7fd7ff;stroke:var(--card);stroke-width:1.5;pointer-events:none}
.sccue svg.scauto .akh{fill:rgba(127,215,255,.01);pointer-events:all;cursor:grab}
.sccue svg.scauto .alab{fill:#7fd7ff;font:600 8px/1 var(--font,inherit);letter-spacing:.08em;opacity:.8;pointer-events:none}
.sccue.autoing>b,.sccue.autoing>span{opacity:.35}
.sclane .sctail{position:absolute;top:8px;bottom:8px;pointer-events:none;z-index:1;border-radius:0 9px 9px 0;background:linear-gradient(90deg,rgba(127,215,255,.28),rgba(127,215,255,0));border-top:1px dashed rgba(127,215,255,.35);border-bottom:1px dashed rgba(127,215,255,.35)}
html body #app.scorepage.sc4 .scleft .sc4fx .fxr[data-k]{grid-template-columns:52px 1fr 46px 16px}
html body #app.scorepage.sc4 .scleft .sc4fx .fxr[data-k="freq"]{grid-template-columns:52px 1fr 60px 16px}
html body #app.scorepage.sc4 .scleft .sc4fx .fxauto{border:0;background:transparent;color:var(--mut);font-size:11px;padding:0;cursor:pointer;line-height:1}
html body #app.scorepage.sc4 .scleft .sc4fx .fxauto.has{color:#7fd7ff}
html body #app.scorepage.sc4 .scleft .sc4fx .fxauto.on{color:#7fd7ff;text-shadow:0 0 6px rgba(127,215,255,.8)}

/* ===== v41.38 — fade handles on the top corners of a cue (2026-09-13) ===== */
.sccue .scfd{position:absolute;top:0;width:16px;height:13px;z-index:9;cursor:ew-resize;pointer-events:auto}
.sccue .scfd::before{content:'';position:absolute;left:4px;top:2px;width:8px;height:8px;border-radius:50%;background:var(--card);border:1.5px solid var(--warn);opacity:.55;box-sizing:border-box}
.sccue .scfd.on::before{background:var(--warn);opacity:1}
.sccue:hover .scfd::before,.sccue.on .scfd::before{opacity:1}
.sccue .scfd:hover::before{transform:scale(1.25)}
.sccue .scfd.l{cursor:e-resize}.sccue .scfd.r{cursor:w-resize}
body.scfading,body.scfading *{cursor:ew-resize!important}
/* the old fade dots on the level line step back — the corners own the fades now */
.sccue svg.scenv .fh{opacity:.25;pointer-events:none}

/* ===== v41.42 — corners: fades on top, badges below · reference chip on the right (2026-09-13) ===== */
.sccue .cmute{top:auto!important;bottom:3px!important;left:4px!important}
.sccue .tkpick{top:auto!important;bottom:3px!important;right:4px!important}
.sccue>b{margin-top:10px!important;padding-left:2px}
.sccue svg.scenv .fh{display:none}
.sccue .scfd{height:15px;width:18px}
html body #app.scorepage.sc4 .scfoot .sc4refchip{display:none;align-items:center;gap:8px;margin:2px 0 4px;padding:5px 8px;border-radius:8px;background:rgba(199,154,107,.12);border:1px solid rgba(199,154,107,.35);font-size:11px;color:var(--warn)}
html body #app.scorepage.sc4 .scfoot .sc4refchip.on{display:flex}
html body #app.scorepage.sc4 .scfoot .sc4refchip span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body #app.scorepage.sc4 .scfoot .sc4refchip button{flex:none}

/* ===== v41.43 — no swipe-back: a ⌘ + two-finger swipe on the timeline is a zoom, never Chrome's "back" (2026-09-13) ===== */
html,body{overscroll-behavior-x:none!important;overscroll-behavior:none!important}
html.filmroom,html.filmroom body,html.filmroom #app{overscroll-behavior:none!important}
#sctl,.sctl,.scright,.scbody,.scleft,.scfoot,#sclanes,.sclane,#tracks,.tlwrap{overscroll-behavior:none!important}

/* ===== v41.47 — MODEL row in VOICE & FEEL (2026-09-13) ===== */
html body #app.scorepage.sc4 .scleft .stcol.left .sc4model{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin:2px 0}
html body #app.scorepage.sc4 .scleft .stcol.left .sc4model small{font-size:9px;letter-spacing:.06em;color:var(--mut)}
html body #app.scorepage.sc4 .scleft .stcol.left .sc4model select{font-size:11px;padding:2px 6px;border-radius:6px;background:var(--navy4,#1b1c22);color:var(--txt);border:1px solid rgba(255,255,255,.12)}
html body #app.scorepage.sc4 .scleft .stcol.left .sc4model em{font-style:normal;font-size:10px;opacity:.6}

/* ---- v41.58 — SFX level line + fade handles ---- */
.sccue.sfxcue{overflow:visible}
.sccue.sfxcue .sxenv{position:absolute;left:0;right:0;height:2px;background:var(--warn,#ffd66a);opacity:.85;z-index:7;cursor:ns-resize}
.sccue.sfxcue .sxenv::before{content:'';position:absolute;left:0;right:0;top:-6px;height:14px}
.sccue.sfxcue .sxenv b{position:absolute;right:4px;top:-13px;font-size:9px;font-weight:600;color:var(--warn,#ffd66a);opacity:0;pointer-events:none}
.sccue.sfxcue:hover .sxenv b,.sccue.sfxcue.on .sxenv b{opacity:.9}
.sccue.sfxcue .sxfd{position:absolute;top:0;width:16px;height:13px;z-index:9;pointer-events:auto}
.sccue.sfxcue .sxfd.l{cursor:e-resize;margin-left:-8px}.sccue.sfxcue .sxfd.r{cursor:w-resize;margin-right:-8px}
.sccue.sfxcue .sxfd::before{content:'';position:absolute;left:4px;top:2px;width:8px;height:8px;border-radius:50%;background:var(--card,#141414);border:1.5px solid var(--warn,#ffd66a);opacity:.55;box-sizing:border-box}
.sccue.sfxcue .sxfd.on::before{background:var(--warn,#ffd66a);opacity:1}
.sccue.sfxcue:hover .sxfd::before,.sccue.sfxcue.on .sxfd::before{opacity:1}
.sccue.sfxcue .sxwd{position:absolute;top:0;bottom:0;pointer-events:none;z-index:5}
.sccue.sfxcue .sxwd.l{left:0;background:linear-gradient(to right,rgba(10,11,17,.6),rgba(10,11,17,0))}
.sccue.sfxcue .sxwd.r{right:0;background:linear-gradient(to left,rgba(10,11,17,.6),rgba(10,11,17,0))}
.sccue.sfxcue .cuenm{position:relative;z-index:6}

/* ---- v41.60 — LAYER (stem) select on the right ---- */
html body #app.scorepage.sc4 .scfoot .sc4stem{display:flex;align-items:center;gap:8px;margin:2px 0 4px;font-size:11px}
html body #app.scorepage.sc4 .scfoot .sc4stem small{font-size:9px;letter-spacing:.06em;color:var(--mut)}
html body #app.scorepage.sc4 .scfoot .sc4stem select{font-size:11px;padding:2px 6px;border-radius:6px;background:var(--navy4,#1b1c22);color:var(--txt);border:1px solid rgba(255,255,255,.12);max-width:220px}
html body #app.scorepage.sc4 .scfoot .sc4stem em{font-style:normal;font-size:10px;opacity:.6}
html body #app.scorepage.sc4 .scfoot .sc4stem.lay select{border-color:rgba(199,154,107,.6)}

/* ---- v41.62 — Solo badge, dimmed non-solo, layer block accent ---- */
.sccue .csolo{position:absolute;left:24px;top:3px;z-index:6;width:16px;height:16px;border-radius:5px;border:0;padding:0;font:800 9.5px/16px "Noto Sans",sans-serif;background:var(--navy4);color:var(--ink2);cursor:pointer;opacity:.55}
.sccue:hover .csolo{opacity:1}
.sccue .csolo.on{background:var(--warn,#ffd66a);color:#111;opacity:1}
.sccue.csoloed{box-shadow:0 0 0 2px rgba(255,214,106,.7)}
.sccue.cdimmed{opacity:.4;filter:saturate(.5)}
.sccue.sfxcue .csolo{left:24px;top:auto;bottom:4px}
.sccue.sfxcue .cmute{left:4px;top:auto;bottom:4px}
.sccue.islayer{border-left:3px solid rgba(199,154,107,.85)}
.sccue.islayer b{color:var(--warn,#ffd66a)}

/* ---- v41.68 — the selected cue is obvious ---- */
.sccue.on,.sccue.sel{outline:2px solid #ffd66a;outline-offset:-2px;box-shadow:0 0 0 3px rgba(255,214,106,.28),0 0 14px rgba(255,214,106,.35)}
.sccue.on::after{content:'';position:absolute;inset:0;background:rgba(255,214,106,.08);pointer-events:none;border-radius:inherit}

/* ---- v41.73 — FILM AUDIO lane · ⌥-drag copies ---- */
.sclane.va{height:26px;background:color-mix(in srgb,var(--acc) 3%,transparent);border-bottom:1px solid var(--line,var(--ln2));position:relative;cursor:crosshair;overflow:visible}
.sclane.va .scname{font-size:9px;letter-spacing:.06em;opacity:.7;z-index:6}
.sclane.va canvas.vawave{position:absolute;left:0;top:0;pointer-events:none;opacity:.8}
.sclane.va .vasel{position:absolute;top:2px;bottom:2px;background:rgba(255,214,106,.22);border:1px solid rgba(255,214,106,.8);border-radius:4px;cursor:grab;z-index:5}
.sclane.va .vahint{position:absolute;right:8px;top:6px;font-size:9px;opacity:.35;font-style:normal;pointer-events:none}
.sclane.sfx.vaover{outline:2px dashed rgba(255,214,106,.8);outline-offset:-2px}
.vaghost{position:fixed;z-index:99999;padding:4px 8px;border-radius:6px;background:#2a2515;border:1px solid rgba(255,214,106,.8);color:#ffd66a;font-size:11px;pointer-events:none}
.sccue.sfxcue.film{background:#3a5a6a!important}

/* ---- v41.74 — film M ---- */
.sclane.va .vamute{position:absolute;left:96px;top:4px;z-index:7;width:18px;height:18px;border-radius:5px;border:0;padding:0;font:800 10px/18px "Noto Sans",sans-serif;background:var(--navy4);color:var(--ink2);cursor:pointer;opacity:.8}
.sclane.va .vamute.on{background:var(--bad,#c0392b);color:#fff;opacity:1}
.sclane.va.vmuted canvas.vawave{opacity:.3}

/* ---- v41.75 — film lane: M in the pinned name, hint pinned ---- */
.sclane.va .scname{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 8px;background:linear-gradient(90deg,var(--bg,#111) 70%,transparent)}
.sclane.va .scname .vamute{position:static;width:18px;height:18px;border-radius:5px;border:0;padding:0;font:800 10px/18px "Noto Sans",sans-serif;background:var(--navy4);color:var(--ink2);cursor:pointer;opacity:.9;pointer-events:auto}
.sclane.va .scname .vamute.on{background:var(--bad,#c0392b);color:#fff}
.sclane.va .vahint{right:auto;left:0;margin-left:calc(100vw - 420px)}

/* ===== v41.76 — buffer bar on cue blocks ===== */
:root{--scbuf-mem:#4fd08a;--scbuf-part:#f0b445}
.sccue .scbuf{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:8;pointer-events:auto;background:rgba(255,255,255,.08);opacity:.95}
.sccue .scbuf.mem{background:var(--scbuf-mem)!important}
.sccue .scbuf.none{background:rgba(255,255,255,.1)!important}
.sccue .scbuf.part{background-color:rgba(255,255,255,.1)}

/* ===== v41.77 — rerun button ===== */
#screrun{margin-left:6px}
#screrun.pill.go{background:transparent;border:1px solid var(--acc,#e9b872);color:var(--acc,#e9b872)}
#screrun.pill.go:hover{background:rgba(233,184,114,.12)}

/* ===== v41.80 — key & bpm ===== */
.stkeyrow{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.stkeyrow .stf{flex:1 1 120px;min-width:110px}
.stkeyrow select,.stkeyrow input{width:100%}
.stkeyrow .stdet{flex:1 1 200px;display:flex;flex-direction:column;gap:4px}
.stkeyrow .stdet span{font-family:var(--mono,ui-monospace,monospace);font-size:12px;color:var(--acc,#e9b872);padding:6px 0}
.stkeyrow .stdet button{align-self:flex-start;padding:2px 8px;font-size:11px}
.sccue .sckb{position:absolute;right:24px;top:3px;font-size:9.5px;letter-spacing:.04em;font-family:var(--mono,ui-monospace,monospace);color:rgba(255,255,255,.75);background:rgba(0,0,0,.35);border-radius:4px;padding:1px 5px;pointer-events:none;z-index:8}

/* ===== v42.0 — one Suno-shaped console (right column) ===== */
html body #app.scorepage.sc4 .scfoot.s5foot{gap:8px}
.s5foot .stvoxrow{display:flex;gap:6px;flex:0 0 auto}
.s5foot .stvoxrow .voxb{flex:1 1 0}
html body #app.scorepage.sc4 .s5foot .studio,html body #app.scorepage.sc4 .s5foot .stgrid.v28{flex:1 1 auto;min-height:0}
html body #app.scorepage.sc4 .s5foot .stgrid.v28{overflow:auto;gap:10px;padding-right:2px}
.s5foot .stgrid.v28 > label.stf,.s5foot .stgrid.v28 > .strow{flex:0 0 auto}
.s5foot label.stf{display:flex;flex-direction:column;gap:4px;width:100%}
.s5foot label.stf > small{display:flex;align-items:center;justify-content:space-between;gap:8px;letter-spacing:.08em;font-size:10.5px;opacity:.8}
.s5foot label.stf > small button{margin-left:auto;padding:2px 9px;font-size:11px;letter-spacing:0}
.s5foot textarea,.s5foot input:not([type=range]),.s5foot select{width:100%;box-sizing:border-box}
.s5foot #ststyle{min-height:56px}
.s5foot #stlyr{min-height:56px}
.s5foot .s5adv{flex:0 0 auto}
.s5foot .s5adv .sc4fh{width:100%}
.s5foot .s5adv .s5advin{display:none;flex-direction:column;gap:10px;padding:8px 0 2px}
.s5foot .s5adv.open .s5advin{display:flex}
.s5foot .s5adv .strow{display:flex;gap:10px}
.s5foot .s5adv .strefrow.sc4hide{display:flex!important;gap:8px;align-items:center}
.s5foot .s5adv #stdur{display:none}
html body #app.scorepage.sc4 .s5foot .stpv{flex:0 0 auto!important;min-height:0!important}
html body #app.scorepage.sc4 .s5foot .stpv.s5closed pre,.s5foot .stpv.s5closed .stedit{display:none!important}
html body #app.scorepage.sc4 .s5foot .stpv:not(.s5closed) pre{max-height:180px!important;min-height:80px}
.s5foot .stpv > small{display:flex;align-items:center;gap:6px;letter-spacing:.08em;font-size:10.5px;opacity:.85;user-select:none}
.s5foot .stpv > small em{letter-spacing:0;text-transform:none;opacity:.7;font-style:italic}
.s5foot .sc4stem{flex:0 0 auto}
.s5foot .stacts.v28{display:flex;flex-wrap:wrap;gap:8px;flex:0 0 auto}
.s5foot .stacts.v28 .gen{flex:1 1 140px}
.s5foot .s5stems{appearance:none;-webkit-appearance:none;padding-right:14px}
.s5foot .sc4acts{flex:0 0 auto}
.s5foot .s5cred{font-size:11px;opacity:.6;text-align:right;flex:0 0 auto}
.scleft .stcol.left:not(:has(.sc4model)){display:none}
html body #app.scorepage.sc4 .s5foot .stgrid.v28{min-height:210px}
.s5foot .stacts.v28 button,.s5foot .stacts.v28 select,.s5foot .sc4acts button,.s5foot .sc4acts summary{padding:5px 10px!important;font-size:12px!important;min-height:30px!important;line-height:1.2}
.s5foot .stacts.v28 .gen{min-height:36px!important;font-size:13px!important;flex:1 1 100%}
.s5foot .stacts.v28 .rerun{flex:0 0 auto}
.s5foot .sc4stem{display:flex;align-items:center;gap:8px}
.s5foot .sc4stem em.crumb{display:none}
.s5foot .sc4acts{display:flex;gap:8px;align-items:center}
.s5foot .sc4acts .s5cred{margin-left:auto}
html body #app.scorepage.sc4 .s5foot .stgrid.v28{overflow-y:auto!important;overflow-x:hidden!important;padding:0 2px 0 0!important;margin:0!important}
html body #app.scorepage.sc4 .s5foot .stgrid.v28 > *{margin:0!important}
.s5foot .stkeyrow{flex-wrap:nowrap!important;align-items:flex-end}
.s5foot .stkeyrow .stf{flex:1 1 0!important;min-width:0!important}
.s5foot .stkeyrow .stdet{flex:1.3 1 0!important}
.s5foot .stkeyrow .stdet span{padding:4px 0;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s5foot .stacts.v28 select.s5stems{width:auto!important;flex:0 0 auto}
.s5foot .sc4acts{flex-wrap:nowrap!important}
.s5foot .sc4acts details.sc4x{display:inline-block;position:relative}
.s5foot .sc4acts details.sc4x .sc4xin{position:absolute;bottom:100%;right:0;z-index:20}
/* v42.1 — voice · key · bpm · mode on top */
.s5foot #s5top{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
.s5foot #s5top .s5r1,.s5foot #s5top .s5r2{display:flex;gap:6px;align-items:flex-end}
.s5foot #s5top .stvoxrow{flex:1 1 200px;min-width:0}
.s5foot #s5top .stvoxrow .voxb{padding:6px 4px!important;font-size:12px!important;min-width:0}
.s5foot #s5top label.stf{flex:0 0 auto;width:auto!important;gap:2px}
.s5foot #s5top label.stf:has(#stkey){flex:0 0 118px}
.s5foot #s5top label.stf:has(#stbpm){flex:0 0 62px}
.s5foot #s5top label.stf > small{font-size:9.5px;opacity:.7}
.s5foot #s5top select,.s5foot #s5top input{min-height:30px;padding:4px 6px;font-size:12px}
.s5foot #s5top .sc4stem{flex:1 1 auto;display:flex;align-items:center;gap:6px;margin:0}
.s5foot #s5top .sc4stem small{font-size:9.5px;opacity:.7}
.s5foot #s5top .sc4stem select{flex:1 1 auto;min-height:30px;font-size:12px}
.s5foot #s5top .stdet{flex:0 0 auto;display:flex;flex-direction:row;align-items:center;gap:6px}
.s5foot #s5top .stdet small{display:none}
.s5foot #s5top .stdet span{font-size:11px;white-space:nowrap;padding:0}
.s5foot #s5top .stdet button{padding:2px 7px;font-size:10.5px}
html body #app.scorepage.sc4 .s5foot .sc4fh{flex:0 0 auto;display:flex;align-items:center;gap:6px;width:100%;margin:0;padding:5px 6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:6px;color:var(--mut);font:600 10px/1.2 var(--font,inherit);letter-spacing:.08em;text-transform:uppercase;text-align:left;cursor:pointer}
.s5foot #s5top .stvoxrow{flex:1 1 auto;min-width:0}
.s5foot #s5top .stvoxrow .voxb{padding:6px 2px!important;font-size:11px!important;letter-spacing:0}
.s5foot #s5top label.stf.s5k{flex:0 0 104px}
.s5foot #s5top label.stf.s5b{flex:0 0 58px}
.s5foot #s5top #stbpm{padding:4px 2px 4px 6px}
.s5foot #s5top .s5r3{display:flex;align-items:center;gap:8px;min-height:20px}
.s5foot #s5top .s5r3 .stdet{flex:1 1 auto;justify-content:flex-end}
.s5foot #s5top .s5r3 .stdet small{display:inline;font-size:9.5px;opacity:.7;letter-spacing:.08em}
.s5foot #s5top .stvoxrow .voxb{padding:6px 4px!important;font-size:12px!important}
.s5foot #s5top label.stf.s5k{flex:0 0 120px}
.s5foot #s5top label.stf.s5b{flex:0 0 74px}

/* ===== v43.0 — the studio shell: create · library · timeline ===== */
html body #app.scorepage.sc4 .scbody.s5{display:grid!important;grid-template-columns:var(--lw,420px) 8px var(--mw,300px) 8px minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important;gap:0!important;height:calc(100vh - 118px);min-height:520px}
html body #app.scorepage.sc4 .scbody.s5 > #s5left{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:8px;min-height:0;overflow:auto;padding-right:2px}
html body #app.scorepage.sc4 .scbody.s5 > #s5lib{grid-column:3;grid-row:1;display:flex;flex-direction:column;min-height:0;background:var(--card);border-radius:12px;overflow:hidden}
html body #app.scorepage.sc4 .scbody.s5 > #s5main{grid-column:5;grid-row:1;display:flex;flex-direction:column;min-height:0;gap:6px}
html body #app.scorepage.sc4 .scbody.s5 .scleft,html body #app.scorepage.sc4 .scbody.s5 .scfoot{height:auto!important;max-height:none!important;flex:0 0 auto;overflow:visible!important;width:auto!important}
html body #app.scorepage.sc4 .scbody.s5 .scfoot{padding:10px 12px!important}
html body #app.scorepage.sc4 .scbody.s5 .scfoot .studio,html body #app.scorepage.sc4 .scbody.s5 .scfoot .stgrid.v28{flex:0 0 auto!important;overflow:visible!important;min-height:0!important}
html body #app.scorepage.sc4 .scbody.s5 .sc4c{height:auto!important;max-height:none!important}
html body #app.scorepage.s4.sc4 .scbody.s5 .scright{height:auto!important}
#s5dock{flex:0 0 auto}
#s5dock.empty{display:none}
html body #app.scorepage.sc4 .scbody.s5 > #s5main > .scright{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;height:auto!important;max-height:none!important}
#s5tlwrap{display:flex;flex:1 1 auto;min-height:0;position:relative}
#s5tlwrap > #sctl{flex:1 1 auto;min-width:0}
#s5hd{flex:0 0 150px;position:relative;overflow:hidden;border-right:1px solid rgba(255,255,255,.08);background:var(--card)}
#s5hd .s5h{position:absolute;left:0;right:0;display:flex;align-items:center;gap:8px;padding:0 8px;box-sizing:border-box;border-bottom:1px solid rgba(255,255,255,.05)}
#s5hd .s5c{width:4px;align-self:stretch;border-radius:2px;flex:0 0 4px;margin:6px 0}
#s5hd .s5hn{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
#s5hd .s5hn b{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#s5hd .s5ms{display:flex;gap:4px}
#s5hd .s5ms i{width:18px;height:16px;border-radius:4px;background:rgba(255,255,255,.08);font:800 9px/16px sans-serif;text-align:center;cursor:pointer;opacity:.8;font-style:normal}
#s5hd .s5ms i.on{background:var(--acc,#e9b872);color:#111;opacity:1}
#s5hd .s5fader{width:54px;height:14px;flex:0 0 auto;margin:0;cursor:ew-resize}
#s5hd .s5h[data-k="v"],#s5hd .s5h[data-k="va"]{opacity:.8}
.scbody.s5 .sclane.m .scname,.scbody.s5 .sclane.v .scname,.scbody.s5 .sclane.sfx .lnlab{display:none!important}
.scbody.s5 .sclane.s5over{outline:1px dashed var(--acc,#e9b872);outline-offset:-2px}
body.s5dragging{cursor:copy!important;user-select:none}
.s5ghost{position:fixed;z-index:9999;pointer-events:none;background:var(--acc,#e9b872);color:#111;font-size:11px;padding:3px 8px;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.4)}
/* library */
#s5lib .s5libh{display:flex;align-items:center;gap:8px;padding:10px 10px 8px;border-bottom:1px solid rgba(255,255,255,.07)}
#s5lib .s5libh b{font-size:10.5px;letter-spacing:.1em;opacity:.8}
#s5lib .s5libh .s5libq{margin-left:auto;width:110px;font-size:11px;padding:4px 8px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.25);color:inherit}
#s5lib .s5rows{flex:1 1 auto;overflow:auto;min-height:0}
#s5lib .s5row{display:flex;gap:9px;align-items:center;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.05);cursor:grab}
#s5lib .s5row:hover{background:rgba(255,255,255,.04)}
#s5lib .s5row.on{background:rgba(233,184,114,.1);box-shadow:inset 3px 0 0 var(--acc,#e9b872)}
#s5lib .s5row.dim .s5meta{opacity:.6}
#s5lib .s5tile{width:38px;height:38px;border-radius:7px;flex:0 0 38px;display:flex;align-items:center;justify-content:center;font:700 10px/1 sans-serif;letter-spacing:.05em}
#s5lib .s5meta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
#s5lib .s5meta b{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#s5lib .s5tags{font-size:10.5px;opacity:.55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#s5lib .s5badges{display:flex;gap:4px;flex-wrap:wrap}
#s5lib .s5badges i{font:600 9px/1.5 var(--mono,ui-monospace,monospace);font-style:normal;padding:0 5px;border-radius:4px;background:rgba(255,255,255,.08);opacity:.85}
#s5lib .s5badges i.s5wr{background:rgba(233,184,114,.2);color:var(--acc,#e9b872)}
#s5lib .s5badges i.s5bad{background:rgba(255,95,109,.2);color:#ff7d8a}
#s5lib .s5rowacts{display:flex;flex-direction:column;gap:4px;opacity:0;transition:opacity .15s}
#s5lib .s5row:hover .s5rowacts{opacity:1}
#s5lib .s5rowacts .ico{width:24px;height:22px;font-size:11px}
#s5lib .s5empty{padding:20px 12px;font-size:11.5px;line-height:1.5}
/* the floating player */
#s5float{position:fixed;right:24px;bottom:24px;width:520px;min-width:320px;min-height:200px;z-index:900;background:var(--card);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.55);resize:both;overflow:hidden;display:flex;flex-direction:column}
#s5float .s5fbar{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;font-size:10px;letter-spacing:.1em;opacity:.8;cursor:move;border-bottom:1px solid rgba(255,255,255,.07)}
#s5float .sc4c{flex:1 1 auto;min-height:0;overflow:auto;padding:8px}
#s5float video#scmon{max-height:60vh}
html body #app.scorepage.sc4 .scfoot .stgrid.v28 .stpv.s5closed pre{display:none!important}
html body #app.scorepage.sc4 .scbody.s5 #s5dock .sc4c{height:min(var(--th,50%),44vh)!important;max-height:44vh!important;display:flex;flex-direction:column}
html body #app.scorepage.sc4 .scbody.s5 #s5dock .sc4c .scmon{flex:1 1 auto;min-height:120px}
html body #app.scorepage.sc4 .scbody.s5 #s5dock .sc4c .scmon video{height:100%!important;min-height:120px!important}
html body #app.scorepage.sc4 .scbody.s5 > #s5main > .sc4h.b{flex:0 0 8px;display:block}
#s5lib{background:rgba(255,255,255,.03)!important}
#s5lib .s5meta b,#s5lib .s5tags{background:none!important;padding:0!important}
#s5hd .s5hn b{background:none!important;padding:0!important}
html body #app.scorepage.sc4 #s5float .sc4c .scmon video{height:auto!important;max-height:52vh!important}
#s5lib .s5row,#s5hd{user-select:none;-webkit-user-select:none}
html body #app.scorepage.sc4 .scbody.s5 #s5dock .sc4c .scmon video{flex:1 1 0px!important;height:auto!important;min-height:0!important}
html body #app.scorepage.sc4 .scbody.s5 #s5dock .sc4c .scmonbar{flex:0 0 auto}
html body #app.scorepage.sc4 .scbody.s5 #s5dock .sc4c .moodlanewrap{flex:0 0 auto}

/* ===== v43.1 — folds everywhere · the player's home ===== */
.s5fold{position:relative}
.s5fold > .s5fh{display:flex;align-items:center;gap:6px;width:100%;margin:0 0 4px;padding:5px 6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:6px;color:var(--mut);font:600 10px/1.2 var(--font,inherit);letter-spacing:.08em;text-transform:uppercase;text-align:left;cursor:pointer}
.s5fold.s5closed > *:not(.s5fh){display:none!important}
.s5fold > small.s5sub{opacity:.75}
label.stf.s5fold > small.s5sub{margin-top:2px}
.s5fold > small.s5sub > :first-child{display:none}
#s5top.s5fold > .s5fh{margin-bottom:6px}
.stacts.s5fold{padding-top:0}
.stacts.s5fold > .s5fh{flex:1 1 100%}
/* library fold */
#s5lib .s5libtog{width:22px;height:22px;font-size:11px;flex:0 0 auto}
#s5lib.s5closed .s5libh .s5libq,#s5lib.s5closed .s5rows{display:none!important}
#s5lib.s5closed{flex:0 0 auto}
/* the player above the library */
#s5libdock{flex:0 0 auto;padding:8px 8px 4px;border-bottom:1px solid rgba(255,255,255,.07)}
html body #app.scorepage.sc4 .scbody.s5 #s5libdock .sc4c{height:auto!important;max-height:none!important;display:flex;flex-direction:column;gap:6px}
html body #app.scorepage.sc4 .scbody.s5 #s5libdock .sc4c .scmon{flex:0 0 auto;display:flex;flex-direction:column}
html body #app.scorepage.sc4 .scbody.s5 #s5libdock .sc4c .scmon video{width:100%!important;height:auto!important;aspect-ratio:16/9;max-height:38vh!important;object-fit:contain;flex:0 0 auto!important;min-height:0!important}
html body #app.scorepage.sc4 .scbody.s5 #s5libdock .sc4c .scmonbar{flex-wrap:wrap;gap:6px}
html body #app.scorepage.sc4 .scbody.s5 #s5libdock .sc4c .moodlanewrap{flex:0 0 auto}
/* the player above the timeline: a real size, the handle resizes it */
html body #app.scorepage.sc4 .scbody.s5.s5pl-dock #s5dock .sc4c{height:clamp(220px,var(--th,45%),60vh)!important;max-height:60vh!important}
html body #app.scorepage.sc4 .scbody.s5.s5pl-dock #s5dock .sc4c .scmon{flex:1 1 auto;min-height:0}
html body #app.scorepage.sc4 .scbody.s5.s5pl-dock #s5dock .sc4c .scmon video{flex:1 1 0px!important;height:auto!important;min-height:0!important;object-fit:contain}
html body #app.scorepage.sc4 .scbody.s5.s5pl-lib > #s5main > .sc4h.b{display:none}
.s5plsw{font-size:10.5px;padding:2px 6px;max-width:150px}
.scleft .sc4bro details.sclib{display:none!important}

/* ===== v43.2 — resizable columns · uploads in the library · quieter ===== */
.scbody.s5 .s5h5{grid-row:1;cursor:col-resize;border-radius:4px;background:transparent;position:relative}
.scbody.s5 .s5h5::after{content:'';position:absolute;left:3px;right:3px;top:0;bottom:0;border-radius:2px;background:rgba(255,255,255,.06)}
.scbody.s5 .s5h5:hover::after{background:rgba(233,184,114,.45)}
body.s5resizing{cursor:col-resize!important;user-select:none}
html body #app.scorepage.sc4 .scbody.s5 #s5libdock .sc4c .scmon video{max-height:60vh!important}
.scleft .sc4up.s5stub{display:none!important}
#s5ups{flex:0 0 auto;border-top:1px solid rgba(255,255,255,.07)}
#s5ups > .s5fh{border-radius:0;border-left:0;border-right:0;margin:0}
#s5ups .sc4up{padding:8px}
#s5ups.s5closed .sc4up{display:none}
.s5fh .s5inh{margin-left:auto;padding:1px 8px;font-size:10.5px;letter-spacing:0;text-transform:none}
.s5hide{display:none!important}
.scmonbar .s5plsw,.scmonbar .s5pop,.scmonbar #scplaybtn,.scmonbar #sctc,.scmonbar label{display:inline-flex!important}
.s5foot .s5cred{font-size:10px;opacity:.45}
.scleft .sc4model em.crumb{display:none}
#s5lib .s5libh{padding:8px 10px}
.stacts.s5fold:not(.s5closed) > .s5fh .s5mini{display:none}
.s5fh .s5mini{background:var(--acc,#e9b872)!important;color:#111!important;font-weight:700}
.scleft .sc4fh[data-k="up"]{display:none!important}
html body #app.scorepage.sc4 .s5foot .stpv.s5closed{padding:0!important;background:transparent!important;min-height:0!important}
html body #app.scorepage.sc4 .s5foot .stpv.s5closed > small{padding:5px 6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:6px;margin:0}

/* ===== v43.3 — watch the scene ===== */
.stpv > small .s5watch{margin-left:auto;padding:2px 9px;font-size:10.5px;letter-spacing:0;text-transform:none;background:rgba(233,184,114,.16);border:1px solid rgba(233,184,114,.4);color:var(--acc,#e9b872)}
.stpv > small .s5watch[disabled]{opacity:.6}

/* ===== v43.4 — palettes ===== */
.s5pal{display:flex;flex-direction:column;gap:5px;margin-top:6px}
.s5pal > small{font-size:9.5px;letter-spacing:.06em;opacity:.6;text-transform:uppercase}
.s5palrow{display:flex;flex-wrap:wrap;gap:5px}
.s5palrow .pill.sm{padding:3px 8px;font-size:10.5px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.s5palrow .pill.sm:hover{border-color:var(--acc,#e9b872);color:var(--acc,#e9b872)}

/* ===== v43.5 — quick panel under the player · library left · left column folds ===== */
html body #app.scorepage.sc4 .scbody.s5 > #s5mid{grid-column:3;grid-row:1;display:flex;flex-direction:column;min-height:0;background:rgba(255,255,255,.03);border-radius:12px;overflow:hidden}
html body #app.scorepage.sc4 .scbody.s5 > #s5lib{display:none}
#s5left > #s5lib{display:flex!important;flex-direction:column;flex:0 1 auto;max-height:46%;min-height:0;background:rgba(255,255,255,.03);border-radius:12px;overflow:hidden}
#s5left > #s5lib.s5closed{max-height:none}
#s5mid > #s5libdock{flex:0 0 auto;border-bottom:1px solid rgba(255,255,255,.07)}
#s5quick{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:10px 10px 12px}
#s5quick label.stf{display:flex;flex-direction:column;gap:4px}
#s5quick label.stf > .s5fh{display:none}
#s5quick label.stf.s5fold > *:not(.s5fh){display:revert!important}
#s5quick label.stf > small.s5sub{display:flex!important;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.08em;opacity:.8}
#s5quick label.stf > small.s5sub > :first-child{display:inline}
#s5quick label.stf > small.s5sub button{margin-left:auto;padding:2px 8px;font-size:10.5px;letter-spacing:0;text-transform:none}
#s5quick #ststyle{min-height:74px}
#s5quick .strow{display:flex;gap:12px}
#s5quick .strow .stf{flex:1 1 0}
#s5quick .s5qacts{display:flex;gap:8px;margin-top:auto}
#s5quick .s5qacts .s5qwatch{flex:1 1 auto;background:rgba(233,184,114,.14);border:1px solid rgba(233,184,114,.4);color:var(--acc,#e9b872)}
#s5quick .s5qacts .s5qcreate{flex:1 1 auto;min-height:38px;font-weight:700}
#s5ltog{position:sticky;top:0;z-index:5;align-self:flex-end;width:22px;height:22px;font-size:11px;margin:-2px 0 -6px;opacity:.7}
.scbody.s5.s5lcol > #s5left > *:not(#s5ltog){display:none!important}
.scbody.s5.s5lcol > #s5left{padding:0;overflow:hidden}
.scbody.s5.s5lcol > #s5left > #s5ltog{align-self:center;margin:6px 0}
.scbody.s5.s5lcol > #s5h1{pointer-events:none;opacity:0}

/* ===== v43.6 — no header column · compact key/bpm · the premium skin ===== */
/* 1 · the lanes keep their own names again */
.scbody.s5 .sclane.m .scname,.scbody.s5 .sclane.v .scname,.scbody.s5 .sclane.sfx .lnlab{display:inline-flex!important}
#s5hd,#s5top .s5r3{display:none!important}
#s5top .s5r2 .stf{gap:2px}
#s5top .s5r2 label.stf > small{font-size:9px;opacity:.55}
/* 2 · the skin — charcoal, soft depth, glossy controls; scoped to the Score room */
html body #app.scorepage.sc4{--pnl:#22262a;--well:#15181b;--edge:rgba(255,255,255,.055);--gloss:linear-gradient(180deg,#fafafa,#cfd2d5 60%,#b9bdc1);--acc:#e2b46f}
html body #app.scorepage.sc4 .scbody.s5 > #s5left,html body #app.scorepage.sc4 .scbody.s5 > #s5mid,html body #app.scorepage.sc4 .scbody.s5 > #s5main > .scright,html body #app.scorepage.sc4 .scbody.s5 .scfoot,html body #app.scorepage.sc4 .scbody.s5 .scleft,#s5left > #s5lib{background:var(--pnl)!important;border-radius:14px!important;box-shadow:0 12px 32px -14px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.045)!important}
html body #app.scorepage.sc4 .scbody.s5 > #s5left{background:transparent!important;box-shadow:none!important}
html body #app.scorepage.sc4 .scbody.s5 textarea,html body #app.scorepage.sc4 .scbody.s5 input:not([type=range]):not([type=checkbox]),html body #app.scorepage.sc4 .scbody.s5 select{background:var(--well)!important;border:1px solid var(--edge)!important;border-radius:10px!important;box-shadow:inset 0 2px 8px rgba(0,0,0,.55),inset 0 -1px 0 rgba(255,255,255,.03)!important;color:#e8e6e1}
html body #app.scorepage.sc4 .scbody.s5 textarea:focus,html body #app.scorepage.sc4 .scbody.s5 input:focus,html body #app.scorepage.sc4 .scbody.s5 select:focus{outline:none;border-color:rgba(226,180,111,.5)!important;box-shadow:inset 0 2px 8px rgba(0,0,0,.55),0 0 0 3px rgba(226,180,111,.12)!important}
/* fold headers as brushed strips */
html body #app.scorepage.sc4 .scleft .sc4fh,html body #app.scorepage.sc4 .s5foot .sc4fh,.s5fold > .s5fh,#s5ups > .s5fh,html body #app.scorepage.sc4 .s5foot .stpv.s5closed > small{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025))!important;border:1px solid var(--edge)!important;box-shadow:0 2px 6px -3px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05)!important;color:#c9c6bf!important}
/* pills */
html body #app.scorepage.sc4 .scbody.s5 .pill,html body #app.scorepage.sc4 .scbody.s5 .ico{background:linear-gradient(180deg,#31363b,#24282c)!important;border:1px solid var(--edge)!important;color:#dcd9d2!important;box-shadow:0 3px 8px -3px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06)!important;text-shadow:0 1px 0 rgba(0,0,0,.4)}
html body #app.scorepage.sc4 .scbody.s5 .pill:hover,html body #app.scorepage.sc4 .scbody.s5 .ico:hover{background:linear-gradient(180deg,#3a4046,#2a2f34)!important;border-color:rgba(255,255,255,.12)!important}
html body #app.scorepage.sc4 .scbody.s5 .pill.go,html body #app.scorepage.sc4 .scbody.s5 .s5qcreate,html body #app.scorepage.sc4 .scbody.s5 .s5mini{background:linear-gradient(180deg,#f0c98a,#d9a75c 55%,#c6924a)!important;color:#1c1508!important;border:1px solid rgba(255,220,160,.35)!important;box-shadow:0 8px 20px -8px rgba(226,180,111,.7),inset 0 1px 0 rgba(255,255,255,.35)!important;text-shadow:none}
html body #app.scorepage.sc4 .scbody.s5 .voxb{background:linear-gradient(180deg,#2d3237,#22262a)!important;border:1px solid var(--edge)!important;color:#bdb9b1!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important}
html body #app.scorepage.sc4 .scbody.s5 .voxb.on{background:var(--gloss)!important;color:#15181b!important;border-color:rgba(255,255,255,.5)!important;box-shadow:0 4px 12px -4px rgba(0,0,0,.8),inset 0 1px 0 #fff!important}
/* range sliders: recessed groove, glossy thumb */
html body #app.scorepage.sc4 .scbody.s5 input[type=range]{-webkit-appearance:none;appearance:none;height:22px;background:transparent;border:0;box-shadow:none}
html body #app.scorepage.sc4 .scbody.s5 input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:4px;background:var(--well);box-shadow:inset 0 2px 4px rgba(0,0,0,.7),inset 0 -1px 0 rgba(255,255,255,.04)}
html body #app.scorepage.sc4 .scbody.s5 input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:14px;margin-top:-4px;border-radius:7px;background:var(--gloss);border:1px solid rgba(0,0,0,.6);box-shadow:0 3px 6px rgba(0,0,0,.6),inset 0 1px 0 #fff}
html body #app.scorepage.sc4 .scbody.s5 input[type=range]::-moz-range-track{height:6px;border-radius:4px;background:var(--well)}
html body #app.scorepage.sc4 .scbody.s5 input[type=range]::-moz-range-thumb{width:22px;height:14px;border-radius:7px;background:var(--gloss);border:1px solid rgba(0,0,0,.6)}
/* the FX knobs: brushed metal */
html body #app.scorepage.sc4 .scleft .sc4fx .fxr .knob,html body #app.scorepage.sc4 .scleft .sc4fx .fxr i.kn,html body #app.scorepage.sc4 .scleft .sc4fx .fxr .fxk{background:radial-gradient(circle at 38% 32%,#f3f3f3,#c9ccd0 45%,#8f959b 100%)!important;box-shadow:0 4px 10px rgba(0,0,0,.7),inset 0 1px 0 #fff,0 0 0 3px #1a1d20,0 0 0 4px rgba(255,255,255,.06)!important;border:0!important}
/* library rows + cue blocks */
#s5lib .s5row{border-bottom:1px solid rgba(0,0,0,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
#s5lib .s5tile{box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 2px 6px -2px rgba(0,0,0,.8)}
html body #app.scorepage.sc4 .sccue{box-shadow:0 4px 12px -6px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.14)!important}
/* player card */
#s5mid > #s5libdock{background:linear-gradient(180deg,#25292d,#1e2226);box-shadow:inset 0 -1px 0 rgba(255,255,255,.04)}
html body #app.scorepage.sc4 .scbody.s5 #s5libdock video{border-radius:12px;box-shadow:0 14px 30px -12px rgba(0,0,0,.9)}
#s5quick .s5pal .pill.sm{background:linear-gradient(180deg,#2b3035,#22262a)!important}
/* timeline surface */
html body #app.scorepage.sc4 .scbody.s5 #sctl{background:linear-gradient(180deg,#1c1f22,#191c1f)}

/* ===== v43.7 — the design language: graphite neumorphic (Philip's Mixer-Pro references) ===== */
html body #app.scorepage.sc4{--bg0:#1a1d20;--pnl:#212529;--pnl2:#262a2e;--well:#141719;--hi:rgba(255,255,255,.06);--lo:rgba(0,0,0,.65);--txt:#e6e3dc;--mut:#8f949a;--acc:#dcb26e;--gloss:linear-gradient(180deg,#ffffff,#d9dcdf 55%,#b7bbc0);font-family:"Inter","Helvetica Neue",system-ui,sans-serif}
html body #app.scorepage.sc4,html body #app.scorepage.sc4 .scbody.s5{background:var(--bg0)!important}
/* embossed panels: light from the top-left, shadow to the bottom-right */
html body #app.scorepage.sc4 .scbody.s5 > #s5mid,html body #app.scorepage.sc4 .scbody.s5 > #s5main > .scright,html body #app.scorepage.sc4 .scbody.s5 .scfoot,html body #app.scorepage.sc4 .scbody.s5 .scleft,#s5left > #s5lib{background:linear-gradient(145deg,var(--pnl2),var(--pnl))!important;border-radius:20px!important;border:0!important;box-shadow:-6px -6px 16px rgba(255,255,255,.035),10px 12px 28px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05)!important}
/* wells */
html body #app.scorepage.sc4 .scbody.s5 textarea,html body #app.scorepage.sc4 .scbody.s5 input:not([type=range]):not([type=checkbox]),html body #app.scorepage.sc4 .scbody.s5 select,html body #app.scorepage.sc4 .scbody.s5 .stpv pre,html body #app.scorepage.sc4 .scbody.s5 #sctl{background:var(--well)!important;border:0!important;border-radius:16px!important;box-shadow:inset 4px 4px 10px rgba(0,0,0,.7),inset -3px -3px 8px rgba(255,255,255,.035)!important;color:var(--txt)!important}
html body #app.scorepage.sc4 .scbody.s5 textarea{padding:12px 14px!important;line-height:1.45}
html body #app.scorepage.sc4 .scbody.s5 select{padding:8px 12px!important}
/* labels: quiet mono caps */
html body #app.scorepage.sc4 .scbody.s5 label.stf > small,html body #app.scorepage.sc4 .scbody.s5 .s5fh span,html body #app.scorepage.sc4 .scbody.s5 .sc4fh span,#s5lib .s5libh b,.s5pal > small,#s5quick .stpv > small,html body #app.scorepage.sc4 .scbody.s5 .strow small,html body #app.scorepage.sc4 .scbody.s5 .moodlanewrap small.lab{font-family:"JetBrains Mono","SF Mono",ui-monospace,monospace!important;font-size:9.5px!important;letter-spacing:.16em!important;text-transform:uppercase;color:var(--mut)!important;font-weight:500!important}
/* fold strips as raised keys */
html body #app.scorepage.sc4 .scleft .sc4fh,html body #app.scorepage.sc4 .s5foot .sc4fh,.s5fold > .s5fh,#s5ups > .s5fh,html body #app.scorepage.sc4 .s5foot .stpv.s5closed > small,#s5quick .stpv > small{background:linear-gradient(145deg,#2a2f34,#202429)!important;border:0!important;border-radius:14px!important;padding:8px 12px!important;box-shadow:-3px -3px 8px rgba(255,255,255,.035),4px 5px 12px rgba(0,0,0,.55)!important}
/* pills: raised keys; primary: gold */
html body #app.scorepage.sc4 .scbody.s5 .pill,html body #app.scorepage.sc4 .scbody.s5 .ico,html body #app.scorepage.sc4 .scbody.s5 .voxb{background:linear-gradient(145deg,#2c3136,#212529)!important;border:0!important;border-radius:999px!important;color:#d6d3cc!important;box-shadow:-3px -3px 8px rgba(255,255,255,.04),4px 5px 12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05)!important;text-shadow:none!important;font-weight:600}
html body #app.scorepage.sc4 .scbody.s5 .pill:active,html body #app.scorepage.sc4 .scbody.s5 .ico:active{box-shadow:inset 3px 3px 8px rgba(0,0,0,.7),inset -2px -2px 6px rgba(255,255,255,.03)!important}
html body #app.scorepage.sc4 .scbody.s5 .voxb.on,html body #app.scorepage.sc4 .scbody.s5 .sctog i.on,html body #app.scorepage.sc4 .scbody.s5 .cmute.on{background:var(--gloss)!important;color:#15181b!important;box-shadow:0 6px 14px -4px rgba(0,0,0,.9),inset 0 1px 0 #fff,inset 0 -2px 4px rgba(0,0,0,.15)!important}
html body #app.scorepage.sc4 .scbody.s5 .pill.go,html body #app.scorepage.sc4 .scbody.s5 .s5qcreate,html body #app.scorepage.sc4 .scbody.s5 .s5mini{background:linear-gradient(145deg,#f2cf93,#cfa25a 60%,#b98a45)!important;color:#1a1408!important;box-shadow:-3px -3px 8px rgba(255,255,255,.05),6px 8px 18px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.45)!important}
html body #app.scorepage.sc4 .scbody.s5 .s5qwatch{background:linear-gradient(145deg,#2c3136,#212529)!important;color:var(--acc)!important}
/* sliders: capsule grooves, tall glossy pill thumbs (the fader reference) */
html body #app.scorepage.sc4 .scbody.s5 input[type=range]{-webkit-appearance:none;appearance:none;height:30px;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important}
html body #app.scorepage.sc4 .scbody.s5 input[type=range]::-webkit-slider-runnable-track{height:16px;border-radius:999px;background:var(--well);box-shadow:inset 3px 3px 8px rgba(0,0,0,.75),inset -2px -2px 6px rgba(255,255,255,.035)}
html body #app.scorepage.sc4 .scbody.s5 input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:28px;margin-top:-6px;border-radius:999px;background:var(--gloss);border:0;box-shadow:0 4px 8px rgba(0,0,0,.7),inset 0 1px 0 #fff,inset 0 -2px 3px rgba(0,0,0,.18)}
html body #app.scorepage.sc4 .scbody.s5 input[type=range]::-moz-range-track{height:16px;border-radius:999px;background:var(--well)}
html body #app.scorepage.sc4 .scbody.s5 input[type=range]::-moz-range-thumb{width:16px;height:28px;border-radius:999px;background:var(--gloss);border:0}
/* the master + fx rows keep small sliders */
html body #app.scorepage.sc4 .scleft .sc4fx .fxr input[type=range],html body #app.scorepage.sc4 .scleft .sc4master input[type=range]{height:22px}
html body #app.scorepage.sc4 .scleft .sc4fx .fxr input[type=range]::-webkit-slider-runnable-track,html body #app.scorepage.sc4 .scleft .sc4master input[type=range]::-webkit-slider-runnable-track{height:10px}
html body #app.scorepage.sc4 .scleft .sc4fx .fxr input[type=range]::-webkit-slider-thumb,html body #app.scorepage.sc4 .scleft .sc4master input[type=range]::-webkit-slider-thumb{width:12px;height:20px;margin-top:-5px}
/* library rows as soft cards */
#s5lib .s5row{margin:6px 8px;border-radius:14px;border:0;background:linear-gradient(145deg,#262a2e,#1f2327);box-shadow:-2px -2px 6px rgba(255,255,255,.03),3px 4px 10px rgba(0,0,0,.5)}
#s5lib .s5row.on{box-shadow:inset 3px 3px 8px rgba(0,0,0,.7),inset -2px -2px 6px rgba(255,255,255,.03);background:var(--well)}
#s5lib .s5tile{border-radius:10px}
/* cue blocks + lanes */
html body #app.scorepage.sc4 .sccue{border-radius:10px!important;box-shadow:0 6px 14px -6px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.16)!important}
html body #app.scorepage.sc4 .scbody.s5 #sctl{border-radius:16px!important;padding:6px}
/* the player card */
#s5mid > #s5libdock{background:transparent;border-bottom:0;padding:12px 12px 6px}
html body #app.scorepage.sc4 .scbody.s5 #s5libdock video{border-radius:16px;box-shadow:-4px -4px 12px rgba(255,255,255,.03),8px 10px 24px rgba(0,0,0,.75)}
html body #app.scorepage.sc4 .scbody.s5 .scmonbar{background:linear-gradient(145deg,#262a2e,#1f2327);border-radius:14px;padding:8px 10px;box-shadow:inset 2px 2px 6px rgba(0,0,0,.55),inset -2px -2px 5px rgba(255,255,255,.03)}
html body #app.scorepage.sc4 .scbody.s5 #sctc{background:var(--well)!important;border-radius:10px!important;box-shadow:inset 2px 2px 6px rgba(0,0,0,.7)!important;padding:4px 10px!important;letter-spacing:.08em}
/* THE CUE bar */
html body #app.scorepage.sc4 .scbody.s5 .moodlane{border-radius:999px!important;box-shadow:inset 3px 3px 8px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.04)!important}
/* quick panel: the notes sit between sliders and the actions */
#s5quick .stpv{flex:0 0 auto}
#s5quick .stpv > small{display:flex!important;align-items:center;gap:8px;cursor:pointer;margin-bottom:6px}
#s5quick .stpv > small .s5watch{display:none}
#s5quick .stpv:not(.s5closed) pre{max-height:160px!important;min-height:60px;padding:10px 12px}
/* the collapse tab: an obvious vertical key on the left column's edge */
#s5ltog{position:sticky;top:0;z-index:6;align-self:flex-end;display:flex;flex-direction:column;align-items:center;gap:4px;width:26px;padding:8px 0;margin:0 -4px -4px 0;border-radius:10px;background:linear-gradient(145deg,#2c3136,#212529);color:var(--acc);box-shadow:-2px -2px 6px rgba(255,255,255,.04),3px 4px 10px rgba(0,0,0,.6);font-size:11px;cursor:pointer;border:0;opacity:1}
#s5ltog span{writing-mode:vertical-rl;font:500 8.5px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.2em;color:var(--mut)}
.scbody.s5.s5lcol > #s5left > #s5ltog{align-self:center;margin:6px 0}

/* ===== v43.10 — one label per cue block ===== */
.scbody.s5 .sccue > span{display:none!important}
.scbody.s5 .sccue > b{position:absolute!important;left:48px!important;top:5px!important;right:92px;margin:0!important;padding:0!important;font-size:11px;font-weight:600;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.92;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.scbody.s5 .sccue .csolo{top:4px!important;left:26px!important}
.scbody.s5 .sccue .sckb{top:4px!important;right:22px!important;background:rgba(0,0,0,.45);padding:1px 6px;border-radius:6px}
.scbody.s5 .sccue .cmute{top:auto!important;bottom:8px!important;left:6px!important}
.scbody.s5 .sccue .scfd.l{left:0!important}
/* ===== v44.0 — OBSIDIAN: the Score room's design language, rethought (2026-09-14) =====
   Philip: "less noisy, more intuitive — everything blends, too much text, buttons linger."
   · one ground, one panel tone, one accent (electric blue) for the primary action / focus / selection
   · colour means something: music = indigo, SFX = amber, film audio = teal, playhead = white
   · flat surfaces separated by hairlines, not shadows · every control 30 px (26 px small), 8 px radius
   · labels: Inter 10.5 px caps, no mono except the clock and badges · helper sentences become tooltips
   Scoped to #app.scorepage.sc4 — the rest of Cinemaker keeps its skin. */
html body #app.scorepage.sc4{--bg0:#0c0d11;--pnl:#15171d;--pnl2:#1b1e26;--well:#0a0b0e;--line:rgba(255,255,255,.07);--line2:rgba(255,255,255,.12);--txt:#e9ebf0;--mut:#8e94a6;--dim:#5b6072;--acc:#4d8dff;--acc2:#8db4ff;--accd:rgba(77,141,255,.16);--mus:#6f5cf5;--sfx:#f0a441;--fa:#2fc1a8;--ok:#3ecf8e;--bad:#ff5f6d;--cue:#5b4fd6;--gloss:none;font-family:"Inter","Helvetica Neue",system-ui,sans-serif;font-size:12.5px}
html body #app.scorepage.sc4,html body #app.scorepage.sc4 .scbody.s5{background:var(--bg0)!important;color:var(--txt)}
html body #app.scorepage.sc4 .scbody.s5 .crumb{color:var(--mut)}
/* ---------- panels ---------- */
html body #app.scorepage.sc4 .scbody.s5 > #s5mid,html body #app.scorepage.sc4 .scbody.s5 > #s5main > .scright,html body #app.scorepage.sc4 .scbody.s5 .scfoot,html body #app.scorepage.sc4 .scbody.s5 .scleft,#s5left > #s5lib{background:var(--pnl)!important;border:1px solid var(--line)!important;border-radius:12px!important;box-shadow:none!important}
html body #app.scorepage.sc4 .scbody.s5 > #s5left{background:transparent!important;border:0!important;box-shadow:none!important}
html body #app.scorepage.sc4 .scbody.s5 .scfoot,html body #app.scorepage.sc4 .scbody.s5 .scleft{padding:4px 8px 8px!important;gap:0!important;justify-content:flex-start!important}
html body #app.scorepage.sc4 .scbody.s5 .scfoot > *{margin-top:0!important}
/* ---------- wells ---------- */
html body #app.scorepage.sc4 .scbody.s5 textarea,html body #app.scorepage.sc4 .scbody.s5 input:not([type=range]):not([type=checkbox]),html body #app.scorepage.sc4 .scbody.s5 select,html body #app.scorepage.sc4 .scbody.s5 .stpv pre{background:var(--well)!important;border:1px solid var(--line)!important;border-radius:8px!important;box-shadow:none!important;color:var(--txt)!important;font-family:inherit;font-size:12.5px}
html body #app.scorepage.sc4 .scbody.s5 textarea{padding:9px 11px!important;line-height:1.45;border-radius:10px!important}
html body #app.scorepage.sc4 .scbody.s5 input:not([type=range]):not([type=checkbox]){height:30px;padding:0 10px!important}
html body #app.scorepage.sc4 .scbody.s5 select{height:30px;padding:0 28px 0 10px!important;-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%)!important;background-position:calc(100% - 15px) 12px,calc(100% - 10px) 12px!important;background-size:5px 5px,5px 5px!important;background-repeat:no-repeat!important}
html body #app.scorepage.sc4 .scbody.s5 textarea:focus,html body #app.scorepage.sc4 .scbody.s5 input:focus,html body #app.scorepage.sc4 .scbody.s5 select:focus{outline:none;border-color:var(--acc)!important;box-shadow:0 0 0 3px var(--accd)!important}
html body #app.scorepage.sc4 .scbody.s5 ::placeholder{color:var(--dim)!important;opacity:1}
/* ---------- labels ---------- */
html body #app.scorepage.sc4 .scbody.s5 label.stf > small,html body #app.scorepage.sc4 .scbody.s5 .s5fh span,html body #app.scorepage.sc4 .scbody.s5 .sc4fh span,#s5lib .s5libh b,.s5pal > small,#s5quick .stpv > small,html body #app.scorepage.sc4 .scbody.s5 .strow small,html body #app.scorepage.sc4 .scbody.s5 .moodlanewrap small.lab,html body #app.scorepage.sc4 .scbody.s5 .sc4stem > small,html body #app.scorepage.sc4 .scbody.s5 .mrow > .crumb,html body #app.scorepage.sc4 .scbody.s5 .fxr > small,html body #app.scorepage.sc4 .scbody.s5 .sclh > .crumb{font-family:inherit!important;font-size:10.5px!important;font-weight:600!important;letter-spacing:.08em!important;text-transform:uppercase;color:var(--mut)!important;font-style:normal}
html body #app.scorepage.sc4 .scbody.s5 .moodlanewrap small.lab{margin-bottom:6px}
/* ---------- fold headers: quiet rows, chevron on the right, hairline between ---------- */
html body #app.scorepage.sc4 .scleft .sc4fh,html body #app.scorepage.sc4 .s5foot .sc4fh,.s5fold > .s5fh,#s5ups > .s5fh,html body #app.scorepage.sc4 .s5foot .stpv.s5closed > small,#s5quick .stpv > small,#s5lib .s5libh{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0 4px!important;min-height:34px;display:flex;align-items:center;gap:8px;color:var(--mut)!important;margin:0!important}
html body #app.scorepage.sc4 .scleft .sc4fh:hover,.s5fold > .s5fh:hover,#s5ups > .s5fh:hover{color:var(--txt)!important}
html body #app.scorepage.sc4 .scleft .sc4fh:hover span,.s5fold > .s5fh:hover span{color:var(--txt)!important}
.s5fold > .s5fh i,#s5ups > .s5fh i,html body #app.scorepage.sc4 .scleft .sc4fh i,#s5quick .stpv > small i,#s5lib .s5libtog{order:9;margin-left:auto;color:var(--dim)!important;font-style:normal;font-size:10px;width:auto}
html body #app.scorepage.sc4 .scleft .sc4fh + *{margin-bottom:6px}
html body #app.scorepage.sc4 .scleft .sc4fh:not(:first-child),html body #app.scorepage.sc4 .s5foot > .s5fold:not(:first-child) > .s5fh,html body #app.scorepage.sc4 .s5foot > .studio,#s5ups{border-top:1px solid var(--line)!important}
#s5lib .s5libh{padding:0 6px 0 10px!important;min-height:40px}
#s5lib .s5libtog{background:transparent!important;border:0!important;box-shadow:none!important;width:22px;height:22px;padding:0!important}
#s5lib .s5libn{margin-left:-2px;font-size:10.5px}
#s5lib .s5libq{flex:1 1 auto;min-width:0;height:26px!important;font-size:11.5px}
#s5lib.s5closed .s5libq{display:none}
#s5left > #s5lib{flex:0 0 auto!important;max-height:46%}
#s5lib:not(.s5closed) .s5rows{flex:1 1 auto;min-height:120px;overflow:auto}
#s5ups{flex:0 0 auto;max-height:45%;overflow:auto}
/* ---------- buttons: 30 px, 8 px radius, one primary ---------- */
html body #app.scorepage.sc4 .scbody.s5 .pill,html body #app.scorepage.sc4 .scbody.s5 .ico{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:30px;padding:0 12px;background:var(--pnl2)!important;border:1px solid var(--line2)!important;border-radius:8px!important;color:var(--txt)!important;box-shadow:none!important;text-shadow:none!important;font-weight:600;font-size:12px;line-height:1;white-space:nowrap}
html body #app.scorepage.sc4 .scbody.s5 .pill.sm{height:26px;padding:0 10px;font-size:11.5px}
html body #app.scorepage.sc4 .scbody.s5 .ico{width:26px;height:26px;padding:0;border-radius:7px!important;font-size:11px}
html body #app.scorepage.sc4 .scbody.s5 .pill:hover,html body #app.scorepage.sc4 .scbody.s5 .ico:hover{background:#232733!important;border-color:rgba(255,255,255,.2)!important}
html body #app.scorepage.sc4 .scbody.s5 .pill:active,html body #app.scorepage.sc4 .scbody.s5 .ico:active{transform:translateY(1px);box-shadow:none!important}
html body #app.scorepage.sc4 .scbody.s5 .pill.ghost,html body #app.scorepage.sc4 .scbody.s5 .ico{background:transparent!important;border-color:transparent!important;color:var(--mut)!important}
html body #app.scorepage.sc4 .scbody.s5 .pill.ghost:hover,html body #app.scorepage.sc4 .scbody.s5 .ico:hover{background:rgba(255,255,255,.06)!important;color:var(--txt)!important}
html body #app.scorepage.sc4 .scbody.s5 .pill.go,html body #app.scorepage.sc4 .scbody.s5 .s5qcreate,html body #app.scorepage.sc4 .scbody.s5 .s5mini{background:var(--acc)!important;color:#fff!important;border:1px solid transparent!important;box-shadow:none!important}
html body #app.scorepage.sc4 .scbody.s5 .pill.go:hover,html body #app.scorepage.sc4 .scbody.s5 .s5qcreate:hover,html body #app.scorepage.sc4 .scbody.s5 .s5mini:hover{background:#5f9aff!important}
html body #app.scorepage.sc4 .scbody.s5 .pill.ac{border-color:rgba(77,141,255,.5)!important;color:var(--acc2)!important}
/* the segmented control (Instrumental · Female · Male) */
html body #app.scorepage.sc4 .scbody.s5 .stvoxrow{display:flex;gap:2px;padding:3px;background:var(--well);border:1px solid var(--line);border-radius:9px}
html body #app.scorepage.sc4 .scbody.s5 .voxb{flex:1 1 0;height:26px;background:transparent!important;border:0!important;border-radius:6px!important;color:var(--mut)!important;box-shadow:none!important;font-weight:600;font-size:12px}
html body #app.scorepage.sc4 .scbody.s5 .voxb.on{background:#2a3040!important;color:#fff!important;box-shadow:none!important}
/* ---------- sliders: 4 px track with a blue fill (--p is painted by the v44 block), 14 px white thumb ---------- */
html body #app.scorepage.sc4 .scbody.s5 input[type=range]{-webkit-appearance:none;appearance:none;height:20px;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important;margin:0}
html body #app.scorepage.sc4 .scbody.s5 input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--acc) var(--p,0%),rgba(255,255,255,.14) 0);box-shadow:none}
html body #app.scorepage.sc4 .scbody.s5 input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:#fff;border:2px solid var(--pnl);box-shadow:0 1px 3px rgba(0,0,0,.6)}
html body #app.scorepage.sc4 .scbody.s5 input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:rgba(255,255,255,.14)}
html body #app.scorepage.sc4 .scbody.s5 input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--acc)}
html body #app.scorepage.sc4 .scbody.s5 input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--pnl)}
html body #app.scorepage.sc4 .scleft .sc4fx .fxr input[type=range],html body #app.scorepage.sc4 .scleft .sc4master input[type=range]{height:18px}
html body #app.scorepage.sc4 .scleft .sc4fx .fxr input[type=range]::-webkit-slider-runnable-track,html body #app.scorepage.sc4 .scleft .sc4master input[type=range]::-webkit-slider-runnable-track{height:3px}
html body #app.scorepage.sc4 .scleft .sc4fx .fxr input[type=range]::-webkit-slider-thumb,html body #app.scorepage.sc4 .scleft .sc4master input[type=range]::-webkit-slider-thumb{width:12px;height:12px;margin-top:-4.5px}
html body #app.scorepage.sc4 .scleft .sc4fx .fxr .knob,html body #app.scorepage.sc4 .scleft .sc4fx .fxr i.kn,html body #app.scorepage.sc4 .scleft .sc4fx .fxr .fxk{background:var(--pnl2)!important;box-shadow:none!important;border:1px solid var(--line2)!important}
/* ---------- the left column ---------- */
#s5left{gap:8px}
#s5ups > .s5fh{padding:0 10px!important}
.sc4up .sc4ph{display:flex;align-items:center;justify-content:flex-end;padding:0 8px 6px}
.sc4up .sc4ph small.lab{display:none!important}
.sc4up .urow{display:flex!important;align-items:center;gap:2px;padding:4px 6px;border-top:1px solid var(--line)}
.sc4up .urow .umeta{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:6px;width:auto!important}
.sc4up .urow .umeta b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600}
.sc4up .urow .umeta span{font-size:10.5px;color:var(--dim);white-space:nowrap}
#s5lib .s5row{margin:0;border-radius:0;border:0;border-top:1px solid var(--line);background:transparent;box-shadow:none;padding:8px 8px 8px 10px}
#s5lib .s5row:hover{background:rgba(255,255,255,.03)}
#s5lib .s5row.on{background:var(--accd);box-shadow:inset 2px 0 0 var(--acc)}
#s5lib .s5tile{border-radius:8px;box-shadow:none;background:linear-gradient(160deg,#7c6cff,#4f46c2);color:#fff;font-weight:700;font-size:11px}
#s5lib .s5meta b{font-size:12.5px;font-weight:600}
#s5lib .s5tags{color:var(--mut);font-size:11px}
#s5lib .s5badges i{background:rgba(255,255,255,.07);border-radius:4px;padding:1px 5px;font-size:10px;color:var(--mut);font-style:normal}
#s5lib .s5empty{padding:14px 12px;font-size:12px;line-height:1.5}
/* VOICE & KEY: a tidy 3-column row under the segmented control */
#s5top .s5r1{padding:2px 4px 8px}
#s5top .s5r2{display:grid;grid-template-columns:1fr 64px 1fr;gap:8px;padding:0 4px 8px;align-items:end}
#s5top .s5r2 label.stf,#s5top .s5r2 label.sc4stem{display:flex!important;flex-direction:column;align-items:stretch;gap:4px;width:auto!important;min-width:0;margin:0!important}
#s5top .s5r2 label.sc4stem > small{width:auto;margin:0!important}
#s5top .s5r2 select,#s5top .s5r2 input{width:100%!important;max-width:none!important;font-size:12px!important}
#s5top .s5r2 label.sc4stem select{width:100%;min-width:0}
/* ADVANCED loses its header: Import reference becomes one row of the VOICE & KEY block */
#s5adv .s5advh{display:none!important}
#s5adv .s5advin{display:block!important;padding:0 4px 8px}
html body #app.scorepage.sc4 .scfoot > #s5top.s5closed ~ .studio{display:none!important}
html body #app.scorepage.sc4 .scfoot .studio,html body #app.scorepage.sc4 .scfoot .stgrid.v28{flex:0 0 auto!important;border:0!important;padding:0!important;margin:0!important;overflow:visible!important;background:transparent!important}
.s5foot .stgrid.v28,.s5foot .stgrid.v28 .stcol.left{height:auto!important;gap:0}
.s5foot #s5adv{background:transparent!important;border:0!important;padding:0!important;margin:0!important}
.strefrow{display:flex;align-items:center;gap:8px}
.strefrow .crumb{display:none!important}
/* CUE ACTIONS: a uniform 2-column grid; the header's mini Create only while folded */
#s5top.s5fold{width:100%!important}
.stacts.s5fold{display:flex;flex-wrap:wrap;gap:6px;padding:0 0 8px!important;margin:0!important;width:100%!important;max-width:none!important;box-sizing:border-box}
.scbody.s5 .stacts.s5fold > .pill.gen{display:none!important}
.stacts.s5fold > .pill.rerun{flex-basis:calc(100% - 8px)!important;border-color:rgba(77,141,255,.5)!important}
html body #app.scorepage.sc4 .scbody.s5 .stacts.s5fold > .s5fh{flex:0 0 100%;padding:0 4px!important;margin:0!important}
.stacts.s5fold > .s5fh .s5mini{margin-left:auto;order:8;height:24px;padding:0 10px;font-size:11px}
.stacts.s5fold > .s5fh i{margin-left:10px}
.stacts.s5fold:not(.s5closed) > .s5fh .s5mini{display:none!important}
.stacts.s5fold > .pill,.stacts.s5fold > select.pill{flex:1 1 calc(50% - 14px);min-width:0;height:30px!important;padding:0 10px!important;font-size:12px!important;margin:0 4px!important}
.stacts.s5fold > .pill.gen{flex-basis:100%}
/* the footer row: credits · Export · Start over */
.s5foot .sc4acts{display:flex!important;align-items:center;gap:6px;width:100%!important;max-width:none!important;box-sizing:border-box;padding:8px 4px 0;margin-top:4px;border-top:1px solid var(--line)}
.s5foot .sc4acts .sc4x summary{display:inline-flex;align-items:center;height:30px;padding:0 12px;white-space:nowrap;background:var(--pnl2);border:1px solid var(--line2);border-radius:8px;font-weight:600;font-size:12px;cursor:pointer;color:var(--txt)}
.s5foot .sc4acts .sc4x summary:hover{background:#232733}
.s5foot .sc4acts .screset{height:30px}
.s5foot .sc4acts > #s5cred{order:0!important;margin-right:auto!important;font-size:11px;color:var(--dim)}
.s5foot .sc4acts > .screset{order:1!important}
.s5foot .sc4acts > .sc4x{order:2!important}
.s5foot .sc4acts > .scgen{display:none!important}
.s5foot .sc4acts .sc4x summary{list-style:none}
.s5foot .sc4acts .sc4x summary::-webkit-details-marker{display:none}
.s5foot .sc4acts .sc4x{position:relative}
.s5foot .sc4acts .sc4xin{position:absolute;right:0;bottom:36px;z-index:20;display:flex;flex-direction:column;gap:4px;padding:6px;background:var(--pnl2);border:1px solid var(--line2);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.6);width:auto!important}
.s5foot .sc4acts .sc4xin .pill{justify-content:flex-start;background:transparent!important;border-color:transparent!important}
/* MODEL · WHEELS · MASTER · EFFECTS · REFERENCE */
.scleft .sc4model{display:flex;align-items:center;gap:8px;padding:0 4px}
.scleft .sc4model > small{display:none!important}
.scleft .sc4model select{flex:1 1 auto}
.scleft .stwchip{display:none!important}
.scleft .sc4master{padding:0 4px}
.scleft .mrow{display:flex;align-items:center;gap:10px}
.scleft .mrow > .crumb{display:none!important}
.scleft .mrow input[type=range]{flex:1}
.scleft .mrow em.mono{font-size:11px;color:var(--mut);min-width:34px;text-align:right}
.scleft .sc4fx{padding:0 4px}
.scleft .sc4fx .fxwho{font-size:11.5px;padding:0 0 6px}
.scleft .sc4fx .fxr > small{font-size:9.5px!important;letter-spacing:.06em!important}
.scleft .sc4fx .fxr em.mono{font-size:10.5px;color:var(--mut)}
.scleft .sc4fx .fxseg button{height:20px;padding:0 8px;border-radius:5px;background:var(--pnl2);border:1px solid var(--line2);color:var(--mut);font-size:10.5px}
.scleft .sc4fx .fxseg button.on{background:#2a3040;color:#fff}
.scleft .sc4fx .fxacts{gap:6px;padding-top:6px}
.scleft .sc4fx .fxauto{background:transparent;border:0;color:var(--dim)}
.scleft .sc4fx .fxauto.on{color:var(--acc)}
.scleft .sc4ref{padding:0 4px}
.scleft .sc4ref small.lab{display:none!important}
.scleft .sc4ref .refhint{font-size:11.5px;line-height:1.5}
/* the collapse tab: a proper key on the seam */
html body #app.scorepage.sc4 .scbody.s5{position:relative}
#s5ltog{position:absolute;left:calc(var(--lw,420px) - 6px);top:10px;z-index:12;display:flex;align-items:center;justify-content:center;width:20px;height:40px;padding:0;margin:0;border-radius:6px;background:var(--pnl2);border:1px solid var(--line2)!important;color:var(--acc);box-shadow:0 4px 12px rgba(0,0,0,.5);font-size:11px;cursor:pointer;opacity:1}
#s5ltog span{display:none}
#s5ltog:hover{background:#232733;border-color:rgba(255,255,255,.2)!important}
#s5ltog span{writing-mode:vertical-rl;font:600 8.5px/1 inherit;letter-spacing:.18em;color:var(--mut)}
.scbody.s5.s5lcol > #s5left > #s5ltog{left:2px}
.scbody.s5.s5lcol > #s5left{overflow:visible!important}
/* ---------- the middle column ---------- */
#s5mid{gap:0}
#s5mid > #s5libdock{background:transparent;border-bottom:1px solid var(--line)!important;padding:10px 10px 8px}
html body #app.scorepage.sc4 .scbody.s5 #s5libdock .scmon{border-radius:10px;overflow:hidden}
html body #app.scorepage.sc4 .scbody.s5 #s5libdock video{border-radius:10px;box-shadow:none;background:#000}
html body #app.scorepage.sc4 .scbody.s5 .scmonbar{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;background:transparent;border-radius:0;padding:8px 0 0;box-shadow:none}
html body #app.scorepage.sc4 .scbody.s5 .scmonbar #scplaybtn{width:30px;height:30px;border-radius:50%!important;background:var(--acc)!important;color:#fff!important;border:0!important;font-size:11px;flex:0 0 auto}
html body #app.scorepage.sc4 .scbody.s5 .scmonbar #scplaybtn:hover{background:#5f9aff!important}
html body #app.scorepage.sc4 .scbody.s5 #sctc{background:var(--well)!important;border:1px solid var(--line);border-radius:7px!important;box-shadow:none!important;padding:0 10px!important;height:30px;display:inline-flex;align-items:center;letter-spacing:.06em;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--txt)}
html body #app.scorepage.sc4 .scbody.s5 .scmonbar label.crumb{display:inline-flex;align-items:center;gap:5px;font-size:11px;white-space:nowrap;margin-left:auto}
html body #app.scorepage.sc4 .scbody.s5 input[type=checkbox]{accent-color:var(--acc);width:14px;height:14px;margin:0}
html body #app.scorepage.sc4 .scbody.s5 .scmonbar .s5plsw{height:26px;padding:0 24px 0 8px!important;font-size:11px;max-width:132px;border-radius:7px!important}
html body #app.scorepage.sc4 .scbody.s5 .scmonbar .s5pop{height:26px;padding:0 8px;font-size:11px}
html body #app.scorepage.sc4 .scbody.s5 .scmonbar .sp{display:none}
/* THE CUE bar */
html body #app.scorepage.sc4 .scbody.s5 .moodlanewrap{padding:8px 0 0}
html body #app.scorepage.sc4 .scbody.s5 .moodlane{height:16px!important;border-radius:8px!important;box-shadow:none!important;border:1px solid rgba(255,255,255,.08)}
html body #app.scorepage.sc4 .scbody.s5 .moodlane .mlend{font-size:10px;line-height:14px;height:14px;top:0!important;bottom:auto!important;right:6px;transform:none!important;color:rgba(255,255,255,.85)}
html body #app.scorepage.sc4 .scbody.s5 .sflane{height:8px!important;margin-top:4px!important;border-radius:4px;background:rgba(255,255,255,.06)}
/* the quick panel */
#s5quick{gap:12px;padding:12px 10px 0}
#s5quick label.stf > small.s5sub{min-height:20px;margin-bottom:2px}
#s5quick label.stf > small.s5sub em.crumb{margin-left:6px;font-style:normal;text-transform:none;letter-spacing:0;font-weight:500;color:var(--dim);background:rgba(255,255,255,.06);padding:1px 6px;border-radius:4px}
#s5quick label.stf > small.s5sub .s5boost{margin-left:auto;height:22px;padding:0 8px;font-size:11px}
#s5quick #ststyle{min-height:74px}
#s5quick .s5pal{margin-top:8px;display:flex;flex-direction:column;gap:6px}
#s5quick .s5pal > small{min-height:0;padding:0!important}
#s5quick .s5palrow{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
#s5quick .s5palrow::-webkit-scrollbar{display:none}
#s5quick .s5pal .pill.sm{flex:0 0 auto;background:var(--pnl2)!important;border-color:var(--line2)!important;color:var(--mut)!important;font-weight:500}
#s5quick .s5pal .pill.sm:hover{color:var(--txt)!important}
#s5quick .strow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#s5quick .strow label.stf{display:flex;flex-direction:column;gap:2px}
#s5quick .stpv{border-top:1px solid var(--line);padding-top:4px}
#s5quick .stpv > small{display:flex!important;align-items:center;gap:8px;cursor:pointer;margin:0 0 4px;min-height:30px;padding:0!important}
#s5quick .stpv > small em.crumb{font-style:normal;text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-size:10.5px;color:var(--mut)}
html body #app.scorepage.sc4 .scbody.s5 #s5quick .stpv > small .s5watch{display:none!important}
#s5quick .stpv > small em.crumb{display:none!important}
#s5quick .stpv:not(.s5closed) pre{max-height:140px!important;min-height:50px;padding:8px 10px;font-size:11.5px;line-height:1.45;margin:0 0 6px}
/* Watch · Create stay in view: sticky at the bottom of the scrolling column */
#s5quick .s5qacts{position:sticky;bottom:0;z-index:5;margin:auto -10px 0;padding:10px 10px 10px;background:var(--pnl);border-top:1px solid var(--line);gap:8px}
#s5quick .s5qacts .s5qwatch{flex:1 1 40%;background:var(--pnl2)!important;border:1px solid var(--line2)!important;color:var(--txt)!important;height:36px}
#s5quick .s5qacts .s5qcreate{flex:1 1 60%;height:36px;font-size:13px;font-weight:700}
/* ---------- the timeline ---------- */
html body #app.scorepage.sc4 .scbody.s5 > #s5main > .scright{padding:6px 6px 4px}
html body #app.scorepage.sc4 .scbody.s5 #sctl{background:var(--well)!important;border:1px solid var(--line)!important;border-radius:10px!important;padding:0;box-shadow:none!important}
html body #app.scorepage.sc4 .scbody.s5 .scruler span{opacity:1;color:var(--dim);font-size:10px}
html body #app.scorepage.sc4 .scbody.s5 .sclane{border-bottom:1px solid var(--line)!important}
html body #app.scorepage.sc4 .scbody.s5 .sclane.m{background:transparent!important}
html body #app.scorepage.sc4 .scbody.s5 .sclane.sfx{background:rgba(240,164,65,.035)!important}
html body #app.scorepage.sc4 .scbody.s5 .sclane.va{background:rgba(47,193,168,.05)!important}
html body #app.scorepage.sc4 .scbody.s5 .sclane.v{background:rgba(255,255,255,.02)!important}
html body #app.scorepage.sc4 .scbody.s5 .scname{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--dim);opacity:1;background:linear-gradient(90deg,var(--well) 70%,transparent)}
html body #app.scorepage.sc4 .scbody.s5 .sclane.va .scname{color:var(--fa)}
html body #app.scorepage.sc4 .scbody.s5 .sclane.sfx .scname,html body #app.scorepage.sc4 .scbody.s5 .sclane.sfx .lnlab{color:var(--sfx)}
html body #app.scorepage.sc4 .scbody.s5 .sctog i{width:16px;height:16px;border-radius:4px;background:rgba(255,255,255,.08);color:var(--mut);opacity:1;font-size:9px}
html body #app.scorepage.sc4 .scbody.s5 .sctog i.on{background:var(--acc)!important;color:#fff!important;box-shadow:none!important}
html body #app.scorepage.sc4 .scbody.s5 .scph{background:#fff;box-shadow:0 0 6px rgba(255,255,255,.7)}
html body #app.scorepage.sc4 .scbody.s5 .scaddm{color:var(--dim);font-size:11.5px;border:1px dashed var(--line2);border-radius:8px;margin:6px}
/* cue blocks: music = indigo, SFX = amber; selected = white ring */
html body #app.scorepage.sc4 .sccue{background:linear-gradient(180deg,#6a5df0,#4f45c9)!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:8px!important;box-shadow:none!important;color:#fff}
html body #app.scorepage.sc4 .sccue.sfxcue{background:linear-gradient(180deg,#c98a34,#a56d22)!important}
html body #app.scorepage.sc4 .sccue.submitted{background:repeating-linear-gradient(45deg,#2e2b52,#2e2b52 6px,#37336a 6px,#37336a 12px)!important;border-style:dashed!important;opacity:.9}
html body #app.scorepage.sc4 .sccue.fail{background:rgba(255,95,109,.18)!important;border-color:rgba(255,95,109,.7)!important}
html body #app.scorepage.sc4 .sccue.on,html body #app.scorepage.sc4 .sccue.sel{outline:2px solid #fff!important;outline-offset:-2px;box-shadow:0 0 0 3px rgba(255,255,255,.18)!important}
html body #app.scorepage.sc4 .sccue > b{font-size:11px;font-weight:600;opacity:1;color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.7)}
html body #app.scorepage.sc4 .sccue > .wav{opacity:.35}
html body #app.scorepage.sc4 .sccue .sckb{background:rgba(0,0,0,.35);font-size:9.5px;border-radius:5px}
html body #app.scorepage.sc4 .sccue .scbuf{background:rgba(255,255,255,.12)}
html body #app.scorepage.sc4 .sccue .csolo,html body #app.scorepage.sc4 .sccue .cmute{width:16px;height:16px;border-radius:4px;background:rgba(0,0,0,.35);font-size:9px}
/* the footer strip */
html body #app.scorepage.sc4 .scbody.s5 .sczoom{display:flex;align-items:center;gap:10px;height:40px;padding:4px 6px 0;flex-wrap:nowrap}
html body #app.scorepage.sc4 .scbody.s5 .sczoom > span.crumb{display:none!important}
html body #app.scorepage.sc4 .scbody.s5 .sczoom > input[type=range]{flex:1 1 auto;max-width:none}
html body #app.scorepage.sc4 .scbody.s5 .sczoom .sclh{display:flex;align-items:center;gap:6px;flex:0 0 150px}
html body #app.scorepage.sc4 .scbody.s5 .sczoom .sclh > .crumb{white-space:nowrap;flex:0 0 auto}
html body #app.scorepage.sc4 .scbody.s5 .sczoom .sclh input[type=range]{flex:1}
html body #app.scorepage.sc4 .scbody.s5 .sczoom .pill.sm{flex:0 0 auto}
/* ===== v44.1 — waveforms you can see · the generating sheen · style + Watch + Create on the region (2026-09-14) ===== */
html body #app.scorepage.sc4 .sccue > .wav{opacity:.9;mix-blend-mode:screen}
/* generating: a soft light sweeps across the block */
@keyframes scgen{0%{background-position:120% 0}100%{background-position:-120% 0}}
html body #app.scorepage.sc4 .sccue.submitted,html body #app.scorepage.sc4 .sccue.autoing{background:linear-gradient(105deg,#3a3480 0%,#3a3480 35%,#6f63e6 50%,#3a3480 65%,#3a3480 100%)!important;background-size:240% 100%!important;animation:scgen 2.2s ease-in-out infinite;border:1px dashed rgba(255,255,255,.35)!important;opacity:1!important}
html body #app.scorepage.sc4 .sccue.sfxcue.submitted{background:linear-gradient(105deg,#7a5420 0%,#7a5420 35%,#d9993c 50%,#7a5420 65%,#7a5420 100%)!important;background-size:240% 100%!important}
/* the drawn region: an indigo outline with the cue's own controls inside */
html body #app.scorepage.sc4 .scdraw.pinned{background:rgba(111,92,245,.14)!important;border:1px solid rgba(141,180,255,.55)!important;border-radius:8px;overflow:hidden}
.scdraw.pinned > i{z-index:3}
.rgov{position:absolute;left:6px;right:6px;bottom:5px;top:22px;display:flex;flex-direction:column;gap:4px;z-index:2}
.sccue .rgov{top:auto;height:28px;bottom:6px;left:26px;right:6px;flex-direction:row;align-items:center}
.rgov .rgrow{display:flex;gap:4px;align-items:center;margin-top:auto}
.sccue .rgov .rgrow{margin:0;flex:1 1 auto;min-width:0}
.rgov .rgsty{flex:1 1 auto;min-width:0;height:24px!important;min-height:24px;max-height:100%;resize:none;padding:4px 8px!important;border-radius:6px!important;font-size:11px!important;line-height:16px;background:rgba(0,0,0,.45)!important;border:1px solid rgba(255,255,255,.14)!important;color:#fff!important}
.rgov .rgsty.tall{flex:1 1 auto;height:auto!important;max-height:none}
.rgov .rgsty::placeholder{color:rgba(255,255,255,.45)!important}
.rgov .rgsty:focus{border-color:var(--acc2)!important;box-shadow:0 0 0 2px rgba(77,141,255,.25)!important}
html body #app.scorepage.sc4 .rgov .pill{height:24px;padding:0 9px;font-size:11px;border-radius:6px!important;flex:0 0 auto}
html body #app.scorepage.sc4 .rgov .pill.rgwatch{background:rgba(0,0,0,.45)!important;border:1px solid rgba(255,255,255,.18)!important;color:#fff!important}
html body #app.scorepage.sc4 .rgov .pill.rgwatch:hover{background:rgba(0,0,0,.65)!important}
html body #app.scorepage.sc4 .rgov .pill.rggo{background:var(--acc)!important;color:#fff!important;border:0!important}
html body #app.scorepage.sc4 .sccue.on .rgov ~ b,html body #app.scorepage.sc4 .sccue.on.hasrg > b{right:92px}
html body #app.scorepage.sc4 .sccue.hasrg .cmute{display:none!important}
/* ===== v44.2 — the region's own cue bar + weight / weirdness · a generating cue that visibly moves (2026-09-15) ===== */
/* generating: the sweep is a pseudo-element now (independent of whatever paints the background), plus a breathing border */
@keyframes scgen2{0%{transform:translateX(-120%)}100%{transform:translateX(220%)}}
@keyframes scgenb{0%,100%{border-color:rgba(255,255,255,.25)}50%{border-color:rgba(141,180,255,.9)}}
html body #app.scorepage.sc4 .sccue.submitted,html body #app.scorepage.sc4 .sccue.running{overflow:hidden;animation:scgen 2.2s ease-in-out infinite,scgenb 1.6s ease-in-out infinite!important}
html body #app.scorepage.sc4 .sccue.submitted::after,html body #app.scorepage.sc4 .sccue.running::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);animation:scgen2 1.6s linear infinite;pointer-events:none;z-index:1}
html body #app.scorepage.sc4 .sccue.submitted > span,html body #app.scorepage.sc4 .sccue.running > span{display:block!important;position:absolute;left:48px;bottom:6px;font-size:10px;color:rgba(255,255,255,.85);letter-spacing:.06em;z-index:2}
/* the overlay grows: cue bar on top, style, then weight · weirdness · watch · create */
.scdraw .rgov{top:6px;bottom:5px;gap:3px}
.rgov .rgrow .rgsty{flex:1 1 auto;min-width:120px}
.rgov .rgcue{position:relative;flex:0 0 auto;height:10px!important;margin:0 18px 2px 0;border-radius:6px!important;border:1px solid rgba(255,255,255,.18)!important;cursor:crosshair;box-shadow:none!important;background:linear-gradient(90deg,#3a3480,#6f63e6)}
.rgov .rgcue .mlph{position:absolute;top:0;bottom:0;left:0;width:2px;background:#fff;box-shadow:0 0 4px #fff;z-index:4;pointer-events:none}
.rgov .rgcue .mlkf{position:absolute;top:0;bottom:0;width:2px;background:#fff;opacity:.9;transform:translateX(-1px);cursor:pointer;z-index:3}
.rgov .rgcue .mlkf::after{content:"";position:absolute;top:-2px;left:-3px;width:8px;height:8px;border-radius:50%;background:#fff}
.rgov .rgcue .mlkf:hover{box-shadow:0 0 8px #fff}
.rgov .rgsl{display:flex;align-items:center;gap:4px;flex:0 0 auto;min-width:0}
.rgov .rgsl small{font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.7);font-weight:600;white-space:nowrap}
html body #app.scorepage.sc4 .rgov .rgsl input[type=range]{width:52px;height:14px;flex:0 0 auto}
html body #app.scorepage.sc4 .rgov .rgsl input[type=range]::-webkit-slider-runnable-track{height:3px;background:linear-gradient(90deg,#fff var(--p,0%),rgba(255,255,255,.25) 0)}
html body #app.scorepage.sc4 .rgov .rgsl input[type=range]::-webkit-slider-thumb{width:10px;height:10px;margin-top:-3.5px;border:0}
.rgov .rgrow{flex-wrap:nowrap}
.rgov .rgrow .rgsl{margin-right:auto}
.rgov.narrow .rgsl{display:none}
.sccue .rgov .rgcue{display:none}
/* ===== v44.3 — timestamps on every pin · every wait moves · the Watch button says Watch (2026-09-15) ===== */
/* pin timestamps, in the panel bar and on the region bar */
.moodlane .mlkf,.rgcue .mlkf{overflow:visible}
.moodlane .mlkf .mlt,.rgcue .mlkf .mlt{position:absolute;left:5px;top:0;height:100%;display:flex;align-items:center;font:600 8.5px/1 "Inter",system-ui,sans-serif;font-style:normal;letter-spacing:.02em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.8);white-space:nowrap;pointer-events:none}
.rgcue .mlkf .mlt{font-size:8px}
/* the waits: a sweep + breathing border, in the colour of the job — indigo = writing, teal = watching, amber = boosting */
@keyframes scwait{0%{transform:translateX(-120%)}100%{transform:translateX(220%)}}
@keyframes scwaitb{0%,100%{border-color:var(--wb1,rgba(255,255,255,.25))}50%{border-color:var(--wb2,rgba(141,180,255,.9))}}
.scwait{overflow:hidden;animation:scwaitb 1.6s ease-in-out infinite!important}
.pill.scwait{position:relative}
.scwait::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(90deg,transparent,var(--wsw,rgba(255,255,255,.3)),transparent);animation:scwait 1.5s linear infinite;pointer-events:none;z-index:1}
html body #app.scorepage.sc4 .scdraw.pinned.scwait.w-gen{background:linear-gradient(105deg,rgba(111,92,245,.22),rgba(111,92,245,.42),rgba(111,92,245,.22))!important;--wb2:#8db4ff}
html body #app.scorepage.sc4 .scdraw.pinned.scwait.w-watch,html body #app.scorepage.sc4 .sccue.scwait.w-watch{background:linear-gradient(105deg,rgba(47,193,168,.22),rgba(47,193,168,.5),rgba(47,193,168,.22))!important;--wb2:#5ff0d4;--wsw:rgba(150,255,235,.45)}
html body #app.scorepage.sc4 .scdraw.pinned.scwait.w-boost,html body #app.scorepage.sc4 .sccue.scwait.w-boost{--wb2:#f0a441;--wsw:rgba(255,220,150,.45)}
html body #app.scorepage.sc4 .pill.scwait{--wb2:rgba(255,255,255,.9);--wsw:rgba(255,255,255,.35);cursor:progress}
html body #app.scorepage.sc4 .pill.scwait.w-watch{--wb2:#5ff0d4;--wsw:rgba(120,255,230,.5)}
/* the Watch button reads Watch */
html body #app.scorepage.sc4 .rgov .pill.rgwatch{padding:0 9px}
/* ===== v44.6 — the region bar spans the whole region (playhead and pins line up with the timeline) ===== */
.scdraw .rgov{left:0;right:0}
.rgov .rgcue{margin:0 0 2px 0!important}
.rgov > .rgsty,.rgov > .rgrow{margin-left:6px;margin-right:6px}
.scdraw.pinned > i{z-index:6}
/* ===== v44.7 — the pins stay on the written cue ===== */
html body #app.scorepage.sc4 .sccue .ckf{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.55);pointer-events:none;z-index:2}
html body #app.scorepage.sc4 .sccue .ckf::before{content:"";position:absolute;top:-1px;left:-3px;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.6)}
html body #app.scorepage.sc4 .sccue .ckf em{position:absolute;left:5px;top:8px;font:600 8.5px/1 "Inter",system-ui,sans-serif;font-style:normal;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.9);white-space:nowrap}
html body #app.scorepage.sc4 .sccue .ckf.hasnote{background:rgba(255,255,255,.8)}
html body #app.scorepage.sc4 .sccue.hasrg .ckf em{display:none}
/* ===== v44.14 — ◉ Relate on the region ===== */
html body #app.scorepage.sc4 .rgov .pill.rgrel{background:rgba(0,0,0,.45)!important;border:1px solid rgba(255,255,255,.18)!important;color:#fff!important;padding:0 9px;gap:6px}
html body #app.scorepage.sc4 .rgov .pill.rgrel i{width:10px;height:10px;border-radius:50%;border:2px solid rgba(255,255,255,.6);background:transparent;font-style:normal;display:inline-block}
html body #app.scorepage.sc4 .rgov .pill.rgrel.on{background:rgba(47,193,168,.28)!important;border-color:#5ff0d4!important}
html body #app.scorepage.sc4 .rgov .pill.rgrel.on i{background:#5ff0d4;border-color:#5ff0d4}
html body #app.scorepage.sc4 .rgov .pill.rgrel[hidden]{display:none!important}
/* ===== v44.15 — ⇱ Ref on the region ===== */
html body #app.scorepage.sc4 .rgov .pill.rgref{background:rgba(0,0,0,.45)!important;border:1px solid rgba(255,255,255,.18)!important;color:#fff!important;padding:0 9px;gap:6px;max-width:190px}
html body #app.scorepage.sc4 .rgov .pill.rgref span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body #app.scorepage.sc4 .rgov .pill.rgref.on{background:rgba(240,164,65,.28)!important;border-color:#f0a441!important}
html body #app.scorepage.sc4 .rgov .pill.rgref b{font-weight:700;opacity:.8;margin-left:2px;cursor:pointer}
html body #app.scorepage.sc4 .rgov.rgdrop{outline:2px dashed #f0a441;outline-offset:-2px;background:rgba(240,164,65,.08)}
.sc4up .urow{cursor:grab}

/* ===== v44.17 — ⧉ Merge on the region · the quick panel loses its clutter ===== */
html body #app.scorepage.sc4 .rgov .pill.rgmerge{background:rgba(0,0,0,.45)!important;border:1px solid rgba(255,255,255,.18)!important;color:#fff!important;padding:0 9px;gap:6px}
html body #app.scorepage.sc4 .rgov .pill.rgmerge i{font-style:normal;font-size:12px;color:var(--mus,#6f5cf5)}
html body #app.scorepage.sc4 .rgov .pill.rgmerge:hover{border-color:var(--mus,#6f5cf5)!important}
html body #app.scorepage.sc4 .rgov .pill.rgmerge[hidden]{display:none!important}
/* the quick panel */
html body #app.scorepage.sc4 .scbody.s5 #s5quick .s5pal{display:none!important}
html body #app.scorepage.sc4 .scbody.s5 #s5quick #ststyle{min-height:0!important;height:64px!important;max-height:64px;resize:none}
html body #app.scorepage.sc4 .scbody.s5 #s5quick .stpv{flex:1 1 auto!important;display:flex;flex-direction:column;min-height:130px!important}
html body #app.scorepage.sc4 .scbody.s5 #s5quick .stpv pre{flex:1 1 auto!important;max-height:none!important;min-height:96px!important;overflow:auto}
/* WEIGHT / WEIRD in VOICE & KEY */
html body #app.scorepage.sc4 .scbody.s5 #s5top .s5r4{padding:2px 4px 8px}
html body #app.scorepage.sc4 .scbody.s5 #s5top .s5r4 .strow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
html body #app.scorepage.sc4 .scbody.s5 #s5top .s5r4 .strow label.stf{display:flex!important;flex-direction:column;gap:2px;width:auto!important;margin:0!important}
html body #app.scorepage.sc4 .scbody.s5 #s5top .s5r4 .strow input{width:100%!important;max-width:none!important}
html body #app.scorepage.sc4 .scdraw.pinned.scmerging{overflow:hidden;background:linear-gradient(105deg,rgba(111,92,245,.18),rgba(240,164,65,.38),rgba(111,92,245,.18))!important;animation:scwaitb 1.6s ease-in-out infinite!important;--wb2:#f0a441}
html body #app.scorepage.sc4 .scdraw.pinned.scmerging::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(90deg,transparent,rgba(255,220,150,.45),transparent);animation:scwait 1.5s linear infinite;pointer-events:none;z-index:1}
html body #app.scorepage.sc4 .rgov .pill.rgmerge.on{cursor:progress}

/* ===== v44.18 — lane M / S clickable · the cue's M always visible ===== */
html body #app.scorepage.sc4 .sclane .scname .sctog,html body #app.scorepage.sc4 .sclane .scname .sctog i{pointer-events:auto!important}
html body #app.scorepage.sc4 .sclane .scname .sctog i{cursor:pointer;opacity:.85}
html body #app.scorepage.sc4 .sclane .scname .sctog i:hover{opacity:1;color:#fff}
html body #app.scorepage.sc4 .sclane.m.muted .sccue{opacity:.42;filter:saturate(.4)}
html body #app.scorepage.sc4 .sccue .cmute{opacity:.85;z-index:12}
html body #app.scorepage.sc4 .sccue.hasrg .cmute{display:inline-flex!important}

/* ===== v44.20 — the region row folds to icons ===== */
.rgov .rgrow{overflow:hidden}
.rgov .rgrow > *{flex-shrink:0}
.rgov .rgrow > .rgsty{flex-shrink:1}
html body #app.scorepage.sc4 .rgov.rgcompact2 .rgsl{display:none}
html body #app.scorepage.sc4 .rgov.rgcompact .rgsl small{display:none}
html body #app.scorepage.sc4 .rgov.rgcompact .rgsl input[type=range]{width:40px}
html body #app.scorepage.sc4 .rgov.rgcompact .rgrow .pill{padding:0 6px!important;min-width:28px;justify-content:center}
.rgov.rgcompact .rgrow{gap:3px}
.rgov.rgcompact2 .rgrow .rgsty{min-width:80px}
html body #app.scorepage.sc4 .rgov.rgcompact .rgrel span,html body #app.scorepage.sc4 .rgov.rgcompact .rgmerge span,html body #app.scorepage.sc4 .rgov.rgcompact .rgrel i,html body #app.scorepage.sc4 .rgov.rgcompact .rgmerge i{display:none}
html body #app.scorepage.sc4 .rgov.rgcompact .rgrel::before{content:"◉";font-size:13px}
html body #app.scorepage.sc4 .rgov.rgcompact .rgmerge::before{content:"⧉";font-size:13px;color:var(--mus,#6f5cf5)}
html body #app.scorepage.sc4 .rgov.rgcompact .rgref span{font-size:0!important}
html body #app.scorepage.sc4 .rgov.rgcompact .rgref span::before{content:"⇱";font-size:12px}
html body #app.scorepage.sc4 .rgov.rgcompact .rgref b{margin-left:4px}
html body #app.scorepage.sc4 .rgov.rgcompact .rgwatch,html body #app.scorepage.sc4 .rgov.rgcompact .rggo{font-size:0!important}
html body #app.scorepage.sc4 .rgov.rgcompact .rgwatch::before{content:"👁";font-size:13px}
html body #app.scorepage.sc4 .rgov.rgcompact .rggo::before{content:"✦";font-size:13px}
html body #app.scorepage.sc4 .rgov.rgcompact .rggo.rerun::before,html body #app.scorepage.sc4 .rgov.rgcompact .rggo[data-kind="cue"]::before{content:"↻"}

/* ===== v44.21 — the cue's small buttons in one corner ===== */
html body #app.scorepage.sc4 .sccue .ctop{position:absolute;top:4px;right:20px;display:flex;gap:3px;align-items:center;z-index:12;pointer-events:auto}
html body #app.scorepage.sc4 .sccue .ctop > .cmute,html body #app.scorepage.sc4 .sccue .ctop > .csolo,html body #app.scorepage.sc4 .sccue .ctop > .tkpick,html body #app.scorepage.sc4 .sccue .ctop > .sckb{position:static!important;top:auto!important;right:auto!important;left:auto!important;bottom:auto!important;margin:0!important;opacity:1}
html body #app.scorepage.sc4 .sccue .ctop > .cmute,html body #app.scorepage.sc4 .sccue .ctop > .csolo{display:inline-flex!important}
html body #app.scorepage.sc4 .sccue .ctop > .tkpick{display:flex!important;gap:3px}
html body #app.scorepage.sc4 .sccue .ctop > .sckb{margin-left:3px!important;line-height:16px;padding:0 6px}
html body #app.scorepage.sc4 .scbody.s5 .sccue > b{right:var(--ctopw,92px)!important;left:26px!important}
html body #app.scorepage.sc4 .sccue.hasrg .cmute{display:inline-flex!important}

/* ===== v44.22 — ⟷ timewarp ===== */
html body #app.scorepage.sc4 .sccue.twhot,html body #app.scorepage.sc4 .sccue.twhot *,body.twdragging,body.twdragging *{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='20' viewBox='0 0 28 20'><path d='M2 10h24M2 10l5-5M2 10l5 5M26 10l-5-5M26 10l-5 5' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/><path d='M2 10h24M2 10l5-5M2 10l5 5M26 10l-5-5M26 10l-5 5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") 14 10,ew-resize!important}
html body #app.scorepage.sc4 .sccue.twhot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12%;min-height:8px;background:linear-gradient(90deg,rgba(255,255,255,.35),transparent 16px,transparent calc(100% - 16px),rgba(255,255,255,.35));pointer-events:none;border-radius:0 0 8px 8px}
html body #app.scorepage.sc4 .sccue.twhot.twl::after{background:linear-gradient(90deg,rgba(255,255,255,.55),transparent 16px)}
html body #app.scorepage.sc4 .sccue.twhot.twr::after{background:linear-gradient(270deg,rgba(255,255,255,.55),transparent 16px)}
html body #app.scorepage.sc4 .sccue.twdrag{outline:2px dashed rgba(255,255,255,.7);outline-offset:-2px;z-index:20}
html body #app.scorepage.sc4 .sccue .twlab{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.75);color:#fff;font:700 11px/18px "Noto Sans",sans-serif;padding:2px 8px;border-radius:6px;pointer-events:none;z-index:21;white-space:nowrap}

/* ===== v44.23 — the anchor lane ===== */
html body #app.scorepage.sc4 .sccue .twband{position:absolute;left:0;right:0;bottom:0;height:10%;min-height:9px;background:rgba(0,0,0,.42);border-top:1px solid rgba(255,255,255,.14);border-radius:0 0 8px 8px;z-index:11;overflow:visible;pointer-events:auto}
html body #app.scorepage.sc4 .sccue .twband .twfill{display:none}
html body #app.scorepage.sc4 .sccue .twband .twa{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:11px;line-height:1;color:#ffd66a;text-shadow:0 0 3px #000;cursor:ew-resize;pointer-events:auto;font-style:normal;font-weight:400;z-index:12}
html body #app.scorepage.sc4 .sccue .twband .twa:hover{color:#fff;transform:translate(-50%,-50%) scale(1.3)}
html body #app.scorepage.sc4 .sccue.twhot .twband{background:rgba(255,255,255,.16);border-top-color:rgba(255,255,255,.4)}
html body #app.scorepage.sc4 .sccue.twhot:not(.twa1):not(.twl):not(.twr) .twband{cursor:copy}
html body #app.scorepage.sc4 .sccue.twhot.twl .twband,html body #app.scorepage.sc4 .sccue.twhot.twr .twband,html body #app.scorepage.sc4 .sccue.twhot.twa1 .twband,body.twdragging,body.twdragging *{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='20' viewBox='0 0 28 20'><path d='M2 10h24M2 10l5-5M2 10l5 5M26 10l-5-5M26 10l-5 5' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/><path d='M2 10h24M2 10l5-5M2 10l5 5M26 10l-5-5M26 10l-5 5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") 14 10,ew-resize!important}
html body #app.scorepage.sc4 .sccue.twhot::after{display:none}
html body #app.scorepage.sc4 .sccue .rgov{bottom:13px}
html body #app.scorepage.sc4 .scbody.s5 .sccue .cmute{bottom:12px!important}

/* ===== v44.24 — the band is solid; a dragged part keeps everything before it in place ===== */
html body #app.scorepage.sc4 .sccue .twband{background:rgba(0,0,0,.5)}
html body #app.scorepage.sc4 .sccue.twdrag .twband .twa{transition:none}

/* ===== v44.25 — the drag-to-select box ===== */
html body #app.scorepage.sc4 #sctl .edmarq{border:1.5px dashed rgba(255,255,255,.75);background:rgba(77,141,255,.16);z-index:40}
body.scmarq,body.scmarq *{cursor:crosshair!important}

/* ===== v45.6 — FILM AUDIO + SCORE MASTER pinned at the bottom, with gain keyframes ===== */
html body #app.scorepage.sc4 #sctl > #scbot{position:sticky;bottom:0;z-index:20;background:var(--well,#0a0b0e);box-shadow:0 -1px 0 var(--line,rgba(255,255,255,.1)),0 -10px 22px rgba(0,0,0,.5)}
html body #app.scorepage.sc4 #sctl > #scbot .sclane.va,html body #app.scorepage.sc4 #sctl > #scbot .sclane.mst{height:46px!important;position:relative!important;background:transparent!important;overflow:visible}
html body #app.scorepage.sc4 #sctl > #scbot .sclane.mst{border-bottom:0}
html body #app.scorepage.sc4 #sctl .sclane.mst .scname{color:#8db4ff}
html body #app.scorepage.sc4 #sctl .sclane.va .scname,html body #app.scorepage.sc4 #sctl .sclane.mst .scname{display:flex;align-items:center;gap:8px;pointer-events:none;z-index:6;white-space:nowrap}
html body #app.scorepage.sc4 #sctl .sclane .scname em.lnv{font-style:normal;font-size:9px;letter-spacing:.04em;opacity:.75;background:rgba(0,0,0,.45);border-radius:4px;padding:1px 5px}
html body #app.scorepage.sc4 #sctl .sclane.mst .duckb{pointer-events:auto;cursor:pointer;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.45);color:#fff;font:700 9.5px/16px "Noto Sans",sans-serif;letter-spacing:.04em;border-radius:5px;padding:0 7px;height:17px}
html body #app.scorepage.sc4 #sctl .sclane.mst .duckb:hover{border-color:#8db4ff;color:#8db4ff}
html body #app.scorepage.sc4 #sctl .sclane.mst .duckb:disabled{opacity:.6;cursor:progress}
html body #app.scorepage.sc4 #sctl .sclane svg.lnenv{position:absolute;left:0;top:0;z-index:4;pointer-events:none;overflow:visible;fill:none}
html body #app.scorepage.sc4 #sctl .sclane svg.lnenv .ln{stroke:inherit;stroke-width:1.6;pointer-events:auto;cursor:ns-resize}
html body #app.scorepage.sc4 #sctl .sclane svg.lnenv .lnh{stroke:transparent;stroke-width:12;pointer-events:auto;cursor:ns-resize}
html body #app.scorepage.sc4 #sctl .sclane svg.lnenv .vk{stroke:#0a0b0e;stroke-width:1.5;pointer-events:auto;cursor:grab}
html body #app.scorepage.sc4 #sctl .sclane svg.lnenv .vk:hover{r:6}

/* ===== v45.9 — the score waveform, and the ⇄ Balance window ===== */
html body #app.scorepage.sc4 #sctl .sclane.mst canvas.lnwav{position:absolute;top:0;left:0;z-index:2;pointer-events:none}
html body #app.scorepage.sc4 #sctl .sclane.va canvas.vawave{z-index:2}
#scbalance{position:fixed;inset:0;z-index:9000;background:rgba(6,7,10,.92);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;font-family:"Noto Sans",sans-serif}
#scbalance .balw{width:min(1400px,96vw);height:min(860px,94vh);background:var(--pnl,#15171d);border:1px solid var(--line2,rgba(255,255,255,.14));border-radius:16px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6)}
#scbalance .balh{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line,rgba(255,255,255,.1))}
#scbalance .balh b{font-size:12px;letter-spacing:.16em;color:#8db4ff}
#scbalance .balh .crumb{font-size:11px;color:var(--dim,#8b919c);flex:1 1 auto}
#scbalance .balx{flex:0 0 auto}
#scbalance .balbody{flex:1 1 auto;display:flex;flex-direction:column;gap:14px;padding:16px;min-height:0}
#scbalance .balvid{display:flex;gap:16px;align-items:center;flex:0 0 auto}
#scbalance .balvid video{width:min(480px,44vw);aspect-ratio:16/9;background:#000;border-radius:10px;border:1px solid var(--line,rgba(255,255,255,.1))}
#scbalance .baltr{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
#scbalance .baltr .baltc{font-style:normal;font:700 15px/1 ui-monospace,monospace;color:#fff;letter-spacing:.04em}
#scbalance .ballanes{flex:1 1 auto;display:flex;flex-direction:column;gap:10px;min-height:0;position:relative}
#scbalance .balruler{position:relative;height:20px;flex:0 0 auto;border-radius:5px;background:rgba(255,255,255,.06);cursor:ew-resize}
#scbalance .balruler .balph{position:absolute;top:0;bottom:-100vh;width:2px;background:#4d8dff;left:0;pointer-events:none;z-index:6}
#scbalance .ballane{position:relative;flex:1 1 0;min-height:120px;border-radius:10px;background:var(--well,#0a0b0e);border:1px solid var(--line,rgba(255,255,255,.1));overflow:hidden}
#scbalance .ballane canvas{position:absolute;left:0;top:0;pointer-events:none;z-index:1}
#scbalance .ballane .balnm{position:absolute;left:10px;top:8px;z-index:5;font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--dim,#8b919c);pointer-events:none;background:rgba(0,0,0,.45);padding:2px 7px;border-radius:5px}
#scbalance .ballane[data-k="va"] .balnm{color:#2fc1a8}
#scbalance .ballane[data-k="mst"] .balnm{color:#8db4ff}
#scbalance .ballane svg.lnenv{position:absolute;left:0;top:0;z-index:3;pointer-events:none;overflow:visible;fill:none}
#scbalance .ballane svg.lnenv .ln{stroke:inherit;stroke-width:2;pointer-events:auto;cursor:ns-resize}
#scbalance .ballane svg.lnenv .lnh{stroke:transparent;stroke-width:16;pointer-events:auto;cursor:ns-resize}
#scbalance .ballane svg.lnenv .vk{stroke:#0a0b0e;stroke-width:2;pointer-events:auto;cursor:grab}
html body #app.scorepage.sc4 #sctl .sclane.mst .balb{pointer-events:auto;cursor:pointer;border:1px solid rgba(141,180,255,.4);background:rgba(0,0,0,.45);color:#8db4ff;font:700 9.5px/16px "Noto Sans",sans-serif;letter-spacing:.04em;border-radius:5px;padding:0 7px;height:17px}
html body #app.scorepage.sc4 #sctl .sclane.mst .balb:hover{background:rgba(141,180,255,.18);color:#fff}

/* ================= v46.1 — VOICE ONLY chip under the voice control (2026-09-16) ================= */
html body #app.scorepage .voxonly,html body #app.scorepage.sc4 .scbody.s5 .voxonly{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;margin-left:6px;border-radius:8px;font-size:11px;letter-spacing:.02em;border:1px solid var(--line,#2a2d36);background:transparent;color:var(--fg2,#9aa0ad);cursor:pointer}
html body #app.scorepage .voxonly i{font-style:normal;opacity:.8}
html body #app.scorepage .voxonly.on,html body #app.scorepage.sc4 .scbody.s5 .voxonly.on{background:var(--acc,#4d8dff);border-color:var(--acc,#4d8dff);color:#fff}
html body #app.scorepage .voxonly[hidden]{display:none!important}

/* ================= v46.2 — a voice cue keeps the writing look until its stem lands (2026-09-16) ================= */
html body #app.scorepage.sc4 .sccue.voxwait{overflow:hidden;background:linear-gradient(105deg,#3a3480 0%,#3a3480 35%,#6f63e6 50%,#3a3480 65%,#3a3480 100%)!important;background-size:240% 100%!important;animation:scgen 2.2s ease-in-out infinite,scgenb 1.6s ease-in-out infinite!important;border:1px dashed rgba(255,255,255,.35)!important;opacity:1!important}
html body #app.scorepage.sc4 .sccue.voxwait::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);animation:scgen2 1.6s linear infinite;pointer-events:none;z-index:1}
html body #app.scorepage.sc4 .sccue.voxwait .wav,html body #app.scorepage.sc4 .sccue.voxwait svg.scenv,html body #app.scorepage.sc4 .sccue.voxwait .tkbadge,html body #app.scorepage.sc4 .sccue.voxwait .tkpick,html body #app.scorepage.sc4 .sccue.voxwait .twband,html body #app.scorepage.sc4 .sccue.voxwait .scbuf,html body #app.scorepage.sc4 .sccue.voxwait .scfd{display:none!important}
html body #app.scorepage.sc4 .sccue.voxwait span.voxmsg{display:block!important;position:absolute;left:48px;bottom:6px;font-size:10px;color:rgba(255,255,255,.85);letter-spacing:.06em;z-index:2}

/* ================= v46.4 — a pressed Create reads "Writing…" at once (2026-09-16) ================= */
html body #app.scorepage .pressed,html body #app.scorepage.sc4 .scbody.s5 .pressed{opacity:.75!important;cursor:wait!important;filter:saturate(.6)}

/* ================= v47.0 — ONE CONSOLE · HOVER CONTROLS · REFERENCE DRAWER · fades (2026-09-16) ================= */
/* --- the grid: console | handle | timeline --- */
html.s5one body #app.scorepage.sc4 .scbody.s5{grid-template-columns:var(--mw,560px) 8px minmax(0,1fr)!important}
html.s5one body #app.scorepage.sc4 .scbody.s5 > #s5h1,html.s5one body #app.scorepage.sc4 .scbody.s5 > .sc4h{display:none!important}
html.s5one body #app.scorepage.sc4 .scbody.s5 > #s5mid{grid-column:1!important;grid-row:1;display:flex!important;flex-direction:column;min-height:0;overflow:auto;gap:10px;padding:0 10px 14px 0}
html.s5one body #app.scorepage.sc4 .scbody.s5 > #s5h2{grid-column:2!important}
html.s5one body #app.scorepage.sc4 .scbody.s5 > #s5main{grid-column:3!important}
/* --- the pieces become siblings, then take their order --- */
html.s5one #s5mid > #s5quick,html.s5one #s5mid > #s5left,html.s5one #s5mid > #s5left > .scfoot,html.s5one #s5mid > #s5left > .scleft{display:contents!important}
html.s5one #s5mid > #s5libdock{order:0;position:sticky;top:0;z-index:6;background:var(--bg,#0c0d11);padding-bottom:6px}
html.s5one #s5mid label.stf:has(#ststyle){order:10}
html.s5one #s5mid #s5top{order:20}
html.s5one #s5mid .scfoot > .studio.wide{order:22}
html.s5one #s5mid label.stf:has(#stneg){order:30}
html.s5one #s5mid .stpv{order:40}
html.s5one #s5mid .s5qacts{order:50}
html.s5one #s5mid .sc4refchip{order:55}
html.s5one #s5mid .stacts{order:60}
html.s5one #s5mid .scleft > .sc4fh:has(+ .stcol.left){order:70}html.s5one #s5mid .scleft > .stcol.left{order:71}
html.s5one #s5mid .scleft > .sc4fh:has(+ .sc4master){order:74}html.s5one #s5mid .scleft > .sc4master{order:75}
html.s5one #s5mid .scleft > .sc4fh:has(+ .sc4fx){order:76}html.s5one #s5mid .scleft > .sc4fx{order:77}
html.s5one #s5mid .scleft > .sc4fh:has(+ .stwchip){order:80}html.s5one #s5mid .scleft > .stwchip{order:81}html.s5one #s5mid .scleft > .stcol.right{order:82}
html.s5one #s5mid .sc4acts{order:90}
/* gone from the console: the fold toggle, the library (it is the drawer now), the old REFERENCE fold, the library stub */
html.s5one #s5ltog,html.s5one #s5mid .scleft > .sc4fh:has(+ .sc4ref),html.s5one #s5mid .scleft > .sc4ref,html.s5one #s5mid .scleft > .sc4bro,html.s5one .sc4up.s5stub{display:none!important}
html.s5one #s5left > #s5lib,html.s5one #s5lib{display:none!important}
/* the flattened pieces keep a clean rhythm */
html.s5one #s5mid > *{flex:0 0 auto;min-height:0;width:auto}
html.s5one #s5mid .stpv{flex:1 1 220px!important;min-height:160px}
html.s5one #s5mid .s5qacts{position:sticky;bottom:0;z-index:5;background:var(--bg,#0c0d11);padding:8px 0 6px}
html.s5one #s5mid .scleft > .sc4fh,html.s5one #s5mid .scfoot > .stacts > .s5fh{margin-top:2px}
/* --- the reference drawer --- */
html.s5one.s5ref #s5left > #s5lib,html.s5one.s5ref #s5lib{display:flex!important;position:fixed;left:calc(var(--mw,560px) + 44px);top:74px;bottom:16px;width:440px;z-index:60;background:var(--card,#16181f);border:1px solid rgba(255,255,255,.12);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55);overflow:auto;padding:0 0 10px;flex-direction:column}
html.s5one .s5refbar{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;background:inherit;z-index:2}
html.s5one .s5refbar b{font-size:11px;letter-spacing:.14em;color:var(--fg,#e6e8ef)}
html.s5one .s5refbar span{flex:1 1 auto;font-size:11px;color:var(--mut,#8b90a0)}
html.s5one .s5refbar .pill{height:28px}
/* --- block controls: hidden until the block is hovered or selected, then readable --- */
html body #app.scorepage.sc4 .sccue .ctop{opacity:0;transform:translateY(-2px);transition:opacity .12s,transform .12s;top:5px;right:22px;gap:4px;pointer-events:none}
html body #app.scorepage.sc4 .sccue:hover .ctop,html body #app.scorepage.sc4 .sccue.on .ctop,html body #app.scorepage.sc4 .sccue .ctop:focus-within{opacity:1;transform:none;pointer-events:auto}
html body #app.scorepage.sc4 .sccue .ctop > .cmute,html body #app.scorepage.sc4 .sccue .ctop > .csolo{width:26px!important;height:26px!important;font-size:12px!important;font-weight:700;border-radius:7px!important;display:inline-flex!important;align-items:center;justify-content:center}
html body #app.scorepage.sc4 .sccue .ctop > .tkpick > *{min-width:26px!important;height:26px!important;font-size:12px!important;border-radius:7px!important;display:inline-flex;align-items:center;justify-content:center}
html body #app.scorepage.sc4 .sccue .ctop > .sckb{height:26px!important;line-height:26px!important;font-size:11px!important;padding:0 8px!important;border-radius:7px!important}
/* the key · bpm label stays as a quiet mark when the strip is hidden */
html body #app.scorepage.sc4 .sccue > i.kbq{position:absolute;right:8px;bottom:13px;opacity:.55;font:500 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.04em;color:#fff;pointer-events:none;z-index:8;font-style:normal}
html body #app.scorepage.sc4 .sccue:hover > i.kbq,html body #app.scorepage.sc4 .sccue.on > i.kbq{opacity:0}
html body #app.scorepage.sc4 .sccue.hasrg .cmute{opacity:1}
/* --- fades: a small pill handle on the top corner, a soft shade instead of a black triangle --- */
html body #app.scorepage.sc4 .sccue .scfd{width:22px;height:16px;top:0}
html body #app.scorepage.sc4 .sccue .scfd::before{width:14px;height:6px;border-radius:4px;left:4px;top:4px;background:rgba(255,214,106,.55);border:0;opacity:.35;transform:none}
html body #app.scorepage.sc4 .sccue:hover .scfd::before,html body #app.scorepage.sc4 .sccue.on .scfd::before{opacity:.9}
html body #app.scorepage.sc4 .sccue .scfd.on::before{background:var(--warn,#ffd66a);opacity:1}
html body #app.scorepage.sc4 .sccue .scfd:hover::before{transform:scaleY(1.4)}
html body #app.scorepage.sc4 .sccue svg.scenv .fd{fill:rgba(12,13,17,.22);stroke:rgba(255,214,106,.55);stroke-width:1}
html body #app.scorepage.sc4 .sccue svg.scenv .fh{display:none}
html.s5one #s5mid .stacts > .s5fh .pill,html.s5one #s5mid .stacts > .s5fh button.go{display:none!important}

/* ================= v47.1 — the cue pop-up · a console that fits (2026-09-16) ================= */
#cuepop{position:fixed;z-index:120;display:none;align-items:center;gap:4px;padding:5px 6px;border-radius:10px;background:#1b1e27;border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 30px rgba(0,0,0,.5);font:600 12px/1 -apple-system,Inter,system-ui,sans-serif;color:#e6e8ef}
#cuepop button{height:28px;min-width:30px;padding:0 9px;border-radius:7px;border:1px solid rgba(255,255,255,.12);background:#262a36;color:#e6e8ef;font:inherit;cursor:pointer}
#cuepop button:hover{background:#323748}
#cuepop button.on{background:var(--acc,#4d8dff);border-color:var(--acc,#4d8dff);color:#fff}
#cuepop i{width:1px;height:18px;background:rgba(255,255,255,.14);margin:0 3px}
#cuepop em{font:500 11px/1 ui-monospace,Menlo,monospace;color:#9aa0ad;padding:0 4px;font-style:normal}
html body #app.scorepage.sc4 .sccue.narrow .ctop{display:none!important}
/* --- the console fits --- */
html.s5one #sflane{display:none!important}
html.s5one #s5mid > #s5libdock{padding-bottom:2px}
html.s5one #s5mid .moodlanewrap{padding:4px 0 0}
html.s5one #s5mid video#scmon{max-height:200px!important;object-fit:contain;background:#000}
html.s5one #s5mid .scmon{max-height:240px}
html.s5one #s5mid #ststyle{height:58px!important;min-height:58px!important;rows:2}
html.s5one #s5mid #stneg{height:36px!important;min-height:36px!important}
html.s5one #s5mid label.stf:has(#ststyle),html.s5one #s5mid label.stf:has(#stneg){margin:0}
html.s5one #s5mid #s5top .s5r4,html.s5one #s5mid #s5top .s5r3{display:none!important}
html.s5one.s5more #s5mid #s5top .s5r4{display:grid!important}
html.s5one #s5mid #s5top .s5r1,html.s5one #s5mid #s5top .s5r2{padding-bottom:4px}
html.s5one #s5mid .scfoot > .studio.wide{display:none!important}
html.s5one.s5vox #s5mid .scfoot > .studio.wide{display:block!important;order:22}
html.s5one #s5mid .stpv{flex:1 1 90px!important;min-height:90px!important}
html.s5one #s5mid .s5qacts{padding:6px 0 4px}
/* rarely used: behind ⋯ More */
html.s5one #s5mid .stacts,html.s5one #s5mid .scleft > .sc4fh,html.s5one #s5mid .scleft > .stcol,html.s5one #s5mid .scleft > .sc4master,html.s5one #s5mid .scleft > .sc4fx,html.s5one #s5mid .scleft > .stwchip,html.s5one #s5mid .sc4acts{display:none!important}
html.s5one.s5more #s5mid .stacts,html.s5one.s5more #s5mid .scleft > .sc4fh:not(:has(+ .sc4ref)),html.s5one.s5more #s5mid .scleft > .stcol,html.s5one.s5more #s5mid .scleft > .sc4master,html.s5one.s5more #s5mid .scleft > .sc4fx,html.s5one.s5more #s5mid .scleft > .stwchip,html.s5one.s5more #s5mid .sc4acts{display:block!important}
html.s5one.s5more #s5mid .scleft > .sc4fh:has(+ .sc4ref),html.s5one.s5more #s5mid .scleft > .sc4ref,html.s5one.s5more #s5mid .scleft > .sc4bro{display:none!important}
html.s5one.s5more #s5mid .scleft > .sc4closed,html.s5one.s5more #s5mid .scleft > .stcol.right.wheelsoff{display:none!important}
html.s5one #s5mid .s5moreb{order:64;align-self:flex-start;height:26px;padding:0 10px;font-size:11px;letter-spacing:.06em;color:var(--mut,#8b90a0)}
html.s5one #s5mid .s5moreb.on{color:var(--fg,#e6e8ef)}
html.s5one.s5more #s5mid{overflow:auto}
/* v47.1b — the rules that lost on specificity, restated heavier; tighter rhythm */
html.s5one body #app.scorepage.sc4 .scbody.s5 > #s5mid{gap:6px}
html.s5one body #app.scorepage.sc4 .scbody.s5 #s5mid video#scmon{max-height:190px!important;height:190px!important;width:100%;object-fit:contain;background:#000}
html.s5one body #app.scorepage.sc4 .scbody.s5 #s5mid .scmon{height:auto!important;max-height:none!important}
html.s5one body #app.scorepage.sc4 .scbody.s5 #s5mid .scfoot > .studio.wide{display:none!important}
html.s5one.s5vox body #app.scorepage.sc4 .scbody.s5 #s5mid .scfoot > .studio.wide{display:block!important}
html.s5one body #app.scorepage.sc4 .scbody.s5 #s5mid #s5top > .s5fh{display:none!important}
html.s5one body #app.scorepage.sc4 .scbody.s5 #s5mid #s5top{padding-top:0}
html.s5one body #app.scorepage.sc4 .scbody.s5 #s5mid #ststyle{height:58px!important;min-height:58px!important;max-height:58px!important}
html.s5one body #app.scorepage.sc4 .scbody.s5 #s5mid #stneg{height:36px!important;min-height:36px!important;max-height:36px!important}
html.s5one body #app.scorepage.sc4 .scbody.s5 #s5mid .stpv{flex:1 1 90px!important;min-height:90px!important;margin:0!important}
html.s5one body #app.scorepage.sc4 .scbody.s5 #s5mid .s5moreb{order:51;height:24px;margin-top:-2px}

/* ================= v47.2 — THE STUDIO LAYOUT · A CALM PALETTE (2026-09-16) ================= */
/* --- palette: muted, warm-dark, pastel accents --- */
html body #app.scorepage.sc4{--bg0:#131417;--pnl:#1a1b20;--pnl2:#20222a;--well:#101114;--line:rgba(255,255,255,.06);--line2:rgba(255,255,255,.11);--txt:#e4e2dc;--mut:#8f8e97;--dim:#5e5d66;--acc:#7f9cc4;--acc2:#a9bfdb;--accd:rgba(127,156,196,.16);--mus:#8b86b8;--sfx:#c3a468;--fa:#7fa596;--ok:#8fbf9f;--bad:#d08080;--cue:#6f6a9b;--warn:#d9c48e}
html body #app.scorepage.sc4 .sccue{background:linear-gradient(180deg,#7a75ab,#5f5b8f)!important;border:1px solid rgba(255,255,255,.10)!important;color:#f1efe9}
html body #app.scorepage.sc4 .sccue.sfxcue{background:linear-gradient(180deg,#b3925c,#8f7448)!important}
html body #app.scorepage.sc4 .sccue.islayer{border-color:rgba(217,196,142,.55)!important}
html body #app.scorepage.sc4 .sccue.on,html body #app.scorepage.sc4 .sccue.sel{outline:2px solid #efe9d6!important;box-shadow:0 0 0 3px rgba(239,233,214,.14)!important}
html body #app.scorepage.sc4 .sccue > .wav{opacity:.72;mix-blend-mode:screen;filter:saturate(.6) brightness(.95)}
html body #app.scorepage.sc4 .sccue.cmuted,html body #app.scorepage.sc4 .sccue.cdimmed{filter:saturate(.35) brightness(.75)}
html body #app.scorepage.sc4 .scbody.s5 .scph{background:#efe9d6;box-shadow:0 0 5px rgba(239,233,214,.5)}
html body #app.scorepage.sc4 .scdraw.pinned{background:rgba(139,134,184,.16)!important;border:1px solid rgba(169,191,219,.5)!important}
html body #app.scorepage.sc4 .sccue svg.scenv .vl{stroke:#d9c48e}
html body #app.scorepage.sc4 .sccue svg.scenv .vk{fill:#d9c48e;stroke:#3b3852}
html body #app.scorepage.sc4 .sccue svg.scenv .fd{fill:rgba(16,17,20,.22);stroke:rgba(217,196,142,.5)}
html body #app.scorepage.sc4 .sccue .scfd::before{background:rgba(217,196,142,.6)}
html body #app.scorepage.sc4 .sccue .twband{background:rgba(217,196,142,.22)!important}
html body #app.scorepage.sc4 .sccue .twa{background:#d9c48e!important;border-color:#3b3852!important}
html body #app.scorepage.sc4 .scbody.s5 .sclane.sfx{background:rgba(195,164,104,.04)!important}
html body #app.scorepage.sc4 .scbody.s5 .sclane.va{background:rgba(127,165,150,.05)!important}
html body #app.scorepage.sc4 #sctl .sclane.mst .scname{color:#a9bfdb}
html body #app.scorepage.sc4 #sctl .sclane.mst .duckb:hover{border-color:#a9bfdb;color:#a9bfdb}
html body #app.scorepage.sc4 #sctl > #scbot .sclane.va .scname{color:#9cc2b1}
html body #app.scorepage.sc4 #scbot svg polyline,html body #app.scorepage.sc4 #scbot svg .ln{stroke:#a9bfdb}
html body #app.scorepage.sc4 #scbot svg circle,html body #app.scorepage.sc4 #scbot svg .vk{fill:#a9bfdb}
html body #app.scorepage.sc4 .pill.go,html body #app.scorepage.sc4 .pill.ac,html body #app.scorepage.sc4 .s5qcreate,html body #app.scorepage.sc4 .rggo{background:#7f9cc4!important;border-color:#7f9cc4!important;color:#0f1116!important}
html body #app.scorepage.sc4 .pill.go:hover,html body #app.scorepage.sc4 .s5qcreate:hover,html body #app.scorepage.sc4 .rggo:hover{background:#94adcf!important}
html body #app.scorepage.sc4 .voxb.on,html body #app.scorepage.sc4 .voxonly.on{background:#7f9cc4!important;border-color:#7f9cc4!important;color:#0f1116!important}
html body #app.scorepage.sc4 input[type=range]{accent-color:#7f9cc4}
html body #app.scorepage.sc4 .sccue.submitted,html body #app.scorepage.sc4 .sccue.autoing,html body #app.scorepage.sc4 .sccue.voxwait{background:linear-gradient(105deg,#4f4b72 0%,#4f4b72 35%,#8b86b8 50%,#4f4b72 65%,#4f4b72 100%)!important}
html body #app.scorepage.sc4 .tkpick .on,html body #app.scorepage.sc4 .cmute.on,html body #app.scorepage.sc4 .csolo.on,#cuepop button.on{background:#7f9cc4!important;border-color:#7f9cc4!important;color:#0f1116!important}
html body #app.scorepage.sc4 .top .logo .ver{color:#8fbf9f}
/* --- the studio layout: band above, timeline below --- */
html.s5wide body #app.scorepage.sc4 .scbody.s5{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(300px,42vh) 8px minmax(0,1fr)!important}
html.s5wide body #app.scorepage.sc4 .scbody.s5 > #s5h2{display:none!important}
html.s5wide body #app.scorepage.sc4 .scbody.s5 > #s5mid{grid-column:1!important;grid-row:1!important;display:grid!important;grid-template-columns:minmax(340px,1fr) minmax(520px,1.6fr) minmax(340px,1fr);grid-template-rows:minmax(0,1fr);gap:12px;overflow:hidden;padding:0}
html.s5wide body #app.scorepage.sc4 .scbody.s5 > #s5main{grid-column:1!important;grid-row:3!important}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid > #s5left{display:flex!important;flex-direction:column;gap:6px;grid-column:1;grid-row:1;min-height:0;overflow:auto;padding-right:2px}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid > #s5libdock{grid-column:2;grid-row:1;position:static;display:flex;flex-direction:column;min-height:0;background:var(--pnl);border-radius:14px;padding:8px 10px 6px;overflow:hidden}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid > #s5quick{display:flex!important;flex-direction:column;gap:6px;grid-column:3;grid-row:1;min-height:0;overflow:auto;padding:0}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .sc4c{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .scmon{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid video#scmon{flex:1 1 auto;min-height:0;height:auto!important;max-height:none!important;width:100%;object-fit:contain;background:#000;border-radius:10px}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .scmonbar{flex:0 0 auto}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .moodlanewrap{flex:0 0 auto}
/* left column order: voice & key · lyrics · more · folds */
html.s5wide #s5mid #s5left > .scfoot,html.s5wide #s5mid #s5left > .scleft{display:contents!important}
html.s5wide #s5mid #s5left > #s5ltog{display:none!important}
html.s5wide #s5mid #s5left #s5top{order:1}html.s5wide #s5mid #s5left .scfoot > .studio.wide{order:2}html.s5wide #s5mid #s5left .sc4refchip{order:3}html.s5wide #s5mid #s5left > .s5moreb{order:4;align-self:flex-start}
html.s5wide #s5mid #s5left .stacts{order:10}html.s5wide #s5mid #s5left .scleft > .sc4fh:has(+ .stcol.left){order:20}html.s5wide #s5mid #s5left .scleft > .stcol.left{order:21}html.s5wide #s5mid #s5left .scleft > .sc4fh:has(+ .sc4master){order:24}html.s5wide #s5mid #s5left .scleft > .sc4master{order:25}html.s5wide #s5mid #s5left .scleft > .sc4fh:has(+ .sc4fx){order:26}html.s5wide #s5mid #s5left .scleft > .sc4fx{order:27}html.s5wide #s5mid #s5left .scleft > .sc4fh:has(+ .stwchip){order:30}html.s5wide #s5mid #s5left .scleft > .stwchip{order:31}html.s5wide #s5mid #s5left .scleft > .stcol.right{order:32}html.s5wide #s5mid #s5left .sc4acts{order:40}
html.s5wide #s5mid #s5left #s5top .s5r4{display:none!important}html.s5wide.s5more #s5mid #s5left #s5top .s5r4{display:grid!important}
/* right column: style · exclude · notes · actions */
html.s5wide #s5mid #s5quick label.stf:has(#ststyle){order:1}html.s5wide #s5mid #s5quick label.stf:has(#stneg){order:2}html.s5wide #s5mid #s5quick .stpv{order:3;flex:1 1 80px!important;min-height:80px!important}html.s5wide #s5mid #s5quick .s5qacts{order:4;position:static;padding:4px 0 0}
html.s5wide #s5mid #s5quick #ststyle{height:72px!important;min-height:72px!important;max-height:72px!important}
/* v47.2b — the transport stays under the picture; the last saturated bits */
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .scmon{overflow:hidden}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid video#scmon{height:100%!important}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .scmonbar{display:flex!important;min-height:36px}
html body #app.scorepage.sc4 #moodlane,html body #app.scorepage.sc4 .moodlane{background:linear-gradient(180deg,#6f6a9b,#5a5680)!important}
html body #app.scorepage.sc4 #sctl .sclane.va canvas,html body #app.scorepage.sc4 #scbot canvas{filter:saturate(.45) brightness(.95)}
html body #app.scorepage.sc4 .sclane.v .thm{filter:saturate(.85)}
html body #app.scorepage.sc4 .sccue.hasrg .rgov .pill.on,html body #app.scorepage.sc4 .rgov .pill.on{background:#7f9cc4!important;border-color:#7f9cc4!important;color:#0f1116!important}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid video#scmon{height:auto!important;flex:1 1 0px!important;min-height:0!important}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .scmonbar{flex:0 0 36px!important;display:flex!important;align-items:center}

/* ================= v47.3 — track rail · tidy up · pinned SFX · balance rolls up · clean blocks · bigger picture (2026-09-16) ================= */
/* bigger picture */
html.s5wide body #app.scorepage.sc4 .scbody.s5{grid-template-rows:minmax(320px,52vh) 8px minmax(0,1fr)!important}
html.s5wide body #app.scorepage.sc4 .scbody.s5 > #s5mid{grid-template-columns:minmax(330px,1fr) minmax(560px,2.3fr) minmax(330px,1fr)}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid > #s5libdock{padding:6px 8px 4px}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .moodlanewrap{padding:2px 0 0}
/* blocks: square-ish, nothing inside but the wave, the line and the fade pills */
html body #app.scorepage.sc4 .sccue{border-radius:3px!important}
html body #app.scorepage.sc4 .sccue .ctop,html body #app.scorepage.sc4 .sccue > .cmute,html body #app.scorepage.sc4 .sccue > .csolo,html body #app.scorepage.sc4 .sccue > .tkbadge,html body #app.scorepage.sc4 .sccue > .tkpick,html body #app.scorepage.sc4 .sccue > .sckb{display:none!important}
html body #app.scorepage.sc4 .sccue > b{right:10px!important}
/* the rail */
#s5tlwrap{position:relative}
#lnrail{flex:0 0 118px;position:relative;overflow:hidden;border-right:1px solid var(--line2,rgba(255,255,255,.11));background:var(--pnl,#1a1b20);border-radius:10px 0 0 10px}
#lnrail .lnrow{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 8px 0 10px;border-bottom:1px solid var(--line,rgba(255,255,255,.06));box-sizing:border-box;transition:top .18s,height .18s}
#lnrail .lnrow.bot{background:var(--pnl2,#20222a)}
#lnrail .lnname{font:600 10.5px/1 Inter,system-ui,sans-serif;letter-spacing:.08em;color:var(--mut,#8f8e97);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lnrail .lnrow.va .lnname{color:#9cc2b1}#lnrail .lnrow.mst .lnname{color:#a9bfdb}#lnrail .lnrow.sfx .lnname{color:#c3a468}#lnrail .lnrow.v .lnname{color:#d6d3cb}
#lnrail .lntog{display:flex;gap:3px}
#lnrail .lnp{width:20px;height:20px;border-radius:5px;border:1px solid var(--line2,rgba(255,255,255,.11));background:transparent;color:var(--mut,#8f8e97);font:700 10px/1 Inter,system-ui,sans-serif;cursor:pointer;padding:0}
#lnrail .lnp.on{background:#7f9cc4;border-color:#7f9cc4;color:#0f1116}
html body #app.scorepage.sc4 #sctl .sclane .scname{opacity:0!important;pointer-events:none!important}
html body #app.scorepage.sc4 #sctl .sclane .lnlab{opacity:0!important}
html body #app.scorepage.sc4 #sctl .sclane .scname .sctog{pointer-events:auto!important}
/* pinned rail: SFX above FILM AUDIO, none of them follow the height slider */
html body #app.scorepage.sc4 #sctl > #scbot .sclane.sfx{height:38px!important;min-height:38px!important;max-height:38px!important;position:relative!important}
/* balance mode */
html.s5bal body #app.scorepage.sc4 #sctl{overflow-y:hidden!important}
html.s5bal body #app.scorepage.sc4 #sctl .sclanes{transform:translateY(-105%);opacity:0;pointer-events:none;transition:transform .38s cubic-bezier(.2,.7,.2,1),opacity .3s;position:absolute;left:0;right:0}
html body #app.scorepage.sc4 #sctl .sclanes{transition:transform .38s cubic-bezier(.2,.7,.2,1),opacity .3s}
html.s5bal body #app.scorepage.sc4 #sctl > #scbot{position:absolute!important;top:28px;bottom:0;left:0;display:flex;flex-direction:column;animation:balin .38s cubic-bezier(.2,.7,.2,1)}
@keyframes balin{from{transform:translateY(40%);opacity:.4}to{transform:none;opacity:1}}
html.s5bal body #app.scorepage.sc4 #sctl > #scbot .sclane.va,html.s5bal body #app.scorepage.sc4 #sctl > #scbot .sclane.mst{height:auto!important;min-height:0!important;max-height:none!important;flex:1 1 0!important}
html.s5bal body #app.scorepage.sc4 #sctl > #scbot .sclane.sfx{display:none!important}
#balback{display:none;position:absolute;right:18px;top:6px;z-index:70;align-items:center;height:30px;padding:0 12px;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:#20222a;color:#e4e2dc;font:600 12px/1 Inter,system-ui,sans-serif;cursor:pointer}
#balback:hover{background:#2a2d38}
#scbalance{display:none!important}
.scright.hasrail{position:relative}
.scright.hasrail > #lnrail{position:absolute;left:0;width:118px;z-index:8}
.scright.hasrail > #sctl{margin-left:118px!important}
html body #app.scorepage.sc4 #sctl > #scbot .sclane .scname{opacity:1!important;color:transparent!important;pointer-events:none!important}
html body #app.scorepage.sc4 #sctl > #scbot .sclane .scname > *{color:var(--txt,#e4e2dc);pointer-events:auto}
html body #app.scorepage.sc4 #sctl > #scbot .sclane .scname > em.lnv{color:var(--mut,#8f8e97)}

/* ================= v47.4 — no dead space · draggable band · the rail stays down · one SFX lane (2026-09-16) ================= */
html.s5wide body #app.scorepage.sc4 .scbody.s5{grid-template-rows:var(--bandh,52vh) 8px minmax(0,1fr)!important;position:relative}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid > #s5libdock{padding:6px 8px 0!important}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .moodlanewrap{padding:0;margin:0}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .moodlanewrap > small.lab{margin:2px 0 1px}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .scmonbar{min-height:32px!important;flex-basis:32px!important}
#bandgrip{grid-column:1;grid-row:2;cursor:row-resize;position:relative;z-index:9}
#bandgrip::before{content:'';position:absolute;left:50%;top:2px;width:64px;height:4px;margin-left:-32px;border-radius:2px;background:rgba(255,255,255,.14)}
#bandgrip:hover::before{background:rgba(255,255,255,.3)}
/* the pinned rail sits at the bottom even when the lanes are short */
html body #app.scorepage.sc4 #sctl{display:flex!important;flex-direction:column;align-items:flex-start}
html body #app.scorepage.sc4 #sctl > .sclanes{flex:1 0 auto;width:100%}
html body #app.scorepage.sc4 #sctl > #scbot{margin-top:auto;position:sticky;bottom:0}
html body #app.scorepage.sc4 #sctl > .scruler{flex:0 0 auto}
/* one SFX lane */
html body #app.scorepage.sc4 .sclane.sfx[data-s="2"]{display:none!important}
#lnrail .lnrow.sfx2{display:none}

/* ================= v47.5 — the CUE bar rides in the transport row; the picture takes everything else (2026-09-16)
   Philip (circling the transport row, the gap and the CUE label): "all of this is dead space!" ================= */
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .sc4c{position:relative;gap:0!important;padding-bottom:0!important}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .scmon{margin:0!important;padding:0!important;gap:0!important}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .scmonbar{min-height:34px!important;height:34px!important;flex-basis:34px!important;padding:0 4px!important;margin:0!important;overflow:visible}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .moodlanewrap{position:absolute!important;left:210px;right:350px;bottom:6px;height:22px;display:flex!important;align-items:center;gap:8px;margin:0!important;padding:0!important;z-index:3}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .moodlanewrap > small.lab{flex:0 0 auto;margin:0!important;white-space:nowrap;font-size:10px;letter-spacing:.08em;color:var(--mut,#8f8e97)}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .moodlanewrap > #moodlane{flex:1 1 auto;height:20px!important;min-height:20px!important}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .moodlanewrap > #sflane{display:none!important}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid > #s5libdock{padding:6px 8px 4px!important}
@media (max-width:1700px){html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .moodlanewrap{left:190px;right:300px}}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .moodlanewrap > #moodlane{width:auto!important;min-width:160px;align-self:stretch;position:relative}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .moodlanewrap{bottom:auto;top:auto;margin-top:-28px!important;position:relative!important;left:210px;right:auto;width:calc(100% - 560px)}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .moodlanewrap{flex-direction:row!important;flex-wrap:nowrap!important;height:22px!important;margin-top:-29px!important}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .moodlanewrap > *{margin:0!important}

/* ================= v47.7 — status on the picture · transport on the picture · no row under the picture (2026-09-17) ================= */
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .scmon{position:relative!important;border:2px solid rgba(255,255,255,.08);border-radius:12px;transition:border-color .3s;overflow:hidden}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .scmon[data-k="busy"]{border-color:#d9c48e}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .scmon[data-k="ok"]{border-color:#8fbf9f}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .scmon[data-k="bad"]{border-color:#d08080}
#scstat{position:absolute;top:10px;right:10px;z-index:8;max-width:46%;padding:7px 10px;border-radius:9px;background:rgba(12,13,17,.72);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12);pointer-events:none;font:500 11px/1.35 Inter,system-ui,sans-serif;color:#e4e2dc}
#scstat b{display:block;font:700 10.5px/1 Inter,system-ui,sans-serif;letter-spacing:.14em}
#scstat span{display:block;margin-top:3px;color:#b9b7b0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#scstat[data-k="busy"] b{color:#d9c48e}#scstat[data-k="ok"] b{color:#8fbf9f}#scstat[data-k="bad"] b{color:#d08080}
#scstat[data-k="busy"] b::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#d9c48e;margin-right:6px;animation:stpulse 1.2s ease-in-out infinite}
@keyframes stpulse{0%,100%{opacity:.35}50%{opacity:1}}
/* the transport is a pill on the picture; the CUE bar lies on its bottom edge; nothing under the picture */
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .scmonbar{position:absolute!important;left:10px;top:10px;height:32px!important;min-height:0!important;flex:none!important;width:auto;padding:0 10px 0 4px!important;border-radius:9px;background:rgba(12,13,17,.72);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12);z-index:8;gap:8px}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .scmonbar select,html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .scmonbar .s5detach,html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .scmonbar button[title*="etach"],html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .scmonbar .sc4h{display:none!important}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .moodlanewrap{position:absolute!important;left:12px;right:12px;bottom:8px;top:auto;margin:0!important;width:auto;height:22px!important;z-index:8;flex-direction:row!important}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .moodlanewrap > small.lab{background:rgba(12,13,17,.6);padding:3px 6px;border-radius:5px}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .moodlanewrap > #moodlane{opacity:.92}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid video#scmon{border-radius:10px}
/* the right console's left edge (v47.7: KEY / STYLE were clipped) */
html.s5wide body #app.scorepage.sc4 .scbody.s5 > #s5mid > #s5quick{padding-left:8px!important;overflow-x:visible}
html.s5wide body #app.scorepage.sc4 .scbody.s5 > #s5mid > #s5quick > *{margin-left:0!important}
html.s5wide body #app.scorepage.sc4 .scbody.s5 > #s5mid > #s5left{padding-left:2px}

/* ================= v47.9 — the sound-effects key row (2026-09-17) ================= */
html.s5wide #s5mid #s5left > .sfxkey{order:36;display:none;flex-direction:column;gap:5px;padding:9px 10px;border:1px solid var(--line2,rgba(255,255,255,.11));border-radius:10px;background:var(--pnl,#1a1b20)}
html.s5wide.s5more #s5mid #s5left > .sfxkey{display:flex}
html.s5wide #s5mid #s5left > .sfxkey b{font:700 10px/1 Inter,system-ui,sans-serif;letter-spacing:.14em;color:var(--mut,#8f8e97)}
html.s5wide #s5mid #s5left > .sfxkey small{font:500 11px/1.3 Inter,system-ui,sans-serif;color:var(--dim,#5e5d66)}
html.s5wide #s5mid #s5left > .sfxkey.on small{color:#8fbf9f}
html.s5wide #s5mid #s5left > .sfxkey .row{display:flex;gap:6px}
html.s5wide #s5mid #s5left > .sfxkey input{flex:1 1 auto;min-width:0;height:28px;padding:0 9px;border-radius:7px;border:1px solid var(--line2,rgba(255,255,255,.11));background:var(--well,#101114);color:var(--txt,#e4e2dc);font:500 12px/1 ui-monospace,Menlo,monospace}
html.s5wide #s5mid #s5left > .sfxkey button{flex:0 0 auto;height:28px}

/* ================= v48.0/v48.1 — one status bar directly above the picture (2026-09-17) ================= */
html body #app #s5libdock > #scstat{position:static!important;order:-1;flex:0 0 auto;display:flex;align-items:center;gap:9px;width:100%;margin:0 0 6px;padding:7px 11px;border-radius:9px;background:var(--pnl2,#20222a)!important;border:1px solid var(--line,rgba(255,255,255,.07))!important;backdrop-filter:none!important;font:500 12px/1.2 Inter,system-ui,sans-serif;color:#b9b7b0;pointer-events:none;box-sizing:border-box;max-width:none!important;min-height:32px}
html body #app #s5libdock > #scstat .dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#8fbf9f}
html body #app #s5libdock > #scstat[data-k="busy"] .dot{background:#d9c48e;animation:stpulse 1.2s ease-in-out infinite}
html body #app #s5libdock > #scstat[data-k="bad"] .dot{background:#d08080}
html body #app #s5libdock > #scstat b{flex:0 0 auto;display:block;margin:0;font:700 11px/1.2 Inter,system-ui,sans-serif;letter-spacing:.14em;color:#8fbf9f}
html body #app #s5libdock > #scstat[data-k="busy"] b{color:#d9c48e}
html body #app #s5libdock > #scstat[data-k="bad"] b{color:#d08080}
html body #app #s5libdock > #scstat b::before{content:none!important}
html body #app #s5libdock > #scstat span{flex:1 1 auto;min-width:0;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#8f8e97}
html body #app #s5libdock > #scstat[data-k="bad"]{border-color:rgba(208,128,128,.5)!important}
html body #app #s5libdock > #scstat[data-k="busy"]{border-color:rgba(217,196,142,.4)!important}
html.filmroom body #toast,html.filmroom body .toast{display:none!important}
html body #app.scorepage.sc4 .scbody.s5 #s5mid .scmon #scstat{display:none!important}
html body #app .top > #scstat{display:none!important}

/* ================= v48.2 — the status bar sits in the menu bar, pinned over the player (2026-09-17) ================= */
html body #app .top{position:relative}
html body #app .top > #scstat{display:flex!important;position:absolute!important;top:50%;transform:translateY(-50%);left:0;margin:0!important;order:0;align-items:center;gap:9px;padding:6px 11px;border-radius:9px;background:var(--pnl2,#20222a)!important;border:1px solid var(--line,rgba(255,255,255,.07))!important;backdrop-filter:none!important;font:500 12px/1.2 Inter,system-ui,sans-serif;color:#b9b7b0;pointer-events:none;box-sizing:border-box;min-width:0;max-width:none!important;z-index:4}
html body #app .top > #scstat .dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#8fbf9f;align-self:center}
html body #app .top > #scstat[data-k="busy"] .dot{background:#d9c48e;animation:stpulse 1.2s ease-in-out infinite}
html body #app .top > #scstat[data-k="bad"] .dot{background:#d08080}
html body #app .top > #scstat b{flex:0 0 auto;display:block;margin:0;font:700 11px/1.2 Inter,system-ui,sans-serif;letter-spacing:.14em;color:#8fbf9f}
html body #app .top > #scstat[data-k="busy"] b{color:#d9c48e}
html body #app .top > #scstat[data-k="bad"] b{color:#d08080}
html body #app .top > #scstat[data-k="busy"]{border-color:rgba(217,196,142,.4)!important}
html body #app .top > #scstat[data-k="bad"]{border-color:rgba(208,128,128,.5)!important}
html body #app .top > #scstat b::before{content:none!important}
html body #app .top > #scstat span{flex:1 1 auto;min-width:0;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#8f8e97}
html body #app #s5libdock > #scstat{display:none!important}
/* the permanent door to the uploads */
html.s5wide #s5mid #s5left > .s5refb{order:5;align-self:flex-start;height:28px;padding:0 11px;font-size:11.5px;display:inline-flex;align-items:center;gap:6px}
html.s5wide #s5mid #s5left > .s5refb i{font-style:normal;opacity:.8}

/* ===== CINEMAKER v48.3 — no jumping ===== */
html.s5one.s5ref #s5left > #s5lib,html.s5one.s5ref #s5lib{transition:none!important}
#scstat{transition:none!important;pointer-events:none!important}
#scstat *{pointer-events:none!important}

/* ===== CINEMAKER v48.5 — demo copy settings ===== */
#demopop{position:fixed;z-index:9000;width:300px;background:var(--card,#16181f);border:1px solid rgba(255,255,255,.14);border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.6);padding:12px 12px 10px;font-size:12px;color:var(--fg,#e8e9ee)}
#demopop .dph{font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.65;margin-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#demopop .dph b{text-transform:none;letter-spacing:0;opacity:.95}
#demopop .dpr{display:flex;align-items:center;gap:8px;margin:8px 0}
#demopop .dpr > span{width:52px;font-size:10px;letter-spacing:.08em;opacity:.6}
#demopop .dpr input[type=range]{flex:1;min-width:0;accent-color:var(--acc,#7f9cc4)}
#demopop .dpv{width:44px;text-align:right;font-variant-numeric:tabular-nums;font-style:normal;opacity:.9}
#demopop .dpc{align-items:flex-start;gap:8px;margin-top:12px;cursor:pointer}
#demopop .dpc input{margin-top:2px;accent-color:var(--acc,#7f9cc4)}
#demopop .dpc > span{width:auto;font-size:12px;letter-spacing:0;opacity:.95}
#demopop .dpc i{display:block;flex:1 0 100%;margin-left:22px;font-style:normal;font-size:10.5px;opacity:.5;line-height:1.35}
#demopop .dpc{flex-wrap:wrap}
#demopop .dpn{margin:12px 0 10px;padding:7px 8px;border-radius:8px;background:rgba(255,255,255,.04);font-size:10.5px;opacity:.7;line-height:1.35;word-break:break-word}
#demopop .dpa{display:flex;gap:8px;justify-content:flex-end}
#demopop .dpa .pill{height:28px;padding:0 12px;font-size:11.5px}

/* ===== CINEMAKER v48.6 — score around your own melody ===== */
#app.scorepage.sc4 .sc4up .urow .ico.uscore{color:var(--acc,#7f9cc4)}
#app.scorepage.sc4 .sccue[data-mine="1"]{border-color:rgba(127,165,150,.55)}
#scctx .row.scaround{color:var(--acc,#7f9cc4)}

/* ===== CINEMAKER v48.7 — the log ===== */
#scstat{display:none!important}
#sclog{position:absolute;top:8px;height:44px;z-index:40;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.10);border-radius:10px;overflow:hidden;cursor:pointer;transition:height .18s ease}
#sclog.open{height:190px;background:rgba(0,0,0,.45);z-index:80}
#sclog .lgb{height:100%;overflow:auto;padding:5px 10px;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin}
#sclog .lgl{display:flex;gap:9px;align-items:baseline;font-size:11.5px;line-height:1.45;white-space:nowrap}
#sclog .lgl i{font-style:normal;font-variant-numeric:tabular-nums;opacity:.38;font-size:10px;flex:0 0 auto}
#sclog .lgl span{overflow:hidden;text-overflow:ellipsis;opacity:.8}
#sclog .lgl.good span{color:var(--fa,#7fa596)}
#sclog .lgl.bad span{color:var(--warn,#d9c48e)}
#sclog.open .lgl{white-space:normal}
#sclog.open .lgl span{overflow:visible;text-overflow:clip}

/* ===== CINEMAKER v48.9 — the log never covers the top-bar buttons ===== */
#sclog{max-width:none!important}
#sclog:not(.open){pointer-events:auto}

/* ===== CINEMAKER v48.11 — the region reads ===== */
/* the row sits in the middle of the region, and the style box is two lines tall */
html body #app.scorepage.sc4 .sccue .rgov,html body #app.scorepage.sc4 .scdraw.pinned .rgov{top:50%!important;bottom:auto!important;height:auto!important;transform:translateY(-50%)}
html body #app.scorepage.sc4 .rgov .rgsty{height:40px!important;min-height:40px!important;line-height:1.35!important;padding:5px 9px!important;white-space:pre-wrap;overflow:auto}
html body #app.scorepage.sc4 .rgov.rgcompact .rgsty,html body #app.scorepage.sc4 .rgov.rgcompact2 .rgsty{height:34px!important;min-height:34px!important}
html body #app.scorepage.sc4 .sccue .rgov{align-items:center}
/* the loading bar, twice as thick */
html body #app.scorepage.sc4 .sccue .scbuf{height:6px!important}

/* ===== CINEMAKER v48.17 — ✦ Single clip ===== */
html body #app.scorepage.sc4 .sgsingle{background:transparent!important;border:1px solid rgba(255,255,255,.22)!important;color:var(--fg,#e8e9ee)!important;opacity:.92}
html body #app.scorepage.sc4 .sgsingle:hover{border-color:var(--acc,#7f9cc4)!important;opacity:1}
html body #app.scorepage.sc4 .rgov.rgcompact .sgsingle span{font-size:0!important}
html body #app.scorepage.sc4 .rgov.rgcompact .sgsingle i{font-style:normal}
html body #app.scorepage.sc4 .sgsingle i{font-style:normal;margin-right:5px;opacity:.75}

/* ===== CINEMAKER v48.21 — a region that is working says so ===== */
@keyframes sgsweep{0%{background-position:0% 50%}100%{background-position:200% 50%}}
html body #app.scorepage.sc4 #sctl .scdraw.sgwork,
html body #app.scorepage.sc4 #sctl .sccue.sgwork{
  background-image:linear-gradient(100deg,
    rgba(127,156,196,.10) 0%,
    rgba(139,134,184,.34) 22%,
    rgba(217,196,142,.30) 44%,
    rgba(139,134,184,.34) 66%,
    rgba(127,156,196,.10) 100%)!important;
  background-size:200% 100%!important;
  animation:sgsweep 2.2s linear infinite!important;
  border-color:rgba(217,196,142,.55)!important;
}
html body #app.scorepage.sc4 #sctl .scdraw.sgwork::after{
  content:"writing…";position:absolute;right:8px;top:4px;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;opacity:.75;color:var(--warn,#d9c48e);pointer-events:none;
}
/* the right console scrolls instead of clipping */
html body #app.scorepage.sc4 #s5quick{overflow-y:auto!important;min-height:0!important;scrollbar-width:thin}
html.s5one body #app.scorepage.sc4 #s5left{overflow-y:auto!important;min-height:0!important;scrollbar-width:thin}

/* ===== CINEMAKER v48.23 — one block look, three states ===== */
@keyframes sgsweep2{0%{background-position:0% 50%}100%{background-position:200% 50%}}

html body #app.scorepage.sc4 #sctl .sccue.sgwriting,
html body #app.scorepage.sc4 #sctl .sccue.sgloading,
html body #app.scorepage.sc4 #sctl .sccue.sgready{
  background-size:200% 100%!important;
  background-repeat:no-repeat!important;
}
/* 1 · being written — the look Philip picked */
html body #app.scorepage.sc4 #sctl .sccue.sgwriting{
  background-image:linear-gradient(100deg,
    rgba(127,156,196,.10) 0%, rgba(139,134,184,.34) 22%,
    rgba(217,196,142,.30) 44%, rgba(139,134,184,.34) 66%,
    rgba(127,156,196,.10) 100%)!important;
  animation:sgsweep2 2.2s linear infinite!important;
  border-color:rgba(217,196,142,.55)!important;
}
/* 2 · landed, audio still coming down — same look, orange */
html body #app.scorepage.sc4 #sctl .sccue.sgloading{
  background-image:linear-gradient(100deg,
    rgba(196,138,86,.12) 0%, rgba(214,150,84,.36) 24%,
    rgba(232,178,98,.42) 48%, rgba(214,150,84,.36) 72%,
    rgba(196,138,86,.12) 100%)!important;
  animation:sgsweep2 2.6s linear infinite!important;
  border-color:rgba(226,160,90,.6)!important;
}
/* 3 · ready to play — same family, green, still */
html body #app.scorepage.sc4 #sctl .sccue.sgready{
  background-image:linear-gradient(100deg,
    rgba(104,150,126,.20) 0%, rgba(124,172,142,.34) 30%,
    rgba(138,186,150,.30) 52%, rgba(118,164,138,.32) 74%,
    rgba(104,150,126,.20) 100%)!important;
  background-position:50% 50%!important;
  animation:none!important;
  border-color:rgba(138,186,150,.5)!important;
}
/* the waveform belongs on top of all of it */
html body #app.scorepage.sc4 #sctl .sccue.sgready .wav,
html body #app.scorepage.sc4 #sctl .sccue.sgready canvas{opacity:.92!important;mix-blend-mode:screen}
/* the loading bar is retired — the block is the indicator now */
html body #app.scorepage.sc4 #sctl .sccue.sgready .scbuf,
html body #app.scorepage.sc4 #sctl .sccue.sgloading .scbuf,
html body #app.scorepage.sc4 #sctl .sccue.sgwriting .scbuf{display:none!important}
/* "writing…" tag */
html body #app.scorepage.sc4 #sctl .sccue.sgwriting::after{
  content:"writing…";position:absolute;left:10px;bottom:6px;font-size:10.5px;letter-spacing:.06em;
  color:rgba(255,255,255,.72);pointer-events:none;
}
html body #app.scorepage.sc4 #sctl .sccue.sgloading::after{
  content:"loading…";position:absolute;left:10px;bottom:6px;font-size:10.5px;letter-spacing:.06em;
  color:rgba(255,255,255,.72);pointer-events:none;
}
/* the full prompt, soft grey, in the middle of a ready block */
html body #app.scorepage.sc4 #sctl .sccue .sgprompt{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  max-width:calc(100% - 96px);max-height:64%;overflow:auto;z-index:4;
  background:rgba(236,238,244,.14);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(3px);border-radius:9px;padding:7px 11px;
  font-size:11.5px;line-height:1.4;color:rgba(255,255,255,.92);
  text-shadow:0 1px 2px rgba(0,0,0,.45);pointer-events:none;scrollbar-width:thin;
}
html body #app.scorepage.sc4 #sctl .sccue[style*="width: 2"] .sgprompt,
html body #app.scorepage.sc4 #sctl .sccue.narrow .sgprompt{display:none}
/* the region overlay's own box: soft grey, not near-black */
html body #app.scorepage.sc4 .rgov .rgsty{
  background:rgba(236,238,244,.13)!important;border:1px solid rgba(255,255,255,.18)!important;
  color:rgba(255,255,255,.94)!important;backdrop-filter:blur(3px);
  height:46px!important;min-height:46px!important;
}
html body #app.scorepage.sc4 .rgov .rgsty::placeholder{color:rgba(255,255,255,.5)!important}

/* ===== CINEMAKER v48.26 — articulation ===== */
html body #app.scorepage.sc4 .sgartic{display:flex;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap}
html body #app.scorepage.sc4 .sgartic small{font-size:9.5px;letter-spacing:.09em;opacity:.55;margin-right:2px}
html body #app.scorepage.sc4 .sgartic button{height:24px;padding:0 10px;border-radius:7px;font-size:11px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.8);cursor:pointer}
html body #app.scorepage.sc4 .sgartic button:hover{border-color:rgba(255,255,255,.3)}
html body #app.scorepage.sc4 .sgartic button.on{background:var(--acc,#7f9cc4)!important;border-color:var(--acc,#7f9cc4)!important;color:#0d0f13!important}

/* ===== CINEMAKER v48.27 — one control family, nothing overlapping ===== */
/* the action row lives in the flow, never on top of the prompt */
html body #app.scorepage.sc4 .stacts,
html body #app.scorepage.sc4 .sc4acts{
  position:relative!important;z-index:3;display:flex!important;flex-wrap:wrap!important;gap:6px!important;
  align-items:center;margin-top:8px!important;
}
html body #app.scorepage.sc4 .stpv{padding-bottom:4px}
html body #app.scorepage.sc4 .stpv pre{max-height:190px;overflow:auto;scrollbar-width:thin}
/* Single clip = Create's twin, one tone lighter, never wider than its row */
html body #app.scorepage.sc4 .sgsingle{
  background:rgba(127,156,196,.42)!important;border:1px solid rgba(127,156,196,.55)!important;
  color:#0e1116!important;opacity:1!important;
}
html body #app.scorepage.sc4 .sgsingle:hover{background:rgba(127,156,196,.62)!important}
html body #app.scorepage.sc4 .stacts .pill,
html body #app.scorepage.sc4 .sc4acts .pill{flex:0 1 auto;min-width:0;white-space:nowrap}
/* the region overlay stays inside its region */
html body #app.scorepage.sc4 .rgov{max-width:100%!important;overflow:hidden!important}
html body #app.scorepage.sc4 .rgov .rgsty{
  width:100%!important;box-sizing:border-box!important;max-width:100%!important;
  background:rgba(236,238,244,.13)!important;border:1px solid rgba(255,255,255,.18)!important;
  color:rgba(255,255,255,.94)!important;border-radius:8px!important;
  height:44px!important;min-height:44px!important;max-height:44px!important;overflow:auto!important;
}
/* the pins keep their own line — the box never rides over them */
html body #app.scorepage.sc4 .scdraw.pinned .rgov{top:auto!important;bottom:6px!important;transform:none!important}
html body #app.scorepage.sc4 .scdraw.pinned .rgov .rgrow{margin-top:4px}

/* ===== CINEMAKER v48.29 — the style is the title, and no base flash ===== */
/* the block never shows the old flat fill: the three states own the background */
html body #app.scorepage.sc4 #sctl .sccue.success:not(.sgwriting):not(.sgloading):not(.sgready){
  background-image:linear-gradient(100deg,
    rgba(104,150,126,.20) 0%, rgba(124,172,142,.34) 30%,
    rgba(138,186,150,.30) 52%, rgba(118,164,138,.32) 74%,
    rgba(104,150,126,.20) 100%)!important;
  background-size:200% 100%!important;background-position:50% 50%!important;
}
/* the STYLE, written on the region itself */
html body #app.scorepage.sc4 #sctl .sccue > b{
  position:absolute;left:10px;top:7px;right:74px;z-index:5;
  font-weight:500;font-size:11.5px;line-height:1.35;
  white-space:normal!important;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  color:rgba(255,255,255,.95);text-shadow:0 1px 3px rgba(0,0,0,.6);
  pointer-events:none;background:none!important;border:0!important;padding:0!important;
}
html body #app.scorepage.sc4 #sctl .sccue.sgready > b{-webkit-line-clamp:2}
html body #app.scorepage.sc4 #sctl .sgprompt{display:none!important}

/* ===== CINEMAKER v48.30 — the drawn region, rebuilt ===== */
/* 1 · the region itself: slate and steel, no purple */
html body #app.scorepage.sc4 #sctl .scdraw,
html body #app.scorepage.sc4 #sctl .scdraw.pinned{
  background:linear-gradient(180deg,rgba(38,44,54,.92) 0%,rgba(30,35,43,.92) 100%)!important;
  border:1px solid rgba(127,156,196,.55)!important;
  border-radius:10px!important;
  box-shadow:0 6px 22px rgba(0,0,0,.35)!important;
}
/* the keyframe / cue bar rides at the TOP of the region */
html body #app.scorepage.sc4 #sctl .scdraw.pinned .rgov{
  position:absolute!important;left:8px!important;right:8px!important;top:8px!important;bottom:8px!important;
  transform:none!important;max-width:none!important;width:auto!important;
  display:flex!important;flex-direction:column!important;gap:7px!important;
  overflow:visible!important;
}
html body #app.scorepage.sc4 #sctl .scdraw.pinned .rgov .rgcue{
  order:-2!important;flex:0 0 24px!important;height:24px!important;min-height:24px!important;
  background:rgba(127,156,196,.22)!important;border:1px solid rgba(127,156,196,.42)!important;
  border-radius:6px!important;margin:0!important;
}
html body #app.scorepage.sc4 #sctl .scdraw.pinned .rgov .rgcue i{background:rgba(236,238,244,.9)!important}
/* 2 · the style box sits inside the region, never to the edge */
html body #app.scorepage.sc4 #sctl .scdraw.pinned .rgov .rgsty{
  order:-1!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important;
  flex:0 0 auto!important;height:52px!important;min-height:52px!important;max-height:52px!important;
  background:rgba(236,238,244,.11)!important;border:1px solid rgba(255,255,255,.17)!important;
  border-radius:8px!important;color:rgba(255,255,255,.95)!important;
  padding:7px 10px!important;font-size:12px!important;line-height:1.35!important;overflow:auto!important;
}
/* 3 · the controls row: real sliders, room to breathe, pinned to the bottom of the region */
html body #app.scorepage.sc4 #sctl .scdraw.pinned .rgov .rgrow{
  margin-top:auto!important;display:flex!important;align-items:center!important;
  gap:12px!important;flex-wrap:wrap!important;
}
html body #app.scorepage.sc4 #sctl .scdraw.pinned .rgov .rgsl{display:flex;align-items:center;gap:7px}
html body #app.scorepage.sc4 #sctl .scdraw.pinned .rgov .rgsl small{font-size:9.5px;letter-spacing:.08em;opacity:.6}
html body #app.scorepage.sc4 #sctl .scdraw.pinned .rgov .rgsl input[type=range]{
  width:132px!important;height:20px!important;accent-color:var(--acc,#7f9cc4)!important;
}
html body #app.scorepage.sc4 #sctl .scdraw.pinned .rgov .rgrow .pill{height:30px!important;padding:0 12px!important;font-size:12px!important}
/* 4 · no transitions on anything that follows the zoom — that is where the jumpiness came from */
html body #app.scorepage.sc4 #sctl .scdraw,
html body #app.scorepage.sc4 #sctl .scdraw *,
html body #app.scorepage.sc4 #sctl .sccue,
html body #app.scorepage.sc4 #sctl .sccue *{transition:none!important;animation-delay:0s!important}
html body #app.scorepage.sc4 #sctl .sccue.sgwriting,
html body #app.scorepage.sc4 #sctl .sccue.sgloading{animation:sgsweep2 2.4s linear infinite!important}
/* 5 · the purple cue fill retires everywhere in the room */
html body #app.scorepage.sc4 #sctl .sccue{border-color:rgba(138,170,150,.42)!important}
html body #app.scorepage.sc4 #sctl .sccue.on{border-color:rgba(236,238,244,.85)!important;box-shadow:0 0 0 1px rgba(236,238,244,.35)!important}

/* ===== CINEMAKER v48.31 — the selected cue wears the same layout as a drawn region ===== */
html body #app.scorepage.sc4 #sctl .sccue .rgov{
  position:absolute!important;left:8px!important;right:8px!important;top:auto!important;bottom:7px!important;
  height:auto!important;transform:none!important;max-width:none!important;width:auto!important;
  display:flex!important;flex-direction:row!important;align-items:center!important;
  gap:10px!important;flex-wrap:wrap!important;overflow:visible!important;
}
html body #app.scorepage.sc4 #sctl .sccue .rgov .rgsty{
  flex:1 1 220px!important;min-width:140px!important;max-width:100%!important;box-sizing:border-box!important;
  height:38px!important;min-height:38px!important;max-height:38px!important;
  background:rgba(236,238,244,.12)!important;border:1px solid rgba(255,255,255,.18)!important;
  color:rgba(255,255,255,.95)!important;border-radius:8px!important;padding:6px 10px!important;
  font-size:11.5px!important;line-height:1.3!important;
}
html body #app.scorepage.sc4 #sctl .sccue .rgov .rgsl input[type=range]{width:110px!important;height:18px!important;accent-color:var(--acc,#7f9cc4)!important}
html body #app.scorepage.sc4 #sctl .sccue .rgov .pill{height:28px!important;padding:0 11px!important;font-size:11.5px!important}
/* the title keeps clear of the row */
html body #app.scorepage.sc4 #sctl .sccue.on > b{-webkit-line-clamp:2}

/* ===== CINEMAKER v48.32 — controls on the cue, sliders stacked ===== */
/* 1 · the hover pop-up retires */
html body #app.scorepage.sc4 #cuepop{display:none!important}
/* 2 · M · S · takes · lift · key·bpm sit at the bottom-left of the cue, always visible */
html body #app.scorepage.sc4 #sctl .sccue .ctop{
  opacity:1!important;visibility:visible!important;pointer-events:auto!important;
  left:10px!important;right:auto!important;top:auto!important;bottom:8px!important;
  display:flex!important;align-items:center!important;gap:5px!important;
  background:rgba(18,21,26,.72)!important;border:1px solid rgba(255,255,255,.14)!important;
  border-radius:8px!important;padding:3px 6px!important;height:30px!important;z-index:6!important;
  transform:none!important;transition:none!important;
}
html body #app.scorepage.sc4 #sctl .sccue .ctop button,
html body #app.scorepage.sc4 #sctl .sccue .ctop .sglift{
  height:22px!important;min-width:22px!important;padding:0 7px!important;font-size:11px!important;
  background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.16)!important;
  color:rgba(255,255,255,.88)!important;border-radius:6px!important;cursor:pointer;
}
html body #app.scorepage.sc4 #sctl .sccue .ctop button.on{
  background:var(--acc,#7f9cc4)!important;border-color:var(--acc,#7f9cc4)!important;color:#0e1116!important;
}
html body #app.scorepage.sc4 #sctl .sccue .ctop .sckb,
html body #app.scorepage.sc4 #sctl .sccue .ctop i{font-style:normal;opacity:.6;font-size:10.5px;padding-left:2px}
/* 3 · the overlay row starts after those controls */
html body #app.scorepage.sc4 #sctl .sccue .rgov{left:calc(18px + var(--ctopw,215px))!important}
/* 4 · WEIGHT and WEIRD stacked in one narrow column */
html body #app.scorepage.sc4 #sctl .rgov .rgslcol{
  display:flex!important;flex-direction:column!important;gap:3px!important;flex:0 0 auto!important;
}
html body #app.scorepage.sc4 #sctl .rgov .rgslcol .rgsl{display:flex;align-items:center;gap:6px}
html body #app.scorepage.sc4 #sctl .rgov .rgslcol .rgsl small{width:44px;font-size:9px;letter-spacing:.07em;opacity:.6}
html body #app.scorepage.sc4 #sctl .rgov .rgslcol input[type=range]{width:104px!important;height:14px!important}

/* ===== CINEMAKER v48.33 — controls only on the selected cue ===== */
/* an unselected cue is waveform and its title, nothing else */
html body #app.scorepage.sc4 #sctl .sccue:not(.on) .ctop,
html body #app.scorepage.sc4 #sctl .sccue:not(.on) .rgov,
html body #app.scorepage.sc4 #sctl .sccue:not(.on) .tkbadge,
html body #app.scorepage.sc4 #sctl .sccue:not(.on) .cmute{display:none!important}
/* the capsule clears the warp band at the foot of the block */
html body #app.scorepage.sc4 #sctl .sccue.on .ctop{
  bottom:max(18px,calc(10% + 8px))!important;
}
html body #app.scorepage.sc4 #sctl .sccue.on .rgov{
  bottom:max(18px,calc(10% + 8px))!important;
}
/* and neither of them ever covers the level line's own strip */
html body #app.scorepage.sc4 #sctl .sccue.on .twband{z-index:7}

/* ===== CINEMAKER v48.34 — the ruler follows the zoom ===== */
html body #app.scorepage.sc4 #scruler span{
  position:absolute;top:0;transform:translateX(-50%);
  font-size:10px;letter-spacing:.02em;font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.5);white-space:nowrap;pointer-events:none;padding:0 3px;
}
html body #app.scorepage.sc4 #scruler span:first-child{transform:none}
html body #app.scorepage.sc4 #scruler .rtick{
  position:absolute;top:2px;width:1px;height:5px;background:rgba(255,255,255,.18);pointer-events:none;
}
html body #app.scorepage.sc4 #scruler{overflow:hidden}

/* ===== CINEMAKER v48.35 — one overlay at a time ===== */
/* a drawn region whose cue is already on the lane never draws its own furniture */
html body #app.scorepage.sc4 #sctl .scdraw.sgwork .rgov .rgrow,
html body #app.scorepage.sc4 #sctl .scdraw.sgwork .rgov .rgsty{opacity:.35;pointer-events:none}
/* the writing / loading sweep owns the block until it can really be played */
html body #app.scorepage.sc4 #sctl .sccue.sgwriting .wav,
html body #app.scorepage.sc4 #sctl .sccue.sgloading .wav,
html body #app.scorepage.sc4 #sctl .sccue.sgwriting canvas.wav,
html body #app.scorepage.sc4 #sctl .sccue.sgloading canvas.wav{opacity:.18!important}
html body #app.scorepage.sc4 #sctl .sccue.sgwriting .ctop,
html body #app.scorepage.sc4 #sctl .sccue.sgloading .ctop,
html body #app.scorepage.sc4 #sctl .sccue.sgwriting .rgov,
html body #app.scorepage.sc4 #sctl .sccue.sgloading .rgov{display:none!important}

/* ===== v48.37 — the pin's timecode belongs to the SELECTED block (2026-09-18) ===== */
html body #app.scorepage.sc4 #sctl .sccue .ckf em{display:none!important}
html body #app.scorepage.sc4 #sctl .sccue.hasrg .ckf em{display:none!important}
html body #app.scorepage.sc4 #sctl .sccue.on .ckf em,
html body #app.scorepage.sc4 #sctl .sccue.on.hasrg .ckf em{
  display:block!important;
  left:6px!important;top:7px!important;
  padding:2px 5px!important;border-radius:4px!important;
  background:rgba(12,14,18,.62)!important;
  font:600 9px/1 "Inter",system-ui,sans-serif!important;font-style:normal!important;
  color:#fff!important;letter-spacing:.02em!important;
  text-shadow:0 1px 2px rgba(0,0,0,.9)!important;pointer-events:none!important;z-index:8!important;
}
html body #app.scorepage.sc4 #sctl .sccue.on .ckf{z-index:7!important}

/* ===== v48.37 — the STYLE title gets the width of the block ===== */
html body #app.scorepage.sc4 #sctl .sccue > b{
  left:8px!important;right:26px!important;-webkit-line-clamp:3!important;
}
html body #app.scorepage.sc4 #sctl .sccue.sgready > b{-webkit-line-clamp:3!important}
html body #app.scorepage.sc4 #sctl .sccue.on > b{right:74px!important}

/* ===== v48.37 — the composer's prompt is bounded, the action row never floats over it ===== */
html body #app.scorepage.sc4 #s5quick{overflow-x:hidden!important}
html body #app.scorepage.sc4 #s5quick .stpv{min-height:0!important}
html body #app.scorepage.sc4 #s5quick .stpv pre{
  max-height:min(34vh,240px)!important;min-height:90px!important;
  overflow:auto!important;overflow-x:hidden!important;
  white-space:pre-wrap!important;overflow-wrap:anywhere!important;
  scrollbar-width:thin;
}
html body #app.scorepage.sc4 #s5quick .s5qacts{
  flex-wrap:wrap!important;overflow:visible!important;
  background:var(--pnl,#14161c)!important;
  box-shadow:0 -10px 14px -8px rgba(0,0,0,.65)!important;
}
html body #app.scorepage.sc4 #s5quick .s5qacts > *{
  min-width:0!important;flex:1 1 30%!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  font-size:12px!important;padding:0 8px!important;
}

/* ===== v48.38 — the pin's timecode sits ABOVE the block, and the ✕ is a real button ===== */
html body #app.scorepage.sc4 #sctl .sccue.on:not(.submitted):not(.running):not(.sgwriting):not(.sgloading){
  overflow:visible!important;z-index:12!important;
}
html body #app.scorepage.sc4 #sctl .sccue.on .ckf em,
html body #app.scorepage.sc4 #sctl .sccue.on.hasrg .ckf em{
  display:block!important;
  top:-16px!important;left:50%!important;transform:translateX(-50%)!important;
  padding:1px 5px!important;border-radius:4px!important;
  background:rgba(10,12,16,.88)!important;border:1px solid rgba(255,255,255,.15)!important;
  font:600 9px/1.35 "Inter",system-ui,sans-serif!important;font-style:normal!important;
  color:rgba(255,255,255,.92)!important;letter-spacing:.02em!important;
  text-shadow:none!important;pointer-events:none!important;z-index:20!important;
}
html body #app.scorepage.sc4 #sctl .sccue.on .ckf{z-index:9!important;overflow:visible!important}
/* the title keeps the whole block to itself again */
html body #app.scorepage.sc4 #sctl .sccue.on > b{top:7px!important}

/* the region's ✕ */
html body #app.scorepage.sc4 #sctl .scdraw.pinned .rgxb{
  position:absolute!important;top:2px!important;right:3px!important;
  width:20px!important;height:20px!important;padding:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  background:rgba(10,12,16,.62)!important;border:1px solid rgba(255,255,255,.22)!important;
  border-radius:6px!important;color:rgba(255,255,255,.85)!important;
  font-size:11px!important;line-height:1!important;cursor:pointer!important;
  z-index:40!important;pointer-events:auto!important;
}
html body #app.scorepage.sc4 #sctl .scdraw.pinned .rgxb:hover{
  background:rgba(200,90,90,.72)!important;border-color:rgba(255,160,160,.6)!important;color:#fff!important;
}
/* the keyframe bar makes room for it */
html body #app.scorepage.sc4 #sctl .scdraw.pinned .rgov{right:30px!important}

/* ===== v48.44 — a block that is working is ONLY the gradient (2026-09-18) ===== */
html body #app.scorepage.sc4 #sctl .sccue.sgwriting > b,
html body #app.scorepage.sc4 #sctl .sccue.sgloading > b,
html body #app.scorepage.sc4 #sctl .sccue.sgwriting .ckf,
html body #app.scorepage.sc4 #sctl .sccue.sgloading .ckf,
html body #app.scorepage.sc4 #sctl .sccue.sgwriting .wav,
html body #app.scorepage.sc4 #sctl .sccue.sgloading .wav,
html body #app.scorepage.sc4 #sctl .sccue.sgwriting canvas,
html body #app.scorepage.sc4 #sctl .sccue.sgloading canvas,
html body #app.scorepage.sc4 #sctl .sccue.sgwriting svg,
html body #app.scorepage.sc4 #sctl .sccue.sgloading svg,
html body #app.scorepage.sc4 #sctl .sccue.sgwriting .twband,
html body #app.scorepage.sc4 #sctl .sccue.sgloading .twband,
html body #app.scorepage.sc4 #sctl .sccue.sgwriting .tkpick,
html body #app.scorepage.sc4 #sctl .sccue.sgloading .tkpick,
html body #app.scorepage.sc4 #sctl .sccue.sgwriting .tkbadge,
html body #app.scorepage.sc4 #sctl .sccue.sgloading .tkbadge,
html body #app.scorepage.sc4 #sctl .sccue.sgwriting .cmute,
html body #app.scorepage.sc4 #sctl .sccue.sgloading .cmute,
html body #app.scorepage.sc4 #sctl .sccue.sgwriting .ctop,
html body #app.scorepage.sc4 #sctl .sccue.sgloading .ctop,
html body #app.scorepage.sc4 #sctl .sccue.sgwriting .rgov,
html body #app.scorepage.sc4 #sctl .sccue.sgloading .rgov,
html body #app.scorepage.sc4 #sctl .scdraw.pinned.scwait .rgcue,
html body #app.scorepage.sc4 #sctl .scdraw.pinned.scwait .rgsty,
html body #app.scorepage.sc4 #sctl .scdraw.pinned.scwait .rgrow,
html body #app.scorepage.sc4 #sctl .scdraw.pinned.scwait > b,
html body #app.scorepage.sc4 #sctl .scdraw.pinned.scwait .mlkf{display:none!important;opacity:0!important}
/* the block keeps its own clip while it works, so nothing can hang outside it */
html body #app.scorepage.sc4 #sctl .sccue.sgwriting,
html body #app.scorepage.sc4 #sctl .sccue.sgloading{overflow:hidden!important}
/* one quiet caption, nothing else */
html body #app.scorepage.sc4 #sctl .sccue.sgwriting .sgcap,
html body #app.scorepage.sc4 #sctl .sccue.sgloading .sgcap,
html body #app.scorepage.sc4 #sctl .scdraw.pinned.scwait .sgcap{
  display:block!important;position:absolute!important;left:10px!important;top:8px!important;
  font:600 10px/1 "Inter",system-ui,sans-serif!important;letter-spacing:.08em!important;
  text-transform:uppercase!important;color:rgba(255,255,255,.62)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.6)!important;pointer-events:none!important;z-index:30!important;
}
html body #app.scorepage.sc4 #sctl .sccue:not(.sgwriting):not(.sgloading) .sgcap,
html body #app.scorepage.sc4 #sctl .scdraw.pinned:not(.scwait) .sgcap{display:none!important}

/* ===== v48.47 — the ⇥ Tail pill on the selected cue ===== */
html body #app.scorepage.sc4 #sctl .sccue .sctailpill{
  display:inline-flex!important;align-items:center;gap:6px;
  height:30px!important;padding:0 12px!important;
  background:rgba(236,238,244,.12)!important;border:1px solid rgba(255,255,255,.22)!important;
  border-radius:999px!important;color:rgba(255,255,255,.92)!important;
  font-size:12px!important;cursor:pointer!important;pointer-events:auto!important;z-index:20!important;
}
html body #app.scorepage.sc4 #sctl .sccue .sctailpill:hover{
  background:rgba(127,156,196,.55)!important;border-color:rgba(160,190,230,.7)!important;color:#fff!important;
}
html body #app.scorepage.sc4 #sctl .sccue .sctailpill i{font-style:normal;opacity:.8}

/* ===== v48.48 — ⇥ TAIL and the health chip in the Score toolbar ===== */
html body #app.scorepage .sczoom .sctailbtn{
  display:inline-flex!important;align-items:center;justify-content:center;
  height:28px!important;padding:0 12px!important;margin-left:10px!important;
  background:rgba(127,156,196,.24)!important;border:1px solid rgba(160,190,230,.55)!important;
  border-radius:999px!important;color:#fff!important;
  font:700 11px/1 "Inter",system-ui,sans-serif!important;letter-spacing:.06em!important;
  cursor:pointer!important;pointer-events:auto!important;white-space:nowrap!important;
}
html body #app.scorepage .sczoom .sctailbtn:hover{background:rgba(127,156,196,.62)!important}
html body #app.scorepage .sczoom .schealth{
  margin-left:10px!important;font:600 10px/1 "Inter",system-ui,sans-serif!important;
  letter-spacing:.05em!important;color:rgba(255,255,255,.45)!important;white-space:nowrap!important;
}

/* ============================================================================
   v48.64 — the consoles give back the space they were wasting (2026-09-19)
   Ship 1 part B: Philip's screenshots showed both consoles (#s5left, #s5quick)
   needing scroll to reach controls that were pushed down by generous default
   spacing — header chrome on every fold, gaps between folds, and a few
   min-heights bigger than the content inside them ever needed. None of it is
   moved or hidden (nothing Philip relies on disappears) — every fold, gap and
   box is just measurably tighter, so more of the console fits without
   scrolling. Appended after everything else so it wins on source order at
   equal specificity; nothing existing is edited.
   ========================================================================= */
html body #app.scorepage.sc4 .scbody.s5 > #s5left,
html body #app.scorepage.sc4 .scbody.s5 #s5mid > #s5left{gap:5px!important}
html body #app.scorepage.sc4 .scbody.s5 > #s5mid > #s5quick,
html body #app.scorepage.sc4 .scbody.s5 #s5mid > #s5quick{gap:5px!important;padding-top:4px!important}
html body #app.scorepage.sc4 .s5fold > .s5fh{padding:4px 6px!important;margin:0 0 3px!important}
html body #app.scorepage.sc4 .stpv{min-height:64px!important}
html body #app.scorepage.sc4 .s5foot .stpv:not(.s5closed) pre{max-height:120px!important;min-height:56px!important}
html body #app.scorepage.sc4 #sctl .rgov .rgslcol{gap:2px!important}
html body #app.scorepage.sc4 #sctl .rgov .rgslcol .rgsl{gap:4px!important}

/* ============================================================================
   v48.65 — the consoles get real width, and one button size across them (2026-09-19)
   Two things Philip named directly, both traced to code (not guessed):
   (1) "widen the consoles" — the s5wide player column
   (#s5mid > grid-template-columns) was minmax(560px,2.3fr) against
   minmax(330px,1fr) for each console: the player's own share was over 2x
   either console's, which is exactly the oversized-box-with-empty-space
   Philip is looking at even after v48.63 sized the video itself to fit — the
   player's ALLOCATED grid width was still far bigger than any video needs.
   Now the three columns are much closer to even, with more of that width
   going to #s5left/#s5quick.
   (2) "optimize button sizes... uniform design language" — this app already
   has one house button standard (.pill: 34px / .pill.sm: 28px, radius 10/9px,
   flex-centered — defined once, line 6534), but a long run of Score-room-only
   overrides shrank pills inside these two consoles down to 24–30px with
   5–8px padding and 10–11.5px fonts, each one slightly different. This
   restores the app's OWN existing standard inside #s5left/#s5quick only —
   nothing outside them, and not the small inline chips that live in the
   timeline (.rgov, .ctop, #cuepop), which are deliberately compact and
   untouched. Nothing moved, nothing renamed — same buttons, one size.
   ========================================================================= */
html.s5wide body #app.scorepage.sc4 .scbody.s5 > #s5mid{grid-template-columns:minmax(400px,1.5fr) minmax(400px,1.3fr) minmax(400px,1.5fr)!important}

html body #app.scorepage.sc4 #s5left .pill,
html body #app.scorepage.sc4 #s5left button.pill,
html body #app.scorepage.sc4 #s5left select.pill,
html body #app.scorepage.sc4 #s5left .sgartic button,
html body #app.scorepage.sc4 #s5quick .pill,
html body #app.scorepage.sc4 #s5quick button.pill,
html body #app.scorepage.sc4 #s5quick select.pill,
html body #app.scorepage.sc4 #s5quick .sgartic button{
  height:34px!important;min-height:34px!important;padding:0 14px!important;
  border-radius:10px!important;font-size:12.5px!important;font-weight:600!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
}

/* ================= v48.66 — TIDY CONSOLES · COLORCODE · NO SCROLL · CLEAN DETACHED PLAYER ·
   FULL-WIDTH KEYFRAME BAR · TWO THICKER SFX LANES (2026-09-19)
   Philip: "tidy up the consoles, no need for the controls to be so wide. and colorcode. i dont want any
   scrolling. clean up and make it make sense. also a detached player should be just the video player, no
   tracks underneath etc. Remove the 'cue 0:00-0:30' in the left corner. make the keyframe bar the width of
   the player. put the timecode ticker to the bottom right and move Mute Picture to console. and i need two
   SFX lanes. make sure generated SFX volume automatically lowers to 20%. and make SFX lanes 30% thicker." ================= */

/* 1 · voice/take tabs stop stretching full-width */
html body #app.scorepage.sc4 .scbody.s5 #s5mid .voxb{flex:0 1 auto!important;padding:0 14px!important}
html body #app.scorepage.sc4 .scbody.s5 #s5mid .stvoxrow{justify-content:flex-start!important;flex-wrap:wrap!important}

/* 2 · a touch more density toward zero scrolling in the band (on top of the v48.64 pass) */
html.s5wide body #app.scorepage.sc4 .scbody.s5{grid-template-rows:var(--bandh,62vh) 8px minmax(0,1fr)!important}
html body #app.scorepage.sc4 .scbody.s5 #s5mid #s5left .stf,
html body #app.scorepage.sc4 .scbody.s5 #s5mid #s5quick .stf{margin-bottom:6px!important}
html body #app.scorepage.sc4 .scbody.s5 #s5mid #s5left .strow,
html body #app.scorepage.sc4 .scbody.s5 #s5mid #s5quick .strow{gap:6px!important}

/* 3 · a detached player shows only the picture — no moodlane, no takes strip underneath */
#s5float .sc4c>*:not(.scmon){display:none!important}
#s5float .sc4c{gap:0!important}

/* 4 · the CUE label is gone; the keyframe bar runs the full width of the player */
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .moodlanewrap .lab{display:none!important}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .moodlanewrap{margin:0!important;padding:0!important;width:100%!important}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .moodlane{width:100%!important}

/* 5 · the timecode sits bottom-right of the picture (moved in the DOM by the v48.66 script) */
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid .scmon{position:relative!important}
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid #sctc.s5tcbr{position:absolute!important;left:auto!important;top:auto!important;right:10px!important;bottom:8px!important;z-index:5;background:rgba(0,0,0,.55)!important;padding:2px 8px!important;border-radius:6px!important;font-size:11px!important;line-height:1.4!important}

/* 6 · mute-picture, moved into the left console */
#s5left .s5mutewrap{display:flex!important;align-items:center;gap:6px;order:-1;margin:0 0 8px;font-size:11.5px}

/* 7 · two SFX lanes again, 30% thicker (38px → 50px) */
html body #app.scorepage.sc4 .sclane.sfx[data-s="2"]{display:block!important}
html body #app.scorepage.sc4 #sctl > #scbot .sclane.sfx{height:50px!important;min-height:50px!important;max-height:50px!important}
#lnrail .lnrow.sfx2{display:flex!important}

/* ================= v48.70 → v48.71 — THE CONSOLES, REDESIGNED FROM THE GROUND UP (2026-09-19)
   v48.71 (same day, this block rewritten in place): Philip — "I never use these" (the SELECTED CUE row) · "move the Export
   button down to the bar below (where Tidy up etc live)" · "remove the zoom slider" · "fully redesign the left console,
   optimize usage of space". The left console is now four short rows: VOICE | MODEL | MASTER · KEY BPM MODE | STYLE
   WEIGHT | WEIRDNESS · Reference | Effects | Wheels | SFX key · mute picture | credits | Start over. The SELECTED CUE
   row is gone (Delete removes a cue; M/S live on the lanes; the block's hover strip has the rest). Export ▾ lives in
   the bar under the timeline; the zoom slider is gone (⌘ + scroll zooms).
   Philip: "both left and right consoles are a complete mess from all our iterations. redesign the consoles from
   ground up and make them user friendly."
   One visual grammar for both consoles, on top of the same DOM (no element moves — every painter keeps its hooks):
   · panels: quiet surface, 14 px padding, no inner boxes, no coloured edges, no fold chrome.
   · every group is a LABEL (10 px caps, muted) over its control — never a header bar.
   · every control is 34 px, radius 8, one border colour; segmented rows (voice, articulation) share one style.
   · one primary action per console (accent): ✦ Create on the right (settings → words → create); the left keeps
     what acts on the selected cue (Extend · Add vocals · Stems). "Generate music" and the CUE ACTIONS Create — the
     same action — are gone. ⋯ More/Less is gone: everything is always on screen (the sliders included).
   LEFT — THE CUE, four rows on a 4-column grid:  VOICE | ACTIONS  ·  KEY BPM MODE | MODEL MASTER  ·
   WEIGHT WEIRDNESS | Reference Wheels Effects Sound-FX  ·  mute picture | Export Start-over credits.
   RIGHT — THE BRIEF:  STYLE (+ Boost) · ARTICULATION · EXCLUDE · TIMING NOTES (fills) · Watch the scene / Create. ================= */

/* ---- 0 · the surfaces ---- */
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid > #s5left,
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid > #s5quick{background:var(--pnl)!important;border:1px solid var(--line)!important;border-radius:14px!important;box-shadow:none!important;padding:14px 16px!important;overflow:auto!important;min-height:0}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left [hidden],html.s5wide body #app.scorepage.sc4 #s5mid #s5quick [hidden]{display:none!important}
/* v48.66's coloured edges and the fold chrome are gone */
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .stacts,html.s5wide body #app.scorepage.sc4 #s5mid #s5left .s5fold,html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sc4acts,html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sfxkey,html.s5wide body #app.scorepage.sc4 #s5mid #s5left .stcol,html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sc4master,html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .s5fold,html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .stpv,html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .s5qacts{border:0!important;box-shadow:none!important;background:transparent!important;padding:0!important;margin:0!important;border-left:0!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left [style*="border-left"]{border-left:0!important}

/* ---- 1 · one label style ---- */
html.s5wide body #app.scorepage.sc4 #s5mid #s5left small,html.s5wide body #app.scorepage.sc4 #s5mid #s5quick small.s5sub,html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .sgartic > small,html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .stpv > small,html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sfxkey > b,html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sc4master .mrow > .crumb,html.s5wide body #app.scorepage.sc4 #s5mid #s5left .s5lbl{display:flex!important;align-items:center;gap:8px;font:600 10px/1 Inter,"Helvetica Neue",system-ui,sans-serif!important;letter-spacing:.1em!important;text-transform:uppercase!important;color:var(--mut)!important;opacity:1!important;margin:0 0 6px!important;padding:0!important;min-height:0!important;background:transparent!important;border:0!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick small.s5sub > em.crumb{margin-left:auto;font:500 10.5px/1 Inter,system-ui,sans-serif;letter-spacing:0;text-transform:none;color:var(--dim)}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick small.s5sub > .s5boost{margin-left:6px}

/* ---- 2 · one control style ---- */
html.s5wide body #app.scorepage.sc4 #s5mid #s5left select,html.s5wide body #app.scorepage.sc4 #s5mid #s5left input[type=number],html.s5wide body #app.scorepage.sc4 #s5mid #s5left input[type=password],html.s5wide body #app.scorepage.sc4 #s5mid #s5quick input,html.s5wide body #app.scorepage.sc4 #s5mid #s5quick select{height:34px!important;min-height:34px!important;padding:0 10px!important;border-radius:8px!important;background:var(--well)!important;border:1px solid var(--line2)!important;color:var(--txt)!important;font:500 12.5px/1 Inter,system-ui,sans-serif!important;box-shadow:none!important;width:100%;box-sizing:border-box}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick textarea,html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .stpv pre{padding:8px 10px!important;border-radius:8px!important;background:var(--well)!important;border:1px solid var(--line2)!important;color:var(--txt)!important;font:500 12.5px/1.45 Inter,system-ui,sans-serif!important;box-shadow:none!important;width:100%;box-sizing:border-box;resize:none!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .pill,html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .pill,html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sc4x > summary,html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sc4fh.s5keepfh,html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sfxkey > b{height:34px!important;min-height:34px!important;padding:0 14px!important;border-radius:8px!important;font:600 12.5px/1 Inter,system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px;background:var(--pnl2)!important;border:1px solid var(--line2)!important;color:var(--txt)!important;box-shadow:none!important;cursor:pointer;white-space:nowrap;width:auto!important;flex:0 0 auto!important;margin:0!important;opacity:1!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .pill:hover,html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .pill:hover,html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sc4x > summary:hover,html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sc4fh.s5keepfh:hover,html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sfxkey > b:hover{border-color:var(--acc)!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .pill.go,html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .s5qcreate{background:var(--acc)!important;border-color:var(--acc)!important;color:#fff!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .pill.go:hover,html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .s5qcreate:hover{filter:brightness(1.1)}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .pill.ghost,html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .pill.ghost,html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .s5boost{background:transparent!important;border-color:transparent!important;color:var(--mut)!important;padding:0 8px!important;height:26px!important;min-height:26px!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .pill.ghost:hover,html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .pill.ghost:hover{color:var(--txt)!important;border-color:transparent!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sc4fh.s5keepfh > i,html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sc4fh.s5keepfh > span{font:inherit!important;color:inherit!important;letter-spacing:0!important;text-transform:none!important;margin:0!important;width:auto!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sfxkey > b{margin:0!important;letter-spacing:0!important;text-transform:none!important;font:600 12.5px/1 Inter,system-ui,sans-serif!important;color:var(--txt)!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sfxkey > b::before{content:'♪ '}
/* segmented rows: voice · articulation */
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .stvoxrow,html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .sgartic{display:inline-flex!important;align-items:center;gap:2px!important;padding:3px!important;background:var(--well)!important;border:1px solid var(--line)!important;border-radius:9px!important;margin:0!important;width:auto!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .sgartic{flex-wrap:wrap}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .sgartic > small{width:100%;margin:0 0 6px!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .sgartic{background:transparent!important;border:0!important;padding:0!important;display:flex!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .sgartic > button{height:28px!important;min-height:28px!important;padding:0 14px!important;border-radius:6px!important;border:1px solid var(--line)!important;background:var(--well)!important;color:var(--mut)!important;font:600 12px/1 Inter,system-ui,sans-serif!important;box-shadow:none!important;margin:0 4px 0 0!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .voxb,html.s5wide body #app.scorepage.sc4 #s5mid #s5left .stvoxrow .pill.voxonly{height:28px!important;min-height:28px!important;padding:0 14px!important;border-radius:6px!important;border:0!important;background:transparent!important;color:var(--mut)!important;font:600 12px/1 Inter,system-ui,sans-serif!important;box-shadow:none!important;flex:0 0 auto!important;margin:0!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .voxb.on,html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .sgartic > button.on{background:var(--pnl2)!important;color:var(--txt)!important;border-color:var(--line2)!important;box-shadow:0 1px 2px rgba(0,0,0,.35)!important}
/* ranges */
html.s5wide body #app.scorepage.sc4 #s5mid #s5left input[type=range]{width:100%;margin:8px 0 0}

/* ---- 3 · LEFT — the cue's settings, four rows on a 4-column grid (v48.71) ---- */
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid > #s5left{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-auto-rows:max-content;align-content:start;column-gap:16px!important;row-gap:14px!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left #s5top,html.s5wide body #app.scorepage.sc4 #s5mid #s5left .stcol.left,html.s5wide body #app.scorepage.sc4 #s5mid #s5left #s5top .s5r4,html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sc4acts{display:contents!important}
/* row 1 · voice · model · master */
html.s5wide body #app.scorepage.sc4 #s5mid #s5left #s5top .s5r1{grid-column:1/3;grid-row:1;display:block!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left #s5top .s5r1::before{content:'Voice';display:block;font:600 10px/1 Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin:0 0 6px}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .scleft > .stcol.left .sc4model,html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sc4model{grid-column:3;grid-row:1;display:block!important;margin:0!important;width:auto!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sc4model > select{max-width:none!important;flex:none!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .scleft > .sc4master{grid-column:4;grid-row:1;display:block!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sc4master .mrow{display:block!important;margin:0!important;padding:0!important;height:auto!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sc4master .mrow > input[type=range]{margin:12px 0 0;width:calc(100% - 44px)}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sc4master .mrow > em{float:right;margin-top:11px;font:600 11px/1 Inter,system-ui,monospace;color:var(--mut)}
/* row 2 · key · bpm · mode · style weight · weirdness */
html.s5wide body #app.scorepage.sc4 #s5mid #s5left #s5top .s5r2{grid-column:1/3;grid-row:2;display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,.7fr) minmax(0,1.6fr);gap:10px!important;align-items:end}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left #s5top .s5r2 > label{display:block!important;margin:0!important;padding:0!important;width:auto!important;flex:none!important;max-width:none!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left #s5top .s5r4 > .strow{grid-column:3/5;grid-row:2;display:grid!important;grid-template-columns:1fr 1fr;gap:16px!important;margin:0!important;align-self:end}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left #s5top .s5r4 .strow > *{display:block!important;margin:0!important;padding:0!important;width:auto!important;min-width:0}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left #s5top .s5r4 input[type=range]{width:100%!important;min-width:0!important;margin:10px 0 0!important}
/* row 3 · the drawers: reference · effects · wheels · sfx key */
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .s5refb{grid-column:1;grid-row:3;justify-self:stretch;margin-top:4px!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .scleft > .sc4fh:has(+ .sc4fx){display:inline-flex!important;grid-column:2;grid-row:3;justify-self:stretch;margin-top:4px!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .scleft > .stwchip{grid-column:3;grid-row:3;justify-self:stretch;margin-top:4px!important;font-size:0!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .scleft > .stwchip::before{content:attr(data-w);font-size:12.5px;font-weight:600}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sfxkey{grid-column:4;grid-row:3;justify-self:stretch;margin-top:4px!important;display:block!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sfxkey > b{width:100%;box-sizing:border-box;font-size:0!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sfxkey > b::before{content:'♪ SFX key';font-size:12.5px;font-weight:600}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sfxkey.s5open{grid-column:1/5;grid-row:5;justify-self:stretch}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sfxkey.s5open > b{margin-bottom:8px!important;width:auto}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sfxkey.s5open > small{display:block!important;margin:0 0 6px!important;text-transform:none!important;letter-spacing:0!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sfxkey.s5open > .row{display:flex!important;gap:8px;align-items:center}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sfxkey:not(.s5open) > *:not(b){display:none!important}
/* row 4 · mute picture · credits · start over */
html.s5wide body #app.scorepage.sc4 #s5mid #s5left > .s5mutewrap{grid-column:1/3;grid-row:4;align-self:center;display:flex!important;align-items:center;gap:8px;margin:0!important;font:500 12px/1 Inter,system-ui,sans-serif;color:var(--mut)}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sc4acts > .s5cred{grid-column:3;grid-row:4;align-self:center;justify-self:end;font:500 11px/1 Inter,system-ui,sans-serif;color:var(--dim);margin:0!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sc4acts > button.screset{grid-column:4;grid-row:4;justify-self:stretch;align-self:center}
/* what opens below */
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .scleft > .sc4fx{grid-column:1/5;grid-row:6}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .scleft:not(.wheelsoff) > .stcol.right{grid-column:1/5;grid-row:7;display:grid!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .scleft.wheelsoff > .stcol.right{display:none!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sc4refchip{grid-column:1/5;grid-row:8}

/* ---- 4 · RIGHT — the brief ---- */
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid > #s5quick{display:flex!important;flex-direction:column!important;gap:14px!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick label.stf{display:block!important;width:100%;flex:0 0 auto!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick label.stf:has(#ststyle){display:flex!important;flex-direction:column}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick #ststyle{height:76px!important;min-height:76px!important;max-height:76px!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .sgartic{margin-top:12px!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .stpv{flex:1 1 60px!important;min-height:60px!important;display:flex!important;flex-direction:column;position:relative}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .stpv > small{flex:0 0 auto}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .stpv pre{flex:1 1 auto;min-height:0;overflow:auto;margin:0!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .s5qacts{display:flex!important;gap:8px!important;position:static!important;padding:0!important;margin:0!important;border:0!important;background:transparent!important;flex:0 0 auto!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .s5qacts > .s5qwatch{flex:0 0 auto!important;height:36px!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .s5qacts > .s5qcreate{flex:1 1 auto!important;height:36px!important;font-size:13px!important}

html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sfxkey:not(.s5open) > *:not(b){display:none!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .stpv > small > .pill,html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .stpv > small > button{display:none!important}
/* ---- 5 · what is gone (last, so nothing below re-shows it) ---- */
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .s5fold > .s5fh,html.s5wide body #app.scorepage.sc4 #s5mid #s5left .scleft > .sc4fh:not(.s5keepfh),html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sc4fh.s5advh,html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .s5fold > .s5fh,html.s5wide body #app.scorepage.sc4 #s5mid #s5left > button.s5moreb,html.s5wide body #app.scorepage.sc4 #s5mid #s5left > #s5ltog,html.s5wide body #app.scorepage.sc4 #s5mid #s5left .stacts,html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sc4acts > details.sc4x,html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sc4acts > button.scgen.sc4pxy,html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sc4stem > em.crumb,html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sc4model > em.crumb,html.s5wide body #app.scorepage.sc4 #s5mid #s5left #s5top .s5r3{display:none!important}

/* ---- 6 · the bar under the timeline: no zoom slider (⌘ + scroll zooms), Export lives here (v48.71) ---- */
html body #app.scorepage.sc4 .sczoom > span.crumb:first-child,html body #app.scorepage.sc4 .sczoom > input[type=range]:not(.sclh input){display:none!important}
html body #app.scorepage.sc4 .sczoom{display:flex!important;align-items:center;gap:8px;justify-content:flex-end}
html body #app.scorepage.sc4 .sczoom > .sclh{margin-right:auto}
html body #app.scorepage.sc4 .sczoom > details.s5xp{position:relative;margin:0}
html body #app.scorepage.sc4 .sczoom > details.s5xp > summary{list-style:none;cursor:pointer}
html body #app.scorepage.sc4 .sczoom > details.s5xp > summary::-webkit-details-marker{display:none}
html body #app.scorepage.sc4 .sczoom > details.s5xp[open] > .s5xpin{position:absolute;right:0;bottom:40px;z-index:60;display:flex;flex-direction:column;gap:4px;padding:6px;background:var(--pnl2);border:1px solid var(--line2);border-radius:10px;box-shadow:0 12px 30px -12px rgba(0,0,0,.7);min-width:220px}
html body #app.scorepage.sc4 .sczoom > details.s5xp[open] > .s5xpin > button{width:100%;justify-content:flex-start;background:transparent;border:1px solid transparent;color:var(--txt);height:32px;padding:0 12px;border-radius:8px;font:600 12.5px/1 Inter,system-ui,sans-serif;text-align:left;cursor:pointer;white-space:nowrap}
html body #app.scorepage.sc4 .sczoom > details.s5xp[open] > .s5xpin > button:hover{background:var(--well)}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .scleft > .sc4master,html.s5wide body #app.scorepage.sc4 #s5mid #s5left .scleft > .sc4master .mrow,html.s5wide body #app.scorepage.sc4 #s5mid #s5left .scleft > .sc4master label{border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;outline:0!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sfxkey{width:100%!important;max-width:none!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sfxkey > b{display:flex!important;width:100%!important;box-sizing:border-box}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sc4fh.s5keepfh > span{font-size:0!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sc4fh.s5keepfh > span::before{content:'Effects';font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sc4refchip{grid-column:2;grid-row:4;justify-self:stretch;align-self:center}
html.s5wide body #app.scorepage.sc4 #s5mid #s5left .sc4refchip > *{font-size:12.5px!important;letter-spacing:0!important;text-transform:none!important}
/* carried over from v48.69: the timecode sits above the CUE bar, not on it */
html.s5wide body #app.scorepage.sc4 .scbody.s5 #s5mid #sctc.s5tcbr{bottom:32px!important}

/* ================= v48.72 — the ENSEMBLE row, same grammar as ARTICULATION (2026-09-19) ================= */
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .sgens{display:flex!important;flex-wrap:wrap;align-items:center;gap:2px!important;padding:0!important;background:transparent!important;border:0!important;margin:10px 0 0!important;width:auto!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .sgens > small{width:100%;margin:0 0 6px!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .sgens > button{height:28px!important;min-height:28px!important;padding:0 12px!important;border-radius:6px!important;border:1px solid var(--line)!important;background:var(--well)!important;color:var(--mut)!important;font:600 12px/1 Inter,system-ui,sans-serif!important;box-shadow:none!important;margin:0 4px 4px 0!important;cursor:pointer}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .sgens > button.on{background:var(--pnl2)!important;color:var(--txt)!important;border-color:var(--line2)!important;box-shadow:0 1px 2px rgba(0,0,0,.35)!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick #ststyle{height:60px!important;min-height:60px!important;max-height:60px!important}
/* v48.73 — a sound block trims at its edges */
html body #app.scorepage.sc4 .sccue.sfxcue.s5edge{cursor:ew-resize!important}
html body #app.scorepage.sc4 .sccue.sfxcue.trimming{outline:1px solid var(--acc)!important;outline-offset:-1px}
html body #app.scorepage.sc4 .sccue.sfxcue::before,html body #app.scorepage.sc4 .sccue.sfxcue::after{content:'';position:absolute;top:0;bottom:0;width:8px;z-index:2}
html body #app.scorepage.sc4 .sccue.sfxcue::before{left:0}html body #app.scorepage.sc4 .sccue.sfxcue::after{right:0}

/* v48.74 — the REFERENCE row in the right console; the Lift-voice chip is gone */
html body #app.scorepage.sc4 .sglift{display:none!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .sgref{margin:10px 0 0!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .sgref > small{display:flex!important;align-items:center;gap:8px}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .sgref > small > em{font-style:normal;letter-spacing:0;text-transform:none;color:var(--txt);opacity:.9}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .sgref > small > .sgrefx{margin-left:auto;background:transparent;border:0;color:var(--mut);cursor:pointer;font-size:12px;padding:0 4px}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .sgref > small > .sgrefx:hover{color:var(--txt)}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .sgref > .sgrefr{display:flex;align-items:center;gap:10px}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .sgref > .sgrefr > span{font:500 11.5px/1 Inter,system-ui,sans-serif;color:var(--mut);flex:0 0 auto}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .sgref > .sgrefr > input[type=range]{flex:1 1 auto;margin:0}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .sgref > .sgrefr > b{font:600 11px/1 Inter,system-ui,monospace;color:var(--txt);flex:0 0 40px;text-align:right}
/* v48.74b — the right console fits the band again: articulation + ensemble share a row, the reference row is one line */
html.s5wide body #app.scorepage.sc4 #s5mid > #s5quick{gap:10px!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick label.stf:has(#ststyle){display:grid!important;grid-template-columns:auto minmax(0,1fr);column-gap:18px;row-gap:0;align-items:start}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick label.stf:has(#ststyle) > small.s5sub{grid-column:1/3}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick #ststyle{grid-column:1/3;height:56px!important;min-height:56px!important;max-height:56px!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .sgartic{grid-column:1;margin-top:10px!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .sgens{grid-column:2;margin-top:10px!important;flex-wrap:nowrap!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .sgens > button{padding:0 10px!important;font-size:11.5px!important;margin:0 3px 0 0!important;white-space:nowrap}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .sgref{grid-column:1/3;display:flex!important;align-items:center;gap:12px;margin-top:8px!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .sgref > small{margin:0!important;flex:0 0 auto;width:auto}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .sgref > .sgrefr{flex:1 1 auto}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .sgref > small > .sgrefx{margin-left:4px}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .stpv{min-height:44px!important;flex:1 1 44px!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .stpv pre{min-height:0}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .sgens{flex-wrap:wrap!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .sgens > small{width:100%;margin:0 0 6px!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .sgens > button{padding:0 8px!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick label.stf:has(#ststyle){grid-template-columns:250px minmax(0,1fr)!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick .sgartic{width:auto!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick label.stf:has(#ststyle) > small.s5sub{flex-wrap:nowrap!important}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick label.stf:has(#ststyle) > small{flex-wrap:nowrap!important;white-space:nowrap}
html.s5wide body #app.scorepage.sc4 #s5mid #s5quick label.stf:has(#ststyle) > small > *{flex:0 0 auto}

/* v48.77 — Download Effects lives in the Export menu; the monitor-bar original stays hidden like Download Score */
html body #app.scorepage.sc4 .scmonbar button.scsfxwav{display:none!important}