:root{--ink:#202547;--muted:#656b83;--cream:#f5f5fd;--white:#fff;--purple:#5c46c7;--purple-soft:#ece8ff;--orange:#d75b2d;--gold:#f4b740;--border:#e2e3f0;--shadow:0 16px 44px rgba(55,45,115,.10)}*{box-sizing:border-box}html{background:var(--cream);color:var(--ink);font-family:Inter,ui-rounded,SF Pro Rounded,system-ui,-apple-system,Segoe UI,sans-serif}body{margin:0;min-height:100vh;background:radial-gradient(circle at 5% 0,#fff3dc 0,transparent 30%),radial-gradient(circle at 100% 12%,#e9e4ff 0,transparent 32%),var(--cream)}button,input{font:inherit}button{touch-action:manipulation}button:focus-visible,input:focus-visible{outline:4px solid rgba(244,183,64,.45);outline-offset:2px}.page{width:min(920px,100%);min-height:100vh;margin:auto;padding:28px 20px 70px}.narrow{width:min(720px,100%)}h1,h2,p{margin-top:0}h1{font-size:clamp(2rem,6vw,3.2rem);line-height:1.04;letter-spacing:-.035em}h2{letter-spacing:-.02em}.lead,.muted,.offlineNote{color:var(--muted);line-height:1.55}.eyebrow{color:var(--purple);font-size:.78rem;font-weight:900;letter-spacing:.13em}.logo{width:76px;height:76px;display:grid;place-items:center;border-radius:24px;background:linear-gradient(145deg,#725ee0,#4d37af);color:#fff;font-weight:950;font-size:1.8rem;box-shadow:0 12px 24px rgba(92,70,199,.28)}.finish,.loginPage{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}.loginCard{width:100%;max-width:470px;min-width:0;overflow:hidden;background:rgba(255,255,255,.92);padding:clamp(26px,6vw,46px);border:1px solid var(--border);border-radius:30px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.author{font-size:.72rem;font-weight:800;color:var(--muted);margin:8px 0 26px}.loginCard h1{margin-bottom:10px}.form{grid-gap:18px;gap:18px;margin-top:25px}.form,.form label{display:grid;min-width:0}.form label{grid-gap:8px;gap:8px;font-weight:850}.form input,.textAnswer{min-width:0;width:100%;border:2px solid var(--border);border-radius:17px;padding:16px 17px;background:#fff;color:var(--ink);font-size:1rem}.offlineNote{text-align:center;font-size:.86rem;margin:20px 5px 0}.back,.primary,.quiet,.secondary{border:0;border-radius:15px;padding:14px 18px;font-weight:900;cursor:pointer}.primary{width:100%;background:linear-gradient(135deg,#df6c3c,var(--orange));color:#fff;box-shadow:0 9px 20px rgba(215,91,45,.2)}.secondary{background:var(--purple);color:#fff}.back,.quiet{background:#fff;color:var(--purple);border:1px solid var(--border)}button:disabled{opacity:.48;cursor:not-allowed}.back{margin-bottom:28px}.message{border-radius:13px;padding:12px 14px;background:#fff7dd;color:#765b00}.message.error{background:#fdebed;color:#9a3242}.appHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:26px}.appHeader h1{font-size:clamp(1.9rem,5vw,2.8rem);margin-bottom:7px}.hero,.runHero{border-radius:26px;padding:25px;background:linear-gradient(135deg,#6650cd,#4934ad);color:#fff;box-shadow:var(--shadow);margin-bottom:28px}.hero{display:flex;justify-content:space-between;align-items:center;gap:20px}.hero h2,.runHero h2{margin-bottom:6px}.hero p,.runHero p{color:#eeebff;margin-bottom:0}.sparkle{font-size:2rem}.coin{white-space:nowrap;background:rgba(255,255,255,.16);padding:11px 14px;font-weight:900}.coin,.progress{border-radius:999px}.progress{height:9px;background:rgba(112,110,145,.18);overflow:hidden}.progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--gold),#ffd97a);transition:width .25s}.runHero .progress{background:rgba(255,255,255,.2);margin-top:18px}.gradePicker{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 28px}.grade{min-width:86px;border:2px solid var(--border);background:#fff;color:var(--ink);border-radius:17px;padding:12px 18px;font-weight:900}.grade small{display:block;font-size:.62rem;color:var(--purple);margin-top:3px}.grade.active{background:var(--purple);border-color:var(--purple);color:#fff}.grade.active small{color:#eeeaff}.sectionTitle{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:16px}.sectionTitle h2{margin-bottom:5px}.sectionTitle p{max-width:620px}.skillGrid,.unitGrid{display:grid;grid-gap:13px;gap:13px}.skillCard,.unitCard{display:flex;align-items:center;text-align:left;width:100%;border:1px solid var(--border);background:rgba(255,255,255,.94);border-radius:20px;padding:16px;box-shadow:0 7px 22px rgba(55,45,115,.06);color:var(--ink);cursor:pointer}.skillCard:hover,.unitCard:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.unitNumber{width:48px;height:48px;display:grid;place-items:center;flex:0 0 auto;border-radius:16px;background:var(--purple-soft);color:var(--purple);font-size:1.2rem;font-weight:950;margin-right:14px}.skillBody,.unitCard span:nth-child(2){display:grid;grid-gap:4px;gap:4px;flex:1 1}.skillCard strong,.unitCard strong{font-size:1.08rem}.skillCard small,.unitCard small{color:var(--muted)}.skillCard>b,.unitCard>b{font-size:1.8rem;color:var(--orange)}.skillGrid{grid-template-columns:repeat(2,minmax(0,1fr));margin:20px 0}.skillIcon{width:58px;height:58px;display:grid;place-items:center;flex:0 0 auto;border-radius:18px;font-size:1.45rem;font-weight:950;margin-right:14px}.skillIcon.mint{background:#e0f5f3}.skillIcon.yellow{background:#fff1d6}.skillIcon.blue{background:#e7eeff}.skillIcon.purple{background:#f2e8ff}.skillIcon.pink{background:#ffeaf0}.skillBody .progress{margin-top:5px}.card{background:#fff;border:1px solid var(--border);border-radius:22px;padding:21px;box-shadow:0 7px 22px rgba(55,45,115,.05);margin-top:18px}.card p{color:var(--muted);line-height:1.5}.questionTop{display:flex;justify-content:space-between;align-items:center}.questionText{font-size:clamp(1.35rem,5vw,2rem);line-height:1.45;font-weight:500;letter-spacing:0;margin:25px 0}.questionImage{display:block;width:100%;max-height:360px;object-fit:contain;background:#fff;border:1px solid var(--border);border-radius:20px;margin-bottom:18px}audio{width:100%;margin:6px 0 18px}.answers{display:grid;grid-gap:11px;gap:11px}.answer{width:100%;text-align:left;border:2px solid var(--border);background:#fff;color:var(--ink);border-radius:17px;padding:16px;font-weight:700;cursor:pointer}.answer.selected{border-color:var(--orange);background:#fff3ec}.answer.right{border-color:#38a47f;background:#e5f6f0}.match{background:#fff;border:1px solid var(--border);border-radius:18px;padding:16px}.match>strong{display:block;margin-bottom:10px}.match>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:8px;gap:8px}.explanation,.feedback{border-radius:18px;padding:17px;margin-top:15px;line-height:1.55}.feedback.good{background:#e5f6f0}.feedback.retry{background:#fff0e7}.feedback h3{margin-bottom:5px}.recorder{margin-top:5px}.recording{text-align:center;color:#c02d53}.trophy{font-size:4rem}.finish{text-align:center}.finish>*{max-width:520px}.finish .primary{max-width:360px}.finish .logo{margin:auto}.finish h2{color:var(--purple)}@media(max-width:650px){.page{padding:22px 15px 55px}.skillGrid{grid-template-columns:1fr}.hero{align-items:flex-start}.coin{font-size:.8rem}.appHeader{align-items:center}.appHeader .quiet{padding:10px 12px}.sectionTitle{align-items:center}.sectionTitle .secondary{padding:11px}.match>div{grid-template-columns:1fr}.questionText{margin:20px 0}}@media(display-mode:standalone){.page{padding-top:max(28px,env(safe-area-inset-top));padding-bottom:max(70px,env(safe-area-inset-bottom))}}