:root{color:#283044;font-synthesis:none;text-rendering:optimizelegibility;background:#fff7df;font-family:Inter,ui-rounded,PingFang SC,Hiragino Sans GB,Microsoft YaHei,system-ui,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 0 0,#ffd6a5cc,#0000 34rem),radial-gradient(circle at 100% 0,#a2d2ffb3,#0000 28rem),linear-gradient(135deg,#fff8e7 0%,#f0fbff 50%,#fff1f8 100%);min-width:320px;min-height:100vh;margin:0}button{font:inherit;border:0}.app-shell{width:min(1180px,100% - 32px);margin:0 auto;padding:28px 0 48px}.hero-card,.panel,.tab,.letter-card,.word-card,.mini-card,.quiz-option,.pill{border:3px solid #ffffffd9;box-shadow:0 18px 40px #5040201f}.hero-card{background:linear-gradient(135deg,#ffffffeb,#fff1b8e0);border-radius:38px;grid-template-columns:1fr auto;align-items:center;gap:24px;padding:clamp(24px,5vw,46px);display:grid;position:relative;overflow:hidden}.hero-card:after{content:"ABC";color:#ffb74d2e;letter-spacing:.08em;font-size:clamp(5rem,16vw,12rem);font-weight:900;position:absolute;bottom:-30px;right:22%;transform:rotate(-8deg)}.eyebrow{color:#ef476f;letter-spacing:.16em;text-transform:uppercase;margin:0 0 8px;font-size:.82rem;font-weight:900}h1,h2{color:#263238;margin:0;line-height:1.05}h1{max-width:760px;font-size:clamp(2.7rem,8vw,6rem)}h2{font-size:clamp(1.7rem,3vw,2.8rem)}.hero-copy{color:#5c677d;max-width:680px;margin:18px 0 0;font-size:clamp(1rem,2vw,1.28rem);line-height:1.8}.mascot{z-index:1;aspect-ratio:1;background:#caf0f8;border-radius:50%;place-items:center;width:clamp(110px,18vw,190px);font-size:clamp(4.4rem,11vw,8rem);animation:3.6s ease-in-out infinite floaty;display:grid}.section-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:22px 0;display:grid}.tab,.pill,.primary-action,.sound-button{cursor:pointer;transition:transform .16s,box-shadow .16s,background .16s}.tab{color:#43506a;background:#ffffffdb;border-radius:24px;justify-content:center;align-items:center;gap:8px;padding:16px 12px;font-weight:900;display:flex}.tab span{font-size:1.35rem}.tab.active,.tab:hover{color:#13315c;background:#7bdff2;transform:translateY(-3px)}.speech-warning{color:#704b00;background:#fff3cd;border-radius:18px;padding:14px 18px;font-weight:700}.content-grid{grid-template-columns:1.4fr .8fr;gap:18px;display:grid}.panel{background:#ffffffdb;border-radius:34px;padding:clamp(20px,4vw,32px)}.welcome-panel{grid-row:span 2}.mini-card-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px;margin-top:22px;display:grid}.mini-card,.letter-card,.word-card,.quiz-option{cursor:pointer;transform-origin:50%}.mini-card{color:#2f3e46;background:#fff;border-radius:26px;gap:6px;min-height:138px;padding:16px;display:grid}.mini-card:hover,.letter-card:hover,.word-card:hover,.quiz-option:hover,.primary-action:hover,.sound-button:hover,.pill:hover{transform:translateY(-4px)scale(1.02)}.mini-emoji,.card-emoji,.spotlight-emoji,.quiz-option span{filter:drop-shadow(0 8px 10px #0000001f)}.mini-emoji{font-size:2.4rem}.star-counter,.sticker-box{letter-spacing:.12em;min-height:76px;margin:18px 0;font-size:2.3rem;line-height:1.4}.primary-action,.sound-button{color:#2b2d42;background:#ffbe0b;border-radius:999px;justify-content:center;align-items:center;min-height:48px;padding:0 22px;font-weight:950;display:inline-flex;box-shadow:0 12px 28px #ffbe0b59}.primary-action.secondary{background:#bde0fe;box-shadow:0 12px 28px #8dcaff59}.learn-layout{grid-template-columns:minmax(270px,360px) 1fr;align-items:start;gap:18px;display:grid}.spotlight-card{background:linear-gradient(135deg, color-mix(in srgb, var(--card-color) 44%, white), #ffffffeb), #fff;gap:18px;display:grid;position:sticky;top:20px}.spotlight-emoji{aspect-ratio:1;background:#ffffff9e;border-radius:34px;place-items:center;width:150px;font-size:5.4rem;animation:1.8s ease-in-out infinite bounce;display:grid}.phonics{background:#ffffffb8;border-radius:999px;margin:12px 0;padding:8px 14px;font-size:1.2rem;font-weight:900;display:inline-flex}.letter-grid,.word-grid{grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:14px;display:grid}.letter-card,.word-card,.quiz-option{background:linear-gradient(145deg, color-mix(in srgb, var(--card-color) 42%, white), #fff);color:#263238;text-align:center;border-radius:28px;gap:8px;min-height:150px;padding:18px;display:grid}.letter-card strong{font-size:2.6rem}.word-card strong,.quiz-option strong{font-size:1.45rem}.card-emoji,.quiz-option span{font-size:3rem}.letter-card.active,.word-card.active{outline:5px solid #ef476f5c;animation:.32s pop}.category-pills{flex-wrap:wrap;grid-column:2;gap:10px;display:flex}.pill{color:#495057;background:#ffffffe6;border-radius:999px;padding:12px 18px;font-weight:900}.pill.active{color:#1b4332;background:#caffbf}.game-layout{grid-template-columns:1fr minmax(240px,320px);gap:18px;display:grid}.quiz-panel{text-align:center}.quiz-panel.correct{animation:.68s celebrate}.quiz-panel.wrong{animation:.36s shake}.quiz-hint{color:#5c677d;font-weight:700}.sound-button{background:#90dbf4;min-height:58px;margin:10px 0 24px;padding:0 30px;font-size:1.1rem;box-shadow:0 12px 28px #48cae44d}.quiz-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;display:grid}.result-message{color:#ef476f;margin:22px 0 0;font-size:1.2rem;font-weight:950}.sticker-panel{background:linear-gradient(145deg,#ffffffeb,#ffd6a5a6)}@keyframes floaty{0%,to{transform:translateY(0)rotate(-2deg)}50%{transform:translateY(-12px)rotate(3deg)}}@keyframes bounce{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-8px)scale(1.04)}}@keyframes pop{0%{transform:scale(.96)}70%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes celebrate{0%,to{transform:scale(1)}45%{transform:scale(1.02)rotate(.5deg)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}@media (width<=860px){.hero-card,.content-grid,.learn-layout,.game-layout{grid-template-columns:1fr}.section-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.spotlight-card{position:static}.category-pills{grid-column:auto}}@media (width<=560px){.app-shell{width:min(100% - 20px,1180px);padding-top:14px}.hero-card,.panel{border-radius:26px}.mascot{justify-self:center}.quiz-options{grid-template-columns:1fr}}