@keyframes pageFade{0%{opacity:0}to{opacity:1}}@keyframes driftCloud{0%{transform:translate(0)}to{transform:translate(140px)}}@keyframes sway{0%,to{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}@keyframes flap{0%,to{transform:rotate(0)}50%{transform:rotate(-35deg)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes particleUp{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-30px) scale(.3)}}@keyframes growBar{to{width:var(--w)}}@keyframes fall{to{transform:translateY(110vh) rotate(400deg);opacity:.2}}@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}@keyframes twinkle{0%,to{opacity:.15;transform:scale(.9)}50%{opacity:.95;transform:scale(1.15)}}@keyframes fireflyFloat{0%,to{transform:translate(0);opacity:.35}25%{transform:translate(12px,-16px);opacity:1}50%{transform:translate(-9px,-26px);opacity:.55}75%{transform:translate(10px,-12px);opacity:1}}@keyframes grassSway{0%,to{transform:skew(-.6deg)}50%{transform:skew(.6deg)}}@keyframes sunGlow{0%,to{filter:brightness(1)}50%{filter:brightness(1.08)}}@keyframes moteFloat{0%{transform:translate(0);opacity:0}15%{opacity:var(--mote-opacity, .55)}85%{opacity:var(--mote-opacity, .55)}to{transform:translate(var(--mote-drift, 14px),-160px);opacity:0}}@keyframes petalSway{0%,to{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}@keyframes rainFall{0%{transform:translateY(0);opacity:.9}to{transform:translateY(720px);opacity:.4}}@keyframes snowFall{0%{transform:translate(0) rotate(0);opacity:.9}to{transform:translate(20px,640px) rotate(80deg);opacity:.5}}:root{--blue: #2563EB;--blue-dark: #1D4ED8;--blue-soft: #DBEAFE;--green: #22C55E;--green-soft: #DCFCE7;--amber: #F59E0B;--red: #EF4444;--ink: #0F1B2D;--ink-soft: #5B6B82;--card: #FFFFFF;--sky-top: #BFE3FF;--sky-bottom: #EAF6FF;--radius-lg: 24px;--radius-md: 16px;--radius-sm: 10px;--shadow-soft: 0 8px 24px rgba(15, 27, 45, .08);--shadow-card: 0 16px 40px rgba(15, 27, 45, .1)}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:Inter,sans-serif;color:var(--ink);background:#fff8f0;-webkit-font-smoothing:antialiased;overflow-x:hidden;animation:pageFade .6s ease}h1,h2,h3,.display{font-family:Nunito,sans-serif}a{text-decoration:none;color:inherit}button{font-family:inherit;cursor:pointer;border:none}.header{position:sticky;top:0;z-index:50;height:72px;background:#ffffffeb;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow-soft);display:flex;align-items:center;justify-content:space-between;padding:0 32px}.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}.brand-logo{width:42px;height:42px;flex-shrink:0;border-radius:50%}.brand-name{font-family:Nunito,sans-serif;font-weight:800;font-size:22px;color:var(--blue);letter-spacing:-.02em}.main-nav{display:flex;align-items:center;gap:4px}.nav-link{display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;font-weight:700;font-size:14px;color:var(--ink-soft);transition:background .2s,color .2s}.nav-link:hover{background:#f1f5f9;color:var(--ink)}.nav-link.active{background:var(--blue-soft);color:var(--blue-dark)}.nav-icon{width:20px;height:20px;flex-shrink:0}.nav-dropdown{position:relative}.nav-link-btn{background:none;border:none;cursor:pointer}.chevron-sm{width:6px;height:6px;margin-left:1px;border-right-width:2px;border-bottom-width:2px}.mode-dropdown{position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%);display:flex;gap:12px;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:16px;z-index:30;animation:pageFade .15s ease}.mode-card{position:relative;width:126px;padding:18px 10px 14px;border-radius:var(--radius-md);border:1px solid transparent;display:flex;flex-direction:column;align-items:center;gap:6px;font-family:Nunito,sans-serif;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}.mode-card:hover:not(.locked){transform:translateY(-3px);box-shadow:var(--shadow-soft)}.mode-card.locked{cursor:not-allowed;opacity:.7}.mode-icon{font-size:24px;line-height:1}.mode-title{font-weight:800;font-size:12px;letter-spacing:.03em;text-align:center}.mode-sub{font-size:11px;font-weight:700;opacity:.95;text-align:center}.mode-lock{position:absolute;top:10px;right:10px;font-size:12px;opacity:.85}.mode-classic{background:var(--blue-soft)}.mode-classic:hover:not(.locked){border-color:var(--blue)}.mode-classic .mode-title{color:var(--blue-dark)}.mode-classic .mode-sub{color:#1d4ed8}.mode-timed{background:var(--green-soft)}.mode-timed:hover:not(.locked){border-color:var(--green)}.mode-timed .mode-title,.mode-timed .mode-sub{color:#15803d}.mode-sprint{background:#fef3e2}.mode-sprint:hover:not(.locked){border-color:var(--amber)}.mode-sprint .mode-title,.mode-sprint .mode-sub{color:#b45309}.mode-sudden-death{background:#fee2e2}.mode-sudden-death:hover:not(.locked){border-color:var(--red)}.mode-sudden-death .mode-title,.mode-sudden-death .mode-sub{color:#b91c1c}.mode-create-class{background:var(--blue-soft)}.mode-create-class:hover:not(.locked){border-color:var(--blue)}.mode-create-class .mode-title{color:var(--blue-dark)}.mode-create-class .mode-sub{color:#1d4ed8}.mode-join-class{background:#fef3e2}.mode-join-class:hover:not(.locked){border-color:var(--amber)}.mode-join-class .mode-title,.mode-join-class .mode-sub{color:#b45309}.mode-my-class{background:var(--green-soft)}.mode-my-class:hover:not(.locked){border-color:var(--green)}.mode-my-class .mode-title,.mode-my-class .mode-sub{color:#15803d}.mode-student-dashboard{background:#ede9fe}.mode-student-dashboard:hover:not(.locked){border-color:#8b5cf6}.mode-student-dashboard .mode-title,.mode-student-dashboard .mode-sub{color:#6d28d9}@media (max-width: 900px){.mode-dropdown{position:fixed;top:80px;left:50%;right:auto;transform:translate(-50%);flex-wrap:wrap;justify-content:center;width:min(300px,calc(100vw - 24px))}.mode-card{width:118px}}.profile-menu{position:relative;flex-shrink:0}.nav-signin-btn{background:var(--blue);color:#fff;font-weight:700;font-size:14px;padding:9px 18px;border-radius:999px;box-shadow:0 6px 16px #2563eb4d;transition:transform .15s,box-shadow .15s}.nav-signin-btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px #2563eb61}.profile{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:999px;background:none;transition:background .2s}.profile:hover{background:#f1f5f9}.profile-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--blue),#60A5FA);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px}.profile-name{font-weight:600;font-size:14px;color:var(--ink)}.chevron{width:10px;height:10px;border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);transform:rotate(45deg);margin-top:-4px;transition:transform .2s}.chevron.up{transform:rotate(-135deg);margin-top:4px}.settings-dropdown{position:absolute;top:calc(100% + 10px);right:0;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:10px;min-width:190px;display:flex;flex-direction:column;gap:2px;z-index:20;animation:pageFade .15s ease}.settings-heading{font-size:11px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;padding:4px 10px 6px}.settings-option{text-align:left;padding:8px 10px;border-radius:10px;font-size:13px;font-weight:600;color:var(--ink);background:none}.settings-option:hover{background:#f1f5f9}.settings-option.active{background:var(--blue-soft);color:var(--blue-dark)}@media (max-width: 900px){.nav-label{display:none}.nav-link{padding:9px 10px}}@media (max-width: 600px){.header{padding:0 16px}.brand-name{display:none}.main-nav{gap:0}.profile-name{display:none}}.app-sky{position:fixed;top:72px;left:0;right:0;bottom:0;z-index:-1;overflow:hidden;pointer-events:none;--cloud: #FFF8F2;background:linear-gradient(180deg,#fde3c2,#fad4a5 38%,#f8c89a 62%,#fbf1e4 84%,#fff8f0);transition:background 4s ease}.app-sky.afternoon{--cloud: #FFFFFF;background:linear-gradient(180deg,#9dd3ff,#e7f5ff 60%,#fff8f0)}.app-sky.evening{--cloud: #FFF1E0;background:linear-gradient(180deg,#f9a96b,#fbc08a 45%,#fde2c4 75%,#fff8f0)}.app-sky.night{--cloud: #AFC1E8;background:linear-gradient(180deg,#0f1b3d,#1e2c58 45%,#8fa0c9 82%,#fff8f0)}.app-sky.night .cloud{opacity:.16}.sun{position:absolute;top:130px;right:11%;width:78px;height:78px;border-radius:50%;background:radial-gradient(circle,#ffe9b8,#ffd27a 45%,#ffc857 65%,#ffc85700);box-shadow:0 0 70px 26px #ffd27a8c;transition:right 4s ease,top 4s ease,background 4s ease,box-shadow 4s ease,opacity 4s ease;animation:sunGlow 7s ease-in-out infinite}.app-sky.afternoon .sun{top:32px;right:8%;background:radial-gradient(circle,#fff9de,#ffeda0 55%,#ffeda000);box-shadow:0 0 60px 20px #fff0aa80}.app-sky.evening .sun{top:180px;right:14%;background:radial-gradient(circle,#ffd9b0,#fca65b 60%,#fca65b00);box-shadow:0 0 70px 24px #fca65b73}.app-sky.night .sun{opacity:0}.moon{position:absolute;top:52px;right:10%;width:62px;height:62px;border-radius:50%;background:radial-gradient(circle at 38% 35%,#fffdf6,#f3eedd 55%,#ded6be);box-shadow:0 0 18px 4px #fffdf5a6,0 0 46px 16px #f6f1e366,0 0 90px 34px #d6dcf042,0 0 160px 70px #b4c3e624;opacity:0;transition:opacity 4s ease;pointer-events:none}.app-sky.night .moon{opacity:1}.star{position:absolute;border-radius:50%;background:#fff;opacity:.2;animation:twinkle 3s ease-in-out infinite;pointer-events:none}.firefly{position:absolute;width:5px;height:5px;border-radius:50%;background:#ffe9a8;box-shadow:0 0 10px 4px #ffdc828c;animation:fireflyFloat 6s ease-in-out infinite;pointer-events:none;z-index:2}.cloud{position:absolute;background:var(--cloud);border-radius:100px;opacity:.95;filter:drop-shadow(0 6px 10px rgba(15,27,45,.06));transition:background 4s ease}.cloud:before,.cloud:after{content:"";position:absolute;background:var(--cloud);border-radius:100px;transition:background 4s ease}.c1{width:120px;height:36px;top:70px;left:6%;animation:driftCloud 60s linear infinite}.c1:before{width:60px;height:60px;top:-30px;left:14px}.c1:after{width:44px;height:44px;top:-20px;left:60px}.c2{width:90px;height:28px;top:130px;left:60%;animation:driftCloud 80s linear infinite;animation-delay:-20s}.c2:before{width:46px;height:46px;top:-24px;left:10px}.c2:after{width:34px;height:34px;top:-16px;left:44px}.c3{width:150px;height:40px;top:40px;left:35%;animation:driftCloud 100s linear infinite;animation-delay:-45s}.c3:before{width:70px;height:70px;top:-36px;left:20px}.c3:after{width:50px;height:50px;top:-22px;left:80px}.hills{position:absolute;bottom:0;left:0;width:100%;height:220px;transition:filter 4s ease}.hill-back{position:absolute;bottom:0;width:100%;height:180px;background:#bfe8a6;border-radius:50% 50% 0 0/100px 100px 0 0;transform:scaleX(1.3)}.hill-front{position:absolute;bottom:0;width:100%;height:130px;background:#a9d68a;border-radius:50% 50% 0 0/80px 80px 0 0;transform:scaleX(1.5) translate(-2%)}.grass{position:absolute;bottom:0;width:100%;height:26px;background:linear-gradient(180deg,#8fd483,#7bc96f);transform-origin:bottom center;animation:grassSway 9s ease-in-out infinite}.tree{position:absolute;bottom:120px;width:14px;height:60px;transform-origin:bottom center;animation:sway 5s ease-in-out infinite;transition:filter 4s ease}.tree .trunk{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:8px;height:26px;background:#8a5a3b;border-radius:3px}.tree .leaves{position:absolute;bottom:20px;left:50%;transform:translate(-50%);width:44px;height:44px;background:#5fae72;border-radius:50%;box-shadow:-12px 6px 0 -4px #6bbb7e,12px 6px 0 -4px #4e9c62}.t1{left:8%;bottom:150px;animation-delay:0s}.t2{left:16%;bottom:130px;animation-delay:-1.2s;transform:scale(.8)}.t3{left:82%;bottom:145px;animation-delay:-2.4s}.t4{left:90%;bottom:125px;animation-delay:-.6s;transform:scale(.75)}.app-sky.night .hills,.app-sky.night .tree,.app-sky.night .flower{filter:brightness(.55) saturate(.8)}.flower{position:absolute;bottom:6px;width:6px;height:6px;border-radius:50%;background:#ffd27a;z-index:2;animation:petalSway 6s ease-in-out infinite;transform-origin:bottom center}.flower.pink{box-shadow:-6px 0 0 -1.5px #f5a0b5,6px 0 0 -1.5px #f5a0b5,0 -6px 0 -1.5px #f5a0b5,0 6px 0 -1.5px #f5a0b5}.flower.white{box-shadow:-6px 0 0 -1.5px #fff8f2,6px 0 0 -1.5px #fff8f2,0 -6px 0 -1.5px #fff8f2,0 6px 0 -1.5px #fff8f2}.flower.lavender{box-shadow:-6px 0 0 -1.5px #d8c9f0,6px 0 0 -1.5px #d8c9f0,0 -6px 0 -1.5px #d8c9f0,0 6px 0 -1.5px #d8c9f0}.flower.small{transform:scale(.75)}.mote{position:absolute;border-radius:50%;background:radial-gradient(circle,#ffe2a8e6,#ffe2a800 70%);pointer-events:none;z-index:3;animation:moteFloat linear infinite}.app-sky.afternoon .mote{background:radial-gradient(circle,#ffffffe6,#fff0 70%)}.app-sky.evening .mote{background:radial-gradient(circle,#ffc896e6,#ffc89600 70%)}.app-sky.night .mote{background:radial-gradient(circle,#d2dcffcc,#d2dcff00 70%)}.app-sky.weather-cloudy{filter:saturate(.75) brightness(.95)}.app-sky.weather-cloudy .sun,.app-sky.weather-cloudy .moon{opacity:.35}.app-sky.weather-cloudy .cloud{opacity:1;filter:drop-shadow(0 6px 10px rgba(15,27,45,.12)) brightness(.9)}.app-sky.weather-rain{filter:saturate(.6) brightness(.82)}.app-sky.weather-rain .sun,.app-sky.weather-rain .moon{opacity:.15}.app-sky.weather-rain .cloud{opacity:1;filter:drop-shadow(0 6px 10px rgba(15,27,45,.16)) brightness(.75)}.app-sky.weather-rain .flower{opacity:.5}.raindrop{position:absolute;top:-40px;width:2px;height:60px;background:linear-gradient(180deg,#bed2eb00,#bed2eb8c);animation:rainFall linear infinite;pointer-events:none;z-index:4}.app-sky.weather-snow{filter:saturate(.8) brightness(1.02)}.app-sky.weather-snow .sun,.app-sky.weather-snow .moon{opacity:.5}.app-sky.weather-snow .hills,.app-sky.weather-snow .tree{filter:brightness(1.1) saturate(.7)}.snowflake{position:absolute;top:-12px;border-radius:50%;background:#fff;opacity:.85;animation:snowFall linear infinite;pointer-events:none;z-index:4}.hero-inner{position:relative;z-index:5;max-width:1180px;margin:0 auto;padding:40px 32px}.hero-title{text-align:center;font-weight:900;font-size:34px;color:var(--ink);margin:0 0 6px;letter-spacing:-.02em;transition:color 4s ease}.hero-sub{text-align:center;color:var(--ink-soft);font-size:15px;margin:0 0 32px;font-weight:500;transition:color 4s ease}.hero-inner.night .hero-title{color:#fdf9f0}.hero-inner.night .hero-sub{color:#c7d2e8}@media (max-width: 600px){.hero-inner{padding:32px 16px 24px}.hero-title{font-size:24px}}.typing-card{background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);max-width:900px;margin:0 auto;padding:40px 44px}.game-mode-banner{text-align:center;margin-top:-18px;margin-bottom:10px;font-size:12px;font-weight:800;color:var(--blue-dark);text-transform:uppercase;letter-spacing:.08em}.class-lock-badge{display:inline-flex;align-items:center;gap:4px;margin-left:10px;background:var(--blue-soft);color:var(--blue-dark);font-size:11px;font-weight:800;text-transform:none;letter-spacing:0;padding:3px 10px;border-radius:999px}.typing-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}.typing-label{font-size:12px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.08em}.reset-btn{background:#f1f5f9;color:var(--ink-soft);font-size:12px;font-weight:600;padding:6px 14px;border-radius:999px;transition:background .2s,color .2s}.reset-btn:hover{background:var(--blue-soft);color:var(--blue)}.mode-switch{display:flex;align-items:center;gap:2px;background:#f1f5f9;padding:3px;border-radius:999px}.mode-btn{font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;color:var(--ink-soft);transition:background .2s,color .2s}.mode-btn:hover{color:var(--ink)}.mode-btn.active{background:#fff;color:var(--blue-dark);box-shadow:0 2px 6px #0f1b2d14}.typing-text{font-family:JetBrains Mono,ui-monospace,Menlo,Consolas,monospace;font-size:22px;line-height:2;font-weight:500;background:#f8fafc;border:2px solid #E2E8F0;border-radius:var(--radius-md);padding:24px 28px;outline:none;cursor:text;-webkit-user-select:none;user-select:none;font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0;transition:border-color .2s,box-shadow .2s;max-height:8em;overflow-y:hidden;scroll-behavior:smooth}.typing-text:focus-visible,.typing-text:focus{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-soft),var(--shadow-soft)}.typing-text.code-mode{font-size:19px;letter-spacing:0}.typing-text .word-group{display:inline-block}.typing-text .word{display:inline-block;position:relative}.typing-text .letter{color:#a9b7ca;transition:all 40ms;position:relative}.typing-text .letter.space{display:inline-block;width:.6em;border-radius:4px}.letter.correct{color:var(--ink);background:none}.letter.incorrect{color:#b91c1c;background:#fee2e2;border-radius:4px}.typing-text .letter.space.incorrect{background:#fee2e2;box-shadow:none;line-height:1}.letter.current{color:var(--ink)!important;background:var(--blue-soft);box-shadow:0 -6px 0 2px var(--blue-soft),0 6px 0 2px var(--blue-soft),0 0 0 1px var(--blue);border-radius:4px;animation:blink .6s infinite}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:.55}}.typing-input-hint{margin-top:20px;font-size:13px;color:var(--ink-soft);text-align:center}.typing-input-hint b{color:var(--blue)}.typing-input-hint b.time-low{color:var(--red)}@media (max-width: 900px){.typing-card{padding:28px 24px}.typing-text{font-size:17px;padding:16px 18px}.mode-btn{padding:6px 9px;font-size:11px}}.mode-btn:disabled{opacity:.35;cursor:not-allowed}.mode-btn:disabled:hover{color:var(--ink-soft)}.lang-switch{border:1px solid #E2E8F0}@font-face{font-family:AnmolLipi;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/AnmolLipi-BFZoDBWr.ttf) format("truetype")}.typing-text.pa-mode,.typing-text.pa-mode .letter{font-family:AnmolLipi,GurbaniAkhar,Raavi,monospace;letter-spacing:.02em}.typing-text.pa-mode{font-size:24px}.typing-text.pa-mode .letter{color:#64748b}.typing-text.pa-mode .letter.correct{color:var(--ink)}.daily-btn{background:#fff7e6;color:#b45309}.daily-btn.active{background:#f59e0b;color:#fff;box-shadow:0 2px 6px #f59e0b59}.sound-btn{font-size:15px;padding:4px 8px;border-radius:999px;background:#f1f5f9;line-height:1;transition:background .2s}.sound-btn:hover{background:var(--blue-soft)}.wpm-graph{margin-top:18px;background:#f8fafc;border:1px solid #E2E8F0;border-radius:12px;padding:14px 16px 8px}.wpm-graph-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}.wpm-graph-title{font-size:11px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em}.wpm-graph-stats{font-size:13px;color:var(--ink-soft)}.wpm-graph-stats b{color:var(--blue)}.wpm-graph svg{width:100%;height:90px;display:block}.results-panel{margin-top:18px;animation:results-in .35s ease}.results-panel.results-died .results-headline{color:var(--red)}@keyframes results-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.results-headline{display:flex;align-items:center;justify-content:center;gap:8px;font-size:18px;font-weight:800;color:var(--ink);flex-wrap:wrap}.results-medal{font-size:24px}.pb-tag{font-size:11px;font-weight:700;background:#fef3c7;color:#b45309;padding:4px 10px;border-radius:999px}.results-invalid-note{margin:10px auto 0;max-width:440px;text-align:center;font-size:13px;color:#b45309;background:#fffbeb;border:1px solid #FDE68A;border-radius:8px;padding:8px 14px}.results-stats{display:flex;justify-content:center;gap:28px;margin:14px 0 4px}.results-stat{text-align:center}.results-stat .val{font-size:26px;font-weight:800;color:var(--blue)}.results-stat .lab{font-size:11px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}.results-stat.dim .val{color:var(--ink-soft)}.results-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:16px}.results-btn{font-size:14px;font-weight:700;padding:10px 22px;border-radius:999px;background:#f1f5f9;color:var(--ink);transition:background .2s,transform .1s}.results-btn:hover{background:#e2e8f0}.results-btn:active{transform:scale(.97)}.results-btn.primary{background:var(--blue);color:#fff}.results-btn.primary:hover{background:var(--blue-dark)}.ghost-bar{display:flex;align-items:center;gap:12px;background:#f5f3ff;border:1px solid #DDD6FE;border-radius:12px;padding:8px 14px;margin-bottom:12px;font-size:13px;font-weight:600;color:#6d28d9;animation:results-in .35s ease}.ghost-bar.ghost-done{opacity:.6}.ghost-label{white-space:nowrap;font-weight:800}.ghost-progress-wrap{flex:1;height:8px;border-radius:999px;background:#ede9fe;overflow:hidden}.ghost-progress-bar{height:100%;border-radius:999px;background:linear-gradient(90deg,#a78bfa,#8b5cf6);transition:width .15s linear}.ghost-wpm{white-space:nowrap;min-width:64px;text-align:right;font-variant-numeric:tabular-nums}.ghost-delta{white-space:nowrap;min-width:86px;text-align:center;font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px;transition:background .3s,color .3s}.ghost-delta.ahead{background:#dcfce7;color:#15803d}.ghost-delta.behind{background:#fee2e2;color:#b91c1c}.ghost-delta.tied{background:#f1f5f9;color:var(--ink-soft)}.typing-text .letter.ghost-pos{box-shadow:inset 0 -3px #8b5cf6;background:#8b5cf61f;border-radius:4px}.typing-text .letter.current.ghost-pos{box-shadow:0 -6px 0 2px var(--blue-soft),0 6px 0 2px var(--blue-soft),0 0 0 1px var(--blue),inset 0 -3px #8b5cf6}.typing-text .letter.ghost-pos:after{content:"👻";position:absolute;top:-1.35em;left:50%;transform:translate(-50%);font-size:.7em;line-height:1;pointer-events:none;opacity:.9}.ghost-result{margin-top:14px;padding:10px 16px;border-radius:12px;text-align:center;font-size:14px;font-weight:600;border:1px solid transparent}.ghost-result b,.ghost-result .diff{font-weight:800}.ghost-result.won{background:#dcfce7;border-color:#86efac;color:#166534}.ghost-result.tied{background:#fef3c7;border-color:#fde68a;color:#92400e}.ghost-result.lost{background:#fee2e2;border-color:#fecaca;color:#991b1b}.ghost-result.saved{background:#f5f3ff;border-color:#ddd6fe;color:#5b21b6}.results-btn.ghost{background:#8b5cf6;color:#fff}.results-btn.ghost:hover{background:#7c3aed}.wpm-graph-ghost-key{color:#7c3aed;font-weight:700;margin-right:10px;font-size:12px}.practice-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:24px}.practice-tab{display:flex;align-items:center;gap:6px;background:var(--card);color:var(--ink-soft);font-size:13px;font-weight:700;padding:10px 16px;border-radius:999px;box-shadow:var(--shadow-soft);transition:background .2s,color .2s,transform .1s}.practice-tab:hover{color:var(--ink);transform:translateY(-1px)}.practice-tab.active{background:var(--blue);color:#fff}.practice-tab-icon{font-size:15px;line-height:1}.practice-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start;max-width:1180px;margin:0 auto}.practice-main{min-width:0}.practice-sidebar{display:flex;flex-direction:column;gap:16px}.practice-card{max-width:none;padding-top:22px}.practice-live-stats{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--ink-soft);font-weight:600}.practice-live-stats b{color:var(--blue);font-size:15px}.practice-progress-wrap{height:8px;border-radius:999px;background:#eef2f7;overflow:hidden;margin-bottom:18px}.practice-progress-bar{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--blue-dark));transition:width .15s linear}.practice-clear-btn{margin-top:14px}.practice-textarea{width:100%;font-family:JetBrains Mono,ui-monospace,Menlo,Consolas,monospace;font-size:15px;line-height:1.6;padding:16px 18px;border:2px solid #E2E8F0;border-radius:var(--radius-md);resize:vertical;outline:none;transition:border-color .2s,box-shadow .2s;margin:14px 0 8px}.practice-textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-soft)}.practice-char-count{display:inline-block;font-size:12px;font-weight:700;color:var(--ink-soft);background:#f1f5f9;padding:4px 10px;border-radius:999px}.practice-options-card{background:var(--card);border-radius:var(--radius-md);box-shadow:var(--shadow-soft);padding:20px 22px}.practice-options-card h3{font-size:13px;font-weight:800;color:var(--ink);text-transform:uppercase;letter-spacing:.06em;margin:0 0 14px}.practice-options-hint{font-size:13px;color:var(--ink-soft);line-height:1.5;margin:0}.option-group-label{display:block;font-size:11px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}.option-group-buttons{display:flex;flex-wrap:wrap;gap:6px}.option-btn{background:#f1f5f9;color:var(--ink-soft);font-size:13px;font-weight:700;padding:7px 14px;border-radius:999px;transition:background .2s,color .2s}.option-btn:hover{color:var(--ink)}.option-btn.active{background:var(--blue);color:#fff}.lessons-list{display:flex;flex-direction:column;gap:4px}.lesson-item{display:flex;align-items:flex-start;gap:10px;text-align:left;background:transparent;padding:10px;border-radius:var(--radius-sm);transition:background .2s}.lesson-item:hover{background:#f1f5f9}.lesson-item.active{background:var(--blue-soft)}.lesson-check{flex-shrink:0;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;color:#cbd5e1;border:2px solid #E2E8F0;margin-top:1px}.lesson-check.done{background:var(--green);color:#fff;border-color:var(--green)}.lesson-copy{display:flex;flex-direction:column;gap:2px}.lesson-title{font-size:13px;font-weight:700;color:var(--ink)}.lesson-desc{font-size:12px;color:var(--ink-soft)}.practice-tip{background:var(--blue-soft);color:var(--blue-dark);font-size:13px;font-weight:600;line-height:1.5;padding:14px 16px;border-radius:var(--radius-md)}@media (max-width: 900px){.practice-layout{grid-template-columns:1fr}.practice-sidebar{order:-1}}.vk{margin:10px auto 2px;max-width:620px;-webkit-user-select:none;user-select:none}.vk-row{display:flex;justify-content:center;gap:3px;margin-bottom:3px}.vk-key{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 4px;border-radius:6px;font-size:12px;font-weight:700;color:var(--ink-soft, #556);background:#f2f5fa;box-shadow:inset 0 -2px #00000014;text-transform:uppercase;position:relative;transition:transform .08s,background .12s,color .12s}.vk-key.vk-wide{min-width:52px;font-size:10px}.vk-key.vk-space{min-width:180px;font-size:10px}.vk-key.home-bump:after{content:"";position:absolute;bottom:5px;left:50%;transform:translate(-50%);width:10px;height:2px;border-radius:2px;background:currentColor;opacity:.5}.vk-key[data-finger=lp],.vk-legend-dot[data-finger=lp]{background:#fde8ec}.vk-key[data-finger=lr],.vk-legend-dot[data-finger=lr]{background:#fdf3dc}.vk-key[data-finger=lm],.vk-legend-dot[data-finger=lm]{background:#e6f6e9}.vk-key[data-finger=li],.vk-legend-dot[data-finger=li]{background:#e3f0fd}.vk-key[data-finger=ri],.vk-legend-dot[data-finger=ri]{background:#e9e9fc}.vk-key[data-finger=rm],.vk-legend-dot[data-finger=rm]{background:#e6f6e9}.vk-key[data-finger=rr],.vk-legend-dot[data-finger=rr]{background:#fdf3dc}.vk-key[data-finger=rp],.vk-legend-dot[data-finger=rp]{background:#fde8ec}.vk-key[data-finger=th],.vk-legend-dot[data-finger=th]{background:#f0f0f0}.vk-key.next{background:var(--blue, #2f7de1);color:#fff;transform:translateY(-2px);box-shadow:0 3px 8px #2f7de173;animation:vk-pulse .9s ease-in-out infinite}@keyframes vk-pulse{0%,to{box-shadow:0 3px 8px #2f7de173}50%{box-shadow:0 3px 14px #2f7de1bf}}.vk-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px;font-size:11px;color:var(--ink-soft, #667)}.vk-legend-item{display:inline-flex;align-items:center;gap:4px}.vk-legend-dot{width:10px;height:10px;border-radius:3px;display:inline-block;box-shadow:inset 0 0 0 1px #0000000f}@media (max-width: 640px){.vk{display:none}}.keyboard-toggle{margin-right:8px}.keyboard-toggle.on{color:var(--blue, #2f7de1)}.lesson-banner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin:2px 0 10px;padding:8px 12px;border-radius:10px;background:#f4f8fe;font-size:13px;color:var(--ink-soft, #556)}.lesson-banner b{color:var(--ink, #223)}.lesson-stars{color:#f5b301;letter-spacing:1px;font-size:12px}.lesson-stars.big{font-size:26px;letter-spacing:3px}.star-off{color:#d8dee7}.lesson-meta{display:flex;align-items:center;gap:8px;margin-top:2px}.lesson-best{font-size:11px;color:var(--ink-soft, #778)}.lesson-result{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:10px}.lesson-result-note{font-size:12px;color:var(--ink-soft, #667)}.weak-keys{margin:12px auto;max-width:420px;text-align:center}.weak-keys-label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft, #667);margin-bottom:8px}.weak-keys-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.weak-key-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:8px;background:#fdecef;color:#c0334a;font-size:13px}.weak-key-chip b{text-transform:uppercase}.weak-key-count{font-size:11px;opacity:.75}.weak-keys-btn{margin-top:10px}.vk{max-width:860px}.vk-flex{display:flex;align-items:center;justify-content:center;gap:12px}.vk-board{flex:0 1 auto;min-width:0}.vk-hand-col{flex:0 0 auto;display:flex;align-items:flex-end;padding-bottom:6px}.vk-hand{width:104px;height:auto}.vk-hand-col:first-child .vk-hand{transform:rotate(10deg)}.vk-hand-col:last-child .vk-hand{transform:rotate(-10deg)}.vk-caption-row{display:flex;justify-content:center;margin-top:6px;min-height:18px}@media (max-width: 920px){.vk-hand-col{display:none}}.vk-palm{fill:#f2f5fa;stroke:#dde4ee;stroke-width:1.5}.vk-finger{stroke:#dde4ee;stroke-width:1.5;transition:fill .12s}.vk-finger[data-finger=lp],.vk-finger[data-finger=rp]{fill:#fde8ec}.vk-finger[data-finger=lr],.vk-finger[data-finger=rr]{fill:#fdf3dc}.vk-finger[data-finger=lm],.vk-finger[data-finger=rm]{fill:#e6f6e9}.vk-finger[data-finger=li],.vk-finger[data-finger=ri]{fill:#e3f0fd}.vk-finger[data-finger=th]{fill:#f0f0f0}.vk-finger.active{fill:var(--blue, #2f7de1);stroke:var(--blue, #2f7de1);animation:vk-finger-pulse .9s ease-in-out infinite}@keyframes vk-finger-pulse{0%,to{opacity:1}50%{opacity:.65}}.vk-finger-caption{min-width:150px;text-align:center;font-size:13px;font-weight:700;color:var(--blue, #2f7de1)}.practice-card{position:relative}.practice-pin-btn{position:absolute;top:10px;right:12px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#f2f5fa;font-size:14px;line-height:1;box-shadow:var(--shadow-soft);transition:transform .15s,background .15s,filter .15s;z-index:2;filter:grayscale(1) opacity(.55)}.practice-pin-btn:hover{filter:grayscale(.4) opacity(.85);transform:scale(1.08)}.practice-pin-btn.pinned{background:#fbf0f2;box-shadow:0 0 0 1.5px #e5484d4d inset,var(--shadow-soft);filter:saturate(.7);transform:rotate(-35deg)}.practice-pin-btn.pinned:hover{transform:rotate(-35deg) scale(1.08)}.race-row{max-width:1180px;margin:28px auto 0;display:grid;grid-template-columns:1fr 300px;gap:24px;position:relative;z-index:5;padding:0 32px}.race-card{background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:28px 32px}.race-title{font-weight:800;font-size:16px;margin:0 0 20px;color:var(--ink)}.lane-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}.lane-row:last-child{margin-bottom:0}.lane-label{width:64px;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}.lane-name{font-weight:700;font-size:13px;color:var(--ink);line-height:1}.lane-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:999px;line-height:1.4}.lane-tag.you{background:var(--blue-soft);color:var(--blue-dark)}.lane-tag.ai{background:#f1f5f9;color:var(--ink-soft)}.lane{position:relative;height:64px;flex:1;border-radius:12px;background:#3a3f47;overflow:hidden}.lane:before{content:"";position:absolute;top:50%;left:0;width:100%;height:0;border-top:3px dashed rgba(255,255,255,.35);transform:translateY(-50%)}.finish{position:absolute;right:10px;top:6px;bottom:6px;width:8px;background:repeating-linear-gradient(45deg,#fff 0,#fff 6px,#1a1a1a 6px,#1a1a1a 12px);border-radius:3px}.bird{position:absolute;top:8px;width:48px;height:48px;transition:left .4s cubic-bezier(.3,.6,.3,1);filter:drop-shadow(0 4px 4px rgba(0,0,0,.25));animation:bounce .6s ease-in-out infinite}.bird svg{width:100%;height:100%;display:block}.wing{transform-origin:60% 50%;animation:flap .35s ease-in-out infinite}.trail{position:absolute;top:26px;height:4px;border-radius:4px;background:linear-gradient(90deg,#2563eb00,#2563eb80);left:0;transition:width .4s ease}.particle{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--green);animation:particleUp .7s ease-out forwards;pointer-events:none}@media (max-width: 900px){.race-row{grid-template-columns:1fr}}@media (max-width: 480px){.lane-label{width:46px}.lane-name{font-size:11px}.lane-tag{font-size:9px;padding:1px 6px}}.lane-ghost .bird{opacity:.75;filter:drop-shadow(0 0 6px rgba(139,92,246,.5))}.lane-ghost .trail{background:linear-gradient(90deg,#8b5cf600,#8b5cf680)}.lane-tag.pb{background:#ede9fe;color:#6d28d9}.gauge-card{background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:26px;display:flex;flex-direction:column;align-items:center}.gauge-wrap{position:relative;width:220px;height:130px}.gauge-needle{position:absolute;left:50%;bottom:0;width:4px;height:82px;background:var(--ink);border-radius:4px;transform-origin:bottom center;transform:translate(-50%) rotate(-90deg);transition:transform .5s cubic-bezier(.3,.7,.3,1)}.gauge-needle:after{content:"";position:absolute;bottom:-6px;left:50%;transform:translate(-50%);width:14px;height:14px;border-radius:50%;background:var(--ink)}.gauge-stats{text-align:center;margin-top:6px}.wpm-big{font-family:Nunito,sans-serif;font-weight:900;font-size:40px;color:var(--ink);line-height:1}.wpm-label{font-size:12px;color:var(--ink-soft);font-weight:600;letter-spacing:.05em;text-transform:uppercase}.stat-row{display:flex;gap:18px;margin-top:16px;width:100%;justify-content:center}.stat-chip{background:#f8fafc;border-radius:12px;padding:10px 16px;text-align:center;flex:1}.stat-chip .val{font-weight:800;font-size:18px;color:var(--ink)}.stat-chip .lab{font-size:11px;color:var(--ink-soft);font-weight:600}.stat-chip.acc .val{color:var(--green)}.stat-chip.combo .val{color:var(--amber)}.dashboard-wrap{max-width:1180px;margin:36px auto 60px;padding:0 32px;position:relative;z-index:5}.dashboard-card{background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:32px}.dash-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.dash-head-actions{display:flex;align-items:center;gap:12px}.dash-title{font-weight:800;font-size:20px;margin:0}.create-btn{background:var(--blue);color:#fff;font-weight:700;font-size:14px;padding:11px 20px;border-radius:12px;display:flex;align-items:center;gap:6px;box-shadow:0 6px 16px #2563eb4d;transition:transform .15s,box-shadow .15s}.create-btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px #2563eb61}table{width:100%;border-collapse:collapse}.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}thead th{text-align:left;font-size:12px;color:var(--ink-soft);font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:0 14px 12px;white-space:nowrap}tbody tr{border-radius:14px;transition:background .2s}tbody tr:hover{background:#f8fafc}tbody td{padding:14px;font-size:14px;font-weight:600;color:var(--ink);vertical-align:middle;white-space:nowrap}.avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;flex-shrink:0}.progress-track{width:120px;height:8px;border-radius:999px;background:#edf1f6;overflow:hidden}.progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--green));animation:growBar 1.2s ease forwards;width:0}@media (max-width: 600px){.dashboard-wrap{padding:0 12px}.dashboard-card{padding:16px}.dash-head{flex-wrap:wrap;gap:12px}.dash-head-actions{flex-wrap:wrap;width:100%}.students-table thead th:nth-child(3),.students-table tbody td:nth-child(3),.students-table thead th:nth-child(6),.students-table tbody td:nth-child(6){display:none}thead th,tbody td{padding:10px}.progress-track{width:70px}}.page-top{padding-top:36px}.lb-tabs{display:flex;gap:6px;background:#edf1f6;border-radius:12px;padding:4px}.lb-tab{background:transparent;color:var(--ink-soft);font-weight:700;font-size:13px;padding:8px 16px;border-radius:9px;transition:background .15s,color .15s}.lb-tab.active{background:#fff;color:var(--blue);box-shadow:0 2px 6px #0f1b2d14}.lb-status{color:var(--ink-soft);font-size:14px;padding:24px 4px;text-align:center}.lb-error{color:var(--red)}.lb-rank{font-weight:800;font-size:16px;width:48px}.lb-player{display:flex;align-items:center;gap:12px}.lb-wpm{font-weight:800;color:var(--blue)}.lb-meta{color:var(--ink-soft);font-weight:600;text-transform:capitalize}.lb-you-badge{display:inline-block;margin-left:8px;background:var(--blue-soft);color:var(--blue-dark);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:999px}tr.lb-row-me{background:#f0f7ff}tr.lb-row-me:hover{background:#e4f0ff}.lb-my-rank-body{border-top:2px dashed #D7E1EC}tr.lb-divider td{padding:10px 4px 4px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);border:none}@media (max-width: 600px){.dash-head{flex-wrap:wrap;gap:12px}thead th:nth-child(5),tbody td:nth-child(5){display:none}}.cls-page-layout{display:flex;gap:24px;min-height:360px}.cls-page-sidebar{display:flex;flex-direction:column;gap:6px;flex-shrink:0;width:190px;border-right:1px solid rgba(15,27,45,.08);padding-right:16px}.cls-side-tab{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--radius-sm);background:transparent;color:var(--ink-soft);font-weight:700;font-size:14px;text-align:left;transition:background .15s,color .15s}.cls-side-tab:hover{background:#2563eb0f;color:var(--ink)}.cls-side-tab.active{background:var(--blue-soft);color:var(--blue-dark)}.cls-side-tab-icon{font-size:18px}.cls-page-content{flex:1;min-width:0}.cls-panel{max-width:420px}.cls-panel-wide{max-width:640px}.cls-create-layout.cls-panel-wide{max-width:820px}.cls-panel-title{font-size:20px;margin:0 0 6px}.cls-panel-sub{color:var(--ink-soft);font-size:14px;margin:0 0 16px}.cls-create-layout{display:grid;grid-template-columns:1fr 260px;gap:28px;align-items:start}.cls-create-fields{min-width:0}.cls-create-summary{position:sticky;top:12px}.cls-summary-box{border:2px dashed #C7D2E8;border-radius:var(--radius-md);padding:20px 18px;background:#fafbff}.cls-summary-heading{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}.cls-summary-name{font-size:17px;font-weight:800;color:var(--ink);margin-bottom:14px;word-break:break-word}.cls-summary-list{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:8px}.cls-summary-list li{display:flex;align-items:center;justify-content:space-between;font-size:13px}.cls-summary-label{color:var(--ink-soft);font-weight:600}.cls-summary-value{font-weight:700;color:var(--ink)}.cls-summary-btn{width:100%}@media (max-width: 760px){.cls-create-layout{grid-template-columns:1fr}.cls-create-summary{position:static}}.cls-pill-row{display:flex;flex-wrap:wrap;gap:8px}.cls-pill{background:#f1f5f9;color:var(--ink-soft);font-weight:700;font-size:13px;padding:8px 14px;white-space:nowrap;border-radius:999px;border:1.5px solid transparent;transition:all .15s}.cls-pill:hover:not(:disabled){background:var(--blue-soft);color:var(--blue-dark)}.cls-pill.active{background:var(--blue-soft);color:var(--blue-dark);border-color:var(--blue)}.cls-pill:disabled{opacity:.4;cursor:not-allowed}.cls-mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}.cls-mode-grid .mode-card{width:auto;border-width:1px}.cls-mode-grid .mode-card.selected{border:1.5px solid var(--blue);box-shadow:var(--shadow-soft)}.cls-field-row{display:grid;grid-template-columns:auto 1fr;gap:28px;margin-bottom:14px}.cls-field-row .cls-field{margin-bottom:0;align-items:center}.cls-field-row .cls-field span:first-child{text-align:center}.cls-field-row .cls-pill-row{flex-wrap:nowrap;justify-content:center}@media (max-width: 560px){.cls-field-row{grid-template-columns:1fr;gap:14px}.cls-field-row .cls-pill-row{flex-wrap:wrap;justify-content:flex-start}.cls-field-row .cls-field span:first-child{text-align:left}}.cls-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;font-size:13px;font-weight:700;color:var(--ink-soft)}.cls-field input,.cls-field select{font-family:inherit;font-size:15px;font-weight:500;color:var(--ink);padding:10px 12px;border-radius:var(--radius-sm);border:1px solid rgba(15,27,45,.12);background:#fff}.cls-field input:focus,.cls-field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px #2563eb26}.cls-code-input{letter-spacing:.3em;text-transform:uppercase;font-weight:700}.cls-code-display{font-size:32px;font-weight:800;letter-spacing:.25em;color:var(--blue-dark);background:var(--blue-soft);border-radius:var(--radius-sm);padding:16px;text-align:center;margin-bottom:16px}.btn-primary{background:var(--blue-soft);color:var(--blue-dark);font-weight:700;font-size:14px;padding:11px 20px;border-radius:12px;box-shadow:0 4px 10px #2563eb1f;transition:transform .15s,box-shadow .15s,background .15s}.btn-primary:hover{background:#cde0ff;transform:translateY(-2px);box-shadow:0 8px 16px #2563eb2e}.btn-primary:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}.btn-ghost{background:transparent;color:var(--blue-dark);font-weight:700;font-size:14px;padding:10px 16px;border-radius:12px;border:1px solid var(--blue-soft)}.btn-ghost:hover{background:var(--blue-soft)}.btn-ghost-sm{padding:6px 12px;font-size:12px}.cls-signin-prompt{max-width:420px;text-align:center;padding:32px 16px}.cls-signin-icon{font-size:32px;margin-bottom:8px}.cls-signin-title{font-size:18px;margin:0 0 6px}.cls-signin-msg{color:var(--ink-soft);font-size:14px;margin:0 0 18px}.cls-signin-actions{display:flex;flex-direction:column;gap:10px;align-items:center}.cls-signin-error{color:var(--red);font-size:13px;margin:-6px 0 12px}.cls-list{display:flex;flex-direction:column;gap:12px}.cls-card{background:#fafbff;border:1px solid rgba(15,27,45,.08);border-radius:var(--radius-sm);padding:14px 16px}.cls-card-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}.cls-card-name{font-weight:700;font-size:15px}.cls-card-code{font-family:monospace;letter-spacing:.15em;background:var(--blue-soft);color:var(--blue-dark);font-weight:700;padding:2px 8px;border-radius:6px;font-size:13px}.cls-card-meta{display:flex;gap:16px;color:var(--ink-soft);font-size:13px;margin-bottom:8px}.cls-roster{margin-top:12px;padding-top:12px;border-top:1px dashed rgba(15,27,45,.12)}.cls-roster-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.cls-roster-head h4{margin:0;font-size:15px}@media (max-width: 720px){.cls-page-layout{flex-direction:column}.cls-page-sidebar{flex-direction:row;width:100%;border-right:none;border-bottom:1px solid rgba(15,27,45,.08);padding-right:0;padding-bottom:12px;overflow-x:auto}.cls-side-tab{flex:1;justify-content:center;white-space:nowrap}}.classes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:24px}.class-card{background:var(--card);border:2px solid rgba(15,27,45,.06);border-radius:var(--radius-md);box-shadow:var(--shadow-soft);padding:16px;text-align:left;transition:transform .15s,box-shadow .15s,border-color .15s;display:flex;align-items:center;gap:14px}.class-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px #0f1b2d1f}.class-card.selected{border-color:var(--blue);box-shadow:0 14px 30px #2563eb29}.class-card-body{min-width:0}.class-badge{width:44px;height:44px;border-radius:12px;color:#fff;display:flex;align-items:center;justify-content:center;font-family:Nunito,sans-serif;font-weight:800;font-size:15px;flex-shrink:0;text-transform:uppercase}.class-badge.lg{width:52px;height:52px;font-size:17px}.class-name{font-size:16px;font-weight:800;margin:0 0 2px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.class-meta{font-size:12.5px;color:var(--ink-soft);margin:0;font-weight:600}.class-meta.no-gap{margin-top:2px}.class-tag{display:inline-block;margin-top:6px;background:#f1f5f9;color:var(--ink-soft);font-size:11px;font-weight:800;text-transform:capitalize;padding:4px 10px;border-radius:999px}.roster-card{border-top:1px solid rgba(15,27,45,.08);padding-top:20px}.class-detail-head{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-bottom:18px}.class-detail-title{font-size:18px;font-weight:800;margin:0}.class-code-chip{margin-left:auto;background:var(--blue-soft);color:var(--blue-dark);font-family:Nunito,sans-serif;font-weight:800;font-size:15px;letter-spacing:.18em;padding:8px 14px;border-radius:10px}.class-detail-actions{display:flex;align-items:center;gap:8px;margin-left:auto}.btn-start-typing{background:linear-gradient(90deg,var(--green),#16A34A);color:#fff;font-weight:800;font-size:14px;letter-spacing:.02em;padding:10px 18px;border-radius:12px;box-shadow:0 6px 16px #22c55e4d;transition:transform .15s,box-shadow .15s}.btn-start-typing:hover{transform:translateY(-2px);box-shadow:0 10px 20px #22c55e59}.btn-del{background:var(--red);color:#fff;font-weight:700;font-size:13px;padding:10px 16px;border-radius:12px;transition:transform .15s,box-shadow .15s}.btn-del:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 16px #ef44444d}.btn-del:disabled{opacity:.6;cursor:default;transform:none}.btn-del-sm{background:var(--red);color:#fff;font-weight:700;font-size:12px;padding:6px 12px;border-radius:8px}.btn-del-sm:disabled{opacity:.6;cursor:default}.roster-stats{margin-bottom:16px;justify-content:flex-start}.cls-roster-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:12px}.cls-roster-hint{font-size:12.5px;color:var(--ink-soft);font-weight:600}.roster-name{font-weight:700}.roster-tag{display:inline-block;margin-left:8px;font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}.roster-tag.guest{background:var(--blue-soft);color:var(--blue-dark)}.roster-tag.roll{background:var(--green-soft);color:#15803d;text-transform:none;letter-spacing:0}.empty-roster{color:var(--ink-soft);font-size:14px;font-weight:500;text-align:center;padding:20px 0 8px}.student-stats{max-width:420px}@media (max-width: 700px){.class-detail-actions{margin-left:0;width:100%}}@media (max-width: 700px){.classes-grid{grid-template-columns:1fr 1fr}.class-code-chip{margin-left:0}.class-detail-head{flex-wrap:wrap}}.cls-page .cls-panel,.cls-page .cls-signin-prompt{margin-left:auto;margin-right:auto}.confetti-piece{position:fixed;top:-10px;width:8px;height:14px;border-radius:2px;opacity:.9;animation:fall linear forwards;z-index:200}.coming-soon{min-height:calc(100vh - 72px);display:flex;align-items:center;justify-content:center;padding:32px;background:linear-gradient(180deg,var(--sky-top),var(--sky-bottom))}.coming-soon-card{background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:48px;max-width:440px;text-align:center}.coming-soon-badge{display:inline-block;background:var(--blue-soft);color:var(--blue-dark);font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:6px 14px;border-radius:999px;margin-bottom:16px}.coming-soon-card h1{font-size:28px;font-weight:800;color:var(--ink);margin:0 0 12px}.coming-soon-card p{font-size:15px;color:var(--ink-soft);margin:0;line-height:1.5}.site-footer{padding:36px 24px 28px;font-size:13px;color:#ffffffd9;background:#1c30268c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-top:1px solid rgba(255,255,255,.15)}.footer-grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:minmax(220px,1.4fr) repeat(3,minmax(140px,1fr));gap:28px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.18)}.footer-brand{min-width:0}.footer-logo{font-size:17px;font-weight:800;color:#fff;letter-spacing:.01em}.footer-tagline{margin:8px 0 0;line-height:1.55;color:#ffffffb3;max-width:280px}.footer-col{display:flex;flex-direction:column;gap:8px}.footer-heading{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#ffffffa6;margin-bottom:2px}.site-footer a{color:#ffffffeb;font-weight:600;text-decoration:none;width:fit-content}.site-footer a:hover{color:#fff;text-decoration:underline}.footer-bottom{max-width:1080px;margin:0 auto;padding-top:18px;display:flex;justify-content:center;font-size:12.5px;font-weight:600;color:#fff9}@media (max-width: 760px){.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1 / -1}}@media (max-width: 440px){.footer-grid{grid-template-columns:1fr}}.legal-page{max-width:720px;line-height:1.65}.legal-page h2{font-size:16px;font-weight:800;color:var(--ink);margin:28px 0 8px}.legal-page p,.legal-page ul{color:var(--ink-soft);font-size:14px}.legal-page ul{padding-left:20px;margin:8px 0}.legal-page li{margin-bottom:6px}.legal-page a{color:var(--blue);font-weight:700;text-decoration:none}.legal-page a:hover{text-decoration:underline}