:root{
  --bg:#f3f6fc;--panel:#ffffff;--panel2:#f3f6fb;--card:#ffffff;--line:#e1e7f1;--text:#16203a;--mute:#52607c;
  --acc:#2563eb;--acc2:#1d4ed8;--soft:#e8f0ff;--softline:#cddcf9;--hover:#c5d6fb;--ok:#059669;--warn:#d97706;--bad:#dc2626;
  --pillbg:#dcfce7;--barbg:#e6ecf7;--esttext:#35508f;--emailbg:#f0f9ff;--emailline:#bae0f5;--kbdbg:#e8eefb;--ghost:#3b4768;
  --bannerbg:#fff4e0;--bannertext:#8a4b00;--bannerline:#ffd9a0;--coach1:#e8f0ff;--coach2:#f6f9ff;--coachline:#d6e3fb;
  --stage1:#eef3fc;--stage2:#e3eaf6;--empty1:#f6f9ff;--empty2:#e9f0fc;--tlbg:#c9d3e6;--tick:#cdd6e6;--scroll:#c9d3e6;
  --lane-v1:#d7e6ff;--lane-v2:#e4e7ee;--lane-v3:#ecebfa;--lane-t:#fdf0d4;--lane-a1:#d9f3e7;--lane-a2:#e6f7ef;
  --lbl-v1:#1d4ed8;--lbl-t:#92400e;--lbl-a:#047857;--recbg:#fff5f5;--recline:#fecaca;--recbtn:#dc2626;
  --vid:#3b82f6;--over:#8b5cf6;--aud:#10b981;--txt:#f59e0b;
  --r:10px;--shadow:0 1px 2px rgba(22,32,58,.06),0 4px 16px rgba(22,32,58,.06);color-scheme:light;
}
:root[data-theme=dark]{
  --bg:#0e1320;--panel:#161c2b;--panel2:#1d2538;--card:#1b2234;--line:#2a3550;--text:#e7ecf8;--mute:#b0bcd8;
  --acc:#4f8bff;--acc2:#6b9cff;--soft:#1f2d4f;--softline:#2f416d;--hover:#33477a;--ok:#34d399;--warn:#f5a524;--bad:#f87171;
  --pillbg:#12372a;--barbg:#26304a;--esttext:#a9c0f5;--emailbg:#14283a;--emailline:#245073;--kbdbg:#26304a;--ghost:#b8c4de;
  --bannerbg:#3a2a10;--bannertext:#ffd9a0;--bannerline:#6b4a14;--coach1:#1b2a4d;--coach2:#161c2b;--coachline:#2a3b66;
  --stage1:#141b2d;--stage2:#0c111d;--empty1:#161c2b;--empty2:#0f1523;--tlbg:#0b0f1a;--tick:#3a4766;--scroll:#3a4766;
  --lane-v1:#1d2f57;--lane-v2:#262c3a;--lane-v3:#2a2850;--lane-t:#3d3114;--lane-a1:#12392c;--lane-a2:#163f35;
  --lbl-v1:#8db3ff;--lbl-t:#f7c46a;--lbl-a:#5fe0b1;--recbg:#3a1a1c;--recline:#7a2f33;--recbtn:#fca5a5;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.35);color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--text);font:14px/1.45 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;display:grid;grid-template-rows:36px 52px auto auto minmax(0,1fr) minmax(214px,34vh);overflow:hidden}
/* every section has its own fixed row, so hiding the tip bar or the browser warning never shifts the layout */
.sitenav{grid-row:1}.top{grid-row:2}#compat{grid-row:3}#coach{grid-row:4}.work{grid-row:5}.timeline{grid-row:6}
.sitenav{display:flex;align-items:center;gap:6px;padding:0 14px;background:var(--panel2);border-bottom:1px solid var(--line);font-size:15px}
.sitenav a{color:var(--text);text-decoration:none;font-weight:600;padding:4px 16px;border-radius:8px}
.sitenav a:hover{background:var(--soft);color:var(--text)}
.sitenav a.on{color:var(--acc);background:var(--soft)}
button,input,select,textarea{font:inherit;color:inherit}
button,.btn{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:8px 13px;cursor:pointer;transition:background .12s,border-color .12s,box-shadow .12s;display:inline-block;text-align:center}
button:hover:not(:disabled),.btn:hover{background:var(--soft);border-color:var(--hover)}
button:disabled{opacity:.45;cursor:not-allowed}
button.primary{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600;box-shadow:0 1px 2px rgba(37,99,235,.3)}
button.primary:hover:not(:disabled){background:var(--acc2);border-color:var(--acc2)}
button.ghost{background:transparent;border-color:transparent;color:var(--ghost);font-weight:600}
button.ghost:hover{color:var(--text);background:var(--panel2)}
button.danger{color:var(--text)}
button.wide{width:100%}
button.linkish{background:transparent;border-color:transparent;color:var(--acc);text-decoration:underline}
button.linkish:hover:not(:disabled){background:var(--soft);border-color:transparent}
button.sm{padding:3px 10px}
.filebtn{flex:1;cursor:pointer}
select,input[type=text],input[type=number],input[type=email],textarea,#askInput,.projname{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:6px 9px;width:100%}
select:hover,textarea:hover,#askInput:hover{border-color:var(--hover)}
textarea{resize:vertical}
input[type=color]{width:100%;height:32px;padding:2px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
input[type=range]{width:100%;accent-color:var(--acc);margin:2px 0 8px}
:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.hint{color:var(--mute);font-size:13px}
.trunc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spacer{flex:1}
.vsep{width:1px;height:20px;background:var(--line);margin:0 4px}
h3{margin:16px 0 6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:700;display:flex;justify-content:space-between;align-items:center}
h3:first-child{margin-top:0}
.tagv{font-size:10px;letter-spacing:0;text-transform:none;background:var(--soft);color:var(--acc);padding:2px 8px;border-radius:99px}

.top{display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid var(--line);background:var(--panel)}
.brand{font-weight:800;font-size:17px;display:flex;align-items:center;gap:9px;letter-spacing:-.01em}
.logo{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-radius:9px;width:28px;height:28px;display:grid;place-items:center;font-size:15px}
.projname{width:230px;background:transparent;border-color:transparent;font-weight:600;margin-left:10px}
.projname:hover,.projname:focus{border-color:var(--line);background:var(--card)}
.banner{background:var(--bannerbg);color:var(--bannertext);padding:8px 16px;border-bottom:1px solid var(--bannerline)}
.coach{display:flex;align-items:center;gap:12px;padding:8px 16px;background:linear-gradient(90deg,var(--coach1),var(--coach2));border-bottom:1px solid var(--coachline)}
.coach[hidden]{display:none}
.coach .spark{color:var(--warn)}
.coach .x{margin-left:auto;background:transparent;border:0;color:var(--mute);font-size:18px;padding:0 6px}
.coach .x:hover{background:transparent;color:var(--text)}

.work{display:grid;grid-template-columns:326px minmax(0,1fr) 284px;min-height:0;gap:0}
.left,.right{background:var(--panel);overflow:auto;min-height:0}
.left{border-right:1px solid var(--line);display:flex;flex-direction:column}
.right{border-left:1px solid var(--line);padding:16px}
.tabs{display:flex;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:2}
.tab{flex:1;border:0;border-radius:0;background:transparent;padding:12px;color:var(--mute);border-bottom:2px solid transparent;font-weight:600}
.tab:hover:not(:disabled){background:var(--panel2)}
.tab.on{color:var(--acc);border-bottom-color:var(--acc)}
.pane{display:none;padding:16px}
.pane.on{display:block}
.medialist{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.mitem{display:flex;align-items:center;gap:10px;padding:9px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow)}
.mi-ic{width:32px;height:32px;display:grid;place-items:center;background:var(--soft);border-radius:8px}
.mi-t{flex:1;min-width:0}
.mi-b{display:flex;flex-direction:column;gap:4px}
.mi-b button{padding:2px 10px;font-size:12px}
.card{border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:12px;background:var(--card);box-shadow:var(--shadow)}
.card-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.pill{font-size:10px;background:var(--pillbg);color:var(--ok);padding:2px 8px;border-radius:99px;font-weight:600}
.row{display:flex;gap:8px;margin:8px 0}
.row>*{flex:1}
.looks{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.looks button{padding:6px 2px;font-size:12px}
.corners button{padding:6px 0}
.lbl{display:flex;justify-content:space-between;font-size:13px;color:var(--mute);margin:10px 0 3px}
.lbl .v{color:var(--text);font-weight:600}
.check{display:flex;gap:8px;align-items:center;margin:8px 0;cursor:pointer}
.check input{accent-color:var(--acc);width:16px;height:16px}
.ask{display:flex;gap:8px}
.ask #askInput{flex:1}
.reply{margin-top:10px;padding:10px 12px;border-radius:var(--r);background:var(--soft);border:1px solid var(--softline)}
.status{margin-top:10px}
.status button{margin-top:6px}
.errbox{margin-top:10px;padding:10px 12px;border-radius:var(--r);background:#fdecec;border:1px solid #f5b5b5;color:#8a1c1c;font-size:13px}
:root[data-theme=dark] .errbox{background:#3a1a1c;border-color:#7a2f33;color:#ffb4b4}
.capedit{max-height:260px;overflow:auto;margin:8px 0}
.caprow{display:flex;gap:6px;align-items:center;margin-bottom:6px;border-radius:var(--r);padding:2px}
.caprow.cur{background:var(--soft)}
.caprow .ct{flex:none;padding:4px 7px;font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums}
.caprow input{flex:1;min-width:0;padding:6px 8px}
.checks{list-style:none;padding:0;margin:8px 0}
.checks li{padding:6px 0;border-bottom:1px solid var(--line);display:flex;gap:8px}
.checks .ok{color:var(--ok);font-weight:700}.checks .no{color:var(--bad);font-weight:700}
.bar{height:6px;background:var(--barbg);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--acc);transition:width .2s;border-radius:99px}
.bar i.indet{animation:ind 1.2s linear infinite;background:linear-gradient(90deg,#2563eb,#60a5fa,#2563eb);background-size:200% 100%}
@keyframes ind{to{background-position:-200% 0}}
.status span{display:block;margin-top:4px;font-size:12px;color:var(--mute)}
.transcript{max-height:220px;overflow:auto;line-height:1.9;margin-top:6px;padding:8px;background:var(--panel2);border-radius:8px}
.transcript .w{padding:1px 3px;border-radius:4px;cursor:pointer}
.transcript .w:hover{background:var(--soft)}
.transcript .w.fill{text-decoration:underline wavy var(--warn)}
.transcript .w.tag{color:var(--mute);font-style:italic}
.transcript .w.sel{background:var(--hover)}
.transcript .w.cur{background:var(--acc);color:#fff}
.winp{font:inherit;background:var(--card);border:1px solid var(--acc);border-radius:4px;padding:0 3px}
.flist{max-height:200px;overflow:auto;margin:8px 0}
.frow{display:flex;align-items:center;gap:8px;padding:5px 4px;border-bottom:1px solid var(--line)}
.frow .ft{color:var(--mute);font-variant-numeric:tabular-nums}
.frow .fl{flex:1;min-width:0;font-size:12px}
.frow input{accent-color:var(--acc)}

.center{display:flex;flex-direction:column;min-width:0;min-height:0}
.stage{flex:1;min-height:0;display:grid;place-items:center;position:relative;background:radial-gradient(circle at 50% 40%,var(--stage1),var(--stage2));overflow:hidden}
#preview{background:#000;border-radius:8px;box-shadow:0 10px 40px rgba(22,32,58,.35)}
.empty{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--empty1),var(--empty2));text-align:center;padding:12px}
.empty[hidden]{display:none}
.empty .big{font-size:24px;font-weight:700}
.transport{display:flex;align-items:center;gap:12px;padding:9px 16px;border-top:1px solid var(--line);background:var(--panel)}
.round{width:38px;height:38px;border-radius:50%;padding:0;display:grid;place-items:center;background:var(--acc);border-color:var(--acc);color:#fff;box-shadow:0 2px 8px rgba(37,99,235,.35)}
.round:hover:not(:disabled){background:var(--acc2);border-color:var(--acc2)}
.time{font-variant-numeric:tabular-nums;color:var(--mute)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card)}
.seg.wide{display:flex;width:100%}
.seg button{border:0;border-radius:0;background:transparent;padding:5px 12px;flex:1}
.seg button.on{background:var(--acc);color:#fff}

.timeline{border-top:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;min-height:0}
.tl-tools{display:flex;gap:8px;align-items:center;padding:7px 16px;flex-wrap:wrap}
.tl-tools button{padding:7px 14px;font-weight:600}
.toast{display:flex;align-items:center;gap:12px}
.toast button{background:#fff;color:#16203a;border:0;padding:4px 12px;font-weight:700}
.busy{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--card);border-radius:14px;padding:20px 26px;box-shadow:0 12px 40px rgba(22,32,58,.3);display:flex;flex-direction:column;align-items:center;gap:12px;min-width:min(300px,86%);z-index:5;font-weight:600}
.busy[hidden]{display:none}
.busy .bar{width:100%}
.spin{width:30px;height:30px;border-radius:50%;border:4px solid var(--barbg);border-top-color:var(--acc);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.aboutlink{font-size:13px;color:var(--mute);text-decoration:underline;margin-top:6px}
.aboutlink:hover{color:var(--acc)}
.steps{list-style:none;display:flex;gap:18px;padding:0;margin:4px 0;color:var(--mute);flex-wrap:wrap;justify-content:center}
.steps b{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--acc);color:#fff;margin-right:6px}
details{margin-top:14px;border-top:1px solid var(--line);padding-top:8px}
summary{cursor:pointer;font-weight:700;color:var(--acc);padding:4px 0}
.zoom{display:flex;align-items:center;gap:8px;color:var(--mute)}
.zoom input{width:140px;margin:0}
.tl-grid{display:grid;grid-template-columns:96px minmax(0,1fr);flex:1;min-height:0;border-top:1px solid var(--line);overflow-y:auto;align-content:start;background:var(--tlbg)}
.tl-labels{position:relative;border-right:1px solid var(--line);background:var(--panel);z-index:3}
.lbl-row{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 4px 0 10px;color:var(--mute);font-size:11px;font-weight:600;border-bottom:1px solid var(--line);overflow:hidden}
.lbl-row .add{border:0;background:var(--acc);color:#fff;border-radius:50%;width:18px;height:18px;padding:0;line-height:18px;font-size:14px;font-weight:700;flex:none}
.lbl-row .add:hover{background:var(--acc2)}
.tl-scroll{overflow-x:auto;overflow-y:hidden;position:relative}
.tl-inner{position:relative}
.lane{position:absolute;left:0;right:0;border-bottom:1px solid rgba(22,32,58,.12);display:flex;align-items:center}
.lane .lane-hint{position:sticky;left:10px;font-size:11px;color:var(--mute);opacity:.9;white-space:nowrap;pointer-events:none}
.lane-v1{background:var(--lane-v1)}.lane-v2{background:var(--lane-v2)}.lane-v3{background:var(--lane-v3)}
.lane-t{background:var(--lane-t)}.lane-a1{background:var(--lane-a1)}.lane-a2{background:var(--lane-a2)}
.lbl-row[data-k=v1]{background:var(--lane-v1);color:var(--lbl-v1)}
.lbl-row[data-k=v2]{background:var(--lane-v2)}.lbl-row[data-k=v3]{background:var(--lane-v3)}
.lbl-row[data-k=t]{background:var(--lane-t);color:var(--lbl-t)}
.lbl-row[data-k=a1]{background:var(--lane-a1);color:var(--lbl-a)}.lbl-row[data-k=a2]{background:var(--lane-a2);color:var(--lbl-a)}
.ruler{position:absolute;left:0;right:0;top:0;background:var(--panel2);border-bottom:1px solid var(--line);cursor:pointer;touch-action:none}
.tick{position:absolute;top:0;bottom:0;border-left:1px solid var(--tick);padding-left:4px;font-size:10px;color:var(--mute);pointer-events:none}
.tclip{position:absolute;border-radius:7px;overflow:hidden;cursor:grab;border:1px solid rgba(255,255,255,.7);user-select:none;touch-action:none;box-shadow:0 1px 3px rgba(22,32,58,.25)}
.tclip canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.tclip.video{background:var(--vid)}
.tclip.over{background:var(--over)}
.tclip.audio{background:var(--aud)}
.tclip.text{background:var(--txt)}
.tclip.sel{outline:2px solid var(--text);outline-offset:-1px;z-index:5}
.clbl{position:absolute;left:8px;top:3px;right:8px;font-size:12px;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.h{position:absolute;top:0;bottom:0;width:9px;cursor:ew-resize;background:rgba(255,255,255,0);z-index:6}
.h.l{left:0}.h.r{right:0}
.tclip:hover .h,.tclip.sel .h{background:rgba(255,255,255,.5)}
.playhead{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:#ef4444;pointer-events:none;z-index:30}
.playhead i{position:absolute;top:0;left:-5px;border:6px solid transparent;border-top-color:#ef4444}
.dropmark{position:absolute;width:3px;background:var(--acc);z-index:40;border-radius:2px}

.recbar{position:fixed;top:60px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--recline);border-radius:99px;padding:8px 10px 8px 16px;box-shadow:0 8px 30px rgba(22,32,58,.3);z-index:120}
.recbar[hidden]{display:none}
.recbar video{width:44px;height:44px;border-radius:50%;object-fit:cover;transform:scaleX(-1);background:#000}
.recbar video[hidden]{display:none}
.countdown{position:fixed;inset:0;display:grid;place-items:center;background:rgba(22,32,58,.55);color:#fff;font-size:180px;font-weight:800;z-index:130}
.countdown[hidden]{display:none}
button.recbtn{margin:8px 0;font-weight:600}
.rdot{color:#ef4444;font-size:12px;margin-right:2px}
.recbar .dot{width:10px;height:10px;border-radius:50%;background:#ef4444;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.3}}

dialog{background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:16px;padding:0;width:480px;max-width:94vw;max-height:94vh;box-shadow:0 20px 60px rgba(22,32,58,.35)}
dialog::backdrop{background:rgba(10,15,30,.5)}
.dlg{padding:22px}
.dlg h2{margin:0 0 12px}
.dlg h3{margin-top:18px}
.dlg ul{max-height:160px;overflow:auto;color:var(--mute);padding-left:20px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
#expWhereTip{min-height:4.4em}
kbd{font:inherit;font-size:11px;background:var(--kbdbg);border-radius:4px;padding:0 5px;margin-left:4px;color:var(--mute)}
.emailcard{margin-top:12px;padding:14px;border-radius:12px;background:var(--emailbg);border:1px solid var(--emailline)}
.emailcard input{margin-top:4px}
.emailcard .row{margin:10px 0 6px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.chips button{border-radius:99px;padding:5px 12px;font-weight:600}
.chips button.on{background:var(--acc);border-color:var(--acc);color:#fff}
.sz{margin:0 10px;font-weight:600}
.est{margin:14px 0;padding:11px 12px;border-radius:var(--r);background:var(--soft);white-space:pre-line;color:var(--esttext)}
.dlg-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
#expVideoOpts[hidden],#expCustom[hidden]{display:none}

#toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:140}
.toast{background:#16203a;color:#fff;padding:10px 14px;border-radius:var(--r);max-width:360px;box-shadow:0 8px 28px rgba(22,32,58,.3);transition:opacity .4s}
.toast.err{background:#b42318}
.toast.out{opacity:0}
#dropHint{position:fixed;inset:0;background:rgba(37,99,235,.12);border:3px dashed var(--acc);display:grid;place-items:center;font-size:24px;font-weight:700;color:var(--acc);z-index:90;pointer-events:none}
#dropHint[hidden]{display:none}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:99px}
@media (max-width:1450px){.work{grid-template-columns:286px minmax(0,1fr) 252px}}
@media (max-width:1100px){.work{grid-template-columns:260px minmax(0,1fr) 230px}}

/* ----- Folded sections (always show a plain heading with an arrow, plus a few words naming what is inside) ----- */
summary small,.expmore summary small{font-weight:500;color:var(--mute);margin-left:4px;font-size:12px}
details summary{list-style:none;display:flex;align-items:baseline;flex-wrap:wrap;gap:2px}
details summary::-webkit-details-marker{display:none}
details summary::before{content:'\25B8';color:var(--acc);margin-right:6px;font-size:13px;transition:transform .12s}
details[open] summary::before{transform:rotate(90deg)}
.expmore,.setfold{margin-top:10px}
.savestate{font-size:12px;color:var(--ok);font-weight:600;min-width:62px}
.savestate.dirty{color:var(--warn)}
.grp{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.grp button{border:0;border-radius:0}
.grp button+button{border-left:1px solid var(--line)}
.shp{display:inline-block;border:2px solid currentColor;border-radius:2px;margin-right:6px;vertical-align:-2px;box-sizing:border-box}
.seg button small{opacity:.75;font-size:11px;margin-left:2px}
.tabs .railbtn{flex:none;border:0;background:transparent;color:var(--mute);font-weight:600;border-radius:0;padding:12px 10px}
.railbar{display:none;flex-direction:column;gap:6px;padding:8px 6px;align-items:stretch}
.railbar:not([hidden]){display:flex}
.railbar button{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 2px;font-size:18px;line-height:1.1;font-weight:700}
.railbar button span{font-size:11px;font-weight:600;color:var(--mute)}
.work.railed{grid-template-columns:68px minmax(0,1fr) 284px}
.work.railed .left .tabs,.work.railed .left .pane{display:none}
.work.railed .left{overflow:hidden}
@media (max-width:1450px){.work.railed{grid-template-columns:68px minmax(0,1fr) 252px}}

/* ===== Tablets and phones: one scrolling page. The preview stays pinned at the top, then the timeline, then the editing panels. ===== */
@media (max-width:900px){
  html,body{height:auto}
  body{display:flex;flex-direction:column;overflow:visible;min-height:100%}
  .top,#compat,#coach{flex:none}
  .work{display:contents}
  .center{order:1;position:sticky;top:52px;z-index:20;height:46vh;min-height:230px;background:var(--bg);box-shadow:0 6px 18px rgba(22,32,58,.18)}
  .timeline{order:2;flex:none;height:auto;min-height:230px}
  .tl-grid{max-height:300px}
  #railHide{display:none}
  .right{order:3;border-left:0;border-top:1px solid var(--line);overflow:visible}
  .left{order:4;border-right:0;border-top:1px solid var(--line);overflow:visible}
  .top{position:sticky;top:0;z-index:30;flex-wrap:nowrap;padding:0 10px;gap:4px}
  .projname{width:120px;margin-left:2px}
  .transport{flex-wrap:wrap;gap:8px;padding:8px 10px}
  .tl-tools{padding:6px 10px}
  .row.rec button{flex:1}
  #toasts{left:12px;right:12px;bottom:12px}.toast{max-width:none}
}
@media (max-width:640px){
  .brand span.bt,.projname{display:none}
  .top{overflow:hidden}
  .top .ghost{padding:6px 6px;font-size:13px}
  .transport{overflow:hidden}
  #btnOpen,#btnSave{display:none}
  .zoom{display:none}
  .center{height:40vh}
  .steps{flex-direction:column;gap:6px}
  .tl-tools button{padding:8px 10px;font-size:13px}
  dialog{width:96vw}
  .grid2{grid-template-columns:1fr}
}
@media (pointer:coarse){
  button,.btn,select,input[type=text],input[type=number],input[type=email]{min-height:40px}
  .h{width:20px}
  input[type=range]{height:28px}
  .lbl-row .add{width:26px;height:26px;line-height:26px}
}