:root{--color-primary: #4059e2;--color-primary-deep: #3049cc;--color-primary-light: #e8edff;--color-primary-pale: #f3f5ff;--color-bg: #ffffff;--color-bg-secondary: #f7f8fa;--color-card-subtle: #f1f2f5;--color-surface: #ffffff;--color-text: #17181d;--color-text-secondary: #737681;--color-text-muted: #a1a4ad;--color-border: #e5e7ed;--color-disabled: #dcdde3;--color-success: #83c99a;--color-success-soft: #eaf7ef;--color-error: #f4434e;--color-error-soft: #fdecee;--color-cream: #fff4dc;--color-yellow: #ffd875;--color-ink: #191919;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-7: 32px;--space-8: 40px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-pill: 999px;--shadow-soft: 0 2px 8px rgba(20, 25, 45, .06);--font-sans: "Nunito Sans", "Segoe UI", system-ui, sans-serif;--duration-fast: .15s;--duration-base: .2s;--duration-slow: .28s;--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-inout: cubic-bezier(.4, 0, .2, 1);--control-height: 50px;--touch-min: 44px}@media(prefers-reduced-motion:reduce){:root{--duration-fast: 0ms;--duration-base: 0ms;--duration-slow: 0ms}.play-button--playing:after,.feedback-panel__icon,.input--incorrect{animation:none}}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh;min-height:100dvh;background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);font-size:15px;line-height:1.5;-webkit-text-size-adjust:100%}h1,h2,p{margin:0}button,input{font:inherit;color:inherit}button:focus-visible,input:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}img,svg{display:block;max-width:100%}svg{flex-shrink:0}.app{position:relative;min-height:100vh;min-height:100dvh;padding:var(--space-4);padding-bottom:calc(var(--space-7) + env(safe-area-inset-bottom,0px));background-color:var(--color-bg-secondary);background-image:radial-gradient(circle,#d9dce5 1px,transparent 1px);background-size:18px 18px}.app__container{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--space-6);max-width:480px;margin:0 auto}.app__main{display:flex;flex-direction:column;gap:var(--space-4)}.app__footer{color:var(--color-text-muted);font-size:12px;line-height:1.5;text-align:center}.progress{display:flex;flex-direction:column;gap:var(--space-2)}.progress__meta{display:flex;justify-content:space-between;align-items:center;color:var(--color-text-secondary);font-size:12px;font-weight:600}.progress__track{height:4px;overflow:hidden;border-radius:var(--radius-pill);background:var(--color-border)}.progress__fill{height:100%;border-radius:inherit;background:var(--color-primary);transition:width var(--duration-slow) var(--ease-out)}.progress__stats{color:var(--color-text-muted);font-size:12px;font-weight:600}.lang-switch{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface)}.lang-switch__option{min-width:36px;min-height:32px;padding:0 8px;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--color-text-secondary);font-size:11px;font-weight:800;letter-spacing:.02em;cursor:pointer;transition:background-color var(--duration-fast) var(--ease-inout),color var(--duration-fast) var(--ease-inout)}.lang-switch__option:hover{color:var(--color-text)}.lang-switch__option[aria-pressed=true]{background:var(--color-primary-light);color:var(--color-primary)}.digit-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}.digit-pad__key{display:grid;place-items:center;min-height:48px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-size:18px;font-weight:800;cursor:pointer;transition:background-color var(--duration-fast) var(--ease-inout),border-color var(--duration-fast) var(--ease-inout),transform var(--duration-fast) var(--ease-out)}.digit-pad__key svg{width:18px;height:18px}.digit-pad__key:hover:not(:disabled){border-color:#cfd3de;background:var(--color-primary-pale)}.digit-pad__key:active:not(:disabled){transform:scale(.98)}.digit-pad__key:disabled{opacity:.45;cursor:not-allowed}.digit-pad__key--action{color:var(--color-primary);font-size:14px}.digit-track{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:var(--space-2) 0}.digit-track__beat{width:10px;height:10px;border-radius:50%;background:var(--color-border);transition:background-color var(--duration-base) var(--ease-inout),transform var(--duration-base) var(--ease-out)}.digit-track__beat--active{background:var(--color-primary);transform:scale(1.35)}.hint-chip{align-self:flex-start;padding:6px 10px;border-radius:var(--radius-md);background:var(--color-cream);color:var(--color-text);font-size:13px;font-weight:700}.sticky-actions{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:2;display:grid;grid-template-columns:auto 1fr;gap:var(--space-2);margin-top:var(--space-2);padding:var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:#fffffff5;box-shadow:var(--shadow-soft)}.sticky-actions__skip{min-width:96px}.app-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.app-header__actions{display:flex;align-items:center;gap:var(--space-2)}.app-header__brand{display:flex;align-items:center;gap:var(--space-3);min-width:0}.app-header__mark{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-md);background:var(--color-primary);color:#fff}.app-header__mark svg{width:22px;height:22px}.app-header__title{font-size:24px;font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--color-primary)}.app-header__tagline{color:var(--color-text-secondary);font-size:13px;font-weight:600}.icon-button{display:grid;place-items:center;width:var(--touch-min);height:var(--touch-min);border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-inout),border-color var(--duration-fast) var(--ease-inout),transform var(--duration-fast) var(--ease-out)}.icon-button:hover{border-color:#cfd3de;background:var(--color-primary-pale)}.icon-button:active{transform:scale(.98)}.icon-button[aria-expanded=true]{border-color:var(--color-primary);background:var(--color-primary-light);color:var(--color-primary)}.icon-button svg{width:20px;height:20px}.card{padding:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--control-height);padding:0 var(--space-5);border:1px solid transparent;border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-size:14px;font-weight:700;cursor:pointer;transition:background-color var(--duration-fast) var(--ease-inout),border-color var(--duration-fast) var(--ease-inout),color var(--duration-fast) var(--ease-inout),transform var(--duration-fast) var(--ease-out),opacity var(--duration-fast) var(--ease-inout)}.btn svg{width:18px;height:18px}.btn:active:not(:disabled){transform:scale(.98)}.btn:disabled{background:var(--color-card-subtle);color:var(--color-text-muted);border-color:transparent;cursor:not-allowed}.btn--primary{width:100%;background:var(--color-primary);color:#fff}.btn--primary:hover:not(:disabled){background:var(--color-primary-deep)}.btn--primary:disabled{background:var(--color-disabled);color:#fff}.btn--secondary{background:var(--color-surface);border-color:var(--color-border);color:var(--color-primary)}.btn--secondary:hover:not(:disabled){background:var(--color-primary-pale);border-color:#c9d2f7}.btn--tertiary{min-height:44px;background:transparent;color:var(--color-text-secondary)}.btn--tertiary:hover:not(:disabled){background:var(--color-card-subtle);color:var(--color-primary)}.btn--ghost{min-height:40px;padding:0 var(--space-3);background:transparent;color:var(--color-primary);font-size:13px}.btn--ghost:hover:not(:disabled){background:var(--color-primary-light)}.btn--ghost:disabled{background:transparent;color:var(--color-text-muted)}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}.mode-card{display:flex;align-items:center;gap:var(--space-3);min-height:72px;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);text-align:left;cursor:pointer;transition:background-color var(--duration-base) var(--ease-inout),border-color var(--duration-base) var(--ease-inout),transform var(--duration-fast) var(--ease-out)}.mode-card:hover{border-color:#cfd3de;background:var(--color-bg)}.mode-card:active{transform:scale(.98)}.mode-card[aria-pressed=true]{border-color:var(--color-primary);background:var(--color-primary-light)}.mode-card__icon{width:40px;height:40px;flex-shrink:0}.mode-card__icon img{width:100%;height:100%}.mode-card__label{flex:1;font-size:15px;font-weight:700;color:var(--color-text)}.mode-card__check{display:grid;place-items:center;width:22px;height:22px;border:1.5px solid var(--color-border);border-radius:var(--radius-pill);color:transparent;transition:background-color var(--duration-base) var(--ease-inout),border-color var(--duration-base) var(--ease-inout),color var(--duration-base) var(--ease-inout)}.mode-card[aria-pressed=true] .mode-card__check{border-color:var(--color-primary);background:var(--color-primary);color:#fff}.mode-card__check svg{width:12px;height:12px}.segmented{display:flex;flex-wrap:wrap;gap:var(--space-2)}.segmented__option{min-height:36px;padding:0 14px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text-secondary);font-size:13px;font-weight:700;cursor:pointer;transition:background-color var(--duration-base) var(--ease-inout),border-color var(--duration-base) var(--ease-inout),color var(--duration-base) var(--ease-inout),transform var(--duration-fast) var(--ease-out)}.segmented__option:hover{border-color:#cfd3de}.segmented__option:active{transform:scale(.98)}.segmented__option[aria-pressed=true]{border-color:var(--color-primary);background:var(--color-primary-light);color:var(--color-primary)}.settings{display:flex;flex-direction:column;gap:var(--space-6)}.field{display:flex;flex-direction:column;gap:var(--space-2)}.field__label{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-secondary)}.field__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}.field__input{display:flex;flex-direction:column;gap:var(--space-1)}.field__hint{color:var(--color-text-muted);font-size:12px;font-weight:600}.field__error{color:var(--color-error);font-size:13px;font-weight:700}.input{width:100%;min-height:48px;padding:0 var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;transition:border-color var(--duration-base) var(--ease-inout),box-shadow var(--duration-base) var(--ease-inout),background-color var(--duration-base) var(--ease-inout)}.input::placeholder{color:var(--color-text-muted);font-weight:600}.input:hover{border-color:#cfd3de}.input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}.input:disabled{background:var(--color-card-subtle);color:var(--color-text-secondary)}.input--correct{border-color:var(--color-success);background:var(--color-success-soft)}.input--incorrect{border-color:var(--color-error);background:var(--color-error-soft);animation:nudge .28s var(--ease-out)}@keyframes nudge{0%,to{transform:translate(0)}25%{transform:translate(-3px)}75%{transform:translate(3px)}}.notice{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4);border:1px solid #f5b4b8;border-radius:var(--radius-lg);background:var(--color-error-soft);font-size:14px;font-weight:600}.notice svg{width:20px;height:20px;margin-top:1px;color:var(--color-error)}.exercise{display:flex;flex-direction:column;gap:var(--space-5)}.exercise__hero{display:flex;justify-content:center;padding:var(--space-2) 0}.exercise__hero img{width:min(220px,70vw);height:auto}.exercise__mode{align-self:flex-start;padding:4px 10px;border-radius:var(--radius-pill);background:var(--color-primary-light);color:var(--color-primary);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.exercise__instruction{font-size:22px;font-weight:800;line-height:1.25;letter-spacing:-.02em;color:var(--color-text)}.exercise__actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}.exercise__footer-actions{display:flex;flex-direction:column;gap:var(--space-3);padding-top:var(--space-2)}.answer-form{display:flex;flex-direction:column;gap:var(--space-2)}.answer-form__label{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-secondary)}.answer-form__row{display:flex;flex-direction:column;gap:var(--space-3)}.answer-form__input{font-size:18px}.feedback-panel{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}.feedback-panel--correct{border-color:#b7dfc4;background:var(--color-success-soft)}.feedback-panel--incorrect{border-color:#f5b4b8;background:var(--color-error-soft)}.feedback-panel--revealed{border-color:#c9d2f7;background:var(--color-primary-pale)}.feedback-panel__icon{width:48px;height:48px;flex-shrink:0;animation:pop-in var(--duration-slow) var(--ease-out)}.feedback-panel__icon img{width:100%;height:100%}@keyframes pop-in{0%{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}.feedback-panel__body{display:flex;flex-direction:column;gap:4px;min-width:0}.feedback-panel__title{font-size:15px;font-weight:800;color:var(--color-text)}.feedback-panel__text{font-size:13px;font-weight:600;color:var(--color-text-secondary);line-height:1.45}.feedback-panel__answer{margin-top:4px;font-size:20px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--color-text)}.feedback-panel__answer--digits{font-size:16px;letter-spacing:.04em;overflow-wrap:anywhere}.feedback-panel__words{font-size:14px;font-weight:700;color:var(--color-text-secondary)}.answer-hint{padding:var(--space-4);border:1px dashed var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg);color:var(--color-text-secondary);font-size:13px;font-weight:600;text-align:center}.audio{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-2) 0}.play-button{position:relative;display:grid;place-items:center;width:88px;height:88px;border:0;border-radius:var(--radius-pill);background:var(--color-primary);color:#fff;cursor:pointer;transition:background-color var(--duration-fast) var(--ease-inout),transform var(--duration-fast) var(--ease-out)}.play-button svg{width:34px;height:34px}.play-button:hover:not(:disabled){background:var(--color-primary-deep)}.play-button:active:not(:disabled){transform:scale(.98)}.play-button:disabled{background:var(--color-disabled);cursor:not-allowed}.play-button:after{content:"";position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;border:2px solid var(--color-primary-light);border-radius:50%;opacity:0;pointer-events:none}.play-button--playing:after{animation:play-ring 1.6s var(--ease-out) infinite}@keyframes play-ring{0%{transform:scale(.96);opacity:.9}to{transform:scale(1.18);opacity:0}}.audio__status{display:flex;align-items:center;gap:var(--space-2);color:var(--color-text-secondary);font-size:13px;font-weight:700}.audio__dot{width:8px;height:8px;border:1.5px solid var(--color-text-muted);border-radius:50%;transition:background-color var(--duration-base) var(--ease-inout),border-color var(--duration-base) var(--ease-inout)}.audio__dot--active{border-color:var(--color-primary);background:var(--color-primary)}.fade-slide-enter-active,.fade-slide-leave-active,.soft-enter-active,.soft-leave-active{transition:opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out)}.fade-slide-enter-from,.fade-slide-leave-to,.soft-enter-from,.soft-leave-to{opacity:0;transform:translateY(8px)}@media(min-width:720px){.app{padding:var(--space-7) var(--space-6)}.app__container{max-width:520px}.exercise__instruction{font-size:26px}}@media(max-width:420px){.card{padding:var(--space-4)}.mode-grid,.exercise__actions{grid-template-columns:1fr}}