:root{--ink:#30324f;--muted:#6e718f;--cream:#fff8ed;--paper:#fffdf9;--pink:#ef6fae;--pink-dark:#ca4b8b;--blue:#72bceb;--blue-dark:#377da8;--mint:#8ed7bd;--yellow:#ffd56a;--lilac:#c7b8ef;--danger:#c44e64;--shadow:0 10px 30px rgba(64,59,91,.11);--radius:24px;--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}html{background:var(--cream);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-text-size-adjust:100%}body{margin:0;min-height:100vh;background:radial-gradient(circle at 8% 0,#ffe0ee 0,transparent 30%),radial-gradient(circle at 100% 10%,#d9effe 0,transparent 34%),var(--cream)}button,input,select{font:inherit}button{cursor:pointer}.shell{min-height:100vh;padding-bottom:calc(88px + var(--safe-bottom))}.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px max(18px,env(safe-area-inset-left));max-width:1100px;margin:auto}.brand{display:flex;gap:11px;align-items:center;font-weight:800}.brand-mark{display:grid;place-items:center;width:43px;height:43px;border-radius:16px;background:var(--pink);color:white;font-size:24px;box-shadow:var(--shadow)}.avatar{border:0;background:#fff;border-radius:50%;width:44px;height:44px;box-shadow:var(--shadow);font-size:22px}.content{max-width:1040px;margin:auto;padding:4px 18px 44px}.hero{border-radius:30px;padding:26px;background:linear-gradient(135deg,#ef6fae,#e987ba);color:#fff;box-shadow:var(--shadow);position:relative;overflow:hidden}.hero:after{content:"好";position:absolute;right:18px;bottom:-35px;font-size:150px;font-weight:800;opacity:.13}.hero h1{font-size:clamp(28px,7vw,46px);line-height:1.05;margin:0 0 9px}.hero p{margin:0;max-width:560px;font-weight:600}.eyebrow{text-transform:uppercase;letter-spacing:.11em;font-size:12px;font-weight:900;opacity:.83;margin:0 0 8px}.grid{display:grid;gap:16px;margin-top:18px}.card{background:rgba(255,253,249,.93);border:1px solid rgba(255,255,255,.8);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}.card h2,.card h3{margin:0 0 8px}.card p{color:var(--muted)}.action-card{display:flex;align-items:center;gap:15px;text-align:left;width:100%;border:0;color:var(--ink)}.bubble{width:55px;height:55px;flex:0 0 auto;border-radius:19px;display:grid;place-items:center;font-size:27px}.pink{background:#ffe0ee}.blue{background:#dff2ff}.mint{background:#dcf5ec}.yellow{background:#fff0bb}.btn{min-height:46px;border:0;border-radius:16px;padding:11px 17px;font-weight:800;background:var(--pink);color:#fff}.btn.secondary{background:#e3f3fd;color:var(--blue-dark)}.btn.ghost{background:#f4eff7;color:var(--ink)}.btn.danger{background:#fde4e8;color:var(--danger)}.btn:focus,.nav-btn:focus,input:focus{outline:3px solid rgba(55,125,168,.3);outline-offset:2px}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.spread{justify-content:space-between}.progress{height:12px;background:#f0eaf0;border-radius:20px;overflow:hidden}.progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--pink),var(--yellow));border-radius:20px}.stat{font-size:29px;font-weight:900}.muted{color:var(--muted)}.bottom-nav{position:fixed;z-index:20;bottom:0;left:0;right:0;padding:8px 10px calc(8px + var(--safe-bottom));background:rgba(255,253,249,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid #eee0e7;display:grid;grid-template-columns:repeat(4,1fr)}.nav-btn{background:none;border:0;color:var(--muted);font-size:11px;font-weight:800;min-height:61px;border-radius:16px}.nav-btn span{display:block;font-size:23px;margin-bottom:2px}.nav-btn.active{background:#ffe6f1;color:var(--pink-dark)}.section-title{margin:15px 2px 5px;font-size:26px}.chips{display:flex;gap:8px;overflow:auto;padding:4px 1px 8px;-webkit-overflow-scrolling:touch}.chip{white-space:nowrap;border:0;padding:9px 13px;border-radius:999px;background:#fff;box-shadow:0 3px 10px rgba(64,59,91,.08);color:var(--ink);font-weight:750}.chip.active{background:var(--ink);color:#fff}.unit{position:relative;border-left:8px solid var(--mint)}.unit.review{border-left-color:var(--yellow)}.unit.locked{border-left-color:#d7d5de;opacity:.7}.status-pill{font-size:12px;font-weight:850;border-radius:999px;padding:6px 9px;background:#e2f5ed;color:#29745a}.retention{font-size:13px;color:var(--muted)}.sentence{font-size:clamp(27px,7vw,42px);line-height:1.35;margin:10px 0}.pinyin{color:var(--blue-dark);font-weight:700}.translation{margin:7px 0;color:var(--muted)}.token-row{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0}.token{border:0;border-radius:17px;padding:12px 14px;background:#fff0f7;color:var(--ink);font-size:23px;box-shadow:0 4px 10px rgba(64,59,91,.08)}.token.selected{background:var(--pink);color:white}.character{font-size:92px;line-height:1;text-align:center;margin:12px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.detail{background:#f5f1f8;border-radius:15px;padding:12px}.detail small{display:block;color:var(--muted);margin-bottom:4px}.practice{text-align:center}.practice .prompt{font-size:33px;font-weight:900;margin:28px 0}.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.answer{min-height:60px;border:2px solid #eee4ee;border-radius:18px;background:white;font-weight:800;color:var(--ink)}.answer.correct{background:#dff5eb;border-color:var(--mint)}.answer.wrong{background:#fde6ea;border-color:#e8899a}.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:22px}.auth-card{width:min(100%,440px);background:var(--paper);padding:28px;border-radius:30px;box-shadow:var(--shadow)}.auth-card h1{font-size:32px;margin:12px 0 4px}.field{display:block;margin:16px 0}.field span{display:block;font-weight:800;margin-bottom:7px}.field input{width:100%;height:50px;border:2px solid #eadfe7;border-radius:15px;padding:0 14px;background:white}.auth-card .btn{width:100%;margin-top:6px}.text-btn{border:0;background:none;color:var(--pink-dark);font-weight:800;padding:10px}.notice{border-radius:16px;padding:12px 14px;background:#fff0c9;color:#745a19;font-size:14px}.error{background:#fde7eb;color:#8e3044}.success{background:#dff5eb;color:#23684f}.footer{text-align:center;color:var(--muted);font-weight:750;padding:25px 10px 0}.modal-bg{position:fixed;z-index:40;inset:0;background:rgba(35,34,52,.46);display:grid;align-items:end}.modal{background:var(--paper);border-radius:28px 28px 0 0;padding:24px 20px calc(25px + var(--safe-bottom));max-height:88vh;overflow:auto}.canvas{width:100%;height:280px;border:3px dashed #dfb7ca;border-radius:20px;background:#fff;touch-action:none}.toggle{display:flex;align-items:center;gap:10px}.toggle input{width:22px;height:22px}.settings-list{display:grid;gap:12px}.settings-list>.card{box-shadow:none;border:1px solid #eee1e9}.hide{display:none!important}
@media(min-width:640px){.grid.two{grid-template-columns:1fr 1fr}.grid.three{grid-template-columns:repeat(3,1fr)}.content{padding-left:28px;padding-right:28px}.modal-bg{place-items:center}.modal{width:min(720px,92vw);border-radius:28px;padding:28px}.explore-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:18px}.bottom-nav{left:50%;right:auto;transform:translateX(-50%);width:min(600px,90%);border:1px solid #eee0e7;border-bottom:0;border-radius:24px 24px 0 0}}
@media(min-width:900px){.grid.three{grid-template-columns:repeat(3,1fr)}.topbar{padding-top:25px}}
@media(prefers-reduced-motion:no-preference){.card,.btn,.token{transition:transform .16s ease,box-shadow .16s ease}.action-card:hover,.btn:hover,.token:hover{transform:translateY(-2px)}}
.bottom-nav{grid-template-columns:repeat(5,1fr);padding-left:6px;padding-right:6px}
.lesson-card{display:block;width:100%;text-align:left;color:var(--ink);font:inherit}.lesson-link{display:block;margin-top:14px;color:var(--pink-dark);font-weight:850}.lesson-detail{max-width:780px;margin:0 auto}.lesson-detail h1{font-size:clamp(30px,7vw,48px);margin:8px 0}.lesson-detail h2{margin-top:25px}.lesson-detail li{margin:9px 0;line-height:1.45}.lesson-summary{font-size:19px;line-height:1.55}.callout{background:#f0f8e9;border-radius:18px;padding:16px;margin:20px 0}.answer-explanation{text-align:left;border-radius:18px;padding:16px 18px;margin-top:18px}.answer-explanation h2{margin:0 0 8px}.answer-explanation p{color:inherit}.next-btn{margin-top:14px;min-width:180px}.answer:disabled{cursor:default;color:var(--ink);opacity:1}