:root{color-scheme:light dark;--bg:#f7f5ef;--card:#fff;--text:#20201e;--muted:#6b6962;--line:#d8d4ca;--accent:#67583c;--accentText:#fff;--soft:#eee9df;--danger:#9a3434;--loop:#a88a54}
@media(prefers-color-scheme:dark){:root{--bg:#171715;--card:#232320;--text:#f4f1e9;--muted:#b8b3a8;--line:#45423a;--accent:#c7a96d;--accentText:#171715;--soft:#302e29;--danger:#ef8d8d;--loop:#c7a96d}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
main{max-width:940px;margin:auto;padding:28px 16px 60px}
h1{font:700 clamp(1.8rem,5vw,3rem)/1.08 Georgia,serif;margin:.2em 0 .15em}
.subtitle{color:var(--muted);margin:0 0 24px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;margin:14px 0}
.movementNav{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;margin:0 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.movementNav label{display:flex;gap:8px;align-items:center;font-weight:650}.movementNav .autoNext{font-weight:500}
.movementNav select{min-height:38px;padding:6px 30px 6px 9px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);font:inherit}
.movementNav input[type=checkbox]{width:18px;height:18px}
.transport{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}
button,input,select{font:inherit}
button{min-height:40px;border:1px solid var(--line);border-radius:9px;background:var(--soft);color:var(--text);padding:7px 12px;cursor:pointer}
button.primary{min-height:44px;width:112px;white-space:nowrap;background:var(--accent);color:var(--accentText);border-color:var(--accent)}
button.small{min-height:34px;padding:4px 9px;font-size:.86rem}
button:disabled{opacity:.55;cursor:default}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:2px}
.seekWrap{min-width:0}.timelineArea{height:30px;position:relative;touch-action:none}.timelineTrack{position:absolute;left:8px;right:8px;top:11px;height:8px;border-radius:999px;background:var(--soft)}
.loopBand,.playedBand{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:999px;pointer-events:none}.loopBand{background:var(--loop);opacity:.38;display:none}.playedBand{background:var(--accent)}
.seekThumb{position:absolute;top:50%;left:0;width:16px;height:16px;border-radius:50%;transform:translate(-50%,-50%);background:var(--accent);border:2px solid var(--card);pointer-events:none}
#seek{position:absolute;left:-10000px;width:1px;height:1px;opacity:0}.loopSummary{height:20px;line-height:20px;text-align:center;margin:0;color:var(--muted);font-size:.84rem;visibility:hidden}
.time{font-variant-numeric:tabular-nums;white-space:nowrap}.barline{display:flex;gap:12px;align-items:center;justify-content:flex-start;margin-top:10px;color:var(--muted)}.barNow{font:700 1.25rem Georgia,serif;color:var(--text)}
.status{min-height:1.4em;margin-top:8px;color:var(--muted)}.status.bad{color:var(--danger)}
.mixerHead{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:6px}.mixerHead strong{font-size:1.05rem}
.mixer{display:grid;gap:2px}.channel{display:grid;grid-template-columns:150px minmax(120px,1fr) 52px auto auto;gap:9px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}.channel:last-child{border-bottom:0}
.channel label{font-weight:650}.channel input{width:100%}.channel output{text-align:right;font-variant-numeric:tabular-nums}
.calnote,.note{color:var(--muted);font-size:.9rem}.calnote{margin:8px 0 0}
.controlsGrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.controlBlock h2{font:700 1.05rem Georgia,serif;margin:0 0 10px}
.speedRow{display:grid;grid-template-columns:auto 1fr 56px;gap:10px;align-items:center}.speedRow input{width:100%}.speedRow output{text-align:right;font-variant-numeric:tabular-nums}
.practice{display:grid;grid-template-columns:auto 90px auto 90px auto;gap:8px;align-items:center}.practice input[type=number]{width:100%;min-height:40px;padding:7px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text)}
.credits{margin-top:14px}.credits details{border-top:1px solid var(--line);padding-top:12px}.credits summary{cursor:pointer;font-weight:700}.credits p,.credits li{color:var(--muted);font-size:.9rem}.credits ul{padding-left:1.25rem}
footer{color:var(--muted);font-size:.9rem;margin-top:28px;border-top:1px solid var(--line);padding-top:18px}
@media(max-width:720px){.transport{grid-template-columns:auto 1fr}.transport .time{grid-column:1/-1;text-align:center}.channel{grid-template-columns:110px minmax(70px,1fr) 46px auto auto;gap:6px}.controlsGrid{grid-template-columns:1fr}.practice{grid-template-columns:1fr 80px 30px 80px 1fr}}

/* A changing Mute/Unmute label must never resize the mixer grid. */
.channel .mute{width:5rem;min-width:5rem;text-align:center;white-space:nowrap;padding-inline:4px}
/* Two-row channels on narrow phones: usable sliders, stable buttons, no horizontal shift. */
@media(max-width:520px){
 .channel{grid-template-columns:minmax(0,1fr) 43px 5rem 45px;gap:5px}
 .channel label{grid-column:1/-1}
 .channel input{grid-column:1}
 .channel output{grid-column:2}
 .channel .mute{grid-column:3}
 .channel .max{grid-column:4;padding-inline:3px}
}