html{height:100%}body{min-height:100%;padding:64px 12px 10px;font-size:14px}
.wrap>h1{color:#39c9bd;text-shadow:0 1px 8px #123f4933}
.rhythm-info{display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;margin-inline-start:6px;padding:0;border:1px solid #a890bf;border-radius:7px;background:#503b67;color:#fff;font:700 15px/1 system-ui;cursor:pointer;vertical-align:middle}
.rhythm-info:hover{background:#6c5089}.rhythm-info:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rhythm-help-dialog{width:min(460px,calc(100vw - 28px));border:1px solid var(--border);border-radius:18px;padding:22px;background:var(--bg-controls);color:var(--text-main);box-shadow:var(--shadow)}
.rhythm-help-dialog::backdrop{background:#080e1dbb}.rhythm-help-dialog h2{margin:0 0 10px;font-size:19px;color:var(--accent)}.rhythm-help-dialog p{margin:0 0 18px;font-size:15px;line-height:1.8}
.wrap{max-width:1600px;height:calc(100dvh - 74px);display:flex;flex-direction:column;gap:6px}
.wrap>h1{position:absolute;top:12px;left:50%;transform:translateX(-50%);font-size:22px;margin:0;white-space:nowrap}
h1::after{display:none}.tagline{margin:0;font-size:12px;flex:none}
.rhythm-workspace{display:grid;grid-template-columns:minmax(0,1fr) 250px;direction:ltr;gap:10px;flex:1;min-height:0}
.rhythm-practice,.rhythm-rail{direction:rtl;margin:0;min-width:0;min-height:0;padding:10px}
html[lang=en] .rhythm-practice,html[lang=en] .rhythm-rail{direction:ltr}
.rhythm-practice{display:flex;flex-direction:column}
.modebar{justify-content:center;flex:none}.modebar button{padding:7px 12px}.mode-hint{margin:0 0 5px;font-size:12px}
.score-wrap{flex:1;min-height:110px;overflow:visible;border-image:none;border-top-color:var(--accent);display:flex;align-items:center;justify-content:center}
#score{width:100%;height:100%;min-height:0}#score svg{width:100%!important;height:100%!important;max-height:100%;display:block}
.score-empty{position:absolute;inset:0;display:grid;place-items:center;padding:10px}
.beatdots{margin:5px 0 0;flex:none}.stage{padding:0;flex:none}.phaselabel{margin:0;min-height:18px;font-size:13px}
.transport{margin:5px 0;gap:6px}.bigbtn{padding:8px 20px;font-size:15px}.ctlbtn{padding:7px 12px}
.tappad{height:70px;margin:5px auto 0;max-width:650px}.tapcount{font-size:12px;min-height:16px}.feedback{margin:2px 0;min-height:18px;font-size:14px}
.analysis{margin-top:4px;padding-top:4px}.analysis h3{font-size:12px;margin:0}.timing-svg{height:45px}.metrics{gap:8px;margin-top:2px;font-size:12px}.metrics b{font-size:14px}.legend{margin-top:2px;font-size:10px}
.rhythm-rail{display:flex;flex-direction:column;gap:7px}.rhythm-rail>.field{gap:2px}.rhythm-rail select{width:100%;min-width:0;padding:5px 7px;font-size:12px}.rhythm-rail input[type=range]{width:100%;direction:ltr}
.rhythm-rail>.panel{margin:0;padding:7px;box-shadow:none}.statsbar{gap:4px 12px}.statsbar>div{display:flex;gap:5px;align-items:center}.statsbar b{font-size:15px}.statsbar .lab{font-size:11px}
.wrap>.row:empty{display:none}.rhythm-studio-brand{position:fixed;top:14px;right:62px;display:flex;align-items:center;gap:7px;direction:ltr;color:var(--text-main);text-decoration:none;font:800 17px system-ui}.rhythm-studio-brand img{width:30px;height:30px}
#mms-home-fab{right:14px!important;left:auto!important;top:12px!important}.rhythm-fullscreen{position:fixed;top:14px;left:62px;height:38px;border-radius:10px;font-weight:700}
.rhythm-options-dialog{width:min(1000px,calc(100vw - 24px));max-height:calc(100dvh - 24px);border:1px solid var(--border);border-radius:18px;background:var(--bg-page);color:var(--text-main);padding:14px}.rhythm-options-dialog::backdrop{background:#080e1dbb}.dialog-close{margin-bottom:10px}.rhythm-options-dialog .panel{margin:0;box-shadow:none}.rhythm-options-dialog .row{gap:8px 14px}.rhythm-options-dialog .field{font-size:12px}.rhythm-options-dialog select{min-width:0}.rhythm-options-dialog .panel>h2{pointer-events:none}.rhythm-options-dialog h2::after{display:none}
.palette{margin:4px 0;gap:4px}.palette button{min-width:38px;padding:5px 7px;font-size:22px}.dict-strip{min-height:34px}.dict-meter{margin-top:2px}
@media(max-height:680px) and (min-width:801px){body{padding-top:58px}.wrap{height:calc(100dvh - 68px)}.rhythm-rail{gap:4px}.rhythm-rail>.field{font-size:11px}.rhythm-rail select{padding:3px 6px}.rhythm-rail>.ctlbtn{padding:5px 8px}.tappad{height:48px}.tagline{font-size:11px}.modebar button{padding:5px 10px}.timing-svg{height:32px}}
@media(max-width:800px){body{padding-top:94px}.wrap{height:calc(100dvh - 104px)}.wrap>h1{top:57px;font-size:20px}.rhythm-studio-brand{font-size:14px}.rhythm-studio-brand img{width:25px;height:25px}.rhythm-fullscreen{font-size:12px;padding:5px 7px}.tagline{font-size:11px}.rhythm-workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:6px}.rhythm-rail{flex-direction:row;flex-wrap:wrap;align-items:center;padding:6px;gap:4px}.rhythm-rail>.field{flex:1 1 28%;font-size:10px}.rhythm-rail>.panel{flex:1 1 100%;padding:3px}.rhythm-rail>.ctlbtn{flex:1;font-size:11px;padding:5px}.rhythm-rail .statsbar{gap:3px 9px}.rhythm-practice{padding:6px}.modebar{gap:4px}.modebar button{font-size:12px;padding:5px 8px}.tappad{height:48px}.mode-hint{font-size:11px}.transport .ctlbtn,.bigbtn{font-size:12px;padding:6px 10px}.rhythm-options-dialog .row{gap:7px}.rhythm-options-dialog .field{flex:1 1 42%}}

@media(max-width:800px){.rhythm-practice:has(#dictArea:not([hidden])) .mode-hint{display:none}.rhythm-practice:has(#dictArea:not([hidden])) .score-wrap{min-height:60px}.rhythm-practice:has(#dictArea:not([hidden])) .palette{gap:3px}.rhythm-practice:has(#dictArea:not([hidden])) .palette button{min-width:30px;padding:4px;font-size:20px}}

/* Keep the tempo help anchored when the BPM changes digit width. */
.rhythm-rail .field:has(> #bpm)>span{display:flex;align-items:center;gap:4px;min-height:22px}
.rhythm-rail .field:has(> #bpm) .rhythm-info{margin-inline-start:auto}
#bpmVal{display:inline-block;min-width:3ch;text-align:center;font-variant-numeric:tabular-nums}

/* Keep help buttons consistent inside mode and settings toolbars. */
button.rhythm-info,.modebar button.rhythm-info{background:#503b67!important;color:#fff!important;border:1px solid #a890bf!important;border-radius:7px!important;width:22px!important;min-width:22px!important;height:22px!important;padding:0!important;font:700 15px/1 system-ui!important;box-shadow:none!important;align-self:center}
button.rhythm-info:hover,.modebar button.rhythm-info:hover{background:#6c5089!important}

/* Clear, stronger labels across the practice workspace. */
.rhythm-rail .field>span,.rhythm-rail .statsbar .lab,.rhythm-practice .mode-hint,.wrap>.tagline{color:var(--text-main);font-weight:600}
.rhythm-rail select,.rhythm-rail>.ctlbtn,.modebar button{font-weight:700}
.rhythm-rail .field>span{font-size:13px}
.rhythm-help-dialog p,.rhythm-options-dialog .field{color:var(--text-main);font-weight:600}
.rhythm-practice .tappad{color:var(--text-main);font-weight:800}


.drum-metronome:focus-visible{outline:2px solid #10b981;outline-offset:2px;border-radius:8px}
.drum-metronome .measure-circle{box-sizing:border-box;position:relative;display:block;width:52px;height:52px;border-radius:50%;border:2px solid #64748b;background:radial-gradient(circle,#101827,#1e293b);box-shadow:inset 0 3px 8px #0008}
.drum-metronome .circle-hand{position:absolute;bottom:50%;left:50%;width:2px;height:21px;background:linear-gradient(to top,#e5c15833,#e5c158);transform-origin:bottom center;transform:translateX(-50%) rotate(0deg);border-radius:2px;z-index:2}
.drum-metronome .circle-marker{position:absolute;top:50%;left:50%;width:13px;height:13px;margin:-6.5px;background:#cbd5e1;border-radius:50%;z-index:4;color:#0f172a}
.drum-metronome .circle-marker.downbeat{background:#e74c3c;color:white}
.drum-metronome .circle-marker.flash{background:#fff;box-shadow:0 0 7px #fff8}
.drum-metronome .circle-marker.downbeat.flash{background:#ff9999;box-shadow:0 0 7px #ff9999}
.drum-metronome .beat-number{position:absolute;top:50%;left:50%;font:700 8px/1 system-ui;white-space:nowrap}
.rhythm-circle{width:64px;height:64px;flex:none;margin-inline-end:8px;position:relative}.rhythm-circle .metronome-circle{width:52px;height:52px}#beatDots{display:none}

#stopBtn{display:none!important}#playBtn.is-stopping{background:#c93440!important;color:#fff;box-shadow:0 4px 12px #c9344033}

.rhythm-library-nav:not([hidden]){display:flex;align-items:center;justify-content:center;gap:6px;margin:4px 0}.rhythm-library-nav select{min-width:0;max-width:280px;flex:1;font-size:13px;padding:5px}.rhythm-library-nav button{white-space:nowrap;font-size:12px;padding:5px 9px}#libGrid .library-selected{border-color:var(--accent);background:var(--accent);color:#fff}

.rhythm-library-nav{flex-wrap:wrap}.library-rests-toggle{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--text-main);white-space:nowrap}.library-rests-toggle input{accent-color:var(--accent)}

/* Volume increases physically to the right in either language. */
#vol{direction:ltr}
.rhythm-options-dialog #setPanel .body>.row:last-child{align-items:flex-end}
.rhythm-options-dialog #setPanel .body>.row:last-child>.field{gap:6px}
.rhythm-options-dialog #setPanel .body>.row:last-child select,.rhythm-options-dialog #midiBtn{height:40px;box-sizing:border-box}
.rhythm-options-dialog #vol{height:40px;margin:0;display:block}
.rhythm-options-dialog #midiStatus{align-self:center}

@media(max-height:680px) and (min-width:801px){.rhythm-rail{gap:3px;padding:8px}.rhythm-rail>.field{gap:0}.rhythm-rail select{padding:2px 6px}.rhythm-rail>.ctlbtn{padding:4px 8px}.rhythm-rail .field>span{font-size:12px}}

.rhythm-meter-control{max-width:180px;text-align:start;gap:2px}.rhythm-meter-control>span{font-size:12px;font-weight:700;color:var(--text-main)}.rhythm-meter-control select{min-width:0;width:100%;padding:5px 7px;font-size:12px}

.rhythm-meter-control{width:105px;max-width:105px;flex:none}.rhythm-meter-control select{height:30px;padding:3px 6px;font-size:12px}

.rhythm-meter-control{width:78px;max-width:78px;min-width:0}.rhythm-meter-control select{width:78px;min-width:0!important;padding:3px 4px}

.score-wrap:has(.rhythm-counting-control){padding-inline-start:132px}.rhythm-counting-control{position:absolute;right:8px;width:116px;max-width:116px;text-align:right;gap:3px}.rhythm-counting-control[hidden]{display:none}.rhythm-counting-control>span{font-size:11px;font-weight:700;color:#243449}.rhythm-counting-control select{width:100%;min-width:0;padding:4px;font-size:11px}
@media(max-width:800px){.score-wrap:has(.rhythm-counting-control){padding-inline-start:96px}.rhythm-counting-control{right:5px;width:85px;max-width:85px}.rhythm-counting-control select{font-size:10px}}

.rhythm-meter-control{margin-right:18px;margin-left:18px}

.rhythm-rail>.rhythm-stats-panel{margin-top:auto}
@media(max-width:800px){.rhythm-rail>.rhythm-stats-panel{order:20}}

.rhythm-rail>.rhythm-how-button{background:#503b67;color:#fff;border-color:#a890bf;font-weight:700}.rhythm-rail>.rhythm-how-button:hover{background:#6c5089}

.rhythm-rail>.field[hidden]{display:none}
.rhythm-tempo-control{display:flex;flex-direction:column;align-items:center;gap:2px;flex:none;margin-inline:5px;color:var(--text-main);font-size:11px;font-weight:700}
.rhythm-tempo-knob{position:relative;width:49px;height:49px;padding:0;border:1px solid #8395af;border-radius:50%;background:radial-gradient(circle at 35% 25%,#52677e,#26394c 55%,#111e2c);color:#fff;box-shadow:0 3px 6px #0005;cursor:ns-resize;touch-action:none;user-select:none}
.rhythm-tempo-knob::after{content:"";position:absolute;inset:4px;border-radius:50%;background:linear-gradient(#65e0ce,#65e0ce) center top/3px 8px no-repeat;transform:rotate(var(--tempo-angle,-67deg));pointer-events:none}
.rhythm-tempo-value{font:800 14px/1 system-ui;font-variant-numeric:tabular-nums}.rhythm-tempo-knob:focus-visible{outline:2px solid #65e0ce;outline-offset:3px}

.transport #loopBtn{width:34px;min-width:34px;height:34px;padding:0;font:700 22px/1 system-ui;display:inline-flex;align-items:center;justify-content:center;border-radius:50%}

.rhythm-meter-control>span{position:relative;display:block;width:100%;text-align:center;min-height:22px;line-height:22px}.rhythm-meter-control>span>.rhythm-info{position:absolute;right:-26px;top:0;margin:0}

.rhythm-meter-control>span>.rhythm-info{top:29px}

.rhythm-rail>.rhythm-settings-button{background:#245780;color:#fff;border-color:#73b9e8;font-weight:700}.rhythm-rail>.rhythm-settings-button:hover{background:#306b99}

.score-wrap{padding-top:62px}.rhythm-notation-style{position:absolute;top:8px;left:50%;transform:translateX(-50%);display:flex;flex-direction:row;align-items:center;gap:8px;z-index:2}.rhythm-notation-style>span{color:#243449;font-weight:700;white-space:nowrap;font-size:12px}.rhythm-notation-style select{min-width:0;width:155px;padding:4px 7px;font-size:12px}

/* Practice without visible grades or answer scores. */
#feedback,#analysis,.rhythm-rail>.rhythm-stats-panel{display:none!important}

#tapTempo{display:none!important}

/* Show per-attempt timing and accuracy, keeping cumulative scores hidden. */
#feedback{display:block!important;font-size:15px;font-weight:800}#analysis.show{display:block!important}#analysis:not(.show){display:none!important}#metrics>div:not(:first-child){display:none}#metrics>div:first-child b{font-size:22px}#metrics>div:first-child .lab{font-size:12px;color:var(--text-main)}

@media(max-height:680px){.rhythm-practice:has(#analysis.show) .score-wrap{min-height:80px}.rhythm-practice:has(#analysis.show) .analysis .legend{font-size:9px;gap:4px 8px}.rhythm-practice:has(#analysis.show) #metrics{margin-top:0}.rhythm-practice:has(#analysis.show) #metrics>div:first-child{display:flex;align-items:center;justify-content:center;gap:6px}}

.rhythm-sound-header{display:flex;align-items:center;gap:16px;direction:rtl;margin-bottom:6px;flex:none}.rhythm-sound-header>.mode-hint{flex:1;text-align:start;margin:0}.rhythm-sound-controls{display:flex;gap:12px;flex:none}.rhythm-sound-group{display:flex;align-items:center;gap:6px}.rhythm-sound-group>.field{width:110px;gap:3px;text-align:center}.rhythm-sound-group>.field>span{color:var(--text-main);font-weight:700;font-size:12px}.rhythm-sound-group select{min-width:0;width:100%;font-size:12px;padding:4px}.rhythm-volume-knob{width:42px;height:42px}.rhythm-volume-knob .rhythm-tempo-value{font-size:11px}.rhythm-options-dialog .field[hidden]{display:none}
@media(max-width:800px){.rhythm-sound-header{flex-wrap:wrap;gap:4px}.rhythm-sound-controls{width:100%;justify-content:center;gap:8px}.rhythm-sound-group>.field{width:94px}.rhythm-sound-header>.mode-hint{font-size:10px}}

.rhythm-sound-header>.mode-hint{text-align:center}

.rhythm-how-panel summary{list-style:none;cursor:default}.rhythm-how-panel summary::marker{content:""}.rhythm-how-panel summary::-webkit-details-marker{display:none}.rhythm-how-panel details{margin-bottom:12px}

/* Keep notation at its engraved size when feedback opens. */
.rhythm-practice .score-wrap{overflow:auto;min-height:240px;flex-shrink:0;justify-content:flex-start}#score{height:auto;flex:none}#score svg{max-height:none} .rhythm-practice{overflow-y:auto}

.rhythm-practice .score-wrap.dictation-hidden{flex:0 0 auto;min-height:100px;height:100px;padding:12px;overflow:hidden;box-sizing:border-box}.score-wrap.dictation-hidden #score,.score-wrap.dictation-hidden .rhythm-counting-control,.score-wrap.dictation-hidden .rhythm-notation-style{display:none}.score-wrap.dictation-hidden .hideov{padding:10px;line-height:1.6;color:var(--text-main)!important;background:var(--staff-paper,#fffdf8)}

/* Dictation is written on a visible blank staff; the target stays hidden until checked. */
.rhythm-practice .score-wrap.dictation-hidden{display:none}#dictStaff{flex:none;background:#fffdf8;border:1px solid var(--border);border-radius:10px;padding:8px;color:#17212c}#dictStaff[hidden]{display:none}#dictStaff p{font-size:13px;margin:0 0 4px;line-height:1.5}.dict-staff-canvas{overflow-x:auto;direction:ltr}.dict-staff-canvas svg{display:block;min-width:560px}#dictStrip{display:none}

#dictStaff.dict-comparison{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}#dictStaff.dict-comparison>p{grid-column:1;grid-row:1}#dictStaff.dict-comparison>.dict-staff-canvas{grid-column:1;grid-row:2}#dictStaff.dict-comparison>.dict-target{grid-column:2;grid-row:1/3;min-width:0;border-inline-start:1px solid #b9bec4;padding-inline-start:6px}#dictStaff.dict-comparison .dict-staff-canvas svg{width:100%;min-width:0;height:155px}#dictStaff .dict-target svg{display:block}#dictStaff .dict-target p{min-height:20px}

#dictStaff{min-width:0;box-sizing:border-box}#dictStaff .dict-staff-canvas{overflow:hidden;min-width:0}#dictStaff .dict-staff-canvas svg,#dictStaff.dict-comparison .dict-staff-canvas svg{width:100%;min-width:0;height:155px;max-width:100%} .rhythm-practice:has(#dictStaff:not([hidden])){overflow:hidden}.rhythm-practice:has(#dictStaff:not([hidden])) .mode-hint{display:none}.rhythm-practice:has(#dictStaff:not([hidden])) .phaselabel{font-size:12px;line-height:1.3}.rhythm-practice:has(#dictStaff:not([hidden])) #dictStaff p{font-size:12px;line-height:1.3}.rhythm-practice:has(#dictStaff:not([hidden])) .stage{min-height:0}.rhythm-practice:has(#dictStaff:not([hidden])) .feedback{font-size:12px}

@font-face{font-family:RhythmBravura;src:url(assets/Bravura.woff2) format("woff2");font-display:swap}.dict-rest-glyph{font-family:RhythmBravura;font-size:27px;fill:currentColor}#palette{display:flex;flex-direction:column;gap:3px}.dict-palette-row{display:flex;justify-content:center;align-items:center;gap:4px}.dict-palette-row>span{font-size:11px;min-width:48px}.dict-palette-row button{height:38px;min-width:38px;padding:2px 5px;display:inline-flex;align-items:center;justify-content:center}.dict-palette-row button.on{background:var(--accent);color:white}.dict-palette-row svg{flex:none}#dictArea .palette{margin:3px 0}@media(max-height:750px){#dictStaff .dict-staff-canvas svg,#dictStaff.dict-comparison .dict-staff-canvas svg,#dictStaff .dict-target svg{height:125px!important}.dict-palette-row button{height:34px}.dict-palette-row svg{max-height:30px}}

/* Reserve a fixed comparison area so checking never enlarges the workspace. */
#dictStaff,#dictStaff.dict-comparison{height:174px;overflow:hidden}
#dictStaff.dict-comparison{grid-template-rows:22px 125px;align-content:start}
#dictStaff p{margin:0 0 4px!important;min-height:0!important}
#dictStaff .dict-staff-canvas svg,#dictStaff.dict-comparison .dict-staff-canvas svg,#dictStaff .dict-target svg{height:125px!important;max-width:100%;overflow:hidden}
.dict-palette-row{min-width:0}.dict-palette-row button{flex-shrink:1;min-width:30px}.dict-palette-row svg{max-width:100%;height:30px}
@media(max-height:680px){#dictStaff,#dictStaff.dict-comparison{height:144px}#dictStaff.dict-comparison{grid-template-rows:20px 100px}#dictStaff .dict-staff-canvas svg,#dictStaff.dict-comparison .dict-staff-canvas svg,#dictStaff .dict-target svg{height:100px!important}.rhythm-practice:has(#dictStaff:not([hidden])) .phaselabel{min-height:15px;font-size:11px}.rhythm-practice:has(#dictStaff:not([hidden])) .transport{margin:3px 0}}
@media(max-width:800px){.dict-palette-row{gap:2px}.dict-palette-row>span{min-width:36px;font-size:10px}.dict-palette-row button{padding:2px;min-width:28px;max-width:54px}.dict-palette-row button svg{max-width:42px}.dict-palette-row:last-child button{width:calc((100% - 50px)/6);font-size:10px}.dict-palette-row:last-child svg{width:100%}#dictStaff>p{font-size:11px!important}}
@media(max-height:640px){#dictStaff,#dictStaff.dict-comparison{height:110px}#dictStaff.dict-comparison{grid-template-rows:18px 70px}#dictStaff .dict-staff-canvas svg,#dictStaff.dict-comparison .dict-staff-canvas svg,#dictStaff .dict-target svg{height:70px!important}}
@media(max-height:640px){.rhythm-practice:has(#dictStaff:not([hidden])) .dict-palette-row button{height:28px!important;min-height:28px!important}.rhythm-practice:has(#dictStaff:not([hidden])) .dict-palette-row svg{height:24px;max-height:24px}.rhythm-practice:has(#dictStaff:not([hidden])) .beatdots{margin:1px 0}.rhythm-practice:has(#dictStaff:not([hidden])) .feedback{margin:0;min-height:14px}}

/* Give dictation its own transport column, keeping writing tools together. */
@media(min-width:1000px){
 .rhythm-practice:has(#dictStaff:not([hidden])){display:grid;grid-template-columns:166px minmax(0,1fr);grid-template-rows:auto auto auto auto auto auto;gap:6px 14px;align-content:start}
 .rhythm-practice:has(#dictStaff:not([hidden]))>#modebar{grid-column:1/-1;grid-row:1}
 .rhythm-practice:has(#dictStaff:not([hidden]))>.rhythm-sound-header{grid-column:1/-1;grid-row:2}
 .rhythm-practice:has(#dictStaff:not([hidden]))>.stage{display:contents}
 .rhythm-practice:has(#dictStaff:not([hidden])) #phaseLabel{grid-column:2;grid-row:3}
 .rhythm-practice:has(#dictStaff:not([hidden]))>#dictStaff{grid-column:2;grid-row:4;width:100%}
 .rhythm-practice:has(#dictStaff:not([hidden])) .stage>.transport{grid-column:1;grid-row:3/7;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:10px;padding:12px 8px;margin:0;border-inline-end:1px solid var(--border);min-width:0}
 .rhythm-practice:has(#dictStaff:not([hidden])) .stage>.transport .rhythm-meter-control{order:0}
 .rhythm-practice:has(#dictStaff:not([hidden])) .stage>.transport .rhythm-circle{order:1}
 .rhythm-practice:has(#dictStaff:not([hidden])) .stage>.transport .rhythm-tempo-control{order:2}
 .rhythm-practice:has(#dictStaff:not([hidden])) .stage>.transport #playBtn{order:3;width:140px}
 .rhythm-practice:has(#dictStaff:not([hidden])) .stage>.transport #newBtn{order:4;width:140px;font-size:12px;padding:7px}
 .rhythm-practice:has(#dictStaff:not([hidden])) .stage>.transport #stopBtn{order:5}
 .rhythm-practice:has(#dictStaff:not([hidden])) .stage>.transport #loopBtn{order:6}
 .rhythm-practice:has(#dictStaff:not([hidden])) #dictArea{grid-column:2;grid-row:5;min-width:0}
 .rhythm-practice:has(#dictStaff:not([hidden])) #feedback{grid-column:2;grid-row:6}
 .rhythm-practice:has(#dictStaff:not([hidden]))>#beatDots{display:none}
 .rhythm-practice:has(#dictStaff:not([hidden])) .dict-palette-row{gap:3px}
 .rhythm-practice:has(#dictStaff:not([hidden])) .dict-palette-row button{padding:2px 4px}
}

/* Use the same aligned transport column in every practice mode. */
/* Give dictation its own transport column, keeping writing tools together. */
@media(min-width:1000px){
 .rhythm-practice{display:grid;grid-template-columns:166px minmax(0,1fr);grid-template-rows:auto auto auto auto auto auto;gap:6px 14px;align-content:start}
 .rhythm-practice>#modebar{grid-column:1/-1;grid-row:1}
 .rhythm-practice>.rhythm-sound-header{grid-column:1/-1;grid-row:2}
 .rhythm-practice>.stage{display:contents}
 .rhythm-practice #phaseLabel{grid-column:2;grid-row:3}
 .rhythm-practice>#dictStaff{grid-column:2;grid-row:4;width:100%}
 .rhythm-practice .stage>.transport{grid-column:1;grid-row:3/7;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:10px;padding:12px 8px;margin:0;border-inline-end:1px solid var(--border);min-width:0}
 .rhythm-practice .stage>.transport .rhythm-meter-control{order:0}
 .rhythm-practice .stage>.transport .rhythm-circle{order:1}
 .rhythm-practice .stage>.transport .rhythm-tempo-control{order:2}
 .rhythm-practice .stage>.transport #playBtn{order:3;width:140px}
 .rhythm-practice .stage>.transport #newBtn{order:4;width:140px;font-size:12px;padding:7px}
 .rhythm-practice .stage>.transport #stopBtn{order:5}
 .rhythm-practice .stage>.transport #loopBtn{order:6}
 .rhythm-practice #dictArea{grid-column:2;grid-row:5;min-width:0}
 .rhythm-practice #feedback{grid-column:2;grid-row:6}
 .rhythm-practice>#beatDots{display:none}
 .rhythm-practice .dict-palette-row{gap:3px}
 .rhythm-practice .dict-palette-row button{padding:2px 4px}
}

@media(min-width:1000px){
 .rhythm-practice>.score-wrap{grid-column:2;grid-row:4;min-height:190px;height:190px;max-height:190px;flex:none;overflow:hidden;padding-top:40px;box-sizing:border-box}
 .rhythm-practice #tapArea{grid-column:2;grid-row:5;min-width:0}
 .rhythm-practice #analysis{grid-column:2;grid-row:7;margin-top:0}
 .rhythm-practice .stage>.transport{grid-row:3/8;align-self:stretch;gap:7px}
 .rhythm-practice{overflow:hidden;grid-template-rows:auto auto auto auto auto auto minmax(0,1fr)}
 .rhythm-practice .tappad{height:54px;margin:3px auto}
 .rhythm-practice .rhythm-sound-header{margin:0;min-height:0}
 .rhythm-practice .stage>.transport .rhythm-meter-control{align-items:center;text-align:center;width:100%}
 .rhythm-practice .stage>.transport .rhythm-tempo-control{align-items:center;text-align:center}
 .rhythm-practice .stage>.transport .rhythm-circle{margin:0 auto}
 .rhythm-practice #score svg{height:145px!important;min-width:0!important;width:100%!important}
 .rhythm-practice .analysis.show{padding-top:2px}
 .rhythm-practice .analysis .timing-svg{height:36px}
 .rhythm-practice .analysis .legend{font-size:10px;margin:0}
 .rhythm-practice .analysis h3{margin:0}
}
@media(min-width:1000px) and (max-height:750px){
 .rhythm-practice>.score-wrap{height:155px;min-height:155px;max-height:155px;padding-top:30px}
 .rhythm-practice #score svg{height:120px!important}
 .rhythm-practice .tappad{height:42px}
 .rhythm-practice .stage>.transport{padding:6px;gap:5px}
 .rhythm-practice .stage>.transport .rhythm-tempo-knob{width:48px;height:48px}
 .rhythm-practice .stage>.transport .rhythm-circle{width:80px;height:80px;min-width:80px;min-height:80px}
 .rhythm-practice .mode-hint{font-size:11px;line-height:1.3;margin:0}
}

/* Controls sit outside the notation, with one consistent transport alignment. */
.rhythm-rail .rhythm-notation-style,.rhythm-rail .rhythm-counting-control{position:static;transform:none;width:100%;max-width:none;text-align:start;display:flex;flex-direction:column;align-items:stretch;gap:4px;margin:0}
.rhythm-rail .rhythm-notation-style select,.rhythm-rail .rhythm-counting-control select{width:100%}
.score-wrap:has(.rhythm-counting-control){padding-inline-start:0}
@media(min-width:1000px){
 .rhythm-practice,.rhythm-practice:has(#dictStaff:not([hidden])){grid-template-columns:174px minmax(0,1fr);column-gap:16px}
 .rhythm-practice .stage>.transport,.rhythm-practice:has(#dictStaff:not([hidden])) .stage>.transport{box-sizing:border-box;padding:10px 12px;gap:12px;background:rgba(255,255,255,.025);border:1px solid var(--border);border-radius:14px;align-items:center}
 .rhythm-practice .stage>.transport>.rhythm-sound-group{order:-1;width:100%;display:flex;align-items:center;gap:6px;margin:0;padding-bottom:10px;border-bottom:1px solid var(--border)}
 .rhythm-practice .stage>.transport .rhythm-sound-group>.field{width:auto;min-width:0;flex:1;margin:0}
 .rhythm-practice .stage>.transport .rhythm-sound-group>.field>span{font-size:11px;white-space:nowrap}
 .rhythm-practice .stage>.transport .rhythm-sound-group select{width:100%;min-width:0;font-size:12px}
 .rhythm-practice .stage>.transport .rhythm-volume-knob{width:42px;height:42px;min-width:42px;flex:none}
 .rhythm-practice .stage>.transport .rhythm-meter-control{width:100%;max-width:100%;margin:0;align-items:center}
 .rhythm-practice .stage>.transport .rhythm-meter-control select{width:110px}
 .rhythm-practice .stage>.transport .rhythm-meter-control>span{min-height:18px;line-height:18px}
 .rhythm-practice .stage>.transport .rhythm-meter-control .rhythm-info{position:static!important;margin-inline-start:6px}
 .rhythm-practice .stage>.transport .rhythm-circle{width:76px;height:76px;min-height:76px;min-width:76px;margin:0 auto}
 .rhythm-practice .stage>.transport .metronome-circle{width:76px;height:76px}
 .rhythm-practice .stage>.transport .rhythm-tempo-control{margin:0;padding:0}
 .rhythm-practice .stage>.transport #playBtn,.rhythm-practice .stage>.transport #newBtn{width:100%;min-height:36px;margin:0}
 .rhythm-practice>.score-wrap{padding:8px!important;height:210px;min-height:210px;max-height:210px}
 .rhythm-practice #score svg{height:190px!important}
 .rhythm-workspace{grid-template-columns:minmax(0,1fr) 220px}
}
@media(min-width:1000px) and (max-height:750px){
 .rhythm-practice .stage>.transport,.rhythm-practice:has(#dictStaff:not([hidden])) .stage>.transport{gap:6px;padding:7px 10px}
 .rhythm-practice>.score-wrap{height:165px;min-height:165px;max-height:165px}
 .rhythm-practice #score svg{height:145px!important}
 .rhythm-practice .stage>.transport .rhythm-circle,.rhythm-practice .stage>.transport .metronome-circle{width:64px;height:64px;min-width:64px;min-height:64px}
 .rhythm-practice .stage>.transport .rhythm-tempo-knob{width:44px;height:44px}
}

/* Match both sound controls and center the transport on one axis. */
@media(min-width:1000px){
 .rhythm-sound-controls{gap:0}
 .rhythm-sound-group{box-sizing:border-box;display:grid!important;grid-template-columns:minmax(0,1fr) 48px;align-items:center;gap:10px!important;width:100%;max-width:100%;direction:ltr}
 .rhythm-sound-group>.field{grid-column:1;grid-row:1;min-width:0!important;width:100%!important;direction:rtl;text-align:center;align-items:stretch}
 html[lang=en] .rhythm-sound-group>.field{direction:ltr}
 .rhythm-sound-group>.rhythm-volume-knob{grid-column:2;grid-row:1;width:48px!important;height:48px!important;min-width:48px!important;margin:0}
 .rhythm-sound-group>.field>span{text-align:center;width:100%;font-size:12px!important;line-height:18px;white-space:nowrap}
 .rhythm-sound-group select{width:100%!important;height:32px;box-sizing:border-box}
 .rhythm-practice .stage>.transport .rhythm-sound-group{padding-bottom:10px}
 .rhythm-practice .stage>.transport .rhythm-meter-control{max-width:100%;width:100%;display:flex;align-items:center;margin:0}
 .rhythm-practice .stage>.transport .rhythm-meter-control>span{display:flex;justify-content:center;align-items:center;gap:6px}
 .rhythm-practice .stage>.transport .rhythm-meter-control>span>.rhythm-info{margin:0!important}
 .rhythm-practice .stage>.transport .rhythm-meter-control select{width:100%;height:32px}
 .rhythm-practice .stage>.transport .rhythm-tempo-control{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}
 .rhythm-practice .stage>.transport #playBtn,.rhythm-practice .stage>.transport #newBtn{width:100%;box-sizing:border-box;text-align:center}
}

.rhythm-practice .stage>.transport .rhythm-circle{display:grid;place-items:center;align-self:center;margin-inline:0!important}.rhythm-practice .rhythm-circle .measure-circle{margin:0!important;justify-self:center;align-self:center}.rhythm-practice .stage>.transport .rhythm-tempo-control{align-self:center}.rhythm-practice .stage>.transport .rhythm-tempo-control>.rhythm-tempo-knob{margin-inline:auto;align-self:center}

/* Match the engraving scale of the reading staff in dictation. */
#dictStaff .dict-staff-canvas svg,#dictStaff.dict-comparison .dict-staff-canvas svg,#dictStaff .dict-target svg{height:155px!important}#dictStaff,#dictStaff.dict-comparison{height:190px}#dictStaff.dict-comparison{grid-template-rows:20px 155px}

.rhythm-practice #score{height:100%;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}.rhythm-practice #score svg{height:100%!important;max-height:100%;width:100%!important;min-width:0!important}.rhythm-practice>.score-wrap{align-items:stretch}

/* Two notation rows each get the same space as a single staff. */
@media(min-width:1000px){.rhythm-practice>.score-wrap.rhythm-double-score{height:390px;min-height:390px;max-height:390px}.rhythm-practice:has(.rhythm-double-score){row-gap:3px}.rhythm-practice:has(.rhythm-double-score) .tappad{height:38px}.rhythm-practice:has(.rhythm-double-score) #analysis .timing-svg{height:28px}.rhythm-practice:has(.rhythm-double-score) #analysis h3{display:none}}
@media(min-width:1000px) and (max-height:750px){.rhythm-practice>.score-wrap.rhythm-double-score{height:310px;min-height:310px;max-height:310px}.rhythm-practice:has(.rhythm-double-score) .mode-hint{display:none}.rhythm-practice:has(.rhythm-double-score) #analysis .legend{display:none}.rhythm-practice:has(.rhythm-double-score) #metrics{margin:0;font-size:10px}.rhythm-practice:has(.rhythm-double-score) #metrics b{font-size:12px}}
@media(max-width:999px){.rhythm-practice>.score-wrap.rhythm-double-score{min-height:332px;height:332px}}

.rhythm-accelerando{font-style:italic;color:var(--text-main);padding:4px 8px;border:1px solid var(--border);border-radius:7px;text-decoration:none;white-space:nowrap}#calib{display:none}.field:has(>#calib){display:none!important}