*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}:root{--coral:#ff6b6b;--sky:#4ecdc4;--sun:#ffd93d;--grape:#9b5de5;--grass:#6bcb77;--cream:#fff8e7;--ink:#3d405b;--pink:#ff9fcf}html,body{background:var(--cream);color:var(--ink);touch-action:manipulation;-webkit-user-select:none;user-select:none;font-family:Comic Sans MS,Chalkboard SE,PingFang SC,Hiragino Sans GB,sans-serif;overflow-x:hidden}button{cursor:pointer;touch-action:manipulation;border:none;font-family:inherit}button:active{transform:scale(.94)}.big-btn{background:var(--coral);color:#fff;border-radius:60px;padding:16px 32px;font-size:clamp(1.3rem,4vw,2rem);font-weight:800;transition:transform .1s;box-shadow:0 6px #00000026,0 10px 20px #0000001a}.big-btn.blue{background:var(--sky)}.big-btn.green{background:var(--grass)}.big-btn.purple{background:var(--grape)}.big-btn.yellow{background:var(--sun);color:var(--ink)}.card{background:#fff;border-radius:24px;box-shadow:0 4px #3d405b1f,0 12px 24px #3d405b14}.page{flex-direction:column;max-width:900px;min-height:100vh;margin:0 auto;padding:16px 16px 40px;display:flex}.topbar{align-items:center;gap:10px;padding:8px 4px 16px;display:flex}.topbar .back{background:#fff;border-radius:50%;justify-content:center;align-items:center;width:52px;height:52px;font-size:1.6rem;display:flex;box-shadow:0 3px #0000001a}.topbar h1{text-align:center;color:var(--ink);flex:1;font-size:clamp(1.4rem,4.5vw,2rem)}.star-chip{white-space:nowrap;background:#fff;border-radius:30px;align-items:center;gap:6px;padding:8px 14px;font-size:1.1rem;font-weight:700;display:flex;box-shadow:0 3px #0000001a}.grid{gap:14px;display:grid}.grid.cols-2{grid-template-columns:repeat(2,1fr)}.grid.cols-3{grid-template-columns:repeat(3,1fr)}.grid.cols-4{grid-template-columns:repeat(4,1fr)}.grid.cols-6{grid-template-columns:repeat(6,1fr)}@media (width<=640px){.grid.cols-4{grid-template-columns:repeat(3,1fr)}.grid.cols-6{grid-template-columns:repeat(4,1fr)}}@keyframes pop{0%{opacity:0;transform:scale(.3)}70%{transform:scale(1.15)}to{opacity:1;transform:scale(1)}}@keyframes floaty{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes sparkle{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.3)}}.pop{animation:.4s ease-out pop}.floaty{animation:3s ease-in-out infinite floaty}.overlay{z-index:100;background:#3d405b80;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.overlay .dialog{text-align:center;background:#fff;border-radius:30px;width:90%;max-width:420px;padding:28px;animation:.3s ease-out pop}.speak-btn{background:var(--sky);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:64px;height:64px;font-size:1.6rem;display:flex;box-shadow:0 4px #00000026}.speak-btn.playing{background:var(--sun);color:var(--ink);animation:.8s infinite sparkle}.record-btn{background:var(--coral);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;font-size:1.4rem;display:flex;box-shadow:0 4px #00000026}.record-btn.recording{background:#e63946;animation:.6s infinite sparkle}.word-card{cursor:pointer;background:#fff;border-radius:22px;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;transition:transform .1s;display:flex;box-shadow:0 4px #3d405b1f}.word-card:active{transform:scale(.93)}.word-card .art{aspect-ratio:1;justify-content:center;align-items:center;width:100%;display:flex}.word-card .art svg{width:80%;height:80%}.word-card .word{color:var(--ink);letter-spacing:.5px;font-size:clamp(1rem,3.4vw,1.4rem);font-weight:800}.word-card .cn{color:#999;font-size:clamp(.75rem,2.4vw,.95rem)}.letter-card{aspect-ratio:1;cursor:pointer;background:#fff;border-radius:20px;flex-direction:column;justify-content:center;align-items:center;gap:4px;display:flex;box-shadow:0 4px #3d405b1f}.letter-card .upper{font-size:clamp(1.8rem,6vw,2.6rem);font-weight:900;line-height:1}.letter-card .lower{color:#aaa;font-size:clamp(1rem,3.4vw,1.5rem);font-weight:700}.topic-card{cursor:pointer;background:#fff;border-radius:26px;flex-direction:column;align-items:center;gap:6px;padding:20px 10px;display:flex;box-shadow:0 4px #3d405b1f}.topic-card .t-icon{font-size:2.6rem}.topic-card .t-name{font-size:1.2rem;font-weight:800}.topic-card .t-en{color:#999;font-size:.9rem}.footer-note{text-align:center;color:#bbb;margin-top:auto;padding-top:20px;font-size:.8rem}