.note-explorer{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.note-toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.note-toolbar button{font-size:12px;padding:6px 10px;min-height:36px;transition:background 180ms ease,border-color 180ms ease,color 180ms ease}
.note-toolbar button[aria-pressed=true]{border-color:#726589;background:#272330;color:#e0d7ff}
.note-toolbar #note-focus{margin-left:auto}.note-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:12px 0}
.note-tools label{display:inline-flex;align-items:center;gap:7px;font-size:11px;white-space:nowrap}.note-tools input[type=range]{width:95px;min-width:0;max-width:95px;padding:0;margin:0;accent-color:#b9acf3}.note-tools label[hidden]{display:none}.note-tools input[type=checkbox]{min-width:0;width:auto}.note-range{font-size:10px;font-variant-numeric:tabular-nums;color:var(--muted);margin-left:auto}
.note-explorer svg{width:100%;height:auto;display:block;background:var(--bg);transition:opacity 180ms ease}
.note-field{fill:#121215}.note-grid{stroke:#34313d;stroke-width:.6;opacity:.65}.note-drum-grid{stroke:#453934;stroke-width:.5;opacity:.65}.note-time-grid{stroke:#39353f;stroke-width:.5;stroke-dasharray:1 6;opacity:.55}
.note-axis-label{fill:#85818f;font:10px Inter,system-ui,sans-serif}.note-event{stroke-width:.45;stroke:currentColor}
.note-melody{fill:#afa0dd;color:#afa0dd}.note-drum{fill:none;stroke:var(--hit-color,#c69783);stroke-width:var(--hit-width,2)}
.note-event.is-sounding{fill:#f6f0ff;color:#f6f0ff;stroke-width:1.15}.note-drum.is-sounding{stroke:#ffefdf;stroke-width:calc(var(--hit-width,2) + 1.5)}
.note-event.is-releasing{fill:#c8b9ec;color:#c8b9ec}.note-drum.is-releasing{stroke:var(--hit-color,#c69783);stroke-width:var(--hit-width,2)}
.note-selection{fill:#b9acf3;fill-opacity:.035;stroke:#8a78b5;stroke-width:.7;stroke-opacity:.6}
.note-cursor{transition:opacity 140ms ease}.note-cursor line{stroke:#efe8ff;stroke-width:.8;opacity:.85}.note-cursor path{fill:#d9ccff}
.overview-track{fill:#1c1b22}.overview-density{fill:#696073;opacity:.5}.overview-selection{fill:#b9acf3;fill-opacity:.22}.overview-window{fill:#b9acf3;fill-opacity:.035;stroke:#a392cd;stroke-width:.8}
.note-readout{fill:#b6a9ce;font:11px Inter,system-ui,sans-serif;letter-spacing:.06em}.note-time{fill:#928b9e;font:10px Inter,system-ui,sans-serif;font-variant-numeric:tabular-nums}
.note-explorer .small{font-size:11px;margin:9px 0 3px;line-height:1.5}
#intro-notes .midi-note,#intro-drums .drum-hit{transition:fill 80ms ease-out,opacity 210ms ease-out}
#intro-notes .midi-note.active{fill:#f2eaff}#intro-drums .drum-hit.active{fill:#ffe6d3}
@media(prefers-reduced-motion:reduce){.note-explorer svg,.note-toolbar button,.note-cursor,#intro-notes .midi-note,#intro-drums .drum-hit{transition:none}}
@media(max-width:850px){.workspace>.panel{height:auto;max-height:none}.note-explorer{margin-top:10px;padding-top:10px}.note-toolbar button{min-height:40px}.note-tools{gap:8px;margin:9px 0}.note-tools input[type=range]{width:78px;max-width:78px}.note-explorer svg{min-height:160px}.note-range{font-size:9px}}

.note-beat-grid{stroke:#5b5268;stroke-width:.6;opacity:.4}
@media(max-width:950px){.layout>.panel{width:100%;min-width:0;height:auto;max-height:none;overflow:visible}}
.note-navigation{display:flex;gap:6px;align-items:center;margin:9px 0}.note-navigation[hidden]{display:none}.note-navigation button{min-height:36px;padding:5px 11px;font-size:15px}.note-navigation button:disabled{opacity:.3;cursor:default}.note-navigation select{min-width:0;flex:1;background:#19191c;color:#b9afc9;border:1px solid #38323e;border-radius:0;font:11px Inter,system-ui,sans-serif;padding:9px 6px}.note-phrase-marker{cursor:pointer}.note-phrase-marker line{stroke:#7e718f;stroke-width:1}.note-phrase-marker:hover line,.note-phrase-marker:focus line,.note-phrase-marker line.current{stroke:#e3d6ff;stroke-width:2}.note-phrase-marker:focus{outline:none}

@media(max-width:850px){.note-axis-label{font-size:15px}.note-readout,.note-time{font-size:14px}.note-navigation button{min-height:42px}.note-navigation select{font-size:12px;min-height:42px}}
.note-navigation{display:block;border-top:1px solid #302c37;padding-top:10px}.note-navigation-title{font:11px Inter,system-ui,sans-serif;color:#c4b5df;margin-bottom:7px;letter-spacing:.03em}.note-navigation-controls{display:flex;align-items:center;gap:6px}.note-navigation-controls[hidden]{display:none}.note-map-seek{cursor:crosshair}.note-map-seek:focus{outline:1px solid #b9acf3;outline-offset:2px}


.note-section-divider{stroke:#62536b;stroke-width:.6;opacity:.5}.note-section-label{fill:#b6a6cc;font:7px Inter,system-ui,sans-serif;letter-spacing:.1em}

.note-drum-attack{stroke:none}.note-drum-attack.is-sounding{fill:#fff2e5}.note-drum-attack.is-releasing{fill:var(--hit-color,#c69783)}

.note-repeat-bands{pointer-events:none}.note-repeat{fill:#b9acf3;fill-opacity:.065;stroke:#8a78b5;stroke-width:.45;stroke-opacity:.24}.overview-repeat{fill:#a899ca;fill-opacity:.2;pointer-events:none}.note-selection{fill-opacity:.07;stroke-opacity:.85;stroke-width:1.1}

/* Reserve the note viewport independently of the number of drum lanes. */
.note-explorer svg,#intro-notes{aspect-ratio:600 / 414;contain:layout paint}

/* Keep the player readable without a second scrolling viewport on phones. */
header>*,.workspace>*,.layout>*,.note-explorer{min-width:0}
@media(max-width:850px){
 .workspace,.layout{width:100%;min-width:0;height:auto;max-height:none;align-items:stretch}
 .workspace>.panel,.layout>.panel{width:100%;min-width:0;height:auto;max-height:none;overflow:visible}
 .workspace>.list,.layout>.list{width:100%;min-width:0;flex:0 0 auto;height:min(520px,65svh);min-height:240px;max-height:none;overflow-y:auto}
 .panel h2,.panel .song,.panel .artist{overflow-wrap:anywhere}
 .facts,.metrics{flex-wrap:wrap}
 .note-toolbar #note-focus{margin-left:0}
 .note-navigation-controls{min-width:0}
 nav{flex-wrap:wrap;overflow:visible}
}