/* Lumina Web Player — dark, minimal, matches the app.
   Palette ported from Reference/lumina-drum-stage-mockup.html. */
:root{
  --bg:#08080a; --panel:#131316; --panel2:#1b1b20; --panel3:#222228; --line:#2a2a31;
  --ink:#e2dfd6; --muted:#8a877f; --accent:#f0a83a; --accent-ink:#1a1204; --warn:#e06a4a; --ok:#5fb98a;
  --font-display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --font-mono:"IBM Plex Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-mono);font-size:12px;overflow:hidden}

#app{display:grid;grid-template-rows:auto 1fr auto;height:100vh;min-height:420px}

header{display:flex;align-items:center;gap:14px;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
h1{margin:0;font:600 19px/1 var(--font-display);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
h1 small{font:500 10px var(--font-mono);color:var(--muted);text-transform:none;letter-spacing:0;margin-left:8px}

.group{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lbl{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:10px;margin-right:2px;white-space:nowrap}

button{font:500 12px var(--font-mono);color:var(--ink);background:var(--panel2);border:1px solid var(--line);padding:6px 11px;border-radius:3px;cursor:pointer;white-space:nowrap}
button:hover{border-color:var(--muted)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
button.sm{padding:4px 9px;font-size:11px}
button:disabled{opacity:.4;cursor:default}

select{font:500 12px var(--font-mono);color:var(--ink);background:var(--panel2);border:1px solid var(--line);border-radius:3px;padding:5px 6px}

#loadError{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--warn);font:500 13px var(--font-mono);text-align:center;padding:20px;z-index:20}
#loadStatus{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--muted);font:500 13px var(--font-mono);z-index:19}

#stageWrap{position:relative;min-height:200px;background:#050506}
#stageWrap canvas{display:block;width:100%;height:100%}
#hint{position:absolute;right:12px;bottom:8px;color:var(--muted);font-size:10px;pointer-events:none;opacity:.7}

footer{background:var(--panel);border-top:1px solid var(--line);padding:8px 12px;display:flex;flex-direction:column;gap:8px}

.transport{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#scrubWrap{flex:1;min-width:140px;display:flex;align-items:center;gap:8px;position:relative}
#scrub{width:100%;accent-color:var(--accent)}
#loopMarks{position:absolute;left:0;right:0;top:-2px;height:4px;pointer-events:none}
.loopMark{position:absolute;top:0;width:2px;height:4px;background:var(--accent)}
#time{font-variant-numeric:tabular-nums;color:var(--muted);min-width:11ch;text-align:right}

.viewsRow{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.viewsRow .spacer{flex:1}

@media (max-width:700px){
  h1 small{display:none}
  #quadBtn{display:none}
  header{gap:8px;padding:6px 10px}
  .group{gap:4px}
}
@media (prefers-reduced-motion:reduce){ * { transition:none!important } }