:root{--bg:#fff7e8;--bg2:#eaf7ff;--ink:#243b53;--muted:#62748a;--card:#fff;--line:#d9e2ec;--coral:#ff6b6b;--mint:#4ecdc4;--gold:#ffd166;--violet:#a78bfa;--blue:#3b82f6;--good:#138a72;--shadow:0 18px 45px #243b5324;--radius:28px;color:var(--ink);background:var(--bg);font-family:Lexend,Atkinson Hyperlegible,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html:focus-within{scroll-behavior:smooth}body{background:radial-gradient(circle at 12% 8%, #ffffffd9 0 9%, transparent 10%), radial-gradient(circle at 88% 14%, #ffd16652 0 12%, transparent 13%), linear-gradient(135deg, var(--bg), var(--bg2));min-width:320px;max-width:100%;min-height:100vh;margin:0;overflow-x:hidden}button,input{font:inherit}button{cursor:pointer;border:0;min-height:48px}button:focus-visible,input:focus-visible{outline:4px solid var(--violet);outline-offset:4px}.app-shell{min-width:0;max-width:1180px;margin:auto;padding:20px 24px 28px}.topbar{justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px;display:flex}.brand{align-items:center;gap:12px;min-width:0;display:flex}.logo{background:var(--ink);width:54px;height:54px;box-shadow:var(--shadow);border-radius:18px;place-items:center;display:grid}h1{letter-spacing:-.04em;margin:0;font-size:clamp(24px,3vw,38px)}.brand p{color:var(--muted);margin:2px 0 0;font-size:15px}.pill,.badge{border:2px solid var(--line);color:var(--ink);background:#fff;border-radius:999px;padding:10px 14px;font-weight:900;display:inline-flex}.badge{background:var(--gold);border:0;transform:rotate(1deg)}.badge.soft{color:#17645d;background:#e0f7f5;transform:none}.hero-card{grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);align-items:stretch;gap:20px;display:grid}.mission,.mascot-card,.practice-card,.lesson-map,.side-card,.benefit-strip article,.parent-trust{border-radius:var(--radius);box-shadow:var(--shadow);background:#ffffffeb;border:2px solid #d9e2ece6;min-width:0;padding:22px}.mission{align-content:center;display:grid;position:relative;overflow:hidden}.mission:after{content:"★";color:#ffd16652;font-size:84px;position:absolute;bottom:18px;right:28px;transform:rotate(-14deg)}.mission h2{letter-spacing:-.055em;max-width:760px;margin:14px 0 12px;font-size:clamp(34px,5.1vw,62px);line-height:.98}.mission p,.mascot-card p{color:var(--muted);max-width:650px;font-size:18px;line-height:1.42}.name-form{z-index:1;gap:10px;max-width:430px;display:grid;position:relative}.name-form label{font-weight:900}.name-form input,.typing-box{border:3px solid var(--blue);width:100%;color:var(--ink);background:#fff;border-radius:20px;outline:0;padding:16px 18px;font-size:22px;font-weight:850}.name-form input:focus,.typing-box:focus{box-shadow:0 0 0 6px #3b82f62e}.primary{background:var(--coral);color:#fff;border-radius:18px;padding:14px 20px;font-weight:950;transition:transform .15s,box-shadow .15s;box-shadow:0 10px #d94a4a}.primary:hover{transform:translateY(-2px);box-shadow:0 12px #d94a4a}.primary.compact{box-shadow:none;padding:12px 16px}.secondary,.family-link{color:var(--ink);border:2px solid var(--line);background:#fff;border-radius:18px;padding:12px 18px;font-weight:900}.family-link{width:100%;margin-top:14px}.welcome-card{z-index:1;background:#fff8d9;border:2px solid #f5d76e;border-radius:20px;gap:4px;padding:16px;display:grid;position:relative}.welcome-card strong{font-size:24px}.mascot-card{text-align:center;background:linear-gradient(#fff 0%,#f5f0ff 100%);align-content:center;justify-items:center;gap:10px;display:grid}.mascot-stage{place-items:center;width:min(100%,230px);min-height:142px;display:grid;position:relative}.mascot-shadow{filter:blur(6px);background:#243b5329;border-radius:999px;width:76%;height:24px;position:absolute;bottom:8px}.mascot{filter:drop-shadow(0 18px 14px #243b532e);font-size:clamp(112px,15vw,184px);line-height:.9;position:relative;transform:rotate(-6deg)}.mascot-encourage .mascot{transform:rotate(4deg)scale(1.02)}.mascot-celebrate .mascot{transform:rotate(-8deg)scale(1.08)}.speech-bubble{background:#fff;border:3px solid #dcd4ff;border-radius:24px;width:100%;padding:12px 14px;position:relative}.speech-bubble:before{content:"";background:#fff;border-top:3px solid #dcd4ff;border-left:3px solid #dcd4ff;width:18px;height:18px;position:absolute;top:-11px;left:50%;transform:translate(-50%)rotate(45deg)}.speech-bubble p{color:var(--ink);margin:0;font-weight:850}.mission-preview{text-align:left;background:#f8fafc;border:2px solid #e2e8f0;border-radius:20px;width:100%;padding:14px 16px}.mission-preview h3{margin:0 0 8px;font-size:19px}.mission-preview ol{color:var(--ink);gap:5px;margin:0;padding-left:22px;font-weight:850;display:grid}.family-panel{text-align:left;background:#f8fafc;border:2px solid #e2e8f0;border-radius:18px;width:100%;margin-top:12px;padding:14px}.family-panel p{color:var(--ink);margin:6px 0;font-size:16px}.benefit-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px;display:grid}.benefit-strip article{grid-template-columns:auto 1fr;align-items:center;gap:3px 12px;padding:18px;display:grid;box-shadow:0 12px 28px #243b531a}.benefit-strip span{grid-row:span 2;font-size:32px}.benefit-strip strong{font-size:18px}.benefit-strip p{color:var(--muted);margin:0}.parent-trust{background:linear-gradient(90deg,#fff 0%,#fff8d9 100%);grid-template-columns:220px 1fr;align-items:center;gap:18px;margin-top:16px;display:grid;box-shadow:0 12px 28px #243b531a}.parent-trust h2{margin:0;font-size:25px}.parent-trust div{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.parent-trust p{color:var(--muted);margin:0;line-height:1.35}.parent-trust strong{color:var(--ink)}.practice-grid{grid-template-columns:290px minmax(0,1fr) 260px;align-items:start;gap:22px;margin-top:22px;display:grid}.lesson-map{gap:10px;display:grid}.lesson-map h2,.practice-card h2,.side-card h2{margin:0 0 10px;font-size:25px}.lesson-button{text-align:left;color:var(--ink);background:#f8fafc;border:2px solid #e2e8f0;border-radius:20px;gap:4px;padding:13px;font-weight:950;display:grid}.lesson-button small{color:var(--muted);font-weight:850}.lesson-button.active{background:var(--ink);color:#fff;border-color:var(--ink)}.lesson-button.active small{color:var(--gold)}.practice-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.mini-mascot{font-size:46px}.phrase{letter-spacing:.02em;overflow-wrap:anywhere;background:#fff;border:3px dashed #cbd5e1;border-radius:24px;min-height:116px;margin:16px 0;padding:22px;font-size:clamp(34px,5vw,58px);font-weight:950}.phrase .done{color:var(--good);text-underline-offset:8px;text-decoration:underline;text-decoration-thickness:4px}.phrase .next{background:var(--gold);border:2px solid #d99a00;border-radius:12px;padding:0 5px}.progress{background:#e2e8f0;border:2px solid #d7e0ea;border-radius:999px;height:18px;margin-top:14px;overflow:hidden}.bar{background:linear-gradient(90deg, var(--mint), var(--gold));border-radius:inherit;height:100%}.stats{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px;display:grid}.stat{text-align:center;background:#f8fafc;border:2px solid #e2e8f0;border-radius:18px;padding:12px}.stat b{font-size:27px;display:block}.result-card{background:#fff8d9;border:3px solid #f5d76e;border-radius:24px;grid-template-columns:1fr auto;align-items:center;gap:16px;margin-top:14px;padding:18px;display:grid}.result-card strong{font-size:25px}.result-card p{margin:5px 0 0;font-weight:850}.result-actions{gap:10px;display:grid}.keyboard{gap:8px;margin-top:20px;display:grid}.key-row{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.key{background:#fff;border:2px solid #cbd5e1;border-radius:12px;place-items:center;min-width:42px;height:46px;font-weight:950;display:grid;box-shadow:0 4px #cbd5e1}.key.home{background:#e0f7f5;border-style:dashed}.key.next-key{background:var(--gold);border-color:#e7a800;transform:translateY(-3px);box-shadow:0 7px #d99a00}.space{width:min(260px,80%)}.side-card ul{padding-left:20px;font-weight:900}.small{color:var(--muted);font-size:14px}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (width<=980px){.hero-card,.practice-grid,.benefit-strip,.parent-trust,.parent-trust div{grid-template-columns:1fr}.topbar{flex-direction:column;align-items:flex-start}}@media (width<=640px){.app-shell{padding:10px}.topbar{gap:10px;margin-bottom:10px}.logo{border-radius:15px;width:46px;height:46px}.brand p{font-size:13px}.pill{display:none}.hero-card{gap:12px}.mission,.mascot-card,.practice-card,.lesson-map,.side-card,.benefit-strip article,.parent-trust{border-radius:20px;padding:14px}.mission h2{margin:10px 0;font-size:clamp(30px,10vw,42px)}.mission p,.mascot-card p{font-size:16px}.name-form input,.typing-box{border-radius:16px;padding:13px 14px;font-size:18px}.mascot-stage{width:min(100%,180px);min-height:108px}.mascot{font-size:clamp(92px,30vw,124px)}.benefit-strip{gap:10px;margin-top:12px}.benefit-strip article{grid-template-columns:auto 1fr;padding:13px}.parent-trust{gap:10px;margin-top:12px}.parent-trust h2,.lesson-map h2,.practice-card h2,.side-card h2{font-size:21px}.practice-grid{gap:12px;margin-top:12px}.phrase{min-height:88px;padding:16px;font-size:clamp(28px,10vw,42px)}.stats,.result-card{grid-template-columns:1fr}.result-actions{width:100%}.key{min-width:36px;height:42px}}