:root{--ink:#17233c;--muted:#667085;--blue:#4b7bec;--blue-dark:#325dcc;--yellow:#ffd45c;--mint:#c9f7df;--pink:#ffd3e7;--sky:#dbeafe;--paper:#fff}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{color:var(--ink);background:radial-gradient(circle at 10% 10%,#fff5bf 0 8%,#0000 9%),radial-gradient(circle at 88% 18%,#d7f6ff 0 10%,#0000 11%),linear-gradient(#f7fbff 0%,#eef4ff 100%);font-family:ui-rounded,Arial Rounded MT Bold,Trebuchet MS,system-ui,sans-serif}button,input{font:inherit}button{cursor:pointer}.shell{min-height:100vh;padding:28px 24px 36px;position:relative;overflow:hidden}.setup-shell{place-items:center;display:grid}.topbar{justify-content:space-between;align-items:center;max-width:900px;margin:0 auto 22px;font-size:20px;display:flex}.logo{margin-right:8px}.streak{background:var(--paper);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);border-radius:999px;padding:8px 14px;font-size:16px}.card{background:var(--paper);border:4px solid var(--ink);box-shadow:0 10px 0 var(--ink);border-radius:28px}.setup-card{text-align:center;width:min(620px,100%);padding:34px}.practice-card,.success-card{text-align:center;width:min(760px,100%);margin:0 auto;padding:34px}.success-card{background:linear-gradient(#fffbe6,#fff)}.mascot,.trophy{font-size:72px;line-height:1}.eyebrow{letter-spacing:.14em;color:var(--blue-dark);margin:12px 0 8px;font-size:13px;font-weight:900}h1{margin:0 0 14px;font-size:clamp(34px,5vw,54px);line-height:1.03}.lead,.success-card p{color:var(--muted);font-size:18px;line-height:1.5}.setup-form{text-align:left;gap:16px;margin-top:24px;display:grid}.setup-form label{gap:7px;font-weight:800;display:grid}.setup-form input{background:#f8fafc;border:3px solid #cbd5e1;border-radius:14px;outline:none;width:100%;padding:15px 16px}.setup-form input:focus,.practice-input:focus{border-color:var(--blue);box-shadow:0 0 0 5px #dbe7ff}.privacy-note{color:var(--muted);margin-top:20px;font-family:system-ui,sans-serif;font-size:12px;line-height:1.5}.mode-row{grid-template-columns:repeat(3,1fr);gap:10px;max-width:760px;margin:0 auto 24px;display:grid}.mode{border:3px solid var(--ink);color:var(--ink);box-shadow:0 4px 0 var(--ink);background:#fff;border-radius:18px;padding:12px 8px;font-weight:900}.mode span{margin-bottom:3px;font-size:25px;display:block}.mode.active{background:var(--yellow);box-shadow:0 2px 0 var(--ink);transform:translateY(2px)}.progress{justify-content:center;align-items:center;margin-bottom:18px;display:flex}.dot{border:3px solid var(--ink);background:#fff;border-radius:50%;place-items:center;width:40px;height:40px;font-weight:900;display:grid}.dot.current{background:var(--yellow)}.dot.done{background:var(--mint)}.line{background:var(--ink);width:80px;height:4px}.target-box{border:3px dashed var(--blue);background:var(--sky);border-radius:18px;gap:5px;margin:24px auto 18px;padding:18px;display:grid}.target-box span{color:var(--muted);font-size:14px;font-weight:800}.target-box strong{overflow-wrap:anywhere;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:clamp(20px,4vw,30px)}.hint-button,.text-button{color:var(--blue-dark);text-underline-offset:3px;background:0 0;border:0;font-weight:900;text-decoration:underline}.encouragement{color:var(--muted);font-weight:800}.practice-form{gap:14px;margin-top:20px;display:grid}.practice-input{text-align:center;border:4px solid #cbd5e1;border-radius:18px;outline:none;width:100%;padding:20px 16px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:clamp(20px,4vw,30px)}.feedback{background:#fff7d6;border:3px solid #f0b429;border-radius:15px;padding:13px;font-weight:800}.primary{border:3px solid var(--ink);background:var(--blue);color:#fff;box-shadow:0 5px 0 var(--ink);border-radius:16px;padding:14px 18px;font-weight:950}.primary:hover{background:var(--blue-dark)}.primary:active{box-shadow:0 2px 0 var(--ink);transform:translateY(3px)}.primary.big{padding:17px 22px;font-size:21px}.stars{letter-spacing:5px;color:#ffb703;margin:20px 0;font-size:36px}.badge{background:var(--mint);border:3px solid var(--ink);border-radius:16px;max-width:430px;margin:0 auto 22px;padding:14px;font-weight:900}footer{text-align:center;margin-top:28px}.confetti{text-align:center;word-spacing:18px;pointer-events:none;font-size:clamp(24px,5vw,50px);animation:1s ease-in-out infinite alternate bounce;position:absolute;top:20px;left:0;right:0}@keyframes bounce{to{transform:translateY(12px)rotate(2deg)}}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (max-width:640px){.shell{padding:18px 14px 28px}.setup-card,.practice-card,.success-card{box-shadow:0 7px 0 var(--ink);border-width:3px;border-radius:22px;padding:24px 18px}.mode{padding:9px 4px;font-size:12px}.mode span{font-size:21px}.topbar{font-size:17px}.streak{font-size:13px}}