/* Round final pixels in JS instead of zooming finished elements. This keeps
   borders on the same pixel grid and preserves the original size hierarchy. */
#exercise-bar,#progression-row,#practice-footer,#beat-toolbar,#practice-empty,
body.compact-practice-layout #exercise-bar,
body.compact-practice-layout .practice-bottom .advance-controls{zoom:1}
.practice-surface{--landscape-board-inset:8px;border-width:var(--practice-section-border,1px)}
#exercise-bar{padding-inline:var(--p28);border-bottom-width:var(--practice-section-border);font-size:var(--p16);line-height:var(--p19)}
@container(max-width:756px){#exercise-bar{padding-inline:var(--p12)}}
#exercise-bar,#exercise-bar:is(.compact-controls,.stacked-controls,.stacked-feedback,.stacked-direction){min-height:0}
#exercise-bar .target-row,#exercise-bar .target-list-slot{padding:0}
#exercise-bar .target-list-slot{justify-content:flex-start}
#exercise-bar .targets{position:relative;left:var(--target-list-offset,0px);gap:var(--interval-tile-gap)}
#exercise-bar .targets li{width:var(--interval-tile-width);min-width:var(--interval-tile-width);flex-basis:var(--interval-tile-width);height:var(--interval-tile-height);font-size:var(--practice-chip-font);line-height:var(--practice-line-height);border-radius:var(--p8);padding:var(--practice-chip-padding-block,0px) var(--practice-chip-padding-inline,0px)}
#exercise-bar .practice-info-button{font-size:var(--practice-type-font);line-height:var(--practice-label-line-height);padding:var(--p8) var(--p16);border-radius:var(--p8)}
#exercise-bar.compact-controls .practice-info-button{font-size:var(--practice-type-compact-font);padding:var(--p5) var(--p12)}
#exercise-bar .mic-feedback-marker{font-size:var(--practice-chip-font);line-height:var(--practice-line-height);border-radius:var(--p8)}
#exercise-bar .beat-actions{row-gap:var(--p4)}
#exercise-bar .beat-buttons{gap:var(--p8)}
#exercise-bar.compact-controls .beat-buttons,#exercise-bar.stacked-controls .beat-buttons{gap:var(--p6)}
#exercise-bar :is(.next-button,#rhythm-start),#practice-footer button{font-size:var(--p16);min-height:var(--p40);height:var(--p40);line-height:var(--p19);border-width:var(--practice-control-border);border-radius:var(--p7);padding:var(--p8) var(--p14)}
#exercise-bar .next-button{width:var(--p90);min-width:var(--p90);gap:var(--p10)}
#exercise-bar #rhythm-start{width:var(--p78);min-width:var(--p78);padding-inline:var(--p8)}
#exercise-bar.compact-controls :is(.next-button,#rhythm-start),#exercise-bar.stacked-controls #rhythm-start{font-size:var(--p14)}
#exercise-bar.compact-controls #rhythm-start,#exercise-bar.stacked-controls #rhythm-start{width:var(--p60);min-width:var(--p60)}
#exercise-bar:is(.compact-controls,.stacked-controls) .next-button{width:var(--p40);min-width:var(--p40);padding-inline:var(--p8)}
#exercise-bar.full-next .next-button{width:var(--controls-width);min-width:var(--controls-width);padding-inline:var(--p8);gap:var(--p10)}
#exercise-bar .next-button svg,#practice-footer .next-button svg{width:var(--p20);height:var(--p20)}
#exercise-bar .next-button svg path,#practice-footer .next-button svg path{vector-effect:non-scaling-stroke;stroke-width:var(--practice-arrow-stroke)}
#exercise-bar .rhythm-loading{font-size:var(--p14);bottom:calc(100% + var(--p4))}
#exercise-bar.compact-controls .rhythm-loading{font-size:var(--p12)}
#exercise-bar .route-slot{width:var(--p80);height:var(--practice-direction-slot-height);min-height:var(--practice-direction-slot-height);max-height:var(--practice-direction-slot-height)}
#exercise-bar .route-info{font-size:var(--practice-direction-font);height:var(--practice-direction-height);line-height:var(--p16);gap:var(--p6);border-radius:var(--p6);padding:var(--p2) var(--p7)}
#exercise-bar .route-info[data-direction=up]{padding:var(--p2) var(--p7)}
#exercise-bar .route-info>span{-webkit-text-stroke:var(--practice-route-text-stroke) currentColor}
#exercise-bar .route-info svg{width:var(--p16);height:var(--p16)}
#exercise-bar .route-info svg path{vector-effect:non-scaling-stroke;stroke-width:var(--practice-route-stroke)}
#exercise-bar.stacked-direction .route-slot{top:calc(50% + var(--transport-height) / 2 + var(--p8));width:var(--controls-width)}
#exercise-bar.centered-transport .exercise-right{width:var(--p80)}
#exercise-bar.centered-transport .route-slot{top:calc(50% + var(--p28));width:var(--p80)}
#exercise-bar.direction-only .route-slot{top:50%;width:var(--p80)}
@media(max-width:640px){#exercise-bar .route-info{gap:var(--p3);padding-inline:var(--p4)}#exercise-bar .route-info[data-direction=up]{padding-inline:var(--p3)}}
#progression-row{gap:var(--u16);padding-inline:var(--u18);border-bottom-width:var(--practice-section-border)}
/* Clear the preceding chord’s outer halo before the next degree box. */
#progression-row .progression-strip{--degree-padding:calc(var(--practice-chord-halo) + var(--p8));overflow:visible;gap:calc(var(--practice-chord-halo) + var(--degree-padding))}
#progression-row .chord-chip,body.compact-practice-layout #progression-row .chord-chip{font-size:var(--practice-chip-font);line-height:var(--practice-line-height);min-width:var(--chord-chip-min-width,var(--interval-tile-width));padding-inline:var(--chord-chip-padding-inline,var(--practice-chip-padding-inline));height:var(--interval-tile-height);flex-direction:row;align-items:center;white-space:nowrap;gap:0}
/* The degree border touches its own chord’s outer outline. Keep the former
   degree-to-chip spacing as inner padding and clearance from the prior chord. */
#progression-row .progression-chord{display:inline-flex;align-items:center;gap:var(--practice-chord-halo);width:max-content;max-width:100%;font-size:var(--practice-chip-font);line-height:var(--practice-line-height)}
#progression-row .chord-degree{display:flex;align-items:center;justify-content:center;font:inherit;flex:none;height:calc(var(--interval-tile-height) + var(--practice-chord-halo) * 2);padding:0 var(--degree-padding);border:1px solid currentColor;border-radius:0;background:transparent;color:#000}
html[data-theme=dark] #progression-row .chord-degree{color:#fff}
#progression-row .progression-chord .chord-chip{flex:none}
#progression-row .chord-symbol sup{font-size:var(--chord-suffix-font);vertical-align:var(--chord-suffix-rise)}
#practice-footer{padding:var(--u21) var(--u24);gap:var(--u18);border-top-width:var(--practice-section-border)}
#practice-footer .advance-controls{gap:var(--p10)}
#practice-footer .next-button{min-width:var(--p137);gap:var(--p18)}
body.compact-practice-layout .practice-bottom>#practice-footer{padding:var(--u9)}
body.compact-practice-layout .practice-top.side-by-side #progression-row{border-right-width:var(--practice-section-border)}
#beat-toolbar{min-height:var(--u36);grid-template-columns:minmax(var(--u190),1fr) minmax(0,calc(var(--beat-count,4) * var(--u64) - var(--u4))) minmax(var(--u190),1fr)}
#beat-toolbar .beat-row{grid-template-columns:repeat(var(--beat-count,4),minmax(0,var(--u60)));max-width:calc(var(--beat-count,4) * var(--u64) - var(--u4));gap:var(--u4)}
#beat-toolbar .beat-marker{height:var(--practice-marker-height);aspect-ratio:auto;border-radius:var(--u2);box-shadow:inset 0 0 0 var(--practice-beat-border) var(--navy)}
#beat-toolbar .beat-marker.group-start:not(:first-child){margin-left:var(--u3);width:calc(100% - var(--u3))}
#practice-empty{font-size:var(--p16);line-height:var(--p24);padding:var(--u18);border-width:var(--practice-empty-border);border-radius:var(--p8)}
@media(max-width:1000px){#practice-footer{padding:var(--u18)}}
@media(max-width:640px){#progression-row{gap:var(--u8);padding-inline:var(--u10)}#practice-footer{padding:var(--u15) var(--u14);gap:var(--u14)}#practice-footer button{padding-inline:var(--p9);font-size:var(--p14)}#practice-footer .next-button{min-width:var(--p118)}#practice-footer .advance-controls{gap:var(--p6)}}
/* Whole-pixel positions for the balanced lists; other application lists retain
   their existing centered layout. */
.pixel-snapped-list>*{justify-self:start}

/* Shared outer bounds: only the inward stroke changes in neutral states.
   Multiples of four allow an exact 50% reduction to an even, >=2px stroke. */
html[data-theme] #exercise-bar :is(.targets li,.practice-info-button,.mic-feedback-marker),
html[data-theme] #progression-row .chord-chip{
 --chip-outline:var(--practice-chip-outline);--chip-halo:var(--practice-chip-halo);--chip-border:var(--practice-chip-border);
 --chip-outline-color:var(--root-color,var(--navy));--chip-halo-color:var(--root-halo,transparent);--chip-corner:var(--p8);
 position:relative;border:2px solid transparent;box-shadow:none;
}
html[data-theme] #exercise-bar .practice-info-button{--chip-outline:var(--practice-label-outline);--chip-border:var(--practice-label-border);--chip-halo:var(--practice-label-halo)}
html[data-theme] #progression-row .chord-chip{--chip-halo:var(--practice-chord-halo);--chip-border:var(--practice-chord-border);--chip-corner:0px}
html[data-theme] #exercise-bar :is(.targets li,.practice-info-button,.mic-feedback-marker)::after,
html[data-theme] #progression-row .chord-chip::after{
 content:"";position:absolute;inset:-2px;border:var(--chip-border) solid var(--chip-outline-color);border-radius:var(--chip-corner);box-shadow:0 0 0 var(--chip-halo) var(--chip-halo-color);pointer-events:none;
}
html[data-theme=dark] #exercise-bar :is(.targets li,.practice-info-button,.mic-feedback-marker)::after,
html[data-theme=dark] #progression-row .chord-chip::after{inset:calc(-2px - var(--chip-halo));border-width:var(--chip-outline);box-shadow:none;border-radius:calc(var(--chip-corner) + var(--chip-halo))}
html[data-theme=dark] #progression-row .chord-chip::after{border-radius:0}
html[data-theme] #exercise-bar .targets li.done,
html[data-theme] #exercise-bar .targets:not(.mic-off) li:not(.current),
html[data-theme] #progression-row .chord-chip.active{--chip-outline-color:#000}
html[data-theme=dark] #exercise-bar .targets li.done,
html[data-theme=dark] #exercise-bar .targets:not(.mic-off) li:not(.current),
html[data-theme=dark] #progression-row .chord-chip.active{--chip-outline-color:#fff}
html[data-theme] #exercise-bar .targets li.done::after,
html[data-theme] #exercise-bar .targets:not(.mic-off) li:not(.current)::after,
html[data-theme] #progression-row .chord-chip.active::after{inset:calc(-2px - var(--chip-halo));border-width:var(--practice-neutral-outline);box-shadow:none}
html[data-theme] #exercise-bar .route-info{border-width:var(--practice-direction-border)}
#beat-toolbar{gap:var(--u14);padding:var(--u8) var(--u14)}
html[data-theme=dark] #beat-toolbar .beat-marker{box-shadow:inset 0 0 0 var(--practice-beat-border) white}
html[data-theme=dark] #beat-toolbar .beat-marker.active{box-shadow:none}
#exercise-bar button:focus-visible,#practice-footer button:focus-visible,#progression-row button:focus-visible{outline-width:var(--practice-control-border);outline-offset:var(--p3)}
#exercise-frame{border-bottom-width:var(--practice-section-border,1px)}
#exercise-frame>#exercise-bar{border-bottom:0}
body.compact-practice-layout .right-stack .practice-top,
body.compact-practice-layout .right-stack .practice-bottom>#practice-footer{border-left-width:var(--practice-section-border,1px)}

/* Center the actual transport/badge stack with a measured, whole-pixel gap.
   Older fixed-height offsets could make the enlarged badge touch the buttons. */
#exercise-bar.stacked-direction.has-routes:not(.direction-only) .exercise-right{
 position:absolute;grid-area:auto;top:var(--transport-stack-top);right:var(--row-padding);width:var(--controls-width);transform:none;
}
#exercise-bar.stacked-direction.has-routes:not(.direction-only) .route-slot{
 top:var(--direction-stack-top);height:var(--practice-direction-height);min-height:var(--practice-direction-height);max-height:var(--practice-direction-height);transform:none;
}
#exercise-bar.centered-transport.stacked-direction.has-routes:not(.direction-only) .exercise-right{
 left:var(--right-space-center);right:auto;width:var(--p80);transform:translateX(-50%);
}
#exercise-bar.centered-transport.stacked-direction.has-routes:not(.direction-only) .route-slot{transform:translateX(-50%)}

/* Foundations and Chord Changes: chips above the board, fixed controls below. */
.practice-top{display:block;border-bottom:1px solid var(--line)}
.practice-top.side-by-side,
body.compact-practice-layout .practice-top.side-by-side{display:grid;grid-template-columns:minmax(0,1fr) var(--progression-width);align-items:stretch}
#progression-row,#exercise-frame{border-bottom:0}
#exercise-frame{display:flex;align-items:center;min-width:0}
#exercise-frame>#exercise-bar{flex:1 1 0}
.practice-top.side-by-side #exercise-frame{grid-column:1;grid-row:1}
.practice-top.side-by-side #progression-row{grid-column:2;grid-row:1;border-right:0;border-left:1px solid var(--line)}
.practice-top:not(.side-by-side):has(#exercise-frame:not([hidden])) #progression-row{border-bottom:1px solid var(--line)}
#exercise-bar{display:flex;align-items:center;gap:16px;height:auto;padding:var(--interval-row-padding,14px) max(28px,calc(var(--practice-chip-halo) + 4px));min-width:0}
#exercise-bar .mic-feedback{position:static;transform:none;margin:0;flex:none;width:var(--feedback-width);height:var(--feedback-height);margin-inline:var(--practice-chip-halo)}
#exercise-bar .target-row{flex:1 1 0;min-width:0;width:auto;height:var(--target-height);min-height:0;margin-inline:var(--practice-chip-halo)}
#exercise-bar .target-list-slot{width:100%;height:100%;justify-content:center}
#exercise-bar .targets{left:0;width:var(--target-list-width);max-width:100%;align-content:center}
html[data-theme] #exercise-bar #mic-feedback-marker,
html[data-theme] #exercise-bar #mic-feedback-marker::after{--chip-corner:0px;border-radius:0}
#practice-footer{--practice-button-gap:8px;--practice-route-height:28px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;gap:12px;padding:18px 20px;border-top:1px solid var(--line);background:var(--page);font-size:16px;line-height:20px}
#practice-footer .practice-controls-row{display:flex;align-items:center;gap:16px;width:100%;min-width:0;flex-wrap:nowrap}
#practice-footer .practice-controls-row>.exercise-heading{margin-right:auto}
#practice-footer:not(.two-control-rows) .practice-controls-row>.exercise-heading{margin-right:0}
#practice-footer .next-exercise{margin-right:auto}
#practice-footer .practice-controls-row>.route-slot,#practice-footer .practice-controls-row>.exercise-right{flex:none;margin-left:auto}
#practice-footer .practice-controls-row>.route-slot.reserve-direction~.exercise-right{margin-left:0}
#practice-footer .exercise-heading{display:block;flex:0 1 auto;min-width:0;min-height:0;padding:0;text-align:left;container-type:normal}
#practice-footer h2{width:auto;font-size:20px;line-height:24px;overflow-wrap:anywhere}
#practice-footer #exercise-name{display:block;position:relative;width:max-content;max-width:100%;height:auto;min-height:40px;padding:8px 16px;font-size:20px;line-height:24px;border:2px solid var(--root-color,var(--navy));border-radius:8px;background:var(--root-light,var(--navy-light));box-shadow:0 0 0 2px var(--root-halo,transparent);color:#000;white-space:nowrap;overflow-wrap:normal}
html[data-theme=dark] #practice-footer #exercise-name{border-color:transparent;box-shadow:none}
html[data-theme=dark] #practice-footer #exercise-name::after{content:"";position:absolute;inset:-4px;border:4px solid var(--root-color,var(--navy));border-radius:10px;pointer-events:none}
#practice-footer .next-exercise{flex:0 1 auto;min-width:0;max-width:100%;padding:0;border:0;background:transparent;box-shadow:none;color:var(--ink);font-size:16px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#practice-footer .exercise-right{display:flex;flex:none;align-items:center;justify-content:flex-end;min-width:0}
#practice-footer .beat-actions{display:flex;flex:none;align-items:center;justify-content:flex-end;gap:var(--practice-button-gap);margin:0;position:relative;width:auto}
#practice-footer .beat-buttons{display:flex;align-items:center;justify-content:flex-end;gap:var(--practice-button-gap);width:auto;flex:none}
#practice-footer :is(#next-note,#rhythm-start){width:auto;min-width:74px;height:40px;min-height:40px;padding:8px 14px;font-size:16px;line-height:20px;border-width:1px;border-radius:7px;white-space:nowrap}
#practice-footer #next-note{justify-content:center;gap:0}
#practice-footer .next-label{display:inline}
#practice-footer .rhythm-loading{position:static;font-size:14px;white-space:nowrap}
#practice-footer .route-slot{display:flex;flex:none;align-items:center;justify-content:flex-end;width:var(--practice-route-width);height:var(--practice-route-height);min-height:0;max-height:none;margin:0;position:static;transform:none}
#practice-footer .route-info{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin:0;min-width:100%;height:var(--practice-route-height);padding:2px 7px;border:2px solid var(--navy);border-radius:6px;background:white;color:#000;font-size:14px;line-height:16px;white-space:nowrap;font-variant-numeric:tabular-nums;text-align:center}
#practice-footer .route-slot:not(.reserve-direction){display:none}
#practice-footer .route-info[data-style-direction=down]{background:var(--navy);color:white}
#practice-footer .route-info>span{-webkit-text-stroke:1px currentColor;paint-order:stroke fill}
#practice-footer .route-info svg{stroke-width:2.4}
html[data-theme=dark] #practice-footer .route-info{background:var(--dark-practice-background);border-color:#3771c8;color:#3771c8}
html[data-theme=dark] #practice-footer .route-info[data-style-direction=down]{background:#3771c8;border-color:transparent;color:black}
@media (any-hover:hover) and (any-pointer:fine){:where(html:not(.touch-input)) #practice-footer #exercise-name:hover:where(:enabled){background:color-mix(in srgb,var(--root-light,var(--navy-light)) 88%,black)}}
/* Compact landscape keeps the same vertical order and fixed control sizes. */
body.compact-practice-layout .practice-bottom{display:flex;flex-direction:column;flex:1 0 auto;min-width:0;min-height:0}
body.compact-practice-layout .practice-bottom>#board-scroll{flex:none;width:100%;height:var(--fretboard-height);min-height:80px;min-width:0;padding:4px 8px;overflow-x:auto;overflow-y:hidden}
body.compact-practice-layout .practice-bottom>#practice-footer{align-self:stretch;flex:none;padding:18px 20px;border-top:1px solid var(--line);flex-wrap:nowrap;justify-content:flex-start}
@media(max-width:640px){
 #exercise-bar{padding-inline:max(12px,calc(var(--practice-chip-halo) + 4px))}
 #practice-footer,body.compact-practice-layout .practice-bottom>#practice-footer{padding:14px 12px}
}

/* Landscape uses one full-width chord row, a centered interval panel to the
   left of the board, and the existing full-width exercise controls below. */
body .practice-surface.landscape-practice{display:grid;height:auto;grid-template-columns:var(--interval-section-width) minmax(0,1fr);grid-template-rows:auto auto var(--landscape-row-height,80px) auto;align-items:stretch;overflow:hidden}
body .practice-surface.landscape-practice>.practice-top,
body .practice-surface.landscape-practice>.practice-bottom{display:contents}
.practice-surface.landscape-practice #progression-row{grid-column:1 / -1;grid-row:1;border:0;border-bottom:1px solid var(--line);width:100%;min-width:0}
.practice-surface.landscape-practice #beat-toolbar{grid-column:1 / -1;grid-row:2;border-bottom:1px solid var(--line);min-width:0}
.practice-surface.landscape-practice #exercise-frame{grid-column:1;grid-row:3;display:block;align-self:stretch;border:0;border-right:var(--practice-section-border,1px) solid var(--line);min-width:0;min-height:0;overflow:auto}
.practice-surface.landscape-practice #exercise-bar{display:block;position:relative;box-sizing:border-box;width:100%;height:100%;min-width:0;min-height:0;padding:0;margin:0;border:0;zoom:1}
.practice-surface.landscape-practice #exercise-bar :is(#target-row,#target-list-slot,#targets){position:absolute;inset:0;display:block;box-sizing:border-box;width:100%;height:100%;max-width:none;min-width:0;min-height:0;margin:0;padding:0;left:0}
.practice-surface.landscape-practice #exercise-bar #targets>li,
.practice-surface.landscape-practice #exercise-bar #mic-feedback{position:absolute;left:var(--interval-x,0px);top:var(--interval-y,0px);margin:0;transform:none}
body .practice-surface.landscape-practice .practice-bottom>#board-scroll{grid-column:2;grid-row:3;display:block;box-sizing:border-box;align-self:stretch;width:100%;height:100%;min-width:0;min-height:0;padding:4px var(--landscape-board-inset);overflow-x:auto;overflow-y:hidden;border:0}
body .practice-surface.landscape-practice .board{height:100%}
body .practice-surface.landscape-practice .board svg{height:100%;max-height:100%;min-height:0}
body .practice-surface.landscape-practice:not(.no-interval-section) #board-scroll{scrollbar-gutter:auto}
body .practice-surface.landscape-practice:not(.no-interval-section) .board svg{min-width:0}
body .practice-surface.landscape-practice .practice-bottom>#practice-footer{grid-column:1 / -1;grid-row:4;align-self:stretch;border:0;border-top:1px solid var(--line);width:100%;margin:0}
body .practice-surface.landscape-practice.no-interval-section{grid-template-columns:minmax(0,1fr)}
body .practice-surface.landscape-practice.no-interval-section .practice-bottom>#board-scroll{grid-column:1}

/* Wide Play Along protects a centered beat group in the first controls row. */
body .practice-surface.footer-beats .practice-bottom>#practice-footer{padding-top:var(--footer-beat-section-padding);padding-bottom:var(--footer-beat-bottom-padding)}
.practice-surface.wide-practice #practice-footer .practice-controls-row>.route-slot.reserve-direction~.exercise-right{margin-left:calc(var(--practice-direction-gap,var(--practice-button-gap)) - 16px)}
.practice-surface.footer-beats #practice-controls-main{position:relative}
.practice-surface.footer-beats #practice-controls-main>.exercise-heading{margin-right:0}
.practice-surface.footer-beats #practice-controls-main>:is(.next-exercise,.route-slot){align-self:flex-end}
.practice-surface.footer-beats #practice-footer .next-exercise{position:relative;top:var(--footer-beat-preview-offset,0px)}
.practice-surface.footer-beats #practice-footer .route-slot{position:relative;top:var(--footer-beat-direction-offset,0px)}
.practice-surface.footer-beats #practice-footer #beat-toolbar{position:absolute;left:var(--footer-beat-left);top:var(--footer-beat-top);width:var(--footer-beat-width);height:var(--footer-beat-marker-height);min-height:0;padding:0;margin:0;border:0;gap:0;background:transparent;display:flex}
.practice-surface.footer-beats #beat-toolbar .beat-row{flex:none;width:100%;max-width:none;grid-template-columns:repeat(var(--beat-count,4),var(--footer-beat-marker-width));gap:4px}
.practice-surface.footer-beats #beat-toolbar .beat-marker{height:var(--footer-beat-marker-height);aspect-ratio:auto;border-radius:2px;box-shadow:inset 0 0 0 1px var(--navy)}
.practice-surface.footer-beats #beat-toolbar .beat-marker:not(.active){background:var(--svg-canvas,white)}
.practice-surface.footer-beats #beat-toolbar .beat-marker.group-start:not(:first-child){margin-left:3px;width:calc(100% - 3px)}
html[data-theme=dark] .practice-surface.footer-beats #beat-toolbar .beat-marker{box-shadow:inset 0 0 0 1px white}
html[data-theme=dark] .practice-surface.footer-beats #beat-toolbar .beat-marker.active{box-shadow:none}

/* The status slot travels with the exercise button, including two-row footers. */
#practice-footer .exercise-heading{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
#practice-footer .exercise-heading h2{min-width:0;flex:0 1 auto}
#practice-footer .practice-status-slot{display:flex;align-items:center;justify-content:center;flex:0 0 34px;width:34px;height:40px}
#practice-footer #practice-warning-button{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;min-height:34px;padding:0;font-size:20px;line-height:1;border:0;border-radius:50%;background:#d40000;color:#fff;-webkit-text-fill-color:currentColor}
#practice-footer #practice-warning-button.fallback-info{background:var(--page);border:1px solid var(--navy);color:var(--navy)}
html[data-theme=dark] #practice-footer #practice-warning-button.fallback-info{border-color:#3771c8;color:#3771c8}
@media(any-hover:hover) and (any-pointer:fine){:where(html:not(.touch-input)) #practice-footer #practice-warning-button.fallback-info:hover:where(:enabled){background:var(--page)}}