:root{color:#243042;background:#fbfcff;font-family:PingFang SC,Microsoft YaHei,Noto Sans CJK SC,system-ui,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;background:linear-gradient(135deg,#e8f7ffe6,#fff6fbdb 45%,#effff4d6),#fbfcff}button{font:inherit}.app-shell{min-height:100vh}.top-bar{display:flex;align-items:center;justify-content:space-between;width:min(1120px,calc(100% - 40px));margin:0 auto;padding:22px 0 8px}.brand-button,.small-button,.primary-button,.secondary-button,.home-card,.category-card,.option-button{border:0;cursor:pointer}.brand-button{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:8px 14px;border-radius:8px;color:#26364f;background:#ffffffc7;box-shadow:0 10px 28px #5174971f;font-size:20px;font-weight:800}.brand-mark{display:grid;width:32px;height:32px;place-items:center;border-radius:8px;color:#1e6bb8;background:#dff0ff}.small-button{min-height:44px;padding:8px 16px;border-radius:8px;color:#315273;background:#fff;box-shadow:0 8px 22px #4561801c;font-size:17px;font-weight:700}.page{width:min(1120px,calc(100% - 40px));margin:0 auto;padding:32px 0 56px}.narrow-page{width:min(820px,calc(100% - 40px))}.welcome-section{padding:34px 0 24px}.eyebrow{margin:0 0 10px;color:#63748a;font-size:17px;font-weight:800}h1,h2,p{margin-top:0}.welcome-section h1,.section-head h1,.practice-head h1,.result-panel h1{margin-bottom:14px;font-size:clamp(34px,5vw,56px);line-height:1.12}.welcome-note{max-width:520px;margin-bottom:0;color:#516375;font-size:24px;line-height:1.45}.home-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:26px 0 30px}.home-card{display:flex;min-height:190px;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:24px;border:2px solid rgba(255,255,255,.8);border-radius:8px;color:#23344d;box-shadow:0 16px 36px #48617c21;text-align:left;transition:transform .16s ease,box-shadow .16s ease}.home-card:hover,.category-card:hover,.option-button:hover,.primary-button:hover,.secondary-button:hover,.small-button:hover{transform:translateY(-2px)}.home-card span{display:grid;width:52px;height:52px;place-items:center;border-radius:8px;background:#fffc;font-size:28px}.home-card strong{font-size:30px;line-height:1.2}.home-card small{color:#536376;font-size:19px;font-weight:700}.home-card-blue{background:#dff1ff}.home-card-green{background:#e3f8e8}.home-card-pink{background:#ffe7f0}.parent-panel,.question-panel,.result-panel,.empty-state{border:1px solid rgba(115,138,164,.16);border-radius:8px;background:#ffffffdb;box-shadow:0 16px 38px #48617c1f}.parent-panel{display:grid;grid-template-columns:240px 1fr;gap:24px;padding:24px}.parent-panel h2{margin-bottom:0;font-size:30px}.soft-text{margin:0;color:#63748a;font-size:19px}.record-list{display:grid;gap:10px}.record-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:16px;padding:14px 16px;border-radius:8px;background:#f3f8ff;color:#4c5f72;font-size:18px}.record-row strong{color:#244565}.section-head,.practice-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.section-head h1,.practice-head h1{margin-bottom:0}.category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.category-card{display:flex;min-height:152px;align-items:center;gap:18px;padding:24px;border-radius:8px;color:#25374f;box-shadow:0 16px 34px #48617c1f;text-align:left;transition:transform .16s ease,box-shadow .16s ease}.category-card span:last-child{font-size:25px;font-weight:800;line-height:1.25}.category-icon{display:grid;flex:0 0 auto;width:58px;height:58px;place-items:center;border-radius:8px;background:#ffffffc2;font-size:25px;font-weight:900}.accent-blue{background:#dff1ff}.accent-green{background:#e3f8e8}.accent-pink{background:#ffe7f0}.accent-yellow{background:#fff4c7}.accent-mint{background:#dff8f1}.accent-lavender{background:#eee8ff}.practice-head{align-items:flex-end}.progress-pill,.type-tag{display:inline-flex;align-items:center;min-height:38px;padding:6px 14px;border-radius:8px;background:#fff;color:#3f5a74;font-size:18px;font-weight:800}.question-panel{padding:28px}.question-visual{margin-bottom:24px;padding:22px;border:2px solid #e5edf5;border-radius:8px;background:#fbfdff}.question-visual p{margin-bottom:16px;color:#52677f;font-size:18px;font-weight:800}.visual-board{display:grid;gap:14px}.visual-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.visual-item{display:grid;min-width:84px;height:84px;place-items:center;border-radius:8px;background:#fff;box-shadow:0 10px 20px #3f5a7424;font-size:56px;font-weight:900;line-height:1}.question-text{min-height:112px;margin-bottom:24px;color:#1f314a;font-size:clamp(38px,6vw,58px);font-weight:900;line-height:1.38}.pinyin-text{display:inline}.pinyin-ruby,.pinyin-non-hanzi{display:inline-flex;flex-direction:column-reverse;align-items:center;margin:0 .03em;vertical-align:baseline}.pinyin-rt,.pinyin-spacer{color:#6b7c90;font-size:.38em;font-weight:800;line-height:1;text-align:center}.pinyin-spacer{visibility:hidden}.pinyin-hanzi,.pinyin-main{line-height:1.05}.pinyin-plain{white-space:pre-wrap}.option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.option-button{min-height:86px;padding:18px;border:2px solid #dce7f2;border-radius:8px;color:#22344d;background:#fff;box-shadow:0 10px 24px #48617c1a;font-size:clamp(24px,4vw,34px);font-weight:900;line-height:1.42;transition:transform .16s ease,border-color .16s ease,background .16s ease}.option-button:disabled{cursor:default;opacity:.72;transform:none}.option-button.is-thinking{border-color:#f5c46d;background:#fff5d8;opacity:1}.option-button.is-correct{border-color:#7ec998;background:#e2f8e8;opacity:1}.feedback{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:flex-start;margin-top:22px;padding:16px 18px;border-radius:8px;font-size:20px;line-height:1.5}.feedback span{display:grid;flex:0 0 auto;width:34px;height:34px;place-items:center;border-radius:8px;background:#fff;font-weight:900}.feedback p{min-width:0;margin:0}.feedback .pinyin-text{display:flex;flex-wrap:wrap;align-items:flex-end;width:100%;min-width:0;column-gap:.06em;row-gap:.16em}.feedback .pinyin-ruby,.feedback .pinyin-non-hanzi{flex:0 0 auto}.feedback-happy{color:#275d3b;background:#e1f8e8}.feedback-thinking{color:#74531e;background:#fff3cd}.answer-effect{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;overflow:hidden;pointer-events:none}.answer-effect-fireworks{animation:effect-layer-fade 2.45s ease-out forwards}.firework-burst{position:absolute;width:14px;height:14px;transform:scale(var(--burst-size))}.firework-burst:before{position:absolute;top:-18px;right:-18px;bottom:-18px;left:-18px;border-radius:999px;background:#ffffffe6;box-shadow:0 0 24px #ffbd2e94,0 0 56px #ff5c8a4d;content:"";transform:scale(0);animation:firework-pop 1.5s ease-out forwards}.firework-spark{position:absolute;left:50%;top:50%;width:12px;height:12px;border-radius:999px;background:var(--spark-color);box-shadow:0 0 18px var(--spark-color),0 0 34px var(--spark-color);transform:translate(-50%,-50%) scale(0);animation:firework-spark 1.75s ease-out forwards}.celebration-rabbit{position:absolute;left:50%;top:52%;filter:drop-shadow(0 24px 28px rgba(41,60,92,.26));font-size:clamp(150px,28vw,360px);line-height:1;transform:translate(58vw,-50%) scale(.7);animation:big-rabbit-hop 2.35s cubic-bezier(.2,.75,.26,1) forwards}.answer-effect-leaves{animation:effect-layer-fade 1.85s ease-out forwards}.leaf-haze{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#52607433,#fff0 54%),radial-gradient(circle at 50% 14%,#69707e3d,#fff0 48%);animation:leaf-haze-fade 1.65s ease-out forwards}.falling-leaf{position:absolute;left:var(--leaf-left);top:var(--leaf-top);width:34px;height:22px;border-radius:85% 18%;background:linear-gradient(135deg,#c67a35,#e0a24a 48%,#8f5a2b);box-shadow:0 10px 18px #4d3a2c3d;opacity:0;transform:rotate(var(--leaf-rotate));animation:falling-leaf var(--leaf-duration) ease-in var(--leaf-delay) forwards}.falling-leaf:after{position:absolute;left:7px;top:10px;width:22px;height:1px;background:#5f3a1f73;content:"";transform:rotate(-26deg)}@keyframes firework-pop{0%{opacity:.9;transform:scale(0)}55%{opacity:.85;transform:scale(2.1)}to{opacity:0;transform:scale(3.8)}}@keyframes firework-spark{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}18%{opacity:1}to{opacity:0;transform:translate(calc(-50% + var(--spark-x)),calc(-50% + var(--spark-y))) scale(1.2)}}@keyframes big-rabbit-hop{0%{opacity:0;transform:translate(58vw,-40%) rotate(-8deg) scale(.62)}16%{opacity:1;transform:translate(24vw,-62%) rotate(8deg) scale(1)}38%{opacity:1;transform:translate(-5vw,-42%) rotate(-4deg) scale(1.22)}58%{opacity:1;transform:translate(-18vw,-58%) rotate(6deg) scale(1.06)}78%{opacity:1;transform:translate(-36vw,-44%) rotate(-8deg) scale(.95)}to{opacity:0;transform:translate(-72vw,-52%) rotate(6deg) scale(.72)}}@keyframes leaf-haze-fade{0%{opacity:0}25%{opacity:1}to{opacity:0}}@keyframes falling-leaf{0%{opacity:0;transform:translateZ(0) rotate(var(--leaf-rotate))}18%{opacity:1}to{opacity:0;transform:translate3d(var(--leaf-drift),58vh,0) rotate(calc(var(--leaf-rotate) + 180deg))}}@keyframes effect-layer-fade{0%{opacity:1}80%{opacity:1}to{opacity:0}}.primary-button,.secondary-button{min-height:56px;padding:12px 22px;border-radius:8px;box-shadow:0 12px 24px #31507826;font-size:20px;font-weight:850;transition:transform .16s ease}.primary-button{color:#fff;background:#2f77b8}.secondary-button{color:#315273;background:#fff}.next-button{width:100%;margin-top:22px}.result-panel,.empty-state{padding:34px;text-align:center}.result-badge,.empty-icon{display:grid;width:74px;height:74px;place-items:center;margin:0 auto 18px;border-radius:8px;background:#fff4c7;color:#7a5a0d;font-size:40px}.result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:26px 0}.result-grid div{padding:18px;border-radius:8px;background:#f3f8ff}.result-grid span,.result-grid strong{display:block}.result-grid span{margin-bottom:8px;color:#63748a;font-size:18px;font-weight:700}.result-grid strong{color:#244565;font-size:30px}.result-actions{display:flex;justify-content:center;gap:14px}.mistake-list{display:grid;gap:14px}.mistake-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px;padding:22px;border:1px solid rgba(115,138,164,.16);border-radius:8px;background:#ffffffe0;box-shadow:0 12px 28px #48617c1a}.mistake-row h2{margin:12px 0 8px;color:#25374f;font-size:27px}.mistake-row p{margin-bottom:0;color:#63748a;font-size:18px}.wrong-print-sheet{display:none}@media(max-width:820px){.top-bar,.page,.narrow-page{width:min(100% - 24px,720px)}.top-bar{padding-top:14px}.brand-button{font-size:17px}.home-actions,.category-grid,.parent-panel,.option-grid,.result-grid,.mistake-row{grid-template-columns:1fr}.section-head,.practice-head{align-items:flex-start;flex-direction:column}.home-card{min-height:150px}.question-panel{padding:20px}.question-text{min-height:auto}.result-actions{flex-direction:column}}@media print{@page{size:A4;margin:12mm}body.is-printing-wrong-questions{min-width:0;background:#fff}body.is-printing-wrong-questions *{box-shadow:none!important;print-color-adjust:exact;-webkit-print-color-adjust:exact}body.is-printing-wrong-questions .top-bar,body.is-printing-wrong-questions .section-head,body.is-printing-wrong-questions .mistake-list,body.is-printing-wrong-questions .empty-state{display:none!important}body.is-printing-wrong-questions .app-shell,body.is-printing-wrong-questions .page{width:100%;min-height:0;margin:0;padding:0;background:#fff}body.is-printing-wrong-questions .wrong-print-sheet{display:block;color:#111827;font-size:12pt;line-height:1.5}.print-sheet-head{padding-bottom:10mm;border-bottom:2px solid #1f314a;text-align:center}.print-sheet-head p{margin:0 0 3mm;color:#4b5563;font-size:11pt;font-weight:700}.print-sheet-head h1{margin:0 0 7mm;color:#111827;font-size:24pt;letter-spacing:0}.print-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6mm;text-align:left}.print-question-list{display:grid;gap:6mm;margin:8mm 0 0;padding:0;list-style:none}.print-question-card{break-inside:avoid;padding:5mm;border:1px solid #cbd5e1;border-radius:4px}.print-question-title{display:grid;gap:2mm}.print-question-title strong{color:#111827;font-size:14pt}.print-question-title span{color:#4b5563;font-size:10pt}.print-visual{margin:4mm 0;padding:3mm;border:1px dashed #94a3b8;border-radius:4px}.print-visual p{margin:0 0 2mm;color:#475569;font-size:10pt;font-weight:700}.print-visual-row{display:flex;flex-wrap:wrap;gap:2mm;margin-top:2mm}.print-visual-row span{display:inline-grid;min-width:8mm;min-height:8mm;place-items:center;font-size:16pt}.print-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3mm 8mm;margin-top:4mm}.print-options span{padding-bottom:2mm;border-bottom:1px solid #e5e7eb}.print-answer-blank{margin-top:5mm;font-weight:700}.print-answer-key{break-before:page;margin-top:8mm}.print-answer-key h2{margin:0 0 5mm;color:#111827;font-size:18pt}.print-answer-key p{break-inside:avoid;margin:0 0 4mm}}