:root{--brand:#6c5ce7;--brand-dark:#4b3cc4;--alt:#ff8a3d;--alt-dark:#e56d1f;--ok:#22b573;--danger:#ef4565;--warn:#f7b32b;--ink:#1f1b3a;--muted:#6b6889;--bg:#f6f4ff;--card:#fff;--line:#e6e2f7;--radius:18px;--shadow:0 6px 0 #1f1b3a14, 0 12px 30px #1f1b3a14;--f-lp:#ff8fa3;--f-lr:#ffb86b;--f-lm:#ffe066;--f-li:#8ce99a;--f-ri:#74c0fc;--f-rm:#b197fc;--f-rr:#f783ac;--f-rp:#63e6be;--f-th:#dee2e6}*{box-sizing:border-box}html,body{margin:0}body{color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;font-family:Nunito,system-ui,sans-serif;font-size:16px}a{color:var(--brand)}h1,h2,h3{margin:0 0 .4em;font-weight:900;line-height:1.15}p{line-height:1.5}code{background:#f0eefc;border-radius:6px;padding:2px 6px;font-family:JetBrains Mono,monospace}input,select,textarea{font:inherit;border:2px solid var(--line);width:100%;color:var(--ink);background:#fff;border-radius:12px;outline:none;padding:12px 14px}input:focus,select:focus,textarea:focus{border-color:var(--brand)}hr{border:0;border-top:2px solid var(--line);margin:20px 0}.muted{color:var(--muted)}.small{font-size:14px}.error{color:var(--danger);font-weight:700}.ok{color:var(--ok);font-weight:700}.cap{text-transform:capitalize}.loading{text-align:center;color:var(--muted);padding:80px;font-weight:700}.center{text-align:center;flex-direction:column;align-items:center;gap:12px;display:flex}.row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.btn{font:inherit;cursor:pointer;background:var(--brand);color:#fff;box-shadow:0 4px 0 var(--brand-dark);border:0;border-radius:14px;justify-content:center;align-items:center;gap:6px;padding:12px 20px;font-weight:800;text-decoration:none;transition:transform 80ms,box-shadow 80ms;display:inline-flex}.btn:hover{filter:brightness(1.05)}.btn:active{box-shadow:0 1px 0 var(--brand-dark);transform:translateY(3px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.alt{background:var(--alt);box-shadow:0 4px 0 var(--alt-dark)}.btn.ghost{color:var(--brand);box-shadow:none;background:0 0}.btn.danger{background:var(--danger);box-shadow:0 4px #b8203d}.btn.big{border-radius:18px;padding:16px 28px;font-size:20px}.btn.small{box-shadow:0 2px 0 var(--brand-dark);border-radius:10px;padding:7px 12px;font-size:14px}.btn.small.ghost{box-shadow:none}.btn.small.alt{box-shadow:0 2px 0 var(--alt-dark)}.btn.small.danger{box-shadow:0 2px #b8203d}.icon-btn{cursor:pointer;background:0 0;border:0;font-size:22px}.panel{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:20px;padding:22px}.panel h3{margin-bottom:12px}.panel>input,.panel>select,.panel>textarea,.panel>label,.panel>.btn{margin-bottom:10px}.panel-head{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.brand{color:var(--brand);font-size:22px;font-weight:900;text-decoration:none}.brand small{color:var(--alt);font-size:16px}.landing{background:linear-gradient(#efeaff 0%,#fff7ef 100%);min-height:100vh}.land-nav{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:20px 5vw;display:flex}.land-nav div{gap:8px;display:flex}.hero{grid-template-columns:1.3fr 1fr;align-items:center;gap:40px;max-width:1200px;margin:0 auto;padding:40px 5vw 60px;display:grid}.hero h1{font-size:clamp(34px,5vw,58px)}.hero p{color:var(--muted);max-width:600px;font-size:19px}.hl{background:linear-gradient(90deg, var(--brand), var(--alt));color:#0000;-webkit-background-clip:text;background-clip:text}.hero-cta{flex-wrap:wrap;gap:12px;margin-top:20px;display:flex}.hero-art{justify-content:center;display:flex;position:relative}.hero-art .kip{animation:3s ease-in-out infinite bob}.hero-bubble{box-shadow:var(--shadow);background:#fff;border-radius:16px;padding:10px 16px;font-weight:900;position:absolute;top:0;right:10%}.features{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;max-width:1200px;margin:0 auto;padding:0 5vw 50px;display:grid}.feature{border-radius:var(--radius);box-shadow:var(--shadow);background:#fff;padding:22px}.feature span{font-size:34px}.feature p{color:var(--muted);margin:0}.pricing{text-align:center;padding:40px 5vw 60px}.pricing p{color:var(--muted);max-width:560px;margin:0 auto 20px}.land-foot{text-align:center;color:var(--muted);padding:30px}@keyframes bob{50%{transform:translateY(-12px)rotate(-3deg)}}.auth-bg,.play-bg{background:linear-gradient(135deg,#7c6cff,#ff8a3d);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.auth-card,.play-card{background:#fff;border-radius:28px;width:100%;max-width:440px;padding:36px;box-shadow:0 20px 60px #0003}.form{flex-direction:column;gap:14px;margin:16px 0;display:flex}.form label{flex-direction:column;gap:6px;font-weight:800;display:flex}.play-bg{background:radial-gradient(circle at 20% 20%,#ffd166 0 12%,#0000 13%),radial-gradient(circle at 85% 75%,#06d6a0 0 10%,#0000 11%),linear-gradient(135deg,#7c6cff,#4ea8ff)}.play-card{text-align:center;max-width:560px}.play-card form,.play-card>div{flex-direction:column;align-items:center;gap:14px;display:flex}.play-logo{color:var(--brand);font-size:20px;font-weight:900;text-decoration:none;display:block}.play-card .kip{animation:3s ease-in-out infinite bob}.code-input{text-align:center;letter-spacing:6px;max-width:320px;font-family:JetBrains Mono,monospace;font-size:34px;font-weight:900}.kid-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;width:100%;max-height:50vh;padding:4px;display:grid;overflow:auto}.kid{font:inherit;cursor:pointer;background:#f4f1ff;border:3px solid #0000;border-radius:16px;flex-direction:column;align-items:center;gap:4px;padding:14px 8px;font-weight:800;display:flex}.kid:hover{border-color:var(--brand);transform:scale(1.04)}.kid-avatar{font-size:38px}.student{min-height:100vh}.student.young{background:linear-gradient(#e8f4ff 0%,#fff6e8 100%)}.student.teen{color:#e8e9f3;--card:#1a1e35;--line:#2c3152;--muted:#9aa0c3;--ink:#e8e9f3;background:#0f1222}.student.teen .panel,.student.teen .unit{box-shadow:none;border:1px solid var(--line)}.student.teen input{color:#fff;background:#0f1222}.student-bar{background:var(--card);box-shadow:0 2px 0 var(--line);z-index:5;align-items:center;gap:20px;padding:12px 24px;display:flex;position:sticky;top:0}.student-bar .bar-right,.staff-bar .bar-right{align-items:center;gap:12px;margin-left:auto;display:flex}.me{font-weight:800}.student-main{max-width:1100px;margin:0 auto;padding:24px}.xpbar{flex:0 260px;align-items:center;gap:8px;display:flex}.lvl{background:var(--alt);color:#fff;border-radius:10px;padding:3px 9px;font-size:14px;font-weight:900}.xp-track{background:var(--line);border-radius:99px;flex:1;height:12px;overflow:hidden}.xp-fill{background:linear-gradient(90deg, #ffd166, var(--alt));border-radius:99px;height:100%;transition:width .6s}.welcome{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);flex-wrap:wrap;align-items:center;gap:20px;margin-bottom:20px;padding:22px;display:flex}.welcome-actions{flex-wrap:wrap;gap:10px;margin-left:auto;display:flex}.big-avatar{cursor:pointer;background:#f4f1ff;border:0;border-radius:50%;width:100px;height:100px;font-size:64px}.big-avatar:hover{transform:rotate(-8deg)scale(1.05)}.stat-chips{flex-wrap:wrap;gap:8px;display:flex}.chip{background:var(--bg);border-radius:99px;padding:5px 12px;font-size:14px;font-weight:800}.student.teen .chip{background:#262b4a}.avatar-picker{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);flex-wrap:wrap;gap:8px;margin-bottom:20px;padding:14px;display:flex}.avatar-picker button{cursor:pointer;background:0 0;border:0;border-radius:12px;padding:4px;font-size:40px}.avatar-picker button:hover{background:var(--bg)}.path{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-bottom:20px;display:grid}.unit{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border-top:8px solid var(--unit);padding:20px}.unit-emoji{font-size:28px}.stops{flex-direction:column;gap:12px;display:flex;position:relative}.stop{color:inherit;align-items:center;gap:12px;font-weight:800;text-decoration:none;display:flex}.stop-dot{background:var(--unit);color:#fff;border-radius:50%;flex-shrink:0;place-items:center;width:58px;height:58px;font-family:JetBrains Mono,monospace;font-size:15px;font-weight:900;transition:transform .15s;display:grid;box-shadow:0 5px #0000002e}.stop:hover .stop-dot{transform:scale(1.1)}.stop.locked{opacity:.45;cursor:not-allowed}.stop.locked .stop-dot{background:#b9b6cc}.stop.done .stop-dot{background:var(--unit);outline:4px solid #ffd166}.stop.next .stop-dot{animation:1.4s infinite pulse}.stop-label{flex-direction:column;display:flex}@keyframes pulse{0%,to{box-shadow:0 0 #ff8a3d99,0 5px #0000002e}50%{box-shadow:0 0 0 14px #ff8a3d00,0 5px #0000002e}}.stars .on{color:#ffc531;text-shadow:0 2px #e0a100}.stars .off{color:#d9d6e8}.badges{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;display:grid}.badge{text-align:center;background:var(--bg);filter:grayscale();opacity:.5;border-radius:16px;flex-direction:column;gap:2px;padding:14px 8px;font-weight:800;display:flex}.badge small{color:var(--muted);font-size:12px;font-weight:600}.badge.earned{filter:none;opacity:1;color:#1f1b3a;background:linear-gradient(135deg,#fff4d6,#ffe6f0)}.student.teen .badge{background:#262b4a}.student.teen .badge.earned{color:#fff;background:linear-gradient(135deg,#3a3170,#5b2a5a)}.badge-emoji{font-size:36px}.practice{flex-direction:column;gap:16px;display:flex}.practice-head{align-items:center;gap:16px;display:flex}.practice-head h1{text-align:center;flex:1;margin:0}.live-stats{gap:12px;font-weight:900;display:flex}.timer{font-family:JetBrains Mono,monospace;font-size:42px}.timer.hurry{color:var(--danger);animation:.5s infinite alternate pulse-text}@keyframes pulse-text{to{transform:scale(1.08)}}.tip{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);align-items:center;gap:12px;padding:10px 16px;display:flex}.tip p{margin:0;font-weight:700}.finger-hint b{color:#1f1b3a;border-radius:6px;padding:1px 6px}.fh-lp{background:var(--f-lp)}.fh-lr{background:var(--f-lr)}.fh-lm{background:var(--f-lm)}.fh-li{background:var(--f-li)}.fh-ri{background:var(--f-ri)}.fh-rm{background:var(--f-rm)}.fh-rr{background:var(--f-rr)}.fh-rp{background:var(--f-rp)}.fh-th{background:var(--f-th)}.progress{background:var(--line);border-radius:99px;height:10px;overflow:hidden}.progress div{background:linear-gradient(90deg, var(--ok), #7be0a8);height:100%;transition:width .15s}.start-hint{text-align:center;color:var(--muted);margin:0;font-weight:800;animation:1.5s infinite blink}@keyframes blink{50%{opacity:.4}}.typing-text{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);scroll-behavior:smooth;max-height:230px;padding:24px 28px;font-family:JetBrains Mono,monospace;font-size:28px;line-height:1.8;position:relative;overflow:hidden}.typing-text.big{font-size:38px}.typing-text .word{white-space:nowrap}.ch{color:#9b98b5;border-radius:4px;transition:background .1s}.ch.done{color:var(--ok)}.ch.done.miss{color:var(--alt-dark)}.ch.cur{color:#1f1b3a;box-shadow:0 3px 0 var(--brand);background:#ffe066}.ch.cur.wrong{background:#ffc2cc}.ch.cur.sp{background:#ffe066}.student.teen .ch{color:#5f6590}.student.teen .ch.done{color:#7be0a8}.student.teen .ch.cur{background:var(--brand);color:#fff;box-shadow:none}.student.teen .ch.cur.wrong{background:var(--danger)}.shake-0{animation:.25s shake-a}.shake-1{animation:.25s shake-b}@keyframes shake-a{25%{transform:translate(-6px)}75%{transform:translate(6px)}}@keyframes shake-b{25%{transform:translate(-6px)}75%{transform:translate(6px)}}.keyboard{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);-webkit-user-select:none;user-select:none;flex-direction:column;gap:6px;padding:14px;display:flex}.kb-row{gap:6px;display:flex}.kb-key{color:#1f1b3a;opacity:.55;border-radius:10px;flex:1 1 0;place-items:center;min-width:0;height:46px;font-family:JetBrains Mono,monospace;font-size:15px;font-weight:800;transition:transform .1s,opacity .1s;display:grid;box-shadow:0 3px #00000026}.kb-key.f-lp{background:var(--f-lp)}.kb-key.f-lr{background:var(--f-lr)}.kb-key.f-lm{background:var(--f-lm)}.kb-key.f-li{background:var(--f-li)}.kb-key.f-ri{background:var(--f-ri)}.kb-key.f-rm{background:var(--f-rm)}.kb-key.f-rr{background:var(--f-rr)}.kb-key.f-rp{background:var(--f-rp)}.kb-key.f-th{background:var(--f-th)}.kb-key.new{opacity:.9;outline:2px dashed var(--brand)}.kb-key.bump{text-underline-offset:4px;text-decoration:underline}.kb-key.active{opacity:1;outline:3px solid var(--brand);z-index:1;transform:translateY(-4px)scale(1.08);box-shadow:0 6px 14px #6c5ce773}.result-overlay{z-index:20;background:#1410328c;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.result-card{color:#1f1b3a;text-align:center;z-index:2;background:#fff;border-radius:28px;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:480px;padding:32px;animation:.35s cubic-bezier(.2,1.6,.5,1) pop;display:flex;position:relative}.result-card .muted{color:#6b6889}@keyframes pop{0%{opacity:0;transform:scale(.6)}}.result-stats{gap:14px;margin:8px 0;display:flex}.result-stats div{background:#f4f1ff;border-radius:16px;flex-direction:column;min-width:100px;padding:12px 16px;display:flex}.result-stats b{color:var(--brand);font-size:32px;font-weight:900}.result-stats span{color:#6b6889;font-size:13px;font-weight:700}.result-actions{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px;display:flex}.level-up,.new-badge{background:#fff4d6;border-radius:12px;margin:0;padding:8px 14px;font-weight:800}.confetti{pointer-events:none;z-index:1;position:fixed;inset:0;overflow:hidden}.confetti i{border-radius:3px;width:10px;height:16px;animation:linear forwards fall;position:absolute;top:-20px}@keyframes fall{to{top:110vh;transform:rotate(720deg)translate(60px)}}.test-pick{padding:40px}.duration-grid{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.staff{min-height:100vh}.staff-bar{box-shadow:0 2px 0 var(--line);background:#fff;flex-wrap:wrap;align-items:center;gap:24px;padding:14px 24px;display:flex}.staff-bar nav{gap:4px;display:flex}.staff-bar nav a{color:var(--muted);border-radius:10px;padding:8px 14px;font-weight:800;text-decoration:none}.staff-bar nav a.active{background:var(--bg);color:var(--brand)}.staff-main{max-width:1150px;margin:0 auto;padding:28px 24px}.banner{flex-wrap:wrap;align-items:center;gap:12px;padding:12px 24px;font-weight:700;display:flex}.banner.info{color:#1d4ea8;background:#e7f0ff}.banner.warn{color:#8a5a00;background:#fff4d6}.banner.danger{color:#a3112e;background:#ffe3e8}.class-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-bottom:24px;display:grid}.class-card{border-radius:var(--radius);box-shadow:var(--shadow);color:inherit;border-top:6px solid var(--brand);background:#fff;padding:20px;text-decoration:none;transition:transform .15s}.class-card:hover{transform:translateY(-3px)}.class-card p{margin:4px 0}.join b,.join-box strong{letter-spacing:2px;color:var(--alt-dark);font-family:JetBrains Mono,monospace}.inline-form{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.inline-form h3{width:100%;margin:0}.inline-form input{flex:2 240px}.inline-form select{flex:160px;width:auto}.inline-form .error{width:100%}.class-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:18px;display:flex}.join-box{border-radius:var(--radius);box-shadow:var(--shadow);background:#fff;flex-direction:column;align-items:center;padding:14px 20px;display:flex}.join-box strong{font-size:34px}.tabs{flex-wrap:wrap;gap:6px;margin-bottom:16px;display:flex}.tabs button{font:inherit;cursor:pointer;color:var(--muted);background:#fff;border:0;border-radius:12px;padding:10px 16px;font-weight:800}.tabs button.on{background:var(--brand);color:#fff}.two-col{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;display:grid}.two-col .panel{flex-direction:column;gap:10px;display:flex}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%}th{text-align:left;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);border-bottom:2px solid var(--line);padding:8px;font-size:13px}td{border-bottom:1px solid var(--line);padding:10px 8px}tr.clickable{cursor:pointer}tr.clickable:hover td{background:#faf9ff}td.actions{text-align:right;white-space:nowrap}.mini-bar{background:var(--line);border-radius:99px;width:60px;height:8px;margin-right:6px;display:inline-block;overflow:hidden}.mini-bar div{background:var(--ok);height:100%}.tiles{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin-bottom:20px;display:grid}.tile{border-radius:var(--radius);box-shadow:var(--shadow);background:#fff;flex-direction:column;padding:18px;display:flex}.tile b{color:var(--brand);font-size:28px;font-weight:900}.tile span{color:var(--muted);font-size:14px;font-weight:700}.modal-bg{z-index:30;background:#14103280;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal{background:#fff;border-radius:24px;width:100%;max-width:760px;max-height:90vh;padding:28px;position:relative;overflow:auto}.modal-x{background:var(--bg);cursor:pointer;border:0;border-radius:50%;width:36px;height:36px;font-size:16px;position:absolute;top:14px;right:14px}.spark{background:var(--bg);border-radius:12px;align-items:flex-end;gap:4px;height:120px;margin-bottom:16px;padding:10px;display:flex}.spark div{background:linear-gradient(180deg, var(--brand), #a99cff);border-radius:4px 4px 0 0;flex:1;min-height:3px}.print-cards{display:none}@media print{body *{visibility:hidden}.print-cards,.print-cards *{visibility:visible}.print-cards{grid-template-columns:1fr 1fr;gap:12px;display:grid;position:absolute;top:0;left:0;right:0}.login-card{break-inside:avoid;border:2px dashed #999;border-radius:12px;padding:14px;font-size:14px;line-height:1.7}.lc-brand{color:var(--brand);font-weight:900}.lc-name{font-size:20px;font-weight:900}}@media (width<=760px){.hero{grid-template-columns:1fr}.hero-art{display:none}.student-bar,.staff-bar{flex-wrap:wrap;gap:10px;padding:10px 16px}.student-main,.staff-main{padding:16px}.typing-text{padding:16px;font-size:22px}.typing-text.big{font-size:26px}.kb-key{height:34px;font-size:11px}.practice-head{flex-wrap:wrap}.welcome-actions{margin-left:0}}.platform-bar{box-shadow:none;background:#1f1b3a}.platform-bar .brand,.platform-bar .brand small{color:#fff}.platform-bar nav a{color:#b9b4dd}.platform-bar nav a.active{color:#fff;background:#3a3470}.platform-bar .muted,.platform-bar .btn.ghost{color:#b9b4dd}.platform-auth{background:linear-gradient(135deg,#1f1b3a,#4b3cc4)}.staff-main.wide{max-width:1400px}.tile.clickable{cursor:pointer;font:inherit;text-align:left;border:2px solid #0000}.tile.clickable:hover{border-color:var(--line)}.tile.on{border-color:var(--brand)}button.tile{font:inherit;text-align:left;border:2px solid #0000}.filter-row{flex-wrap:wrap;gap:10px;margin-bottom:12px;display:flex}.filter-row input{flex:3 260px}.filter-row select{flex:160px;width:auto}.tag{vertical-align:middle;text-transform:capitalize;border-radius:99px;padding:3px 9px;font-size:12px;font-weight:800;display:inline-block}.t-active{color:#11744a;background:#d7f5e6}.t-trialing{color:#1d4ea8;background:#e7f0ff}.t-trial_expired,.t-canceled{color:#5c5878;background:#eceaf3}.t-past_due{color:#8a5a00;background:#fff1d1}.t-comped{color:#6a2bc4;background:#f1e6ff}.t-suspended{color:#a3112e;background:#ffe3e8}.banner.impersonate{color:#fff;background:#1f1b3a}.form.narrow{max-width:460px}.pay-panel{border-left:6px solid var(--alt);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.pay-panel h3{margin-bottom:4px}.pay-panel p{margin:0}.inline-form label{flex-direction:column;flex:150px;gap:4px;font-weight:800;display:flex}.banner .btn.small{box-shadow:none}.radio-row{flex-direction:column;gap:6px;margin:10px 0;font-size:14px;font-weight:700;display:flex}.radio-row input,.check-row input{width:auto;margin-right:6px}.check-row{align-items:center;margin:10px 0 4px;font-weight:700;display:flex}.price-line{margin:0;font-weight:700}.inline-form .muted.small{align-self:center}.google-btn{color:#1f1f1f;background:#fff;border:2px solid #dadce0;border-radius:14px;justify-content:center;align-items:center;gap:10px;padding:12px 20px;font-size:17px;font-weight:800;text-decoration:none;transition:background .1s,border-color .1s;display:inline-flex}.google-btn:hover{background:#f7f8fa;border-color:#c6c9ce}.or{color:var(--muted);align-items:center;gap:10px;width:100%;max-width:320px;margin:4px auto;font-weight:800;display:flex}.or:before,.or:after{content:"";background:var(--line);flex:1;height:2px}.auth-card .google-btn{width:100%}.g-badge{margin-left:6px;font-size:16px}.google-panel select{width:auto;padding:6px 10px}