:root{color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#102a43;background:#f6f8fb;font-synthesis:none;--ink: #102a43;--muted: #627d98;--line: #d9e2ec;--surface: #ffffff;--navy: #16324f;--teal: #0f8b8d;--teal-soft: #e8f7f4;--coral: #ed6a5a;--yellow: #f4c95d;--blue: #377dff;--blue-soft: #edf4ff;--shadow: 0 18px 50px rgba(16, 42, 67, .09)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 4% 2%,rgba(15,139,141,.12),transparent 24rem),radial-gradient(circle at 98% 12%,rgba(244,201,93,.16),transparent 25rem),#f6f8fb}button,input,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid rgba(55,125,255,.36);outline-offset:3px}.app-shell{min-height:100vh}.app-header{position:sticky;z-index:20;top:0;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:78px;padding:.85rem clamp(1rem,4vw,4rem);border-bottom:1px solid rgba(217,226,236,.85);background:#fffffff0;backdrop-filter:blur(18px)}.brand-button{display:flex;align-items:center;gap:.8rem;padding:0;border:0;color:var(--ink);background:transparent;text-align:left}.brand-button>span:last-child{display:grid}.brand-button strong{font-size:.98rem}.brand-button small{color:var(--muted);font-weight:650}.brand-mark{display:grid;place-items:center;width:45px;height:45px;border-radius:15px;color:#fff;background:linear-gradient(135deg,var(--teal),#0b6075);box-shadow:0 10px 24px #0f8b8d38;font-weight:900;letter-spacing:.05em}.score-menu{position:relative}.score-menu-button{display:flex;align-items:center;gap:.7rem;padding:.55rem .8rem;border:1px solid #cbd5e1;border-radius:16px;color:var(--ink);background:#f8fafc}.score-menu-button>span:nth-child(2){display:grid;min-width:80px;text-align:left}.score-menu-button small{color:var(--muted);font-size:.66rem;font-weight:800;letter-spacing:.08em}.score-menu-button strong{font-size:1.1rem}.score-popover{position:absolute;top:calc(100% + .65rem);right:0;display:grid;gap:.5rem;width:min(300px,86vw);padding:1rem;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow)}.score-popover span{color:var(--muted);font-size:.86rem}.score-popover button{justify-self:start;padding:0;border:0;color:#b42318;background:transparent;font-size:.8rem;font-weight:750}.page{width:min(1180px,calc(100% - 2rem));margin:0 auto;padding:clamp(2.2rem,6vw,5.5rem) 0 6rem}.hero{max-width:820px;margin-bottom:clamp(2.5rem,6vw,5rem)}.compact-hero{margin-bottom:2.4rem}.hero-centred{margin-inline:auto;text-align:center}.eyebrow,.task-kicker{margin:0 0 .6rem;color:var(--teal);font-size:.75rem;font-weight:900;letter-spacing:.12em}.hero h1,.lesson-heading h1{margin:0;color:var(--ink);font-size:clamp(2.3rem,7vw,5rem);line-height:.98;letter-spacing:-.055em}.compact-hero h1,.lesson-heading h1{font-size:clamp(2rem,5vw,3.8rem);line-height:1.04}.hero h1 em{color:var(--teal);font-family:Georgia,serif;font-weight:500}.hero-copy{max-width:680px;margin:1.25rem 0 0;color:var(--muted);font-size:clamp(1rem,2.2vw,1.2rem);line-height:1.7}.hero-support{margin:.8rem 0 0;color:var(--teal);font-size:1.1rem;font-weight:750}.progress-chip,.mode-pill,.theme-score,.best-score{display:inline-flex;align-items:center;margin-top:1rem;padding:.45rem .7rem;border-radius:999px;color:#365267;background:#eef2f6;font-size:.78rem;font-weight:800}.directory-section+.directory-section{margin-top:4.5rem}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1.35rem}.section-heading h2{margin:0;font-size:clamp(1.6rem,4vw,2.4rem);letter-spacing:-.035em}.mode-pill{margin:0;white-space:pre}.theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:1rem}.theme-card{position:relative;display:grid;min-height:245px;padding:1.35rem;overflow:hidden;border:1px solid var(--line);border-radius:24px;color:var(--ink);background:var(--surface);box-shadow:0 8px 28px #102a430e;text-align:left;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.theme-card:after{position:absolute;right:-35px;bottom:-60px;width:150px;height:150px;border-radius:50%;background:#0f8b8d14;content:""}.theme-card-listening-spelling:after{background:#377dff17}.theme-card:hover,.subtopic-card:hover,.mode-card:hover{transform:translateY(-4px);border-color:#0f8b8d8c;box-shadow:var(--shadow)}.theme-number{align-self:start;color:var(--muted);font-size:.7rem;font-weight:900;letter-spacing:.11em}.theme-emoji{align-self:end;font-size:2.3rem}.theme-card strong{align-self:end;max-width:18ch;font-size:1.25rem;line-height:1.15}.support-text,.theme-card>span:nth-last-child(2){color:var(--muted)}.theme-score{justify-self:start;margin-top:.55rem}.back-button{margin-bottom:1.4rem;padding:.55rem .75rem;border:0;border-radius:12px;color:var(--muted);background:transparent;font-weight:750}.back-button:hover{color:var(--ink);background:#e9eff5}.subtopic-grid,.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.subtopic-card,.mode-card{display:grid;gap:.55rem;min-height:180px;padding:1.35rem;border:1px solid var(--line);border-radius:22px;color:var(--ink);background:#fff;box-shadow:0 8px 28px #102a430e;text-align:left;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.subtopic-index{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:var(--teal);background:var(--teal-soft);font-size:.75rem;font-weight:900}.subtopic-card strong,.mode-card strong{align-self:end;font-size:1.15rem}.subtopic-card>span:not(.subtopic-index),.subtopic-card small,.mode-card p{margin:0;color:var(--muted);line-height:1.5}.mode-card{min-height:260px}.mode-emoji{font-size:2.6rem}.mode-card strong{font-size:1.5rem}.best-score{justify-self:start}.directory-controls{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1.2rem}.search-field,.response-form label{display:grid;gap:.45rem;width:min(440px,100%);color:var(--muted);font-size:.78rem;font-weight:850;letter-spacing:.04em}input,textarea{width:100%;border:1px solid #bcccdc;border-radius:14px;color:var(--ink);background:#fff;font-size:1rem;letter-spacing:0}input{min-height:48px;padding:.7rem .85rem}textarea{padding:.85rem;resize:vertical;line-height:1.55}.level-tabs{display:flex;flex-wrap:wrap;gap:.45rem}.level-tabs button{padding:.55rem .7rem;border:1px solid var(--line);border-radius:999px;color:var(--muted);background:#fff;font-size:.72rem;font-weight:850}.level-tabs button.active{border-color:var(--teal);color:#fff;background:var(--teal)}.headword-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.85rem}.headword-card{display:grid;gap:.48rem;padding:1rem;border:1px solid var(--line);border-radius:19px;background:#fff;box-shadow:0 7px 20px #102a430b}.headword-title{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.headword-title strong{font-size:1.15rem}.level-tag{justify-self:start;padding:.25rem .45rem;border-radius:8px;font-size:.58rem;font-weight:900;letter-spacing:.08em}.level-beginner{color:#087f5b;background:#e6fcf5}.level-intermediate{color:#1c5d99;background:#e7f5ff}.level-advanced{color:#9c36b5;background:#f8f0fc}.part-of-speech{color:var(--muted);font-size:.78rem}.definition-zh{min-height:1.5em;color:#365267}.mini-scores{display:flex;gap:.6rem;color:var(--muted);font-size:.76rem;font-weight:800}.card-open-button{justify-self:stretch;margin-top:.35rem;padding:.55rem .7rem;border:0;border-radius:11px;color:#0b6171;background:var(--teal-soft);font-weight:850}.speech-button{display:inline-grid;flex:0 0 auto;place-items:center;width:38px;height:38px;padding:0;border:1px solid #c9d8e5;border-radius:50%;background:#fff}.speech-button:hover{background:#edf6ff}.lesson-heading{margin:0 0 1.4rem}.lesson-progress{margin-bottom:1.2rem}.lesson-progress-copy{display:flex;justify-content:space-between;gap:1rem;margin-bottom:.5rem;color:var(--muted);font-size:.8rem;font-weight:800}.lesson-progress-copy strong{color:var(--teal)}.progress-track{height:8px;overflow:hidden;border-radius:999px;background:#dfe8ef}.progress-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--teal),#2cb67d);transition:width .22s ease}.task-card{display:grid;gap:1.15rem;margin-bottom:1rem;padding:clamp(1.1rem,3.5vw,2rem);border:1px solid var(--line);border-radius:25px;background:#fff;box-shadow:var(--shadow)}.revealed-card{border-color:#0f8b8d59;background:linear-gradient(180deg,#fff,#f7fffd)}.question-sentence{margin:0;font-family:Georgia,serif;font-size:clamp(1.3rem,3.5vw,2rem);line-height:1.5}.question-sentence mark{padding:.1em .22em;border-radius:6px;color:#8b4513;background:#fff3bf}.option-grid{display:grid;gap:.65rem}.option-row{display:grid;grid-template-columns:1fr auto;gap:.55rem}.answer-option{min-height:52px;padding:.75rem 1rem;border:1px solid #bcccdc;border-radius:14px;color:var(--ink);background:#fff;text-align:left;font-weight:750}.answer-option:hover:not(:disabled){border-color:var(--teal);background:var(--teal-soft)}.revealed-target{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;border-radius:18px;background:var(--teal-soft)}.revealed-target h2{margin:0;font-size:clamp(1.45rem,4vw,2.2rem)}.revealed-target p{margin:.3rem 0 0;color:#29666a}.response-form{display:grid;gap:.7rem}.response-form label{width:100%}.primary-button,.secondary-button,.ai-button{min-height:48px;padding:.7rem 1rem;border-radius:14px;font-weight:850}.primary-button{border:1px solid var(--teal);color:#fff;background:var(--teal)}.primary-button:hover:not(:disabled){background:#0a7476}.secondary-button{border:1px solid #bcccdc;color:var(--ink);background:#fff}.ai-button{border:1px solid #7c55c7;color:#fff;background:linear-gradient(135deg,#7c55c7,#4c6ef5)}button:disabled{cursor:not-allowed;opacity:.62}.next-button{display:block;margin:1rem 0 0 auto}.feedback{margin:1rem 0;padding:.85rem 1rem;border-radius:14px;font-weight:720;line-height:1.5}.feedback-correct{color:#087f5b;background:#e6fcf5}.feedback-incorrect{color:#9c2c2c;background:#fff0f0}.feedback-checking{color:#5f3dc4;background:#f3f0ff}.model-answer{position:relative;padding:1rem;border-left:4px solid var(--teal);border-radius:6px 15px 15px 6px;background:#f3faf8}.model-answer p{margin:.45rem 0;line-height:1.6}.model-answer .speech-button{position:absolute;top:.65rem;right:.65rem}.idea-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.idea-card{position:relative;display:grid;gap:.25rem;padding:1rem;border:1px solid #d6e4f0;border-radius:16px;background:var(--blue-soft)}.idea-card span{color:var(--muted)}.idea-card .speech-button{position:absolute;top:.6rem;right:.6rem}.word-count{justify-self:end;color:var(--muted);font-size:.75rem}.listening-card{min-height:390px;align-content:start}.large-audio-button{display:flex;align-items:center;gap:.75rem;justify-self:start;padding:.6rem .9rem .6rem .6rem;border:1px solid #b7d1e5;border-radius:999px;color:#144d68;background:#edf8ff;font-weight:850}.large-audio-button .speech-button{border:0;box-shadow:0 4px 14px #377dff24}.transcript{border-left-color:var(--blue);background:var(--blue-soft)}.result-page{max-width:720px}.score-ring{display:grid;place-items:center;width:160px;height:160px;margin:0 auto 1.5rem;border:14px solid;border-radius:50%;background:#fff;box-shadow:var(--shadow)}.score-ring span{font-size:2.1rem;font-weight:900}.score-ring-high{border-color:#2cb67d;color:#087f5b}.score-ring-mid{border-color:var(--yellow);color:#8a5b00}.score-ring-low{border-color:var(--coral);color:#a22e22}.score-card{overflow:hidden;margin-bottom:1.25rem;border:1px solid var(--line);border-radius:20px;background:#fff}.score-row{display:flex;justify-content:space-between;gap:1rem;padding:.9rem 1rem;border-bottom:1px solid #edf2f7}.score-row:last-child{border-bottom:0}.score-total{color:#fff;background:var(--navy)}.result-actions{display:grid;gap:.7rem}.state-page{display:grid;min-height:65vh;place-items:center;align-content:center;text-align:center}.state-page h1{max-width:18ch;margin:.5rem 0;font-size:clamp(2rem,5vw,3.5rem)}.spinner{width:50px;height:50px;border:5px solid #dce7ef;border-top-color:var(--teal);border-radius:50%;animation:spin .85s linear infinite}.state-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;color:#fff;background:var(--coral);font-size:2rem;font-weight:900}.empty-state{padding:2rem;border:1px dashed #b9c9d6;border-radius:18px;color:var(--muted);text-align:center}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:720px){.app-header{min-height:68px;padding:.65rem .8rem}.brand-button strong{display:none}.brand-button small{font-size:.75rem}.brand-mark{width:40px;height:40px;border-radius:13px}.score-menu-button{padding:.45rem .55rem}.score-menu-button>span:first-child,.score-menu-button>span:last-child{display:none}.score-menu-button>span:nth-child(2){min-width:70px}.page{width:min(100% - 1rem,1180px);padding-top:2rem}.directory-controls,.section-heading{align-items:stretch;flex-direction:column}.mode-pill{align-self:start}.search-field{width:100%}.idea-grid{grid-template-columns:1fr}.lesson-progress-copy{font-size:.74rem}.question-sentence{font-size:1.25rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}