:root{
  --ink:#0b0c16; --slate:#12141f; --card:#191c2d; --raised:#212439; --graphite:#141721;
  --indigo:#2b2e66; --amber:#ffb447; --coral:#fe654f; --ember:#fc8c49;
  --ivory:#f6f4ef; --dust:#adb1c4; --ash:#737a92;
  --jade:#5acf9c; --caution:#fcbf49; --alert:#fb7373;
  --hairline:rgba(255,255,255,.07); --hairline-strong:rgba(255,255,255,.13);
  --ribbon:linear-gradient(90deg,var(--amber),var(--coral));
  --r-control:7px; --r-lane:9px; --r-card:14px; --r-panel:18px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--ink); color:var(--ivory);
  font:15px/1.6 ui-sans-serif,-apple-system,"SF Pro Text","Helvetica Neue",sans-serif;
  background-image:
    radial-gradient(900px 620px at 6% -8%, rgba(43,46,102,.5), transparent 70%),
    radial-gradient(720px 520px at 104% 6%, rgba(254,101,79,.09), transparent 68%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
h1,h2{margin:0;letter-spacing:-.015em;font-family:ui-rounded,-apple-system,sans-serif}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--amber)}

/* ---------- top bar ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:14px clamp(14px,3vw,28px);border-bottom:1px solid var(--hairline);
  background:rgba(11,12,22,.82);backdrop-filter:blur(14px);
  position:sticky;top:0;z-index:40;
}
.brand{display:flex;align-items:center;gap:12px}
.brand h1{font-size:19px;font-weight:750}
.brand-sub{margin:1px 0 0;font-size:11.5px;color:var(--ash);letter-spacing:.02em}
.brand-mark{
  width:34px;height:34px;border-radius:9px;flex:none;background:var(--graphite);
  border:1px solid var(--hairline-strong);position:relative;overflow:hidden;
}
.brand-mark::before,.brand-mark::after{
  content:"";position:absolute;top:7px;bottom:7px;width:5px;border-radius:2px;
}
.brand-mark::before{left:8px;background:var(--amber)}
.brand-mark::after{left:16px;background:var(--coral)}
.brand-mark.big{width:56px;height:56px;border-radius:15px}
.brand-mark.big::before{left:14px;width:7px;top:12px;bottom:12px}
.brand-mark.big::after{left:26px;width:7px;top:12px;bottom:12px}
.topbar-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- buttons ---------- */
.pill{
  border:1px solid var(--hairline-strong);background:rgba(255,255,255,.06);
  padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:600;
  transition:background .15s ease,border-color .15s ease,transform .1s ease;
}
.pill:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26)}
.pill:active{transform:scale(.96)}
.pill:disabled{opacity:.4;cursor:default;transform:none}
.pill-accent{background:var(--ribbon);color:var(--ink);border-color:transparent}
.pill-accent:hover{filter:brightness(1.08);background:var(--ribbon)}
.pill-wide{min-width:130px}
.pill-icon{min-width:38px;text-align:center}
.pill.on{background:var(--amber);color:var(--ink);border-color:transparent}
.mini{
  border:1px solid var(--hairline-strong);background:rgba(255,255,255,.05);
  border-radius:6px;min-width:26px;height:24px;font-size:12px;font-weight:700;line-height:1;
}
.mini:hover{background:rgba(255,255,255,.12)}
.mini-wide{min-width:52px;font-variant-numeric:tabular-nums;font-size:11px}
.mini-on{color:var(--amber);border-color:rgba(255,180,71,.4)}
.chip{
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  padding:3px 9px;border-radius:999px;background:rgba(173,177,196,.14);color:var(--dust);
  border:1px solid transparent;
}
.chip-warn{background:rgba(252,191,73,.16);color:var(--caution);border-color:rgba(252,191,73,.35)}
.chip-on{background:var(--amber);color:var(--ink)}

/* ---------- layout ---------- */
main{max-width:1320px;margin:0 auto;padding:18px clamp(14px,3vw,28px) 60px;display:grid;gap:16px}
.stage{display:grid;gap:10px}
.stage{justify-items:center}
.video-wrap{
  position:relative;background:#000;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--hairline);aspect-ratio:16/9;max-height:44vh;max-width:100%;
  display:flex;align-items:center;justify-content:center;margin-inline:auto;
}
.stage>.readout,.stage>.notice{width:100%}
.video-wrap video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.audio-art{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;
  background:linear-gradient(140deg,var(--indigo),var(--ink) 60%,#000)}
.art-disc{width:120px;height:120px;border-radius:50%;background:var(--ribbon);
  box-shadow:0 18px 50px -12px rgba(254,101,79,.55);position:relative}
.art-disc::after{content:"";position:absolute;inset:44%;border-radius:50%;background:var(--ink)}
.audio-art p{margin:0;font-weight:650;color:var(--dust)}

.notice{
  margin:0;padding:8px 12px;border-radius:var(--r-control);font-size:11.5px;
  background:rgba(252,191,73,.12);border:1px solid rgba(252,191,73,.32);color:var(--caution);
}
.readout{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:1px;
  background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--r-lane);overflow:hidden;
}
.readout-cell{background:var(--graphite);padding:9px 12px;display:grid;gap:2px}
.rv{font:650 17px/1.1 ui-rounded,-apple-system,sans-serif;font-variant-numeric:tabular-nums}
.rl{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);font-weight:650}

/* ---------- timeline ---------- */
.timeline-card{
  background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-card);
  padding:12px 12px 10px;display:grid;gap:8px;
}
.timeline-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.lane-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:10.5px;color:var(--ash);font-weight:600}
.legend-item{display:inline-flex;align-items:center;gap:5px}
.sw{width:9px;height:9px;border-radius:3px;display:inline-block}
.sw-marker{background:var(--jade)} .sw-form{background:var(--indigo);border:1px solid var(--dust)}
.sw-chord{background:var(--dust)} .sw-wave{background:var(--ribbon)}
.zoom-controls{display:flex;gap:5px;align-items:center}
.timeline-scroll{overflow-x:auto;overflow-y:hidden;border-radius:var(--r-lane);overscroll-behavior-x:contain}
.timeline-scroll canvas{display:block;height:196px;cursor:crosshair}
.timeline-hint{margin:0;font-size:10.5px;color:var(--ash)}

/* ---------- transport ---------- */
.transport{
  background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-card);
  padding:13px 14px;display:grid;gap:11px;
}
.transport-row{display:flex;align-items:center;gap:10px}
.transport-row.wrap{flex-wrap:wrap}
.spacer{flex:1}
.range-readout{font-size:11.5px;color:var(--dust);font-variant-numeric:tabular-nums}
.control{display:inline-flex;align-items:center;gap:7px}
.control-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ash);font-weight:650}
.control output{font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--dust);min-width:38px}
.stepper-value{min-width:26px;text-align:center;font-weight:700;color:var(--ivory)}
input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:99px;
  background:var(--raised);width:118px;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;
  background:var(--amber);cursor:pointer;border:0}
input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--amber);border:0;cursor:pointer}
select{background:var(--raised);color:var(--ivory);border:1px solid var(--hairline-strong);
  border-radius:var(--r-control);padding:4px 7px;font-size:12px;font-variant-numeric:tabular-nums}
.midi-monitor{font-size:11px;color:var(--ash);font-variant-numeric:tabular-nums}
.midi-monitor.live{color:var(--jade)}

/* ---------- panels ---------- */
.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));gap:14px;align-items:start}
.panel{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-panel);padding:16px;display:grid;gap:12px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.panel-head h2{font-size:14.5px;font-weight:680}
.count{font-size:12px;color:var(--ash);font-variant-numeric:tabular-nums}
.panel-note{margin:0;font-size:11.5px;color:var(--ash)}
.panel-note kbd{background:rgba(255,255,255,.09);border:1px solid var(--hairline-strong);
  border-bottom-width:2px;border-radius:4px;padding:0 4px;font:11px ui-monospace,Menlo,monospace}

.guide-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hairline);
  border-radius:var(--r-control);overflow:hidden}
.guide-facts>div{background:rgba(43,46,102,.28);padding:8px 6px;display:grid;gap:2px;justify-items:center}
.gv{font-size:13px;font-weight:650}
.gl{font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);font-weight:650}
.reveal{display:grid;gap:6px}
.reveal-label{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);font-weight:650}
.segmented{display:flex;gap:2px;background:var(--graphite);padding:2px;border-radius:var(--r-control);
  border:1px solid var(--hairline)}
.segmented button{flex:1;border:0;background:transparent;padding:5px 4px;border-radius:5px;
  font-size:11px;font-weight:600;color:var(--dust)}
.segmented button.on{background:var(--ribbon);color:var(--ink)}
.guide-rows{margin:0;display:grid;gap:7px;background:rgba(43,46,102,.16);padding:11px;
  border:1px solid var(--hairline);border-radius:var(--r-control)}
.guide-row{display:flex;align-items:center;gap:11px}
.guide-row dt{width:62px;flex:none;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ash);font-weight:650}
.guide-row dd{margin:0;font-size:13px;font-weight:600;font-family:ui-serif,Georgia,serif}
.guide-row dd.pending{font-family:inherit;font-size:11.5px;font-style:italic;color:var(--ash);font-weight:500}
.guide-row dd.editable{padding:3px 9px;border-radius:var(--r-control);cursor:pointer}
.tint-amber.editable{background:rgba(255,180,71,.13);border:1px solid rgba(255,180,71,.28)}
.tint-coral.editable{background:rgba(254,101,79,.13);border:1px solid rgba(254,101,79,.28)}
.tint-ember.editable{background:rgba(252,140,73,.13);border:1px solid rgba(252,140,73,.28)}

.marker-composer{display:flex;gap:7px;align-items:center}
.marker-time{font-size:11.5px;font-weight:700;color:var(--amber);font-variant-numeric:tabular-nums;min-width:38px}
.marker-composer input,.popover input{
  flex:1;min-width:0;background:var(--raised);border:1px solid var(--hairline);color:var(--ivory);
  border-radius:var(--r-control);padding:6px 9px;font:inherit;font-size:12.5px;
}
.marker-composer input:focus,.popover input:focus{outline:none;border-color:rgba(255,180,71,.6)}
.marker-list,.section-list{list-style:none;margin:0;padding:0;display:grid;gap:5px;max-height:260px;overflow-y:auto}
.marker-list li,.section-list li{
  display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--r-control);
  background:rgba(255,255,255,.03);cursor:pointer;font-size:12.5px;
}
.marker-list li:hover,.section-list li:hover{background:rgba(255,255,255,.07)}
.marker-list li.on,.section-list li.on{background:rgba(255,180,71,.12);box-shadow:inset 0 0 0 1px rgba(255,180,71,.4)}
.marker-list time,.section-list time{font-size:11px;color:var(--amber);font-variant-numeric:tabular-nums;flex:none}
.marker-list .txt,.section-list .txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.marker-list button{background:none;border:0;color:var(--ash);padding:0 3px;font-size:14px;line-height:1}
.marker-list button:hover{color:var(--alert)}
.section-swatch{width:8px;height:24px;border-radius:3px;flex:none}

/* ---------- welcome ---------- */
.welcome{min-height:calc(100vh - 130px);display:grid;place-items:center;padding:32px 20px 70px}
.welcome-inner{max-width:660px;display:grid;gap:16px;justify-items:start}
.welcome h2{font-size:clamp(26px,4vw,36px);line-height:1.1;font-weight:760;text-wrap:balance}
.welcome-lead{margin:0;color:var(--dust);font-size:16px;max-width:56ch}
.welcome-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}
.welcome-points{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:9px;max-width:62ch}
.welcome-points li{font-size:13px;color:var(--dust);padding-left:15px;position:relative}
.welcome-points li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--ribbon)}
.welcome-points strong{color:var(--ivory);font-weight:650}

/* ---------- overlays ---------- */
.sheet{position:fixed;inset:0;background:rgba(6,7,14,.72);backdrop-filter:blur(7px);
  display:grid;place-items:center;z-index:60;padding:22px}
.sheet-inner{background:var(--card);border:1px solid var(--hairline-strong);border-radius:var(--r-panel);
  padding:22px;max-width:520px;width:100%;display:grid;gap:16px}
.sheet-head{display:flex;align-items:center;justify-content:space-between}
.shortcut-grid{margin:0;display:grid;gap:7px}
.shortcut-grid>div{display:flex;gap:14px;align-items:baseline}
.shortcut-grid dt{font:12px ui-monospace,Menlo,monospace;font-weight:700;background:rgba(255,255,255,.07);
  padding:2px 7px;border-radius:5px;min-width:104px;text-align:center;flex:none}
.shortcut-grid dd{margin:0;font-size:12.5px;color:var(--dust)}

.popover{
  position:fixed;z-index:70;background:var(--raised);border:1px solid var(--hairline-strong);
  border-radius:12px;padding:12px;display:grid;gap:8px;min-width:236px;
  box-shadow:0 22px 50px -18px rgba(0,0,0,.85);
}
.popover-title{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ash);font-weight:650}
.popover-row{display:flex;gap:7px;align-items:center}
.kind-picker{display:flex;gap:4px}
.kind-picker button{width:30px;height:24px;border-radius:5px;border:1px solid var(--hairline);
  background:rgba(255,255,255,.05);font-size:12px;line-height:1}
.kind-picker button.on{background:var(--amber);color:var(--ink);border-color:transparent}

.context-menu{
  position:fixed;z-index:80;background:var(--raised);border:1px solid var(--hairline-strong);
  border-radius:10px;padding:5px;min-width:212px;box-shadow:0 22px 50px -18px rgba(0,0,0,.85);
}
.context-menu button{
  display:block;width:100%;text-align:left;background:none;border:0;padding:6px 10px;
  border-radius:6px;font-size:12.5px;color:var(--ivory);
}
.context-menu button:hover{background:rgba(255,180,71,.16)}
.context-menu hr{border:0;border-top:1px solid var(--hairline);margin:4px 6px}
.context-menu .menu-head{padding:4px 10px 6px;font-size:10.5px;color:var(--ash);font-variant-numeric:tabular-nums}

.footer{
  border-top:1px solid var(--hairline);padding:16px clamp(14px,3vw,28px);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:11.5px;color:var(--ash);
}
.credit{color:var(--dust)}
[hidden]{display:none !important}

@media (max-width:720px){
  .video-wrap{aspect-ratio:4/3;max-height:38vh}
  .timeline-scroll canvas{height:172px}
  .brand-sub{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}