:root{--bg:#dbe7ff;--panel:#fff;--bg-soft:#edf3ff;--border:#648de542;--text-strong:#1d2f57;--text-soft:#38507f;--muted:#6379a1;--accent-strong:#648de5;--accent-soft:#e8f0ff;--success:#2d8248;--danger:#b95f46;--shadow-soft:0 20px 40px #445c911f;--shadow-pop:0 16px 30px #648de538;--sans:"Roboto", "Open Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;font:17px/1.5 var(--sans);color:var(--text-soft);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,:before,:after{box-sizing:border-box}html{min-height:100%}body{background:0 0;min-height:100vh;margin:0}body,button,input,select,textarea{font:inherit}#root{min-height:100vh}h1,h2{color:var(--text-strong);font-family:var(--sans);letter-spacing:-.03em;margin:0;font-weight:700;line-height:1.05}h1{font-size:clamp(1.5rem,3vw,2.6rem)}h1,h2{font-size:clamp(1.45rem,2vw,2rem)}p{margin:0}button{appearance:none}button:focus-visible{outline-offset:3px;outline:3px solid #648de54d}.app-shell{flex-direction:column;width:min(1120px,100% - 32px);min-height:100dvh;margin:0 auto;padding:0 48px 32px;display:flex}.app-header{color:var(--muted);justify-content:space-between;align-items:center;gap:16px;margin:16px 0;font-size:1.05rem;display:flex}.app-header__brand{color:inherit;align-items:center;gap:10px;text-decoration:none;display:inline-flex}.app-header__logo{object-fit:contain;flex-shrink:0;width:36px;height:36px}.app-header__tag{color:var(--text-strong);letter-spacing:-.01em;margin:0;font-size:1.5rem;font-weight:700}.language-switcher{border:1px solid var(--border);color:var(--text-strong);cursor:pointer;background:#ffffffeb;border-radius:16px;flex-direction:column;align-items:flex-start;padding:12px 14px;transition:transform .16s,border-color .16s,box-shadow .16s;display:inline-flex}.language-switcher:hover{border-color:var(--accent-strong);transform:translateY(-1px)}.language-switcher__value{align-items:center;gap:10px;font-weight:700;display:inline-flex}.language-switcher__flag{object-fit:cover;border-radius:999px;flex-shrink:0;width:24px;height:24px;box-shadow:0 0 0 1px #648de52e}.screen{gap:18px;display:grid}.quiz-screen{flex:1;min-height:0}.panel.language-picker-page,.panel.placeholder-card{background:radial-gradient(circle at 100% 0,#648de529,#0000 32%),linear-gradient(135deg,#fff,#eef4ff);gap:12px;display:grid}.panel{background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow-soft);border-radius:24px;padding:32px}.hero-card,.result-hero{background:var(--panel)}.mode-switcher-card{gap:16px;margin-bottom:18px;padding-top:24px;padding-bottom:24px;display:grid}.eyebrow,.section-kicker{color:var(--accent-strong);letter-spacing:.14em;text-transform:uppercase;font-size:.84rem}.setup-screen .section-kicker{margin-bottom:8px}.eyebrow{margin-bottom:4px}.lead{max-width:64ch;color:var(--text-soft);margin-top:12px}.hero-stats,.choice-grid,.exercise-list,.mistake-list,.language-grid{gap:12px;display:grid}.language-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.language-card{border:1px solid var(--border);color:var(--text-strong);text-align:left;cursor:pointer;background:#fff;border-radius:20px;justify-items:start;gap:12px;padding:18px;transition:transform .16s,border-color .16s,background-color .16s;display:flex}.language-card:hover{border-color:var(--accent-strong);transform:translateY(-1px)}.language-card.active{border-color:var(--accent-strong);background:var(--accent-soft)}.language-card__body{flex-direction:column;justify-content:space-between;display:flex}.language-card__flag{object-fit:cover;border-radius:999px;width:54px;height:54px}.language-card__code{color:var(--accent-strong);letter-spacing:.18em;text-transform:uppercase;font-size:.8rem;font-weight:700}.language-card__title{font-size:1.2rem;font-weight:700}.language-picker-modal{gap:18px;display:grid}.hero-stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:16px}.stat-chip{border:1px solid var(--border);background:#fff;border-radius:16px;padding:16px 18px}.stat-chip span,.section-note,.prompt-meta,.mistake-card__meta{color:var(--muted)}.stat-chip strong{color:var(--text-strong);margin-top:8px;font-size:1.45rem;display:block}.feedback{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.quiz-header,.section-heading{flex-direction:column;justify-content:space-between;align-items:flex-start;gap:8px;display:flex}.choice-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.choice-grid--compact{grid-template-columns:repeat(2,minmax(220px,280px));justify-content:start}.category-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.choice,.exercise-choice,.option-card,.selection-summary,.ghost-button,.primary-button{border:1px solid var(--border);border-radius:16px;height:fit-content;transition:transform .16s,border-color .16s,background-color .16s}.choice,.exercise-choice,.option-card,.selection-summary{color:var(--text-strong);text-align:left;cursor:pointer;background:#fff;padding:16px}.selection-summary{justify-content:space-between;align-items:center;gap:16px;width:100%;margin-top:12px;display:flex}.choice{aspect-ratio:1;align-content:space-between;gap:8px;display:grid}.choice-grid--compact .choice{aspect-ratio:auto;align-content:start;min-height:132px}.choice__title,.choice__description{display:block}.choice__title{letter-spacing:-.03em;font-size:clamp(1.35rem,2vw,1.9rem);font-weight:700;line-height:1}.choice-grid--compact .choice__title{font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.15}.choice__description{color:var(--muted);font-size:.92rem;line-height:1.25}.selection-summary__body{flex-direction:column;gap:4px;min-width:0;display:flex}.selection-summary__title{color:var(--text-strong);font-size:1.05rem;font-weight:700;line-height:1.2}.selection-summary__description{color:var(--muted);font-size:.92rem;line-height:1.3}.selection-summary__action{color:var(--accent-strong);text-align:right;font-size:.9rem;font-weight:700}.category-choice{aspect-ratio:auto;align-content:start;height:auto}.category-choice__title{-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;min-height:54px;font-size:clamp(1.05rem,1.8vw,1.35rem);line-height:1.15;display:-webkit-box;overflow:hidden}.exercise-choice__title{display:block}.exercise-choice__image{object-fit:contain;align-self:center;width:min(100%,100px);height:auto;margin:auto 0}.exercise-choice__image--mirrored{transform:scaleX(-1)}.choice:hover,.exercise-choice:hover,.option-card:hover,.selection-summary:hover,.ghost-button:hover,.primary-button:hover{border-color:var(--accent-strong);transform:translateY(-1px)}.choice.active,.exercise-choice.active,.selection-summary.active,.selection-summary:focus-visible{border-color:var(--accent-strong);background:var(--accent-soft)}.selection-summary:focus-visible{outline:none}.exercise-list{grid-template-columns:repeat(5,minmax(150px,1fr));margin-top:20px}.selection-modal{display:grid}.mode-switcher{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:inline-grid}.mode-switcher__item{border:1px solid var(--border);min-height:54px;color:var(--text-strong);background:#fff;border-radius:16px;justify-content:center;align-items:center;padding:12px 18px;font-weight:700;text-decoration:none;transition:transform .16s,border-color .16s,background-color .16s;display:inline-flex}.mode-switcher__item:hover{border-color:var(--accent-strong);transform:translateY(-1px)}.mode-switcher__item.active{border-color:var(--accent-strong);background:var(--accent-soft)}.exercise-choice{aspect-ratio:1;flex-direction:column;justify-content:space-between;align-items:center;gap:8px;min-width:160px;padding:8px;display:flex}.exercise-choice__title{text-align:center;white-space:normal;overflow-wrap:anywhere;margin-bottom:8px;font-size:.98rem;line-height:1.3}.cta-row{align-items:center}.primary-button,.ghost-button{cursor:pointer;font:inherit;padding:14px 22px}.primary-button{background:var(--accent-strong);color:#f8fff1;border-color:#0000;min-width:220px}.primary-button:disabled{cursor:wait;opacity:.7;box-shadow:none;transform:none}.ghost-button{color:var(--text-strong);background:0 0}.quiz-shell{grid-template-rows:minmax(0,1fr) auto;gap:16px;min-height:calc(100dvh - clamp(110px,18vh,164px));max-height:calc(100dvh - clamp(110px,18vh,164px));display:grid;position:relative;overflow:hidden}.quiz-main{scrollbar-gutter:stable;align-content:start;gap:16px;min-height:0;display:grid;overflow:auto}.quiz-toolbar{z-index:2;align-items:center;gap:8px;display:flex;position:absolute;top:36px;right:32px}.quiz-utility-button,.quiz-close-button{border:1px solid var(--border);width:38px;height:38px;color:var(--muted);cursor:pointer;background:#fffffff0;border-radius:8px;justify-content:center;align-items:center;font-size:1.5rem;line-height:1;transition:transform .16s,border-color .16s,box-shadow .16s,color .16s;display:flex}.quiz-utility-button{color:var(--muted)}.quiz-utility-button:hover,.quiz-close-button:hover{border-color:var(--accent-strong);color:var(--accent-strong);transform:translateY(-1px)}.quiz-utility-button[aria-pressed=true]{border-color:var(--accent-strong);background:var(--accent-soft);color:var(--accent-strong)}.quiz-utility-button__icon{color:currentColor;flex-shrink:0;width:18px;height:18px;display:block}.progress-bar{background:#648de51f;height:8px;position:absolute;inset:0 0 auto}.progress-bar__fill{background:var(--accent-strong);height:100%;transition:width .22s}.prompt-card{border:1px solid var(--border);background:#fff;border-radius:16px;align-items:center;min-height:72px;padding:12px;display:flex}.prompt-row{flex:1;justify-content:space-between;align-items:center;gap:12px;min-height:28px;display:flex}.prompt-body{color:var(--text-strong);word-break:break-word;margin:0;font-size:clamp(1.25rem,2vw,2rem);line-height:1.05}.sound-controls{flex-shrink:0;align-items:stretch;display:inline-flex;overflow:hidden}.sound-controls.is-hidden{visibility:hidden;pointer-events:none}.sound-button{cursor:pointer;background:#fff;border:0;flex-shrink:0;justify-content:center;align-items:center;padding:14px;font-size:.9rem;transition:transform .16s,background-color .16s,color .16s;display:inline-flex;position:relative}.sound-button:after{content:"";opacity:0;pointer-events:none;border:8px solid #648de5b8;border-radius:50%;position:absolute;inset:2px;transform:scale(1)}.sound-button:before{content:"";opacity:0;pointer-events:none;background:#648de547;border-radius:50%;position:absolute;inset:2px;transform:scale(.7)}.sound-button:hover{color:var(--accent-strong);transform:translateY(-1px)}.sound-button.is-speaking{color:var(--accent-strong)}.sound-button.is-speaking:after{opacity:1;animation:1.1s ease-in-out infinite sound-button-outer-pulse}.sound-button.is-speaking:before{opacity:1;animation:1.1s ease-in-out infinite sound-button-inner-pulse}.sound-button__icon{z-index:1;background-color:currentColor;width:17px;height:17px;display:block;position:relative;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}@keyframes sound-button-inner-pulse{0%{opacity:.28;transform:scale(.8)}50%{opacity:.48;transform:scale(.88)}to{opacity:.28;transform:scale(.8)}}@keyframes sound-button-outer-pulse{0%{opacity:.52;transform:scale(1)}50%{opacity:.88;transform:scale(1.08)}to{opacity:.52;transform:scale(1)}}.prompt-meta{margin:12px 0 0;font-size:1rem}.option-list{gap:12px;display:grid}.text-answer-label{color:var(--text-strong);font-weight:600}.text-answer-input{border:1px solid var(--border);width:100%;color:var(--text-strong);font:inherit;background:#fff;border-radius:16px;margin-top:16px;padding:14px 16px;transition:border-color .16s,box-shadow .16s}.text-answer-input:focus{border-color:var(--accent-strong);outline:none;box-shadow:0 0 0 4px #648de51f}.text-answer-input:disabled{color:var(--muted);background:#f8f9fceb}.text-answer-actions{flex-wrap:wrap;gap:12px;margin-top:16px;display:flex}.text-answer-actions__row{flex:1;gap:12px;display:flex}.text-answer-actions--numeral{grid-template-columns:minmax(0,1fr);display:grid}.text-answer-actions__row--numeral{flex:none}.ghost-button--icon-only{justify-content:center;align-items:center;width:56px;min-width:56px;padding:12px;font-size:1.25rem;line-height:1;display:inline-flex}.primary-button--numeral{width:100%;min-width:0}.token-builder{gap:16px;display:grid}.token-builder__answer,.token-builder__bank{gap:10px;display:grid}.token-builder__label{color:var(--text-strong);margin:0;font-weight:700}.token-builder__slots,.token-builder__tokens{background:#ffffffb8;border:1px dashed #648de54d;border-radius:16px;flex-wrap:wrap;gap:10px;min-height:58px;padding:12px;display:flex}.token-builder__placeholder{color:var(--muted)}.token-builder__token{border:1px solid var(--border);min-height:40px;color:var(--text-strong);font:inherit;cursor:pointer;text-transform:lowercase;background:#fff;border-radius:999px;justify-content:center;align-items:center;padding:8px 14px;transition:transform .16s,border-color .16s,background-color .16s;display:inline-flex}.token-builder__token:hover{border-color:var(--accent-strong);transform:translateY(-1px)}.token-builder__token:disabled{cursor:default;transform:none}.token-builder__token--selected{background:var(--accent-soft);border-color:var(--accent-strong)}.accented-text__char{font-weight:700}.option-card{font-size:1.05rem}.option-card.is-selected{border-color:var(--accent-strong)}.option-card.is-correct{border-color:var(--success);background:#d6f4e1f0}.option-card.is-wrong{border-color:var(--danger);background:#ffe1dbf0}.feedback{padding:0}.feedback p{margin:0}.feedback.success{color:#358a57}.feedback.error{color:#bb4e2f}.result-actions{flex-wrap:wrap;gap:12px;margin-top:24px;display:flex}.placeholder-card__action{margin-top:24px}.theory-entry-card{background:radial-gradient(circle at 100% 0,#648de52e,#0000 36%),linear-gradient(135deg,#fff,#eef4ff)}.phrase-catalog{gap:14px;margin-top:8px;display:grid}.phrase-catalog__card{background:#ffffffe6;border:1px solid #648de52e;border-radius:18px;overflow:hidden}.phrase-catalog__toggle{width:100%;color:var(--text-strong);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;display:flex}.phrase-catalog__toggle-title{font-size:1rem;font-weight:700}.phrase-catalog__toggle-meta{color:var(--muted);font-size:.92rem}.phrase-catalog__table{gap:10px;padding:0 18px 18px;display:grid}.phrase-catalog__header,.phrase-catalog__row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr);gap:14px;display:grid}.phrase-catalog__header{color:var(--muted);letter-spacing:.04em;text-transform:uppercase;padding-top:2px;font-size:.84rem;font-weight:700}.phrase-catalog__row{color:var(--text-strong);border-top:1px solid #648de51f;padding-top:10px;line-height:1.4}.phrase-catalog__row span{word-break:break-word}.theory-entry-button{min-width:140px;margin-top:18px}.theory-entry-button strong,.theory-entry-button__body{display:block}.theory-entry-button strong{color:var(--text-strong);margin-top:8px;font-size:1.22rem}.theory-entry-button__body{max-width:62ch;color:var(--text-soft);margin-top:10px}.modal-overlay{box-sizing:border-box;z-index:20;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overscroll-behavior:contain;background:#1422427a;justify-content:center;align-items:center;padding:24px 16px;display:flex;position:fixed;inset:0;overflow-y:auto}.modal{background:linear-gradient(#fff,#f7faff);border:1px solid #648de538;border-radius:24px;flex-direction:column;width:min(960px,100%);max-height:min(100dvh - 48px,960px);margin:auto;display:flex;position:relative;overflow:hidden;box-shadow:0 32px 60px #17274c38}.modal__header{z-index:1;background:linear-gradient(#fff,#f7faff);border-bottom:1px solid #648de529;justify-content:space-between;align-items:flex-start;gap:16px;padding:24px 24px 18px;display:flex;position:sticky;top:0}.modal__close-button{border:1px solid var(--border);width:40px;height:40px;color:var(--muted);cursor:pointer;background:#fff;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;font-size:1.6rem;line-height:1;transition:transform .16s,border-color .16s,color .16s;display:inline-flex}.modal__close-button span{margin-bottom:2px}.modal__close-button:hover{border-color:var(--accent-strong);color:var(--accent-strong);transform:translateY(-1px)}.modal__content{min-height:0;padding:24px;overflow-y:auto}.theory-content{gap:24px;display:grid}.theory-markdown{color:var(--text-soft)}.theory-markdown h1,.theory-markdown h2,.theory-markdown h3{margin-top:24px}.theory-markdown h1:first-child,.theory-markdown h2:first-child,.theory-markdown h3:first-child{margin-top:0}.theory-markdown p,.theory-markdown ul,.theory-markdown ol{margin-top:12px}.theory-markdown ul,.theory-markdown ol{padding-left:22px}.theory-markdown li+li{margin-top:8px}.theory-markdown code{color:var(--text-strong);background:#648de51f;border-radius:8px;padding:.1em .35em}.theory-markdown a{color:var(--accent-strong)}.theory-pronunciation{background:#e8f0ff85;border:1px solid #648de52e;border-radius:18px;padding:20px}.theory-pronunciation__heading{gap:6px;display:grid}.theory-pronunciation__heading h3{color:var(--text-strong);margin:0;font-size:1.1rem}.theory-pronunciation__list{gap:12px;margin-top:16px;display:grid}.theory-pronunciation__card{background:#fff;border:1px solid #648de52e;border-radius:16px;padding:16px}.theory-pronunciation__verb{color:var(--text-strong);font-size:1.05rem;font-weight:700}.theory-pronunciation__forms{gap:6px;margin-top:10px;display:grid}.mistake-list{margin-top:20px}.mistake-card{border:1px solid var(--border);background:#fff;border-radius:16px;padding:18px 20px}.mistake-card__title,.mistake-card__body,.mistake-card__answer{margin:0}.mistake-card__body{color:var(--text-strong);margin-top:8px;font-size:1.12rem}.mistake-card__meta,.mistake-card__answer{margin-top:10px}@media (width<=1280px){.exercise-list{grid-template-columns:repeat(4,minmax(150px,1fr))}}@media (width<=1024px){.exercise-list{grid-template-columns:repeat(3,minmax(150px,1fr))}}@media (width<=760px){.app-shell{width:min(100% - 16px,1120px);padding:0 0 16px}.section-heading,.cta-row,.quiz-header,.feedback{flex-direction:column}.section-kicker{margin-top:16px}.panel{border-radius:16px;padding:16px 16px 24px}.quiz-toolbar{top:20px;right:16px}.quiz-utility-button,.quiz-close-button{border-radius:10px;width:32px;height:32px;margin-top:-6px;font-size:1.2rem}.quiz-utility-button{margin-right:-2px}.quiz-close-button{margin-right:-12px}.quiz-utility-button__icon{width:15px;height:15px}.primary-button,.ghost-button{width:100%}.exercise-choice{min-width:0}.mode-switcher{grid-template-columns:1fr}.selection-summary__action{text-align:left}.phrase-catalog__header{display:none}.phrase-catalog__row{grid-template-columns:1fr;gap:8px}.phrase-catalog__row span:before{content:attr(data-label);color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin-bottom:4px;font-size:.76rem;font-weight:700;display:block}.modal{width:100%;max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));border-radius:24px 24px 0 0;margin-top:auto}.modal__header,.modal__content{padding:12px}.modal__header{padding-top:16px;padding-bottom:14px}.modal__content{padding-bottom:16px}.theory-pronunciation{padding:16px}.modal-overlay{align-items:flex-end;padding:32px 0 0}.text-answer-actions__row button{flex:1}.text-answer-actions__row--numeral .ghost-button--icon-only{flex:0 0 48px;width:48px;min-width:48px;padding:10px}.exercise-list{grid-template-columns:repeat(2,minmax(150px,1fr))}.choice-grid--compact{grid-template-columns:1fr}.selection-summary{flex-direction:column}.selection-summary__body{align-self:flex-start}}@media (height<=860px){.app-header{margin:12px 0}.quiz-shell{gap:12px;min-height:calc(100dvh - clamp(92px,4vh,128px));max-height:calc(100dvh - clamp(92px,4vh,128px))}.quiz-main{gap:12px}.panel.quiz-shell{padding-top:24px;padding-bottom:20px}.quiz-toolbar{top:28px;right:24px}.quiz-header{gap:6px}.quiz-screen .section-kicker{margin-top:0}.prompt-card{min-height:64px;padding:10px 12px}.prompt-body{font-size:clamp(1.05rem,2.8vh,1.65rem)}.prompt-meta{margin-top:8px;font-size:.95rem}.option-list,.text-answer-actions,.token-builder{gap:10px}.quiz-screen .option-card,.quiz-screen .primary-button,.quiz-screen .ghost-button{padding:12px 16px}.quiz-screen .primary-button{min-width:180px}.text-answer-input{margin-top:12px;padding:12px 14px}.token-builder__slots,.token-builder__tokens{gap:8px;min-height:52px;padding:10px}.token-builder__token{min-height:36px;padding:6px 12px}}@media (height<=700px){.app-header{margin:8px 0}.panel.quiz-shell{padding:20px 20px 16px}.quiz-toolbar{top:22px;right:20px}.quiz-shell,.quiz-main{gap:10px}.prompt-card{min-height:56px;padding:8px 10px}.prompt-body{font-size:clamp(1rem,2.5vh,1.4rem)}.option-list,.text-answer-actions,.token-builder{gap:8px}}