:root{--color-primary: #ff5a4d;--color-primary-deep: #d93b2f;--color-success: #2fbe6e;--color-success-deep: #1e9153;--color-warning: #ffb020;--color-pro: #8e5be8;--color-pro-deep: #6f41c4;--color-sky: #4cb8ff;--color-error: #e5484d;--color-bg: #fff4e4;--color-surface: #ffffff;--color-ink: #2e2a4f;--color-ink-muted: #6e6a8f;--color-line: #f0e2cc;--font-display: "Baloo 2", "Comic Sans MS", cursive;--font-body: "Nunito", system-ui, sans-serif;--font-code: "JetBrains Mono", monospace;--radius-card: 20px;--radius-ctl: 14px;--gap: 16px;--squish: 0 4px 0}body{margin:0;background:var(--color-bg);color:var(--color-ink);font-family:var(--font-body);font-size:16px;line-height:1.5}.wrap{max-width:720px;margin:0 auto;padding:24px 24px 64px}h1,h2,h3,.tier{font-family:var(--font-display);line-height:1.15}h1{color:var(--color-primary);font-size:44px;margin:0 0 4px}h2{font-size:26px;margin:24px 0 8px}h3{font-size:20px;margin:0 0 4px}.tagline{color:var(--color-ink-muted);font-size:20px;margin-top:0}.card{background:var(--color-surface);border:2px solid var(--color-line);border-radius:var(--radius-card);box-shadow:var(--squish) var(--color-line);padding:20px;margin:var(--gap) 0}.card.locked{background:#fbf6ee}.card.locked h3{color:var(--color-ink-muted)}.btn{font-family:var(--font-display);font-size:17px;color:#fff;border:0;border-radius:var(--radius-ctl);padding:12px 20px;cursor:pointer;transition:transform .1s ease-out,box-shadow .1s ease-out}.btn-primary{background:var(--color-primary);box-shadow:var(--squish) var(--color-primary-deep)}.btn-success{background:var(--color-success);box-shadow:var(--squish) var(--color-success-deep)}.btn-pro{background:var(--color-pro);box-shadow:var(--squish) var(--color-pro-deep)}.btn-secondary{background:var(--color-surface);color:var(--color-ink);border:2px solid var(--color-line);box-shadow:var(--squish) var(--color-line)}.btn-ghost{background:transparent;color:var(--color-ink-muted);box-shadow:none}.btn:not(:disabled):active{transform:translateY(3px);box-shadow:0 1px 0 var(--color-primary-deep)}.btn-secondary:not(:disabled):active{box-shadow:0 1px 0 var(--color-line)}.btn:disabled{opacity:.5;cursor:default}.btn:focus-visible{outline:3px solid var(--color-sky);outline-offset:2px}input{padding:12px;border-radius:var(--radius-ctl);border:2px solid var(--color-line);background:var(--color-surface);color:var(--color-ink);font-family:var(--font-body);font-size:16px;width:100%;box-sizing:border-box}input:focus-visible{outline:3px solid var(--color-sky);outline-offset:1px}.row{display:flex;gap:12px;flex-wrap:wrap}.row>*{flex:1}.topbar{align-items:center}.topbar-right{text-align:right}.center{text-align:center}.hero{text-align:center;padding:40px 0 8px}.hero .mascot-stage{margin:8px auto 0}.steps{display:flex;gap:var(--gap);flex-wrap:wrap}.steps .card{flex:1;min-width:170px;text-align:center;margin:0}.growth-strip{display:flex;gap:var(--gap);align-items:flex-end;justify-content:center;flex-wrap:wrap}.growth-strip figure{margin:0;text-align:center}.growth-strip figcaption{font-family:var(--font-display);font-size:14px;color:var(--color-ink-muted)}.faq details{border-bottom:2px solid var(--color-line);padding:10px 0}.faq summary{font-weight:800;cursor:pointer}footer{color:var(--color-ink-muted);font-size:14px;text-align:center;margin-top:40px}footer a{color:var(--color-ink-muted)}.pricing{display:flex;gap:var(--gap);flex-wrap:wrap;align-items:stretch}.pricing-tile{flex:1;min-width:220px;margin:0}.pricing-tile.recommended{border-color:var(--color-pro);box-shadow:var(--squish) var(--color-pro);position:relative}.pricing-tile .badge{position:absolute;top:-14px;right:16px;background:var(--color-pro);color:#fff;font-family:var(--font-display);font-size:13px;border-radius:999px;padding:3px 12px}.price{font-family:var(--font-display);font-size:30px;color:var(--color-primary);margin:4px 0}.pricing-tile.recommended .price{color:var(--color-pro)}.feat{margin:6px 0}.avatar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--gap)}.avatar-grid .avatar-card{margin:0;flex-direction:column;text-align:center}.avatar-grid .avatar-info{width:100%}.avatar-card{display:flex;gap:var(--gap);align-items:center}button.avatar-card{font:inherit;cursor:pointer;width:100%}button.avatar-card:focus-visible{outline:3px solid var(--color-sky);outline-offset:2px}.avatar-info{flex:1}.level{color:var(--color-ink-muted);font-weight:700}.bar{height:16px;background:var(--color-line);border-radius:999px;overflow:hidden}.bar>span{display:block;height:100%;transition:width .4s cubic-bezier(.34,1.56,.64,1)}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.mascot-stage svg{animation:bob 2.6s ease-in-out infinite}.streak{display:inline-flex;align-items:center;gap:6px;background:var(--color-surface);border:2px solid var(--color-line);border-radius:999px;padding:6px 14px;font-family:var(--font-display);font-size:15px;margin-bottom:var(--gap)}.streak.lit{border-color:var(--color-warning);box-shadow:0 2px 0 var(--color-warning)}.progress-dots{display:flex;gap:8px;justify-content:center;margin:8px 0 16px}.progress-dots span{width:12px;height:12px;border-radius:50%;background:var(--color-line)}.progress-dots span.done{background:var(--color-success)}.progress-dots span.now{background:var(--color-primary)}.answer{margin-top:12px;padding:14px;border-radius:var(--radius-ctl);border:2px solid var(--color-success);background:#eefaf2}.answer.wrong{border-color:var(--color-warning);background:#fff7e6}@keyframes pop{0%{transform:scale(.9)}60%{transform:scale(1.03)}to{transform:scale(1)}}.answer{animation:pop .2s ease-out}.code{font-family:var(--font-code);font-size:14px;background:#f6f1e7;border-radius:8px;padding:3px 8px}.blank-slot{display:inline-block;min-width:64px;border-bottom:3px dashed var(--color-ink-muted);text-align:center;font-family:var(--font-code)}.chip{font-family:var(--font-code);font-size:14px;background:var(--color-surface);border:2px solid var(--color-line);border-radius:999px;padding:8px 16px;cursor:pointer;box-shadow:0 3px 0 var(--color-line)}.chip:not(:disabled):active{transform:translateY(2px);box-shadow:0 1px 0 var(--color-line)}.chip.picked{border-color:var(--color-sky);box-shadow:0 3px 0 var(--color-sky)}.chip:disabled{opacity:.45;cursor:default}.chip:focus-visible{outline:3px solid var(--color-sky);outline-offset:2px}.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.err{color:var(--color-error);font-weight:700}.checkout-msg{color:var(--color-success);font-weight:700}.celebrate{position:fixed;top:0;right:0;bottom:0;left:0;background:#2e2a4f8c;display:flex;align-items:center;justify-content:center;z-index:10}.celebrate .card{text-align:center;max-width:340px}@keyframes flex-in{0%{transform:scale(.6) rotate(-6deg)}70%{transform:scale(1.08) rotate(2deg)}to{transform:scale(1)}}.celebrate .card{animation:flex-in .4s cubic-bezier(.34,1.56,.64,1)}.confetti{position:absolute;width:10px;height:16px;border-radius:3px;top:-20px;animation:fall 1.6s ease-in forwards}@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}.spinner-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 0}.spinner{width:32px;height:32px;border-radius:50%;border:4px solid var(--color-line);border-top-color:var(--color-primary);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#2e2a4f8c;display:flex;align-items:center;justify-content:center;z-index:10}.modal{max-width:380px;width:calc(100% - 48px)}@media (prefers-reduced-motion: reduce){.bar>span,.btn,.chip{transition:none}.mascot-stage svg,.answer,.celebrate .card,.confetti,.spinner{animation:none}}@media (max-width: 480px){.wrap{padding:16px 16px 48px}h1{font-size:36px}}