:root{--tools-width:380px}
main{max-width:none;padding:24px 28px}main>h1{font-size:clamp(26px,3vw,38px);text-align:center}main>p{max-width:880px;margin:8px auto;text-align:center}header{padding:18px 28px}nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.layout{grid-template-columns:minmax(0,1fr) 16px var(--tools-width);gap:0;align-items:start;margin-top:20px}
.replay-stage{min-width:0;width:100%;max-width:1200px;justify-self:center;min-height:65vh;position:sticky;top:20px;display:flex;flex-direction:column;justify-content:center}
.replay-stage>.row{justify-content:space-between}.replay-stage video{max-height:65vh;aspect-ratio:16/9;object-fit:contain}.replay-stage .lyric{width:100%;min-height:130px}
.tools-panel{min-width:0;max-height:calc(100vh - 40px);overflow:auto;position:sticky;top:20px;scrollbar-gutter:stable;padding:0 4px 20px 12px;overflow-wrap:anywhere}.tools-heading{font-size:18px;font-weight:750;margin:0 0 16px}.tools-panel>.panel{padding:20px}.tools-panel>.row{display:grid;grid-template-columns:1fr;margin-top:24px}.tools-panel button{max-width:100%}.tools-panel input{min-width:0}.tools-panel h2{font-size:21px}
.panel-resize{align-self:stretch;position:relative;min-height:65vh;cursor:col-resize;touch-action:none}.panel-resize:before{content:'';position:absolute;left:6px;top:0;bottom:0;width:4px;border-radius:4px;background:#344752}.panel-resize:hover:before,.panel-resize:focus-visible:before{background:#efc273}.panel-resize:focus-visible{outline:2px solid #efc273;outline-offset:-2px}body.resizing{cursor:col-resize;user-select:none}
.tools-hidden .layout{grid-template-columns:minmax(0,1fr)}.tools-hidden .tools-panel,.tools-hidden .panel-resize{display:none}
.tools-panel .cue{grid-template-columns:62px 62px minmax(0,1fr) 48px;font-size:13px}.tools-panel .cue button{padding:8px 4px}.tools-panel #editor{max-height:480px}#message{text-align:center}#toggleTools{padding:9px 13px}
@media(max-width:850px){main{padding:20px 14px}header{padding:16px}.layout{grid-template-columns:minmax(0,1fr);gap:18px}.panel-resize{display:none}.replay-stage{position:static;min-height:0;padding:18px}.tools-panel{position:static;max-height:none;padding:0;width:100%}.replay-stage video{max-height:50vh}.replay-stage .lyric{min-height:100px}.tools-panel>.row{display:flex}}
.tool-section{background:#1c2731;border:1px solid #344752;border-radius:14px;margin:0 0 14px;padding:0 16px}.tool-section>summary{font-weight:700;margin:0;padding:17px 0;cursor:pointer}.tool-section>div,.tool-section>p{margin-bottom:16px}.tool-section .panel{border:0;padding:0 0 12px;background:none}.tool-section .library{margin:0 0 18px}.tool-section .row{margin-bottom:14px}.tool-section .row button{flex:1}.tool-section input[type=range]{padding:0;accent-color:#efc273;cursor:pointer}.tool-section output{display:block;margin-top:6px;color:#a6b4cc;font-size:13px}.playback-options{display:grid;grid-template-columns:1fr 1fr;gap:16px}.playback-options select{display:block;margin-top:8px;width:100%;padding:8px;background:#091320;color:#edf3ff;border:1px solid #354561;border-radius:8px;font:inherit}.replay-stage video[hidden]{display:none}.replay-stage .lyric{font-size:clamp(30px,4vw,64px);display:grid;place-items:center;min-height:35vh}.replay-stage #playing{overflow-wrap:anywhere;font-size:clamp(18px,2vw,28px)}#stageHint{text-align:center}.tool-section>summary:focus-visible{outline:2px solid #efc273;outline-offset:4px}
.replay-stage .lyric{display:flex;align-items:center;justify-content:center;padding:28px 4px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:clamp(16px,1.8vw,32px);text-align:left}.lead-phrase{max-width:100%;overflow-x:auto;padding-bottom:12px}.lead-lyrics{white-space:pre;line-height:1.8;color:#edf3ff}.lead-chords{color:#efc273;font-weight:750}.lead-chord-row{position:relative;height:1.5em;min-width:1ch}.lead-chord-row span{position:absolute;white-space:nowrap}.lead-nashville{color:#9ed9d0}.tools-panel select{width:100%;background:#091320;color:#edf3ff;border:1px solid #354561;padding:10px;border-radius:8px;font:inherit}.lead-phrase{min-width:min(100%,44ch)}
.studio-intro{border-bottom:1px solid #344752;margin:0 0 8px;padding:0 0 10px}.studio-intro>summary{cursor:pointer;color:#a6b4cc;font-size:14px;width:fit-content;padding:8px 0}.studio-intro>summary:focus-visible{outline:2px solid #efc273;outline-offset:4px}.studio-intro>h1{text-align:center;font-size:clamp(26px,3vw,38px);margin-top:20px}.studio-intro>p{text-align:center;max-width:980px;margin:12px auto}.studio-intro:not([open]){margin-bottom:0}main>#message{margin:8px 0;min-height:0}main>#message:empty{display:none}main>.layout{margin-top:12px}
.grid-settings{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.replay-stage .lyric.bar-score{display:block;font-size:clamp(14px,1.4vw,23px);min-height:35vh;padding:12px 0;width:100%;font-family:ui-monospace,Consolas,monospace}.bar-caption{font:12px system-ui;color:#9db0bd;margin:0 0 12px}.score-bar{margin-bottom:18px;border-right:3px solid #cfdae2;overflow:hidden}.bar-number{font:12px system-ui;color:#a6b4cc;padding:4px 0 6px}.bar-beats{display:flex;border-top:1px solid #45606d;border-bottom:1px solid #45606d}.score-beat{flex:1;min-width:0;position:relative;border-left:1px solid #728895;padding:6px 8px 12px;min-height:120px}.score-beat.strong-beat{border-left:4px solid #e1ebf2}.beat-number{font:12px system-ui;color:#a6b4cc;position:relative}.beat-ticks{display:flex;position:absolute;inset:0;pointer-events:none}.beat-ticks i{flex:1;border-left:1px solid #a2b2c01c}.beat-ticks i:first-child{border:0}.beat-chords,.beat-lyrics{display:flex;flex-wrap:wrap;gap:3px 8px;position:relative;overflow-wrap:anywhere;line-height:1.45}.beat-chords{color:#efc273;min-height:2.9em;padding-top:5px}.beat-chords small{display:block;color:#9ed9d0}.beat-lyrics{color:#edf3ff}.beat-active{background:#efc27317;box-shadow:inset 0 3px #efc273}@media(max-width:850px){.score-beat{padding:4px;min-height:105px}.replay-stage .lyric.bar-score{font-size:13px}}
.phrase-guide{font:12px system-ui;color:#9ed9d0;border-top:2px solid #9ed9d0;padding:5px 0 7px;margin-right:6px}
/* Every bar fills the main replay area; beats divide that width equally. */
#replayStage{width:100%;max-width:none;align-items:stretch}
#replayStage #line.bar-score{display:block!important;width:100%;min-width:0;max-width:none;align-self:stretch;text-align:left}
#line.bar-score>.score-bar{display:block;width:100%;min-width:0;max-width:none;margin-left:0;margin-right:0;box-sizing:border-box}
#line.bar-score .bar-beats{display:grid;width:100%;grid-template-columns:repeat(var(--bar-beats,4),minmax(0,1fr));gap:0}
#line.bar-score .score-beat{width:auto;min-width:0;box-sizing:border-box}
#line.bar-score>.bar-caption{width:100%;text-align:left}
.score-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid #45606d}.score-toolbar label{display:flex;gap:9px;align-items:center;margin:0;font-size:13px}.score-toolbar select{background:#091320;color:#edf3ff;padding:8px 12px;border:1px solid #7892a2;border-radius:8px;font:inherit}#line.bar-score .beat-ticks{opacity:1}#line.bar-score .beat-ticks i{border-left:1px solid #718a9a}#line.bar-score .beat-ticks i:first-child{border-left:0}#line.bar-score .score-beat{border-left:2px solid #b4c4d0;min-height:135px}#line.bar-score .score-beat.strong-beat{border-left:5px solid #f1c471}#line.bar-score .score-bar{border-right:5px solid #f1c471}#line.bar-score .bar-beats{border-top:1px solid #718a9a;border-bottom:1px solid #718a9a}#line.bar-score .beat-active{background:#efc27324}
.active-phrase-panel{background:#17212b;border:1px solid #55707f;border-radius:12px;padding:14px 18px;margin-bottom:16px;flex-shrink:0}.active-phrase-panel[hidden]{display:none}.active-phrase-label{font:12px system-ui;letter-spacing:.05em;text-transform:uppercase;color:#9ed9d0;margin-bottom:8px}#activePhrase{font:700 clamp(16px,1.8vw,30px)/1.6 ui-monospace,Consolas,monospace;min-height:75px;overflow-x:auto}#activePhrase .lead-phrase{min-width:min(100%,44ch)}#line.bar-score{max-height:52vh;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scroll-padding-top:6px}#line.bar-score .active-bar .bar-number{color:#efc273;font-weight:700}.follow-toggle input{width:18px;height:18px;padding:0;accent-color:#efc273}.replay-stage:has(.active-phrase-panel:not([hidden])){justify-content:flex-start}@media(prefers-reduced-motion:reduce){#line.bar-score{scroll-behavior:auto}}
/* Center the chord/lyric block together, preserving chart character spacing. */
#activePhrasePanel .active-phrase-label{text-align:center}
#activePhrase{display:flex;justify-content:safe center;align-items:center;width:100%;text-align:left}
#activePhrase .lead-phrase{flex:0 0 auto;min-width:0;max-width:none;width:max-content;overflow:visible;padding:0 0 12px}
#activePhrase .lead-lyrics{width:max-content;min-width:100%}
#activePhrase .lead-chords{width:100%}
#replayStage #line:not(.bar-score){justify-content:safe center;text-align:left}
#replayStage #line:not(.bar-score) .lead-phrase{min-width:0;width:max-content;max-width:100%}
/* The bar grid is the lead sheet: no separate active-phrase panel. */
#replayStage{justify-content:flex-start}
#replayStage #line.bar-score{max-height:65vh;padding-bottom:calc(65vh - 165px)}
#line.bar-score .beat-chords,#line.bar-score .beat-lyrics{justify-content:center;text-align:center}
#line.bar-score .beat-lyrics{font-size:1.05em;min-height:1.5em}
#line.bar-score .score-beat{min-height:145px}
#line.bar-score .bar-number{font-size:14px}