:root { color-scheme: dark; --ink:#f5f0e6; --muted:#a29e98; --night:#101111; --panel:#191a19; --panel2:#20221f; --line:#333630; --lime:#c8ef64; --coral:#ff7f6a; }
* { box-sizing:border-box; }
body { margin:0; background:var(--night); color:var(--ink); font-family:Outfit, "Noto Sans SC", sans-serif; }
main { max-width:1320px; padding:70px clamp(20px, 5vw, 78px) 90px; margin:auto; }
.hero { max-width:740px; }
.eyebrow,.back-label,.hint,.deck-meta { font:500 11px/1.2 "DM Mono", monospace; letter-spacing:.11em; }
.eyebrow { color:var(--lime); margin:0 0 18px; }
h1 { font-size:clamp(3.3rem, 7vw, 6.6rem); line-height:.91; letter-spacing:-.065em; margin:0; font-weight:600; }
h1 em { font-weight:400; color:var(--lime); }
.intro { max-width:510px; color:var(--muted); font-size:1.08rem; line-height:1.55; margin:30px 0; }
.controls { display:flex; gap:12px; flex-wrap:wrap; }
.search { min-width:min(100%, 360px); display:flex; gap:10px; align-items:center; padding:0 15px; border:1px solid var(--line); background:var(--panel); border-radius:8px; color:var(--lime); }
.search input { width:100%; height:48px; color:var(--ink); border:0; outline:0; background:transparent; font:400 14px Outfit,sans-serif; }
button { cursor:pointer; border:1px solid var(--line); background:transparent; border-radius:8px; padding:0 17px; color:var(--ink); font:500 13px Outfit,sans-serif; transition:.2s ease; }
button:hover { background:var(--lime); color:#101111; border-color:var(--lime); }
#filters { display:flex; gap:8px; flex-wrap:wrap; margin:68px 0 20px; }
#filters button { height:33px; padding:0 12px; font-size:12px; color:var(--muted); }
#filters button.active { background:var(--ink); border-color:var(--ink); color:var(--night); }
#progress-filters { display:flex; justify-content:flex-start; gap:7px; margin:0 0 16px; }
#progress-filters button { height:31px; padding:0 12px; font-size:11px; color:var(--muted); }
#progress-filters button.active { color:var(--night); background:var(--lime); border-color:var(--lime); }
.deck-meta { display:flex; justify-content:space-between; gap:12px; color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:14px; }
.deck { display:grid; grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); gap:12px; padding-top:18px; }
.card { position:relative; min-height:210px; cursor:pointer; perspective:900px; outline:none; }
.card-front,.card-back { position:absolute; inset:0; border:1px solid var(--line); border-radius:10px; backface-visibility:hidden; transition:transform .48s cubic-bezier(.2,.75,.25,1), border-color .25s; padding:20px; }
.card-front { display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--panel); }
.speak { position:absolute; z-index:3; top:12px; right:12px; display:grid; place-items:center; width:31px; height:31px; padding:0; border-radius:50%; color:var(--lime); font-size:16px; line-height:1; }
.speak:hover,.speak:focus { background:var(--lime); color:var(--night); }
.learned { position:absolute; z-index:3; top:12px; left:12px; height:29px; padding:0 9px; border-radius:16px; color:var(--muted); font:500 10px "DM Mono",monospace; letter-spacing:.04em; }
.learned:hover,.learned:focus { color:var(--night); }
.card.is-learned .learned { color:var(--night); background:var(--lime); border-color:var(--lime); }
.card.is-learned .card-front { border-color:#668334; }
.card:hover .card-front,.card:focus .card-front,.card.revealed .card-front { transform:rotateY(180deg); }
.card:hover .card-back,.card:focus .card-back,.card.revealed .card-back { transform:rotateY(360deg); border-color:var(--lime); }
.card:hover .card-front { border-color:var(--lime); }
.hanzi { font-family:"Noto Sans SC",sans-serif; font-size:4rem; line-height:1; font-weight:500; max-width:100%; overflow-wrap:anywhere; text-align:center; }
.compact-hanzi .hanzi { font-size:clamp(1.8rem, 3.1vw, 2.55rem); line-height:1.2; }
.long-hanzi .hanzi { font-size:clamp(1.55rem, 2.35vw, 2rem); line-height:1.3; }
.pinyin { margin-top:14px; color:var(--lime); font:500 13px "DM Mono",monospace; letter-spacing:.04em; }
.hint { position:absolute; bottom:17px; color:#676b65; font-size:9px; }
.card-back { transform:rotateY(180deg); background:var(--panel2); overflow:auto; }
.back-label { display:block; color:var(--coral); font-size:9px; }
.meaning { font-size:1rem; font-weight:600; margin:5px 0 12px; line-height:1.25; }
.divider { height:1px; background:var(--line); margin:0 0 12px; }
.phrase,.sentence { font-family:"Noto Sans SC",sans-serif; margin:4px 0 2px; font-size:.86rem; line-height:1.35; }
.pronunciation { margin:0 0 3px; color:var(--lime); font:400 10px/1.35 "DM Mono",monospace; letter-spacing:.015em; }
.translation { margin:0 0 9px; color:#c3c1bb; font-size:.71rem; line-height:1.3; }
.sentence-label { margin-top:4px; }
.sentence { color:#d1d0c9; }
.empty { grid-column:1/-1; color:var(--muted); padding:50px 0; text-align:center; }
.quiz { grid-column:1/-1; border:1px solid var(--line); border-radius:12px; padding:clamp(18px,3vw,34px); background:var(--panel); }
.quiz-heading { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:24px; }
.quiz-heading h2 { margin:0; font-size:clamp(1.4rem,3vw,2rem); letter-spacing:-.04em; }
.quiz-heading p { color:var(--muted); margin:0; font-size:.9rem; }
.quiz-board { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.quiz-column { display:grid; gap:8px; align-content:start; }
.quiz-label { color:var(--coral); margin-bottom:3px; }
.quiz-choice { min-height:52px; text-align:left; padding:10px 13px; font-size:.92rem; }
.quiz-chinese-row { display:flex; gap:7px; }
.quiz-chinese-row .quiz-choice { flex:1; }
.quiz-speak { flex:0 0 40px; min-height:52px; padding:0; color:var(--lime); font-size:17px; }
.quiz-speak:hover,.quiz-speak:focus { color:var(--night); background:var(--lime); border-color:var(--lime); }
.quiz-word { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.quiz-word strong { font:500 1.25rem "Noto Sans SC",sans-serif; }
.quiz-word small { color:var(--lime); font:400 10px "DM Mono",monospace; }
.quiz-choice.selected { border-color:var(--lime); box-shadow:0 0 0 1px var(--lime); }
.quiz-choice.correct { color:var(--night); background:var(--lime); border-color:var(--lime); }
.quiz-choice.dimmed { opacity:.28; pointer-events:none; }
.quiz-status { min-height:22px; margin:20px 0 0; color:var(--lime); font-size:.9rem; }
.quiz-status.error { color:var(--coral); }
.new-quiz { display:block; margin:16px auto 0; min-height:38px; color:var(--lime); }
.new-quiz:hover,.new-quiz:focus { color:var(--night); }
.writing-guide { grid-column:1/-1; display:grid; grid-template-columns:minmax(220px, 360px) 1fr; gap:clamp(24px,5vw,64px); align-items:center; padding:clamp(22px,4vw,46px); border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.stroke-canvas { width:min(100%,330px); aspect-ratio:1; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; background:#111211; }
.writing-copy h2 { font-size:clamp(2.3rem,5vw,4.5rem); line-height:1; margin:9px 0; font-family:"Noto Sans SC",sans-serif; }
.writing-pinyin { color:var(--lime); font:500 .9rem "DM Mono",monospace; }
.writing-meaning { font-size:1.2rem; margin:15px 0 25px; }
.writing-actions { display:flex; gap:9px; flex-wrap:wrap; }
.writing-actions button { min-height:39px; color:var(--lime); }
.writing-note { color:var(--muted); font-size:.83rem; line-height:1.45; margin:18px 0 0; max-width:440px; }
.origin-panel { grid-column:1/-1; padding:22px; border:1px solid #665d46; border-radius:10px; background:linear-gradient(135deg,#28271f,#1d1e1a); }
.origin-panel h3 { margin:4px 0 14px; font-size:1.25rem; }
.origin-flow { display:flex; align-items:center; justify-content:center; gap:clamp(10px,3vw,30px); padding:10px 0 16px; }
.origin-stage { display:grid; justify-items:center; gap:5px; min-width:74px; }
.origin-stage span { color:var(--muted); font:500 9px "DM Mono",monospace; letter-spacing:.08em; }
.origin-ancient,.origin-modern { font:500 clamp(2.8rem,7vw,4.7rem) "Noto Sans SC",sans-serif; line-height:1; }
.origin-ancient { color:#c6b48a; opacity:.85; transform:rotate(-7deg); }
.origin-concept { font-size:clamp(2.5rem,6vw,4rem); line-height:1; }
.origin-arrow { color:var(--lime); font-size:1.6rem; }
.origin-story { max-width:720px; margin:0 auto; color:#ded8ca; text-align:center; line-height:1.5; }
.origin-note { margin:12px 0 0; color:#989386; text-align:center; font-size:.73rem; }
@media (max-width:620px) { .quiz-board { grid-template-columns:1fr; gap:22px; } .writing-guide { grid-template-columns:1fr; } }
.quiz-review { margin-top:36px; padding-top:26px; border-top:1px solid var(--line); }
.quiz-review h3 { margin:0 0 5px; font-size:1.35rem; letter-spacing:-.03em; }
.quiz-review > p { margin:0 0 17px; color:var(--muted); font-size:.9rem; }
.breakdown-item { padding:16px; margin-top:10px; border:1px solid var(--line); border-radius:8px; background:#151615; }
.breakdown-item p { margin:3px 0; font-size:.85rem; line-height:1.45; }
.breakdown-item strong { color:var(--lime); }
.breakdown-list { margin:10px 0 0; padding:10px 0 0; border-top:1px solid var(--line); display:grid; gap:4px; }
.breakdown-list span { color:#c9c7c0; font-size:.78rem; }
.breakdown-list b { color:var(--coral); font-family:"Noto Sans SC",sans-serif; }
@media (max-width:620px) { .quiz-board { grid-template-columns:1fr; gap:22px; } }
@media (max-width:520px) { main { padding-top:48px; } .deck { grid-template-columns:repeat(2, minmax(0,1fr)); gap:9px; } .card { min-height:190px; } .card-front,.card-back { padding:15px; } .hanzi { font-size:3.2rem; } .deck-meta span:last-child { display:none; } }