:root { --ink:#1f2933; --muted:#65727e; --line:#e8e3da; --paper:#fffdf9; --cream:#f5f1e9; --accent:#e06e4f; --accent-dark:#bd5137; --green:#24735b; --green-bg:#edf8f1; --red:#b8493e; --red-bg:#fff0ec; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:linear-gradient(135deg,#fbf8f1 0%,#f1f6f2 100%); font-family:ui-rounded,"PingFang SC","Microsoft YaHei",system-ui,sans-serif; min-height:100vh; }
button,input { font:inherit; }
button { cursor:pointer; }
.app-shell { width:min(900px,calc(100% - 32px)); margin:auto; padding:26px 0 48px; }
.home-button { background:var(--ink); color:white; padding:12px 18px; margin:-12px 0 28px; }
.home-button:hover { background:#384654; }
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:62px; }
.brand { color:var(--ink); text-decoration:none; font-size:26px; font-weight:800; letter-spacing:-1px; display:flex; align-items:baseline; gap:9px; }.brand span { color:var(--accent); }.brand small { font-size:11px; color:var(--muted); font-weight:600; letter-spacing:.4px; text-transform:uppercase; }
.progress-wrap { display:none; width:150px; font-size:12px; color:var(--muted); text-align:right; }.progress { height:5px; margin-top:7px; background:#dedbd3; border-radius:4px; overflow:hidden; }.progress i { display:block; width:25%; height:100%; background:var(--accent); transition:width .3s; }
.eyebrow,.label { margin:0 0 10px; color:var(--accent-dark); font-size:13px; font-weight:800; letter-spacing:.5px; }.label { display:block; color:var(--muted); letter-spacing:0; }
h1,h2,p { margin-top:0; } h1 { font-size:clamp(34px,6vw,56px); letter-spacing:-2.3px; line-height:1.1; margin-bottom:20px; } h2 { font-size:26px; letter-spacing:-1px; margin-bottom:0; }.intro { font-size:17px; line-height:1.8; color:var(--muted); max-width:650px; }
.scene-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:44px 0 24px; }.scene-card { border:1px solid var(--line); border-radius:18px; text-align:left; padding:22px; background:rgba(255,253,249,.82); transition:.2s transform,.2s box-shadow; min-height:192px; }.scene-card:hover { transform:translateY(-4px); box-shadow:0 12px 28px #5b53431c; }.scene-icon { display:block; font-size:30px; margin-bottom:20px; }.scene-card b { display:block; font-size:19px; margin-bottom:9px; }.scene-card span { color:var(--muted); font-size:14px; line-height:1.55; }.method-note { border-left:3px solid var(--accent); padding:13px 15px; color:var(--muted); line-height:1.65; background:#fffaf4; border-radius:0 10px 10px 0; }.method-note em { color:var(--ink); font-style:normal; font-weight:700; }
.hidden { display:none!important; }.practice-view { max-width:720px; margin:auto; }.back-btn { border:0; background:transparent; color:var(--muted); padding:0; font-size:14px; margin:-20px 0 30px; }.practice-head { display:flex; align-items:end; justify-content:space-between; margin-bottom:23px; }.practice-head .eyebrow { margin-bottom:7px; }.step-label { font-size:13px; color:var(--muted); background:#eeeae2; border-radius:99px; padding:7px 10px; }
.card { background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:22px; }.prompt-card { margin-bottom:22px; }.chinese-prompt { font-size:24px; line-height:1.5; margin-bottom:8px; font-weight:700; letter-spacing:-.5px; }.context-prompt { color:var(--muted); margin-bottom:0; line-height:1.6; font-size:14px; }.sentence-area { margin-bottom:17px; }.answer-area { min-height:68px; border:1.5px dashed #cfc7bb; border-radius:12px; padding:10px; display:flex; align-items:center; flex-wrap:wrap; gap:8px; background:#fffdf9; }.placeholder { color:#a8a096; font-size:15px; }.word-bank { display:flex; flex-wrap:wrap; gap:9px; min-height:48px; }.word { border:1px solid #dcd5ca; background:white; color:var(--ink); border-radius:9px; padding:10px 13px; box-shadow:0 2px 0 #dfd8cd; font-size:16px; }.word:hover { border-color:var(--accent); color:var(--accent-dark); }.word.chosen { background:#f1eee8; color:#a49b8e; text-decoration:line-through; box-shadow:none; }.answer-word { background:#fbdfd6; border-radius:8px; padding:8px 10px; font-size:16px; }.actions { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }.button { border:0; border-radius:10px; padding:11px 16px; font-weight:700; }.primary { color:white; background:var(--accent); }.primary:hover { background:var(--accent-dark); }.ghost { color:var(--muted); background:transparent; border:1px solid #d9d2c7; }.feedback { margin-top:22px; border-radius:12px; padding:17px 18px; line-height:1.65; }.feedback.success { background:var(--green-bg); color:#195643; }.feedback.error { background:var(--red-bg); color:#7e352e; }.feedback strong { display:block; margin-bottom:5px; }.feedback p { margin:6px 0 0; }.feedback em { font-style:normal; font-weight:700; }.pattern-card { margin-bottom:17px; }.correct-sentence { font-family:Georgia,serif; font-size:28px; margin:5px 0 9px; color:#23463d; }.pattern-note { color:var(--muted); line-height:1.65; margin-bottom:15px; }.audio-btn { color:var(--green); border:1px solid #b7d9ca; border-radius:8px; background:white; padding:8px 10px; font-weight:700; font-size:14px; }.transfer-box { padding:20px 0; }.transfer-prompt { font-size:18px; line-height:1.65; margin:4px 0 13px; }.transfer-box input { border:1.5px solid #cfc7bb; border-radius:10px; padding:13px; font-size:16px; width:100%; outline:none; }.transfer-box input:focus { border-color:var(--accent); box-shadow:0 0 0 3px #f6d9d0; }.finish-step { text-align:center; padding:32px 0; }.finish-mark { width:62px; height:62px; border-radius:50%; display:grid; place-items:center; font-size:30px; color:white; background:var(--green); margin:0 auto 20px; }.finish-step .intro { margin:16px auto; }.finish-step .actions { justify-content:center; }
.step-section-label { color:var(--accent-dark); font-weight:800; font-size:14px; margin:30px 0 12px; }
.word.punctuation { min-width:38px; padding-inline:10px; }.answer-word.punctuation { margin-left:-8px; }
.feedback-actions { display:flex; margin-top:14px; gap:8px; }.feedback-actions .button { background:white; }.feedback-actions .primary { background:var(--accent); }
@media(max-width:640px){ .topbar{margin-bottom:38px}.scene-grid{grid-template-columns:1fr;margin-top:30px}.scene-card{min-height:auto}.practice-head{align-items:flex-start;gap:12px;flex-direction:column}.chinese-prompt{font-size:21px}.actions{flex-wrap:wrap}.actions .primary{margin-left:auto} }