:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#19382f;background:#f8f9f6;font-size:16px;line-height:1.5;color-scheme:light;--bg:#f8f9f6;--surface:#fff;--ink:#19382f;--muted:#65756e;--line:#dce3dc;--accent:#235c49;--soft:#e7eee4;--success:#237454;--error:#9b593e;--error-soft:#f6ebe4;--nav:rgba(248,249,246,.94);--new:#e3e8e1;--learning:#91ac91;--problem:#ba795a;--learned:#235c49}
@media(prefers-color-scheme:dark){:root{color-scheme:dark;--bg:#121b19;--surface:#1b2823;--ink:#e4ece2;--muted:#a2b2a8;--line:#304139;--accent:#b4d7a7;--soft:#293f31;--success:#b4d7a7;--error:#e5ab89;--error-soft:#382b25;--nav:rgba(18,27,25,.94);--new:#2f3d35;--learning:#708e76;--problem:#cd946e;--learned:#b4d7a7}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);-webkit-tap-highlight-color:transparent;padding:env(safe-area-inset-top) max(24px,env(safe-area-inset-right)) calc(102px + env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}button,a,label,input{touch-action:manipulation}button,a,input,summary{outline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,.file:focus-within{outline:2px solid var(--accent)}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}a{color:var(--accent)}button{border:0}svg{width:22px;height:22px;flex-shrink:0}p{margin:0 0 16px}h1,h2{font-weight:600;letter-spacing:-.035em}h1{font-size:2rem;line-height:1.15;margin:8px 0 0}h2{font-size:1.13rem;line-height:1.3;margin:0 0 16px}.app-header,main,#notice,#update,.bottom-nav{width:100%;max-width:560px;margin-inline:auto}.app-header{display:flex;align-items:center;justify-content:space-between;height:86px}.brand{display:flex;gap:9px;align-items:center;font-size:1.2rem;letter-spacing:-.055em;font-weight:650;text-decoration:none;color:var(--ink);min-height:44px}.brand-symbol{display:grid;place-items:center;background:var(--accent);color:var(--bg);font-family:Georgia,serif;font-size:1.55rem;line-height:1;width:34px;height:34px;border-radius:11px;padding-bottom:3px;letter-spacing:0}.brand-dot{color:var(--accent);margin-left:-8px}#connection{font-size:.8rem;color:var(--muted)}.screen{animation:screen-in .18s ease-out}.eyebrow{font-size:.75rem;font-weight:650;letter-spacing:.15em;color:var(--muted)}.training-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px}.training-top h1{font-size:1.45rem;margin-top:4px;letter-spacing:-.035em}.mode-control{display:flex;align-items:center;justify-content:center;gap:7px;background:none;min-height:44px;padding:8px 0 8px 12px;color:var(--muted);font-size:.875rem;border-radius:14px;flex-shrink:0}.mode-control svg{width:17px;height:17px}.mode-control.active{color:var(--accent)}.practice-body{display:flex;flex-direction:column;min-height:calc(100svh - 264px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}.word-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-height:260px;padding:34px 0 28px}.word-instruction{color:var(--muted);font-size:.75rem;letter-spacing:.16em;font-weight:600;margin:0 0 26px}.word-prompt{width:100%;text-align:center}.word{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;width:100%;max-width:100%;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(2.6rem,9vw,4rem);line-height:1.25;white-space:nowrap;padding:12px 0 8px;animation:word-in .17s ease-out}.letter,.vowel{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;height:76px;position:relative;letter-spacing:-.025em}.vowel{font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;padding:0 2px;min-width:44px;border-radius:12px;background:transparent;color:var(--ink);transition:background .12s,color .12s,transform .12s}.vowel:after{content:"";position:absolute;bottom:5px;height:3px;width:22px;border-radius:2px;background:var(--accent);opacity:.45;transition:opacity .12s}.vowel:not(:disabled):active{background:var(--soft);transform:translateY(2px)}.vowel.correct{color:var(--success);background:var(--soft);animation:answer-in .18s ease-out}.vowel.correct:after{content:"´";height:auto;line-height:1;top:-6px;bottom:auto;left:50%;width:auto;background:none;color:var(--success);font-size:.7em;opacity:1;transform:translateX(-40%)}.vowel.wrong{color:var(--error);background:var(--error-soft)}.vowel.wrong:after{background:var(--error);opacity:1}.word:has(.vowel:disabled) .vowel:not(.wrong):not(.correct):after{opacity:0}.long-word{font-size:clamp(1.5rem,6.6vw,3rem)}.long-word .vowel{min-width:28px;padding-inline:0}.word-context{display:block;color:var(--muted);font-size:.9rem;margin:10px auto 0;max-width:320px;line-height:1.5}.tap-hint{margin:24px 0 0;color:var(--muted);font-size:.875rem}.feedback{display:flex;gap:8px;align-items:center;justify-content:center;color:var(--success);margin:24px 0 0;font-size:.95rem;animation:answer-in .18s ease-out}.feedback strong{font-weight:550}.feedback svg{width:19px;height:19px}.feedback.incorrect{color:var(--error)}.answer-area{width:100%;margin-bottom:24px}.quiet-mark{text-align:center;font-family:Georgia,serif;font-size:4rem;line-height:1;color:var(--line);height:65px;user-select:none}.stress-explanation{padding:20px 0 12px;border-top:1px solid var(--line);animation:answer-in .18s ease-out}.stress-explanation h2{font-size:.75rem;letter-spacing:.04em;margin:0 0 9px;font-weight:650;color:var(--muted)}.explanation-text{font-size:.9375rem;line-height:1.65;margin:0;overflow-wrap:anywhere}.explanation-sources{font-size:.8rem;margin-top:4px}.explanation-sources summary{padding:10px 0;min-height:40px;color:var(--muted)}.explanation-sources ul{padding-left:18px;margin:0 0 12px}.explanation-sources a{overflow-wrap:anywhere}.primary{display:block;border:0;border-radius:18px;background:var(--accent);color:var(--bg);font-size:1rem;font-weight:550;padding:16px 22px;min-height:56px;transition:transform .12s,opacity .12s}.primary:active{transform:scale(.985);opacity:.9}.next{width:100%;margin-top:10px}.practice-progress{margin-top:auto;padding:0 0 10px}.practice-progress>.session-count{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--muted);margin-bottom:13px}.practice-progress b{font-size:.9rem;color:var(--ink);font-weight:600}.practice-progress b span{font-size:.8rem;color:var(--muted);font-weight:400}.mini-progress{height:3px;background:var(--line);border-radius:4px;overflow:hidden}.mini-progress>span{height:100%;display:block;background:var(--accent);transition:width .2s}.mastery-caption{display:flex;justify-content:space-between;color:var(--muted);font-size:.75rem;margin-top:9px}.bottom-nav{position:fixed;z-index:10;bottom:0;left:50%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(3,1fr);background:var(--nav);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:10px 12px calc(9px + env(safe-area-inset-bottom));max-width:608px}.bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-decoration:none;color:var(--muted);font-size:.75rem;min-height:52px;border-radius:13px}.bottom-nav a[aria-current]{color:var(--accent);font-weight:650}.bottom-nav a[aria-current] svg{stroke-width:2.1}.bottom-nav a:active{background:var(--soft)}.page-heading{padding:22px 0 30px}.page-heading h1{font-size:2.2rem;line-height:1.18}.mastery{padding:0 0 26px}.mastery-number{font-size:4.7rem;line-height:1.15;letter-spacing:-.065em;font-weight:500;font-variant-numeric:tabular-nums}.mastery-number span{font-size:1.6rem;letter-spacing:-.03em;color:var(--muted);font-weight:400}.mastery>p{color:var(--muted);margin:5px 0 24px}.segmented-progress{height:10px;display:flex;gap:3px;border-radius:10px;overflow:hidden}.segmented-progress>span{min-width:0}.learned{background:var(--learned)}.learning{background:var(--learning)}.problem{background:var(--problem)}.new{background:var(--new)}.state-legend{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin-top:20px;font-size:.8rem}.state-legend>span{display:flex;align-items:center;gap:8px;color:var(--muted)}.state-legend i{width:7px;height:7px;border-radius:50%;flex-shrink:0}.state-legend b{margin-left:auto;font-weight:600;color:var(--ink)}.answer-totals{display:grid;grid-template-columns:1fr 1fr;border-block:1px solid var(--line);padding:22px 0;margin:5px 0 8px}.answer-totals>div{display:flex;flex-direction:column}.answer-totals>div+div{border-left:1px solid var(--line);padding-left:25px}.answer-totals strong{font-size:2.5rem;font-weight:500;letter-spacing:-.05em;line-height:1.2}.answer-totals small{font-size:1.3rem}.answer-totals span{font-size:.8rem;color:var(--muted);margin-top:5px}dl{margin:0}dl div{display:flex;justify-content:space-between;gap:20px;padding:11px 0;font-size:.875rem}dt{color:var(--muted)}dd{margin:0;font-variant-numeric:tabular-nums;font-weight:550}.session-summary{background:var(--soft);border-radius:22px;padding:22px;margin:26px 0 34px}.session-summary h2{font-size:.9rem;margin-bottom:18px}.session-numbers{display:flex;justify-content:space-between}.session-numbers>div{display:flex;flex-direction:column}.session-numbers b{font-size:1.75rem;line-height:1.2;font-weight:500}.session-numbers span{font-size:.75rem;color:var(--muted);margin-top:5px}.section-heading{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:16px}.section-heading h2{margin:0}.section-heading>span{color:var(--muted);font-size:.9rem}.problem-list{list-style:none;padding:0;margin:0}.problem-list li{display:flex;align-items:center;gap:15px;justify-content:space-between;padding:17px 0;border-bottom:1px solid var(--line)}.problem-list strong{display:block;font-size:1.2rem;letter-spacing:-.02em;font-weight:550}.problem-list small{display:block;color:var(--muted);font-size:.8rem}.muted{color:var(--muted);font-size:.8rem}.recovery{display:flex;gap:4px;flex-shrink:0}.recovery i{display:block;width:6px;height:18px;border-radius:4px;background:var(--line)}.recovery .filled{background:var(--accent)}.empty-state{padding:30px 10px;text-align:center}.empty-state svg{color:var(--accent);background:var(--soft);border-radius:50%;padding:10px;width:44px;height:44px}.empty-state p{margin:12px 0 5px;font-weight:550}.empty-state span{font-size:.875rem;color:var(--muted)}details{font-size:.875rem}summary{cursor:pointer;padding:13px 0;min-height:48px}details p{color:var(--muted);line-height:1.7}details[open] summary{margin-bottom:5px}.stats-details{border-top:1px solid var(--line);margin-top:18px;color:var(--muted)}.settings-section{margin-bottom:34px}.settings-section>p{font-size:.9rem;color:var(--muted);line-height:1.65}.settings-section h2{margin-bottom:12px}.settings-group{background:var(--surface);border:1px solid var(--line);border-radius:19px;overflow:hidden;margin:18px 0 12px}.settings-group>button,.file{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:58px;text-align:left;padding:16px 18px;background:transparent;font-size:.9375rem;position:relative}.settings-group>*+*{border-top:1px solid var(--line)}.settings-group small{display:block;color:var(--muted);font-size:.75rem;margin-top:3px}.settings-group>button:active,.file:active{background:var(--soft)}.file{cursor:pointer}.file input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.settings-section .small-note{font-size:.75rem;line-height:1.65;color:var(--muted)}.offline-status{display:flex;gap:9px;align-items:baseline;font-size:.85rem;color:var(--muted)}.offline-status p{margin:0}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}.source-links{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:.875rem}.source-links a{padding:10px 0}.reset-section{border-top:1px solid var(--line);padding-top:24px}.danger{color:var(--error);background:var(--error-soft);width:100%;text-align:left;padding:17px 18px;border-radius:16px;margin-bottom:14px}.app-version{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted);border-top:1px solid var(--line);padding:18px 0 10px}.training-empty{text-align:center;min-height:55svh;display:flex;align-items:center;justify-content:center;flex-direction:column}.training-empty>svg{width:50px;height:50px;padding:12px;background:var(--soft);border-radius:50%;margin-bottom:22px}.training-empty p{font-size:.875rem;color:var(--muted)}.training-empty button{margin-top:10px}#notice,#update{border:1px solid var(--line);border-radius:16px;background:var(--soft);padding:16px;font-size:.875rem;margin-bottom:14px}#notice.error{background:var(--error-soft);color:var(--error)}#update button,#install{min-height:44px;background:var(--accent);color:var(--bg);border-radius:12px;padding:10px 16px}#update p{margin-bottom:10px}[hidden]{display:none!important}
@keyframes screen-in{from{opacity:.6;transform:translateY(3px)}to{opacity:1;transform:none}}@keyframes word-in{from{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes answer-in{from{opacity:.4;transform:translateY(2px)}to{opacity:1;transform:none}}
@media(min-width:700px){body{padding-top:24px}.app-header{height:80px}.training-top{padding-top:28px}.practice-body{min-height:calc(100svh - 315px)}.word-stage{min-height:300px}.bottom-nav{border-inline:1px solid var(--line);border-radius:24px 24px 0 0}.page-heading{padding-top:30px}.settings-screen,.stats-screen{padding-top:6px}}
@media(max-width:360px){body{padding-inline:18px}.training-top h1{font-size:1.22rem}.mode-control{font-size:.8rem;gap:5px}.long-word .vowel{min-width:26px}.word-stage{min-height:245px}.state-legend{gap:12px 15px}}
@media(max-height:700px){.app-header{height:65px}.training-top{padding-top:8px}.practice-body{min-height:calc(100svh - 230px)}.word-stage{min-height:225px;padding:24px 0 18px}.word-instruction{margin-bottom:16px}.quiet-mark{height:30px;font-size:2.5rem}.answer-area{margin-bottom:20px}.answered .word-stage{min-height:210px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.train-screen{animation:none}

html{background:var(--bg);--nav-height:74px;overscroll-behavior:none}
body{overscroll-behavior:none}
body{padding-bottom:calc(var(--nav-height) + 28px)}
body:has(.next){padding-bottom:calc(var(--nav-height) + 108px)}
.bottom-nav{grid-template-columns:repeat(3,minmax(0,1fr))}
.bottom-nav a{min-width:0}
.bottom-nav a span{max-width:100%;overflow-wrap:anywhere}
.next{position:fixed;z-index:11;bottom:calc(var(--nav-height) + 12px);left:50%;transform:translateX(-50%);width:min(560px,calc(100% - 48px));margin:0;box-shadow:0 0 0 10px var(--bg)}
.next:active{transform:translateX(-50%) scale(.985)}
.word-stage{flex:0 0 auto;min-height:clamp(260px,42svh,390px)}
@media(max-height:700px){.word-stage,.answered .word-stage{min-height:240px}}
@media(max-width:360px){.next{width:calc(100% - 36px)}}
html{overflow-wrap:anywhere}.word{overflow-wrap:normal}.state-legend{grid-template-columns:repeat(2,minmax(0,1fr))}.state-legend>span{flex-wrap:wrap}.problem-list li>div{min-width:0}.settings-group>button,.file{overflow-wrap:anywhere}.section-heading{gap:16px}
/* Practice is a single viewport, including Safari's changing browser chrome. */
html,body{touch-action:pan-x pan-y}
html.training-viewport{height:100%;overflow:hidden;overscroll-behavior:none}
body[data-screen="train"]{position:fixed;inset:0;height:100dvh;overflow:hidden;overscroll-behavior:none;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);padding-bottom:calc(var(--nav-height) + 12px)}
body[data-screen="train"] .app-header{height:72px;flex:0 0 72px}
.train-screen{flex:1;min-height:0;display:flex;flex-direction:column}
.train-screen .training-top{flex:none;padding-top:6px;padding-bottom:10px}
.train-screen .practice-body{flex:1;min-height:0;gap:10px}
.train-screen .word-stage{flex:1;min-height:140px;padding:16px 0}
.train-screen .word-instruction{margin-bottom:16px}
.train-screen .feedback,.train-screen .tap-hint{margin-top:16px}
.train-screen .answer-area{flex:none;margin:0}
.train-screen .stress-explanation{padding:14px 0 0}
.train-screen .stress-explanation h2{margin-bottom:7px}
.train-screen .explanation-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--rule-lines,10);overflow:hidden;font-size:.9375rem;line-height:1.5}
.train-screen .practice-progress{flex:none;margin-top:0;padding:0}
.train-screen .practice-progress>.session-count{margin-bottom:6px}
.train-screen .mastery-caption{margin-top:5px}
.train-screen .next{position:static;flex:none;transform:none;width:100%;min-height:52px;padding:14px 20px;box-shadow:none;margin:0}
.train-screen .next:active{transform:scale(.985)}
.train-screen .quiet-mark{height:40px;font-size:3rem}
.train-screen .practice-body:not(.answered) .answer-area{flex:1;display:flex;align-items:flex-start;justify-content:center}
.train-screen .training-empty{flex:1;min-height:0}
.explanation-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}
.explanation-actions button{display:inline-flex;align-items:center;gap:3px;background:transparent;padding:6px 0;min-height:38px;color:var(--muted);font-size:.8125rem;text-align:left}
.explanation-actions svg{width:17px;height:17px}
.explanation-actions button:active{color:var(--accent)}
#read-rule{color:var(--accent)}
/* Native modal semantics: background is inert and Escape restores trigger focus. */
.context-panel{width:min(368px,calc(100% - 40px));max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 64px);margin:auto;padding:10px 20px 16px;border:1px solid var(--line);border-radius:28px;background:var(--surface);color:var(--ink);box-shadow:0 24px 80px #0003;overflow:auto;overscroll-behavior:contain;animation:panel-in .18s ease-out}
.context-panel::backdrop{background:rgba(15,27,22,.22);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 0 6px}
.panel-heading h2{margin:0;font-size:1.125rem}
.panel-close{display:grid;place-items:center;width:44px;min-width:44px;height:44px;background:transparent;color:var(--muted);border-radius:50%;margin-right:-8px}
.panel-close svg{width:20px;height:20px}
.panel-close:active{background:var(--soft)}
.source-menu{list-style:none;padding:0;margin:0}
.source-menu li+li{border-top:1px solid var(--line)}
.source-menu a{display:flex;align-items:center;gap:13px;min-height:64px;padding:15px 0;text-decoration:none;color:var(--ink);font-size:.9375rem;line-height:1.45}
.source-menu a:active{color:var(--accent)}
.source-menu svg{color:var(--muted);width:22px;height:22px}
.full-rule{margin:6px 0 4px;font-size:1rem;line-height:1.65}
body[data-screen="train"] #update,body[data-screen="train"] #notice{position:fixed;z-index:15;top:calc(env(safe-area-inset-top) + 8px);left:50%;transform:translateX(-50%);width:min(560px,calc(100% - 36px));max-height:45dvh;overflow:auto;box-shadow:0 8px 30px #0002}
@keyframes panel-in{from{opacity:0;transform:scale(.95) translateY(8px)}to{opacity:1;transform:none}}
@media(max-height:720px){body[data-screen="train"] .app-header{height:54px;flex-basis:54px}.train-screen .practice-body{gap:7px}.train-screen .word-stage{padding:6px 0}.train-screen .word-instruction{margin-bottom:5px}.train-screen .feedback,.train-screen .tap-hint{margin-top:5px}.train-screen .stress-explanation{padding-top:9px}.train-screen .letter,.train-screen .vowel{height:60px}.train-screen .word{padding:6px 0}.train-screen .explanation-text{font-size:.875rem}.train-screen .next{min-height:48px;padding:12px 16px}.train-screen .mastery-caption{display:none}.train-screen .practice-progress>.session-count{margin-bottom:4px}}
@media(max-height:480px) and (orientation:landscape){body[data-screen="train"] .app-header{display:none}.train-screen .training-top{padding-block:2px}.train-screen .training-top .eyebrow{display:none}.train-screen .practice-body{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) auto;column-gap:24px}.train-screen .word-stage{grid-column:1;grid-row:1;min-height:0}.train-screen .answer-area{grid-column:2;grid-row:1;align-self:center}.train-screen .practice-progress{grid-column:1;grid-row:2;align-self:center}.train-screen .next{grid-column:2;grid-row:2}.train-screen .word{font-size:2rem}.train-screen .long-word{font-size:1.5rem}.train-screen .vowel{min-width:26px}.train-screen .practice-body:not(.answered) .word-stage{grid-column:1 / -1}.train-screen .practice-body:not(.answered) .answer-area{display:none}.train-screen .practice-body:not(.answered) .practice-progress{grid-column:1 / -1}}

/* A continuous text run keeps natural Cyrillic spacing; vowel targets overlay it. */
.train-screen .word{position:relative;isolation:isolate;display:flex;height:96px;font-size:clamp(2.6rem,10vw,4rem);letter-spacing:0}
.word-text{position:relative;z-index:2;white-space:nowrap;pointer-events:none;line-height:1.3}
.train-screen .word .vowel{position:absolute;z-index:1;top:50%;height:68px;min-height:44px;min-width:0;padding:0;transform:translate(-50%,-50%);background:transparent;border-radius:0;animation:none}
.train-screen .word .vowel::before{content:"";position:absolute;inset:4px 0;width:calc(var(--glyph-width) + 2px);left:50%;transform:translateX(-50%);border-radius:8px;background:rgba(35,92,73,.065);transition:background .12s}
.train-screen .word .vowel::after{display:none}
.train-screen .word .vowel:not(:disabled):active{transform:translate(-50%,-50%);background:transparent}
.train-screen .word .vowel:not(:disabled):active::before{background:var(--soft)}
.train-screen .word .vowel.correct::before{background:var(--soft)}
.train-screen .word .vowel.wrong::before{background:var(--error-soft)}
.train-screen .word .vowel.correct::after{display:block;content:"´";top:-4px;color:var(--success);font-size:.7em;opacity:1;background:none}
.train-screen .word:has(.vowel:disabled) .vowel:not(.correct):not(.wrong)::before{background:transparent}
@media(prefers-color-scheme:dark){.train-screen .word .vowel::before{background:rgba(180,215,167,.075)}}
@media(max-height:720px){.train-screen .word{height:76px}.train-screen .word .vowel{height:58px}}
@media(max-height:480px) and (orientation:landscape){.train-screen .word{font-size:2rem}}

/* The accent is a small stroke fully contained within the vowel highlight. */
.train-screen .word .vowel.correct::after{content:"";top:10px;left:50%;width:10px;height:2.5px;border-radius:2px;background:var(--success);transform:translateX(-35%) rotate(-55deg);font-size:inherit;line-height:normal}
.train-screen .word{animation:none}
.word-arriving .word{animation:none}
.word-transition-layer{position:fixed;inset:0;z-index:4;display:block;pointer-events:none;margin:0}
.word-transition-layer *{animation:none!important}
.answer-revealing .vowel.correct::before{animation:vowel-settle .3s cubic-bezier(.2,.9,.3,1)}
.answer-revealing .vowel.correct::after{animation:accent-draw .22s ease-out both}
.answer-revealing .feedback{animation:feedback-in .24s ease-out both}
.answer-revealing .feedback:not(.incorrect) svg path{stroke-dasharray:24;animation:check-draw .3s ease-out both}
.answer-revealing .stress-explanation{animation:explanation-in .26s ease-out both}
.answer-revealing .next{animation:button-in .24s ease-out both}
.train-screen .vowel::before{transition:background .13s,box-shadow .13s}
.train-screen .vowel:not(:disabled):active::before{box-shadow:0 0 0 3px var(--soft)}
.bottom-nav a{transition:color .15s,background .15s}
.bottom-nav a:active svg{transform:scale(.9)}
.bottom-nav svg{transition:transform .16s}
.mode-control{transition:color .16s,background .16s}
.mode-control:active{background:var(--soft)}
.explanation-actions:has(button[hidden]){min-height:0}
@keyframes vowel-settle{0%{opacity:.3;transform:translateX(-50%) scale(.88)}65%{opacity:1;transform:translateX(-50%) scale(1.04)}100%{transform:translateX(-50%) scale(1)}}
@keyframes accent-draw{from{opacity:0;transform:translateX(-35%) rotate(-55deg) scaleX(.2)}to{opacity:1;transform:translateX(-35%) rotate(-55deg) scaleX(1)}}
@keyframes feedback-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes check-draw{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
@keyframes explanation-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes button-in{from{opacity:.5;transform:translateY(5px)}to{opacity:1;transform:none}}

/* Keep the word anchored while the answer appears below it. */
.train-screen .word-stage{flex:none;min-height:0;justify-content:flex-start;padding:clamp(18px,6dvh,64px) 0 12px}
.train-screen .word-instruction{line-height:18px}
.train-screen .feedback,.train-screen .tap-hint{min-height:24px;line-height:24px}
.train-screen .answered .answer-area{margin-top:auto}
.train-screen .word-context{display:table;max-width:min(100%,360px);margin:10px auto 0;padding:8px 14px;border-radius:12px;background:var(--soft);color:var(--ink);font-size:1rem;font-weight:550;line-height:1.4}
@media(max-height:720px){.train-screen .word-stage{padding:12px 0 6px}.train-screen .word-context{padding:6px 10px;margin-top:6px;font-size:.9375rem}}
@media(max-height:480px) and (orientation:landscape){.train-screen .word-stage{padding:6px 0;justify-content:flex-start}.train-screen .practice-body:not(.answered) .word-stage{grid-column:1}.train-screen .practice-body:not(.answered) .practice-progress{grid-column:1}.train-screen .answered .answer-area{margin-top:0}.train-screen .word-context{font-size:.875rem;padding:4px 8px}}