:root{color-scheme:light;--color-paper: #fff8ef;--color-surface: #ffffff;--color-ink: #20304a;--color-muted: #627084;--color-line: #e5dfd4;--color-coral: #ff6b5f;--color-sea: #42b7a4;--color-sun: #f7c95c;--color-violet: #8c82e8;--color-blue: #2f6f9f;--shadow-soft: 0 18px 48px rgba(32, 48, 74, .14);--radius-sm: 6px;--radius-md: 8px;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--font-body: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;--font-display: "Trebuchet MS", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--color-paper: #162033;--color-surface: #20304a;--color-ink: #fff8ef;--color-muted: #bcc6d4;--color-line: #3a4962;--shadow-soft: 0 18px 48px rgba(0, 0, 0, .28)}}:root[data-theme=dark]{color-scheme:dark;--color-paper: #162033;--color-surface: #20304a;--color-ink: #fff8ef;--color-muted: #bcc6d4;--color-line: #3a4962;--shadow-soft: 0 18px 48px rgba(0, 0, 0, .28)}@media(prefers-color-scheme:dark){:root[data-theme=system]{color-scheme:dark;--color-paper: #162033;--color-surface: #20304a;--color-ink: #fff8ef;--color-muted: #bcc6d4;--color-line: #3a4962;--shadow-soft: 0 18px 48px rgba(0, 0, 0, .28)}}*{box-sizing:border-box}html{min-width:320px;background:var(--color-paper)}body{margin:0;font-family:var(--font-body);background:linear-gradient(180deg,rgba(66,183,164,.12),transparent 42vh),var(--color-paper);color:var(--color-ink)}button,input,select,textarea{font:inherit}button,a,[role=button]{touch-action:manipulation}a{color:inherit}:focus-visible{outline:3px solid var(--color-sun);outline-offset:3px}.boot-screen{display:grid;min-height:100dvh;place-items:center;padding:var(--space-6);text-align:center}:root[data-motion=reduce] *,:root[data-motion=reduce] *:before,:root[data-motion=reduce] *:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}.app-shell{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100dvh}.sidebar{position:sticky;top:0;display:flex;height:100dvh;flex-direction:column;gap:var(--space-4);border-right:1px solid var(--color-line);background:#fff8efd1;padding:var(--space-5);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}[data-theme=dark] .sidebar{background:#20304ae0}.brand{display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-display);font-size:1.25rem;font-weight:800}.brand img{width:44px;height:44px}.nav-list{display:grid;gap:var(--space-2)}.nav-link{position:relative;display:flex;min-height:44px;align-items:center;gap:var(--space-3);border:1px solid transparent;border-left:4px solid transparent;border-radius:var(--radius-md);padding:0 var(--space-3);background:#ffffff7a;color:var(--color-ink);font-weight:760;text-decoration:none;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}.nav-link svg{flex:0 0 auto;color:var(--nav-accent, var(--color-sea))}.nav-link:hover,.nav-link[aria-current=page]{background:var(--color-surface);border-color:#20304a1f;border-left-color:var(--nav-accent, var(--color-sea))}.nav-link:hover{transform:translate(1px)}.nav-link[aria-current=page]{box-shadow:inset 0 0 0 1px #20304a0a,var(--shadow-soft)}[data-theme=dark] .nav-link{background:#ffffff0d}[data-theme=dark] .nav-link:hover,[data-theme=dark] .nav-link[aria-current=page]{border-color:#fff8ef29;border-left-color:var(--nav-accent, var(--color-sea))}.shell-main{min-width:0;padding:var(--space-6) clamp(var(--space-4),4vw,var(--space-8)) 6rem}.page{width:min(1180px,100%);margin:0 auto}.page-header{display:grid;gap:var(--space-3);margin-bottom:var(--space-6)}.eyebrow{color:var(--color-coral);font-weight:800}h1,h2,h3{margin:0;font-family:var(--font-display);line-height:1.12;letter-spacing:0}h1{font-size:clamp(2rem,7vw,4.5rem)}h2{font-size:clamp(1.4rem,3vw,2rem)}h3{font-size:1.1rem}p{line-height:1.72}.hero{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:var(--space-8);align-items:center;padding-block:var(--space-8)}.daily-hero{min-height:min(560px,72dvh)}.hero-visual{display:grid;place-items:center}.hero-visual img{width:min(280px,74vw)}.grid{display:grid;gap:var(--space-4)}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.panel,.item-card{border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-soft)}.panel{padding:var(--space-5)}.item-card{display:grid;gap:var(--space-3);padding:var(--space-4)}.item-card.discover-card{color:inherit;text-decoration:none}.item-card.discover-card:hover{border-color:var(--color-sea)}.map-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,240px));gap:var(--space-4);margin-bottom:var(--space-5)}.chapter-list{display:grid;gap:var(--space-6)}.chapter-section{display:grid;gap:var(--space-4)}.chapter-heading{display:flex;align-items:end;justify-content:space-between;gap:var(--space-4);border-bottom:1px solid var(--color-line);padding-bottom:var(--space-3)}.button{display:inline-flex;min-height:44px;cursor:pointer;align-items:center;justify-content:center;gap:var(--space-2);border:1px solid transparent;border-radius:var(--radius-md);background:var(--color-ink);color:var(--color-paper);padding:0 var(--space-4);text-decoration:none;transition:transform .18s ease,background .18s ease,border .18s ease}.button:hover{transform:translateY(-1px)}.button.secondary{border-color:var(--color-line);background:var(--color-surface);color:var(--color-ink)}.button.ghost{background:transparent;color:var(--color-ink)}.button:disabled{cursor:not-allowed;opacity:.58;transform:none}.toolbar{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}.field{display:grid;gap:var(--space-2)}.field input,.field select,.field textarea,.search-input{min-height:44px;width:100%;border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-ink);padding:0 var(--space-3)}.field textarea{min-height:110px;padding-block:var(--space-3)}.badge{display:inline-flex;width:fit-content;align-items:center;border-radius:999px;background:#42b7a424;color:var(--color-ink);padding:.25rem .65rem;font-size:.84rem;font-weight:700}.progress{height:10px;overflow:hidden;border-radius:999px;background:#20304a21}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--color-sea),var(--color-sun))}.bottom-nav{display:none}.lesson-runner{display:grid;gap:var(--space-5)}.option-list{display:grid;gap:var(--space-3)}.option-button{min-height:48px;cursor:pointer;border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-ink);padding:var(--space-3);text-align:left}.option-button[aria-pressed=true]{border-color:var(--color-sea);background:#42b7a429}.feedback{border-left:5px solid var(--color-coral);padding:var(--space-3) var(--space-4);background:#ff6b5f1f}.story-text span{cursor:help;border-bottom:1px dotted var(--color-sea)}@media(max-width:860px){.app-shell{display:block}.sidebar{display:none}.shell-main{padding:var(--space-4) var(--space-4) calc(5rem + env(safe-area-inset-bottom))}.hero,.grid.two,.grid.three,.map-toolbar{grid-template-columns:1fr}.chapter-heading{align-items:start;flex-direction:column}.bottom-nav{position:fixed;right:0;bottom:0;left:0;z-index:20;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--color-line);background:#fff8eff0;padding:var(--space-2) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}[data-theme=dark] .bottom-nav{background:#20304af0}.bottom-nav .nav-link{min-height:52px;flex-direction:column;justify-content:center;gap:.15rem;border-left-width:1px;border-top:3px solid transparent;padding:0;font-size:.78rem}.bottom-nav .nav-link:hover,.bottom-nav .nav-link[aria-current=page]{border-left-color:transparent;border-top-color:var(--nav-accent, var(--color-sea));transform:none}}.option-button{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.option-button.is-selected,.option-button[aria-pressed=true]{border-color:var(--color-sea);background:#42b7a429}.option-button.is-correct{border-color:var(--color-sea);background:#42b7a42e}.option-button.is-wrong{border-color:var(--color-coral);background:#ff6b5f24}.hint-card,.feedback-card,.self-check-card,.answer-comparison{border:1px solid var(--color-line);border-radius:var(--radius-md);padding:var(--space-4)}.hint-card{border-left:5px solid var(--color-sun);background:#f7c95c24}.feedback-card{display:grid;gap:var(--space-3)}.feedback-card.is-correct{border-color:#42b7a499;background:#42b7a41f}.feedback-card.is-wrong{border-color:#ff6b5f94;background:#ff6b5f1a}.feedback-title{display:flex;align-items:center;gap:var(--space-2);font-size:1.08rem}.answer-comparison{display:grid;gap:var(--space-3);background:var(--color-surface)}.answer-comparison.compact{grid-template-columns:repeat(2,minmax(0,1fr))}.answer-comparison>div{display:grid;gap:var(--space-1)}.answer-comparison span,.result-label,.take-away>span,.completion-stats span{color:var(--color-muted);font-size:.88rem}.answer-comparison strong{overflow-wrap:anywhere;font-size:1.05rem}.result-label{width:fit-content;border-radius:999px;padding:var(--space-2) var(--space-3);font-weight:800}.result-label.is-correct{background:#42b7a429;color:var(--color-ink)}.result-label.is-wrong{background:#ff6b5f24;color:var(--color-ink)}.feedback-card .panel{width:100%;box-shadow:none}.builder{display:grid;gap:var(--space-4)}.builder-answer,.builder-bank{display:flex;min-height:64px;flex-wrap:wrap;align-items:center;gap:var(--space-2);border-radius:var(--radius-md);padding:var(--space-3)}.builder-answer{border:2px dashed var(--color-line);background:#42b7a40d}.builder-answer>span{color:var(--color-muted)}.builder-answer button,.builder-bank button{min-height:40px;cursor:pointer;border:1px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-ink);padding:0 var(--space-3);font:inherit}.builder-answer button{border-color:var(--color-sea);background:#42b7a424}.builder-bank{background:#20304a0d}.builder-bank button:disabled{cursor:default;opacity:.34}.lesson-topbar,.lesson-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.lesson-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-3);color:var(--color-muted)}.completion-card{text-align:left}.completion-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}.completion-stats>div{display:grid;gap:var(--space-1);border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-surface);padding:var(--space-4)}.completion-stats strong{font-size:1.5rem}.take-away{display:grid;gap:var(--space-2);border-left:5px solid var(--color-sun);border-radius:var(--radius-sm);background:#f7c95c1f;padding:var(--space-4)}.take-away strong{font-size:1.25rem}@media(max-width:620px){.answer-comparison.compact,.completion-stats{grid-template-columns:1fr}.lesson-topbar,.lesson-actions{align-items:stretch;flex-direction:column}.lesson-meta{justify-content:flex-start}.lesson-actions .button{width:100%}}.segmented-control{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);margin-bottom:var(--space-5);border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-surface);padding:var(--space-2);box-shadow:var(--shadow-soft)}.segmented-control button{display:inline-flex;min-height:46px;cursor:pointer;align-items:center;justify-content:center;gap:var(--space-2);border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;color:var(--color-muted);font:inherit;font-weight:800}.segmented-control button[aria-selected=true]{border-color:var(--color-line);background:#42b7a424;color:var(--color-ink)}.segmented-control button span{display:inline-grid;min-width:1.75rem;min-height:1.75rem;place-items:center;border-radius:999px;background:#20304a17;padding-inline:.35rem;font-size:.8rem}.empty-state{display:grid;gap:var(--space-3);text-align:left}.completion-stats{grid-template-columns:repeat(4,minmax(0,1fr))}@media(max-width:760px){.segmented-control{grid-template-columns:1fr}.completion-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:420px){.completion-stats{grid-template-columns:1fr}}.shadowing-checklist{display:flex;flex-wrap:wrap;gap:var(--space-2)}.shadowing-checklist span{border:1px solid var(--color-line);border-radius:999px;background:#20304a0d;color:var(--color-muted);padding:var(--space-2) var(--space-3);font-size:.88rem;font-weight:800}.shadowing-checklist span.is-done{border-color:#42b7a48c;background:#42b7a424;color:var(--color-ink)}@media(prefers-color-scheme:dark){[data-theme=system] .sidebar{background:#20304ae6}[data-theme=system] .bottom-nav{background:#20304af2}}.status-message{margin-top:var(--space-4);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4)}.status-message.is-success{background:#42b7a424}.status-message.is-error{background:#ff6b5f24}.speech-rate{min-width:170px}.visual-option-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}.visual-option{position:relative;display:grid;min-height:170px;cursor:pointer;place-items:center;gap:var(--space-2);border:1px solid var(--color-line);border-radius:var(--radius-md);background:linear-gradient(180deg,rgba(66,183,164,.08),var(--color-surface));color:var(--color-ink);padding:var(--space-4);text-align:center}.visual-option:hover,.visual-option.is-selected{border-color:var(--color-sea);transform:translateY(-1px)}.visual-option.is-correct{border-color:var(--color-sea);background:#42b7a429}.visual-option.is-wrong{border-color:var(--color-coral);background:#ff6b5f1f}.visual-option-art{display:grid;width:72px;height:72px;place-items:center;border-radius:22px;background:#ffffffb8;box-shadow:inset 0 0 0 1px var(--color-line);font-size:2.4rem}[data-theme=dark] .visual-option-art{background:#ffffff14}.visual-option-label{color:var(--color-muted);font-size:.82rem;font-weight:800}.story-goals,.story-quiz{display:grid;gap:var(--space-3);border-top:1px solid var(--color-line);padding-top:var(--space-3)}.story-goals ul{margin:0;padding-left:1.2rem}.saving-indicator{display:inline-flex;align-items:center;gap:var(--space-1);color:var(--color-muted);font-size:.85rem}.saving-indicator svg{animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.vocabulary-examples{display:grid;gap:var(--space-2);margin:0;padding-left:1.1rem}.pattern-examples{display:grid;gap:var(--space-2);border-left:4px solid var(--color-sea);padding-left:var(--space-3)}@media(max-width:620px){.visual-option-list{grid-template-columns:1fr}.visual-option{min-height:140px}}.lesson-brief{margin-bottom:1rem}.lesson-brief-heading,.brief-block,.completion-challenge,.daily-checkpoint{display:flex;gap:.8rem;align-items:flex-start}.lesson-brief-heading{justify-content:space-between;align-items:center;margin-bottom:1rem}.lesson-brief-heading h2,.brief-block h3{margin:.2rem 0}.lesson-brief-grid{margin-bottom:.8rem}.brief-block{padding:.9rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-soft)}.brief-block ul{margin:.45rem 0 0;padding-left:1.1rem}.brief-block li+li{margin-top:.35rem}.lesson-dialogue{border-top:1px solid var(--border);padding-top:.85rem}.lesson-dialogue summary{display:flex;gap:.5rem;align-items:center;cursor:pointer;font-weight:700}.dialogue-lines{display:grid;gap:.6rem;margin:.8rem 0}.dialogue-lines div{padding:.65rem .8rem;border-radius:var(--radius-sm);background:var(--surface-soft)}.dialogue-lines p{margin:0 0 .2rem;font-weight:700}.completion-challenge{margin:.9rem 0 0;padding:.8rem;border-radius:var(--radius-sm);background:var(--accent-soft)}.daily-checkpoint{justify-content:space-between;align-items:center;padding:1rem;border-radius:var(--radius-md);background:var(--accent-soft);border:1px solid var(--accent)}.daily-checkpoint h3{margin:.2rem 0}.daily-checkpoint p{margin:0}.example-stack,.error-stack{display:grid;gap:.6rem;margin-top:.7rem}.example-stack p,.error-stack>div{margin:0;padding:.65rem;border-radius:var(--radius-sm);background:var(--surface-soft)}.example-stack span{display:block}.example-stack span:first-child{font-weight:700}.error-stack small{display:block;margin-top:.25rem}.pronunciation-focus{display:grid;gap:.25rem;padding:.7rem;border-radius:var(--radius-sm);background:var(--surface-soft)}.practice-steps{padding-left:1.2rem}.practice-steps li+li{margin-top:.3rem}.visual-option small{display:block;opacity:.78}@media(max-width:700px){.lesson-brief-heading,.daily-checkpoint{align-items:stretch;flex-direction:column}.daily-checkpoint .button{width:100%}}