:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#0b1118;color:#e7edf2;font-synthesis:none;--muted:#8fa8b7;--accent:#bceee0;--edge:16px;--corner-width:230px}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{background:radial-gradient(ellipse at center,#172a36 0%,#0b1118 72%)}button,select,input{font:inherit}button,select{color:inherit}button,summary{cursor:pointer}a{color:#bfe5dc}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible,canvas:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.player{position:fixed;inset:0;display:grid;place-items:center;isolation:isolate}#record{display:block;width:min(100vw,100vh);height:min(100vw,100vh);width:min(100vw,100dvh);height:min(100vw,100dvh);touch-action:none;cursor:pointer}#record:active{cursor:grabbing}.corner{position:fixed;z-index:2;display:flex;flex-direction:column;gap:8px;width:var(--corner-width);pointer-events:none}.corner button,.corner label,.corner input,.corner details,.corner a{pointer-events:auto}.top-left{top:calc(var(--edge) + env(safe-area-inset-top));left:calc(var(--edge) + env(safe-area-inset-left))}.top-right{top:calc(var(--edge) + env(safe-area-inset-top));right:calc(var(--edge) + env(safe-area-inset-right));align-items:flex-end}.bottom-left{bottom:calc(var(--edge) + env(safe-area-inset-bottom));left:calc(var(--edge) + env(safe-area-inset-left))}.bottom-right{bottom:calc(var(--edge) + env(safe-area-inset-bottom));right:calc(var(--edge) + env(safe-area-inset-right));align-items:flex-end;text-align:right}.control-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:#afc4cf;max-width:100%;text-shadow:0 1px 5px #061019}.top-right .control-row{justify-content:flex-end}select{background:rgba(25,46,58,.94);border:1px solid #3b5361;border-radius:8px;padding:8px;min-height:36px;font-size:12px;color:#e5f1f3}#track-select{width:145px}#time-zoom,#speed{min-width:68px}.quiet-button,.about>summary{border:1px solid #344b58;border-radius:8px;background:rgba(17,35,45,.92);padding:9px 12px;color:#bed0d8;font-size:11px;min-height:36px}.quiet-button[aria-pressed=true]{background:#addfce;color:#12332c;border-color:#addfce}.caption{font-size:10px;color:var(--muted);line-height:1.4;text-shadow:0 1px 5px #061019}.play-buttons{display:flex;align-items:center;gap:5px}.play-button{flex:1;border:0;border-radius:9px;background:#c7f2e7;color:#132a2c;padding:11px 12px;min-height:40px;font-size:12px;font-weight:600;white-space:nowrap}.small-button{border:1px solid #2f4653;border-radius:8px;background:rgba(17,35,45,.9);color:#bfd0d7;padding:10px 6px;min-width:41px;min-height:40px;font-size:11px}button:hover,summary:hover{filter:brightness(1.14)}.seek-row{height:16px;display:flex;align-items:center}.seek-row input{width:100%;height:4px;margin:0;accent-color:#a2e5d4;cursor:pointer}output{font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap;color:#c2d8df}.transport{gap:5px}.gesture-hint{font-size:10px;color:#8ca6b4;line-height:1.4;text-shadow:0 1px 5px #061019}.about>summary{list-style:none;width:max-content}.about>summary::-webkit-details-marker{display:none}.about[open]>summary{background:#254152;color:#e0eee9}.about-panel{position:absolute;right:0;bottom:calc(100% + 12px);width:350px;max-width:calc(100vw - 2 * var(--edge));max-height:calc(100vh - 100px);max-height:calc(100dvh - 100px);overflow:auto;padding:18px 20px;border:1px solid #3a5260;border-radius:12px;background:rgba(13,28,38,.98);box-shadow:0 12px 50px #0008;text-align:left;font-size:12px;line-height:1.55;color:#a9c0cd;pointer-events:auto}.about-panel h1{font-size:20px;margin:0;color:#e1eeee}.about-panel h1 span{display:block;font-size:11px;font-weight:400;color:#96b2c1;margin-top:2px}.about-panel p{margin:12px 0}kbd{background:#29414e;padding:2px 4px;border-radius:3px;font-size:11px}.pitch-legend{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:10px;padding:8px 0}.pitch-legend span{display:flex;align-items:center;gap:4px}.pitch-legend i{width:11px;height:3px;border-radius:3px}.native-controls{margin-top:10px}.native-controls summary{font-size:11px;cursor:pointer;color:#c1d6de}.native-controls audio{display:block;width:100%;height:40px;margin-top:10px}noscript{position:fixed;left:20px;top:20px}[hidden]{display:none!important}
@media(max-width:1100px){:root{--corner-width:190px;--edge:12px}#track-select{width:120px}.control-row{font-size:10px}.caption,.gesture-hint{font-size:9px}}
@media(max-width:600px){:root{--corner-width:170px;--edge:10px}.corner{gap:7px}.control-row{font-size:10px;gap:5px}select{font-size:11px;min-height:36px;padding:7px}#track-select{width:108px}#time-zoom,#speed{min-width:60px}.play-button{font-size:11px;padding:11px 8px}.small-button{min-width:34px;font-size:10px;padding:10px 4px}.transport{gap:4px}.gesture-hint{max-width:145px}.about-panel{width:330px;padding:15px}.quiet-button,.about>summary{font-size:10px;padding:9px 10px}#play-status{max-width:170px}}
@media(max-aspect-ratio:6/5) and (min-aspect-ratio:4/5){:root{--corner-width:164px;--edge:9px}.top-left .caption{max-width:150px;font-size:9px}.control-row{font-size:10px;gap:5px}#track-select{width:106px}select{min-height:32px;padding:6px;font-size:11px}.quiet-button,.about>summary{min-height:32px;padding:7px 9px}.play-button,.small-button{min-height:35px;padding-top:8px;padding-bottom:8px}.corner{gap:6px}.transport{gap:3px}}
@media(max-height:450px){:root{--edge:8px;--corner-width:168px}.caption,.gesture-hint{font-size:9px}.control-row{font-size:10px}#track-select{width:108px}select{min-height:32px;padding:6px}.play-button,.small-button{min-height:34px;padding-top:8px;padding-bottom:8px}.quiet-button,.about>summary{min-height:32px;padding:7px 9px}.corner{gap:5px}.transport{gap:3px}}
.corner-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:100%;pointer-events:auto}.comments-panel{position:absolute;right:0;bottom:calc(100% + 12px);width:370px;max-width:calc(100vw - 2 * var(--edge) - env(safe-area-inset-left) - env(safe-area-inset-right));max-height:calc(100vh - 145px);max-height:calc(100dvh - 145px);overflow:auto;overscroll-behavior:contain;padding:18px;border:1px solid #3a5260;border-radius:12px;background:rgba(13,28,38,.98);box-shadow:0 12px 50px #0008;text-align:left;font-size:12px;line-height:1.45;color:#c2d4dd;pointer-events:auto}.comments-panel *{pointer-events:auto}.comments-heading,.comments-list-heading,.comment-submit-row,.comment-meta,.comment-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}.comments-heading h2{margin:0;color:#e1eeee;font-size:18px;font-weight:600}.comments-heading .quiet-button{padding:7px 10px;min-height:32px}.comments-intro{font-size:11px;color:#91aebd;margin:8px 0 16px}#comments-form{display:flex;flex-direction:column;gap:6px}#comments-form>label{font-size:11px;color:#abc2cc}#comments-form>input,#comments-form>textarea{display:block;width:100%;min-width:0;border:1px solid #405967;border-radius:7px;background:#10212d;color:#ecf4f5;padding:9px 10px;font:inherit}#comments-form>textarea{resize:vertical;min-height:76px;max-height:180px;line-height:1.5;margin-bottom:3px}#comments-form>input{margin-bottom:4px}.comments-panel textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.comments-panel ::placeholder{color:#7895a5}.comment-time-option{display:flex;gap:5px;align-items:center;font-size:11px;color:#b8ced7;cursor:pointer;white-space:nowrap}.comment-time-option input{margin:0 2px 0 0;accent-color:#a2e5d4;width:15px;height:15px}.comment-submit{border:0;border-radius:7px;background:#c7f2e7;color:#132a2c;padding:9px 12px;min-height:36px;font-weight:600;font-size:11px}.comments-status{font-size:11px;color:#b0d9ce;min-height:16px;margin:12px 0 10px}.comments-status.is-error{color:#ffbda9}.comments-list-heading{border-top:1px solid #2b424f;padding-top:12px}.comments-list-heading h3{font-size:12px;font-weight:500;margin:0;color:#b3cad4}.comment-link{border:0;padding:5px 0;background:transparent;font-size:11px;color:#9cbfcf;min-height:28px;text-decoration:underline;text-underline-offset:3px}.comments-list{list-style:none;margin:0;padding:0}.comment-item{padding:13px 0;border-bottom:1px solid #243b48}.comment-meta{align-items:baseline;gap:8px;font-size:11px}.comment-meta strong{color:#e0eeee;font-weight:600;overflow-wrap:anywhere}.comment-meta time{flex-shrink:0;color:#7897a7;font-size:10px}.comment-body{white-space:pre-wrap;overflow-wrap:anywhere;margin:6px 0 0;font-size:12px;line-height:1.55;color:#c4d5dc}.comment-actions{margin-top:7px;justify-content:flex-start;gap:12px}.comment-timestamp{padding:4px 8px;border:1px solid #3b5a67;border-radius:6px;background:#1b3643;color:#bde4db;font-size:11px;min-height:28px;font-variant-numeric:tabular-nums}.comment-delete{margin-left:auto;color:#8aabb9}.comments-empty{padding:18px 0 8px;color:#809eae;font-size:11px}.comments-panel button:disabled{opacity:.55;cursor:wait;filter:none}#comments-older{width:100%;margin-top:12px}.comments-trap{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}#comments-toggle[aria-expanded=true]{background:#254152;color:#e0eee9}@media(max-width:600px){.comments-panel{padding:14px;width:350px}.comments-heading h2{font-size:17px}.comment-meta time{font-size:9px}}@media(max-height:450px){.comments-panel{max-height:calc(100dvh - 85px);bottom:calc(100% + 8px)}}

/* Alternate channel view: controls and notation share the same scrolling rows. */
#view-select{width:145px}.side-view{position:fixed;top:calc(124px + env(safe-area-inset-top));bottom:calc(112px + env(safe-area-inset-bottom));left:calc(var(--edge) + env(safe-area-inset-left));right:calc(var(--edge) + env(safe-area-inset-right));overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;border:1px solid #2f4653;border-radius:12px;background:#0d1822;scrollbar-width:thin;scrollbar-color:#3f5867 #0d1822}.side-board{--lane-height:128px;display:grid;grid-template-columns:148px minmax(0,1fr);height:608px;min-height:608px}.channel-controls{height:100%;background:#12232e;border-right:1px solid #344a58;z-index:1}.channel-header{height:96px;padding:12px;display:flex;flex-direction:column;gap:7px;align-items:flex-start;border-bottom:1px solid #334b59}.channel-header strong{font-size:10px;letter-spacing:.12em;color:#adc6d3}.channel-header span{font-size:9px;color:#7696a7}.channel-header button{background:transparent;border:1px solid #3e5966;border-radius:6px;color:#c4dbdf;font-size:10px;min-height:28px;padding:4px 9px}.channel-strip{height:var(--lane-height);padding:13px 12px 10px;border-bottom:1px solid #2d4350;display:flex;flex-direction:column;justify-content:center;gap:7px;box-shadow:inset 3px 0 var(--channel-color)}.channel-strip h2{font-size:13px;line-height:1.1;font-weight:600;color:#e2eeee;margin:0}.channel-kind{font-size:9px;color:#8aa8b8}.channel-buttons{display:flex;gap:5px}.channel-buttons button{flex:1;min-width:0;min-height:29px;background:#1a3240;color:#bdcfd8;border:1px solid #3a5362;border-radius:5px;font-size:10px;padding:4px}.channel-buttons button[aria-pressed=true]{background:#bce8dc;border-color:#bce8dc;color:#12332b}.channel-buttons button[id^=mute-][aria-pressed=true]{background:#eecc9c;border-color:#eecc9c;color:#3a2916}.channel-volume-label{display:flex;justify-content:space-between;font-size:9px;color:#8fabb9}.channel-volume-label output{font-size:9px;color:#c6dfdf}.channel-strip input[type=range]{width:100%;margin:0;height:5px;accent-color:var(--channel-color);cursor:pointer}.channel-strip.is-muted h2{color:#829dab}.channel-strip.is-muted .channel-kind{color:#627d8d}#timeline{display:block;min-width:0;width:100%;height:100%;touch-action:pan-y;cursor:grab}#timeline:active{cursor:grabbing}.mix-status{max-width:230px;text-align:right}.mix-status.is-error{color:#ffbda9}body[data-view=side] .top-left{width:230px}body[data-view=side] .top-left #view-select{width:145px}body[data-view=side] #zoom-caption{max-width:230px}body[data-view=side] .gesture-hint{max-width:210px}body[data-view=side] .top-right{width:min(230px,42vw)}
@media(max-width:1100px){#view-select{width:120px}body[data-view=side] .top-left{width:190px}body[data-view=side] .top-left #view-select{width:125px}}
@media(max-width:600px){#view-select{width:108px}.side-view{top:calc(116px + env(safe-area-inset-top));bottom:calc(112px + env(safe-area-inset-bottom));border-radius:9px}.side-board{grid-template-columns:100px minmax(0,1fr)}.channel-header{padding:10px 8px}.channel-strip{padding:10px 8px;gap:6px}.channel-strip h2{font-size:11px}.channel-buttons{gap:4px}.channel-buttons button{font-size:9px;min-height:29px;padding:3px}.channel-kind{font-size:8px}.mix-status{font-size:9px;line-height:1.25;max-width:155px}body[data-view=side] .top-left{width:175px}body[data-view=side] .top-left #view-select{width:117px}body[data-view=side] .gesture-hint{max-width:155px}}
@media(max-width:350px){:root{--corner-width:145px}#view-select,#track-select{width:100px}.side-board{grid-template-columns:90px minmax(0,1fr)}body[data-view=side] .top-left{width:158px}body[data-view=side] .top-left #view-select{width:106px}.channel-strip{padding-left:6px;padding-right:6px}.quiet-button,.about>summary{padding-left:7px;padding-right:7px}.top-right{max-width:130px}.mix-status{max-width:125px}}
@media(max-height:450px){.side-view{top:calc(104px + env(safe-area-inset-top));bottom:calc(91px + env(safe-area-inset-bottom))}.mix-status{font-size:9px}}

body[data-view=side] .top-right{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:center}body[data-view=side] .top-right .mix-status{grid-column:1 / -1;justify-self:end}

/* One shared mixer, anchored to the left in both visualization modes. */
:root{--mixer-width:148px;--score-top:124px;--score-bottom:112px;--panel-gap:10px}
.mixer-panel{position:fixed;z-index:1;left:calc(var(--edge) + env(safe-area-inset-left));top:calc(var(--score-top) + env(safe-area-inset-top));bottom:calc(var(--score-bottom) + env(safe-area-inset-bottom));width:var(--mixer-width);overflow:auto;overscroll-behavior:contain;border:1px solid #344a58;border-radius:11px;background:#12232e;scrollbar-width:none;--lane-height:128px}
.mixer-panel::-webkit-scrollbar{display:none}.mixer-panel .channel-controls{border:0;height:auto;min-height:608px}
.side-view{left:calc(var(--edge) + env(safe-area-inset-left) + var(--mixer-width) + var(--panel-gap));top:calc(var(--score-top) + env(safe-area-inset-top));bottom:calc(var(--score-bottom) + env(safe-area-inset-bottom))}
.side-board{display:block;grid-template-columns:none}
.record-stage{position:fixed;top:0;bottom:0;left:calc(var(--edge) + env(safe-area-inset-left) + var(--mixer-width) + var(--panel-gap));right:0;display:grid;place-items:center}
.record-stage #record{width:min(calc(100vw - var(--mixer-width) - var(--edge) - var(--panel-gap) - env(safe-area-inset-left)),100dvh);height:min(calc(100vw - var(--mixer-width) - var(--edge) - var(--panel-gap) - env(safe-area-inset-left)),100dvh)}
body[data-view=circle] .mixer-panel{top:calc(172px + env(safe-area-inset-top))}
body[data-view=circle] .mixer-panel .channel-controls{height:auto!important;--lane-height:128px!important}
body[data-view=side] .record-stage{display:none}
@media(max-width:600px){:root{--mixer-width:100px;--score-top:116px;--panel-gap:7px}.mixer-panel{border-radius:9px}body[data-view=circle] .mixer-panel{top:calc(157px + env(safe-area-inset-top))}}
@media(max-width:350px){:root{--mixer-width:90px;--panel-gap:6px}}
@media(max-height:450px){:root{--score-top:104px;--score-bottom:91px}body[data-view=circle] .mixer-panel{top:calc(145px + env(safe-area-inset-top))}}

/* Compact setlist transport; the editor opens above the existing controls. */
:root{--score-bottom:166px}
.setlist-transport{display:flex;gap:5px;width:100%;pointer-events:auto;align-items:stretch}
#setlist-toggle{flex:1;min-width:0;padding:6px 8px;text-align:left;display:flex;flex-direction:column;justify-content:center;gap:3px}
#current-song{display:block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px;color:#e0eee9}
#setlist-position{font-size:9px;color:#8fa8b7}
.setlist-transport>.small-button{min-width:30px;padding:6px;min-height:42px}
button:disabled{opacity:.4;cursor:default;filter:none}
.setlist-panel{position:absolute;z-index:5;left:0;bottom:calc(100% + 10px);width:360px;max-width:calc(100vw - 2 * var(--edge) - env(safe-area-inset-left) - env(safe-area-inset-right));max-height:calc(100dvh - 210px);overflow:auto;overscroll-behavior:contain;padding:16px;border:1px solid #3a5260;border-radius:12px;background:#0d1c26;box-shadow:0 12px 50px #0009;pointer-events:auto}
.setlist-panel *{pointer-events:auto}.setlist-heading,.setlist-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}.setlist-heading h2{margin:0;font-size:18px;font-weight:600}.setlist-heading button{min-height:30px;padding:6px 10px}.setlist-intro{color:#93afbd;font-size:11px;line-height:1.5;margin:10px 0 14px}.setlist-actions .play-button{flex:0 1 120px;min-height:36px;padding:8px 10px}.setlist-options{display:flex;gap:14px;flex-wrap:wrap;margin:13px 0;font-size:11px;color:#bed0d8}.setlist-options label{display:flex;align-items:center;gap:5px;cursor:pointer}.setlist-options input{accent-color:#a2e5d4;margin:0;width:15px;height:15px}.setlist-entries{padding:0;margin:0;list-style:none}.setlist-entry{display:flex;align-items:center;gap:5px;border-top:1px solid #2a414e;padding:8px 0}.setlist-entry[aria-current=true]{background:#183a3b;border-radius:6px;padding-left:5px;padding-right:5px}.setlist-song{min-width:0;flex:1;background:transparent;border:0;padding:4px;color:#dce9ec;text-align:left}.setlist-song strong{display:block;font-size:12px;font-weight:500;overflow-wrap:anywhere}.setlist-song span{display:block;font-size:10px;color:#8faebd;margin-top:3px}.setlist-entry-tools{display:flex;gap:3px;flex-shrink:0}.setlist-entry-tools button{border:1px solid #3a5362;border-radius:5px;background:#172e3b;color:#bed0d8;min-width:27px;min-height:32px;padding:4px;font-size:12px}#setlist-status{display:block;line-height:1.4;white-space:pre-line;margin:12px 0 0}#setlist-status.is-error{color:#ffbda9}.channel-strip.is-unavailable{opacity:.5}
@media(max-height:450px){:root{--score-bottom:141px}.setlist-panel{max-height:calc(100dvh - 170px);padding:12px}.setlist-transport>.small-button{min-height:36px}.setlist-intro{margin:7px 0}}

/* Sensitivity lives with the existing corner controls in both views. */
#chord-sensitivity-control{width:100%;max-width:230px;text-align:left;pointer-events:auto}
.earplay-chord-sensitivity{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 7px;color:#b8ced7;font-size:10px;line-height:1.3}
.earplay-chord-sensitivity label{grid-column:1;font-size:10px;white-space:nowrap}
.earplay-chord-sensitivity output{grid-column:2;grid-row:1;font-size:10px;text-align:right;min-width:0}
.earplay-chord-sensitivity input{grid-column:1 / -1;grid-row:2;width:100%;min-width:0;height:16px;margin:0;accent-color:#c7ab79;cursor:pointer}
.earplay-chord-sensitivity small{grid-column:1 / -1;font-size:9px;line-height:1.25;color:#8fa8b7}
.earplay-chord-sensitivity input:disabled{cursor:default;opacity:.4}
body[data-view=side] #chord-sensitivity-control{grid-column:1 / -1}
@media(max-width:600px){.earplay-chord-sensitivity{font-size:9px;gap:2px 5px}.earplay-chord-sensitivity label,.earplay-chord-sensitivity output{font-size:9px}.earplay-chord-sensitivity small{font-size:8px}}
@media(max-width:350px){.earplay-chord-sensitivity label{white-space:normal;max-width:65px}.earplay-chord-sensitivity output{font-size:8px}}