:root{--bg: #16130f;--surface: #211c17;--surface-2: #2b251f;--border: #3b332b;--cell-edge: #3b332b;--text: #f3ece3;--muted: #a89c8e;--accent: #e3a14a;--accent-ink: #1b1309;--perc: #c9714f;--warn: #f0c36b;--radius: 10px;--shadow-float: 0 12px 32px rgb(0 0 0 / .35);--scrim: rgb(0 0 0 / .45);color-scheme:dark;accent-color:var(--accent);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:93.75%;line-height:1.4}@media(prefers-color-scheme:light){:root{--bg: #f7f3ee;--surface: #ffffff;--surface-2: #f0e9e0;--border: #ddd2c4;--cell-edge: #958779;--text: #221b14;--muted: #736658;--accent: #9a5a12;--accent-ink: #ffffff;--perc: #a8502f;--warn: #8a5a00;color-scheme:light}}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,select,input{font:inherit;color:inherit}button,select{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:.35rem .7rem;cursor:pointer}select{min-width:0;max-width:100%;text-overflow:ellipsis}button:disabled{opacity:.45;cursor:default}button[aria-pressed=true]{background:var(--surface);box-shadow:inset 0 -3px 0 var(--underline, var(--accent))}button.toggle[aria-pressed=true],button.lit:not([aria-expanded=true]){background:var(--surface-2);box-shadow:none;color:var(--accent);border-color:var(--accent)}button.icon-toggle[aria-expanded=true],button.tempo-button[aria-expanded=true]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}button.ghost{background:transparent}input[type=number],input:not([type]){background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:.35rem .5rem;width:4.5rem}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}::placeholder{color:var(--muted);opacity:1}.muted{color:var(--muted)}.warning{color:var(--warn);margin:.25rem 0}.spacer{flex:1}.row,.topbar,.transport,.setup,.chips{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.setup-controls{display:contents}.setup-controls[hidden]{display:none}button.setup-summary{flex-basis:100%;display:flex;justify-content:space-between;align-items:center;gap:.5rem;text-align:left}button.setup-summary:after{content:"▾";content:"▾" / "";color:var(--muted)}button.setup-summary[aria-expanded=true]:after{content:"▴";content:"▴" / ""}.summary-label{color:var(--muted)}.inline{display:inline-flex;align-items:center;gap:.35rem}.scale{display:flex;align-items:center;gap:.45rem}.scale input[type=range]{flex:1 1 auto;width:auto;min-width:0}.scale-end{color:var(--muted);font-size:.8em}.scale-word{font-weight:600}.app{max-width:1200px;margin:0 auto;padding:max(.75rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) 3rem max(1rem,env(safe-area-inset-left));display:flex;flex-direction:column;gap:.75rem}.topbar .song-menu{flex:0 1 auto}.stage-button{margin-left:auto}.brand{margin:0;display:inline-flex;align-items:center;gap:.4rem;color:var(--text)}.brand-mark{flex-shrink:0;width:1.45rem;height:1.45rem}.brand-word{width:auto;height:1.35rem;fill:currentColor}button.update-pill{min-height:24px;display:inline-flex;align-items:center;gap:.3rem;padding:.1rem .6rem;border:1px solid var(--accent);border-radius:999px;background:transparent;color:color-mix(in srgb,var(--accent) 70%,var(--text));font-size:.8rem;line-height:1.4}.song-menu{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap;min-width:0;max-width:100%}.song-menu select{max-width:min(100%,24rem)}.song-menu form{min-width:0;max-width:100%}.title-field{display:inline-grid;grid-template-columns:minmax(6rem,max-content);max-width:100%}.title-field:after,.title-field input{grid-area:1 / 1;padding:.35rem .5rem;border:1px solid transparent}.title-field:after{content:attr(data-value) " ";visibility:hidden;white-space:pre;overflow:hidden}.title-field input{width:100%;border-color:var(--border)}.segmented{display:inline-flex}.segmented button{border-radius:0}.segmented button:first-child{border-radius:var(--radius) 0 0 var(--radius)}.segmented button:last-child{border-radius:0 var(--radius) var(--radius) 0}.transport-dock{display:contents}.play{display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;padding:0;border-radius:50%;background:var(--accent);color:var(--accent-ink);border:none}.tempo-button{font-variant-numeric:tabular-nums}.pop-row input[type=number]{text-align:center}.tap-button{width:100%;padding:.9rem;font-size:1.15rem;font-weight:600;touch-action:manipulation;user-select:none;-webkit-user-select:none}.trainer-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin-top:.6rem}.trainer-fields label{display:grid;gap:.2rem;font-size:.8rem;color:var(--muted)}.trainer-fields input[type=number]{width:100%;color:var(--text)}label.trainer-every{grid-column:1 / -1;display:flex;align-items:center;gap:.4rem}label.trainer-every input[type=number]{width:4rem}.stepper{display:inline-flex;align-items:center;gap:.35rem}.pattern-menu{position:relative;display:inline-block}.pattern-button:after,.menu-button:after{content:" ▾";content:" ▾" / "";color:var(--muted)}button.icon-menu{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .5rem}button.icon-menu:after{content:none}.menu-separator{height:1px;margin:.25rem .4rem;background:var(--border)}.pop-panel.action-menu{width:max-content;min-width:10rem;gap:.15rem;padding:.35rem}.action-menu [role=menuitem]{text-align:left;border-color:transparent}.action-menu [role=menuitem]:hover,.action-menu [role=menuitem]:focus-visible{background:var(--surface-2)}.action-menu [role=menuitem][aria-disabled=true]{color:var(--muted);cursor:default}.pattern-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:30;display:flex;gap:4px;max-width:calc(100vw - 32px);padding:4px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-float)}.pattern-list{display:flex;flex-direction:column;min-width:190px;max-height:min(60vh,420px);overflow-y:auto}.pattern-panel[data-locks]:not(.narrow){width:max-content}.pattern-panel[data-locks]:not(.narrow) .pattern-list[aria-label="Pattern groups"]{min-width:max-content}.pattern-panel.narrow .pattern-list{min-width:min(260px,calc(100vw - 48px))}button.pattern-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:.45rem .7rem;border:0;border-radius:6px;background:transparent;text-align:left;white-space:nowrap}button.pattern-row:hover,button.pattern-row[aria-expanded=true]{background:var(--surface-2)}button.pattern-row:focus-visible{outline-offset:-2px}button.pattern-row[aria-expanded=true]:after{color:var(--text)}button.pattern-row[aria-haspopup=menu]:after{content:"›";content:"›" / "";color:var(--muted)}button.pattern-row[aria-checked=true]{color:var(--accent)}button.pattern-row.preset{flex-wrap:wrap;row-gap:.1rem}button.pattern-row.preset:after{flex-shrink:0;width:1em;text-align:center}button.pattern-row.preset:not([aria-checked=true]):after{content:""}.pattern-preview{margin-left:auto;display:grid;grid-template-columns:repeat(var(--steps),minmax(.95em,auto));row-gap:.15rem;font-size:.8rem;color:var(--muted)}.strum-line .pick{padding-inline:.1em;font-size:.85em}.strum-line,.perc-line{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;justify-items:center;align-items:center}.perc-line .perc-glyph{width:.7em;height:.7em}.pattern-name{font-weight:600}button.pattern-row[aria-checked=true]:after{content:"✓";content:"✓" / ""}button.pattern-row.back{justify-content:flex-start;gap:6px;font-weight:600}button.pattern-row.back:before{content:"‹";content:"‹" / "";color:var(--muted)}.pop-anchor{position:relative;display:inline-block}.pop-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:30;max-width:calc(100vw - 32px);background:var(--surface) linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-float),inset 0 1px #ffffff0f}.pop-panel{display:grid;gap:1rem;width:19rem;padding:.75rem .9rem}.pop-head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;margin-bottom:.35rem}.pop-label{font-weight:600}.pop-row{display:flex;align-items:center;gap:.5rem}.pop-row button{flex:1}.pop-value{min-width:2.5rem;text-align:center;font-size:1.15rem;font-weight:600;font-variant-numeric:tabular-nums}.pop-note{margin:.35rem 0 0;font-size:.9rem}.pop-options{display:grid;gap:.45rem}.pop-option label{display:inline-flex;align-items:center;gap:.45rem;font-weight:500}.pop-option .pop-help{display:block;margin:0 0 0 1.65rem}.pop-field .segmented{display:flex}.pop-field .segmented button{flex:1}.key-notes{display:grid;grid-template-columns:repeat(6,1fr);gap:.25rem;margin-bottom:.5rem}.key-notes button{padding:.35rem 0}.pop-help{margin:.3rem 0 0;font-size:.8rem;color:var(--muted)}.lock{flex:none;margin-left:.3rem;color:var(--muted);vertical-align:-1px}.icon-toggle .lock{margin-left:0}.icon-toggle[aria-expanded=true] .lock{color:inherit}.pro-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:var(--scrim)}.pro-panel{position:fixed;z-index:51;left:50%;top:50%;transform:translate(-50%,-50%);width:min(24rem,calc(100vw - 32px));display:grid;gap:.75rem;padding:1.1rem 1.2rem;background:var(--surface) linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-float),inset 0 1px #ffffff0f}.pro-panel:focus{outline:none}.pro-panel h2{margin:0;font-size:1.15rem;font-weight:600}.pro-panel p{margin:0}.pro-links{display:flex;gap:1rem}.pro-links a{color:var(--accent);text-underline-offset:.2em}.pro-foot{display:flex;justify-content:flex-end}.pro-buy{display:flex;flex-wrap:wrap;gap:.5rem}.pro-buy button[aria-disabled=true]{opacity:.45;cursor:default}.pro-status:empty{margin-top:-.75rem}.mix-levels{display:grid;grid-template-columns:auto minmax(0,1fr) 2.2rem;align-items:center;gap:.5rem .75rem}.mix-level{display:contents}.mix-level label{font-weight:600}.mix-level input[type=range]{width:100%;min-width:0;height:2rem}.mix-level output{text-align:right;font-variant-numeric:tabular-nums}.mix-reset{justify-self:end}.pop-panel.tone{width:22rem}.tone .mix-levels{grid-template-columns:auto minmax(0,1fr) 3.4rem}.tone-foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem;padding-top:.75rem;border-top:1px solid var(--border)}.icon-toggle{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;padding:.3rem .45rem;line-height:0}.icon-toggle .icon-text{line-height:1.4}.labelled-toggle{display:inline-flex;align-items:center;gap:.4rem}.toggle-label{font-size:.8rem;color:var(--muted)}.card,.section-editor,.chord-editor{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:.9rem}.workspace{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem}.app.editing .workspace{grid-template-columns:minmax(0,1fr) 360px}.editor-column{display:flex;flex-direction:column;gap:.75rem;min-width:0}.arrangement{display:flex;flex-direction:column;gap:.5rem}.lane-title{margin:0;font-size:.85rem;font-weight:600;color:var(--muted)}.song-order{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem}.parts-lane{flex:1 1 18rem;min-width:0;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:.35rem}.parts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem .6rem;counter-reset:part}.parts li{counter-increment:part;display:flex;align-items:center;gap:.3rem;min-width:0;max-width:100%}.parts li:before{content:counter(part);content:counter(part) / "";min-width:1ch;font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}.part{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.parts-empty{margin:0;padding:.35rem .5rem;color:var(--muted)}.song-order-commands{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-width:0;max-width:100%}.part.playing{--underline: var(--accent-ink);background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.section-editor{display:flex;flex-direction:column;gap:.75rem}input.section-name{width:11rem;font-weight:600}.progression{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.5rem 0}.progression-row{display:flex;align-items:center;gap:.5rem;flex:1 1 18rem;min-width:0}.progression input{flex:1 1 0;min-width:0}.progression>p{flex-basis:100%;margin:0}.chord-name .push{color:var(--muted);margin-right:.1em}.progression-help{flex-basis:100%;display:grid;gap:.5rem;padding:.5rem .75rem;border:1px solid var(--border);border-radius:var(--radius)}.progression-help .degrees{display:flex;flex-wrap:wrap;gap:.35rem}.progression-help table{border-collapse:collapse;width:100%}.progression-help td{padding:.15rem .5rem .15rem 0;vertical-align:top}.progression-help p{margin:0}.chord-strip{--bar-gap: .3rem;display:grid;gap:.35rem}.bar-row{display:grid;grid-template-columns:var(--cols);column-gap:.2rem;align-items:stretch}.bar-row>*{grid-row:1;grid-column:var(--col)}.chord{container-type:inline-size;display:flex;flex-direction:column;align-items:center;gap:.2rem;min-width:0;padding-inline:.2rem}@container (width < 2.5rem){.chord .diagram{display:none}}.chord .diagram{max-width:100%;height:auto}.chord.add{justify-content:center}.chord.continues{justify-content:center;border:1px dashed var(--border);border-radius:var(--radius);color:var(--muted);cursor:pointer}.chord[aria-current=true],.chord.current{background:color-mix(in srgb,var(--accent) 16%,var(--surface-2));border-color:var(--accent)}.chord.playing{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.chord.playing .chord-name .push{color:inherit}.chord.playing .diagram-line{stroke:currentColor}.chord.playing .diagram-dot,.chord.playing .diagram-text{fill:currentColor}.sheet-backdrop{display:none}.chord-name{font-weight:600}.chord .chord-name{font-size:clamp(.75rem,calc(115cqw / var(--chars, 1)),1.4rem);font-weight:700;line-height:1.2;overflow-wrap:anywhere;text-align:center}.chord .chord-name.short{white-space:nowrap}.diagram-line{stroke:var(--muted);stroke-width:.8}.diagram-dot{fill:var(--text)}.diagram-text{fill:var(--muted);font-size:11px}.bar-indicator{display:flex;align-items:center;gap:.75rem}.bar-indicator:not(.large){padding:.3rem 0}.segments{flex:1;display:grid;gap:3px}.seg{height:10px;border-radius:3px;background:var(--border)}.seg.beat{height:14px}.seg.on{background:color-mix(in srgb,var(--accent) 45%,var(--border))}.seg.now{background:var(--accent)}.segments.count-in .seg.now{background:repeating-linear-gradient(135deg,var(--warn) 0 4px,color-mix(in srgb,var(--warn) 45%,var(--border)) 4px 8px)}.bar-indicator.large .seg{height:22px}.bar-indicator.large .seg.beat{height:30px}.pattern-chunks{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem}.pattern-grid{flex:1 1 22rem;display:grid;gap:4px;align-items:center}.beat-label,.lane-label{font-size:.8rem;color:var(--muted);text-align:center}.lane-label{text-align:left}.cell{position:relative;height:2.4rem;padding:0;border-color:var(--cell-edge);font-size:1.05rem;border-radius:7px;-webkit-user-select:none;user-select:none;touch-action:manipulation}.cell.accent{font-weight:800}.cell.accent:after{content:"";position:absolute;bottom:.15rem;left:50%;width:.28rem;height:.28rem;border-radius:50%;background:currentColor;transform:translate(-50%)}.cell.perc{font-size:.8rem}.cell.strum,.stage-strum>span{container-type:inline-size}.pick{white-space:nowrap}.pick sub{line-height:0}.cell.strum .pick{font-size:min(1em,calc(90cqi / (.6 + .36 * var(--len))))}.cell.strum .pick sub{font-size:.65em}@container (max-width: 44px){.cell.strum .pick{display:inline-flex;flex-direction:column;align-items:center;line-height:1.05;font-size:min(1em,calc(90cqi / (.36 * var(--len))))}.cell.strum .pick sub{vertical-align:baseline;line-height:1}}.stage-strum .pick{display:inline-flex;flex-direction:column-reverse;align-items:center;vertical-align:middle;line-height:1;font-size:min(1em,calc(160cqi / var(--wide)))}.stage-strum .pick[data-stack]{font-size:min(.8em,calc(160cqi / var(--wide)))}.stage-strum .pick .join{display:none}.cell.perc:not(.on):not(.now){border-style:dashed;border-color:color-mix(in srgb,var(--muted) 75%,var(--surface))}.cell .perc-glyph{display:block;margin:auto;width:1rem;height:1rem}.cell.perc.on{background:color-mix(in srgb,var(--perc) 30%,var(--surface-2));border-color:var(--perc)}.cell.now,.cell.perc.on.now{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.cell.editing{box-shadow:inset 0 -3px 0 var(--underline, var(--accent))}.cell.editing.accent:after{bottom:calc(3px + .15rem)}.cell.now{--underline: var(--accent-ink)}.hint{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.8rem;color:var(--muted);margin:.5rem 0 0}.grid-guide{display:grid;gap:.35rem;margin-top:.5rem;padding:.5rem .75rem;border:1px solid var(--border);border-radius:var(--radius);font-size:.85rem}.grid-guide[hidden]{display:none}.grid-guide p{margin:0}.perc-key{display:flex;flex-wrap:wrap;gap:.25rem 1rem;margin:0;padding:0;list-style:none}.perc-key li{display:inline-flex;align-items:center;gap:.35rem}.hint kbd,.key-hint kbd{font:inherit;font-weight:600;color:var(--text)}.key-hint{margin:0;font-size:.8rem;color:var(--muted)}@media(hover:none)and (pointer:coarse){.fine-pointer{display:none}}.step-details{margin-top:.75rem;display:flex;flex-direction:column;align-items:flex-start;gap:.6rem}.detail-row{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .6rem;max-width:100%}.detail-label{min-width:5.5rem;font-size:.85rem;color:var(--muted)}.strum-kinds button,.perc-kinds button{display:inline-flex;flex-direction:column;align-items:center;gap:.1rem;min-width:3rem;padding:.3rem .35rem;line-height:1.1}.strum-kinds .glyph{font-size:1.05rem}.perc-kinds button{justify-content:flex-end}.strum-kinds .word,.perc-kinds .word{font-size:.75rem}.pick-targets{display:flex;flex-wrap:wrap;gap:.35rem}.step-title{flex-basis:100%;margin:0;font-size:1rem;font-weight:700}.chord-editor{display:flex;flex-direction:column;align-self:start;position:sticky;top:.75rem;max-height:calc(100vh - 1.5rem);overflow:hidden;padding:0}.sheet-body{display:flex;flex-direction:column;flex:1 1 auto;gap:.7rem;min-height:0;overflow-y:auto;padding:.9rem}.chord-editor h2{margin:0;font-size:1.4rem}.sheet-head{display:flex;align-items:center;gap:.6rem}.sheet-diagram{display:flex;flex:none}.sheet-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .5rem;min-width:0}.chord-step{display:inline-flex;align-items:center;gap:.25rem;font-variant-numeric:tabular-nums}.key-chords{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.chord-more,.any-chord{display:flex;flex-direction:column;gap:.5rem}.chord-more[hidden],.any-chord[hidden],.shape[hidden]{display:none}.chord-delete{display:flex;justify-content:flex-end;padding-top:.5rem;border-top:1px solid var(--border)}.chord-delete button{display:inline-flex;align-items:center;gap:.4rem}.sheet-foot{display:flex;flex:none;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .9rem .9rem;border-top:1px solid var(--border)}.chord-editor h3{margin:0 0 .35rem;font-size:.85rem;color:var(--muted);font-weight:600}.chord-editor .chip{min-width:2.4rem}.voicings{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.2rem,1fr));gap:.4rem}.voicing{display:flex;flex-direction:column;align-items:center;gap:.2rem;font-size:.75rem}.voicing-frets{color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.04em}.voicing[aria-pressed=true] .voicing-frets{color:inherit}.voicing[aria-pressed=true] .diagram-line{stroke:currentColor}.voicing[aria-pressed=true] .diagram-dot,.voicing[aria-pressed=true] .diagram-text{fill:currentColor}button.fold-toggle{display:flex;justify-content:space-between;align-items:center;gap:.5rem;width:100%;text-align:left}button.fold-toggle:after{content:"▾";content:"▾" / "";color:var(--muted)}button.fold-toggle[aria-expanded=true]:after{content:"▴";content:"▴" / ""}.shape{display:flex;flex-direction:column;gap:.7rem}.fret-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:.35rem}.fb-grid{display:grid;gap:3px;align-items:center}.string-name{font-size:.8rem;color:var(--muted)}.xo,.fret{height:2rem;padding:0}.fret .dot{display:inline-block;width:.9rem;height:.9rem;border-radius:50%;background:var(--text)}.notes{font-size:.85rem;margin:0}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.banners{display:flex;flex-direction:column;gap:.4rem}.banner{display:flex;justify-content:space-between;align-items:center;gap:.5rem;background:color-mix(in srgb,var(--warn) 18%,var(--surface));border:1px solid var(--warn);border-radius:var(--radius);padding:.4rem .75rem}.banner.undo{position:fixed;left:50%;bottom:calc(1rem + env(safe-area-inset-bottom));z-index:40;transform:translate(-50%);width:max-content;max-width:calc(100vw - 32px);background:var(--surface-2);border-color:var(--border);box-shadow:var(--shadow-float)}.confirm-row{flex-basis:100%;order:2}.confirm-panel{display:grid;gap:.5rem;max-width:34rem;padding:.75rem .9rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}.confirm-panel p{margin:0}.confirm-question{font-weight:600}.stage{--bg: #000000;--surface: #121110;--surface-2: #1f1c19;--border: #3b332b;--text: #ffffff;--muted: #c9c2b8;--accent: #e3a14a;--accent-ink: #1b1309;--warn: #f0c36b;--stage-pad: clamp(.75rem, 3vh, 1.25rem);color-scheme:dark;box-sizing:border-box;height:100vh;height:100dvh;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto;gap:clamp(.5rem,2.5vh,1.5rem);padding:max(var(--stage-pad),env(safe-area-inset-top)) max(1.25rem,env(safe-area-inset-right)) max(var(--stage-pad),env(safe-area-inset-bottom)) max(1.25rem,env(safe-area-inset-left));background:var(--bg);color:var(--text)}.stage:focus{outline:none}.stage-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-size:1.2rem;font-variant-numeric:tabular-nums;color:var(--muted)}.stage-top>:first-child{min-width:0}.stage-top>:last-child{flex:none;white-space:nowrap}.stage-top-end{display:flex;align-items:baseline;gap:.75rem}.stage-cue{color:var(--accent);font-weight:700}.stage-strum{display:grid;grid-template-columns:repeat(var(--steps),minmax(0,1fr));width:100%;max-width:calc(var(--steps) * 3rem);margin-inline:auto;font-size:min(2rem,5vh,calc(70vw / var(--steps)));line-height:1.4;text-align:center;color:var(--muted)}.stage-strum .now{background:var(--accent);color:var(--accent-ink);border-radius:6px}.stage-main{container:stage-main / size;min-height:0}.stage-chords{height:100%;display:flex;align-items:center;justify-content:space-around;gap:1rem 2rem}.stage-now,.stage-next{display:flex;flex-direction:column;align-items:center;gap:.5rem;min-width:0}.stage-name{display:flex;flex-direction:column;align-items:center;gap:.25rem}.stage-chord{font-size:min(14rem,40cqh,25cqw,calc(100cqw / var(--chars, 1)));font-weight:800;line-height:1;white-space:nowrap}.stage-next-chord{font-size:min(4.5rem,12cqh,8cqw,calc(40cqw / var(--chars, 1)));font-weight:700;line-height:1.1;white-space:nowrap;color:var(--muted)}.stage-now .diagram{width:auto;height:min(10rem,40cqh)}.stage-next .diagram{width:auto;height:min(5.5rem,22cqh)}@container stage-main (aspect-ratio < 1){.stage-chords{flex-direction:column;justify-content:center;gap:1.25rem}.stage-chord{font-size:min(14rem,25cqh,30cqw,calc(155cqw / var(--chars, 1)))}.stage-now .diagram{height:min(10rem,30cqh)}.stage-next{flex-direction:row;gap:.75rem}.stage-next-chord{font-size:min(3rem,10cqw,calc(60cqw / var(--chars, 1)))}.stage-next .diagram{height:min(5rem,15cqh)}}@container stage-main (aspect-ratio >= 1) and (height < 18rem){.stage-now{flex-direction:row;gap:1rem}.stage-chord{font-size:min(65cqh,14cqw,calc(70cqw / var(--chars, 1)))}.stage-now .diagram{height:85cqh}.stage-next .diagram{display:none}}.stage .diagram-line{stroke:var(--muted)}.stage .diagram-dot{fill:var(--text)}.stage-controls{display:flex;justify-content:center;align-items:center;gap:1rem}.stage .play{width:4.5rem;height:4.5rem}.stage .play svg{width:28px;height:28px}@media(max-width:760px){.app.editing .workspace{grid-template-columns:minmax(0,1fr)}.chord-editor{position:fixed;left:0;right:0;bottom:0;top:auto;max-height:75vh;border-radius:16px 16px 0 0;z-index:10;box-shadow:0 -8px 30px #0006}.sheet-backdrop{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:9;background:var(--scrim)}}@media(max-width:480px){.pro-panel{top:auto;bottom:calc(var(--dock-height) + 1rem);transform:translate(-50%)}:root{--dock-height: calc(max(44px, 3rem) + 1rem + 1px + env(safe-area-inset-bottom)) }.topbar .song-menu{order:1;flex:1 1 100%;flex-wrap:nowrap}.topbar .song-menu select{flex:1 1 auto;max-width:none}.transport{display:contents}.transport-dock{min-height:var(--dock-height);position:fixed;right:0;bottom:0;left:0;z-index:11;display:flex;align-items:center;gap:.5rem;padding:.5rem 16px calc(.5rem + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--border);box-shadow:0 -8px 24px #00000040}.transport-dock .pop-panel{top:auto;bottom:calc(100% + .5rem + 6px);max-height:calc(100vh - var(--dock-height) - 1.5rem);max-height:calc(100dvh - var(--dock-height) - 1.5rem);overflow-y:auto}.step-details .detail-row:has(.segmented){width:100%}.step-details .segmented{flex:1 1 100%}.step-details .segmented button{flex:1;min-width:0;padding-inline:.15rem}.transport-dock button{white-space:nowrap}.tempo-button.lit .tempo-unit,.key-hint{display:none}.chord-editor{bottom:var(--dock-height);max-height:calc(75vh - var(--dock-height))}.sheet-backdrop{bottom:var(--dock-height)}.app{gap:.5rem;padding-bottom:calc(5.5rem + env(safe-area-inset-bottom))}.section-editor{gap:.5rem}html{scroll-padding-bottom:calc(9rem + env(safe-area-inset-bottom))}.banner.undo{bottom:calc(5rem + env(safe-area-inset-bottom))}button,select,input:not([type=range]):not([type=checkbox]):not([type=radio]){min-height:44px}.mix-level input[type=range],.scale input[type=range]{height:44px}}@media(max-width:340px){.stage-button .icon-text{display:none}}@media(forced-colors:active){button[aria-pressed=true],button.toggle[aria-pressed=true],button.lit:not([aria-expanded=true]),button.icon-toggle[aria-expanded=true],button.tempo-button[aria-expanded=true]{forced-color-adjust:none;background-color:Highlight;color:HighlightText;border-color:Highlight;box-shadow:none}.voicing[aria-pressed=true] .diagram-line{stroke:HighlightText}.voicing[aria-pressed=true] .diagram-dot,.voicing[aria-pressed=true] .diagram-text{fill:HighlightText}.chord[aria-current=true],.chord.current,.cell.editing{border-color:Highlight}.cell.now,.cell.perc.on.now,.chord.playing,.part.playing,.stage-strum .now{forced-color-adjust:none;background-color:CanvasText;color:Canvas;border-color:CanvasText;box-shadow:none}:is(button[aria-pressed=true],button.lit:not([aria-expanded=true]),button.icon-toggle[aria-expanded=true],button.tempo-button[aria-expanded=true],.cell.now,.chord.playing,.part.playing) *{color:inherit!important}.chord.playing .diagram-line{stroke:Canvas}.chord.playing .diagram-dot,.chord.playing .diagram-text{fill:Canvas}.seg{background-color:GrayText}.seg.on{background-color:CanvasText}.seg.now,.segments.count-in .seg.now{background-color:Highlight}}
