:root {
  color-scheme: dark;
  --background:#0c1018; --foreground:#edf2fb; --muted:#202a3b;
  --muted-foreground:#aab6c9; --primary:#8ebeff; --primary-foreground:#0c1828;
  --border:#2b364a; --blue:#479fff; --purple:#ad6cff; --red:#ff528b;
  --green:#44d99b; --orange:#ffae55; --viz-series-1:#8ebeff;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--background); color:var(--foreground); }
button,input,select { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:default; opacity:.55; }
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid var(--primary); outline-offset:3px; }
button,input,select { -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }
.app { max-width:1240px; padding:32px 24px 24px; margin:auto; }
.app-header { display:flex; gap:20px; justify-content:space-between; align-items:center; flex-wrap:wrap; margin-bottom:26px; }
.brand-kicker { color:var(--primary); text-transform:uppercase; letter-spacing:.16em; font-size:12px; font-weight:600; }
h1 { margin:7px 0; font-size:clamp(25px,4vw,38px); letter-spacing:-.04em; font-weight:650; }
.subtitle { margin:0; color:var(--muted-foreground); font-size:15px; }
.file-actions { display:flex; flex-wrap:wrap; gap:8px; }
.btn { min-height:44px; display:inline-flex; justify-content:center; align-items:center; padding:10px 14px; border:1px solid var(--border); border-radius:8px; background:#141c2a; color:var(--foreground); font-size:14px; font-weight:500; text-decoration:none; }
.btn:hover { background:#202c40; }
.btn-primary { background:var(--primary); border-color:var(--primary); color:var(--primary-foreground); }
.btn-primary:hover { background:#a9cdff; }
.btn[aria-pressed="true"] { background:#2b4667; border-color:var(--primary); color:var(--foreground); }
#tl-blackout[aria-pressed="true"] { background:#542b3b; border-color:#eb719b; }
.lab-layout { display:grid; grid-template-columns:minmax(0,1fr) 306px; gap:20px; align-items:start; }
.stage-panel,.control-panel { background:#121925; border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.control-panel { padding:20px; }
.stage-top { padding:14px 16px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.stage-caption { font-size:13px; color:var(--muted-foreground); }
.viz-badge { font-size:12px; border-radius:5px; padding:4px 8px; background:var(--muted); color:var(--foreground); }
.tl-stage { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; }
canvas { width:100%; height:100%; display:block; }
.rig-panel { margin-top:20px; padding:20px; background:#121925; border:1px solid var(--border); border-radius:14px; }
.rig-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.rig-heading .panel-title { margin:0 0 6px; }
.rig-intro { margin:0; font-size:14px; color:var(--muted-foreground); }
.rig-layout { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr); gap:24px; }
.rig-map { aspect-ratio:1000/470; height:auto; touch-action:none; background:#0e1520; border-radius:8px; }
.rig-map-help,.rig-summary { font-size:12px; line-height:1.6; color:var(--muted-foreground); }
.rig-summary { color:var(--foreground); overflow-wrap:anywhere; }
.rig-add { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.rig-add .form-label { flex:1 1 130px; margin:0; }
.rig-editor { border:0; padding:0; margin:0; min-width:0; }
.rig-properties,.rig-axes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.rig-axes { margin-bottom:18px; }
.rig-axes .form-label { margin-bottom:6px; }
.rig-actions { display:flex; gap:8px; flex-wrap:wrap; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:850px) { .rig-layout { grid-template-columns:minmax(0,1fr); } }
@media(max-width:610px) { .rig-panel { padding:16px; } .rig-properties { grid-template-columns:minmax(0,1fr); gap:0; } }
.stage-footer { padding:16px; }
.section-label { margin:0 0 10px; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-foreground); }
.tl-cues { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.tl-cues .btn { min-width:0; text-align:left; justify-content:flex-start; }
.tl-cue-content { display:flex; flex-direction:column; gap:4px; min-width:0; }
.cue-name { overflow-wrap:anywhere; }
.text-small { font-size:12px; }
.tl-playback { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:16px 0 0; }
.tl-step { color:var(--muted-foreground); margin-left:auto; }
.tabular-nums { font-variant-numeric:tabular-nums; }
.tl-meter { height:4px; background:var(--muted); margin-top:14px; border-radius:2px; overflow:hidden; }
.tl-meter-fill { height:100%; width:0; background:var(--viz-series-1); }
.tl-detail { font-size:13px; color:var(--muted-foreground); margin:12px 0 0; min-height:20px; overflow-wrap:anywhere; }
.panel-title { margin:0 0 18px; font-size:17px; font-weight:600; }
.form-label { display:block; font-size:14px; margin:0 0 18px; }
.tl-label { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:10px; }
output { color:var(--primary); }
.form-range { width:100%; display:block; accent-color:var(--primary); min-height:24px; margin:0; }
.field-help { display:block; color:var(--muted-foreground); font-size:12px; margin-top:7px; }
.form-control,.form-select { display:block; width:100%; min-width:0; margin-top:8px; border:1px solid var(--border); background:#0e1520; color:var(--foreground); border-radius:7px; min-height:44px; padding:9px 10px; font-size:16px; }
.form-check { display:flex; align-items:center; min-height:44px; gap:9px; font-size:14px; }
.form-check-input { width:18px; height:18px; accent-color:var(--primary); }
.editor-divider { border:0; border-top:1px solid var(--border); margin:22px 0; }
.tl-editor .btn { width:100%; margin-top:8px; }
.storage-bar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; font-size:12px; color:var(--muted-foreground); margin-top:16px; }
.notice { margin-top:12px; padding:12px 16px; border-radius:8px; background:#1b2c42; font-size:14px; overflow-wrap:anywhere; }
.notice[role="alert"] { background:#452b36; }
details { margin-top:20px; color:var(--muted-foreground); font-size:14px; }
summary { cursor:pointer; min-height:44px; padding:12px 0; color:var(--foreground); }
.help-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:8px 0 18px; }
.help-grid strong { display:block; color:var(--foreground); margin-bottom:5px; }
.help-grid p { margin:0; line-height:1.6; }
.app-footer { margin-top:22px; color:var(--muted-foreground); font-size:12px; line-height:1.6; }
noscript { display:block; padding:24px; }
@media(max-width:1050px) { .lab-layout { grid-template-columns:minmax(0,1fr); } .control-panel { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; } .editor-divider { display:none; } }
@media(max-width:610px) { .app { padding:22px 14px; } .app-header { gap:16px; margin-bottom:20px; } .tl-cues { grid-template-columns:repeat(2,minmax(0,1fr)); } .control-panel { display:block; padding:18px; } .editor-divider { display:block; } .tl-step { flex-basis:100%; margin-left:0; } .help-grid { grid-template-columns:1fr; gap:14px; } .stage-top { padding:12px; } .stage-footer { padding:12px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; } }