:root{color:#1f2937;font-synthesis:none;text-rendering:optimizelegibility;--green:#58cc02;--green-dark:#46a302;--green-soft:#e5ffd4;--blue:#1cb0f6;--blue-soft:#ddf4ff;--red:#ff4b4b;--red-soft:#ffe2e2;--yellow:#ffc800;--ink:#1f2937;--muted:#6b7280;--line:#d8e2ec;--shadow:0 18px 45px #1f29371f;background:#f5fbff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.6}.app-shell{width:min(1040px,100% - 32px);margin:0 auto;padding:24px 0 56px}.home-nav{justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;display:flex}.home-nav button{border:2px solid var(--line);color:var(--blue);background:#fff;border-radius:16px;padding:12px 18px;font-weight:900;box-shadow:0 4px #cbd5e1}.brand-mark{background:linear-gradient(145deg, var(--green), #89e219);color:#fff;width:54px;height:54px;box-shadow:0 8px 0 var(--green-dark);border-radius:18px;place-items:center;font-size:28px;font-weight:1000;display:grid}.hero-card,.progress-hero,.result-card,.question-card{border:2px solid var(--line);box-shadow:var(--shadow);background:#ffffffe6;border-radius:32px}.hero-card{grid-template-columns:220px 1fr;align-items:center;gap:28px;padding:34px;display:grid;position:relative;overflow:hidden}.hero-card:before{content:"";background:radial-gradient(circle,#d9ffbc,#0000 65%);border-radius:999px;width:420px;height:420px;position:absolute;inset:-40% auto auto 55%}.mascot{background:linear-gradient(160deg, var(--green-soft), var(--blue-soft));border-radius:44px;place-items:center;width:190px;height:190px;font-size:92px;animation:3.4s ease-in-out infinite float;display:grid;box-shadow:inset 0 -10px #0000000a}.hero-copy{position:relative}.eyebrow{color:var(--green-dark);letter-spacing:.1em;text-transform:uppercase;font-size:14px;font-weight:1000}h1,h2,h3,p{margin-top:0}h1{color:var(--ink);letter-spacing:-.06em;margin-bottom:12px;font-size:clamp(2rem,6vw,4.8rem);line-height:.95}p{color:var(--muted);font-size:18px;line-height:1.6}.hero-actions{flex-wrap:wrap;gap:14px;margin-top:24px;display:flex}.hero-actions.centered{justify-content:center}.primary-action,.secondary-action,.danger-action,.feedback-banner button,.fill-form button{border:0;border-radius:18px;padding:15px 22px;font-weight:1000;transition:transform .18s,box-shadow .18s,filter .18s}.primary-action,.feedback-banner.correct button,.fill-form button{background:var(--green);color:#fff;box-shadow:0 6px 0 var(--green-dark)}.secondary-action{border:2px solid var(--line);color:var(--blue);background:#fff;box-shadow:0 6px #c7d2fe}.danger-action,.feedback-banner.wrong button{background:var(--red);color:#fff;box-shadow:0 6px #d33838}.small{padding:11px 16px}.primary-action:hover,.secondary-action:hover,.danger-action:hover,.feedback-banner button:hover,.fill-form button:hover,.answer-option:hover,.match-pill:hover{filter:brightness(1.02);transform:translateY(-2px)}.stats-grid{grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0;display:grid}.stats-grid article{border:2px solid var(--line);background:#fff;border-radius:24px;padding:20px}.stats-grid strong{color:var(--blue);font-size:34px;font-weight:1000;display:block}.stats-grid span{color:var(--muted);font-weight:800}.stats-grid.compact{width:100%}.level-map{gap:14px;display:grid}.level-node{border:2px solid var(--line);background:#fff;border-radius:26px;grid-template-columns:auto 1fr;align-items:center;gap:16px;padding:18px;transition:transform .2s,border-color .2s;display:grid}.level-node.current{border-color:var(--green);background:linear-gradient(90deg, var(--green-soft), white);transform:scale(1.01)}.level-badge{background:var(--yellow);color:#7c4a00;border-radius:50%;place-items:center;width:56px;height:56px;font-size:24px;font-weight:1000;display:grid;box-shadow:0 6px #e2a700}.level-node h3{margin-bottom:4px;font-size:20px}.level-node p{margin-bottom:10px;font-size:14px}.mini-progress,.wide-progress,.top-progress{background:#e5e7eb;border-radius:999px;overflow:hidden}.mini-progress{height:12px}.wide-progress{height:18px}.mini-progress span,.wide-progress span,.top-progress span{border-radius:inherit;background:linear-gradient(90deg, var(--green), #9be900);height:100%;transition:width .35s;display:block}.lesson-screen{background:radial-gradient(circle at 15% 10%,#dcfce7,#0000 28%),radial-gradient(circle at 85% 15%,#dff5ff,#0000 25%),#f7fbff;min-height:100vh;padding-bottom:142px}.lesson-header{grid-template-columns:auto 1fr auto;align-items:center;gap:18px;width:min(900px,100% - 28px);margin:0 auto;padding:22px 0;display:grid}.icon-button{color:#94a3b8;background:#fff;border:0;border-radius:14px;place-items:center;width:44px;height:44px;font-size:30px;font-weight:900;display:grid;box-shadow:0 4px #dbe4ed}.top-progress{height:18px}.heart-lives{color:var(--red);gap:4px;font-size:24px;font-weight:1000;display:flex}.heart{transition:transform .2s,opacity .2s}.heart.active{animation:1.8s ease-in-out infinite beat}.heart.lost{color:#cbd5e1;transform:scale(.88)}.lesson-stage{place-items:center;width:min(820px,100% - 28px);min-height:calc(100vh - 240px);margin:0 auto;display:grid}.question-card{width:100%;padding:clamp(24px,5vw,48px);animation:.28s both popIn}.question-card h1{margin-top:12px;margin-bottom:30px;font-size:clamp(1.8rem,5vw,3.4rem);line-height:1.06}.answer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.answer-option,.match-pill{border:2px solid var(--line);min-height:68px;color:var(--ink);text-align:left;background:#fff;border-radius:18px;padding:16px;font-weight:900;transition:transform .18s,border-color .18s,box-shadow .18s;box-shadow:0 5px #dbe4ed}.fill-form{gap:16px;display:grid}.fill-form input{border:3px solid var(--line);width:100%;color:var(--ink);background:#f8fafc;border-radius:20px;outline:none;padding:20px;font-size:24px;font-weight:800}.fill-form input:focus{border-color:var(--blue);background:#fff}.matching-wrap{gap:20px;display:grid}.match-columns{grid-template-columns:1fr 1fr;gap:16px;display:grid}.match-column{gap:12px;display:grid}.match-pill.selected{border-color:var(--blue);background:var(--blue-soft);box-shadow:0 5px #8bd7fb}.match-pill.paired{border-color:var(--green);background:var(--green-soft)}.match-pill small{color:var(--green-dark);margin-top:7px;font-weight:1000;display:block}.feedback-banner{border-top:2px solid #0000000d;justify-content:space-between;align-items:center;gap:18px;padding:22px max(22px,50vw - 450px);animation:.28s both slideUp;display:flex;position:fixed;bottom:0;left:0;right:0}.feedback-banner.correct{background:var(--green-soft)}.feedback-banner.wrong{background:var(--red-soft)}.feedback-banner strong{color:var(--ink);margin-bottom:4px;font-size:24px;display:block}.feedback-banner p{margin:0;font-size:15px}.flash-correct .question-card{animation:.36s both pulseGreen}.flash-wrong .question-card{animation:.36s both shakeRed}.result-screen,.progress-screen{min-height:100vh}.result-card,.progress-hero{padding:clamp(24px,5vw,44px)}.result-card{text-align:center;justify-items:center;display:grid}.trophy{font-size:84px;animation:3s ease-in-out infinite float}.score-ring{background:conic-gradient(var(--green) var(--score), #e5e7eb 0);border-radius:50%;place-items:center;width:154px;height:154px;margin:12px 0 10px;display:grid}.score-ring strong{width:116px;height:116px;color:var(--green-dark);background:#fff;border-radius:50%;place-items:center;font-size:32px;font-weight:1000;display:grid}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes beat{0%,70%,to{transform:scale(1)}82%{transform:scale(1.14)}}@keyframes popIn{0%{opacity:0;transform:translateY(14px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes pulseGreen{0%{box-shadow:var(--shadow)}50%{box-shadow:0 0 0 9px #58cc0238, var(--shadow)}to{box-shadow:var(--shadow)}}@keyframes shakeRed{0%,to{box-shadow:var(--shadow);transform:translate(0)}25%{box-shadow:0 0 0 9px #ff4b4b2e, var(--shadow);transform:translate(-8px)}50%{transform:translate(8px)}75%{transform:translate(-4px)}}@media (width<=760px){.app-shell{width:min(100% - 22px,1040px);padding-top:14px}.hero-card{grid-template-columns:1fr;padding:24px}.mascot{width:128px;height:128px;font-size:64px}.stats-grid,.answer-grid,.match-columns{grid-template-columns:1fr}.lesson-header{grid-template-columns:auto 1fr}.heart-lives{grid-column:1/-1;justify-content:center}.feedback-banner{flex-direction:column;align-items:stretch}.feedback-banner button{width:100%}}