.midi-shell { width:min(1500px,calc(100% - 40px)); }
.midi-heading { padding:30px 0 22px; display:flex; align-items:end; justify-content:space-between; gap:20px; }
.midi-heading h1 { margin:0; font-size:clamp(34px,5vw,58px); line-height:1; letter-spacing:-.05em; }
.midi-heading p:last-child { color:var(--muted); }
.midi-player { border-radius:28px; background:#fff; box-shadow:var(--shadow); overflow:hidden; scroll-padding-top:92px; }
.midi-toolbar { position:sticky; z-index:12; top:0; padding:16px; display:grid; grid-template-columns:auto auto minmax(220px,1fr) repeat(3,minmax(150px,.45fr)) minmax(145px,.4fr); align-items:end; gap:12px; background:var(--night); color:#fff; box-shadow:0 8px 20px rgba(21,20,38,.2); }
.midi-play,.midi-icon-button { height:48px; border:0; border-radius:14px; font:inherit; font-weight:850; }
.midi-play { min-width:105px; background:var(--coral); color:#fff; }
.midi-icon-button { width:48px; background:#302f45; color:#fff; }
.midi-position { height:48px; display:grid; grid-template-columns:40px 1fr 40px; align-items:center; gap:8px; font-size:11px; }
.midi-position input,.midi-inline input { accent-color:var(--coral); }
.midi-control { display:grid; gap:5px; color:#aaa9b8; font-size:11px; font-weight:800; }
.midi-control select { height:48px; padding:0 10px; border:1px solid #3d3b50; border-radius:12px; background:#252438; color:#fff; }
.midi-inline { height:48px; display:flex; align-items:center; gap:8px; }
.midi-inline output { min-width:64px; color:#fff; }
.midi-loopbar { min-height:58px; padding:10px 18px; display:flex; align-items:center; flex-wrap:wrap; gap:16px; border-bottom:1px solid var(--line); background:#f8f6fa; font-size:12px; font-weight:750; }
.midi-loopbar input[type=number] { width:58px; padding:7px; border:1px solid var(--line); border-radius:8px; }
.midi-local-file { margin-left:auto; padding:8px 11px; border-radius:10px; background:#e9e6f6; color:#514a9b; cursor:pointer; }
.midi-local-file input { position:absolute; width:1px; height:1px; opacity:0; }
.midi-status { padding:45px; text-align:center; color:var(--muted); }
.midi-status.ready { display:none; }
.midi-status.error { color:#b83e36; }
.midi-score { padding:24px; display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:14px; background:#eeece7; }
.midi-measure { position:relative; min-width:0; padding:8px; border:2px solid transparent; border-radius:14px; background:#fff; transition:.12s; scroll-margin:120px; }
.midi-measure.current { border-color:var(--coral); background:#fff7f4; box-shadow:0 8px 25px rgba(255,102,90,.18); }
.midi-measure.current::after { content:""; position:absolute; z-index:8; top:18px; bottom:12px; left:var(--playhead-left,4%); width:3px; border-radius:3px; background:var(--coral); box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 12px rgba(255,102,90,.8); pointer-events:none; transition:left .04s linear; }
.midi-measure-number { position:absolute; z-index:2; top:5px; left:9px; color:var(--muted); font-size:10px; font-weight:850; }
.midi-measure svg { width:100%; height:auto; }
.midi-note-active path,.midi-note-active ellipse { fill:var(--coral)!important; stroke:var(--coral)!important; filter:drop-shadow(0 0 3px rgba(255,102,90,.75)); }
.midi-help { margin:0; padding:12px 20px 18px; color:var(--muted); font-size:11px; background:#eeece7; }

@media(max-width:1000px) {
    .midi-toolbar { grid-template-columns:auto auto 1fr 1fr; }
    .midi-position { grid-column:3/-1; }
    .midi-control { grid-column:span 2; }
}
@media(max-width:620px) {
    .midi-shell { width:100%; }
    .midi-heading { padding:20px 12px; align-items:start; flex-direction:column; }
    .midi-player { border-radius:0; scroll-padding-top:74px; }
    .midi-toolbar { display:flex; align-items:center; overflow-x:auto; padding:9px; gap:8px; }
    .midi-play { min-width:92px; }
    .midi-position { min-width:220px; }
    .midi-control { min-width:170px; }
    .midi-loopbar { align-items:flex-start; flex-direction:column; }
    .midi-local-file { margin-left:0; }
    .midi-score { padding:8px; grid-template-columns:1fr; }
    .midi-measure { overflow-x:auto; }
}
@media (prefers-reduced-motion: reduce) {
    .midi-measure { transition:none; }
    .midi-measure.current { scroll-behavior:auto; }
}