@font-face{font-family:Crossroads;src:url('./assets/crossroads.woff') format('woff');font-weight:400;font-display:swap}
:root{--page:#eeeeef;--white:#fff;--ink:#17191f;--muted:#646772;--line:#d5d6dd;--navy:#142b49;--navy-light:#dce3ec;--navy-hover:#213f63;--radius:12px;--general-section-thick-divider-width:2px;--general-section-thick-divider-color:var(--line);--general-section-thick-divider:var(--general-section-thick-divider-width) solid var(--general-section-thick-divider-color);--special-section-divider-width:2px;--special-section-divider-color:var(--navy);--special-section-divider:var(--special-section-divider-width) solid var(--special-section-divider-color);color-scheme:light;font-family:Crossroads,'Arial Narrow',Arial,sans-serif;font-size:16px;color:var(--ink);background:var(--page)}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit;color:inherit}button,select{cursor:pointer}button{border:1px solid transparent;background:transparent;min-height:40px;padding:8px 14px;border-radius:7px;transition:background .15s,border-color .15s,box-shadow .15s}@media (any-hover:hover) and (any-pointer:fine){:where(html:not(.touch-input)) button:hover:where(:enabled){background:#e3e8ef}}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--navy-light);outline-offset:3px}button:disabled{opacity:.45;cursor:default}input,select{background:white;border:1px solid var(--line);border-radius:6px;padding:8px 10px;min-height:40px}input[type=number]{width:66px;font-variant-numeric:tabular-nums;text-align:center}input[type=checkbox]{accent-color:var(--navy);width:18px;height:18px;min-height:18px;margin:0;flex-shrink:0}input[type=checkbox]:checked{accent-color:var(--navy)}select{max-width:100%}[hidden]{display:none!important}.app-shell{max-width:1600px;margin:0 auto;padding:30px 38px 18px}.header{display:flex;justify-content:space-between;align-items:center;margin:0 0 30px}.brand{display:flex;align-items:center;gap:14px}.waveform{width:78px;height:38px}h1{font-size:round(nearest, clamp(24px,2.2vw,34px), 1px);font-weight:400;letter-spacing:round(nearest, -.025em, 1px);margin:0;paint-order:stroke fill;-webkit-text-stroke:0;color:var(--navy)}.icon-button{border:1px solid var(--line);border-radius:50%;width:34px;min-height:34px;height:34px;padding:0;font-size:20px;color:var(--muted)}.control-panel{position:relative;z-index:5;margin-bottom:10px}.control-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.primary-controls{padding:10px 0;justify-content:space-between}.selection-controls{padding:10px 0;justify-content:flex-start}.segmented{display:inline-flex;border:1px solid #c9ccd8;border-radius:8px;background:#e1e5eb;padding:3px;gap:3px;white-space:nowrap}.segmented button{min-height:38px;padding:7px 18px;border-radius:5px}.segmented button[aria-pressed=true]{background:var(--navy);color:white;border-color:var(--navy);box-shadow:0 1px 2px #0000000a}@media (any-hover:hover) and (any-pointer:fine){:where(html:not(.touch-input)) .segmented button:hover:where(:enabled):not([aria-pressed=true]){background:#f7f8fa}}.label{font-size:14px;color:var(--muted)}.picker-wrap{position:relative}.picker{display:flex;gap:12px;align-items:center;background:#fafafa;border:1px solid var(--line);min-width:138px;justify-content:space-between;--selector-side-padding:14px;padding-inline:round(nearest, var(--selector-side-padding) * var(--selector-padding-factor,1), 1px)}.picker[aria-expanded=true],.quiet-button[aria-expanded=true]{border-color:var(--navy);background:#e7ebf0}.practice-picker-wrap .picker{min-width:216px}.range-control{display:flex;align-items:center;gap:8px;margin-left:0}.range-control input{width:80px;background:#fafafa}.quiet-button{border-color:var(--line);background:#f8f8fa}.settings-row{display:flex;gap:18px;flex-wrap:wrap;padding:20px 0 8px;border-top:1px solid var(--line);margin-top:8px}.settings-row label{display:flex;align-items:center;gap:10px;font-size:14px}.settings-row select,.settings-row input{font-size:16px}.popover{position:absolute;left:0;top:calc(100% + 10px);background:white;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 35px #17255426;width:360px;max-width:calc(100vw - 36px);padding:18px;z-index:10}.popover-head{display:flex;align-items:center;gap:5px;margin-bottom:12px}.popover-head strong{font-size:18px;font-weight:400;margin-right:auto}.popover-head button{min-height:30px;padding:4px 10px;border:1px solid var(--line);font-size:14px}.key-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.key-option{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;border:1px solid var(--line);border-radius:6px;font-size:15px;cursor:pointer}.key-option:has(input:checked){background:var(--navy);color:white;border-color:var(--navy)}.key-option input{position:absolute;opacity:0;width:1px}.key-option:focus-within{outline:3px solid var(--navy-light)}.practice-group{padding:12px 0;border-top:1px solid #e7e8ee}.practice-group-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;color:var(--navy);font-size:15px}.practice-group-head button{margin-left:auto;min-height:26px;font-size:13px;padding:2px 8px}.practice-options-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px}.practice-option{display:flex;gap:9px;align-items:center;min-height:34px;font-size:15px;cursor:pointer}.chord-controls{display:flex;align-items:center;gap:12px;margin-top:12px}.chord-controls select{min-width:250px}.practice-surface{background:white;border:1px solid #d4d6df;border-radius:14px;box-shadow:0 4px 12px #1b254807;overflow:hidden}.surface-toolbar{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line);gap:16px;flex-wrap:wrap}.context{display:flex;align-items:center;gap:18px;font-size:16px;font-variant-numeric:tabular-nums}.context strong{font-weight:400;font-size:18px}.context>span{color:var(--muted);border-left:1px solid var(--line);padding-left:18px}.view-controls{display:flex;gap:12px}.small button{font-size:14px;min-height:32px;padding:5px 12px}.small{background:#f0f2f5}.exercise-heading{padding:27px 28px 0;display:flex;justify-content:space-between;align-items:center;gap:15px}h2{font-weight:400;margin:0;font-size:round(nearest, clamp(24px,2vw,30px), 1px);letter-spacing:round(nearest, -.015em, 1px)}.chord-heading{color:var(--navy);font-size:17px;margin-bottom:7px}.route-info{color:var(--muted);font-size:14px;text-align:right}.target-row{display:flex;align-items:center;gap:15px;justify-content:space-between;padding:20px 28px 16px;min-height:89px}.targets{list-style:none;padding:0;margin:0;display:flex;gap:10px;flex-wrap:wrap;align-items:center}.targets li,.key-note{min-width:48px;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid var(--root-color,var(--navy));border-radius:8px;background:white;font-size:24px;color:#000000;position:relative}.targets li.current,.key-note{background:var(--root-light,var(--navy-light));border:2px solid var(--root-color,var(--navy));box-shadow:0 0 0 3px var(--root-halo,transparent)}.board-scroll{overflow-x:auto;scrollbar-color:var(--navy-light) white;background:#fff;padding:14px 26px 10px}.board{width:100%;max-width:100%;margin:auto;background:white}.board svg{display:block;width:100%;height:auto;max-height:470px;min-height:200px;background:#fff}.board .root-hint{opacity:1}.empty-message{margin:20px 28px;padding:18px;border:1px solid var(--navy-light);background:#f1f3f6;border-radius:8px;color:#142b49}.practice-footer{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:21px 24px;border-top:1px solid var(--line);flex-wrap:wrap}.listen-controls,.advance-controls{display:flex;align-items:center;gap:10px}.mic-button{display:flex;gap:8px;align-items:center;border:1px solid var(--navy-light);background:#edf1f5;font-size:15px}.mic-button svg{width:17px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7}.mic-button[aria-pressed=true]{background:#d72929;border-color:#d72929;color:white}.primary{background:var(--navy);border-color:var(--navy);color:white}@media (any-hover:hover) and (any-pointer:fine){:where(html:not(.touch-input)) .primary:hover:where(:enabled){background:var(--navy-hover);border-color:var(--navy-hover)}}.next-button{min-width:137px;display:flex;gap:18px;align-items:center;justify-content:space-between}.next-button svg{display:block;width:20px;height:20px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.mic-error{margin:0;padding:0 24px 18px;color:#9b2e20;font-size:14px}.page-footer{display:flex;justify-content:space-between;color:#747782;font-size:14px;padding:16px 3px}.progression-strip{display:flex;gap:7px;padding:17px 26px 0;overflow-x:auto;scrollbar-width:thin}.chord-chip{flex:0 0 auto;min-width:52px;display:flex;flex-direction:column;gap:3px;align-items:center;border:1px solid #dce0ef;background:#f2f4f6;padding:8px 12px;font-size:18px}.chord-chip small{font-size:13px;color:var(--muted)}.chord-chip:not(.active){border:2px solid var(--root-color,var(--navy))}.chord-chip.active{background:var(--navy);border-color:var(--navy);color:white}.chord-chip.active small{color:white}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}dialog{border:1px solid var(--line);border-radius:14px;padding:26px;max-width:500px;width:calc(100% - 32px);box-shadow:0 20px 80px #0003}dialog::backdrop{background:#141b374f}dialog p{font-size:16px;line-height:round(nearest, 1.5em, 1px);color:#4a4e5a}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head h2{font-size:25px}body.paused .targets{opacity:.55}
@media(min-width:1500px){.board svg{max-height:510px}}@media(max-width:1000px){.app-shell{padding:24px}.range-control{margin-left:0}.primary-controls{gap:10px}.surface-toolbar{padding:16px 20px}.practice-footer{padding:18px}.advance-controls{margin-left:auto}.context{gap:12px}.context>span{padding-left:12px}}
@media(max-width:640px){.app-shell{padding:18px 12px 10px}.header{margin-bottom:18px}.brand{gap:9px}.waveform{width:51px}.primary-controls{gap:9px;flex-wrap:nowrap}.selection-controls{gap:12px}.picker{min-width:0;width:100%;--selector-side-padding:10px;padding:8px round(nearest, var(--selector-side-padding) * var(--selector-padding-factor,1), 1px);gap:6px}.practice-picker-wrap .picker{min-width:0}.range-control{justify-content:flex-start}.range-control input{width:70px;padding:8px 10px}.primary-controls>.quiet-button{justify-self:end}.selection-controls{position:relative}.practice-picker-wrap{position:static}.popover{max-width:calc(100vw - 24px)}.key-grid{gap:6px}.practice-options-grid{grid-template-columns:1fr}.settings-row{gap:12px}.settings-row label{justify-content:space-between;flex-basis:100%}.settings-row select{width:160px}.surface-toolbar{padding:14px;gap:14px}.view-controls{width:100%;justify-content:space-between;gap:7px}.small button{padding:5px 10px}.exercise-heading{padding:22px 16px 0;align-items:start}.exercise-heading h2{font-size:25px}.route-info{font-size:13px}.target-row{padding:18px 16px 12px;gap:6px;align-items:flex-start}.targets{gap:7px}.targets li,.key-note{min-width:38px;height:40px;font-size:22px}.board-scroll{padding:12px 8px}.board.wide svg{min-width:800px}.board.medium svg{min-width:470px}.board.fit svg{min-width:360px}.board svg{min-height:190px;max-height:none}.board{max-width:none}.practice-footer{padding:15px 14px;gap:14px}.listen-controls{width:100%}.advance-controls{width:100%;justify-content:space-between;gap:6px}.advance-controls button{padding:8px 9px;font-size:14px}.next-button{min-width:118px}.chord-controls{flex-wrap:wrap;gap:8px}.chord-controls select{min-width:0;flex:1}.chord-controls>.quiet-button{margin-left:auto}.progression-strip{padding:14px 16px 0}.page-footer{font-size:13px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Key, centered targets, and right-aligned practice information share one row. */
.exercise-bar{display:grid;grid-template-columns:minmax(120px,1fr) fit-content(50%) minmax(140px,1fr);align-items:center;gap:18px;padding:13px 28px 9px;border-bottom:1px solid var(--line)}
.exercise-bar .exercise-heading{container-type:inline-size;display:block;padding:0 5px;min-width:0;text-align:center}
.exercise-bar .context{min-width:0}
.exercise-bar .key-context{flex-wrap:wrap}
.exercise-bar h2{font-size:round(nearest, clamp(23px,1.8vw,28px), 1px);overflow-wrap:break-word}
.exercise-bar .route-info{display:inline-flex;align-items:center;justify-content:center;gap:6px;text-align:center;margin-top:0;padding:3px 8px;border:1px solid var(--navy);border-radius:6px;background:white;color:#000;white-space:nowrap;font-variant-numeric:tabular-nums}
.exercise-bar .route-info:empty{display:none}
.exercise-bar .target-row{padding:0;min-height:48px;justify-content:center}
.exercise-bar .targets{justify-content:center}

.header{gap:16px;flex-wrap:wrap}
.header .listen-controls{margin-left:auto;justify-content:flex-end;width:auto;flex-shrink:0;flex-wrap:nowrap;white-space:nowrap}
.practice-footer{justify-content:flex-end}
.practice-footer .advance-controls{justify-content:flex-end}
.page-footer{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px}
.page-footer #help-button{grid-area:1 / 1;justify-self:start}
.page-footer #round-count{grid-area:1 / 2;text-align:center}
.page-footer #practice-random-status{grid-area:1 / 3;justify-self:end}
.page-footer #session-status,.page-footer :is(#round-count,#practice-random-status):empty{display:none}
@media(max-width:1100px){.exercise-bar{grid-template-columns:minmax(110px,1fr) minmax(0,1.6fr) minmax(140px,1fr);gap:16px}.exercise-bar .targets{gap:8px}}
@media(max-width:640px){.exercise-bar{grid-template-columns:minmax(82px,1fr) minmax(0,1.5fr) minmax(0,1fr);gap:10px;padding:11px 12px 7px}.exercise-bar .exercise-heading{padding:0 3px}.exercise-bar h2{font-size:18px}.exercise-bar .key-context{gap:8px}.exercise-bar .target-row{padding:0}.exercise-bar .targets{gap:6px}.header .listen-controls{gap:8px}.page-footer :is(#round-count,#practice-random-status){font-size:13px}}

.practice-option{font-size:15px}
.mode-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.mode-column{display:flex;flex-direction:column;gap:5px}
.mode-column .practice-option{align-items:center}

#help-dialog{max-width:760px;max-height:85vh;overflow-y:auto}
#help-dialog h3{font-size:19px;font-weight:400;color:var(--navy);margin:24px 0 10px}
.help-shapes{border-top:1px solid var(--line);margin-top:24px}
.help-shapes ul{padding-left:22px;color:#4a4e5a;font-size:16px;line-height:round(nearest, 1.5em, 1px)}
.help-shapes li+li{margin-top:10px}
.help-table{width:100%;border-collapse:collapse;font-size:16px;line-height:round(nearest, 1.5em, 1px)}
.help-table th,.help-table td{text-align:left;vertical-align:top;border-bottom:1px solid var(--line);padding:10px 12px}
.help-table thead{background:var(--navy);color:white}
.help-table th{font-weight:400}
.help-table tbody th{width:44%;color:var(--navy)}
.help-table tbody tr:nth-child(even){background:#f3f5f8}
.interval-order{display:inline-block;white-space:nowrap;margin-right:18px}
.help-sources a{color:var(--navy);text-decoration:underline}
@media(max-width:480px){#help-dialog{padding:18px}.help-table th,.help-table td{padding:9px 7px}.interval-order{display:block;margin-right:0}}

#recognition-list-close,#calibration-close,#song-import-details-close,#practice-warning-close,#help-close,#presets-close,#setup-info-close,#song-presets-close,#song-verses-close,#practice-guide-close,#chord-guide-close,#progression-builder-info-close,#progression-unapplied-close,#progression-close,#number-picker-close,#keys-selector-close,#practice-selector-close{display:grid;place-items:center;flex:0 0 34px;line-height:1}
#recognition-list-close svg,#calibration-close svg,#song-import-details-close svg,#practice-warning-close svg,#help-close svg,#presets-close svg,#setup-info-close svg,#song-presets-close svg,#song-verses-close svg,#practice-guide-close svg,#chord-guide-close svg,#progression-builder-info-close svg,#progression-unapplied-close svg,#progression-close svg,#number-picker-close svg,#keys-selector-close svg,#practice-selector-close svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.extra-roots-control{display:flex;align-items:center;gap:9px;margin-right:0;min-height:40px;font-size:15px;cursor:pointer}
.extra-roots-control:has(input:disabled){opacity:.55;cursor:default}

.dyad-section+.dyad-section{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.dyad-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.dyad-section-head h3{font-size:15px;font-weight:400;margin:0;color:var(--navy)}
.dyad-section-head>div{display:flex;gap:5px}
.dyad-section-head button{min-height:30px;padding:4px 9px;font-size:14px;border:1px solid var(--line)}
/* Paired groups use shared intrinsic widths and equal outer/middle spacing. */
.dyad-sequence-table{--dyad-button-gap:8px;display:block;width:100%;max-width:100%;font-size:15px}
.dyad-sequence-table tbody{display:grid;grid-template-columns:repeat(var(--dyad-columns,1),max-content);justify-content:space-evenly;row-gap:var(--dyad-button-gap)}
.dyad-sequence-table tr{display:grid;grid-template-columns:var(--dyad-title-width,max-content) var(--dyad-title-gap,16px) var(--dyad-button-width,max-content) var(--dyad-button-gap) var(--dyad-button-width,max-content);align-items:center}
.dyad-sequence-table th{grid-column:1;font-weight:400;text-align:right;white-space:nowrap;padding:0}
.dyad-sequence-table td{min-width:0;padding:0;text-align:center}
.dyad-sequence-table td:nth-child(2){grid-column:3}
.dyad-sequence-table td:nth-child(3){grid-column:5}
.dyad-individual-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 12px}
.dyad-individual-grid .practice-option{line-height:round(nearest, 1.3em, 1px)}


#settings-button{display:inline-flex;align-items:center;gap:10px}
#settings-button[aria-expanded=true]{background:var(--navy);border-color:var(--navy);color:white}

.key-context{display:flex;align-items:center;gap:12px}
.key-mode{font-size:24px;font-weight:400}
.key-note{flex-shrink:0;padding:0 8px}
@media(max-width:640px){.key-mode{font-size:22px}}

.settings-row{align-items:center;border-bottom:1px solid var(--line);padding-bottom:40px}
.settings-row .view-controls{flex-wrap:wrap;align-items:center;row-gap:inherit}
.settings-row .extra-roots-control{justify-content:flex-start}

.practice-info-button{font:inherit;line-height:round(nearest, 1.2em, 1px);letter-spacing:inherit;text-align:center;max-width:100%;padding:4px 8px;padding-inline:clamp(8px,5cqi,16px);color:var(--navy);border-color:var(--navy)}
@media (any-hover:hover) and (any-pointer:fine){:where(html:not(.touch-input)) .practice-info-button:hover:where(:enabled){background:var(--navy-light)}}
.practice-formula{display:inline-block;white-space:nowrap}
.practice-family-title{font-size:15px;font-weight:400;margin:0 0 10px;color:var(--navy)}
.practice-group-head,.practice-group-head button,.practice-family-title,.dyad-section-head h3,.dyad-section-head button,.popover-head strong,.popover-head button{color:var(--navy);-webkit-text-fill-color:var(--navy)}
#practice-guide-dialog{max-width:600px;max-height:calc(100dvh - 32px);overflow:auto}
#practice-guide-dialog .dialog-head{gap:18px;align-items:flex-start;padding-bottom:16px;border-bottom:var(--general-section-thick-divider)}
#practice-guide-dialog h3{font-size:17px;font-weight:400;color:var(--navy);margin:20px 0 6px}
#practice-guide-dialog h3+p{margin-top:0}
#practice-guide-dialog .guide-context{color:var(--navy)}
#practice-guide-shapes{margin-top:20px;padding-bottom:20px;border-bottom:var(--general-section-thick-divider)}
.guide-shape-navigation{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;margin-bottom:12px}
#guide-shape-practice{grid-column:1;grid-row:1;justify-self:start}
#guide-shape-all{grid-column:3;grid-row:1}
#guide-shape-clear{grid-column:4;grid-row:1}
.guide-shape-heading{grid-column:2;grid-row:1;white-space:nowrap}
:is(#guide-shape-practice,#guide-shape-all)[aria-pressed=true]{background:var(--navy);color:white;border-color:var(--navy)}
.guide-shape-heading{text-align:center;min-width:0}
#practice-guide-dialog #guide-shape-title{margin:0;overflow-wrap:anywhere}
#guide-shape-board{width:100%;min-width:0;background:var(--svg-canvas,white);border:1px solid var(--line);border-radius:8px;overflow:hidden}
#guide-shape-board svg{display:block;width:100%;height:auto;max-height:260px;fill:var(--svg-black,#000)}
#guide-shape-board[aria-disabled="false"]{cursor:pointer}
#guide-shape-board:focus-visible{outline:3px solid var(--navy-light);outline-offset:3px}
.guide-string-controls{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:16px}
.guide-shape-step-controls{display:flex;align-items:center;gap:8px;margin-left:auto;flex:0 0 auto}
@media(max-width:420px){.guide-shape-navigation{gap:6px}.guide-shape-navigation button{padding-inline:12px}.guide-string-controls{gap:8px}.guide-shape-step-controls button{padding-inline:12px}}
#practice-guide-dialog .guide-note,#practice-guide-dialog details{font-size:14px;line-height:round(nearest, 1.5em, 1px)}
#practice-guide-dialog summary{cursor:pointer;color:var(--navy)}

#practice-panel .popover-head strong,
#practice-panel .practice-group-head,
#practice-panel .practice-family-title,
#practice-panel .dyad-section-head h3{font-weight:400;text-transform:uppercase}
#practice-panel .popover-head button,
#practice-panel .practice-group-head button,
#practice-panel .dyad-section-head button{font-weight:400;text-transform:none}

body,b,strong,h1,h2,h3,h4,h5,h6,th{font-weight:400}

.practice-info-button.has-formula{display:inline-flex;flex-wrap:wrap;align-items:baseline;justify-content:center;column-gap:round(nearest, .75em, 1px)}
.practice-info-button .practice-label{min-width:0;text-align:center}
.practice-info-button .practice-formula{position:relative;text-align:center}
.practice-info-button .practice-formula::before{content:"·";position:absolute;right:round(nearest, calc(100% + .25em), 1px)}
.practice-info-button.formula-wrapped .practice-formula::before{display:none}

.exercise-bar .route-info[data-direction=down]{background:var(--navy);color:white}
.route-info svg{display:block;width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.practice-group:has(>.practice-random-head){border-top:0;padding-top:0}
.practice-random-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;padding:12px 0;border-block:2px solid var(--line);color:var(--navy)}
.practice-random-head h3{font-size:15px;font-weight:400;text-transform:uppercase;margin:0}
.practice-random-head label{display:flex;align-items:center;gap:8px;font-size:15px;cursor:pointer}

/* Keep the fret spacing of the chosen view when fewer frets are selected. */
.board.shortened{width:var(--board-width);min-width:min(100%,var(--board-min-width));max-width:100%;margin-inline:auto}
.board.shortened svg{width:100%;min-width:0}

.rounds-control{display:inline-flex;align-items:center;gap:8px;margin-left:auto;white-space:nowrap;font-size:14px;font-weight:400;text-transform:none;color:var(--navy)}
.rounds-control input[type=number]{width:69px;height:40px;min-height:40px;padding:8px 10px;background:#fafafa;font-size:16px;font-weight:400}
.practice-group-head,.dyad-section-head{flex-wrap:wrap}
.dyad-section-head>.rounds-control{margin-left:auto}
@media(max-width:640px){.rounds-control input[type=number]{width:60px}.dyad-section-head>div{margin-left:auto}}

/* Center the direction indicator in the space between the key and targets. */
.exercise-bar .context:has(.route-info:not([hidden])){gap:0}
.exercise-bar .key-context{flex-shrink:0}
.route-slot{flex:1;display:flex;align-items:center;justify-content:center;margin-right:-18px;min-width:0}
.route-slot:has(.route-info[hidden]){display:none}
.exercise-bar.has-routes{grid-template-columns:minmax(160px,1fr) fit-content(50%) minmax(140px,1fr)}
@media(max-width:1100px){.route-slot{margin-right:-16px}.exercise-bar.has-routes{grid-template-columns:minmax(150px,1fr) minmax(0,1.6fr) minmax(140px,1fr)}}
@media(max-width:640px){.route-slot{margin-right:-10px}.exercise-bar.has-routes{grid-template-columns:minmax(130px,1fr) minmax(0,1.5fr) minmax(0,1fr)}}

/* Stable practice area: selected exercises share the same layout allowance. */
.settings-row{border-block-width:var(--special-section-divider-width);border-block-color:var(--special-section-divider-color)}
.exercise-bar{grid-template-columns:minmax(120px,1fr) minmax(0,1.5fr) minmax(140px,1fr);--target-height:48px;min-height:calc(var(--target-height) + 23px)}
.exercise-bar.has-routes{grid-template-columns:minmax(160px,1fr) minmax(0,1.5fr) minmax(140px,1fr)}
.exercise-bar .target-row{height:var(--target-height);min-height:48px;align-items:center;width:100%}
.exercise-bar .targets{width:100%;align-content:center;align-items:center;justify-content:center}
.targets li{flex:0 0 48px;width:48px}
.exercise-bar .exercise-heading{padding-inline:0;min-height:78px;display:flex;align-items:center;justify-content:center}
.exercise-bar h2{width:100%}
.practice-info-button,.practice-info-button.has-formula{display:inline-block;vertical-align:middle;overflow-wrap:normal;word-break:normal}
.practice-title-line{display:block;white-space:nowrap}
.practice-info-button .practice-label,.practice-info-button .practice-formula,.practice-info-button .practice-quality{white-space:nowrap}
.board-scroll{--fretboard-height:470px;scrollbar-gutter:stable;padding-block:8px}
.board{height:var(--fretboard-height)}
.board svg{height:100%;min-height:0;max-height:100%}
@media(max-width:1100px){.exercise-bar{grid-template-columns:minmax(110px,1fr) minmax(0,1.6fr) minmax(140px,1fr)}.exercise-bar.has-routes{grid-template-columns:minmax(150px,1fr) minmax(0,1.6fr) minmax(140px,1fr)}}
@media(max-width:640px){
 .exercise-bar{grid-template-columns:minmax(48px,.8fr) minmax(76px,1.5fr) minmax(94px,1fr);gap:6px;min-height:calc(var(--target-height) + 19px)}
 .exercise-bar.has-routes{grid-template-columns:minmax(112px,1fr) minmax(38px,1.5fr) minmax(94px,1fr)}
 .exercise-bar .exercise-heading{padding-inline:0;min-height:56px}
 .targets li{flex-basis:38px;width:38px}
 .exercise-bar .route-info{font-size:12px;gap:3px;padding-inline:4px}
 .route-slot{margin-right:-6px}
 .board svg{min-height:0;max-height:100%}
}

/* Chord families retain their own choices; progression context stays beside chips. */
.progression-row{min-height:0;display:flex;align-items:center;gap:16px;flex-wrap:nowrap;border-bottom:1px solid var(--line,#d4d8df);padding:12px 18px}
.progression-row[hidden]{display:none}
.progression-row .progression-strip{border:0;padding:0;flex:0 1 auto;min-width:0}
.chord-family-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0}
.chord-family-row .practice-option{flex:1}
.chord-dyad-enable{margin:10px 0}
@media(max-width:640px){.progression-row{gap:8px;padding:10px}}

/* Center Arpeggio in the space between the triad title and Random. */
.triad-random-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px}
.triad-random-head .arpeggio-control{justify-self:center}
.triad-random-head>label:last-child{justify-self:end}
.exercise-bar .route-info[data-axis=strings][data-direction=up]{background:white;color:var(--navy);border-color:var(--navy)}
@media(max-width:640px){.triad-random-head{gap:8px}.triad-random-head h3{max-width:110px}.triad-random-head label{gap:5px;font-size:14px}}

#chord-guide-dialog{max-width:640px;max-height:calc(100dvh - 32px);overflow:auto}
#chord-guide-dialog .dialog-head{gap:18px;align-items:flex-start}
#chord-guide-dialog h3{font-size:17px;font-weight:400;color:var(--navy);margin:20px 0 6px}
#chord-guide-dialog h3+p{margin-top:0}
#chord-guide-dialog .guide-context{color:var(--navy)}
#chord-guide-dialog .chord-family{display:block;font-size:12px;color:var(--muted)}
#chord-guide-dialog td{overflow-wrap:anywhere}
@media(max-width:480px){#chord-guide-dialog{padding:18px}}


/* Live feedback marker uses the existing SVG artwork. */
.mic-feedback{flex:0 0 64px;align-self:flex-start;display:flex;flex-direction:column;align-items:center;gap:4px;margin-left:auto}
.mic-feedback-marker{width:64px;height:64px;padding:5px;border:3px solid #d72929;border-radius:8px;background:#eb9494;box-shadow:0 0 0 3px #eb9494;display:grid;place-items:center;color:var(--muted);font-size:24px}
.mic-feedback-marker svg{display:block;width:100%;height:100%}
.exercise-bar.has-feedback .context{height:100%;gap:12px;align-items:center;padding-right:100px}
.exercise-bar.has-feedback{grid-template-columns:minmax(170px,1fr) minmax(0,1.5fr) minmax(140px,1fr);min-height:calc(max(var(--target-height),70px) + 23px)}
.exercise-bar.has-feedback.has-routes{grid-template-columns:minmax(250px,1fr) minmax(0,1.5fr) minmax(140px,1fr)}
.exercise-bar.has-feedback .route-slot{margin-right:0}
@media(max-width:640px){
 .mic-feedback{flex-basis:54px}
 .mic-feedback-marker{width:54px;height:54px}
 .exercise-bar.has-feedback,.exercise-bar.has-feedback.has-routes{grid-template-columns:minmax(118px,.9fr) minmax(38px,1.5fr) minmax(94px,1fr);min-height:calc(max(var(--target-height),60px) + 19px)}
}

/* Reserve the widest selected list; anchor feedback to its left edge. */
.exercise-bar .target-row{position:relative}
.exercise-bar .targets{flex:none;width:var(--target-list-width,100%);max-width:100%}
.exercise-bar.has-feedback .target-row{height:100%;align-self:stretch}
.target-row .mic-feedback{position:absolute;top:50%;transform:translateY(-32px);left:var(--feedback-x,calc(50% - var(--target-list-width,100%) / 2 - 100px));margin:0}
@media(max-width:640px){.target-row .mic-feedback{transform:translateY(-27px);left:var(--feedback-x,calc(50% - var(--target-list-width,100%) / 2 - 84px))}}

/* Center direction against the actual key and feedback/list edges. */
.exercise-bar{position:relative}
.exercise-bar .route-slot,.exercise-bar.has-feedback .route-slot{position:absolute;left:var(--route-x,0px);top:var(--route-y,50%);width:max-content;max-width:none;margin:0;transform:translate(-50%,-50%)}

/* Center the current interval list and feedback square on the same row midpoint. */
.exercise-bar .target-row{align-items:center}
.exercise-bar .targets{align-self:center;align-content:center}

.setup-status{margin:8px 0;font-size:14px;color:var(--navy)}
.setup-status.error{color:#9b2e20}

/* Keep checkbox captions beside their boxes, including full-width Setup rows. */
.settings-row .mic-feedback-control{justify-content:flex-start;gap:10px}
/* Keep key and direction together within the main row when feedback is visible. */
.exercise-bar.has-feedback .context{display:flex;align-items:flex-start;justify-content:center;padding:0;gap:0;height:auto;width:max-content;max-width:100%;flex-direction:column}
.exercise-bar.has-feedback .key-context{align-self:center}
.exercise-bar.has-feedback.has-routes .context{align-items:center;gap:6px;width:96px}
.exercise-bar.has-feedback.has-routes .route-slot{position:static;left:auto;top:auto;transform:none;margin:0;width:max-content;height:26px;min-height:26px;max-height:26px;flex:none;display:flex;align-items:center;justify-content:center}
.exercise-bar>.context,.exercise-bar>.target-row,.exercise-bar>.exercise-heading{grid-row:1}
.exercise-bar>.context{grid-column:1}
.exercise-bar>.target-row{grid-column:2}
.exercise-bar>.exercise-heading{grid-column:3}
.exercise-bar:not(.has-routes) .route-slot{display:none}
@media(max-width:640px){.exercise-bar.has-feedback.has-routes .route-slot{height:24px;min-height:24px;max-height:24px}}

/* Content changes must not move the key or the feedback anchor. */
.exercise-bar .key-note{width:48px;min-width:48px;max-width:48px;padding-inline:4px}
@media(max-width:640px){
 .exercise-bar.has-feedback.has-routes .context{width:76px}
 .exercise-bar .key-note{width:38px;min-width:38px;max-width:38px;padding-inline:2px}
}

/* Center the stack in the actual space left of feedback, with a protected gap. */
.exercise-bar.has-feedback .context,
.exercise-bar.has-feedback.has-routes .context{width:var(--key-area-width,80px);max-width:none;align-items:center}
@media(max-width:640px){
 .exercise-bar.has-feedback,.exercise-bar.has-feedback.has-routes{grid-template-columns:minmax(138px,.9fr) minmax(38px,1.5fr) minmax(82px,1fr)}
}

/* The 16px arrow plus padding/borders occupies 24px, even when hidden. */
.exercise-bar.has-feedback.has-routes .route-info{height:24px;line-height:16px;flex:none}

/* Let both setup groups share a line; wrap whole groups before their controls. */

.preset-table td{vertical-align:top}.preset-table th:first-child,.preset-table td:first-child{width:52%}

/* Keep the Foundations reference height anchored to the current practice surface. */
.spectrum-controls{position:relative;isolation:isolate;width:100%}
.spectrum-backdrop{position:absolute;z-index:-1;inset:auto 14px var(--spectrum-bottom,-10px);height:round(nearest, calc(var(--spectrum-reference-height,0px) * 1.25), 1px);overflow:hidden;pointer-events:none;user-select:none}
/* Keep the original width based on the reference height. The SVG fades to zero
   at y=648 in its 724-unit viewBox, so scale its transparent tail out of the frame. */
.spectrum-colors{position:absolute;top:0;left:0;width:max(100%,round(nearest, calc(var(--spectrum-reference-height,0px) * 5 * 724 / 648), 1px));max-width:none;height:100%;object-fit:fill;transform:scaleY(calc(724 / 648));transform-origin:top left}


.practice-top,.practice-bottom{display:contents}
/* Short screens: keep all chords visible and reserve a lower-right navigation area. */

body.compact-practice-layout .practice-surface{height:calc(100lvh - 16px);height:min(calc(100lvh - 16px),var(--practice-height,calc(100lvh - 16px)));display:flex;flex-direction:column;scroll-margin-top:8px;overflow:auto}
body.compact-practice-layout .practice-top{display:block;flex:0 0 auto;min-width:0}
body.compact-practice-layout .practice-top .progression-row{min-width:0;flex-wrap:nowrap;align-items:center}
body.compact-practice-layout .practice-top .progression-strip{flex:1 1 auto;flex-wrap:wrap;overflow:visible;min-width:0}
body.compact-practice-layout .practice-top.side-by-side{display:grid;grid-template-columns:var(--progression-width) minmax(0,1fr)}
body.compact-practice-layout .practice-top.side-by-side .progression-row{border-right:1px solid var(--line)}
body.compact-practice-layout .practice-top .exercise-bar{zoom:.75;min-width:0}
body.compact-practice-layout .practice-bottom{display:flex;flex:1 1 0;min-height:80px;align-items:stretch;min-width:0}
body.compact-practice-layout .practice-bottom>.board-scroll{flex:0 1 var(--lower-board-width,70%);min-width:0;min-height:0;height:auto;padding:4px 8px;overflow:hidden;scrollbar-gutter:auto;display:flex;align-items:center;justify-content:center}
body.compact-practice-layout .practice-bottom:has(>.practice-footer[hidden])>.board-scroll{flex:1 1 100%;width:100%;justify-content:center}
body.compact-practice-layout .practice-surface .board{height:100%;width:100%!important;max-width:100%;min-width:0!important}
body.compact-practice-layout .practice-surface .board svg{display:block;height:100%;width:100%;min-height:0;min-width:0!important;max-height:100%}
body.compact-practice-layout .practice-bottom>.practice-footer{align-self:flex-end;flex:1 0 auto;padding:9px;border-top:0;flex-wrap:nowrap;justify-content:flex-start}
body.compact-practice-layout .practice-bottom .advance-controls{zoom:.75;flex-wrap:nowrap;white-space:nowrap;margin:0;width:auto;justify-content:flex-start}
body.compact-practice-layout .practice-surface .mic-error{flex:0 0 auto;font-size:12px;padding-bottom:4px}
body.compact-practice-layout .practice-surface .empty-message,body.compact-practice-layout .song-surface .empty-message{margin:8px 12px}
body.compact-practice-layout .practice-surface.right-stack{display:grid;grid-template-columns:var(--sidebar-board-width) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}
body.compact-practice-layout .right-stack .practice-top{grid-column:2;grid-row:1;display:block;border-left:1px solid var(--line)}
body.compact-practice-layout .right-stack .practice-bottom{display:contents}
body.compact-practice-layout .right-stack .practice-bottom>.board-scroll{grid-column:1;grid-row:1 / 4;height:100%;box-sizing:border-box}
body.compact-practice-layout .right-stack .practice-bottom>.practice-footer{grid-column:2;grid-row:3;align-self:end;justify-content:flex-start;border-left:1px solid var(--line)}
body.compact-practice-layout .right-stack .mic-error{grid-column:1 / -1}



.board-scroll.click-to-advance{cursor:pointer}

/* Keep structural dividers outside scaled content so every line remains 1px. */
.exercise-frame{min-width:0;border-bottom:1px solid var(--line)}
.exercise-frame>.exercise-bar{border-bottom:0}
.settings-row .extra-roots-control,.settings-row .mic-feedback-control,.song-navigation-settings .mic-feedback-control{display:flex;align-items:center;font-size:14px;min-height:40px;margin:0;padding:0;gap:10px;justify-content:flex-start}
#next-note{min-width:0;width:max-content;flex:0 0 auto;gap:10px;justify-content:center}
.board-scroll.click-to-advance{user-select:none;-webkit-tap-highlight-color:transparent}
.board-scroll.click-to-advance:focus,.board-scroll.click-to-advance:active{outline:none;box-shadow:none}

.targets li[data-interval-tile]{cursor:pointer;user-select:none}
.targets.mic-off li:not(.done){border:2px solid var(--root-color,var(--navy));box-shadow:0 0 0 3px var(--root-halo,transparent);background:white}
#exercise-bar .targets li{background:var(--root-light,var(--navy-light))}
#exercise-bar .targets li.done,#exercise-bar .targets:not(.mic-off) li:not(.current){border:2px solid black;background:white;color:black;box-shadow:none}
#exercise-bar .targets li.done::after,#exercise-bar .targets:not(.mic-off) li:not(.current)::after{content:none}
.duration-direction{display:contents}
.settings-row .direction-setting select{height:40px;min-height:40px;padding-block:6px}
.desktop-number{display:none}
.mobile-number{display:inline-flex;align-items:center;justify-content:center;text-align:center;font-variant-numeric:tabular-nums;border-color:var(--line);min-height:40px;height:40px;width:max-content;min-width:0;--selector-side-padding:10px;padding:6px round(nearest, var(--selector-side-padding) * var(--selector-padding-factor,1), 1px);font-size:16px;background:#fafafa}


@media(max-width:640px){
 .settings-row .duration-direction{display:grid;grid-template-columns:max-content max-content;align-items:center;gap:12px 10px}
 .settings-row .direction-setting{display:contents}
 .settings-row .extra-roots-control,.settings-row .mic-feedback-control,.song-navigation-settings .mic-feedback-control{height:40px;min-height:40px}
}


#practice-button{scroll-margin-top:10px;background:#9bb8e4;border:2px solid rgb(55 113 200 / 50%);box-shadow:0 0 0 3px rgb(55 113 200 / 25%)}
@media(any-hover:hover) and (any-pointer:fine){:where(html:not(.touch-input)) #practice-button:hover:where(:enabled){background:#e3e8ef}}

.setups-panel{flex:1 0 100%;min-width:0;border-top:var(--general-section-thick-divider);padding-top:28px;margin-top:4px}
.setups-panel h3{font-size:16px;font-weight:400;color:var(--navy);margin:0 0 24px}
.setups-controls,.setups-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.setups-actions{flex-wrap:nowrap}
.setup-load-control{position:relative;display:grid;place-items:center;min-height:40px;padding:8px 14px;border:1px solid var(--line);border-radius:7px;background:#f8f8fa;cursor:pointer}
.setup-load-control select{position:absolute;inset:0;width:100%;height:100%;min-width:0;opacity:0;cursor:pointer}
.setup-load-control:focus-within{outline:3px solid var(--navy-light);outline-offset:3px}
.setup-load-control:has(select:disabled){opacity:.45;cursor:default}
@media (any-hover:hover) and (any-pointer:fine){:where(html:not(.touch-input)) .setup-load-control:hover{background:#e3e8ef}}
.setup-name-field{display:flex;flex-direction:column;gap:8px;margin:20px 0}
.setup-name-field input{width:100%}
.setup-dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
dialog .setup-dialog-error{color:#9b2e20}

/* Add 20px to the existing 10px gap below open Setup. */
.settings-row:not([hidden])+.spectrum-controls{margin-top:20px}

/* Center every chord, including wrapped progressions, without a separate info control. */
.progression-row .progression-strip{width:100%;justify-content:center;flex-wrap:wrap}


/* Center setup dialogs in the visible viewport, including above a mobile keyboard. */
#setup-save-dialog,#setup-delete-dialog,.viewport-dialog{
 position:fixed;inset:auto;margin:0;
 top:var(--setup-center-y,50dvh);left:var(--setup-center-x,50vw);
 transform:translate(-50%,-50%);
 width:calc(var(--setup-viewport-width,100vw) - 32px);
 max-height:calc(var(--setup-viewport-height,100dvh) - 32px);
 overflow:auto;overscroll-behavior:contain;
}

.chord-controls{flex-wrap:wrap;padding:10px 0;margin-top:0}
.progression-name-control{display:flex;align-items:center;gap:12px;width:max-content;max-width:100%;min-width:0}
.progression-name-control #progression{flex:0 1 auto;min-width:0}
.progression-name-control #custom-button{flex:0 0 auto;margin-left:0}
#progression,#progression-current{width:round(nearest, 30ch + 22px, 1px);max-width:100%;min-width:0;background:var(--page);border:1px solid var(--line);border-radius:6px}
#progression-dialog{max-width:680px;overflow:hidden}
#progression-dialog[open]{display:flex;flex-direction:column}
.progression-fixed{flex:0 0 auto;min-width:0;padding-bottom:16px;border-bottom:var(--general-section-thick-divider)}
.progression-content{--progression-edge-gap:22px;flex:0 1 auto;min-height:0;min-width:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
.progression-content::after{content:'';display:block;border-top:var(--general-section-thick-divider)}
.progression-summary{padding:11px 0 0;container-type:inline-size}
.progression-manager{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;gap:12px;padding:var(--progression-edge-gap) 0;border-bottom:var(--special-section-divider)}
.progression-source-row{display:flex;align-items:center;justify-content:space-between;gap:12px;align-self:flex-start}
.progression-manager.compact-export{grid-template-columns:minmax(0,1fr)}
.progression-manager.compact-export .progression-source-row{width:100%}
.progression-manager>#progression-current{width:100%}
.progression-manager>#progression-library-actions{display:contents}
.progression-library-buttons{grid-column:2;display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.progression-manager.compact-export>#progression-library-actions{display:block;grid-column:1;width:100%}
.progression-manager.compact-export .progression-library-buttons{grid-column:1}
#progression-export-compact-mount{display:contents}
#progression-library-actions>#progression-export{justify-self:start}
#progression-clear{flex-shrink:0}
.progression-builder{padding-top:16px;container-type:inline-size}
.progression-builder fieldset{border:0;padding:0;margin:16px 0;min-inline-size:0;max-width:100%}
#progression-quality-controls{border-top:1px solid var(--line);padding-top:16px}
.builder-buttons,.builder-actions,.progression-draft{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.builder-buttons button,.draft-chord{border:1px solid var(--line);background:white;min-width:42px}
.builder-buttons button[aria-pressed=true],.draft-chord[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:white}
.builder-actions{display:grid;grid-template-columns:minmax(56px,1fr) minmax(max-content,1fr);align-items:center;margin:0;padding:10px 0;border-bottom:var(--general-section-thick-divider);gap:0}
.builder-preview-slot{flex:1;min-width:0;display:grid;place-items:center;padding:2px 4px}
.builder-action-buttons{justify-self:center;max-width:100%;display:grid;grid-template-columns:repeat(3,1fr);width:max-content;flex:0 0 auto;gap:8px}
#progression-chord-preview{display:flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;padding:4px 8px;text-align:center;font-size:24px;color:black;background:white;border:2px solid #808080;border-radius:8px;box-shadow:0 0 0 3px #d4d6df}
#progression-degrees{display:grid;grid-template-columns:repeat(auto-fit,minmax(42px,1fr));gap:8px}
#progression-degrees button{padding-inline:0}
.builder-buttons button[data-alter]{display:grid;place-items:center;width:48px;height:48px;padding:0;font-size:32px;line-height:1}
.progression-draft{padding:14px;background:var(--page);border:1px solid var(--line);border-radius:8px;min-height:70px}
.progression-hint{font-size:14px;color:var(--muted);margin:8px 0}
.progression-hint-row{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.progression-hint-row .progression-hint{flex:1 1 auto;min-width:0;margin:0}
.progression-hint-sentence{display:inline-block;max-width:100%}
#progression-dialog .dialog-head,#progression-unapplied-dialog .dialog-head{gap:12px}
#progression-close{flex-shrink:0;display:grid;place-items:center}
@media(max-width:480px){#progression-dialog{padding:18px}.progression-manager{gap:10px}.builder-buttons button{padding-inline:12px}}
#progression-error{text-align:left;margin:8px 0 0;line-height:round(nearest, 1.4em, 1px)}

.builder-buttons .alteration-symbol{display:block;width:32px;height:32px;fill:currentColor;pointer-events:none}
#keys-panel [data-all=keys]{display:grid;place-items:center}
#keys-panel [data-all=keys] .alteration-symbol{display:block;width:20px;height:20px;fill:currentColor;pointer-events:none}
/* The play-along toggle uses the SVG major-root green (#217821). */
.rhythm-toggle{--play-green:#217821;margin-left:auto;display:grid;place-items:center;width:44px;height:40px;padding:8px;background:#fff;color:var(--play-green);border:2px solid var(--play-green);box-shadow:0 0 0 3px rgb(33 120 33 / 25%)}
.rhythm-toggle svg{display:block;width:22px;height:22px;fill:currentColor}
.rhythm-toggle[aria-pressed=true]{background:var(--play-green);color:#fff;border-color:var(--play-green)}
.rhythm-controls,.rhythm-settings-line{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.rhythm-controls{padding:20px 0 10px;position:relative;border-top:3px solid rgb(33 120 33 / 50%);margin-top:8px}
.rhythm-controls label,.rhythm-settings label{display:flex;align-items:center;gap:9px;white-space:nowrap;font-size:14px}
.rhythm-controls input[type=number]{width:78px;text-align:center}


.rhythm-settings{position:relative;padding:18px 0;display:flex;flex-direction:column;gap:16px;border-block:var(--special-section-divider);margin-bottom:12px}
.rhythm-settings input[type=range]{width:110px;padding:0;accent-color:var(--navy);height:24px;border:0}
.rhythm-settings input[type=checkbox]{width:17px;height:17px;margin:0;accent-color:var(--navy)}
#rhythm-settings-button[aria-expanded=true]{background:var(--navy);color:#fff;border-color:var(--navy)}
.rhythm-error{position:relative;margin:8px 0;color:#9b2e20;font-size:14px}
.beat-toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.5fr);align-items:center;gap:14px;min-width:0;width:100%;padding:8px 14px;min-height:57px;flex:0 0 auto;background:#fff;border-bottom:0}
.beat-row{display:grid;grid-template-columns:repeat(var(--beat-count,4),minmax(0,60px));justify-content:center;align-items:center;gap:4px;flex:1 1 auto;min-width:0;width:100%;margin:0 auto}
.beat-marker{display:block;width:100%;min-width:0;aspect-ratio:5 / 1;background:white;box-shadow:inset 0 0 0 1px var(--navy);border-radius:2px}
.beat-marker.active{background:var(--navy)}
.beat-marker.group-start:not(:first-child){margin-left:3px;width:calc(100% - 3px)}
.beat-actions{display:flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;white-space:nowrap}
#rhythm-start{min-width:74px;background:#217821;border-color:#217821;color:white}
#rhythm-start[data-state=loading],#rhythm-start[data-state=playing]{background:#d40000;border-color:#d40000;color:white}
.rhythm-loading{font-size:14px;color:#000}
.loading-dots{display:inline-block;width:1em;animation:loading-dots 1.2s linear infinite}
@keyframes loading-dots{0%,32%{clip-path:inset(0 66.666% 0 0)}33%,65%{clip-path:inset(0 33.333% 0 0)}66%,100%{clip-path:inset(0 0 0 0)}}
@media(min-width:800px){.beat-toolbar{display:grid;grid-template-columns:minmax(190px,1fr) minmax(0,calc(var(--beat-count,4) * 64px - 4px)) minmax(190px,1fr)}.beat-row{grid-column:2;width:100%}.beat-actions{grid-column:3;justify-self:stretch}}
@media(max-width:640px){.rhythm-controls{gap:10px}.rhythm-settings-line{gap:12px}.rhythm-settings select{max-width:190px}.beat-row{gap:3px}.beat-marker.group-start:not(:first-child){margin-left:3px}}

body.compact-practice-layout .right-stack:has(>.beat-toolbar:not([hidden])){grid-template-rows:auto auto minmax(0,1fr) auto}
body.compact-practice-layout .right-stack>.beat-toolbar{grid-column:1 / -1;grid-row:1}
body.compact-practice-layout .right-stack:has(>.beat-toolbar:not([hidden])) .practice-top{grid-row:2}
body.compact-practice-layout .right-stack:has(>.beat-toolbar:not([hidden])) .practice-bottom>.board-scroll{grid-row:2 / 5}
body.compact-practice-layout .right-stack:has(>.beat-toolbar:not([hidden])) .practice-bottom>.practice-footer{grid-row:4}


/* Keep Setup checkboxes together: wrap the whole group below the controls
   before wrapping checkbox labels within their own row on narrower screens. */
.setup-primary-controls,.setup-checkboxes{display:flex;align-items:center;flex-wrap:wrap;gap:inherit;flex:0 0 auto;width:max-content;max-width:100%;min-width:0}
.setup-checkboxes label{white-space:nowrap}
.setup-checkboxes.balanced-checkboxes,.song-navigation-settings.balanced-checkboxes{display:grid;grid-template-columns:minmax(0,1fr);width:100%;align-items:center}
.balanced-checkboxes>label{position:relative;justify-self:center;width:max-content}

/* Progression height follows interval typography and clearance, not board height. */
.progression-row{padding-top:calc(var(--practice-half-clearance,7px) * 2);padding-bottom:var(--practice-half-clearance,7px)}
.progression-row .chord-chip{height:auto;min-height:0;min-width:48px;font-size:var(--interval-font-size);line-height:round(nearest, 1.2em, 1px);padding:var(--practice-chip-padding-block,8px) var(--practice-chip-padding-inline,16px);gap:3px;justify-content:center;border-width:2px}
.progression-row .chord-chip small{font-size:inherit;color:inherit;line-height:inherit}
.chord-chip.active{background:white;color:black;border:2px solid black;border-radius:0;box-shadow:none}
.chord-chip.active small{color:inherit}
/* Thicken upcoming borders inward; preserve sizing and balanced-row measurements. */
.chord-chip:not(.active){position:relative;border-color:transparent;border-radius:0;background:var(--root-light,color-mix(in srgb,var(--root-color,var(--navy)) 50%,white))}
.chord-chip:not(.active)::after{content:"";position:absolute;inset:-2px;border:4px solid var(--root-color,var(--navy));border-radius:0;pointer-events:none}
html[data-theme=light] .chord-chip:not(.active)::after{border-width:2px;box-shadow:0 0 0 2px var(--root-halo,transparent)}
/* Three persistent sound/timing rows, separated like the Setup storage section. */
.rhythm-settings>.rhythm-settings-line+.rhythm-settings-line{border-top:var(--general-section-thick-divider);padding-top:16px}

/* Chord labels and interval labels share a font size at every viewport. */
.practice-surface{--interval-font-size:24px}
.targets li{font-size:var(--interval-font-size)}
/* Four extra CSS pixels between tiles before compact-layout scaling. */
#exercise-bar .targets{gap:14px}
@media(max-width:1100px){#exercise-bar .targets{gap:12px}}
@media(max-width:640px){#exercise-bar .targets{gap:10px}}
@media(max-width:640px){.practice-surface{--interval-font-size:22px}}

body.compact-practice-layout .progression-row .chord-chip{font-size:round(nearest, calc(var(--interval-font-size) * .75), 1px)}


/* Keep the requested play-along selectors at the same size as Frets. */
#meter,#bpm,#rhythm-notes,#rhythm-advance,#rhythm-bars,.rhythm-controls .mobile-number{font-size:1rem}
#rhythm-notes{width:max-content;min-width:round(nearest, 15ch + 32px, 1px);max-width:none}
#rhythm-bars-control:not([hidden])+.rhythm-count-in-control{margin-left:16px}
.range-control>.label,#chord-controls>label{color:var(--ink)}
@media(max-width:640px){#rhythm-bars-control:not([hidden])+.rhythm-count-in-control{margin-left:12px}}
.rhythm-settings:has(.count-in-own-row){padding-bottom:var(--count-in-bottom-space,28px)}
.rhythm-settings-line.count-in-own-row{row-gap:var(--count-in-top-space,28px)}
.count-in-own-row #rhythm-bars-control:not([hidden])+.rhythm-count-in-control{margin-left:0;flex-basis:100%}
.rhythm-settings-icon{display:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
.short-rhythm-label .meter-label,.compact-rhythm-controls #rhythm-settings-button>span{display:none}
.compact-rhythm-controls #rhythm-settings-button{display:grid;place-items:center;flex:0 0 44px;width:44px;height:40px;padding:8px}
.compact-rhythm-controls .rhythm-settings-icon{display:block}
.rhythm-controls.short-rhythm-label{justify-content:space-evenly;column-gap:0}
.rhythm-controls.short-rhythm-label>.rhythm-toggle{margin-left:0}
.rhythm-controls>.rhythm-toggle{flex:0 0 44px}

/* Match the 10px + 10px gap between mode and Keys selectors. When Settings is
   closed, the control panel's 10px bottom margin completes the lower 20px gap. */
.rhythm-controls:has(+.rhythm-settings:not([hidden])){padding-bottom:20px}

/* Tighter instructions and balanced chord-builder controls. */
.progression-summary>.progression-hint{margin-top:0}
.progression-context-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.progression-alteration{display:flex;flex:1 0 auto;align-items:center;justify-content:center;gap:10px;min-width:max-content}
.progression-alteration>span{font-size:14px;color:var(--muted);text-align:left}
.progression-alteration .builder-buttons{justify-content:flex-end;flex-wrap:nowrap}
/* Choose the compact row by measured fit, not a fixed phone breakpoint. */
.progression-context-row.compact-alteration{column-gap:8px}
.progression-context-row.compact-alteration>.segmented button{padding-inline:12px}
.compact-alteration .progression-alteration>span{display:none}
.compact-alteration .progression-alteration,.wrapped-alteration .progression-alteration{flex:0 0 auto;justify-content:flex-start}

/* Balanced preview/action columns and matching scroll-area edge gaps. */
.progression-builder{padding-bottom:var(--progression-edge-gap)}
.progression-builder>fieldset:last-child{margin-bottom:0}
#progression-add,#progression-remove,#progression-apply{padding-inline:clamp(6px,2cqw,14px)}
@media(max-height:600px){
 #progression-dialog{padding:14px}
 .progression-content{--progression-edge-gap:12px}
 .progression-manager{gap:8px}
 .progression-summary{padding:8px 0 0}
 .progression-content .progression-draft{padding:8px;min-height:56px}
 .builder-actions{padding-block:6px}
}

/* Play-along navigation shares the centered transport row. */
.beat-actions{flex-wrap:wrap;align-content:center;row-gap:4px}
.beat-buttons{display:flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto}

.view-control{display:flex;align-items:center;gap:10px;font-size:14px;max-width:100%}
.view-control>span{white-space:nowrap}
.interval-order-control{flex-wrap:wrap}
.beat-actions{align-self:center}


/* Fixed alignment zones; appearing content never participates in column sizing. */
.exercise-frame{container-type:inline-size}
#exercise-bar{--interval-row-padding:14px;padding-block:var(--interval-row-padding);--side-width:30%;--identity-width:calc(100% - 12px);display:grid;grid-template-columns:var(--side-width) minmax(0,1fr) var(--side-width);gap:0;position:relative;min-height:calc(var(--exercise-content-height,54px) + var(--interval-row-padding) * 2 + 1px)}
#exercise-bar .exercise-identity{grid-column:1;grid-row:1;display:flex;align-items:center;justify-content:flex-start;width:var(--identity-width);max-width:100%;height:auto;padding:0;gap:0}
#exercise-bar .exercise-heading{width:100%;min-width:0;min-height:0;padding:0;display:flex;align-items:center;justify-content:flex-start}
#exercise-bar h2{width:100%}
#exercise-bar .practice-info-button{display:flex;flex-direction:column;align-items:center;justify-content:center;width:max-content;height:auto;min-height:0;padding:8px 16px;border:2px solid var(--root-color,var(--navy));border-radius:8px;background:var(--root-light,var(--navy-light));box-shadow:0 0 0 3px var(--root-halo,transparent);color:#000;font-size:round(nearest, calc((var(--interval-font-size) + 16px) / 2), 1px);line-height:round(nearest, 1.2em, 1px);gap:0;max-width:100%}
#exercise-bar .practice-info-button .practice-formula::before{content:none}
#exercise-bar .target-row{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:center;gap:0;height:var(--target-height);min-height:0;width:100%;align-self:center}
#exercise-bar .target-list-slot{width:100%;min-width:0;height:var(--target-height);display:flex;align-items:center;justify-content:center}
#exercise-bar .targets{flex:none;max-width:100%}
#exercise-bar .mic-feedback{position:absolute;left:var(--feedback-center);top:50%;transform:translate(-50%,-50%);margin:0;width:var(--feedback-width,64px);height:var(--feedback-height,48px);align-self:center}
#exercise-bar .mic-feedback-marker{width:var(--feedback-width,48px);height:var(--feedback-height,48px);padding:0;border:2px solid var(--root-color,#3A3B3C);border-radius:8px;background:var(--root-light,#9d9d9e);box-shadow:0 0 0 3px var(--root-halo,#9d9d9e);font-size:var(--interval-font-size);font-weight:400;color:#000;line-height:normal}
#exercise-bar .exercise-right{grid-column:3;grid-row:1;min-width:0;height:var(--transport-content-height,40px);display:flex;align-items:center;justify-content:flex-end}
#exercise-bar .beat-actions{position:relative;display:flex;align-items:center;justify-content:flex-end;flex:0 0 auto;width:var(--controls-width);grid-column:auto;align-self:center;min-width:0}
#exercise-bar .beat-buttons{width:100%;display:flex;align-items:center;justify-content:flex-end;gap:8px}
#exercise-bar .next-button{width:90px;min-width:90px;justify-content:center;gap:10px}
#exercise-bar #rhythm-start{width:78px;min-width:78px;padding-inline:8px}
#exercise-bar .rhythm-loading{position:absolute;right:0;bottom:calc(100% + 4px);white-space:nowrap}
#exercise-bar .route-slot{position:absolute;left:var(--direction-center);top:50%;transform:translate(-50%,-50%);width:80px;height:26px;min-height:26px;max-height:26px;margin:0;display:flex;align-items:center;justify-content:center}
#exercise-bar .route-info{height:24px;line-height:16px}
/* Each extra border pixel replaces a padding pixel, preserving the same bounds. */
#exercise-bar .route-info[data-direction=up]{border-width:2px;padding:2px 7px}
/* Embolden the existing glyphs without changing their advance widths. */
#exercise-bar .route-info>span{-webkit-text-stroke:1px currentColor;paint-order:stroke fill}
#exercise-bar .route-info svg{stroke-width:2.4}
@media(max-width:640px){#exercise-bar .route-info[data-direction=up]{padding-inline:3px}}
#exercise-bar.stacked-direction.has-routes{min-height:calc(var(--exercise-content-height,54px) + var(--interval-row-padding) * 2 + 1px)}
#exercise-bar.stacked-direction .route-slot{left:auto;right:var(--row-padding,28px);top:calc(50% + var(--transport-height,40px) / 2 + 8px);width:var(--controls-width);transform:none}
.beat-toolbar{display:flex;justify-content:center;min-height:36px}
.beat-toolbar .beat-row{flex:none;max-width:calc(var(--beat-count,4) * 64px - 4px)}
#practice-footer .beat-actions{margin-left:auto}
@container (max-width:756px){#exercise-bar{padding-inline:12px}}
 #exercise-bar.compact-controls{min-height:calc(var(--exercise-content-height,54px) + var(--interval-row-padding) * 2 + 1px)}
 #exercise-bar.compact-controls.stacked-direction.has-routes{min-height:calc(var(--exercise-content-height,54px) + var(--interval-row-padding) * 2 + 1px)}
 #exercise-bar.compact-controls .exercise-heading{height:auto;min-height:0}
 #exercise-bar.compact-controls .exercise-right{height:var(--transport-content-height,40px);min-height:0}
 #exercise-bar.compact-controls h2{font-size:18px}
 #exercise-bar.compact-controls .practice-info-button{padding:5px 12px;height:auto;min-height:0;font-size:round(nearest, calc((var(--interval-font-size) + 14px) / 2), 1px)}
 #exercise-bar.compact-controls .next-label{display:none}
 #exercise-bar.compact-controls .next-button{width:40px;min-width:40px;padding-inline:8px}
 #exercise-bar.compact-controls #rhythm-start{width:60px;min-width:60px;font-size:14px}
 #exercise-bar.compact-controls .beat-buttons{gap:6px}
 #exercise-bar.compact-controls .rhythm-loading{font-size:12px}

/* Transport sizing stays unchanged; practice text uses the midpoint to interval text. */
#exercise-bar .next-button,#exercise-bar #rhythm-start{font-size:16px}
#exercise-bar.compact-controls .next-button,#exercise-bar.compact-controls #rhythm-start{font-size:14px}
#exercise-bar .practice-title-line{max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* Narrow rows preserve three interval columns by stacking auxiliary content. */
#exercise-bar.stacked-feedback{min-height:calc(var(--exercise-content-height,54px) + var(--interval-row-padding) * 2 + 1px)}
#exercise-bar.stacked-feedback .exercise-identity{position:absolute;grid-area:auto;left:var(--row-padding);top:var(--practice-stack-top,16px);transform:none}
#exercise-bar.stacked-feedback .exercise-heading{height:auto;min-height:0}
#exercise-bar.stacked-feedback .mic-feedback{top:var(--feedback-stack-top,100px);transform:translateX(-50%)}
#exercise-bar.stacked-controls .beat-buttons{flex-direction:column;align-items:flex-end;gap:6px}
#exercise-bar.stacked-controls #rhythm-start{width:60px;min-width:60px;font-size:14px}
#exercise-bar.stacked-controls .next-button{width:40px;min-width:40px;padding-inline:8px}
#exercise-bar.stacked-controls .next-label{display:none}
#exercise-bar.stacked-controls{min-height:calc(var(--exercise-content-height,54px) + var(--interval-row-padding) * 2 + 1px)}
#exercise-bar.stacked-controls.has-routes{min-height:calc(var(--exercise-content-height,54px) + var(--interval-row-padding) * 2 + 1px)}
#exercise-bar.stacked-controls.stacked-feedback{min-height:calc(var(--exercise-content-height,54px) + var(--interval-row-padding) * 2 + 1px)}

/* A lone transport and its direction indicator form one centered stack. */
#exercise-bar.centered-transport .exercise-right{position:absolute;grid-area:auto;left:var(--right-space-center);top:50%;transform:translate(-50%,-50%);width:80px;height:var(--transport-content-height,40px);min-height:0;display:flex;justify-content:center}
#exercise-bar.centered-transport .beat-actions,#exercise-bar.centered-transport .beat-buttons{justify-content:center}
#exercise-bar.centered-transport .route-slot{left:var(--right-space-center);right:auto;top:calc(50% + 28px);transform:translateX(-50%);width:80px}
/* Restore the label according to actual reserved room, including narrow rows. */
#exercise-bar.full-next .next-button{width:var(--controls-width);min-width:var(--controls-width);padding-inline:8px;gap:10px}
#exercise-bar.full-next .next-label{display:inline}

/* The direction badge occupies the center when there is no transport above it. */
#exercise-bar.direction-only .route-slot{left:var(--right-space-center);right:auto;top:50%;transform:translate(-50%,-50%);width:80px}

@media(max-width:640px){#exercise-bar{--interval-row-padding:12px}}

/* Song is an independent score surface; existing practice layouts stay intact. */
body.song-mode .practice-surface,body.song-mode #chord-controls,body.song-mode #rhythm-controls,body.song-mode #rhythm-settings,body.song-mode #rhythm-error,body.song-mode #settings-panel{display:none!important}
/* Retain the selector dimensions for the spectrum reference in Song mode. */
body.song-mode #selection-controls{position:absolute;inset:0 0 auto;visibility:hidden;pointer-events:none;overflow:clip}
.primary-controls>#song-open{margin-right:auto}
.listen-controls>#song-open{margin:0}
.song-surface{background:white;border:1px solid var(--line);border-radius:14px;overflow:hidden;min-width:0}
.song-practice-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;padding:16px 20px;border-bottom:1px solid var(--line);min-height:84px}
.song-reference-chip{border:2px solid var(--song-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--song-color) 25%,white);border-radius:7px;background:var(--song-light);padding:8px 12px;font-size:18px;color:black;white-space:nowrap;justify-self:start}
.song-summary{display:flex;align-items:center;justify-content:space-evenly;flex-wrap:wrap;gap:10px 18px;min-width:0;text-align:center;color:var(--navy);font-size:20px}
#song-title{color:var(--navy);font-size:inherit;overflow-wrap:anywhere;min-width:0}
#song-meter,.song-tempo{white-space:nowrap}
.song-tempo{display:flex;align-items:center;gap:8px;font-size:inherit}
.song-tempo input{font-size:inherit;width:78px;text-align:center}
.song-tempo .mobile-number{font-size:inherit;text-align:center}
.song-position-controls{display:flex;align-items:center;gap:16px}
.song-transport{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.song-transport button{font-size:16px}
#song-play{background:#217821;border-color:#217821}#song-play.playing{background:#d40000;border-color:#d40000}
.song-board{padding:14px 18px 4px;overflow:auto;background:white;min-height:150px;display:flex;align-items:center;justify-content:center}
.song-board>svg{display:block;width:100%;max-height:310px;min-height:140px}
.song-tab-container{position:relative;isolation:isolate;background:#fff}
.song-tab-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--navy) #eee;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
#song-tab-content{width:max-content}#song-tab-content>svg{display:block;max-width:none;font-family:Crossroads,Arial,sans-serif}
#song-tab-content [data-song-event]{cursor:pointer}
.song-playhead{position:absolute;left:50%;top:calc(var(--song-tab-top-padding,0px) + 46.25px);height:171.5px;width:31.5px;transform:translateX(-50%);background:rgba(128,128,128,.25);z-index:1;mix-blend-mode:multiply;pointer-events:none}
.song-loop-row,.song-display-settings{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:18px 20px;border-top:1px solid var(--line)}
.song-loop-row label,.song-display-settings label{display:flex;align-items:center;gap:8px;font-size:14px}.song-loop-row select{min-width:64px;max-width:120px}
.song-setup{display:block;padding:20px 0;border-block:var(--special-section-divider);margin-bottom:30px}.song-asset-link{border:1px solid var(--line);padding:9px 12px;border-radius:7px;text-decoration:none;color:var(--navy);font-size:14px}
.song-notice,.song-error{margin:0;padding:12px 20px;line-height:round(nearest, 1.5em, 1px);font-size:14px}.song-notice{color:var(--muted)}.song-error{color:#a00000}
.import-dialog{max-width:600px}
.import-dialog label{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;margin:16px 0}
.import-dialog .song-file-label{flex-direction:column;align-items:stretch}
.import-dialog input[type=file]{max-width:100%;width:100%;background:var(--page);font-size:1rem}
.import-dialog input[type=file]::file-selector-button{font:inherit;min-height:40px;padding:8px 14px;border:1px solid var(--line);border-radius:7px;background:#f8f8fa;color:inherit;margin-inline-end:12px;cursor:pointer}
@media (any-hover:hover) and (any-pointer:fine){:where(html:not(.touch-input)) .import-dialog input[type=file]:where(:enabled)::file-selector-button:hover{background:#e3e8ef}}
.import-dialog .import-confirmation,#song-import-notice{font:inherit}
.import-dialog select{max-width:100%}
.import-dialog .import-actions{border-top:var(--special-section-divider);padding-top:16px}
.import-dialog .setup-dialog-error{font-size:14px;line-height:round(nearest, 1.5em, 1px)}
@media(max-width:640px){.song-practice-row{padding:14px 12px;gap:12px}.song-reference-chip{font-size:16px}.song-transport{grid-column:1/-1;width:100%;justify-content:flex-end}.song-transport button{font-size:14px}.song-board{padding-inline:8px}.song-board>svg{max-height:210px}.song-loop-row{padding:14px 12px;gap:12px}.song-setup{gap:12px}.song-loop-row label{gap:5px}}
@media(orientation:landscape) and (max-height:500px){body.song-mode .song-board>svg{max-height:160px;min-height:90px}body.song-mode .song-board{min-height:100px}}

.song-beats{padding:12px 18px;background:#fff;min-height:36px;display:flex;align-items:center}
.song-tab-track{position:relative;width:max-content}
#song-tab-revealed{position:absolute;inset:0;z-index:2;pointer-events:none}
#song-tab-revealed>svg{display:block;max-width:none}

.song-audio-settings{margin:0;padding:18px 20px}

.song-audio-settings .rhythm-settings-line{flex-wrap:wrap}

@media(max-width:1000px){.song-practice-row{grid-template-columns:auto minmax(0,1fr)}.song-transport{grid-column:1/-1;justify-self:end}}

.song-display-settings{padding:0 0 20px;border:0}
.song-setup .song-audio-settings{padding:18px 0;border-top:var(--general-section-thick-divider);border-bottom:0}

.song-summary-divider{flex:0 0 auto;color:var(--muted)}
.song-transport label{display:flex;align-items:center;gap:8px;font-size:14px}
.song-transport select{min-width:64px;max-width:110px}
.song-reveal-controls,.song-bottom-playback,.song-loop-controls{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.song-reveal-controls{gap:16px;flex-wrap:nowrap}
.song-bottom-playback{margin-left:auto;justify-content:flex-end}
.song-control-divider{height:30px;border-left:2px solid var(--line);flex:0 0 auto}
@media(max-width:640px){.song-bottom-playback,.song-loop-controls{gap:10px}.song-transport{gap:8px}.song-transport label{gap:5px}.song-summary{gap:10px}}

#song-start{margin-right:8px}
.song-tab-scroll{cursor:grab;user-select:none;-webkit-user-select:none}
.song-tab-scroll.dragging,.song-tab-scroll.dragging [data-song-event]{cursor:grabbing}

#song-reveal{display:inline-grid;place-items:center;white-space:nowrap}
#song-reveal>span{grid-area:1/1}
.song-reveal-width{visibility:hidden;pointer-events:none}

/* Immediate on/off settings; choice lists retain native checkboxes. */
input[type=checkbox].setting-switch{
 appearance:none;-webkit-appearance:none;position:relative;display:inline-block;
 width:36px;height:22px;min-width:36px;min-height:22px;flex:0 0 36px;
 padding:0;margin:0;border:1px solid #a7adb4;border-radius:999px;
 background:#e2e5e8;vertical-align:middle;cursor:pointer;
 transition:background .15s,border-color .15s;
}
.mic-button:not([aria-pressed=true]){border-color:#a7adb4}
.song-chord-frame-dark{display:none}
.song-chord-quality-position{transform:translateY(var(--song-chord-quality-shift))}
input[type=checkbox].setting-switch::before{
 content:"";position:absolute;width:16px;height:16px;left:2px;top:2px;
 border-radius:50%;background:#fff;box-shadow:0 1px 2px #0003;
 transition:transform .15s;
}
input[type=checkbox].setting-switch:checked{background:var(--navy);border-color:var(--navy)}
input[type=checkbox].setting-switch:checked::before{transform:translateX(14px)}
input[type=checkbox].setting-switch:disabled{opacity:.45;cursor:default}
.song-reveal-controls>label{min-height:40px;cursor:pointer;white-space:nowrap}
@media(prefers-reduced-motion:reduce){input[type=checkbox].setting-switch,input[type=checkbox].setting-switch::before{transition:none}}
@media(forced-colors:active){
 input[type=checkbox].setting-switch{forced-color-adjust:none;background:Canvas;border-color:ButtonText}
 input[type=checkbox].setting-switch::before{background:ButtonText}
 input[type=checkbox].setting-switch:checked{background:Highlight;border-color:Highlight}
 input[type=checkbox].setting-switch:checked::before{background:HighlightText}
}
@media(max-width:640px){.triad-random-head{grid-template-columns:minmax(0,1fr) auto auto}.triad-random-head h3{min-width:0;overflow-wrap:anywhere}}

/* Segmented choices keep each setting together when Setup wraps. */
.segmented-setting{display:flex;align-items:center;gap:10px;font-size:14px;flex-wrap:wrap;max-width:100%}
.segmented-setting>.segmented{max-width:100%}
.segmented-setting>.segmented button{white-space:nowrap}
.song-play-control{display:flex;align-items:center;gap:8px;white-space:nowrap}
.song-play-control .rhythm-loading{flex:0 0 auto}

/* Reveal actions choose a complete row by available width, never split the pair. */
.song-navigation-row{display:flex;align-items:center;justify-content:flex-end;gap:16px;min-width:0}
.song-navigation-row.has-reveal{grid-column:1 / -1;justify-content:flex-start;width:100%}
.song-navigation-row.has-reveal .song-transport{margin-left:auto;width:auto}
.song-reveal-controls{flex:0 0 auto}
.song-reveal-controls>label{display:flex;align-items:center;gap:8px;font-size:14px}
.song-loop-row.separate-reveal{flex-direction:column;align-items:stretch}
.song-loop-row.separate-reveal>.song-reveal-controls{align-self:stretch;border-top:1px solid var(--line);padding-top:16px}
.song-loop-row.separate-reveal>.song-bottom-playback{align-self:flex-end}
@media(max-width:1000px){.song-navigation-row{grid-column:1 / -1;width:100%}}
/* Song info and Measure controls occupy separate rows, divided by a thin line. */
.song-practice-row{grid-template-columns:auto minmax(0,1fr)}
.song-practice-row>.song-navigation-row{grid-column:1 / -1;width:calc(100% + 40px);margin-inline:-20px;padding:16px 20px 0;border-top:1px solid var(--line)}
html[data-theme=light] :is(.song-practice-row,.song-navigation-row,.song-loop-row,.song-reveal-controls,.song-bottom-playback){background:var(--page)}
@media(max-width:640px){.song-practice-row>.song-navigation-row{width:calc(100% + 24px);margin-inline:-12px;padding:14px 12px 0}}
.beat-toolbar{min-height:0;padding-block:var(--practice-half-clearance,7px)}

/* Foundations-only source scale for Individual Intervals. */
.dyad-scale-context{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 12px;font-size:15px;color:var(--navy)}

/* Switch the whole selector row according to the controls' actual widths. */
.selection-controls{display:grid;grid-template-columns:max-content max-content max-content minmax(44px,1fr)}
.selection-controls>.picker-wrap,.selection-controls>.range-control{width:max-content;min-width:0}
.selection-controls>.practice-picker-wrap{grid-column:1;grid-row:1}
.selection-controls>.keys-picker-wrap{grid-column:2;grid-row:1}
.selection-controls>.range-control{grid-column:3;grid-row:1}
.selection-controls>.rhythm-toggle{grid-column:4;grid-row:1;justify-self:end;margin-left:0}
.selection-controls.two-selection-rows{grid-template-columns:max-content max-content minmax(0,1fr)}
.two-selection-rows>.keys-picker-wrap{grid-column:1;grid-row:1}
.two-selection-rows>.range-control{grid-column:2;grid-row:1}
.two-selection-rows>.practice-picker-wrap{grid-column:1 / -1;grid-row:2;max-width:calc(100% - 58px)}
.two-selection-rows .practice-picker-wrap .picker{min-width:0;max-width:100%}
.two-selection-rows>.rhythm-toggle{grid-column:3;grid-row:2}
@media(max-width:380px){
 .selection-controls{column-gap:8px}
 .selection-controls .range-control{gap:6px}
 .selection-controls .range-control input{width:55px;padding-inline:5px}

 .selection-controls .keys-picker-wrap .picker{--selector-side-padding:6px;gap:4px}
}

/* Clicking or selecting controls never adds an extra focus border, including SVG tab targets. */
:focus,:focus-visible,:focus-within{outline:none!important}
*{-webkit-tap-highlight-color:transparent}
button::-moz-focus-inner,input::-moz-focus-inner{border:0}

/* Dividers stay with their next control and disappear across wrapped rows. */
.song-title-meter,.song-tempo-group{display:flex;align-items:center;gap:18px;min-width:0;max-width:100%}
.song-title-meter #song-meter{flex:0 0 auto}
.song-tempo-group{flex:0 0 auto}
.song-speed-control,.song-loop-group{display:flex;align-items:center;gap:16px;min-width:0;max-width:100%}
.song-speed-control{flex:0 0 auto}
.song-divider-wrapped{visibility:hidden}
@media(max-width:640px){.song-title-meter,.song-tempo-group,.song-speed-control,.song-loop-group{gap:10px}}

/* Center transport and its lower direction badge together, with equal outer gaps. */
#exercise-bar.stacked-direction.has-routes:not(.direction-only){--direction-gap:8px;--direction-height:24px;--direction-stack-offset:round(nearest, (var(--direction-gap) + var(--direction-height)) / 2, 1px)}
#exercise-bar.stacked-direction.has-routes:not(.direction-only) .exercise-right{transform:translateY(calc(-1 * var(--direction-stack-offset)))}
#exercise-bar.stacked-direction.has-routes:not(.direction-only) .route-slot{top:calc(50% + var(--transport-content-height,40px) / 2 + var(--direction-gap) / 2);transform:translateY(-50%)}
#exercise-bar.centered-transport.stacked-direction.has-routes:not(.direction-only) .exercise-right{transform:translate(-50%,calc(-50% - var(--direction-stack-offset)))}
#exercise-bar.centered-transport.stacked-direction.has-routes:not(.direction-only) .route-slot{transform:translate(-50%,-50%)}

/* Single-row Song headers space each title, divider, meter and tempo equally. */
.song-summary.single-song-summary{flex-wrap:nowrap}
.song-summary.single-song-summary .song-title-meter,.song-summary.single-song-summary .song-tempo-group{display:contents}
.song-summary.single-song-summary #song-title,.song-summary.single-song-summary #song-meter,.song-summary.single-song-summary .song-summary-divider,.song-summary.single-song-summary .song-tempo{flex:0 0 auto;white-space:nowrap}
.song-navigation-settings{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding-bottom:20px}
.song-board.click-to-advance{cursor:pointer;user-select:none}

/* Mode actions sit beside the selector, or in the header control row. */
#mode-row{flex-wrap:nowrap;justify-content:flex-start}
#mode-selector{flex:0 0 auto;max-width:100%}
@media(max-width:640px){#mode-row{gap:8px}#mode-selector{flex-shrink:1;min-width:0}}
.mode-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin-left:0}
.presets-dialog{max-width:600px}
.presets-dialog>.segmented{margin-top:20px}
.preset-source-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}
#progression-builder-info-button,#setup-info-button,#progression-info-button{display:grid;place-items:center;flex:0 0 34px;line-height:1}
#progression-info-button{margin-left:auto}
#setup-info-dialog .dialog-head{gap:12px}
#setup-info-dialog .dialog-head h2{min-width:0;overflow-wrap:anywhere}
#setup-info-detail{overflow-wrap:anywhere}
#setup-info-dialog h3{font-size:17px;font-weight:400;color:var(--navy);margin:20px 0 10px}
#setup-info-routine{list-style:none;margin:0;max-height:none;overflow:hidden}
#setup-info-routine .setup-info-practice{min-height:40px;padding:8px 20px;line-height:round(nearest, 1.5em, 1px);overflow-wrap:anywhere}
:is(#presets-dialog,#song-presets-dialog) .preset-actions{margin-top:20px}
:is(#setup-load-list,#song-setup-list):has(.preset-empty-name){border:0;background:transparent;max-height:none;overflow:visible}
:is(#setup-load-list,#song-setup-list) .preset-empty-name{margin-top:0}
.presets-dialog .preset-name{display:block;width:100%;max-width:100%;margin-top:20px;font-size:16px;background:var(--page)}
.presets-dialog .preset-detail{margin:10px 0 20px;font-size:14px;line-height:round(nearest, 1.5em, 1px)}
.presets-dialog .preset-actions{margin-bottom:20px;flex-wrap:wrap}
.preset-list{display:flex;flex-direction:column;gap:0;max-height:34vh;overflow:auto;padding:0;background:var(--page);border:1px solid var(--line);border-radius:8px}
.preset-list-item{flex:0 0 auto;text-align:left;border:0;border-radius:0;background:transparent;font-size:15px}
.preset-list-item[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:white}
.preset-empty{margin:8px 0;font-size:14px}
.import-field{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0;font-size:14px}
#chord-import-preview,#song-import-preview{overflow-wrap:anywhere;line-height:round(nearest, 1.5em, 1px);color:#000}
#chord-import-notice{color:#000}
.chord-import-chip{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:40px;padding:8px 14px;border-radius:7px;font:inherit}

.preset-actions .primary:disabled{background:#f8f8fa;border-color:var(--line);color:var(--ink)}
@media(max-width:420px){#header-controls:has(#mode-actions){gap:12px}}
#mode-selector button,#mode-actions button,#header-controls button{font-size:16px}
.header-mic-controls,.header-secondary-actions{display:contents}
@media(max-width:640px){
 /* Match the 20px clearance below Edit Practice Routine: 10px padding + 10px panel margin. */
 #brand-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:20px;margin-bottom:10px}
 #brand-row .brand{grid-column:1;grid-row:1;min-width:0}
 #brand-row h1{font-size:23px}
 #header-controls,.header-mic-controls{display:contents}
 #brand-row .dark-mode-control{grid-column:2;grid-row:1;justify-self:end}
 .header-secondary-actions{grid-column:1 / -1;grid-row:2;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:var(--header-action-gap,10px)}
 #header-controls .mode-actions{gap:var(--header-action-gap,10px)}
}

/* Shared grid rows keep list semantics and the lists' existing alignment. */
.balanced-list,#progression-degrees.balanced-list{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-items:center;align-content:center}
.balanced-list>*{position:relative;justify-self:center}
#progression-degrees.balanced-list button{width:var(--degree-button-width,42px)}
#progression-qualities button{white-space:nowrap}

/* Song Key occupies its own row; meter and tempo share a row when they fit. */
.import-dialog .import-confirmations{border:1px solid var(--line);border-radius:8px;background:var(--page);padding:14px;margin:16px 0;container:import-fields / inline-size}
.import-dialog .import-confirmation{display:grid;grid-template-columns:var(--import-label-width,65px) minmax(0,1fr);align-items:center;gap:10px;margin:0;padding-block:10px;font:inherit;min-width:0}
.import-field-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0 16px}
.import-field-label{text-align:right;min-width:0;white-space:nowrap}
.import-field-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px;min-width:0}
.import-key-field{grid-column:1 / -1}
.import-key-field .import-field-controls{flex-direction:row;align-items:center}
.import-key-field .segmented{max-width:100%}
.import-key-field .segmented button{flex:1 1 auto;min-width:0}
.import-key-field .popover{max-width:min(360px,100cqw);padding:12px;left:calc(-1 * (var(--import-label-width,65px) + 10px))}
.import-key-field .key-option{padding:6px 3px}
.import-key-field .key-option[aria-pressed=true]{background:var(--navy);color:white;border-color:var(--navy)}
.import-missing-info{border-top:1px solid var(--line);padding-top:16px;color:#000;font:inherit;line-height:round(nearest, 1.5em, 1px)}
.import-tuning{border-bottom:1px solid var(--line);margin-bottom:6px!important}
.import-field-grid.two-import-columns{grid-template-columns:repeat(2,minmax(0,1fr))}
.import-field-grid:has(>.import-key-field:not([hidden]))>.import-key-field~.import-confirmation:not([hidden]){border-top:1px solid var(--line)}
.import-field-grid:not(.two-import-columns)>.import-confirmation:not([hidden])~.import-confirmation:not([hidden]){border-top:1px solid var(--line)}
@container import-fields (max-width:330px){
 .import-dialog .import-confirmation{grid-template-columns:minmax(0,1fr)}
 .import-field-label{text-align:left}
 .import-key-field .popover{left:0}
}

/* Drop D joins the Song header; separators stay with the following value. */
.song-title-meter{flex-wrap:wrap;justify-content:space-evenly}
.song-tuning-group,.song-meter-group{display:flex;align-items:center;gap:18px;flex:0 0 auto}
.song-summary.single-song-summary .song-tuning-group,.song-summary.single-song-summary .song-meter-group{display:contents}
.song-summary.single-song-summary #song-tuning{flex:0 0 auto;white-space:nowrap}
@media(max-width:640px){.song-tuning-group,.song-meter-group{gap:10px}}

/* Explicit hover feedback for controls whose state colors override generic hover. */
@media (any-hover:hover) and (any-pointer:fine){
 :where(html:not(.touch-input)) .builder-buttons button:hover:where(:enabled):not([aria-pressed=true]){background:#e3e8ef}
 :where(html[data-theme=light]:not(.touch-input)) #keys-panel .key-option:not(:has(input:checked)):hover{background:#e3e8ef}
 :where(html:not(.touch-input)) .picker[aria-expanded=true]:hover:where(:enabled),
 :where(html:not(.touch-input)) .quiet-button[aria-expanded=true]:hover:where(:enabled){background:var(--navy-light)}
 :where(html:not(.touch-input)) .draft-chord[aria-pressed=true]:hover:where(:enabled),
 :where(html:not(.touch-input)) .import-key-field .key-option[aria-pressed=true]:hover:where(:enabled),
 :where(html:not(.touch-input)) #settings-button[aria-expanded=true]:hover:where(:enabled),
 :where(html:not(.touch-input)) #rhythm-settings-button[aria-expanded=true]:hover:where(:enabled){background:var(--navy-hover);border-color:var(--navy-hover)}
 :where(html:not(.touch-input)) .chord-chip.active:hover:where(:enabled){background:white;border-color:black}
 :where(html:not(.touch-input)) #exercise-bar .practice-info-button:hover:where(:enabled){background:color-mix(in srgb,var(--root-light,var(--navy-light)) 88%,black)}
 :where(html:not(.touch-input)) .rhythm-toggle:hover:where(:enabled){background:#e2eee2}
 :where(html:not(.touch-input)) #song-play:hover:where(:enabled),
 :where(html:not(.touch-input)) #rhythm-start[data-state=idle]:hover:where(:enabled),
 :where(html:not(.touch-input)) .rhythm-toggle[aria-pressed=true]:hover:where(:enabled){background:#2d932d;border-color:#2d932d}
 :where(html:not(.touch-input)) #rhythm-start[data-state=loading]:hover:where(:enabled),
 :where(html:not(.touch-input)) #rhythm-start[data-state=playing]:hover:where(:enabled),
 :where(html:not(.touch-input)) #song-play.playing:hover:where(:enabled){background:#ee2525;border-color:#ee2525}
 :where(html:not(.touch-input)) .mic-button[aria-pressed=true]:hover:where(:enabled){background:#e54545;border-color:#e54545}
}

/* Centered, compact lists replace mobile platform pickers. */
.number-picker-dialog{--picker-close-size:34px;position:fixed;inset:0;margin:auto;width:max-content;height:max-content;max-width:calc(100vw - 32px);max-width:calc(100dvw - 32px);max-height:50vh;max-height:50dvh;min-width:20vw;min-width:20dvw;padding:12px;overflow:hidden}
.number-picker-dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px}
.number-picker-head{display:flex;align-items:center;gap:var(--picker-close-size);min-width:0}
#number-picker-close{width:var(--picker-close-size);height:var(--picker-close-size);min-height:var(--picker-close-size);flex-basis:var(--picker-close-size)}
.number-picker-head h2{font-size:16px;line-height:round(nearest, 1.25em, 1px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.number-picker-list{overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:0;background:var(--page);border:1px solid var(--line);border-radius:8px;overscroll-behavior:contain;scrollbar-gutter:auto}
.number-picker-option{flex:0 0 auto;width:100%;min-height:44px;padding-inline:var(--picker-close-size);border:0;border-radius:0;background:transparent;font-size:16px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.number-picker-option[aria-selected=true]{background:var(--navy);border-color:var(--navy);color:white}

.number-picker-option:focus-visible:not([aria-selected=true]){background:var(--navy-light)}
.song-loop-row .mobile-number{font:inherit;max-width:120px}
.song-transport .mobile-number{font:inherit;max-width:110px}

/* List-window triggers work identically on desktop and mobile. */
.mobile-number.mobile-select{width:max-content;max-width:100%;text-align:left;font-variant-numeric:normal}
.mobile-select>span:first-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rhythm-settings .mobile-select{max-width:190px}
.setup-load-control:has(.mobile-number){padding:0;border:0;background:transparent}
.setup-load-control:has(.mobile-number)>span{display:none}

/* Traditional option lists use contiguous rows with separators. */
.preset-list-item+.preset-list-item,.number-picker-option+.number-picker-option{border-top:1px solid var(--line)}

/* Practice and Keys use centered windows while retaining their choice layouts. */
.selector-dialog{padding:18px;overflow:hidden}
.selector-dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr);gap:16px}
.practice-selector-dialog{max-width:570px}
.keys-selector-dialog{max-width:360px}
.selector-dialog .dialog-head{gap:10px;min-width:0}
.selector-dialog .dialog-head h2{margin-right:auto;min-width:0;font-size:20px;color:var(--navy)}
.selector-dialog .dialog-head>.quiet-button{min-height:34px;padding:5px 10px;font-size:14px}
.selector-options{min-height:0;overflow:auto;overscroll-behavior:contain}
.selector-options .practice-group:first-child{border-top:0;padding-top:0}

#keys-summary,#practice-summary{flex:1;text-align:center}
#practice-button{padding-inline:round(nearest, var(--selector-side-padding) * var(--selector-padding-factor,1) * 1.5, 1px)}

.mobile-number,.picker{--selector-padding-factor:1.5}
.selector-short{--selector-padding-factor:1.5}
.selector-long{--selector-padding-factor:1.5}
.mobile-number{padding-inline:20px}
.song-summary,#song-reveal{font-size:1rem}

.song-score-layout>*,.song-board-panel{min-width:0}
/* With no fretboard, retain the beat row above the full-width tab. */
.hide-fretboard .song-board-panel{container-type:inline-size}
.hide-fretboard .song-beats{min-height:0;padding-block:0}
.hide-fretboard .song-beats .beat-row{
 --song-hidden-beat-gap:4px;
 --song-hidden-beat-width:max(1px,round(down,min(60px,calc((100cqw - 36px - (var(--beat-count,4) - 1) * var(--song-hidden-beat-gap)) / var(--beat-count,4))),1px));
 --song-hidden-beat-height:max(1px,round(nearest,calc(var(--song-hidden-beat-width) / 5),1px));
 flex:none;grid-template-columns:repeat(var(--beat-count,4),var(--song-hidden-beat-width));gap:var(--song-hidden-beat-gap);padding-block:var(--song-hidden-beat-height)
}
.hide-fretboard .song-beats .beat-marker{height:var(--song-hidden-beat-height);aspect-ratio:auto}
@media(max-width:640px){.hide-fretboard .song-beats .beat-row{--song-hidden-beat-gap:3px}}

@media(min-aspect-ratio:2/1){
 .split-landscape .song-score-layout{display:grid;grid-template-columns:round(down,calc(100% / 2),1px) minmax(0,1fr);align-items:stretch}
 .split-landscape .song-board-panel{display:flex;flex-direction:column;justify-content:flex-start;container-type:inline-size;background:var(--dark-practice-background,#fff);border-right:1px solid var(--line)}
 body.song-mode .split-landscape .song-board{flex:1 1 0;min-height:0;padding-block:0;overflow:hidden}
 body.song-mode .split-landscape .song-board>svg{width:100%;height:100%;min-height:0;max-height:none}
 .split-landscape .song-beats{flex:none;min-height:0;padding-block:0}
 .split-landscape .song-beats .beat-row{
  --song-split-beat-gap:4px;
  --song-split-beat-width:max(1px,round(down,min(60px,calc((100cqw - 36px - (var(--beat-count,4) - 1) * var(--song-split-beat-gap)) / var(--beat-count,4))),1px));
  --song-split-beat-height:max(1px,round(nearest,calc(var(--song-split-beat-width) / 5),1px));
  flex:none;grid-template-columns:repeat(var(--beat-count,4),var(--song-split-beat-width));gap:var(--song-split-beat-gap);padding-block:var(--song-split-beat-height)
 }
 .split-landscape .song-beats .beat-marker{height:var(--song-split-beat-height);aspect-ratio:auto}
 @media(max-width:640px){.split-landscape .song-beats .beat-row{--song-split-beat-gap:3px}}
}


/* Internal section lines share the General Section Thick Divider style. */
#practice-panel :is(.practice-group,.practice-random-head,.dyad-section){border-top-color:var(--general-section-thick-divider-color);border-top-width:var(--general-section-thick-divider-width)}
#practice-panel .practice-random-head{border-bottom:var(--general-section-thick-divider)}
#practice-panel #practice-options>.practice-group:first-child:not(:has(.practice-random-head)){border-top:var(--general-section-thick-divider);padding-top:12px}
#practice-panel .rounds-control .mobile-number{padding-inline:20px}
#practice-panel .practice-choice{border:1px solid var(--line);background:#fafafa;justify-content:center;text-align:center;padding:6px 10px;line-height:round(nearest, 1.3em, 1px)}
#practice-panel .practice-choice:disabled{background:var(--navy-light);color:var(--navy);opacity:1}
.dyad-choice{width:100%;margin:0;min-height:36px;font-size:14px}
#practice-panel .dyad-sequence-table .dyad-choice{padding-inline:15px}
#practice-panel{--routine-list-border-width:3px;--routine-row-padding:10px}
.practice-routine{margin:0 0 20px}
.practice-routine h3{margin:0 0 12px;font-size:16px;font-weight:400;color:var(--navy)}
#practice-routine-list{list-style:none;padding:0;margin:0;background:var(--page);border:1px solid var(--line);border-radius:8px;overflow:hidden}
#practice-routine-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:var(--routine-row-padding);font-size:14px;line-height:round(nearest, 1.5em, 1px)}
#practice-routine-list li+li{border-top:1px solid var(--line)}
.routine-actions{position:relative;display:flex;align-items:center;gap:4px}
.routine-moves{display:flex;align-items:center;gap:4px}
.routine-actions button{border:1px solid var(--line);background:white;min-height:34px;padding:5px 8px;font-size:13px}
.routine-actions button:is([data-routine-move],[data-routine-settings],[data-routine-delete]){width:30px;padding:5px}
.routine-actions button:is([data-routine-settings],[data-routine-delete]){display:grid;place-items:center;padding:0}
.routine-actions svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.routine-actions button:is([data-routine-settings],[data-routine-delete]) svg{width:20px;height:20px}
#practice-routine-list .routine-empty{display:block;color:var(--muted)}
@media(any-hover:hover) and (any-pointer:fine){
 :where(html:not(.touch-input)) #practice-panel .practice-choice:hover:where(:enabled),:where(html:not(.touch-input)) .routine-actions button:hover:where(:enabled){background:#e3e8ef}
}

/* The builder stays above a separately scrolling practice catalog. */
#practice-panel[open]{display:flex;flex-direction:column;gap:0;max-height:calc(100dvh - 32px)}
#practice-panel .dialog-head{flex:0 0 auto;flex-wrap:nowrap;gap:10px;margin-bottom:12px}
#practice-panel .dialog-head>*{flex:0 0 auto;white-space:nowrap}
#practice-panel .dialog-head h2{margin-right:auto}
#practice-panel .dialog-head h2{font-size:20px}
#practice-panel .dialog-head #practice-routine-clear{min-height:40px}
.routine-builder-pinned{flex:0 1 auto;min-height:0;border-bottom:var(--special-section-divider);padding-bottom:12px;container:routine-builder / inline-size}
.routine-visibility{display:flex;justify-content:flex-start;align-items:flex-start;gap:12px;border-block:3px solid #909090;padding-block:12px;margin-bottom:0}
.routine-visibility-options,.routine-build-controls{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px}
.routine-visibility-options{flex:1 1 auto;min-width:0}
.routine-build-controls{gap:12px}
.routine-visibility-options label{min-height:34px}
.routine-label-compact{display:none}
@container routine-builder (width > 412px){
 .routine-visibility-options,.routine-build-controls{justify-content:space-evenly;column-gap:0}
}
@container routine-builder (max-width:412px){
 .routine-visibility-options,.routine-build-controls{gap:6px;--routine-label-gap:4px}
 .routine-label-full{display:none}
 .routine-label-compact{display:inline}
}
.routine-visibility-options>label,.routine-build-controls>label{display:flex;align-items:center;gap:var(--routine-label-gap,8px);font-size:14px;color:var(--navy);white-space:nowrap}
/* Keep the control groups on one row when there is room to stack their labels. */
@container routine-builder (max-width:299px){
 .routine-visibility-options>label{flex-direction:column}
 .routine-visibility-options>label>.setting-switch{flex:none}
 .routine-visibility-options>label:first-child{align-items:flex-start}
 .routine-visibility-options>label:last-child{align-items:flex-end}
}
@container routine-builder (max-width:320px){
 .routine-build-controls{column-gap:4px;--routine-label-gap:3px}
}
@container routine-builder (max-width:303px){
 .routine-build-controls{align-items:flex-start}
 .routine-build-controls>label{flex-direction:column}
 .routine-build-controls>label>.setting-switch{flex:none}
 .routine-build-controls>label:first-child{align-items:flex-start}
 .routine-build-controls>label:last-child{align-items:flex-end}
}
#practice-panel .practice-routine{margin:0 0 12px}
#practice-panel .practice-routine h3{font-size:16px;margin-bottom:10px}
#practice-routine-list{background:var(--navy);color:white;max-height:clamp(48px,24dvh,240px);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:auto}
#practice-routine-list li{font-size:16px;line-height:round(nearest, 1.4em, 1px)}
#practice-routine-list li[data-routine-selected=true]{background:var(--page);color:var(--ink);-webkit-text-fill-color:currentColor}
#practice-routine-list .routine-empty{color:white}
#practice-routine-list .routine-actions button{color:var(--ink);-webkit-text-fill-color:var(--ink)}
#practice-routine-list button.routine-label{min-height:0;padding:0;border:0;border-radius:0;background:transparent;color:inherit;text-align:left;line-height:inherit}
.routine-label{min-width:0;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-height:round(nearest, 1.4em, 1px)}
.routine-line{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.routine-build-controls .rounds-control{margin-left:0}
#routine-arpeggio-control[hidden]{display:flex!important;visibility:hidden}
#practice-panel .routine-build-controls .mobile-number{padding-inline:20px}
#practice-panel .selector-options{flex:1 1 auto;min-height:90px;max-height:50dvh}
.practice-accordion{--practice-section-gap:12px;border:0}
.practice-section-toggle{width:100%;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;color:var(--navy);border:0;border-bottom:var(--general-section-thick-divider);border-radius:0;padding:var(--practice-section-gap) 14px var(--practice-section-gap) calc(var(--routine-list-border-width) + var(--routine-row-padding));font-size:16px}
.practice-section-toggle svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.practice-section-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
.practice-section-content{--practice-content-gap:var(--practice-section-gap);padding:var(--practice-content-gap) 14px 0 0}
/* Button edges need the extra space that header text gets from its line box. */
.practice-section-content:has(>:is(.practice-options-grid,.dyad-individual-grid,.dyad-sequence-table):first-child){--practice-content-gap:calc(var(--practice-section-gap) + 4px)}
.practice-section-content .practice-family-title{margin-top:12px}
.practice-section-content>:first-child{margin-top:0}
.practice-section-content>:last-child{margin-bottom:0}
.practice-section-content:has(>.dyad-sequence-table){padding-inline:0}
/* An open section owns its divider; only its choices scroll below it. */
#practice-options>.practice-accordion[hidden]{display:none}
#practice-panel .selector-options:has(.practice-accordion[data-section-open=true]){display:flex;overflow:hidden}
#practice-options:has(>.practice-accordion[data-section-open=true]){display:flex;flex:1 1 auto;min-height:0;flex-direction:column}
#practice-options>.practice-accordion[data-section-open=true]{display:flex;flex:1 1 auto;min-height:0;flex-direction:column}
.practice-accordion[data-section-open=true]>.practice-section-content{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
/* The closing divider follows the final choice, with the same gap as the top. */
.practice-accordion[data-section-open=true]>.practice-section-content::after{content:'';display:block;border-top:var(--general-section-thick-divider);margin-top:var(--practice-content-gap);margin-right:-14px}
.practice-accordion[data-section-open=true]>.practice-section-content:has(>.dyad-sequence-table)::after{margin-right:0}
.practice-notes{margin-bottom:12px}
@media(max-height:420px){
 #practice-panel{padding:12px}
 #practice-panel[open]{gap:0}
 #practice-panel .dialog-head{margin-bottom:8px}
 .routine-visibility{padding-block:6px;margin-bottom:0}
 #practice-panel .practice-routine{margin-bottom:8px}
 #practice-panel .practice-routine h3{margin-bottom:6px}
 #practice-routine-list{max-height:64px}
 .routine-builder-pinned{padding-bottom:8px}
 #practice-panel .selector-options{min-height:58px}
}

.routine-builder-pinned{display:flex;flex-direction:column;overflow:hidden}
.routine-visibility,.routine-build-controls{flex:0 0 auto}
#practice-panel .practice-routine{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
#practice-routine-list{flex:0 1 auto;min-height:36px}
#practice-panel .practice-routine h3{flex:0 0 auto}

/* Compact routine header and the exclusive note-identification mode. */
.routine-visibility{border-top:var(--special-section-divider);border-bottom:0}
#practice-routine-list{border:var(--routine-list-border-width) solid color-mix(in srgb,var(--navy) 50%,transparent);background:var(--navy);background-clip:padding-box}
#practice-panel .dialog-head .fretboard-notes-toggle{flex:0 0 auto;padding:6px 10px;font-size:14px}
#practice-panel .dialog-head .fretboard-notes-toggle[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:white;-webkit-text-fill-color:white}
.routine-build-controls.notes-mode label{color:#999}
#practice-panel .practice-section-toggle:disabled{opacity:.45}
#practice-routine-list li:has(>.routine-actions[hidden]){grid-template-columns:minmax(0,1fr)}
@media(any-hover:hover) and (any-pointer:fine){
 :where(html:not(.touch-input)) #practice-panel .dialog-head .fretboard-notes-toggle[aria-pressed=true]:hover{background:var(--navy-hover);border-color:var(--navy-hover)}
}

/* Open sections sit one divider-width below their controlling row. */
.app-shell{--setup-divider-width:var(--special-section-divider-width);--play-settings-divider-width:var(--special-section-divider-width)}
.app-shell:has(#settings-panel:not([hidden]),#song-setup:not([hidden]))>.header{margin-bottom:var(--setup-divider-width)}
#settings-panel{margin-top:0;border-top-width:var(--setup-divider-width)}
#song-setup{border-top-width:var(--setup-divider-width)}
#rhythm-controls:has(+#rhythm-settings:not([hidden])){padding-bottom:var(--play-settings-divider-width)}
#rhythm-settings{border-top-width:var(--play-settings-divider-width)}

/* Keys can shuffle complete passes through the selected keys. */
.keys-selector-dialog .dialog-head{flex-wrap:wrap}
#keys-random[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:white}
@media (any-hover:hover) and (any-pointer:fine){:where(html:not(.touch-input)) #keys-random[aria-pressed=true]:hover{background:var(--navy-hover);border-color:var(--navy-hover)}}

/* Redrawing practice notes must not become a mobile page scroll anchor. */
.practice-surface{overflow-anchor:none}

/* Keep the next-position cue and current notes visible together at every width. */
.board.next-position-preview{min-width:0!important}
.board.next-position-preview svg{min-width:0!important}
.next-position-cue{pointer-events:none}

/* Keep the countdown beside Play Along through both selector-row layouts. */
.practice-play-controls{display:flex;align-items:center;justify-content:flex-end;gap:12px;grid-column:4;grid-row:1;justify-self:end}
.practice-play-controls>.rhythm-toggle{margin-left:0;flex:0 0 44px}
.two-selection-rows>.practice-play-controls{grid-column:3;grid-row:2}
.two-selection-rows>.practice-picker-wrap{max-width:calc(100% - var(--practice-play-width,44px) - 14px)}
.two-selection-rows .practice-picker-wrap .picker #practice-summary{white-space:normal}
.practice-countdown{display:inline-grid;place-items:center;width:max-content;flex:0 0 auto;padding-inline:15px;white-space:nowrap;font-size:var(--countdown-font-size,inherit);font-variant-numeric:tabular-nums;color:var(--navy)}
.practice-countdown>span,.practice-countdown::before{grid-area:1 / 1}
/* Reserve one tabular mm:ss label in both manual and Play Along modes. */
.practice-countdown::before{content:"00:00";visibility:hidden}
.practice-countdown:disabled{opacity:1;color:var(--navy)}
.practice-countdown:disabled[data-unavailable=true]{opacity:.45}
.routine-duration-control{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:14px;color:var(--navy)}
.setup-primary-controls>.view-controls{flex-wrap:wrap;align-items:center;justify-content:flex-start}
.number-picker-none{width:100%;min-height:44px;padding:10px var(--picker-close-size);border-radius:8px;font-size:16px}
.number-picker-none[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:white}
.number-picker-dialog[open]:has(>.number-picker-none:not([hidden])){grid-template-rows:auto auto minmax(0,1fr)}
@media(max-width:640px){
 .settings-row .duration-direction .routine-duration-control{display:contents}
 /* One intrinsic label column gives both selectors the same left edge. */
 .settings-row .duration-direction>label>span{justify-self:end;white-space:nowrap}
 .settings-row .duration-direction .mobile-number{justify-self:start}
}

.settings-row .duration-direction.paired-direction{display:flex;flex:0 0 auto;align-items:center;gap:inherit;max-width:100%}
.settings-row .duration-direction.paired-direction>label{display:flex;align-items:center;gap:10px;white-space:nowrap}
.settings-row .duration-direction.paired-direction>.routine-duration-control{gap:8px}

/* Single-column choices share the same right-aligned labels and control edge. */
.settings-row .view-controls.stacked-setup-choices,.song-display-settings.stacked-setup-choices{display:grid;grid-template-columns:max-content minmax(0,max-content);align-items:center;gap:12px 10px}
.view-controls.stacked-setup-choices>.view-control,.song-display-settings.stacked-setup-choices>.segmented-setting{display:contents}
.view-controls.stacked-setup-choices>.view-control>span,.song-display-settings.stacked-setup-choices>.segmented-setting>span{justify-self:end;white-space:nowrap}
.view-controls.stacked-setup-choices .segmented,.song-display-settings.stacked-setup-choices .segmented{justify-self:start;max-width:100%}
.stacked-setup-choices .segmented button{min-width:0}

.setup-primary-controls:has(>.view-controls.stacked-setup-choices){flex-direction:column;align-items:flex-start}

/* Info and Help keep their title rows above bounded, independent scroll areas. */
:is(#progression-builder-info-dialog,#practice-warning-dialog,#practice-guide-dialog,#chord-guide-dialog,#help-dialog)[open]{display:flex;flex-direction:column;overflow:hidden;max-height:calc(var(--setup-viewport-height,100dvh) - 32px)}
:is(#progression-builder-info-dialog,#practice-warning-dialog,#practice-guide-dialog,#chord-guide-dialog,#help-dialog)>.dialog-head{flex:0 0 auto;gap:18px;align-items:flex-start;padding-bottom:16px;border-bottom:var(--general-section-thick-divider)}
.info-window-content{flex:1 1 auto;min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;padding-top:16px}
.info-window-content>:first-child{margin-top:0}
#help-dialog>.dialog-head{border-bottom:var(--general-section-thick-divider-width) solid var(--special-section-divider-color)}
#help-dialog[open]{max-height:min(85vh,calc(100dvh - 32px))}
.help-sections{flex:1 1 auto;min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain}
.help-section-heading{display:flex;align-items:center;gap:8px;width:100%;padding:16px 0;text-align:left;color:inherit;background:transparent;border:0;border-radius:0;font-weight:400}
.help-section-heading>svg{width:10px;height:10px;flex:0 0 10px;fill:currentColor}
.help-section-heading[aria-expanded=true]>svg{transform:rotate(90deg)}
#help-dialog .help-section-heading:hover{background:transparent}
.help-sections.help-section-open{display:flex;flex-direction:column;overflow:hidden}
.help-section-open>.help-section:not([hidden]){display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.help-section-open .help-section-heading{flex:0 0 auto;border-bottom:var(--general-section-thick-divider)}
.help-section-content{flex:1 1 auto;min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;padding-block:16px}
.help-section-content>:first-child{margin-top:0}
.help-section-content>:last-child{margin-bottom:0}

/* Info fretboard string navigation. */
#practice-guide-shapes{flex:0 0 auto}
#guide-string-controls{justify-content:space-between;flex-wrap:nowrap;gap:12px}
.guide-string-step-controls{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.guide-string-step-controls button{display:grid;place-items:center;width:40px;min-height:40px;padding:8px}
.guide-string-step-controls svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-height:600px){
 #practice-guide-dialog{padding-block:18px}
 #practice-guide-dialog>.dialog-head{padding-bottom:12px}
 #practice-guide-shapes{margin-top:10px;padding-bottom:10px}
 .guide-shape-navigation{margin-bottom:6px}
 #guide-string-controls{margin-top:6px}
}

/* Keep the entire fretboard below the title divider in the scrollable pane. */
#practice-guide-shapes{margin-top:4px}

.dyad-context-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.dyad-context-row>.segmented{flex-shrink:0}
.dyad-context-row>.dyad-scale-context{margin:0 0 0 auto;flex-shrink:0;flex-wrap:nowrap;white-space:nowrap}

/* Chord families keep the expanded catalogue small at each selection step. */
.chord-family-selector{display:flex;flex-wrap:nowrap;contain:inline-size;width:100%;max-width:100%;min-width:0;margin:10px 0 14px;gap:3px}
.segmented.chord-family-selector button{flex:1 1 auto;min-width:0;white-space:nowrap;padding-inline:20px}
.catalog-filter-note{margin:14px 0 0;line-height:round(nearest, 1.45em, 1px)}
#progression-qualities{margin-top:10px}
#progression-quality-groups{margin-top:0}
#progression-quality-groups[hidden]+#progression-qualities{margin-top:0}

/* Groups that offer subgroups stay square across every option. Only a visible
   child removes the gap and shares the parent's divider. */
.chord-family-selector.chord-selector-group{border-radius:0}
.chord-family-selector.chord-selector-parent{margin-bottom:0;border-radius:0}
.chord-family-selector.chord-selector-child{margin-top:0;border-top-width:0;border-radius:0;background:#fff}
.segmented:is(.chord-selector-group,.chord-selector-parent,.chord-selector-child)>button{border-radius:0}
.chord-family-selector.chord-selector-overflow{overflow-x:auto;scrollbar-width:thin}
.segmented.chord-selector-overflow>button{flex-shrink:0}

/* Quality options share equal columns across the full editor section. */
#progression-qualities [data-quality-panel]{display:grid;grid-template-columns:repeat(var(--button-grid-columns,1),var(--button-grid-width,minmax(0,1fr)));width:100%;gap:8px}
#progression-qualities [data-quality-panel]>button{width:100%;white-space:nowrap}
#progression-qualities [data-quality-panel]:not([hidden])~[data-quality-panel]:not([hidden]){margin-top:8px}

/* Compact chord qualities sit above the root baseline in every chord display. */
.chord-symbol{display:inline-block;white-space:nowrap}
.chord-symbol sup{font-size:round(nearest, .68em, 1px);line-height:0;vertical-align:round(nearest, .5em, 1px)}

/* Practice chord categories use the same measured grid as Chord Quality. */
#practice-panel [data-practice-shape-grid]{grid-template-columns:repeat(var(--button-grid-columns,1),minmax(0,1fr))}
#practice-panel [data-practice-shape-grid]>button{width:100%;min-width:0}
#practice-panel [data-practice-shape-grid]>button>span{min-width:0;overflow-wrap:anywhere}
#guide-practice-type-buttons>button{user-select:none;-webkit-user-select:none}
.measuring-button-grid>button,.measuring-button-grid>button>span{white-space:nowrap}

#guide-practice-types{padding-block:16px;border-bottom:var(--general-section-thick-divider)}
#guide-practice-type-buttons{grid-template-columns:repeat(var(--button-grid-columns,1),minmax(0,1fr));gap:8px}
#guide-practice-type-buttons button{border:1px solid var(--line);background:#fafafa;justify-content:center;text-align:center;padding:6px 10px;line-height:round(nearest, 1.3em, 1px);white-space:normal}
#guide-practice-type-buttons button[aria-pressed=true]{background:var(--navy);color:white;border-color:var(--navy)}

#guide-practice-type-buttons.measuring-button-grid>button{white-space:nowrap}

@media(min-width:641px){
 #guide-shape-practice,#guide-shape-all,#guide-shape-clear,#guide-shape-back,#guide-shape-next{padding-inline:28px}
 .guide-string-step-controls button{width:auto;padding-inline:16px}
}
#practice-guide-dialog :is(#guide-shape-fragment,#guide-shape-info){text-align:left;margin:16px 0 0;overflow-wrap:anywhere}
#practice-guide-dialog #guide-shape-fragment:not([hidden])+#guide-shape-info{margin-top:6px}
/* Two inset pixels plus the existing border make a 3px selection marker
   without moving text, changing padding, or changing the measured grid. */
#guide-practice-type-buttons button[data-has-shapes=true]:not([aria-pressed=true]){border-color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}

/* Warning controls take space only while current warnings exist. */
.practice-picker-wrap:has(#practice-warning-button:not([hidden])){display:flex;align-items:center;gap:10px}
.practice-picker-wrap:has(#practice-warning-button:not([hidden]))>.picker{width:auto;flex:0 1 auto}
#practice-warning-button{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;min-height:34px;padding:0;border:0;border-radius:50%;line-height:1;background:#d40000;color:white;-webkit-text-fill-color:white}
@media(any-hover:hover) and (any-pointer:fine){:where(html:not(.touch-input)) #practice-warning-button:hover:where(:enabled){background:#ee2525}}
#practice-warning-list{margin:0;padding-left:22px;line-height:round(nearest, 1.5em, 1px);overflow-wrap:anywhere}
#practice-warning-list>li:not([hidden])~li:not([hidden]){margin-top:12px}

#practice-warning-list .warning-resolution{margin:6px 0 0;line-height:round(nearest, 1.5em, 1px)}
.warning-actions{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px}
.warning-action{min-height:34px;padding:4px 0;border:0;border-radius:0;text-align:left;text-decoration:underline;text-underline-offset:3px;color:var(--navy)}

@media(min-width:641px){
 #practice-panel [data-chord-triad-groups]{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Whole-window scrolling becomes a bounded body only while content overflows. */
.conditional-window-body{display:contents}
dialog.conditional-scroll-dialog.is-scrollable[open]{display:flex;flex-direction:column;overflow:hidden}
dialog.conditional-scroll-dialog.is-scrollable>.dialog-head{flex:0 0 auto;padding-bottom:16px;border-bottom:var(--general-section-thick-divider)}
dialog.conditional-scroll-dialog.is-scrollable>.conditional-window-body{display:block;flex:0 1 auto;min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;padding-top:16px}
.conditional-scroll-dialog.is-scrollable>.conditional-window-body>:first-child{margin-top:0}

/* A multi-verse song reserves navigation's left side for its Verses selector. */
#song-verses{flex:0 0 auto;white-space:nowrap;margin-right:auto}
.song-navigation-row.has-verses{justify-content:flex-start}
.song-navigation-row.has-verses .song-transport{margin-left:auto;width:auto}
.song-bottom-playback.has-verses{width:100%;margin-left:0;justify-content:flex-end;align-self:stretch}
.song-play-control.has-verses{flex:1 0 auto}
.song-verses-dialog{max-width:300px}
.song-verse-options{display:flex;flex-direction:column;gap:8px}
.song-verse-options button{flex:0 0 auto;width:100%;min-height:40px}
.song-verse-options button[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:white}
html[data-theme=dark] .song-verse-options button[aria-pressed=true]{background:#3771c8;border-color:#3771c8;color:#000}

#song-import-dialog .import-actions{flex-wrap:wrap}
#song-import-details{margin-right:auto}

.note-recognition-settings{flex:0 0 100%;width:100%;border-top:var(--general-section-thick-divider);padding-top:22px;padding-bottom:30px;margin-top:8px;min-width:0}
#settings-panel:has(.note-recognition-settings){padding-bottom:0}
.recognition-heading{display:block;margin-bottom:12px}.recognition-buttons{display:flex;flex-wrap:wrap;gap:10px}.recognition-buttons button{font-size:16px}
.recognition-list-dialog{width:max-content;max-width:calc(100vw - 32px)}.recognition-list-dialog .number-picker-head h2{font-size:20px}.recognition-list-dialog>p{max-width:420px;white-space:normal;margin:12px 0;font-size:16px}.recognition-list-dialog>p:empty{display:none}
.recognition-list-dialog #recognition-options{min-width:180px}.recognition-list-dialog #recognition-input-refresh{margin-top:12px}
#recognition-calibration-dialog{max-width:580px}#calibration-progress{width:100%;accent-color:var(--navy)}.calibration-level-label{display:flex;align-items:center;gap:12px;margin-top:16px}#calibration-level{flex:1;min-width:0}.calibration-actions{flex-wrap:wrap}
.recognition-list-dialog[open]{grid-template-rows:auto auto minmax(44px,1fr) auto auto;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px)}

/* Two-digit numeric reference: changing the selected number never changes the
   button width. A longer value stays centered and uses the spare side padding. */
.mobile-number.numeric-selector{width:var(--numeric-selector-width,round(up, 2ch + 42px, 1px));min-width:var(--numeric-selector-width,round(up, 2ch + 42px, 1px));max-width:var(--numeric-selector-width,round(up, 2ch + 42px, 1px));flex:0 0 auto;text-align:center;justify-content:center}
.mobile-number.numeric-selector>span{flex:none;white-space:nowrap}

/* Chord Changes uses the Presets Info geometry and dark Presets ink/outline. */
#practice-panel #practice-routine-list .routine-actions .routine-info-button{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;min-height:34px;padding:0;margin-right:4px;border:1px solid var(--theme-button-border,#334154);border-radius:50%;font-size:20px;line-height:1;background:transparent;color:var(--theme-button-ink,#edf1f7);-webkit-text-fill-color:currentColor}
/* Progression Settings shares the Foundations routine gear's geometry. */
#progression-info-button{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;min-height:40px;padding:0;border:2px solid var(--navy);border-radius:7px;background:var(--white);color:var(--navy);-webkit-text-fill-color:currentColor}
#progression-info-button svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media(any-hover:hover) and (any-pointer:fine){
 html:not(.touch-input) #practice-panel #practice-routine-list .routine-actions .routine-info-button:hover:where(:enabled){background:var(--theme-hover,#2a3d54)}
 html:not(.touch-input) #progression-info-button:hover:where(:enabled){background:#e3e8ef}
}

/* Progression actions follow the chips and wrap together with normal spacing. */
#progression-draft-section{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.progression-draft-actions{display:flex;align-items:center;gap:8px;flex:none;margin:0}
#progression-draft-section #progression-info-button{margin:0;float:none}
#progression-draft-section #progression-approach{margin:0;min-height:40px;height:40px}
#progression-draft{display:contents;font-size:0;line-height:0;word-spacing:8px}
#progression-draft .draft-chord{display:inline-flex;align-items:center;justify-content:center;vertical-align:top;font-size:16px;line-height:normal;word-spacing:normal;flex:none;margin-bottom:0}
#progression-draft>.label{display:inline-block;vertical-align:top;line-height:normal;word-spacing:normal}

/* Chord formulas stay together; a wrapped formula starts without a separator. */
#practice-guide-title.chord-formula-title{flex:1;min-width:0;display:flex;align-items:baseline;flex-wrap:nowrap}
#practice-guide-title.chord-formula-title>span{flex:0 0 auto}
#practice-guide-title .chord-title-name{white-space:nowrap}
#practice-guide-title .chord-title-separator{white-space:pre}
#practice-guide-title .chord-title-intervals{white-space:nowrap}
#practice-guide-title.stacked-formula{flex-direction:column;align-items:flex-start}
#practice-guide-title.stacked-formula .chord-title-name{max-width:100%;white-space:normal}
#practice-guide-title.stacked-formula .chord-title-separator{display:none}

/* The builder context and help share the Clear row. */
.progression-hint-row>.segmented{margin-right:auto;flex:0 0 auto}
.progression-summary-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto}
#progression-builder-info-dialog{max-width:600px}
#progression-builder-info-dialog h3{font-size:17px;font-weight:400;margin:20px 0 10px}
#progression-quality-groups{border-radius:8px}
#progression-quality-groups>button{border-radius:5px}
#progression-degree-controls,#progression-approach-controls{margin-top:0}
#progression-approach-controls{margin-bottom:0}

/* Progression choices share their dark-theme border geometry in both themes. */
:root{--play-green:#217821}
:is(#progression-dialog button.draft-chord,#chord-import-dialog .chord-import-chip,#setup-info-progression .chord-import-chip){border-width:2px;padding:7px 13px}
html[data-theme=light] :is(#progression-dialog button.draft-chord,#chord-import-dialog .chord-import-chip,#setup-info-progression .chord-import-chip){border-color:var(--navy)}
#progression-approach{font-size:16px;line-height:normal;background:#fff;color:var(--navy)}
html[data-theme=dark] #progression-approach{background:#101927;color:#fff}
html[data-theme] #progression-approach[aria-pressed=true]{background:var(--play-green);border-color:transparent;color:#fff;-webkit-text-fill-color:currentColor;box-shadow:none}
#progression-approach-options{display:grid;grid-template-columns:repeat(var(--button-grid-columns,1),var(--button-grid-width,minmax(0,1fr)));justify-content:center;gap:8px}
#progression-approach-options>button{width:100%;white-space:nowrap}
@media(any-hover:hover) and (any-pointer:fine){html:not(.touch-input) #progression-dialog #progression-draft .draft-chord.approach-chord:not([aria-pressed=true]):hover:where(:enabled){border-color:var(--play-green)}}

html[data-theme] #progression-dialog #progression-approach{border-color:var(--play-green);background:#fff;color:var(--navy)}
html[data-theme=dark] #progression-dialog #progression-approach{background:#101927;color:#fff}
html[data-theme] #progression-dialog #progression-approach[aria-pressed=true]{border-color:transparent;background:var(--play-green);color:#fff;-webkit-text-fill-color:currentColor}
html[data-theme] #progression-dialog #progression-draft .draft-chord.approach-chord:not([aria-pressed=true]),
html[data-theme] #chord-import-dialog #chord-import-chords .draft-chord.approach-chord,
html[data-theme] #setup-info-dialog #setup-info-progression .draft-chord.approach-chord{border-color:var(--play-green)}
html[data-theme] #progression-dialog #progression-draft .draft-chord.approach-chord[aria-pressed=true]{border-color:transparent}