:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;--bg: #111118;--surface: #1a1a24;--border: #2a2a3a;--accent: #6366f1;--accent-hover: #818cf8;--note-color: #6366f1;--note-playing: #a78bfa;--red: #ef4444;--text: #e2e2f0;--text-dim: #8888aa;--key-white: #e8e8f0;--key-black: #2a2a38}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text)}.editor{display:flex;flex-direction:column;height:100vh;overflow:hidden}.toolbar{display:flex;align-items:center;gap:1rem;padding:.5rem 1rem;background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap;z-index:10}.toolbar-group{display:flex;align-items:center;gap:.5rem}.toolbar-label{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--text-dim);white-space:nowrap}.toolbar-value{font-size:.8rem;font-variant-numeric:tabular-nums;min-width:2.5rem;text-align:center;color:var(--text)}.btn{background:var(--border);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:.35rem .65rem;font-size:1rem;cursor:pointer;transition:background .15s;display:flex;align-items:center;justify-content:center;min-width:2.2rem;height:2rem}.btn:hover{background:#3a3a4e}.btn-play{background:var(--accent);border-color:var(--accent)}.btn-play:hover{background:var(--accent-hover)}.btn-clear{color:var(--red)}.slider{width:80px;accent-color:var(--accent);cursor:pointer}.select{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:4px;padding:.2rem .4rem;font-size:.8rem;cursor:pointer}.tool-toggle{display:flex;gap:2px;background:var(--bg);border-radius:6px;padding:2px;border:1px solid var(--border)}.tool-btn{background:transparent;border:none;color:var(--text-dim);padding:.25rem .55rem;border-radius:4px;font-size:.75rem;cursor:pointer;transition:all .15s}.tool-btn.active{background:var(--accent);color:#fff}.tool-btn:hover:not(.active){color:var(--text)}.piano-roll-container{flex:1;display:flex;overflow:hidden}.piano-keys{flex-shrink:0;display:flex;flex-direction:column;background:var(--surface);border-right:2px solid var(--border);z-index:5;overflow:hidden}.piano-key{display:flex;align-items:center;justify-content:flex-end;padding-right:6px;border-bottom:1px solid var(--border);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .1s}.piano-key.white{background:var(--key-white);color:#222}.piano-key.black{background:var(--key-black);color:#aaa}.piano-key:hover{filter:brightness(.85)}.piano-key.c-note{border-bottom:2px solid var(--accent)}.key-label{font-size:.6rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;pointer-events:none}.grid-scroll{flex:1;overflow:auto;position:relative}.beat-header{display:flex;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:3}.beat-number{display:flex;align-items:center;justify-content:center;font-size:.65rem;color:var(--text-dim);font-variant-numeric:tabular-nums;border-right:1px solid var(--border);flex-shrink:0}.beat-number.bar-start{color:var(--text);font-weight:600;border-right:2px solid var(--accent)}.note-grid{position:relative}.grid-row{display:flex;position:relative;z-index:1}.grid-cell{flex-shrink:0;border-right:1px solid rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.04);cursor:crosshair;transition:background .08s}.grid-cell:hover{background:#6366f11f}.grid-cell.cell-dark{background:#00000026}.grid-cell.cell-dark:hover{background:#6366f126}.grid-cell.cell-bar-start{border-left:1px solid rgba(255,255,255,.08)}.bar-line{position:absolute;top:0;bottom:0;width:1px;background:#6366f133;z-index:2;pointer-events:none}.playback-cursor{position:absolute;top:0;bottom:0;width:2px;background:var(--accent);z-index:4;pointer-events:none;box-shadow:0 0 8px #6366f199;transition:left .05s linear}.placed-note{position:absolute;background:var(--note-color);border:1px solid rgba(255,255,255,.2);border-radius:3px;z-index:3;cursor:pointer;transition:filter .1s;box-shadow:0 1px 3px #0000004d}.placed-note:hover{filter:brightness(1.3);z-index:4}.note-preview{position:absolute;background:#6366f14d;border:1px dashed rgba(99,102,241,.5);border-radius:3px;z-index:2;pointer-events:none}.info-bar{display:flex;align-items:center;gap:1.5rem;padding:.4rem 1rem;background:var(--surface);border-top:1px solid var(--border);font-size:.75rem;color:var(--text-dim)}.hint{margin-left:auto;opacity:.6}.grid-scroll::-webkit-scrollbar{width:8px;height:8px}.grid-scroll::-webkit-scrollbar-track{background:var(--bg)}.grid-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.grid-scroll::-webkit-scrollbar-thumb:hover{background:#4a4a5e}@media(max-width:700px){.toolbar{gap:.5rem;padding:.4rem .5rem}.slider{width:50px}.hint{display:none}}