/* Readable type and a spacious practice surface at every viewport size. */
body{font-size:16px}main{max-width:1180px}.header{height:76px}.header nav{gap:30px}.nav{font-size:15px}.language-indicator{font-size:12px}.icon-button{width:25px;height:25px;font-size:14px}.settings-button{width:42px;height:42px}.intro{padding:26px 0 22px}.eyebrow{font-size:11px;letter-spacing:1.4px}h1{font-size:42px}.intro p{font-size:16px;line-height:1.6}.mode-switch{margin-bottom:24px}.mode{font-size:15px;padding:13px 21px}.mode small{font-size:11px;padding:5px 7px}.mode-symbol{font-size:23px}.workspace{display:flex;flex-direction:column;gap:24px}.practice-column{width:100%}
/* A horizontal milestone roadmap directly above the current level. */
.journey{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:20px 20px 16px;box-shadow:var(--shadow)}.aside-heading{padding:0 4px 17px;align-items:center;font-size:13px;font-weight:650;letter-spacing:1px}.aside-heading>span:last-child{font-size:13px;color:var(--muted);font-weight:500;letter-spacing:0}.levels{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px;position:relative;isolation:isolate;align-items:stretch}.levels:before{content:'';position:absolute;z-index:-1;left:4.5%;right:4.5%;height:2px;top:30px;background:linear-gradient(to right,var(--accent) var(--journey-fill),var(--line) var(--journey-fill))}.level{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;padding:12px 5px 10px;min-height:116px;border:1px solid transparent;border-radius:11px;transition:background .15s,border-color .15s;justify-content:flex-start}.level-number{width:36px;height:36px;border-radius:11px;font-size:15px;font-weight:650;background:var(--surface);box-shadow:0 0 0 5px var(--surface);border:1px solid var(--line);position:relative;z-index:1}.level-title{display:block;font-size:12px;font-weight:550;line-height:1.45;max-width:100%;overflow-wrap:break-word}.level-status{font-size:10px;margin-top:6px;color:var(--accent-ink);font-weight:600}.level.active{background:var(--tint);border-color:color-mix(in srgb,var(--accent),transparent 65%)}.level.active .level-number{box-shadow:0 0 0 5px var(--tint),0 3px 12px color-mix(in srgb,var(--accent),transparent 80%)}.level.completed:not(.active) .level-number{background:var(--ink);border-color:var(--ink);color:var(--surface)}.level:disabled{opacity:.68}.level:hover:not(:disabled){border-color:var(--line);background:var(--surface-2)}.lock{display:none}.journey-tip{display:none}.infinite-journey{padding:16px 24px}.infinite-journey .aside-heading{display:none}.infinite-note{padding:0;display:flex;align-items:center;gap:20px;line-height:1.5}.infinite-note .infinity{font-size:44px}.infinite-note h3{font-size:17px;margin:0}.infinite-note p{font-size:14px;margin:0;max-width:430px}.end-run{font-size:14px;padding:11px 17px;margin:0 0 0 auto;white-space:nowrap}
/* The four metrics each get a clear card and a full-size label. */
.practice-card{border-radius:18px}.card-heading{padding:24px 30px}.level-label{font-size:12px;letter-spacing:1.5px}h2{font-size:24px;line-height:1.35;margin-top:8px}.badge{font-size:13px;padding:8px 12px}.stats{gap:14px;padding:0 28px 24px;background:none;border:none}.stats>div{border:1px solid var(--line);border-radius:12px;padding:18px 20px;background:var(--surface-2);min-height:117px;position:relative}.stats>div:last-child{border:1px solid var(--line)}.stat-label{font-size:13px;font-weight:600;letter-spacing:1px;line-height:1.5;color:var(--muted)}.stats strong{font-size:42px;line-height:1.2;font-weight:700;margin-top:8px;letter-spacing:-1px}.stats strong small{font-size:15px;font-weight:500;margin-left:3px}.stats>div:nth-child(2),.stats>div:nth-child(3){background:color-mix(in srgb,var(--tint),var(--surface) 65%);border-color:color-mix(in srgb,var(--accent),transparent 75%)}.stats>div:nth-child(2) strong,.stats>div:nth-child(3) strong{color:var(--accent-ink)}.typing-area{padding:27px 24px 26px;min-height:246px;border-top:1px solid var(--line)}.word-caption{font-size:12px;letter-spacing:1.5px;line-height:1.5}.target-word{min-height:95px;line-height:1.4;letter-spacing:3px;margin:8px 0;color:color-mix(in srgb,var(--ink),var(--surface) 25%)}.typing-hint{font-size:15px;line-height:1.6;min-height:24px}.pronunciation{font-size:16px;line-height:1.7}.up-next{font-size:17px;word-spacing:18px;margin-top:24px;line-height:1.5}.next-label{font-size:11px;margin-right:18px;letter-spacing:1px}.word-footer{padding:17px 28px;gap:16px}.word-footer>span{font-size:13px;line-height:1.5;gap:6px}.word-footer i{width:7px;height:7px}.text-button{font-size:14px;gap:8px}.text-button>span:first-child:not([data-i18n]){font-size:23px}.round-progress{height:4px}
.keyboard-card{border-radius:18px;margin-top:24px;padding:23px 25px 18px}.keyboard-heading{font-size:16px;margin-bottom:18px}.keyboard-heading>div{gap:10px}.keyboard-mark{font-size:24px}.keyboard-edition{font-size:10px;padding-left:14px}.keyboard-heading button{font-size:13px}.keyboard-chassis{padding:15px 20px 13px}.chassis-top{font-size:10px;padding-bottom:14px}.chassis-bottom{font-size:9px;padding-top:15px}.key{height:44px;font-size:14px}.key.wide,.key.extra-wide{font-size:10px}.key.space{font-size:11px}.keyboard{gap:8px}.keyboard-row{gap:7px}.keyboard-footer{font-size:12px;line-height:1.5;margin-top:20px}.legend{width:8px;height:8px}.bottom-tip{padding:20px 4px;gap:10px}.bottom-tip p{font-size:13px;line-height:1.6}.keycaps{font-size:12px;gap:6px}kbd{font-size:11px;padding:3px 5px}footer{font-size:12px;line-height:1.5;padding:24px 0;margin-top:18px}
/* Sound palette: selecting a switch also auditions a short typing sequence. */
#settings-modal{max-width:760px}.settings-header{padding:30px 32px 24px}.settings-header h2{font-size:30px}.settings-header p{font-size:14px;line-height:1.6}.settings-body{padding:0 32px}.settings-section{padding:24px 0}.settings-section h3{font-size:16px;margin-bottom:14px}.settings-section p{font-size:13px;line-height:1.6}.language-section h3,.section-title-row h3{margin-bottom:0}.settings-section select{font-size:15px;padding:11px 32px 11px 14px}.theme-option{padding:14px;gap:12px}.theme-option strong{font-size:15px}.theme-option small{font-size:11px}.design-option{padding:18px 14px 15px}.design-option strong{font-size:15px}.design-option small{font-size:12px;line-height:1.6;min-height:39px}.design-preview{height:59px}.design-preview i{height:28px}.sound-types{gap:18px;margin:23px 0}.sound-types label{font-size:13px;gap:7px}.sound-types input{width:15px;height:15px}.volume-row{font-size:13px;gap:12px}.volume-row output{font-size:12px;width:35px}.volume-row button{font-size:12px}.settings-note{font-size:12px;line-height:1.7;margin:20px 0}.settings-bottom{padding:17px 32px}.primary{font-size:15px;padding:13px 24px}.secondary{font-size:14px;padding:12px 17px}.modal-close{width:32px;height:32px;font-size:24px}.switch{width:44px;height:25px}.switch>span:after{width:19px;height:19px}.switch input:checked+span:after{transform:translateX(19px)}.typing-sound-studio{margin-top:23px}.typing-sound-studio h3{margin-bottom:4px}.sound-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:17px}.sound-choice{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:11px;padding:17px 14px;background:var(--surface);color:var(--ink);text-align:left;min-height:97px}.sound-choice.soothing{grid-column:1/-1;background:var(--surface-2)}.sound-choice[aria-pressed=true]{border-color:var(--accent);background:var(--tint);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent),transparent 80%)}.sound-wave{display:flex;align-items:center;justify-content:center;gap:3px;width:51px;flex-shrink:0;height:35px;color:var(--muted)}.sound-wave i{display:block;width:3px;border-radius:3px;background:currentColor;opacity:.7}.sound-choice[aria-pressed=true] .sound-wave{color:var(--accent-ink)}.sound-choice-copy{flex:1}.sound-choice strong{display:block;font-size:14px;font-weight:650;line-height:1.5}.sound-choice strong small{font-size:10px;font-weight:550;padding:4px 7px;margin-left:10px;background:var(--surface);border:1px solid var(--line);border-radius:20px;white-space:nowrap;color:var(--accent-ink)}.sound-choice-copy>span{display:block;font-size:12px;line-height:1.6;color:var(--muted);margin-top:3px}.sound-play{font-size:20px;color:var(--muted);flex-shrink:0}.sound-choice[aria-pressed=true] .sound-play{color:var(--accent-ink)}.sound-choice:disabled{opacity:.5}
/* Useful coaching, evidence first, with a comparison on the same words. */
dialog{max-width:590px;padding:36px;max-height:calc(100dvh - 32px);scrollbar-width:thin}.modal-copy{font-size:15px;line-height:1.8}.results-dialog{max-width:790px;padding:0}.results-dialog #modal-content{padding:30px 32px 0}.results-dialog .modal-symbol{margin-bottom:10px;font-size:30px}.result-intro{padding:5px 25px 0}.result-intro h2{font-size:28px}.result-intro .modal-copy{margin-bottom:20px}.result-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 26px}.result-stats>div{background:var(--surface-2);padding:16px 8px;border-radius:10px;border:1px solid var(--line)}.result-stats strong{font-size:30px;line-height:1.3}.result-stats span{font-size:11px;letter-spacing:.5px;line-height:1.5;display:block;margin-top:4px}.coach-report{text-align:left;border-top:1px solid var(--line);padding-top:25px}.coach-heading{display:flex;align-items:center;gap:14px;margin-bottom:22px}.coach-heading>span{display:grid;place-items:center;background:var(--tint);color:var(--accent-ink);width:45px;height:45px;border-radius:11px;font-size:24px;flex-shrink:0}.coach-heading h3{font:700 20px Manrope,sans-serif;margin:0}.coach-heading p{font-size:14px;color:var(--muted);margin:6px 0 0;line-height:1.5}.coach-focus-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:14px;margin-bottom:20px}.coach-focus-grid>div{padding:18px 22px;background:var(--surface-2);border:1px solid var(--line);border-radius:11px}.coach-focus-grid>div>span{font-size:13px;color:var(--muted);font-weight:550}.coach-focus-grid strong{display:block;margin:5px 0;font:650 35px Manrope,sans-serif;overflow-wrap:anywhere;color:var(--ink)}.coach-focus-grid p{font-size:13px;color:var(--muted);margin:0;line-height:1.6}.coach-advice{font-size:15px;line-height:1.8;color:var(--muted)}.coach-advice p{margin:12px 0}.coach-advice .coach-evidence{font-weight:550;color:var(--ink)}.coach-next,.coach-baseline,.coach-comparison{margin:20px 0;padding:20px 22px;background:var(--surface-2);border:1px solid var(--line);border-radius:11px}.coach-next>span{font-size:12px;text-transform:uppercase;letter-spacing:1px;font-weight:650;color:var(--accent-ink)}.coach-next p,.coach-baseline p,.coach-comparison p{font-size:14px;line-height:1.8;color:var(--muted);margin:10px 0 0}.coach-next .secondary{margin:12px 0 0;background:var(--ink);color:var(--surface)}.coach-baseline h3,.coach-comparison h3{font-size:15px;line-height:1.5;margin:0}.comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.comparison-grid span{font-size:17px;font-weight:650;line-height:1.5}.comparison-grid .positive{color:var(--accent-ink)}.clean-run{display:flex;gap:14px;align-items:flex-start;padding:22px;background:var(--tint);border:1px solid color-mix(in srgb,var(--accent),transparent 70%);border-radius:11px}.clean-run>span{color:var(--accent-ink);font-size:23px}.clean-run h3{font-size:17px;margin:0}.clean-run p{font-size:14px;line-height:1.8;color:var(--muted);margin:8px 0 0}.result-actions{position:sticky;bottom:0;background:var(--surface);padding:17px 0;margin:24px -1px 0;border-top:1px solid var(--line);display:flex;justify-content:center;align-items:center;gap:10px}.result-actions button{margin:0}
/* Persistent history, including speed trends and comparable completion times. */
.progress-page{padding:35px 32px}.progress-page>h2{font-size:32px}.progress-page>p{font-size:15px;line-height:1.7}#progress-stats{margin:30px 0;gap:15px}#progress-stats>div{padding:24px 15px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}#progress-stats strong{font-size:40px}#progress-stats span{font-size:14px}.history-panel{text-align:left;border-top:1px solid var(--line);padding-top:27px;margin-bottom:28px}.history-panel h2{font-size:24px}.history-note{font-size:14px;color:var(--muted);line-height:1.7;max-width:800px}.history-empty{padding:40px 20px;text-align:center;color:var(--muted);background:var(--surface-2);border-radius:10px;font-size:15px}.chart-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:28px}.chart-heading>div:first-child>span{font-size:14px;color:var(--muted)}.chart-heading strong{display:block;font-size:38px;margin-top:4px}.chart-heading strong small{font-size:14px;color:var(--muted)}.chart-heading p{font-size:13px;color:var(--muted);line-height:1.7;margin:7px 0 0}.chart-trend{max-width:350px;text-align:right}.chart-trend strong{font-size:16px;line-height:1.6}.speed-chart{width:100%;height:auto;max-height:220px;overflow:visible;margin-top:24px}.speed-chart text{fill:var(--muted);font-size:12px;font-family:'DM Sans',sans-serif}.chart-grid{stroke:var(--line);stroke-width:1;stroke-dasharray:4 5}.chart-line{stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.chart-point{fill:var(--surface);stroke:var(--accent);stroke-width:3}.history-table-title{font-size:17px;margin:28px 0 14px}.history-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:11px}.history-table{border-collapse:collapse;width:100%;font-size:14px;white-space:nowrap}.history-table th{font-size:12px;font-weight:600;color:var(--muted);background:var(--surface-2);text-align:left;padding:14px 16px}.history-table td{padding:15px 16px;border-top:1px solid var(--line)}.history-status{font-size:12px;color:var(--muted)}.history-status.complete{color:var(--accent-ink)}
@media(max-width:900px){main{padding:0 22px}.journey{padding:17px 13px}.levels{gap:5px}.level-title{font-size:11px}.level-status{font-size:9px}.level{padding-inline:3px}.stats{gap:10px;padding:0 20px 20px}.stats>div{padding:16px}.stats strong{font-size:36px}.stat-label{font-size:12px}.stats strong small{font-size:12px}.keyboard-edition{display:none}.key{height:39px;font-size:13px}.key.wide,.key.extra-wide{font-size:9px}.keycaps{display:none}}
@media(max-width:640px){.header{height:68px;padding:0 18px}.header nav{gap:14px}.nav{font-size:13px}.settings-button{height:36px;width:36px}.intro{padding:25px 0 20px}.eyebrow{font-size:9px;letter-spacing:.8px}h1{font-size:31px;letter-spacing:-1px}.intro p{font-size:14px}main{padding:0 15px}.mode-switch{margin-bottom:20px;width:100%}.mode{flex:1;justify-content:center;padding:12px 8px;gap:6px;font-size:12px}.mode small{font-size:9px;padding:4px}.mode-symbol{font-size:20px}.workspace{gap:19px}.journey{margin:0;padding:17px 0 13px;border-radius:13px;overflow:hidden}.aside-heading{padding:0 16px 15px;gap:12px;font-size:11px;letter-spacing:.6px}.aside-heading>span:last-child{font-size:11px;text-align:right;max-width:60%;line-height:1.4}.levels{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;scroll-snap-type:x proximity;padding:0 12px 8px}.levels:before{display:none}.level{flex:0 0 94px;min-height:118px;padding:10px 6px;gap:9px;scroll-snap-align:start}.level-title{display:block;font-size:12px}.level-status{display:block;font-size:10px}.level-number{width:34px;height:34px;font-size:14px;border-radius:10px}.level.active{background:var(--tint)}.level:after{content:'';width:22px;height:1px;background:var(--line);position:absolute;top:28px;right:-16px;z-index:-1}.level:last-child:after{display:none}.card-heading{padding:22px 20px;gap:10px}.level-label{font-size:11px}h2{font-size:21px;line-height:1.4}.badge{font-size:11px;padding:7px 9px}.stats{grid-template-columns:1fr 1fr;padding:0 18px 20px;gap:10px}.stats>div{padding:15px 17px;min-height:106px}.stat-label{font-size:12px;letter-spacing:.6px}.stats strong{font-size:34px;margin-top:7px}.stats strong small{font-size:13px}.typing-area{min-height:248px;padding:25px 16px}.word-caption{font-size:11px;letter-spacing:.8px}.target-word{min-height:80px;margin:10px 0;letter-spacing:2px}.typing-hint{font-size:14px;line-height:1.6;min-height:44px}.pronunciation{font-size:15px}.up-next{font-size:15px;word-spacing:10px;margin-top:17px}.next-label{font-size:10px;margin-right:11px}.word-footer{padding:15px 18px;gap:12px;align-items:center}.word-footer>span{font-size:12px;gap:4px;flex:1}.word-footer>span>span{max-width:165px;line-height:1.5}.word-footer i{flex-shrink:0;width:6px;height:6px}.text-button{font-size:12px;white-space:nowrap}.keyboard-card{padding:16px 10px 14px;margin-top:19px;border-radius:13px}.keyboard-heading{font-size:13px;gap:10px;margin-bottom:15px}.keyboard-heading>div{gap:6px}.keyboard-mark{font-size:18px}.keyboard-heading button{font-size:11px}.keyboard-chassis{padding:10px 7px 9px;border-radius:9px}.chassis-top{font-size:7px;padding-bottom:10px}.chassis-bottom{font-size:6px;padding-top:11px}.keyboard{gap:6px}.keyboard-row{gap:3px}.key{height:30px;font-size:10px}.key.wide,.key.extra-wide{font-size:6px}.key.space{font-size:8px}.keyboard-footer{font-size:9px;gap:10px;line-height:1.6;margin-top:16px}.keyboard-footer>span:last-child{max-width:42%}.legend{width:6px;height:6px}.bottom-tip p{font-size:12px}.bottom-tip{padding:17px 3px}footer{font-size:10px;gap:18px;padding-block:20px}.infinite-journey{padding:13px 15px}.infinite-note{gap:10px}.infinite-note .infinity{font-size:31px}.infinite-note h3{font-size:14px}.infinite-note p{display:none}.end-run{font-size:12px;padding:10px}.settings-header{padding:26px 20px 21px}.settings-header h2{font-size:26px}.settings-header p{font-size:13px}.settings-body{padding-inline:20px}.settings-section h3{font-size:15px}.settings-section p{font-size:12px}.settings-section select{font-size:13px;max-width:51%;padding-left:9px}.theme-options{gap:8px}.theme-option{padding:12px 9px;gap:8px}.theme-option strong{font-size:13px}.theme-option small{font-size:10px}.theme-swatch{width:29px;flex-shrink:0}.design-options{gap:8px}.design-option{padding:16px 8px 12px}.design-option strong{font-size:13px}.design-option small{font-size:11px;line-height:1.5;min-height:56px}.design-preview{height:46px;padding:10px 4px;gap:2px}.design-preview i{height:20px}.sound-choices{grid-template-columns:1fr;gap:9px}.sound-choice{padding:14px;min-height:87px}.sound-choice strong{font-size:15px}.sound-choice-copy>span{font-size:12px}.sound-types{flex-direction:column;gap:16px}.sound-types label{font-size:14px}.sound-types input{width:16px;height:16px}.volume-row{flex-wrap:wrap;gap:10px;font-size:13px}.volume-row input{width:90px;flex:1}.volume-row button{font-size:12px}.settings-note{font-size:12px}.settings-bottom{padding:16px 20px}.primary{font-size:14px;padding:12px 19px}.secondary{font-size:13px}.results-dialog #modal-content{padding:26px 18px 0}.result-intro{padding:6px 6px 0}.result-intro h2{font-size:24px}.result-intro .modal-copy{font-size:14px}.result-stats{grid-template-columns:1fr 1fr;gap:10px}.result-stats strong{font-size:28px}.result-stats span{font-size:11px}.coach-heading h3{font-size:19px}.coach-heading p{font-size:13px}.coach-heading>span{height:39px;width:39px}.coach-focus-grid{gap:10px}.coach-focus-grid>div{padding:16px 13px}.coach-focus-grid strong{font-size:27px}.coach-focus-grid>div>span,.coach-focus-grid p{font-size:12px}.coach-advice{font-size:14px;line-height:1.8}.coach-next,.coach-baseline,.coach-comparison{padding:18px}.coach-next p,.coach-baseline p,.coach-comparison p{font-size:13px}.comparison-grid{grid-template-columns:1fr;gap:6px}.comparison-grid span{font-size:16px}.result-actions{gap:8px;justify-content:space-between}.result-actions button{padding:12px 15px;font-size:12px}.clean-run{padding:17px;gap:12px}.clean-run h3{font-size:16px}.clean-run p{font-size:13px}.progress-page{padding:28px 18px}.progress-page>h2{font-size:26px}.progress-page>p{font-size:14px}#progress-stats{gap:9px;grid-template-columns:1fr 1fr}#progress-stats>div:last-child{grid-column:1/-1}#progress-stats>div{padding:18px 10px}#progress-stats strong{font-size:32px}#progress-stats span{font-size:12px}.history-panel h2{font-size:22px}.history-note{font-size:13px}.chart-heading{display:block}.chart-heading strong{font-size:33px}.chart-trend{text-align:left;margin-top:20px;max-width:none}.chart-trend strong{font-size:15px}.chart-heading p{font-size:12px}.speed-chart{min-height:100px}.history-table th{font-size:11px;padding:12px}.history-table td{font-size:12px;padding:13px}.history-status{font-size:11px}.history-table-title{font-size:15px}}
h1 em{margin-left:.12em}.level:disabled{opacity:1;color:var(--muted)}
@media(max-width:640px){.levels{flex-direction:row}.level{width:auto}}
@media(max-width:640px){.mode{display:grid;grid-template-columns:20px minmax(0,1fr);grid-template-rows:auto auto;min-width:0;gap:4px 7px;text-align:left}.mode-symbol{grid-row:1/3;align-self:center}.mode>span[data-i18n]{font-size:12px;line-height:1.5;overflow-wrap:break-word}.mode small{grid-column:2;justify-self:start;white-space:normal;font-size:10px}}