:root {
  color-scheme: dark;
  --bg: #08090b;
  --panel: #101317;
  --panel-2: #15191f;
  --line: #2a3038;
  --line-bright: #424b57;
  --ink: #eef2f5;
  --muted: #7f8995;
  --accent: #65e89b;
  --accent-dim: #19392a;
  --sample: #ffc35c;
  --sample-dim: #3c2d12;
  --focus: #8eb7ff;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-width: 780px; height: 100%; background: var(--bg); color: var(--ink); }
body { overflow: hidden; font: 12px/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
button { color: inherit; font: inherit; }
button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

.app { display: grid; grid-template-rows: 38px minmax(0, 1fr) 48px; height: 100dvh; }
.topbar, .sample-rack { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-color: var(--line); background: #0d1014; }
.topbar { overflow: hidden; border-bottom: 1px solid var(--line); }
.sample-rack { border-top: 1px solid var(--line); }
.brand { color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.tabs { display: flex; gap: 3px; }
.tab, .mini, .pattern-slot, .sample-slot, .transport-button, .step-button, .tempo input { border: 1px solid var(--line); border-radius: 3px; background: var(--panel-2); }
.tab, .mini, .pattern-slot, .sample-slot, .transport-button, .step-button { cursor: pointer; }
.tab { min-width: 68px; padding: 5px 8px; color: var(--muted); }
.tab.active { border-color: var(--line-bright); background: #222832; color: var(--ink); }
.transport, .tempo, .octave-control { display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.transport-button { height: 28px; padding: 0 7px; color: var(--muted); }
.transport-button:hover:not(:disabled), .step-button:hover:not(:disabled) { border-color: var(--line-bright); color: var(--ink); }
.transport-button.play.active { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); }
.transport-button.play.paused { border-color: var(--sample); background: var(--sample-dim); color: var(--sample); }
.transport-button:disabled, .step-button:disabled { cursor: default; opacity: .4; }
.tempo { color: var(--muted); }
.tempo input { width: 49px; height: 28px; padding: 0 3px; color: var(--ink); text-align: center; }
.tempo input::-webkit-inner-spin-button { display: none; }
.step-button { width: 24px; height: 26px; padding: 0; color: var(--muted); }
.status { min-width: 0; margin-left: auto; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.main { min-height: 0; overflow: hidden; }
.workspace { display: grid; grid-template-columns: minmax(330px, 42%) minmax(430px, 58%); gap: 6px; height: 100%; padding: 6px; overflow: auto hidden; }
.panel { min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.panelbar, .pattern-head { min-height: 38px; border-bottom: 1px solid var(--line); background: #0e1115; }
.panelbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; }
.position { color: var(--muted); }
.arrangement-panel, .pattern-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.arrangement-grid, .pattern-grid { align-content: start; min-height: 0; overflow: auto; scrollbar-color: var(--line-bright) transparent; }
.arrangement-grid { display: grid; grid-auto-rows: 34px; min-width: 310px; }
.grid-head, .row-number, .voice-head { display: grid; place-items: center; position: sticky; z-index: 2; background: #12161b; color: var(--muted); }
.grid-head, .voice-head { top: 0; border-bottom: 1px solid var(--line); }
.row-number { left: 0; z-index: 1; border-right: 1px solid var(--line); font-size: 10px; }
.song-cell, .note-cell { min-width: 0; border: 0; border-right: 1px solid #242a31; border-bottom: 1px solid #242a31; border-radius: 0; background: transparent; color: #b7c0ca; cursor: pointer; font-weight: 600; }
.song-cell:nth-child(8n), .note-cell:nth-child(8n) { background: rgba(255,255,255,.012); }
.song-cell:hover, .note-cell:hover { background: #1b2128; }
.song-cell.selected, .note-cell.selected { box-shadow: inset 0 0 0 2px var(--focus); background: #192433; color: #fff; }
.row-number.playing, .row-number.song-playing { background: var(--sample-dim); color: var(--sample); }
.note-cell.playing, .song-cell.playing { background: #282313; box-shadow: inset 3px 0 0 var(--sample); }
.note-cell.playing.selected, .song-cell.playing.selected { box-shadow: inset 3px 0 0 var(--sample), inset 0 0 0 2px var(--focus); }
.song-cell.filled { background: var(--accent-dim); color: var(--accent); }
.song-cell.filled.selected { background: #214436; }
.song-cell.filled.playing { background: #282313; color: var(--sample); }
.pattern-head { display: flex; justify-content: space-between; gap: 8px; padding: 5px 7px; overflow-x: auto; }
.pattern-slot-bar, .voice-bar, .pattern-slots { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.pattern-slots { min-width: 0; }
.pattern-slot { min-width: 34px; height: 26px; padding: 0 6px; color: var(--muted); }
.pattern-slot.active { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); }
.mini { width: 26px; height: 26px; padding: 0; color: var(--muted); font-size: 16px; }
.mini:hover, .pattern-slot:hover, .sample-slot:hover { border-color: var(--line-bright); color: var(--ink); }
.mini.accent { color: var(--accent); }
.voice-bar { color: var(--muted); }
.pattern-grid { display: grid; grid-auto-rows: 32px; min-width: 410px; }
.note-cell { font-size: 12px; letter-spacing: .02em; }
.note-cell.has-note { color: var(--ink); }
.sample-view { height: 100%; padding: 6px; }
.sample-view iframe { width: 100%; height: 100%; border: 1px solid var(--line); background: var(--panel); }
.sample-rack > strong { color: var(--sample); }
.sample-slots { display: flex; gap: 4px; min-width: 0; overflow-x: auto; }
.sample-slot { width: 38px; height: 32px; flex: 0 0 38px; padding: 0; color: #b5a27c; }
.sample-slot.full { position: relative; color: var(--ink); }
.sample-slot.full::before { content: ""; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.sample-slot.active { border-color: var(--sample); background: var(--sample-dim); color: var(--sample); box-shadow: inset 0 -2px 0 var(--sample); }
.octave-control { margin-left: auto; color: var(--muted); }
.octave-control output { min-width: 24px; color: var(--ink); text-align: center; }
.keymap { color: var(--muted); white-space: nowrap; }

@media (max-width: 980px) {
  .status, .keymap { display: none; }
}