@import"https://fonts.googleapis.com/css2?family=Andika:wght@400;700&family=Nunito:wght@700;800;900&display=swap";:root{--ink: #2f3552;--honey: #FFD166;--gold: #F5B700;--bg: #FFF8E6;--card: #FFFFFF;--green: #3DBE6B;--green-bg: #DDF6E4;--red: #E5484D;--blue: #7FB7E6;--radius: 18px;--shadow: 0 4px 0 rgba(47, 53, 82, .15)}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Nunito,system-ui,sans-serif;-webkit-tap-highlight-color:transparent}body{min-height:100vh;background-image:radial-gradient(circle at 20px 20px,rgba(245,183,0,.12) 3px,transparent 4px);background-size:40px 40px}button{font-family:inherit;color:inherit;cursor:pointer}.pic svg,.big-pic svg,.card-pics svg,.bee-img svg,.card-bee svg,.head-bee svg,.reward-bee svg,.bee-count svg{display:block;width:100%;height:100%}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--honey);border-bottom:3px solid var(--ink)}.topbar h1{flex:1;margin:0;font-size:clamp(18px,4.5vw,26px);font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.back-btn{width:44px;height:44px;flex:none;border:3px solid var(--ink);border-radius:50%;background:#fff;font-size:22px;font-weight:900;line-height:1}.bee-count{display:flex;align-items:center;gap:4px;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:2px 12px 2px 4px;font-weight:900;font-size:18px}.bee-count svg{width:34px;height:34px}main{max-width:920px;margin:0 auto;padding:16px 14px 60px}.btn{border:3px solid var(--ink);border-radius:999px;background:#fff;padding:12px 22px;font-size:18px;font-weight:900;box-shadow:var(--shadow)}.btn.primary{background:var(--green);color:#fff}.btn:active,.step:active,.section-card:active,.key:active{transform:translateY(2px);box-shadow:none}.btn-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}.link-btn{display:block;margin:36px auto 0;background:none;border:none;text-decoration:underline;opacity:.6;font-size:14px}.hint{text-align:center;font-size:18px;font-weight:800;margin:6px 0 14px}.speaking-tip{display:flex;align-items:center;gap:10px;max-width:720px;margin:0 auto 16px;padding:10px 14px;background:#fff8e4;border:2px solid #E8C95F;border-radius:16px;text-align:left}.speaking-tip-icon{flex:none;width:34px;text-align:center;font-size:27px}.speaking-tip-copy strong{display:block;font-size:16px;line-height:1.25}.speaking-tip-copy p{margin:3px 0 0;font-size:14px;line-height:1.35}.bee-shelf{background:#fff;border:3px solid var(--ink);border-radius:var(--radius);padding:12px 14px 16px;box-shadow:var(--shadow);margin-bottom:18px}.bee-shelf h2{margin:0 0 10px;font-size:22px;text-align:center}.bee-shelf h2 span{display:inline-block;margin-left:6px;background:var(--honey);border-radius:999px;padding:0 10px}.bee-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.bee-slot{text-align:center;font-size:13px;font-weight:800}.bee-img{width:100%;max-width:110px;aspect-ratio:1;margin:0 auto 4px;border:3px dashed #c9c3b0;border-radius:50%;padding:10%;filter:grayscale(1);opacity:.35}.bee-slot.earned .bee-img{filter:none;opacity:1;border:3px solid var(--gold);background:radial-gradient(circle,#fff3c4,#ffe08a);animation:bob 2.4s ease-in-out infinite}.section-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.section-card{position:relative;text-align:center;background:#fff;border:3px solid var(--ink);border-radius:var(--radius);border-top:12px solid var(--c);padding:12px 10px 14px;box-shadow:var(--shadow)}.section-card.champ{grid-column:1 / -1;background:linear-gradient(180deg,#fff6d6,#fff)}.section-card.practice{background:linear-gradient(180deg,#eaf6ff,#fff)}.card-pics{display:flex;justify-content:center;gap:4px}.card-pics svg{width:30%;max-width:80px;height:auto}.card-name{font-size:22px;font-weight:900;margin-top:6px}.card-sub{font-size:15px;opacity:.7}.card-sub.practice-sub{font-size:13px;font-weight:800;opacity:.9}.card-dots{display:flex;justify-content:center;gap:6px;margin-top:8px}.card-dots span{width:14px;height:14px;border-radius:50%;border:2px solid var(--ink);background:#fff}.card-dots span.on{background:var(--c)}.card-bee{position:absolute;top:4px;right:6px;width:44px;height:44px}.practice-area{margin-top:28px;padding:18px 14px 20px;border:3px dashed #4C9FE8;border-radius:var(--radius);background:linear-gradient(180deg,#eaf6ff,#f9fcff)}.practice-area-heading{text-align:center;margin:0 auto 16px;max-width:650px}.practice-area-label{display:inline-block;padding:4px 12px;border-radius:999px;background:#d8edff;color:#285a82;font-size:12px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}.practice-area-heading h2{margin:8px 0 4px;font-size:23px}.practice-area-heading p{margin:0;font-size:15px}.practice-grid .section-card{grid-column:1 / -1}.section-head{display:flex;align-items:center;gap:14px;background:#fff;border:3px solid var(--ink);border-left:14px solid var(--c);border-radius:var(--radius);padding:10px 14px;margin-bottom:16px;font-size:18px}.section-head p{margin:0}.head-bee{width:64px;height:64px;flex:none;filter:grayscale(1);opacity:.35}.head-bee.earned{filter:none;opacity:1;animation:bob 2.4s ease-in-out infinite}.head-bee.practice-head{display:grid;place-items:center;border:3px solid var(--c);border-radius:50%;background:#eaf6ff;color:var(--ink);filter:none;opacity:1;font-size:11px;font-weight:900;letter-spacing:.03em}.steps{display:grid;gap:12px}.step{display:flex;align-items:center;gap:12px;text-align:left;background:#fff;border:3px solid var(--ink);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow)}.step-num{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:50%;border:3px solid var(--ink);background:var(--c);font-weight:900;font-size:20px;color:#fff}.step.done .step-num{background:var(--green)}.step-icon{font-size:30px}.step-text{flex:1;display:flex;flex-direction:column}.step-text b{font-size:20px}.step-text small{font-size:15px;opacity:.75}.step-go{font-weight:900;font-size:18px;background:var(--honey);border-radius:999px;padding:6px 14px}.step.done .step-go{background:var(--green-bg)}.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.word-card{position:relative;background:#fff;border:3px solid var(--ink);border-radius:var(--radius);padding:10px;box-shadow:var(--shadow)}.word-card .pic{width:100%;aspect-ratio:1;max-width:170px;margin:0 auto}.word{font-family:Andika,sans-serif;font-weight:700;font-size:clamp(22px,5vw,32px)}.speaker{position:absolute;top:6px;right:8px;font-size:18px;opacity:.6}.pager{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:18px;font-weight:900;font-size:18px}.arrow{width:64px;height:64px;border-radius:50%;border:3px solid var(--ink);background:var(--honey);font-size:26px;box-shadow:var(--shadow)}.arrow:disabled{opacity:.3;cursor:default}.match-cols{display:grid;grid-template-columns:1.3fr 1fr;gap:14px;align-items:start}.pic-col{display:grid;gap:10px}.drop{position:relative;display:flex;align-items:center;gap:10px;background:#fff;border:3px solid var(--ink);border-radius:var(--radius);padding:6px 10px;min-height:84px;transition:background .2s,transform .1s}.drop .pic{width:70px;height:70px;flex:none}.drop-label{flex:1;min-height:44px;display:grid;place-items:center;border:3px dashed #c9c3b0;border-radius:12px;font-family:Andika,sans-serif;font-weight:700;font-size:22px;color:#c9c3b0}.drop.over{background:#fff3c4;transform:scale(1.02)}.drop.correct{background:var(--green-bg);border-color:var(--green)}.drop.correct .drop-label{border:3px solid var(--green);background:var(--green);color:#fff}.word-col{position:sticky;top:76px}.word-list{display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 96px);overflow-y:auto;padding:4px}.chip{background:var(--honey);border:3px solid var(--ink);border-radius:14px;padding:10px 12px;text-align:center;font-family:Andika,sans-serif;font-weight:700;font-size:22px;box-shadow:var(--shadow)}.draggable{touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}.draggable.dragging{opacity:.3}.draggable.selected{outline:4px solid var(--blue);outline-offset:2px;transform:scale(1.06)}.ghost{position:fixed;left:0;top:0;z-index:100;margin:0;pointer-events:none;cursor:grabbing;box-shadow:0 10px 20px #00000040}.word-game{text-align:center}.progress{height:14px;background:#fff;border:3px solid var(--ink);border-radius:999px;overflow:hidden}.progress-fill{height:100%;background:var(--green);transition:width .3s}.progress-text{font-weight:800;margin:4px 0 8px;text-align:center}.big-pic{width:min(52vw,220px);aspect-ratio:1;margin:6px auto;background:#fff;border:3px solid var(--ink);border-radius:24px;padding:10px}.hear-btn{border:3px solid var(--ink);border-radius:999px;background:#fff;font-size:18px;font-weight:900;padding:6px 18px;box-shadow:var(--shadow)}.tiles{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;min-height:60px;margin:10px 0 18px}.tile,.slot{--size: min(calc((100vw - 40px) / var(--n, 8) - 8px), 56px);width:var(--size);height:calc(var(--size) * 1.15);display:grid;place-items:center;border:3px solid var(--ink);border-radius:12px;font-family:Andika,sans-serif;font-weight:700;font-size:calc(var(--size) * .62)}.tile{background:var(--honey);box-shadow:var(--shadow)}.slots{display:flex;justify-content:center;gap:min(1.5vw,8px);margin:12px 0}.slot{position:relative;background:#fff;border-style:dashed;transition:background .2s}.slot.over{background:#fff3c4}.slot.correct{background:var(--green);border:3px solid var(--green);color:#fff}.slot.given{background:var(--honey);border-style:solid}.slots.type .slot{cursor:pointer}.slot.active{border:3px solid var(--blue);box-shadow:0 0 0 4px #7fb7e666}.slots.solved .slot{animation:pop .4s ease}.message{min-height:28px;font-weight:900;font-size:20px}.message .good{color:var(--green)}.message .bad{color:var(--red)}.message .warn{color:#b07a00}.keyboard{display:flex;flex-direction:column;gap:6px;margin:8px auto 0;max-width:620px}.krow{display:flex;justify-content:center;gap:5px}.key{flex:1;max-width:56px;height:52px;border:3px solid var(--ink);border-radius:10px;background:#fff;font-family:Andika,sans-serif;font-weight:700;font-size:24px;padding:0;box-shadow:var(--shadow)}.key.wide{flex:1.6;max-width:84px;background:#ffe3e3}.xmark{position:absolute;inset:0;display:grid;place-items:center;z-index:5;color:var(--red);font-size:44px;font-weight:900;pointer-events:none;text-shadow:0 0 4px #fff,0 0 8px #fff;animation:xfade .9s ease forwards}.shake{animation:shake .4s ease}.celebrate{text-align:center;padding-top:30px}.celebrate h2{font-size:36px;margin:10px 0}.celebrate p{font-size:20px}.big-star{font-size:90px;animation:pop .6s ease}.reward-bee{width:200px;height:200px;margin:0 auto;animation:spinIn 1.2s ease,bob 2.4s 1.2s ease-in-out infinite;background:radial-gradient(circle,#FFF3C4 0%,#FFE08A 60%,transparent 70%);border-radius:50%}.confetti{position:fixed;inset:0;pointer-events:none;z-index:200;overflow:hidden}.confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:2px;animation:fall linear forwards}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}@keyframes xfade{0%{transform:scale(.4);opacity:0}20%{transform:scale(1.1);opacity:1}75%{opacity:1}to{opacity:0}}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.18)}to{transform:scale(1)}}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes spinIn{0%{transform:scale(0) rotate(-360deg)}to{transform:scale(1) rotate(0)}}@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}@media(max-width:600px){.card-grid{grid-template-columns:repeat(2,1fr)}.section-grid{grid-template-columns:1fr}.step-icon{display:none}.step-text b{font-size:18px}.drop .pic{width:56px;height:56px}.drop-label,.chip{font-size:18px}.match-cols{grid-template-columns:1.25fr 1fr;gap:8px}.key{height:46px;font-size:20px;border-width:2px}.krow{gap:3px}}:root{--background: 42 100% 95%;--foreground: 233 27% 25%;--border: 233 27% 25%;--card: 0 0% 100%;--card-foreground: 233 27% 25%;--primary: 43 100% 63%;--primary-foreground: 233 27% 25%;--secondary: 166 48% 57%;--secondary-foreground: 233 27% 25%;--muted: 42 50% 90%;--muted-foreground: 233 15% 42%;--accent: 351 78% 68%;--accent-foreground: 233 27% 25%;--destructive: 358 76% 59%;--destructive-foreground: 0 0% 100%;--input: 42 35% 82%;--ring: 208 61% 70%;--app-font-sans: "Nunito", system-ui, sans-serif;--app-font-serif: Georgia, serif;--app-font-mono: ui-monospace, monospace;--radius: 1rem}.dark{--background: 233 27% 25%;--foreground: 42 100% 95%;--border: 42 100% 95%;--card: 233 23% 31%;--card-foreground: 42 100% 95%;--primary: 43 100% 63%;--primary-foreground: 233 27% 25%;--secondary: 166 48% 57%;--secondary-foreground: 233 27% 25%;--muted: 233 18% 37%;--muted-foreground: 42 35% 82%;--accent: 351 78% 68%;--accent-foreground: 233 27% 25%;--destructive: 358 76% 59%;--destructive-foreground: 0 0% 100%;--input: 233 18% 37%;--ring: 208 61% 70%}