*{margin:0;padding:0;box-sizing:border-box}:root[data-theme=dark]{--bg: #0c1016;--panel: #141a23;--text: #e6edf3;--text-dim: #8b949e;--border: #2a3341;--cell-off: #1b2431;--cell-off-alt: #212c3c;--cell-on: #9aa8ba;--cell-glow: rgba(154, 168, 186, .45);--accent: #9aa8ba;--btn-bg: #1b2431;--btn-hover: #263243;--on-s: 78%;--on-l: 64%;--glow-a: .55;--off-s: 50%;--off-l: 62%;--off-a: .1;--off-a-alt: .17}:root[data-theme=light]{--bg: #f4f6f9;--panel: #ffffff;--text: #1f2328;--text-dim: #59636e;--border: #d4dbe4;--cell-off: #e2e8f0;--cell-off-alt: #d5deea;--cell-on: #5f6c7b;--cell-glow: rgba(95, 108, 123, .35);--accent: #5f6c7b;--btn-bg: #eef2f7;--btn-hover: #dfe7f0;--on-s: 72%;--on-l: 46%;--glow-a: .4;--off-s: 60%;--off-l: 42%;--off-a: .1;--off-a-alt: .17}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,sans-serif;transition:background .2s ease,color .2s ease}.app{height:100vh;height:100dvh;display:flex;flex-direction:column}.panel{background:var(--panel);border-bottom:1px solid var(--border)}.toolbar{display:flex;align-items:center;gap:16px;padding:10px 16px;border-bottom:1px solid var(--border)}.title{font-size:16px;font-weight:600;letter-spacing:.08em;color:var(--accent);margin-right:auto;-webkit-user-select:none;user-select:none}.toolbar-group{display:flex;gap:8px}button{font:inherit;font-size:13px;color:var(--text);background:var(--btn-bg);border:1px solid var(--border);border-radius:6px;padding:6px 12px;cursor:pointer;transition:background .15s ease}button:hover:not(:disabled){background:var(--btn-hover)}button:disabled{opacity:.4;cursor:default}.controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding:10px 16px}.transport,.settings{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}.control{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-dim);-webkit-user-select:none;user-select:none}.control .value{min-width:3.5ch;text-align:right;font-variant-numeric:tabular-nums;color:var(--text)}input[type=range]{width:120px;accent-color:var(--accent)}select{font:inherit;font-size:13px;color:var(--text);background:var(--btn-bg);border:1px solid var(--border);border-radius:6px;padding:5px 8px;cursor:pointer}button.play{min-width:88px;font-weight:600}.switch{position:relative;display:inline-block;width:34px;height:20px}.switch input{opacity:0;width:0;height:0}.switch-slider{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--btn-bg);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:background .15s ease,border-color .15s ease}.switch-slider:before{content:"";position:absolute;width:14px;height:14px;left:2px;top:2px;border-radius:50%;background:var(--text-dim);transition:transform .15s ease,background .15s ease}.switch input:checked+.switch-slider{background:var(--accent);border-color:var(--accent)}.switch input:checked+.switch-slider:before{transform:translate(14px);background:var(--bg)}.switch input:focus-visible+.switch-slider{outline:2px solid var(--accent);outline-offset:2px}.loading-hint{font-size:12px;font-style:italic;color:var(--text-dim);animation:loading-pulse 1.2s ease-in-out infinite}@keyframes loading-pulse{50%{opacity:.4}}button.play.playing{color:var(--bg);background:var(--accent);border-color:var(--accent)}.stage{flex:1;display:flex;padding:16px;min-height:0;overflow:auto}.grid-layout{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px;margin:auto;width:min(100%,84vmin);width:min(100%,calc(100dvh - 210px))}@media(min-aspect-ratio:6/5){.app{flex-direction:row}.panel{display:flex;flex-direction:column;width:230px;flex-shrink:0;border-bottom:none;border-right:1px solid var(--border);overflow-y:auto}.toolbar{flex-wrap:wrap;row-gap:8px}.controls,.transport,.settings{flex-direction:column;align-items:stretch}.control{justify-content:space-between}.control select{flex:1;min-width:0}input[type=range]{flex:1;width:auto;min-width:0}button.play{width:100%}.grid-layout{width:min(100%,84vmin);width:min(100%,calc(100dvh - 90px))}}.row-labels{grid-column:1;grid-row:1;display:grid;grid-template-rows:repeat(32,1fr);gap:2px;min-width:26px}.row-label{--h: 187;display:flex;align-items:center;justify-content:flex-end;padding-right:2px;font-size:9px;line-height:1;color:var(--text-dim);-webkit-user-select:none;user-select:none;transition:color .3s ease}.row-label.lit{color:hsl(var(--h) var(--on-s) var(--on-l));transition:none}.col-labels{grid-column:2;grid-row:3;display:grid;grid-template-columns:repeat(32,1fr);gap:2px;margin-top:-2px}.col-label{text-align:center;font-size:9px;line-height:1;color:var(--text-dim);opacity:.55;-webkit-user-select:none;user-select:none;transition:color .25s ease,opacity .25s ease}.col-label.beat{opacity:1}.col-label.lit{color:var(--accent);opacity:1;transition:none}.grid{grid-column:2;grid-row:1;position:relative;display:grid;grid-template-columns:repeat(32,1fr);grid-template-rows:repeat(32,1fr);gap:2px;width:100%;aspect-ratio:1;touch-action:none;-webkit-user-select:none;user-select:none;cursor:crosshair}.cell{--h: 187;border-radius:3px;background:hsl(var(--h) var(--off-s) var(--off-l) / var(--off-a));transition:background .1s ease,box-shadow .1s ease}.cell.alt{background:hsl(var(--h) var(--off-s) var(--off-l) / var(--off-a-alt))}.cell.root:not(.on){filter:brightness(1.22)}.cell.on,.cell.alt.on{background:hsl(var(--h) var(--on-s) var(--on-l));box-shadow:0 0 6px hsl(var(--h) var(--on-s) var(--on-l) / var(--glow-a))}.empty-hint{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:14px;letter-spacing:.04em;color:var(--text-dim);pointer-events:none;-webkit-user-select:none;user-select:none}.error-hint{font-size:12px;color:#e5534b}.playhead-lights{grid-column:2;grid-row:2;display:grid;grid-template-columns:repeat(32,1fr);gap:2px;height:6px}.light{border-radius:3px;background:var(--cell-off);opacity:.7;transition:background .25s ease,box-shadow .25s ease,opacity .25s ease}.light.lit{background:var(--accent);box-shadow:0 0 8px var(--cell-glow);opacity:1;transition:none}.cell.on.hit{animation:cell-hit .3s ease-out}@keyframes cell-hit{0%{transform:scale(1.3);filter:brightness(1.7);box-shadow:0 0 16px hsl(var(--h) var(--on-s) var(--on-l) / .9)}to{transform:scale(1);filter:brightness(1);box-shadow:0 0 6px hsl(var(--h) var(--on-s) var(--on-l) / var(--glow-a))}}