:root{--site-canvas:#fff;--site-surface:#f8f9fd;--site-raised:#fff;--site-ink:#11182c;--site-muted:#46516c;--site-line:#e2e6f0;--site-accent:#5747cf;--site-soft:#f1efff;--site-on:#fff}
:root[data-creator-color-scheme=dark]{--site-canvas:#111318;--site-surface:#191d25;--site-raised:#20242e;--site-ink:#f2f4fa;--site-muted:#c0c7d5;--site-line:#363e4d;--site-accent:#c3baff;--site-soft:#2c2844;--site-on:#161b26}
:root[data-creator-palette=ocean]{--site-accent:#126484;--site-soft:#eaf4fa}:root[data-creator-palette=sand]{--site-accent:#855520;--site-soft:#f8f0e4}:root[data-creator-color-scheme=dark][data-creator-palette=ocean]{--site-accent:#a1d7ee;--site-soft:#1c3342}:root[data-creator-color-scheme=dark][data-creator-palette=sand]{--site-accent:#e6c699;--site-soft:#393022}
*{box-sizing:border-box}body{margin:0;height:100dvh;overflow:hidden;background:var(--site-canvas);color:var(--site-ink);font:16px/1.5 -apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif}button,select{font:inherit;color:var(--site-ink);background:var(--site-raised);border:1px solid var(--site-muted);border-radius:10px;min-height:44px;padding:8px 12px}button{cursor:pointer}button:focus-visible,select:focus-visible,.pad:focus-visible{outline:2px solid var(--site-accent);outline-offset:2px}.global{height:64px;background:var(--site-surface);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(28px,3vw,58px);max-width:1920px;margin:auto;border-bottom:1px solid var(--site-line)}.global span{font-size:14px}header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(28px,3vw,58px);max-width:1920px;margin:auto;border-bottom:1px solid var(--site-line)}header>div:first-child{display:flex;gap:16px;align-items:center}.badge{font-size:12px;color:var(--site-muted)}.head-actions{display:flex;gap:8px}.head-actions button{width:44px;padding:0;font-size:22px}
main{height:calc(100dvh - 120px);max-width:1204px;margin:auto;padding:16px 12px 24px;display:grid;grid-template-rows:52px 292px minmax(180px,1fr) 56px;gap:12px}.task{display:flex;align-items:center;justify-content:space-between;gap:16px}.task-top,.task-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}.choose{display:flex;align-items:center;justify-content:space-between;gap:16px}.meter{white-space:nowrap;color:var(--site-muted);font-size:14px}.task-bottom{font-size:14px;color:var(--site-muted);gap:24px}.card{border:1px solid var(--site-line);border-radius:16px;background:var(--site-raised)}.score{padding:16px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.score-heading{display:flex;justify-content:space-between;align-items:center;font-size:14px}.score-heading span{color:var(--site-muted)}#notation{height:160px;width:min(100%,720px);margin:auto;display:flex;align-items:center;justify-content:center}#notation svg{width:100%;height:100%;color:var(--site-ink)}.score p{margin:0;color:var(--site-muted);font-size:14px}.workspace{min-height:0;display:flex;flex-direction:column;gap:8px}.status{display:flex;justify-content:space-between;align-items:center;min-height:32px;font-size:14px}.status span{color:var(--site-muted)}.pad{flex:1;min-height:160px;background:var(--site-soft);border:1px solid var(--site-accent);border-radius:16px;display:flex;align-items:center;justify-content:center;flex-direction:column;color:var(--site-accent)}.beat{font-size:28px;line-height:1.2}.pad h1{font-size:28px;margin:8px 0}.pad p{margin:0 0 10px}.pad small{color:var(--site-muted);font-size:12px}footer{display:flex;gap:8px}footer button{flex:1}.primary{background:var(--site-accent);color:var(--site-on);border-color:var(--site-accent)}.feedback{flex:1;min-height:0;padding:16px;display:grid;grid-template-columns:320px 1fr;gap:24px;overflow:auto}.feedback[hidden],.pad[hidden]{display:none}.summary p{margin:8px 0}.metrics{display:flex;gap:18px;font-size:14px}.metrics b{font-size:22px;color:var(--site-accent);margin-left:4px}.evidence svg{width:100%;height:90px;color:var(--site-ink);font-size:12px}.rail{stroke:var(--site-muted);fill:none}.target{stroke:var(--site-accent);stroke-width:2}.dots{fill:var(--site-accent)}svg text{fill:currentColor}.advice{margin:6px 0;font-size:14px}small{color:var(--site-muted)}dialog{width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;border:1px solid var(--site-line);border-radius:16px;padding:20px;background:var(--site-raised);color:var(--site-ink)}dialog::backdrop{background:#0006}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}dialog label{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:12px 0}dialog select{max-width:240px;min-width:0}dialog .appearance{padding:16px;border:1px solid var(--site-line);border-radius:16px}.appearance h3{margin:0 0 14px;font-size:18px}.appearance select{width:55%}
@media(max-width:1100px) and (min-width:901px){.task-bottom{flex-direction:column;gap:0;align-items:flex-start}.task-top{gap:8px}header,.global{padding-inline:20px}}
@media(max-width:900px){.global{display:none}header{padding:0 12px}header>div:first-child{display:block}header strong{font-size:16px}.badge{display:block;font-size:11px;line-height:14px}main{height:calc(100dvh - 56px);padding:12px 12px calc(12px + env(safe-area-inset-bottom));grid-template-rows:104px 232px minmax(200px,1fr) 56px;gap:12px}.task{display:block}.task-top{height:56px;align-items:start;position:relative}.choose{height:44px;min-width:158px;font-size:14px;padding:8px}.meter{font-size:13px;padding-top:12px}.task-bottom{display:flex;align-items:center;justify-content:space-between;height:48px;gap:8px;font-size:12px}.task-bottom span:first-child{color:var(--site-accent)}.score{padding:12px 16px}#notation{height:120px;width:100%}.score-heading{font-size:14px}.score-heading span{font-size:12px}.score p{font-size:14px;line-height:24px}.status{height:40px;flex-shrink:0}.pad h1{font-size:26px}.pad p{font-size:16px}.pad small{font-size:12px}.feedback{display:block;padding:10px 12px}.summary>strong{font-size:14px}.summary p{font-size:13px;margin:2px 0}.metrics{gap:20px;font-size:13px}.metrics b{font-size:18px}.evidence svg{height:70px;display:block}.advice{font-size:14px;line-height:20px;margin:4px 0}.evidence small{font-size:12px;line-height:16px;display:block}}
@media(max-width:900px) and (max-height:780px){main{padding-top:8px;gap:8px;grid-template-rows:76px 176px minmax(200px,1fr) 56px}.task-top{height:44px}.task-bottom{height:32px;padding-top:8px;font-size:12px}.score-heading{min-height:24px}#notation{height:88px;flex:0 0 88px}.status{height:32px}.pad h1{font-size:24px}.pad p{margin-bottom:6px}.beat{font-size:24px}}

footer button:disabled{background:var(--site-surface);color:var(--site-muted);border-color:var(--site-line);cursor:not-allowed}
/* Runtime delta only: keep approved R2 geometry and theme tokens. */
.rhythm-page{padding:0!important}.rhythm-page main{width:100%;min-height:0}.rhythm-page>.site-header{height:56px;display:flex;gap:12px;flex-shrink:0}.rhythm-page>.global-site-header{height:64px;box-sizing:border-box}.rhythm-page .global-account{flex-shrink:0}.rhythm-page .global-site-nav{margin:0}.rhythm-page .choose{max-width:390px}.rhythm-page .site-header>div{margin-right:auto}.sr-only{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}.pad{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer}.pad.tapped{box-shadow:inset 0 0 0 3px var(--site-accent)}.compact{font-size:12px;min-height:32px;padding:4px 8px;margin-top:4px}.feedback{gap:16px}.feedback .summary>strong{display:block}.feedback .advice{margin:3px 0}.feedback .evidence small{display:block;font-size:12px}.feedback .evidence svg{height:66px}.feedback .summary p{margin:2px 0}#notation [data-active=true]{color:var(--site-accent);filter:drop-shadow(0 0 .2px currentColor)}#notation svg{overflow:visible}#pad:focus-visible{outline-offset:-4px}dialog{font-size:14px}dialog .dialog-head{height:auto;min-height:44px;padding:0}dialog input{width:100px;min-height:44px;color:var(--site-ink);background:var(--site-raised);border:1px solid var(--site-muted);border-radius:8px;padding:8px}dialog input[type=range]{width:160px}dialog table{width:100%;border-collapse:collapse;font-size:13px}dialog th,dialog td{text-align:left;padding:6px;border-bottom:1px solid var(--site-line)}dialog p{line-height:1.6}dialog[open]{z-index:200}.training-mode-menu{z-index:90}.rhythm-page button:disabled,.rhythm-page select:disabled{cursor:not-allowed}.rhythm-page .training-mode-settings:disabled{cursor:not-allowed}
@media(max-width:900px){.rhythm-page>.global-site-header,.rhythm-page>.global-site-nav{display:none!important}.rhythm-page main{height:calc(100dvh - 56px)}.rhythm-page .choose{max-width:205px;min-width:0;width:205px;font-size:13px}.task-top{gap:8px}.meter{font-size:12px}.feedback{position:relative;padding:8px 12px}.feedback #history-open{position:absolute;right:12px;top:6px}.feedback .summary>strong{padding-right:90px}.feedback .evidence svg{height:58px}.feedback #details-open{margin-top:2px}.feedback .metrics{gap:18px}.feedback .evidence small{line-height:16px}.pad h1{max-width:100%;text-align:center}.rhythm-page .training-mode-trigger{margin-left:0}.rhythm-page .global-account{margin-left:0}.badge{font-size:12px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.rhythm-page>.site-header{width:100%}

.rhythm-page .compact{min-height:44px}
@media(max-width:900px){.feedback .evidence svg{height:48px}}

/* Match the accepted training headers on desktop; no mobile/body geometry change. */
@media(min-width:901px){.rhythm-page>.global-site-header,.rhythm-page>.site-header{width:100%;max-width:1920px;margin-inline:auto;padding-inline:clamp(28px,3vw,58px)}}
@media(min-width:901px) and (max-width:1050px){.rhythm-page>.global-site-header,.rhythm-page>.site-header{padding-inline:20px}}

/* P0 feedback: readable evidence takes priority over a fixed one-screen result. */
body.rhythm-page[data-state=feedback]{height:auto;min-height:100dvh;overflow-y:auto}
.rhythm-page[data-state=feedback] main{height:auto;min-height:calc(100dvh - 120px);grid-template-rows:52px 180px auto 56px}
.rhythm-page[data-state=feedback] #notation{height:90px;flex:0 0 90px}
.rhythm-page[data-state=feedback] .feedback{overflow:visible;min-height:250px;align-items:start}
.chart-open{display:block;width:100%;padding:8px;border:1px solid var(--site-line);background:var(--site-surface);text-align:left}
#evidence-chart{display:block;width:100%}
.feedback .evidence #track{display:block;width:100%;height:132px}
.chart-legend{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--site-muted)}
.chart-legend span{white-space:nowrap}
#chart-dialog{width:min(900px,calc(100vw - 24px))}
.expanded-chart{overflow-x:auto;padding:8px 0}
#track-expanded{display:block;height:200px;max-width:none}
@media(max-width:900px){
 .rhythm-page[data-state=feedback] main{min-height:calc(100dvh - 56px);grid-template-rows:76px 160px auto 56px}
 .rhythm-page[data-state=feedback] .feedback{padding:12px;min-height:0}
 .rhythm-page[data-state=feedback] .summary{padding-bottom:12px}
 .rhythm-page[data-state=feedback] .score p{font-size:12px;line-height:18px}
 .rhythm-page[data-state=feedback] .score{padding:10px 16px}
 .rhythm-page[data-state=feedback] .score-heading span{display:none}
 .rhythm-page[data-state=feedback] footer{margin-top:4px}
}

/* P1 level and phrase controls; preserve P0 feedback and theme. */
.task{display:flex;flex-direction:column;align-items:stretch;justify-content:start;gap:6px}
.task-top{display:grid;grid-template-columns:minmax(140px,.8fr) minmax(0,1.2fr);gap:8px;height:auto}
.rhythm-page .choose,#level{width:100%;max-width:none;min-width:0;font-size:14px;height:44px;padding:8px}
.objective{font-size:13px;line-height:20px;margin:0;color:var(--site-ink)}
.task-bottom{height:auto;min-height:20px;padding:0;font-size:12px;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:8px}
.task-bottom .meter{padding:0;font-size:12px}
.rhythm-page main{grid-template-rows:108px minmax(170px,230px) minmax(180px,1fr) 56px}
.rhythm-page[data-state=feedback] main{grid-template-rows:108px 170px auto 56px}
@media(max-width:900px){.rhythm-page main{grid-template-rows:108px 196px minmax(180px,1fr) 56px}.task-bottom{height:auto}.rhythm-page[data-state=feedback] main{grid-template-rows:108px 160px auto 56px}}
@media(max-height:780px){.rhythm-page main{grid-template-rows:108px 160px minmax(180px,1fr) 56px;gap:8px}}
@media(min-width:901px){.task-top{max-width:720px}.task{position:relative;padding-right:270px}.task-bottom{position:absolute;right:0;top:0;display:flex;flex-direction:column;align-items:flex-end}.rhythm-page[data-state=feedback] main{grid-template-rows:108px 170px auto 56px}}

@media(max-width:900px) and (max-height:780px){.rhythm-page .score p{font-size:12px;line-height:18px}.rhythm-page #notation{height:76px;flex:0 0 76px}.rhythm-page[data-state=feedback] #notation{height:76px;flex:0 0 76px}}
/* Single-screen training contract: content switches, page never scrolls. */
html{height:100%;overflow:hidden}
body.rhythm-page,body.rhythm-page[data-state=feedback]{height:100dvh;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.rhythm-page main,.rhythm-page[data-state=feedback] main{flex:1;height:auto;min-height:0;width:100%;padding:10px 12px max(10px,env(safe-area-inset-bottom));grid-template-rows:90px minmax(110px,.65fr) minmax(180px,1fr) 48px;gap:8px;overflow:hidden}
.rhythm-page .task{gap:4px;padding-right:0}.rhythm-page .task-top{max-width:none}.rhythm-page .task-bottom{position:static;flex-direction:row;align-items:center}.rhythm-page .objective{font-size:12px;line-height:18px}.rhythm-page .score{padding:8px 12px;min-height:0}.rhythm-page #notation,.rhythm-page[data-state=feedback] #notation{flex:1;min-height:0;height:auto;max-height:150px}.rhythm-page .score p{font-size:12px;line-height:18px}.rhythm-page .score-heading{font-size:13px}.rhythm-page .workspace{gap:5px;min-height:0}.rhythm-page .status{height:26px;min-height:26px;font-size:12px}.rhythm-page .pad{min-height:0;padding:8px;text-align:center}.rhythm-page .pad h1{font-size:clamp(20px,2.2vw,28px);margin:3px 0}.rhythm-page .pad p{font-size:13px;margin:2px 0}.rhythm-page .pad small{font-size:12px}.input-controls{display:flex;align-items:center;gap:8px;font-size:13px}.input-controls select{height:44px;padding:6px;min-width:0;flex:1}.input-controls meter{width:70px}.rhythm-page[data-state=feedback] .task,.rhythm-page[data-state=feedback] .score,.rhythm-page[data-state=feedback] .input-controls{display:none}.rhythm-page[data-state=feedback] main{grid-template-rows:minmax(0,1fr) 48px}.rhythm-page[data-state=feedback] .feedback{overflow:hidden;min-height:0;display:flex;flex-direction:column;padding:12px;gap:12px}.rhythm-page[data-state=feedback] .summary{padding:0;position:relative}.rhythm-page[data-state=feedback] .evidence{min-height:0;flex:1;display:flex;flex-direction:column;justify-content:center}.rhythm-page .feedback .evidence #track{height:clamp(100px,23dvh,190px)}.rhythm-page .feedback .advice{font-size:14px}.rhythm-page #history-open{position:absolute;right:0;top:0}.rhythm-page #details-open{align-self:start}.rhythm-page[data-state=feedback] footer{margin:0}.rhythm-page footer button{min-height:44px}
dialog{max-height:calc(100dvh - 20px);overflow:hidden;padding:12px}dialog .dialog-head{margin-bottom:8px}.dialog-pager{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:8px}.dialog-page[hidden]{display:none}.dialog-page>p{font-size:13px;line-height:1.5;margin:8px 0}.dialog-page .appearance{padding:8px}.expanded-chart{overflow:hidden}.expanded-chart #track-expanded{max-width:100%;width:100%;height:clamp(100px,32dvh,220px)}
@media(min-width:901px){.rhythm-page main{max-width:1204px;grid-template-rows:90px minmax(120px,.6fr) minmax(180px,1fr) 48px}.rhythm-page[data-state=feedback] .feedback{display:grid;grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr);align-items:center}.rhythm-page[data-state=feedback] .summary>strong{padding-right:0}.rhythm-page #history-open{position:static}}
@media(max-height:650px){.rhythm-page main{grid-template-rows:74px 96px minmax(130px,1fr) 44px;padding-block:6px;gap:4px}.rhythm-page .objective{display:none}.rhythm-page .score-heading span,.rhythm-page .pad small{display:none}.rhythm-page .input-controls select{min-height:44px}.rhythm-page .status{min-height:20px;height:20px}.rhythm-page .beat{font-size:20px}.rhythm-page .feedback .evidence #track{height:110px}}
@media(max-height:500px) and (min-width:500px){.rhythm-page main{grid-template-columns:1fr 1fr;grid-template-rows:74px minmax(0,1fr) 44px}.rhythm-page .task{grid-column:1 / -1}.rhythm-page .score{grid-column:1;grid-row:2}.rhythm-page .workspace{grid-column:2;grid-row:2}.rhythm-page footer{grid-column:1 / -1}.rhythm-page[data-state=feedback] main{display:flex;flex-direction:column}.rhythm-page[data-state=feedback] .workspace{flex:1}.rhythm-page[data-state=feedback] .feedback{display:grid;grid-template-columns:1fr 1fr;gap:8px}.rhythm-page[data-state=feedback] footer{height:44px;flex:none}}
/* Feedback has two rows at every breakpoint, including short desktop windows. */
.rhythm-page[data-state=feedback] main{grid-template-rows:minmax(0,1fr) 48px}
.rhythm-page>.global-site-header{flex:none}
@media(min-width:901px) and (max-height:650px){.rhythm-page[data-state=feedback] .feedback{padding:8px}.rhythm-page .feedback .evidence #track{height:110px}}
@media(max-height:500px){dialog .training-appearance{padding:8px;margin-bottom:8px}dialog .training-appearance h3{font-size:14px;margin:0}dialog .training-appearance label{margin:6px 0;font-size:14px}dialog .training-settings-footer{padding:4px 0}}

@media(max-height:430px) and (min-width:500px){.rhythm-page .pad{flex-direction:row;gap:8px}.rhythm-page .pad p{display:none}.rhythm-page .pad h1{font-size:18px}.rhythm-page[data-state=feedback] .chart-open #evidence-chart,.rhythm-page[data-state=feedback] .chart-legend{display:none}.rhythm-page[data-state=feedback] .chart-open::before{content:'查看目标与实敲大图';font-size:14px}.rhythm-page[data-state=feedback] .evidence .advice,.rhythm-page[data-state=feedback] #relative{display:none}.rhythm-page[data-state=feedback] .feedback{padding:6px}.rhythm-page[data-state=feedback] .evidence{gap:8px}.rhythm-page[data-state=feedback] #history-open{position:static}.rhythm-page[data-state=feedback] .summary>strong{padding-right:0}}
@media(max-height:430px) and (min-width:500px){.rhythm-page[data-state=interrupted] .pad{padding:4px}.rhythm-page[data-state=interrupted] .pad h1,.rhythm-page[data-state=interrupted] .pad .beat{display:none}.rhythm-page[data-state=interrupted] .pad p{display:block;font-size:12px;line-height:16px}}

/* Guide overlays stay inside notation and never affect layout. */
.approach-guide {pointer-events:none;color:var(--site-accent)}
.approach-guide circle {fill:none;stroke:currentColor;vector-effect:non-scaling-stroke}
.approach-guide .target {stroke-width:1;stroke-dasharray:2 2;opacity:.65}
.approach-guide .approach {stroke-width:2}

.workspace{position:relative}
.judgment{position:absolute;z-index:3;inset:55px 8px auto;pointer-events:none;text-align:center;filter:drop-shadow(0 2px 8px var(--site-bg));}
.judgment strong{display:block;font-size:clamp(28px,4vw,46px);line-height:1.05;font-weight:900;font-style:italic;letter-spacing:-.035em;color:var(--site-accent)}
.judgment span{display:block;font-size:14px;font-weight:700;margin-top:4px;color:var(--site-text)}
.judgment[data-grade="Bad"] strong,.judgment[data-grade="Miss"] strong{color:var(--site-text)}
.game-summary{font-size:12px;line-height:1.5;margin:4px 0;overflow-wrap:anywhere}
@media(max-height:420px){.judgment{inset:12px 8px auto}.judgment strong{font-size:28px}}

.pad{position:relative}
#wake-status{position:absolute;bottom:8px;left:12px;right:12px;text-align:center;color:var(--site-muted);font-size:11px;line-height:1.25;pointer-events:none}
#wake-status:empty{display:none}
.pad .judgment{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.pad .judgment[hidden]{display:none}
.pad.feedback-active>#beat,.pad.feedback-active>#pad-title,.pad.feedback-active>#pad-help,.pad.feedback-active>#pad-note{visibility:hidden}

.echo-choice-actions{display:grid;gap:12px}.echo-choice-actions button{min-height:48px;white-space:normal}#echo-choice{max-width:440px}#echo-choice-detail{line-height:1.6}

/* Compiled LilyPond systems share one scrollable score viewport. */
.rhythm-page .score-heading{gap:8px}.rhythm-page .score-heading>span{white-space:nowrap}.score-nav{display:flex;gap:4px}.score-nav[hidden]{display:none}.score-nav button{min-height:44px;padding:3px 7px;font-size:12px}
@media(max-width:430px){.score-nav button{font-size:11px;padding:2px 5px}.rhythm-page .score-heading{font-size:12px}}
.rhythm-page #notation.advanced-score{display:block;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;align-items:initial;justify-content:initial;touch-action:pan-x pan-y;position:relative}
.rhythm-page #notation.advanced-score svg{display:block;width:100%;min-width:560px;height:auto;overflow:visible;color:var(--site-ink)}
.rhythm-page #notation.advanced-score [data-active=true]{color:var(--site-accent)}
.rhythm-page #notation.advanced-score [data-active=true] path,.rhythm-page #notation.advanced-score [data-active=true] ellipse{fill:var(--site-accent);stroke:var(--site-accent)}
.score-nav button[hidden]{display:none}
#notation.file-open-help{display:flex;flex-direction:column;gap:12px;text-align:center;line-height:1.6;color:var(--site-ink)}
#notation.file-open-help p{max-width:42em;margin:0}
#notation.file-open-help a{color:var(--site-accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){
 body.rhythm-page.long-score:not([data-state=feedback]) main{grid-template-rows:90px clamp(205px,calc(100dvh - 470px),260px) minmax(150px,1fr) 48px}
 .rhythm-page.long-score #notation{max-height:none}
 .rhythm-page #notation.advanced-score.mobile-score{overflow-x:hidden}
 .rhythm-page #notation.advanced-score.mobile-score svg{width:100%;min-width:0;height:auto}
}

.rhythm-page .site-header .deep-entry{flex:none;color:var(--site-accent);font-size:13px;font-weight:750;text-decoration:none;border:1px solid var(--site-accent);border-radius:9px;padding:7px 10px;white-space:nowrap}.rhythm-page .site-header .deep-entry:focus-visible{outline:2px solid var(--site-accent);outline-offset:3px}
@media(max-width:600px){.rhythm-page .site-header .badge{display:none}.rhythm-page .site-header .deep-entry{font-size:12px;padding:6px 8px}}

/* Keep the advanced entry beside the score heading, outside the branded header. */
.rhythm-page .score-heading .deep-entry{position:relative;min-height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0 9px;color:var(--site-accent);font-size:12px;font-weight:750;text-decoration:none;border:1px solid var(--site-line);border-radius:9px;white-space:nowrap}
.rhythm-page .score-heading .deep-entry::before{content:"";position:absolute;inset:-6px 0}
.rhythm-page .score-heading .deep-entry:focus-visible{outline:2px solid var(--site-accent);outline-offset:2px}
.rhythm-page .score-heading{min-height:32px;gap:8px}
.rhythm-page .score-heading>strong{min-width:0}

@media(max-height:650px) and (max-width:499px){.rhythm-page:not([data-state=feedback]) main{grid-template-rows:74px 200px minmax(130px,1fr) 44px}}