:root{--bg:#f1ede6;--card:#fbfaf7;--card-soft:#f4eee8;--line:#e5dfd6;--text:#2d3028;--muted:#6f7168;--green:#586451;--green-dark:#465242;--green-light:#c6cbbf;--rust:#c88872;--shadow:0 18px 42px #36302714;--radius-sm:4px;--radius-md:8px;--radius-lg:20px;--radius-xl:30px;--font-body:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-display:Georgia, "Times New Roman", "Noto Serif SC", serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;color:var(--text);font-family:var(--font-body);font-synthesis:none;text-rendering:optimizelegibility;background:#fff;font-size:18px}*{box-sizing:border-box}body{background:#fff;min-width:320px;min-height:100vh;margin:0}button,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}.app-shell{min-height:100vh;color:var(--text);background:radial-gradient(circle at 74% 38%, var(--ambient), transparent 30%), var(--bg);font-family:var(--font-body);transform-origin:top;width:111.111%;min-height:111.111vh;margin-left:-5.555%;transform:scale(.9)}.app-shell.cafe-theme{--bg:#f1ede6;--card:#f9f7f5;--card-soft:#e9e3dd;--line:#e2d8cf;--text:#3e2b1e;--muted:#78695d;--green:#5d4432;--green-dark:#4a3627;--green-light:#e9e3dd;--rust:#c88872;--shadow:0 18px 42px #5d44321a;--ambient:#c8887221;--radius-sm:4px;--radius-md:8px;--radius-lg:20px;--radius-xl:30px;--font-body:Poppins, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-display:Poppins, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace}.app-shell.clean-theme{--bg:#f8fafc;--card:#fff;--card-soft:#f3f4f6;--line:#e5e7eb;--text:#111827;--muted:#6b7280;--green:#3b82f6;--green-dark:#2563eb;--green-light:#dbeafe;--rust:#8b5cf6;--shadow:0 10px 24px #0f172a0f;--ambient:#3b82f614;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--font-body:Roboto, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-display:Poppins, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:Inconsolata, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace}.topbar{border-bottom:1px solid var(--line);background:color-mix(in srgb, var(--bg) 88%, transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);justify-content:space-between;align-items:center;height:64px;padding:0 34px;display:flex}.brand{color:var(--text);font-family:var(--font-display);background:0 0;border:0;align-items:center;gap:12px;padding:0;font-size:24px;display:inline-flex}.brand-mark,.avatar{color:#fff;background:var(--green);border-radius:50%;flex:none;place-items:center;width:36px;height:36px;font-family:Georgia,Times New Roman,serif;font-size:15px;display:grid}.top-nav{color:var(--muted);align-items:center;gap:16px;font-size:17px;display:flex}.top-nav button{color:var(--muted);background:0 0;border:0;border-radius:999px;padding:8px 13px;font-weight:700}.top-nav button.active{color:var(--text);background:var(--card-soft)}.theme-switch{border:1px solid var(--line);background:var(--card);border-radius:999px;gap:4px;padding:4px;display:inline-flex}.theme-switch button{min-width:56px;font-family:var(--font-mono);border-radius:999px;padding:6px 10px;font-size:14px}.theme-switch button.active{color:#fff;background:var(--green)}.divider{background:var(--line);width:1px;height:24px}.home-page{width:min(1280px,100% - 80px);margin:0 auto;padding:34px 0 48px}.eyebrow,.page-kicker{color:var(--muted);letter-spacing:.18em;margin:0 0 8px;font-size:17px;font-weight:600}.page-kicker{color:#fff;background:var(--green);letter-spacing:.02em;width:fit-content;box-shadow:0 10px 22px color-mix(in srgb, var(--green) 18%, transparent);border-radius:999px;margin-bottom:16px;padding:5px 10px;font-size:13px;font-weight:800;display:inline-flex}.home-page h1,.narrow-page h1{font-family:var(--font-display);margin:0;font-size:clamp(36px,5vw,58px);font-weight:600;line-height:1.1}.subtitle{color:var(--muted);margin:18px 0 56px;font-size:20px}.section-label{color:var(--muted);margin:0 0 14px;font-size:18px;font-weight:700}.home-topic-card{border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--card);min-height:380px;box-shadow:var(--shadow);padding:52px 56px}.tag,.mini-tag{width:fit-content;color:var(--green-dark);background:var(--card-soft);border-radius:999px;padding:7px 13px;font-size:13px;font-weight:700;display:inline-flex}.home-topic-card .tag{padding:9px 16px;font-size:18px}.home-topic-card h2{font-family:var(--font-display);margin:24px 0 4px;font-size:36px;font-weight:500}.home-topic-card p,.title-translation{color:var(--muted);margin:0}.topic-prompt{max-width:760px;color:var(--text);gap:10px;margin:24px 0 34px;font-size:20px;line-height:1.7;display:grid}.topic-prompt span{color:var(--muted);font-size:18px}.topic-prompt.compact{margin:20px 0 34px}.primary,.report-actions button,.chat-input button{color:#fff;background:var(--green);border:0;border-radius:999px;font-weight:800}.primary.large{padding:16px 26px;font-size:18px}.primary.rust{background:var(--rust)}.home-steps{grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;display:grid}.home-steps article{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);min-height:150px;padding:26px 28px}.home-steps span{color:var(--muted);font-family:var(--font-mono);align-items:center;gap:14px;display:flex}.home-steps span:after{content:"";background:var(--line);flex:1;height:1px}.home-steps span em{color:var(--green);margin-left:auto;font-style:normal}.home-steps h3{margin:24px 0 8px;font-size:30px}.home-steps p{color:var(--muted);margin:0}.narrow-page{width:min(840px,100% - 56px);margin:0 auto;padding:34px 0 56px}.learn-page{width:min(840px,100% - 56px);margin:0 auto;padding:20px 0 56px}.learn-page h2,.report-section h2{font-family:var(--font-display);margin:34px 0 16px;font-size:30px;font-weight:500}.phrase-row{flex-wrap:wrap;gap:12px;display:flex}.phrase-pill{border:1px solid var(--line);min-height:38px;color:var(--text);background:var(--card);box-shadow:var(--shadow);border-radius:999px;align-items:baseline;gap:12px;padding:9px 15px;display:inline-flex}.phrase-pill span{font-weight:700}.phrase-pill small{color:var(--muted);font-size:16px}.pattern-list{gap:12px;display:grid}.pattern-list article,.sample-answer,.correction-list article{border:1px solid var(--line);border-radius:var(--radius-lg);background:#fbfaf7b8;padding:20px 22px}.bilingual-text{gap:8px;line-height:1.7;display:grid}.english{color:var(--text);font-size:19px;font-weight:600}.chinese{color:var(--muted);font-size:17px}.sample-answer{background:var(--card);display:grid}.center-action{place-items:center;margin-top:44px;display:grid}.center-action .primary{padding:16px 28px}.center-action p{color:var(--muted);font-size:15px}.practice-page{width:min(920px,100% - 56px);margin:0 auto;padding:22px 0 28px}.practice-header{border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--card);justify-content:space-between;align-items:center;min-height:70px;padding:15px 18px;display:flex}.practice-header>div:first-child{gap:4px;display:grid}.practice-header span{color:var(--muted)}.progress-track{background:var(--card-soft);border-radius:999px;height:7px;margin:16px 0 36px;overflow:hidden}.progress-track span{border-radius:inherit;background:var(--green);height:100%;display:block}.chat-log{align-content:start;align-items:start;gap:24px;min-height:470px;padding-bottom:24px;display:grid}.chat-row{align-items:flex-start;gap:16px;display:flex}.chat-row.user{justify-content:flex-end}.bubble{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);align-self:flex-start;gap:8px;max-width:760px;padding:16px 20px;display:grid}.bubble .bilingual-text{gap:4px;line-height:1.45}.bubble .english,.bubble .chinese{line-height:1.45}.inline-play-button{vertical-align:-1px;border:1px solid var(--line);width:24px;height:24px;color:var(--green);background:var(--card);border-radius:999px;place-items:center;margin-left:8px;display:inline-grid}.inline-play-button svg{fill:currentColor;width:12px;height:12px}.inline-play-button:hover{color:#fff;background:var(--green)}.chat-row.user .bubble{color:#fff;background:var(--green);border:0;max-width:640px}.chat-row.user .english{color:#fff}.bubble small{color:var(--muted)}.chat-input{border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--card);align-items:center;gap:12px;min-height:82px;padding:12px;display:flex}.chat-input textarea{resize:none;height:56px;color:var(--text);background:0 0;border:0;outline:0;flex:1;font-size:20px}.chat-input button{color:#fff;background:color-mix(in srgb, var(--green) 45%, var(--card) 55%);flex:none;width:48px;height:48px;font-size:22px}.chat-input .send-button{opacity:.55;transition:opacity .16s,transform .16s,background-color .16s,box-shadow .16s}.chat-input .send-button.ready{opacity:1;background:var(--green);box-shadow:0 10px 22px color-mix(in srgb, var(--green) 24%, transparent)}.chat-input .send-button.ready:hover{background:var(--green-dark);transform:translateY(-1px)}.chat-input .voice-button{color:var(--green);background:var(--card-soft)}.chat-input .voice-button svg{fill:none;stroke:currentColor;stroke-width:1.9px;stroke-linecap:round;stroke-linejoin:round;width:22px;height:22px}.chat-input .voice-button.listening{color:#fff;background:var(--green);box-shadow:0 0 0 4px color-mix(in srgb, var(--green) 18%, transparent)}.score-panel{border-radius:var(--radius-lg);background:var(--card);box-shadow:var(--shadow);grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:22px 0 28px;padding:18px;display:grid}.score-card{border:1px solid var(--line);border-radius:var(--radius-lg);background:color-mix(in srgb, var(--card) 88%, var(--card-soft) 12%);gap:8px;min-height:132px;padding:18px 16px;display:grid}.score-card.overall{border-color:color-mix(in srgb, var(--green) 26%, var(--line) 74%);background:color-mix(in srgb, var(--green-light) 28%, var(--card) 72%)}.score-card span{color:var(--muted);font-size:12px;font-weight:800;line-height:1.35}.score-card strong{color:var(--text);font-family:var(--font-display);font-size:28px;font-weight:700;line-height:1.1}.score-card small{color:var(--muted);font-size:12px;line-height:1.45}.score-ring{border:8px solid;border-left-color:var(--card-soft);border-radius:50%;justify-self:center;place-items:center;width:112px;height:112px;display:grid}.score-ring.green{border-color:var(--green);border-left-color:var(--card-soft)}.score-ring.rust-ring{border-color:var(--rust);border-left-color:var(--card-soft)}.score-ring strong{font-family:var(--font-display);margin-top:18px;font-size:28px;font-weight:500}.score-ring span{color:var(--muted);margin-top:-18px;font-size:14px}.report-section ul{color:var(--text);margin:0;padding-left:18px;line-height:1.8}.correction-list{gap:14px;display:grid}.correction-list article{gap:8px;display:grid}.correction-list p,.correction-list small{margin:0;line-height:1.7}.correction-list .example-line{color:var(--muted)}.correction-list .example-line em{font-style:italic}.correction-list small{color:var(--muted)}.report-actions{justify-content:center;gap:12px;margin-top:36px;display:flex}.report-actions button{color:var(--text);background:var(--card);padding:12px 20px}.report-actions .primary{color:#fff;background:var(--green)}.record-stats{grid-template-columns:repeat(3,1fr);gap:16px;margin:32px 0;display:grid}.record-stats article{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);gap:20px;padding:24px;display:grid}.record-stats span{color:var(--muted)}.record-stats strong{font-family:var(--font-display);font-size:30px;font-weight:500}.record-list{gap:16px;display:grid}.record-list article,.record-item{border:1px solid var(--line);width:100%;color:var(--text);background:var(--card);text-align:left;border-radius:20px;justify-content:space-between;align-items:center;padding:18px 20px;display:flex}.record-item{transition:transform .16s,border-color .16s,box-shadow .16s}.record-item:hover{border-color:color-mix(in srgb, var(--green) 28%, var(--line) 72%);box-shadow:var(--shadow);transform:translateY(-2px)}.record-list div{gap:4px;display:grid}.record-list span{color:var(--muted);font-size:16px}.record-list>article>strong,.record-item>strong{color:var(--green);font-family:Georgia,Times New Roman,serif;font-size:24px;font-weight:500}.back-link{border:1px solid var(--line);width:38px;height:38px;color:var(--text);background:var(--card);border-radius:50%;place-items:center;padding:0;display:grid}.detail-heading-row{align-items:center;gap:12px;margin-bottom:22px;display:flex}.detail-heading-row .page-kicker{margin-bottom:0}.record-detail-page>h1{margin-bottom:14px}.record-detail-page>.title-translation{margin-bottom:42px}.detail-section{margin-top:48px}.detail-section+.detail-section{margin-top:56px}.detail-section h2{font-family:var(--font-display);margin:0 0 18px;font-size:24px;font-weight:600}.detail-section .report-section{margin-top:42px}.detail-section .report-section+.report-section{margin-top:48px}.detail-section .score-panel+.report-section{margin-top:46px}.detail-card,.record-chat-message{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);padding:18px 20px}.record-chat-log{gap:14px;display:grid}.record-chat-message{gap:8px;display:grid}.record-chat-message>span{color:var(--muted);font-size:13px;font-weight:800}.record-chat-message.user{border-color:color-mix(in srgb, var(--green) 24%, var(--line) 76%);background:color-mix(in srgb, var(--green-light) 22%, var(--card) 78%)}@media (width<=760px){.topbar{padding:0 18px}.divider,.theme-switch+.divider{display:none}.home-page{width:min(100% - 28px,1180px)}.home-topic-card{padding:28px}.home-steps,.score-panel,.record-stats{grid-template-columns:1fr}.practice-header{flex-direction:column;align-items:stretch;gap:12px}.bubble{max-width:100%}}