:root{color:#3f2c15;background:#faf4eb;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,system-ui,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 18% 8%,oklch(91% .08 80 / .55),transparent 24rem),linear-gradient(180deg,#fff8eb,#edecdd)}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.58}main{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:24px 0 42px}.topbar{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;margin-bottom:24px}.icon-button,.stars{display:inline-flex;width:48px;height:48px;align-items:center;justify-content:center;border:1px solid oklch(86% .035 80);border-radius:16px;color:#804300;color:oklch(45% .13 58);background:#fffbf4}.stars{width:auto;min-width:72px;gap:6px;padding:0 14px;color:#af7600;color:oklch(61% .16 75);font-weight:800}h1,h2,h3,p{margin:0}h1{font-size:1.35rem;line-height:1.25}h2{font-size:1.7rem;line-height:1.2}h3{font-size:1rem;line-height:1.45}.eyebrow{margin-bottom:4px;color:#985c19;font-size:.78rem;font-weight:800;letter-spacing:0}.home-grid{display:grid;gap:18px}.welcome-panel{display:grid;grid-template-columns:132px 1fr;gap:26px;align-items:center;min-height:260px;padding:34px;border:1px solid oklch(86% .045 77);border-radius:24px;background:#fffbf5;background:oklch(99% .013 80);box-shadow:0 20px 48px #b7906029}.welcome-panel p:not(.eyebrow){max-width:48ch;margin:12px 0 22px;color:#66513a;line-height:1.7}.mascot{display:grid;width:132px;aspect-ratio:1;place-items:center;border:4px solid oklch(78% .13 70);border-radius:28px;color:#7b4200;color:oklch(44% .12 60);background:linear-gradient(145deg,#ffe8bf,#fcb77c);background:linear-gradient(145deg,color(xyz 0.81 0.825 0.396),#fcb77c);box-shadow:inset 0 -12px #d6945957;font-size:3.6rem;font-weight:900}.primary-action,.secondary-action,.question-meta button,.mistake-list button{display:inline-flex;min-height:48px;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:0 22px;font-weight:800}.primary-action{color:#fffbf4;background:#c36800;background:oklch(61% .16 57);box-shadow:0 10px 22px #bf702847}.secondary-action{border:1px solid oklch(84% .035 76);color:#6d4a26;background:#fdf8f0}.action-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.feature-tile{display:grid;min-height:150px;align-content:start;gap:10px;border:1px solid transparent;border-radius:18px;padding:20px;color:#3b2a17;text-align:left;transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s cubic-bezier(.22,1,.36,1)}.feature-tile:hover{transform:translateY(-2px);box-shadow:0 14px 28px #af875829}.feature-tile strong{font-size:1.08rem}.feature-tile span{color:#5e4c38}.orange{background:#ffdfb4;background:oklch(92% .07 75)}.green{background:#cbecc7}.blue{background:#c1e8ff;background:oklch(91% .055 235)}.gray{background:#efeae2}.knowledge-strip,.panel,.quiz-shell{padding:26px;border:1px solid oklch(86% .035 78);border-radius:22px;background:#fffbf4}.knowledge-strip{display:grid;grid-template-columns:220px 1fr;gap:18px;align-items:center}.knowledge-list{display:flex;flex-wrap:wrap;gap:10px}.knowledge-list button{min-height:46px;border:1px solid oklch(83% .04 76);border-radius:999px;padding:0 16px;color:#5b3e20;background:#faf4eb;font-weight:750}.progress-line{display:grid;gap:10px;margin-bottom:20px;color:#624b31;font-weight:800}.progress-line div{height:12px;overflow:hidden;border-radius:999px;background:#eae0cf}.progress-line i{display:block;height:100%;border-radius:inherit;background:#c08600;background:oklch(66% .14 78);transition:width .18s cubic-bezier(.22,1,.36,1)}.question-card{display:grid;gap:18px}.question-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.question-meta span{border-radius:999px;padding:7px 12px;color:#6a4316;background:#f8e9d2;font-size:.86rem;font-weight:800}.question-meta button{margin-left:auto;border:1px solid oklch(83% .035 78);color:#6a4316;background:#fdf8f0}.pinyin{color:#7f6b52;font-size:.92rem;line-height:1.8}.question-card h2{max-width:34ch;font-size:1.8rem;line-height:1.55}.option-list{display:grid;gap:12px}.option-list button,.boolean-list button,.blank-answer input{min-height:58px;border:2px solid oklch(84% .035 76);border-radius:18px;padding:0 18px;color:#3d2d19;background:#fcf8f0;font-weight:800;text-align:left}.option-list button.selected,.boolean-list button.selected,.blank-answer input:focus{outline:3px solid oklch(78% .12 72 / .36);border-color:#c4780b;background:#fff0d7;background:oklch(96% .04 80)}.boolean-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.boolean-list button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:96px;text-align:center}.blank-answer{display:grid;gap:10px;max-width:520px;font-weight:800}.blank-answer input{width:100%}.submit{justify-self:start;min-width:160px}.feedback{display:grid;max-width:680px;gap:10px;border-radius:18px;padding:20px;line-height:1.65}.feedback.correct{background:#d5f2cf}.feedback.review{background:#ffe9ba}.feedback strong{font-size:1.2rem}.section-title{margin-bottom:18px}.empty-state{display:grid;min-height:220px;place-items:center;color:#745837;text-align:center;font-weight:800}.mistake-list{display:grid;gap:12px}.mistake-list article{display:grid;gap:8px;border:1px solid oklch(87% .03 78);border-radius:16px;padding:18px;background:#f9f5ec}.mistake-list span{color:#895f34;font-weight:800}.mistake-list button{justify-self:start;color:#fffbf4;background:#ab691c}.parent-panel{display:grid;gap:18px}.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.metrics div{display:grid;gap:6px;border-radius:16px;padding:18px;background:#f5eee0}.metrics strong{font-size:2rem;line-height:1}.metrics span,.weak-row{color:#675440}.weak-list{display:grid;gap:10px}.weak-row{display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid oklch(88% .024 80);padding:12px 0}@media(max-width:760px){main{width:min(100% - 20px,560px);padding-top:14px}.topbar{grid-template-columns:48px 1fr auto}.welcome-panel,.knowledge-strip{grid-template-columns:1fr;padding:22px}.mascot{width:96px;border-radius:22px;font-size:2.7rem}.action-board,.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.feature-tile{min-height:132px;padding:16px}.question-card h2{font-size:1.35rem}.boolean-list,.metrics{grid-template-columns:1fr}.question-meta button{margin-left:0}}@media(max-width:460px){.action-board{grid-template-columns:1fr}.stars{min-width:58px;padding:0 10px}}
