@import"https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Plus+Jakarta+Sans:wght@400;600&display=swap";:root{color-scheme:dark;--bg: #0d0a1c;--surface: rgba(28, 22, 52, .85);--surface-solid: #1c1634;--border: rgba(255, 255, 255, .1);--ink: #f3f0ff;--ink-2: #b9b2d8;--ink-3: #837ca6;--violet: #8b5cf6;--magenta: #ec4899;--gold: #fbbf24;--radius: 20px;--display: "Baloo 2", system-ui, sans-serif;--body: "Plus Jakarta Sans", system-ui, sans-serif}*{box-sizing:border-box}body{margin:0;font-family:var(--body);color:var(--ink);background:radial-gradient(900px 500px at 15% -10%,rgba(139,92,246,.22),transparent 60%),radial-gradient(800px 520px at 110% 20%,rgba(236,72,153,.14),transparent 60%),radial-gradient(600px 480px at 50% 115%,rgba(251,191,36,.08),transparent 60%),var(--bg);min-height:100vh;line-height:1.55}.stage{position:relative;max-width:880px;margin:0 auto;padding:40px 20px 24px;min-height:100vh;display:flex;flex-direction:column}.stars{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.star{position:absolute;color:var(--gold);opacity:0;animation:twinkle 4s ease-in-out infinite;font-size:14px}.star-1{top:8%;left:6%;animation-delay:0s}.star-2{top:15%;left:88%;animation-delay:.6s;font-size:10px}.star-3{top:30%;left:12%;animation-delay:1.2s;font-size:18px;color:var(--violet)}.star-4{top:45%;left:93%;animation-delay:1.8s}.star-5{top:62%;left:4%;animation-delay:2.4s;font-size:11px}.star-6{top:75%;left:90%;animation-delay:3s;color:var(--magenta)}.star-7{top:88%;left:14%;animation-delay:3.4s;font-size:16px}.star-8{top:5%;left:45%;animation-delay:2s;font-size:10px}.star-9{top:55%;left:50%;animation-delay:1s;font-size:9px;color:var(--violet)}.star-10{top:92%;left:60%;animation-delay:.3s}.star-11{top:22%;left:70%;animation-delay:2.8s;font-size:12px}.star-12{top:70%;left:30%;animation-delay:1.5s;font-size:10px;color:var(--magenta)}@keyframes twinkle{0%,to{opacity:0;transform:scale(.6)}50%{opacity:.85;transform:scale(1)}}.hero{position:relative;z-index:1;text-align:center;margin-bottom:26px}.hero-hat{display:inline-block;font-size:44px;transform:rotate(-12deg);filter:drop-shadow(0 6px 16px rgba(139,92,246,.5))}.hero h1{margin:6px 0 4px;font-family:var(--display);font-size:clamp(2.2rem,6vw,3.4rem);font-weight:800;letter-spacing:.01em;background:linear-gradient(92deg,var(--gold),var(--magenta) 55%,var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}.tagline{margin:0;color:var(--ink-2);font-size:.98rem}.step-dots{position:relative;z-index:1;display:flex;justify-content:center;gap:clamp(10px,4vw,30px);margin:0 0 24px;padding:0;list-style:none}.step-dots li{display:grid;justify-items:center;gap:5px;color:var(--ink-3);font-size:.72rem}.step-dots .dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--surface-solid);border:1px solid var(--border)}.step-dots li.active{color:var(--ink)}.step-dots li.active .dot{background:linear-gradient(135deg,var(--violet),var(--magenta));border:none;box-shadow:0 0 18px #8b5cf68c}.step-dots li.done{color:var(--ink-2)}.step-dots li.done .dot{background:rgba(139,92,246,.25);border-color:var(--violet);color:var(--violet)}.board{position:relative;z-index:1;flex:1}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:30px clamp(18px,4vw,38px) 28px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 24px 60px #0006;animation:card-in .35s ease both}@keyframes card-in{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.card h2{margin:0 0 8px;font-family:var(--display);font-size:clamp(1.3rem,3.6vw,1.7rem);font-weight:700}.card p{margin:0 0 14px}.muted{color:var(--ink-2);font-size:.92rem}.hl{color:var(--gold)}.round-tag{display:inline-block;margin:0 0 10px;padding:3px 12px;border-radius:999px;background:rgba(139,92,246,.18);border:1px solid rgba(139,92,246,.4);color:#c4b5fd;font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}.intro{text-align:center}.intro p{max-width:52ch;margin-inline:auto}.btn{font-family:var(--display);font-weight:700;font-size:.95rem;border:none;border-radius:999px;padding:11px 24px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{color:#fff;background:linear-gradient(135deg,var(--violet),var(--magenta));box-shadow:0 10px 28px #8b5cf666}.btn-primary:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 14px 34px #ec489973}.btn-big{font-size:1.1rem;padding:14px 32px}.btn-ghost{background:transparent;color:var(--ink-2);border:1px solid var(--border)}.btn-ghost:hover{color:var(--ink);border-color:var(--violet)}.btn:focus-visible,.num:focus-visible,.letter-grid button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:18px}.actions.center{justify-content:center}.length-picker{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 6px}.num{width:52px;height:52px;border-radius:14px;border:1px solid var(--border);background:var(--surface-solid);color:var(--ink);font:700 1.15rem var(--display);cursor:pointer;transition:all .15s ease}.num:hover{border-color:var(--violet);transform:translateY(-2px)}.num.selected{background:linear-gradient(135deg,var(--violet),var(--magenta));border:none;box-shadow:0 0 20px #8b5cf68c}.letter-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}.chip{min-width:38px;height:38px;padding:0 8px;border-radius:10px;display:grid;place-items:center;font:700 .85rem var(--display);color:var(--ink-3);background:var(--surface-solid);border:1px dashed var(--border)}.chip-done{color:#c4f7d4;background:rgba(34,197,94,.16);border:1px solid rgba(34,197,94,.45)}.chip-current{color:var(--ink);border:1px solid var(--gold);box-shadow:0 0 14px #fbbf2459;animation:chip-pulse 1.2s ease-in-out infinite}@keyframes chip-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.grid-wrap{overflow-x:auto;margin:14px 0 4px}.letter-grid{border-collapse:separate;border-spacing:4px;width:100%;min-width:380px}.letter-grid th button{width:100%;padding:8px 0;border:none;border-radius:10px;background:rgba(139,92,246,.25);color:#d8ccff;font:700 .95rem var(--display);cursor:pointer;transition:background .12s ease,box-shadow .12s ease}.letter-grid th button:disabled{cursor:default;opacity:.5}.letter-grid th.col-hover button{background:linear-gradient(135deg,var(--violet),var(--magenta));color:#fff;box-shadow:0 0 16px #8b5cf680}.letter-grid td{padding:9px 0;text-align:center;border-radius:10px;background:rgba(255,255,255,.045);border:1px solid transparent;font:600 1rem var(--body);color:var(--ink);cursor:pointer;transition:background .12s ease,border-color .12s ease;-webkit-user-select:none;user-select:none}.letter-grid td.blank{cursor:default;background:transparent}.letter-grid td.col-hover{background:rgba(139,92,246,.22);border-color:#8b5cf680}.reveal{text-align:center;position:relative;overflow:hidden}.ball{font-size:64px;line-height:1;margin-bottom:10px;display:inline-block;filter:drop-shadow(0 8px 24px rgba(139,92,246,.6))}.ball.float{animation:float 3s ease-in-out infinite}.ball.thinking{animation:shake .5s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes shake{0%,to{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}.pulse-text{animation:text-pulse 1.4s ease-in-out infinite}@keyframes text-pulse{0%,to{opacity:1}50%{opacity:.45}}.result{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:18px 0 10px}.result-letter{display:grid;place-items:center;width:clamp(42px,9vw,62px);height:clamp(52px,11vw,74px);border-radius:12px;background:linear-gradient(160deg,rgba(139,92,246,.35),rgba(236,72,153,.25));border:1px solid rgba(139,92,246,.55);font:800 clamp(1.6rem,5vw,2.3rem) var(--display);color:var(--gold);text-shadow:0 2px 14px rgba(251,191,36,.45);opacity:0;transform:rotateX(90deg);animation:flip-in .5s cubic-bezier(.2,.8,.3,1.2) forwards}@keyframes flip-in{to{opacity:1;transform:rotateX(0)}}.confetti{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.confetti .c{position:absolute;top:-12px;width:8px;height:14px;border-radius:2px;opacity:.9;animation:fall 2.8s linear infinite}.c:nth-child(3n){background:var(--gold)}.c:nth-child(3n+1){background:var(--violet)}.c:nth-child(3n+2){background:var(--magenta)}.c-1{left:4%;animation-delay:0s}.c-2{left:10%;animation-delay:.4s}.c-3{left:16%;animation-delay:.9s}.c-4{left:22%;animation-delay:.2s}.c-5{left:28%;animation-delay:1.3s}.c-6{left:34%;animation-delay:.6s}.c-7{left:40%;animation-delay:1.7s}.c-8{left:46%;animation-delay:.1s}.c-9{left:52%;animation-delay:1.1s}.c-10{left:58%;animation-delay:.5s}.c-11{left:64%;animation-delay:1.9s}.c-12{left:70%;animation-delay:.3s}.c-13{left:76%;animation-delay:1.5s}.c-14{left:82%;animation-delay:.8s}.c-15{left:88%;animation-delay:2.1s}.c-16{left:94%;animation-delay:.7s}.c-17{left:7%;animation-delay:2.4s}.c-18{left:91%;animation-delay:1.2s}@keyframes fall{0%{transform:translateY(-10px) rotate(0);opacity:1}to{transform:translateY(420px) rotate(540deg);opacity:0}}.footer{position:relative;z-index:1;text-align:center;margin-top:34px;padding-top:18px;border-top:1px solid var(--border);color:var(--ink-3);font-size:.82rem}.footer a{color:var(--ink-2);text-decoration:none}.footer a:hover{color:var(--gold)}.footer-social{display:flex;justify-content:center;gap:16px;list-style:none;margin:8px 0 0;padding:0}@media (max-width: 520px){.stage{padding-top:26px}.dot-label{display:none}.step-dots{gap:8px}.letter-grid{min-width:320px}}@media (prefers-reduced-motion: reduce){.star,.ball.float,.ball.thinking,.pulse-text,.chip-current,.confetti .c{animation:none}.result-letter{animation-duration:.01s}.card{animation:none}}