:root{color:#f4f4f5;background:#18181b;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*,:before,:after{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input,select{font:inherit}.app-shell{max-width:1440px;margin:0 auto;padding:40px 24px}.app-header{justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:24px;display:flex}h1{margin:0;font-size:2rem}h2{margin:0 0 16px;font-size:1.2rem}.description{color:#a1a1aa;margin:12px 0 0}.card{background:#27272a;border:1px solid #3f3f46;border-radius:16px;margin-top:20px;padding:20px}.file-label{margin-bottom:12px;font-weight:700;display:block}.file-info,.midi-summary,.track-stats{color:#d4d4d8;background:#18181b;border-radius:12px;margin-top:16px;padding:14px;line-height:1.7}.loading-status{color:#d4d4d8;align-items:center;gap:12px;min-height:28px;display:flex}.loading-spinner{border:3px solid #52525b;border-top-color:#7dd3fc;border-radius:999px;flex:none;width:20px;height:20px;animation:.8s linear infinite loading-spin}@keyframes loading-spin{to{transform:rotate(360deg)}}.settings-grid{gap:14px;display:grid}.settings-grid label{color:#d4d4d8;gap:8px;font-weight:700;display:grid}.setting-select,.setting-input{color:#f4f4f5;background:#18181b;border:1px solid #52525b;border-radius:8px;width:min(100%,440px);padding:9px 10px}.setting-help{color:#a1a1aa;margin:0;line-height:1.6}.workspace{grid-template-columns:320px minmax(0,1fr);align-items:start;gap:20px;display:grid}.track-sidebar{position:sticky;top:20px}.track-list{gap:10px;display:grid}.track-row{background:#18181b;border:1px solid #3f3f46;border-radius:12px;padding:10px}.track-row.selected{border-color:#f4f4f5;box-shadow:inset 0 0 0 1px #f4f4f5}.track-select-button{color:#f4f4f5;text-align:left;cursor:pointer;background:0 0;border:0;grid-template-columns:auto 1fr;align-items:center;gap:8px;width:100%;padding:0;display:grid}.track-color{border-radius:999px;width:14px;height:14px;display:inline-block}.track-color.large{width:18px;height:18px}.track-name{text-overflow:ellipsis;white-space:nowrap;font-weight:700;overflow:hidden}.track-count{color:#a1a1aa;grid-column:2;font-size:.85rem}.percussion-badge{color:#fde68a;vertical-align:middle;background:#713f12;border-radius:999px;margin-left:6px;padding:1px 6px;font-size:.72rem;display:inline-block}.track-toggle{color:#d4d4d8;align-items:center;gap:6px;margin:10px 12px 0 0;font-size:.9rem;display:inline-flex}.main-panel{min-width:0}.piano-roll{background:#0f172a;border:1px solid #334155;border-radius:12px;overflow:hidden}.piano-roll-header{flex-wrap:wrap;margin-bottom:16px}.piano-roll-header h2{margin-bottom:0}.zoom-control{color:#d4d4d8;align-items:center;gap:10px;font-weight:700;display:flex}.zoom-control input{cursor:pointer;width:180px}.zoom-value{color:#a1a1aa;text-align:right;min-width:44px}.piano-roll.empty{color:#a1a1aa;background:#18181b;border-color:#3f3f46;padding:18px}.piano-scroll{max-height:560px;overflow:auto}.piano-svg{min-width:100%;display:block}.piano-bg{fill:#eaf2ff}.grid-line{stroke:#bfdbfe;stroke-width:1px}.grid-line.octave{stroke:#334155;stroke-width:1.3px}.beat-line{stroke:#93c5fd;stroke-width:1px}.beat-line.measure{stroke:#1d4ed8;stroke-width:1.4px}.pitch-label{fill:#1f2937;dominant-baseline:middle;font-size:10px}.piano-note{cursor:pointer}.selected-track-header{align-items:center;gap:12px;margin-bottom:16px;display:flex}.muted{color:#a1a1aa}.warning-text{color:#fde68a;background:#422006;border-radius:10px;padding:12px;line-height:1.6}.notes-details{margin-top:16px}.notes-details summary{cursor:pointer;color:#d4d4d8;font-weight:700}.notes-output,.placement-preview{color:#d4d4d8;background:#18181b;border-radius:12px;max-height:440px;margin:12px 0 0;padding:16px;font-size:.88rem;line-height:1.6;overflow:auto}.placement-preview{max-height:520px}@media (width<=920px){.top-grid,.workspace{grid-template-columns:1fr}.track-sidebar{position:static}}.top-grid{grid-template-columns:minmax(260px,1fr) minmax(260px,1fr) minmax(260px,1fr);align-items:stretch;gap:20px;margin-top:20px;display:grid}.top-grid .card{margin-top:0}.section-header{justify-content:space-between;align-items:center;gap:16px;display:flex}.primary-button{color:#eff6ff;cursor:pointer;background:#1d4ed8;border:1px solid #60a5fa;border-radius:10px;padding:9px 14px;font-weight:700}.primary-button:hover{background:#2563eb}.primary-button:disabled,input:disabled{cursor:wait;opacity:.65}.preset-label{color:#d4d4d8;gap:6px;font-weight:700;display:grid}.compact-select{width:280px}.percussion-toolbar{flex-wrap:wrap;align-items:end;gap:12px;margin-bottom:14px;display:flex}.secondary-button{color:#f4f4f5;cursor:pointer;background:#18181b;border:1px solid #52525b;border-radius:10px;padding:8px 12px;font-weight:700}.secondary-button:hover{background:#3f3f46}.percussion-table-wrap{background:#18181b;border:1px solid #3f3f46;border-radius:12px;overflow:auto}.percussion-table{border-collapse:collapse;width:100%;min-width:780px}.percussion-table th,.percussion-table td{text-align:left;vertical-align:middle;border-bottom:1px solid #3f3f46;padding:10px}.percussion-table th{color:#d4d4d8;background:#27272a;font-size:.9rem}.percussion-table td{color:#e4e4e7}.percussion-table tr:last-child td{border-bottom:0}.percussion-block-input{color:#f4f4f5;background:#0f0f12;border:1px solid #52525b;border-radius:8px;width:100%;min-width:220px;padding:7px 8px}.percussion-note-input{color:#f4f4f5;background:#0f0f12;border:1px solid #52525b;border-radius:8px;width:80px;padding:7px 8px}