:root { --ink:#1d2a29; --muted:#687472; --paper:#f8f3e8; --cream:#fffdf7; --jade:#196b5f; --jade-light:#d9eee5; --coral:#e96c50; --line:#ded9cc; --shadow:0 18px 50px rgba(38,53,47,.09); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--paper); color:var(--ink); font-family:"DM Sans",sans-serif; }
button { font:inherit; cursor:pointer; }
.shell { width:min(1120px, calc(100% - 40px)); margin:auto; }
.topbar { height:82px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { font-size:20px; font-weight:700; letter-spacing:-.7px; display:flex; gap:9px; align-items:center; }
.brand-mark { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--coral); color:white; font-family:"Noto Serif SC"; font-size:18px; }
.streak { color:var(--muted); font-size:14px; font-weight:500; }
.streak b { color:var(--coral); }
.hero { padding:56px 0 34px; display:grid; grid-template-columns:1.25fr .75fr; gap:40px; align-items:end; }
.eyebrow { color:var(--jade); font-family:"DM Mono"; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
h1 { font-family:"Noto Serif SC",serif; font-size:clamp(38px,5vw,64px); line-height:1.04; letter-spacing:-2.5px; margin:14px 0 16px; font-weight:600; }
.hero p { color:var(--muted); max-width:490px; line-height:1.6; font-size:17px; margin:0; }
.progress-card { background:var(--jade); color:white; border-radius:18px; padding:24px; align-self:center; box-shadow:var(--shadow); }
.progress-card span { color:#b8d7ce; font-size:13px; }
.progress-card strong { display:block; font-size:30px; margin:7px 0 16px; }
.progress-track, .lesson-progress { height:7px; background:rgba(255,255,255,.24); border-radius:20px; overflow:hidden; }
.progress-track i, .lesson-progress i { display:block; height:100%; border-radius:inherit; background:#f3c777; transition:width .35s ease; }
.section-title { display:flex; justify-content:space-between; align-items:baseline; margin:18px 0; }
h2 { margin:0; font-size:19px; letter-spacing:-.3px; }
.section-title span { font-size:13px; color:var(--muted); }
.lesson-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding-bottom:60px; }
.lesson { border:1px solid var(--line); padding:22px; border-radius:16px; background:var(--cream); text-align:left; min-height:210px; display:flex; flex-direction:column; transition:transform .2s,box-shadow .2s; }
.lesson:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.lesson-num { color:var(--coral); font-family:"DM Mono"; font-size:12px; }
.lesson h3 { margin:21px 0 5px; font-size:22px; letter-spacing:-.6px; }
.lesson p { margin:0; color:var(--muted); font-size:14px; }
.lesson footer { margin-top:auto; padding-top:22px; display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--muted); }
.lesson .arrow { color:var(--jade); font-size:22px; }
.lesson.done { border-color:#9bcab9; background:#f5fbf7; }
.lesson.primer { background:#e8f1ec; border-color:#b5d3c7; }
.lesson.primer h3 { color:var(--jade); }
.back { border:0; background:none; padding:0; color:var(--jade); font-weight:600; margin:30px 0 20px; }
.study-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:20px; }
.study-head h1 { font-family:"DM Sans"; font-size:32px; letter-spacing:-1.3px; margin:5px 0 0; }
.counter { color:var(--muted); font-family:"DM Mono"; font-size:13px; }
.flashcard-wrap { max-width:670px; margin:0 auto; }
.flashcard { min-height:390px; background:var(--cream); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px; text-align:center; position:relative; }
.topic-pill { position:absolute; top:24px; left:24px; background:var(--jade-light); color:var(--jade); border-radius:30px; padding:6px 11px; font-size:12px; font-weight:600; }
.hanzi { font-family:"Noto Serif SC",serif; font-size:142px; line-height:1; font-weight:500; }
.pinyin { font-family:"DM Mono"; color:var(--jade); margin:16px 0 7px; font-size:19px; }
.meaning { font-size:25px; font-weight:600; letter-spacing:-.6px; }
.hint { position:absolute; bottom:23px; color:#9da5a1; font-size:12px; }
.card-controls { display:flex; justify-content:center; gap:10px; margin:24px 0 16px; }
.btn { border:0; padding:12px 18px; border-radius:9px; background:var(--jade); color:white; font-weight:600; }
.btn:hover { background:#11594f; }
.btn.secondary { color:var(--ink); border:1px solid var(--line); background:var(--cream); }
.study-progress { max-width:670px; margin:0 auto; }
.study-progress .lesson-progress { background:#ded9cc; }
.study-progress .lesson-progress i { background:var(--coral); }
.quiz { max-width:670px; margin:34px auto; }
.quiz-card { background:var(--cream); border:1px solid var(--line); border-radius:18px; padding:30px; }
.quiz-label { color:var(--coral); font-family:"DM Mono"; text-transform:uppercase; font-size:12px; letter-spacing:.1em; }
.quiz-character { font-family:"Noto Serif SC"; text-align:center; font-size:108px; line-height:1; margin:20px 0; }
.question { text-align:center; font-size:20px; font-weight:600; margin-bottom:22px; }
.options { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.option { padding:14px; border-radius:9px; background:var(--cream); border:1px solid var(--line); text-align:left; }
.option:hover { border-color:var(--jade); }
.option.correct { background:#e1f3e9; border-color:#70b697; }
.option.wrong { background:#fde9e5; border-color:#e99482; }
.feedback { text-align:center; min-height:26px; color:var(--muted); margin:18px 0 0; font-weight:500; }
.quiz-actions { margin-top:20px; display:flex; justify-content:flex-end; }
.result { text-align:center; padding:42px 20px; }
.result .result-icon { font-size:50px; }
.result h2 { font-size:29px; margin:16px 0 8px; }
.result p { color:var(--muted); margin-bottom:23px; }
.primer-page { max-width:940px; margin:20px auto 60px; }
.primer-page h1 { margin:10px 0 16px; }
.primer-intro { max-width:650px; color:var(--muted); line-height:1.65; font-size:17px; margin-bottom:28px; }
.pattern-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pattern-card { background:var(--cream); border:1px solid var(--line); border-radius:16px; padding:23px; }
.pattern-card.wide { grid-column:span 2; }
.pattern-number { font-family:"DM Mono"; color:var(--coral); font-size:12px; }
.pattern-card h2 { margin:15px 0 9px; font-size:19px; }
.pattern-card p { color:var(--muted); font-size:14px; line-height:1.55; margin:0; }
.example { margin-top:14px; min-height:76px; display:flex; align-items:center; gap:12px; color:var(--jade); }
.example > span:first-child { font-family:"Noto Serif SC"; font-size:58px; line-height:1; }
.example i { font-size:34px; font-style:normal; }
.equals { font-family:"DM Sans" !important; font-size:24px !important; color:#91aaa0; }
.parts { font-family:"Noto Serif SC"; font-size:29px; color:var(--ink); }
.parts b { color:var(--coral); font-weight:500; }
.mini-rule { margin-top:18px; padding:14px; border-radius:10px; background:var(--jade-light); display:grid; gap:5px; font-size:13px; line-height:1.45; }
.mini-rule strong { color:var(--jade); }
.takeaway { margin-top:15px; background:var(--jade); color:white; padding:24px; border-radius:16px; }
.takeaway span { color:#bddbd2; font-family:"DM Mono"; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.takeaway strong { display:block; font-size:20px; margin:8px 0; max-width:620px; }
.takeaway p { margin:0; color:#d4e7e1; font-size:14px; }
.primer-action { margin-top:24px; text-align:center; }
@media (max-width:720px) { .shell{width:min(100% - 28px,1120px)} .hero{grid-template-columns:1fr;padding-top:38px;gap:28px} .progress-card{max-width:340px} .lesson-grid,.pattern-grid{grid-template-columns:1fr} .pattern-card.wide{grid-column:auto}.flashcard{min-height:360px}.hanzi{font-size:120px}.options{grid-template-columns:1fr} h1{letter-spacing:-1.8px}.topbar{height:70px} }