/* Studio chrome; video palettes remain independent. */
:root{--ink3:#8b96af;--line:#293044;--panel:#151925;--bg2:#10141f}
:root[data-ui="light"]{--ink3:#68748b;--line:#dce2ec;--panel:#fff;--bg2:#f8f9fc}
[hidden]{display:none!important}
button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.top{height:60px;padding:0 20px;gap:10px}
.logo{font-size:16px;letter-spacing:-.045em}
.logo .dot{width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,#a99bff,#6d5cff);box-shadow:0 4px 16px #6d5cff30;position:relative}
.logo .dot:after{content:'';position:absolute;left:11px;top:8px;border-left:9px solid white;border-top:6px solid transparent;border-bottom:6px solid transparent}
.shell{height:calc(100% - 60px);grid-template-columns:300px minmax(0,1fr) 280px}
.panelbody{padding:18px 16px 40px}
.grp{margin-bottom:24px}.grp>h4{font-size:10px;letter-spacing:.13em;margin-bottom:12px}
.inp,select.inp,textarea.inp{padding:9px 10px;border-radius:9px}
.f{margin-bottom:12px}.f>label{font-size:11px;line-height:1.5}
.tabs .tab{padding:14px 5px}.btn{min-height:32px}.btn.sm{min-height:28px}
.starter{padding:17px;margin-bottom:24px;border:1px solid var(--accT4);border-radius:14px;background:linear-gradient(135deg,var(--accT2),transparent)}
.starter .eyebrow{color:var(--acc);font-size:9px;letter-spacing:.15em;font-weight:800;text-transform:uppercase}
.starter h3{font-size:20px;letter-spacing:-.04em;line-height:1.2;margin:9px 0}
.starter p{font-size:11px;line-height:1.65;color:var(--ink2);margin:0 0 14px}
.starter button{width:100%;justify-content:space-between}
.filmLooks{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:9px 0}
.filmLooks .look{min-width:0;padding:7px 5px;border:1px solid var(--line);border-radius:8px;background:var(--bg2);color:var(--ink2);font:600 10px Inter,sans-serif;cursor:pointer}
.filmLooks .look.on{border-color:var(--acc);color:var(--ink);box-shadow:inset 0 0 0 1px var(--accT4)}
.filmLooks i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px;background:#e88c89;vertical-align:-1px}
.filmLooks [data-film-look="filmNoir"] i{background:#b7ff3c}.filmLooks [data-film-look="filmPulse"] i{background:#6c63ff}
.stagebar{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;color:var(--ink2);font-size:11px;border-bottom:1px solid var(--line);gap:10px}
.stagebar strong{color:var(--ink);font-weight:600}.stagebar span{font-size:10px;color:var(--ink3)}
.canvasWrap{padding:38px 24px;background-image:radial-gradient(var(--line) .7px,transparent .7px);background-size:18px 18px}
.frame{border-radius:6px;box-shadow:0 18px 60px var(--shadow2),0 0 0 1px var(--frameEdge)}
.frame canvas{cursor:grab;touch-action:none}.frame.dragging canvas{cursor:grabbing}.dragHint{margin:-3px 0 10px}
.badgeRes{top:auto;bottom:12px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--panel);border:1px solid var(--line);padding:4px 9px}
.ctrls{padding:16px 20px}.tl{height:42px;gap:4px;margin-bottom:14px}.seg{border:1px solid var(--line);min-width:0}.seg.cur{border-color:var(--acc)}.seg .lb{max-width:100%}.play{z-index:3}
.sitem{padding:11px 10px}.sitem.on{box-shadow:inset 3px 0 var(--acc)}
.hint{font-size:11px;line-height:1.65}.tmpl .sw2{height:62px}.tmpl{border-radius:10px}
.save-state{font-size:10px;color:var(--ink3);white-space:nowrap}
.mbox{border-radius:18px}.modal .hint{font-size:12px}
@media(min-width:1500px){.shell{grid-template-columns:320px minmax(0,1fr) 300px}.panelbody{padding:20px}}
@media(max-width:1100px){.top .tagline,.save-state{display:none}.shell{grid-template-columns:270px minmax(0,1fr) 250px}.top{padding:0 12px}}
@media(max-width:900px){.top{height:48px}.shell{height:calc(100dvh - 48px - 56px);display:flex}.stagebar{padding:8px 12px}.stagebar span{display:none}.canvasWrap{padding:14px 12px 30px}.badgeRes{bottom:5px;font-size:9px}.ctrls{padding:8px 12px}.tl{height:28px;margin-bottom:8px}.panelbody{padding:14px 14px 30px}.starter{padding:12px}.starter h3{font-size:18px}.starter p{margin-bottom:10px}}
@media(max-width:520px){.logo{font-size:13px}.logo .dot{width:22px;height:22px}.logo .dot:after{left:8px;top:5px}.top{gap:5px;padding:0 8px}.top .btn{padding:5px 7px;font-size:10px}.stagebar{font-size:10px}}
@media(max-width:520px){
  .top{overflow:visible;flex-wrap:wrap;height:88px;padding:6px 10px;align-content:center;gap:6px}
  .logo{margin-right:auto}.top .sp{display:block;flex:0 0 100%;height:0;order:2}
  #btnTheme{order:1}#btnNew,#btnSave,#btnLoad,#btnPng{order:3;flex:1}
  #btnExport{position:static;order:1;min-height:30px}
  .top .btn{min-height:28px}
  .shell{height:calc(100dvh - 88px - 56px)}
  .stage{height:42dvh;min-height:250px}
}