@font-face{font-family:L10N-JP;src:url('/locale-fonts/ja.woff2');font-weight:100 900;font-display:block}
@font-face{font-family:L10N-TC;src:url('/locale-fonts/zh-tw.woff2');font-weight:100 900;font-display:block}
@font-face{font-family:L10N-SC;src:url('/locale-fonts/zh-cn.woff2');font-weight:100 900;font-display:block}
@font-face{font-family:L10N-KR;src:url('/locale-fonts/ko.woff2');font-weight:100 900;font-display:block}
[data-locale=ja]{--local-font:L10N-JP}[data-locale=zh-tw]{--local-font:L10N-TC}[data-locale=zh-cn]{--local-font:L10N-SC}[data-locale=ko]{--local-font:L10N-KR}
html:not([lang=en]) body.timer-page{--font-display:Poppins,var(--local-font),sans-serif;--font-text:'DM Sans',var(--local-font),sans-serif}
html:not([lang=en]) :is(.tile-label,.division-label,.setup-sentence,.primary-button,.secondary-button,.mode-tabs button,.status-message){letter-spacing:0;text-transform:none}
html:not([lang=en]) body.timer-page .setup-sentence{font-family:var(--font-text);font-size:16px;line-height:1.5}
html:not([lang=en]) .sentence-line{gap:0;white-space:normal;line-height:1.5}
html:not([lang=en]) .sentence-value{min-width:44px}
body.timer-page :is(#tempo-down,#tempo-up,#practice-down,#practice-up){color:var(--accent);border-color:var(--accent)}
html[data-locale=ja] .status-message{max-width:min(260px,100%);width:max-content}html[data-locale=ko] .status-message{max-width:min(284px,100%);width:max-content}
.language-opener{display:grid;place-items:center;justify-content:end;flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:none;color:var(--accent)}
.language-opener img{width:36px;height:36px}.language-opener[aria-disabled=true]{opacity:.5}.language-opener:focus-visible{outline:none}
html[data-focus-modality=keyboard] .language-opener:focus-visible img{outline:2px solid var(--accent);outline-offset:-2px;border-radius:50%}
.quick-navigation{position:relative}.quick-navigation>.language-opener{position:absolute;right:calc(100% + 8px);top:0}
body.timer-page #practice-setup .practice-header h2{margin-right:auto}
@media(orientation:landscape){
 body.timer-page #practice-setup .mode-tabs{width:min(100%,300px);justify-self:end}
 body.timer-page #practice-setup .practice-header{gap:8px;padding-right:16px}
 html:not([lang=en]) body.timer-page .setup-sentence{font-size:17px}
}
@media(orientation:landscape) and (max-width:700px){
 .quick-navigation>.language-opener{right:calc(100% + 4px)}
 body.timer-page #practice-setup .practice-header{gap:4px;padding-right:8px}
 body.timer-page #practice-setup .mode-tabs{width:min(100%,192px)}
 html:not([lang=en]) body.timer-page .setup-sentence{font-size:12px}
}
@media(orientation:portrait) and (max-height:640px){.quick-navigation>.language-opener{right:100%}html:not([lang=en]) body.timer-page .setup-sentence{font-size:12px}}

body.timer-page #practice-help{margin-left:0}
html:not([lang=en]) .practice-header h2{letter-spacing:0}
html:not([lang=en]) body:not(.timer-page){font-family:'DM Sans',var(--local-font),sans-serif}

body.locale-utility{height:auto;overflow:auto;background:#f3f0e7}
.locale-utility #hg-product{font-family:HG-DM,var(--local-font),sans-serif}
.locale-utility #hg-product :is(h1,h2,h3){font-family:HG-Poppins,var(--local-font),sans-serif;letter-spacing:0}
.locale-utility #hg-product p+p{margin-top:16px}
.locale-utility .hg-navigation p{font-size:13px;line-height:1.6;margin:16px 0 4px}
.utility-languages{display:flex;flex-wrap:wrap;gap:8px 20px;width:100%;padding-top:12px}
.utility-languages a[aria-current]{font-weight:700;text-decoration:underline}
.locale-utility #hg-product .hg-section p{max-width:68ch}

#locale-initial-error:not([hidden]){position:fixed;z-index:99;inset:20% 12px auto;background:#123529;color:#f4f3dc;border:1px solid #e5b74e;border-radius:16px;padding:24px;font:16px/1.6 var(--font-text)}
#locale-initial-error a{color:#e5b74e}

#hg-product .locale-learning-notice{font-family:HG-DM,var(--local-font),sans-serif;border-left:3px solid #7b8b72;padding:12px 16px;margin-bottom:24px;background:#e8ebdf}

/* Accepted staging-repair companion: the shared setup-pane owns viewport/surface. */
.language-dialog.setup-pane{--pane-status-clearance:52px;--language-choice-height:52px;color:var(--text-primary);font:400 14px/1.4 var(--font-text)}
.language-dialog .language-frame{grid-template-rows:44px minmax(0,1fr) 44px;padding-bottom:calc(var(--pane-status-clearance) + env(safe-area-inset-bottom))}
.language-dialog .language-body{display:grid;align-content:center;align-self:stretch;gap:16px}
.language-dialog .language-note{margin:0;font:400 13px/1.5 var(--font-text);color:#dcece1}
.language-dialog .language-choices{margin:0;padding:0;border:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-width:0}
.language-dialog .language-choice{position:relative;display:flex;align-items:center;justify-content:center;height:var(--language-choice-height);min-height:44px;min-width:44px;border:1px solid var(--selector-border);border-radius:15px;padding:2px 24px 2px 8px;box-sizing:border-box;font:500 14px/20px 'DM Sans',var(--local-font),sans-serif;text-align:center;color:var(--text-primary);cursor:pointer}
.language-choice[data-locale=ja]{--local-font:L10N-JP}.language-choice[data-locale=zh-tw]{--local-font:L10N-TC}.language-choice[data-locale=zh-cn]{--local-font:L10N-SC}.language-choice[data-locale=ko]{--local-font:L10N-KR}
.language-choice[data-locale=en]{--local-font:'DM Sans'}
.language-dialog .language-choice:has(:checked){border-color:var(--accent);background:#294b38;color:var(--accent)}
.language-dialog .language-choice input{position:absolute;width:1px;height:1px;opacity:0}
.language-dialog .language-choice:has(input:focus-visible){box-shadow:inset 0 0 0 2px var(--text-primary)}
.language-check{position:absolute;right:8px;top:50%;transform:translateY(-50%);font:600 14px 'DM Sans';visibility:hidden}
.language-choice:has(:checked) .language-check{visibility:visible}
.language-dialog .language-actions{display:flex;justify-content:flex-end;gap:8px;height:44px;min-width:0;margin:0;padding:0}
.language-actions button{height:44px;min-height:44px;min-width:88px;padding:0 14px;border:1px solid var(--selector-border);border-radius:12px;background:none;color:var(--text-primary);font:600 14px/1.4 var(--font-text)}
.language-actions .language-apply{background:var(--accent);color:#123529;border-color:var(--accent)}
.language-actions button:focus-visible{outline:2px solid var(--text-primary);outline-offset:-3px}
.language-dialog .language-status-lane{bottom:calc(6px + env(safe-area-inset-bottom));left:18px;right:18px;width:auto;transform:none;min-height:40px;display:grid;place-items:center}
.language-status{max-width:100%;margin:0;padding:4px 10px;box-sizing:border-box;border:1px solid #b9d9c43d;border-radius:8px;background:#071b14;color:#e7efe9;font:500 12px/16px var(--font-text);text-align:center;overflow-wrap:anywhere}
.language-status:empty{visibility:hidden}
/* Spend the narrow pane's horizontal space on its longest status. Keep the
   accepted action row and permanent 52px reservation unchanged. */
@media(orientation:portrait) and (max-width:350px){.language-dialog .language-status{width:calc(100% + 20px);max-width:calc(100% + 20px)}}
html:not([lang=en]) .language-dialog .setup-pane-header h2{letter-spacing:0;text-transform:none;line-height:1.4}
@media(orientation:portrait){.language-dialog .language-frame{grid-template-rows:44px auto 44px}.language-dialog .language-choices{grid-template-columns:1fr}}
@media(orientation:portrait) and (max-height:640px){.language-dialog.setup-pane{--language-choice-height:48px}.language-dialog .language-body{gap:8px}.language-dialog .language-choices{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(orientation:landscape) and (min-height:600px){.language-dialog .language-frame{grid-template-rows:44px auto 44px}.language-dialog.setup-pane{--language-choice-height:60px}.language-dialog .language-status-lane{left:50%;right:auto;width:min(620px,calc(100% - 64px));transform:translateX(-50%)}}
@media(orientation:landscape) and (max-height:340px){.language-dialog.setup-pane{--language-choice-height:44px;--pane-status-clearance:44px}.language-dialog .language-body{gap:4px}.language-dialog .language-choices{gap:5px}.language-dialog .language-status-lane{min-height:28px}.language-status{line-height:14px}}
@media(orientation:landscape) and (max-width:699px){.language-dialog .language-choices{gap:4px}.language-dialog .language-status-lane{left:14px;right:14px}}
/* Scope type and baseline overrides to the localized renderer, outranking English ID rules. */
html:not([lang=en]) body.timer-page #practice-sentence{font-family:var(--font-text);font-size:16px;line-height:1.5}
/* The 44px value controls own the inline baseline. A zero-height text strut
   prevents differing font metrics from adding a second line-box descent. */
html:not([lang=en]) body.timer-page #practice-sentence .sentence-line{display:block;text-align:center;white-space:nowrap;line-height:0;min-height:44px;margin:0;gap:0}
html:not([lang=en]) body.timer-page #practice-sentence .sentence-value{display:inline-block;vertical-align:baseline;height:44px;line-height:44px;min-width:44px;margin-inline:0;padding:0 2px;font-size:inherit;font-family:var(--font-display);color:var(--accent)}
html:not([lang=en]) body.timer-page #practice-sentence .sentence-duration{display:inline;min-width:0}
html:not([lang=en]) body.timer-page #practice-sentence .duration-unit{display:inline-block;min-width:44px;vertical-align:baseline;line-height:44px}
@media(orientation:landscape){html:not([lang=en]) body.timer-page #practice-sentence{font-size:17px}}
@media(orientation:landscape) and (max-width:700px),(orientation:portrait) and (max-height:640px){html:not([lang=en]) body.timer-page #practice-sentence{font-size:12px}}
/* The sentence can spend the field's side padding on long approved phrases.
   It stays centred inside that field; type and every hit target keep their size. */
@media(orientation:landscape) and (max-height:300px){html:not([lang=en]) body.timer-page #practice-sentence{width:calc(100% + 2 * var(--composition-pad));justify-self:center}}
[data-status-enlarged=true] .language-dialog .language-frame{position:relative;left:auto;top:auto;transform:none;width:100%;height:auto;max-height:none;display:flex;flex-direction:column;gap:16px;padding:14px 18px 12px}
[data-status-enlarged=true] .language-dialog .language-body{min-height:auto}
[data-status-enlarged=true] .language-dialog .language-note{font-size:26px}
[data-status-enlarged=true] .language-dialog .language-choices{grid-template-columns:1fr;gap:8px}
[data-status-enlarged=true] .language-dialog .language-choice{height:auto;min-height:64px;font-size:28px;line-height:1.4;padding:8px 32px 8px 12px}
[data-status-enlarged=true] .language-dialog .language-actions{height:auto;flex-wrap:wrap}
[data-status-enlarged=true] .language-dialog .language-actions button{height:auto;font-size:28px;padding:8px 12px}
[data-status-enlarged=true] .language-dialog .language-status-lane{position:static;left:auto;right:auto;width:auto;transform:none;padding:8px 18px;min-height:0}
[data-status-enlarged=true] .language-dialog .language-status{font-size:24px;line-height:1.4}

/* Owner-accepted typography R1 / plan R5. Static density rules only: no font
   fitting, controller work or new resources during playback. Sentence flow,
   constrained variants and unshown stacked/auxiliary values stay untouched. */
@media(orientation:landscape),(orientation:portrait) and (max-height:640px) {
html:is([data-locale=ja],[data-locale=zh-tw],[data-locale=zh-cn],[data-locale=ko]) body.timer-page {
 --local-heading-size:.875rem; --local-tab-size:.875rem;
 --local-tile-label-size:.8125rem; --local-tile-value-size:1rem;
 --local-caption-size:.8125rem; --local-pane-note-size:1rem;
 --local-practice-title-width:22px;
}
html[data-locale=ko] body.timer-page { --local-practice-title-width:20.25px; }
html:is([data-locale=ja],[data-locale=zh-tw],[data-locale=zh-cn],[data-locale=ko]) body.timer-page :is(.topbar h1,.topbar h2) { font-size:var(--local-heading-size); letter-spacing:0; }
/* The existing intrinsic header column must not grow with its text. Preserve
   its accepted advance while larger glyphs use the available header space. */
html:is([data-locale=ja],[data-locale=zh-tw],[data-locale=zh-cn],[data-locale=ko]) body.timer-page #practice-setup .practice-header h2 { width:var(--local-practice-title-width); flex:none; font-size:var(--local-heading-size); letter-spacing:0; }
html:is([data-locale=ja],[data-locale=zh-tw],[data-locale=zh-cn],[data-locale=ko]) body.timer-page #practice-setup .mode-tabs button { font-size:var(--local-tab-size); letter-spacing:0; white-space:nowrap; }
html:is([data-locale=ja],[data-locale=zh-tw],[data-locale=zh-cn],[data-locale=ko]) body.timer-page :is(.quick-tiles,#practice-rhythm-tiles) > .tile:not([data-auxiliary=true]):not([data-label-lines="2"]) > .tile-label { font-size:var(--local-tile-label-size); letter-spacing:0; }
html:is([data-locale=ja],[data-locale=zh-tw],[data-locale=zh-cn],[data-locale=ko]) body.timer-page :is(#click-mode-button,#practice-click-mode):is([aria-label^="拍の分割：拍ごと、"],[aria-label^="拍內細分：每拍，"],[aria-label^="拍内细分：每拍，"],[aria-label^="박 나누기: 매 박,"]) > .division-label:is([data-size-tier=regular],[data-size-tier=phrase]) { font-size:var(--local-tile-value-size); letter-spacing:0; }
html:is([data-locale=ja],[data-locale=zh-tw],[data-locale=zh-cn],[data-locale=ko]) body.timer-page :is(#quick-sound-button,#practice-sound-button):is([aria-label="音色：クリア"],[aria-label="音色：清晰"],[aria-label="소리: 선명"]) > .tile-value:not([data-density=micro]) { font-size:var(--local-tile-value-size); letter-spacing:0; }
html:is([data-locale=ja],[data-locale=zh-tw],[data-locale=zh-cn],[data-locale=ko]) body.timer-page :is(#tempo-name,.ruler-caption,.practice-metric .caption) { font-size:var(--local-caption-size); letter-spacing:0; }
html:is([data-locale=ja],[data-locale=zh-tw],[data-locale=zh-cn],[data-locale=ko]) body.timer-page :is(#start-button,#start-practice,#practice-pause,#practice-stop,#practice-restart) { font-size:1rem; letter-spacing:0; }
html:is([data-locale=zh-tw],[data-locale=zh-cn],[data-locale=ko]) body.timer-page #practice-edit { font-size:1rem; letter-spacing:0; }
html:is([data-locale=ja],[data-locale=zh-tw],[data-locale=zh-cn],[data-locale=ko]) body.timer-page:not([data-status-enlarged=true]) .setup-pane-header h2 { font-size:.875rem; letter-spacing:0; }
html:is([data-locale=ja],[data-locale=zh-tw],[data-locale=zh-cn],[data-locale=ko]) body.timer-page:not([data-status-enlarged=true]) .language-dialog .language-choice { font-size:1rem; }
@media(orientation:portrait) and (min-width:350px) and (max-height:640px) {
 html:is([data-locale=ja],[data-locale=zh-tw],[data-locale=zh-cn],[data-locale=ko]) body.timer-page:not([data-status-enlarged=true]) .language-choice[data-locale=zh-tw] .language-autonym { white-space:nowrap; }
}
html:is([data-locale=ja],[data-locale=zh-tw],[data-locale=zh-cn],[data-locale=ko]) body.timer-page:not([data-status-enlarged=true]) .language-dialog .language-note { font-size:var(--local-pane-note-size); line-height:19.5px; height:19.5px; }
html:is([data-locale=ja],[data-locale=zh-tw],[data-locale=zh-cn],[data-locale=ko]) body.timer-page:not([data-status-enlarged=true]) .language-actions .language-apply,
html:is([data-locale=zh-tw],[data-locale=zh-cn],[data-locale=ko]) body.timer-page:not([data-status-enlarged=true]) .language-actions .language-cancel { font-size:1rem; }
html:is([data-locale=ja],[data-locale=zh-tw],[data-locale=zh-cn],[data-locale=ko]) body.timer-page:not([data-status-enlarged=true]) .setup-pane .sound-preview { font-size:1rem; }
html:is([data-locale=ja],[data-locale=zh-tw],[data-locale=zh-cn],[data-locale=ko]) body.timer-page:not([data-status-enlarged=true]) .setup-pane .swing-controls button { font-size:var(--local-pane-note-size); letter-spacing:0; white-space:nowrap; }
html:is([data-locale=ja],[data-locale=zh-tw],[data-locale=zh-cn],[data-locale=ko]) body.timer-page:not([data-status-enlarged=true]) .setup-pane .rhythm-instruction { font-size:var(--local-pane-note-size); height:20px; line-height:20px; }
html:is([data-locale=ja],[data-locale=zh-tw],[data-locale=zh-cn],[data-locale=ko]) body.timer-page:not([data-status-enlarged=true]) .setup-pane .rhythm-status { font-size:.875rem; }

@media(orientation:portrait) {
 html:is([data-locale=ja],[data-locale=zh-tw],[data-locale=zh-cn],[data-locale=ko]) body.timer-page { --local-practice-title-width:24px; }
 html[data-locale=ko] body.timer-page { --local-practice-title-width:22.09375px; }
}
@media(orientation:portrait) and (max-height:640px) {
 html:is([data-locale=ja],[data-locale=zh-tw],[data-locale=zh-cn],[data-locale=ko]) body.timer-page { --local-heading-size:.75rem; --local-tab-size:.75rem; --local-tile-label-size:.75rem; --local-tile-value-size:.875rem; --local-caption-size:.75rem; --local-pane-note-size:.875rem; }
 html[data-locale=ja] body.timer-page:not([data-status-enlarged=true]) .language-dialog .language-note { height:39px; }
 html[data-locale=ja] body.timer-page:not([data-status-enlarged=true]) .setup-pane .rhythm-instruction { height:40px; }
 html[data-locale=ko] body.timer-page:not([data-status-enlarged=true]) .setup-pane .rhythm-instruction { font-size:12px; }
 html[data-locale=ja] body.timer-page:not([data-status-enlarged=true]) .setup-pane .swing-levels button { font-size:9px; }
 html:is([data-locale=ja],[data-locale=zh-tw],[data-locale=zh-cn],[data-locale=ko]) body.timer-page:not([data-status-enlarged=true]) .setup-pane .rhythm-status { font-size:.75rem; }
 html:is([data-locale=ja],[data-locale=zh-tw],[data-locale=zh-cn],[data-locale=ko]) body.timer-page #practice-setup #focused-label { font-size:.75rem; letter-spacing:0; }
 html:is([data-locale=zh-tw],[data-locale=zh-cn],[data-locale=ko]) body.timer-page #share-practice { font-size:.875rem; white-space:nowrap; }
}
@media(orientation:landscape) and (max-width:700px) {
 html:is([data-locale=ja],[data-locale=zh-tw],[data-locale=zh-cn],[data-locale=ko]) body.timer-page { --local-heading-size:.75rem; --local-tab-size:.75rem; --local-tile-label-size:.75rem; --local-tile-value-size:.875rem; --local-caption-size:.75rem; --local-pane-note-size:.875rem; --local-practice-title-width:19.453125px; }
 html[data-locale=ko] body.timer-page { --local-practice-title-width:18px; }
 html[data-locale=ja] body.timer-page:not([data-status-enlarged=true]) .setup-pane .swing-presets button { padding-inline:0; }
 /* Only the shown roomy choice fits 16px; the constrained Chinese choice keeps 14px. */
 html:is([data-locale=ja],[data-locale=zh-tw],[data-locale=zh-cn],[data-locale=ko]) body.timer-page:not([data-status-enlarged=true]) .language-choice[data-locale=zh-cn] { font-size:.875rem; }
}
@media(orientation:landscape) {
 html[data-locale=ja] body.timer-page:not([data-status-enlarged=true]) .setup-pane .swing-levels button { font-size:9px; }
}
@media(orientation:landscape) and (max-height:340px) {
 html[data-locale=ja] body.timer-page:not([data-status-enlarged=true]) .setup-pane .swing-levels button { font-size:8px; }
}
@media(orientation:landscape) and (min-width:701px) {
 html:is([data-locale=zh-tw],[data-locale=zh-cn],[data-locale=ko]) body.timer-page #share-practice { font-size:1rem; white-space:nowrap; }
}
@media(orientation:landscape) and (min-width:1100px) and (min-height:650px) {
 html:is([data-locale=ja],[data-locale=zh-tw],[data-locale=zh-cn],[data-locale=ko]) body.timer-page #practice-setup #focused-label { font-size:.8125rem; letter-spacing:0; }
 html[data-locale=ja] body.timer-page #share-practice { font-size:1rem; white-space:nowrap; }
}
@media(orientation:landscape) and (max-height:299px) {
 html:is([data-locale=ja],[data-locale=zh-tw],[data-locale=zh-cn],[data-locale=ko]) body.timer-page:not([data-status-enlarged=true]) .setup-pane .rhythm-instruction { height:16px; line-height:16px; }
}
}
html:is([data-locale=ja],[data-locale=zh-tw],[data-locale=zh-cn],[data-locale=ko]) body.timer-page #practice-entry > .practice-entry-label{font-size:14px;line-height:1;letter-spacing:0;white-space:nowrap;flex:1 1 0;text-align:center}