*{margin:0;padding:0;box-sizing:border-box}:root{--bg-color: #0a0f1a;--text-color: #ffffff;--accent-color: #60a5fa;--accent-light: #93c5fd;--accent-dark: #3b82f6;--secondary-color: #f4d03f;--muted-color: #94a3b8;--glow-color: rgba(96, 165, 250, .4)}body{font-family:Space Mono,monospace;background:url(/assets/background-BBEUNdEu.png) no-repeat center center;background-size:cover;background-attachment:fixed;color:var(--text-color);min-height:100vh}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:2rem 1rem;position:relative;overflow:hidden}.header{text-align:center;margin-bottom:1.5rem;position:relative;z-index:1;max-width:500px;padding:1.5rem;background:#0a0f1eb3;border-radius:1rem;border:1px solid rgba(96,165,250,.15);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.instructions{font-size:.95rem;color:var(--text-color);line-height:1.6}.main{flex:1;display:flex;flex-direction:column;align-items:center;gap:2rem;max-width:600px;width:100%;position:relative;z-index:1}.footer{margin-top:2rem;color:var(--muted-color);font-size:.8rem;position:relative;z-index:1}.progress-count{color:var(--muted-color);font-size:.85rem}.presave-cta{text-align:center;margin-top:1rem;padding:1.5rem;background:#0a0f1eb3;border-radius:1rem;border:1px solid rgba(96,165,250,.15);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.presave-cta p{color:var(--text-color);font-size:.9rem;margin-bottom:.75rem;opacity:.85}.presave-link{display:inline-block;color:var(--secondary-color);font-size:1rem;font-weight:700;text-decoration:none;padding:.5rem 1rem;border-radius:.5rem;transition:all .3s ease}.presave-link:hover{background:#f4d03f26;text-shadow:0 0 15px rgba(244,208,63,.5)}.title-progress{text-align:center;padding:1.5rem 2rem;background:#60a5fa1a;border-radius:1rem;border:1px solid rgba(96,165,250,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.masked-title{font-size:2rem;letter-spacing:.3rem;font-weight:700;text-shadow:0 0 20px var(--glow-color)}.masked-title .letter{display:inline-block;min-width:1.5rem;transition:all .3s ease}.masked-title .letter.highlight{color:var(--accent-color);transform:scale(1.2);text-shadow:0 0 30px var(--accent-color)}.complete-message{margin-top:1rem;color:var(--secondary-color);font-size:1.2rem;animation:celebrate .5s ease-in-out infinite alternate}@keyframes celebrate{0%{opacity:1;transform:scale(1)}to{opacity:.8;transform:scale(1.05);text-shadow:0 0 30px var(--secondary-color)}}.magic-8-ball-wrapper{position:relative;margin:1rem 0}.magic-8-ball-wrapper,.magic-8-ball-wrapper *{transform-style:preserve-3d}.ball{height:220px;width:220px;background:#111;border-radius:50%;display:grid;place-items:center;perspective:500px;position:relative;-webkit-box-reflect:below .5em linear-gradient(transparent 50%,rgba(255,255,255,.15))}.ball-shine{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background-image:radial-gradient(farthest-side at 60% 30%,rgba(255,255,255,.25),transparent,rgba(0,0,0,.7));pointer-events:none;z-index:10}.ball:before{content:"";position:absolute;top:-10px;right:-10px;bottom:-10px;left:-10px;border-radius:50%;background:radial-gradient(circle,rgba(96,165,250,.2) 0%,transparent 70%);z-index:-1;opacity:.5}.roll{width:100%;height:100%;display:grid;place-items:center;animation:idle-roll 6s ease-in-out infinite}@keyframes idle-roll{0%,to{transform:rotateX(15deg) rotateY(0)}50%{transform:rotateX(25deg) rotateY(5deg)}}.ball.shaking .roll{animation:shake-roll 1.2s ease-in-out}@keyframes shake-roll{0%{transform:rotateX(20deg) rotate(0)}10%{transform:rotateX(25deg) rotate(-5deg)}20%{transform:rotateX(15deg) rotate(5deg)}30%{transform:rotateX(25deg) rotate(-4deg)}40%{transform:rotateX(15deg) rotate(4deg)}50%{transform:rotateX(20deg) rotate(-3deg)}60%{transform:rotateX(18deg) rotate(3deg)}70%{transform:rotateX(22deg) rotate(-2deg)}80%{transform:rotateX(18deg) rotate(2deg)}90%{transform:rotateX(20deg) rotate(0)}to{transform:rotateX(20deg) rotate(0)}}.ball.reveal .roll{animation:reveal-roll 1s ease-out forwards}@keyframes reveal-roll{0%{transform:rotateX(20deg)}to{transform:rotateX(200deg)}}.eight-3d{position:absolute;transform:translateZ(100px)}.eight-circle{height:80px;width:80px;background:linear-gradient(145deg,#fff,#e8e8e8,#d0d0d0);border-radius:50%;border:4px solid #222;display:grid;place-items:center;box-shadow:inset 2px 2px 4px #fffc,inset -2px -2px 4px #0000001a;backface-visibility:hidden;-webkit-backface-visibility:hidden}.eight{font:700 52px/1 Georgia,serif;color:#1a1a1a;margin-top:2px;backface-visibility:hidden;-webkit-backface-visibility:hidden}.magic-3d{position:absolute;transform:translateZ(-100px)}.magic-window{transform:rotateX(180deg);height:80px;width:80px;background:radial-gradient(circle,#0a0f1a,#050208);border-radius:50%;border:4px solid #333;box-shadow:-1px -1px #555,inset -2px -2px 4px #444,inset 0 0 20px #60a5fa4d;display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden}.answer{width:55px;height:48px;background:linear-gradient(180deg,var(--accent-dark) 0%,#0a1a30 100%);clip-path:polygon(50% 100%,0 0,100% 0);-webkit-clip-path:polygon(50% 100%,0 0,100% 0);display:flex;align-items:flex-start;justify-content:center;padding-top:8px;filter:blur(3px);transform:scale(.6) rotate(40deg);opacity:.4;transition:all .8s ease;transition-delay:.3s}.answer.visible{filter:blur(0);transform:scale(1) rotate(0);opacity:1}.answer-text{font:700 24px/1 Space Mono,monospace;color:#fff;text-shadow:0 0 10px var(--accent-light),0 0 20px var(--accent-color),0 0 30px var(--secondary-color)}.code-input{width:100%;max-width:320px}.input-wrapper{display:flex;gap:.5rem}.code-input input{flex:1;padding:.85rem 1.2rem;font-family:inherit;font-size:1rem;background:#0a1a35cc;border:2px solid rgba(96,165,250,.3);border-radius:.5rem;color:var(--text-color);text-transform:uppercase;letter-spacing:.15rem;transition:all .3s ease}.code-input input:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 20px #60a5fa4d,inset 0 0 10px #60a5fa1a}.code-input input::placeholder{color:var(--muted-color);letter-spacing:.05rem}.code-input input:disabled{opacity:.5;cursor:not-allowed}.code-input button{padding:.85rem 1.8rem;font-family:inherit;font-size:1rem;background:linear-gradient(135deg,var(--accent-color),var(--accent-dark));border:none;border-radius:.5rem;color:#fff;cursor:pointer;font-weight:700;transition:all .3s ease;box-shadow:0 4px 15px #60a5fa66}.code-input button:hover:not(:disabled){background:linear-gradient(135deg,var(--accent-light),var(--accent-color));transform:translateY(-3px);box-shadow:0 6px 25px #60a5fa80}.code-input button:active:not(:disabled){transform:translateY(-1px)}.code-input button:disabled{opacity:.5;cursor:not-allowed}.error-message{margin-top:.75rem;color:var(--secondary-color);font-size:.85rem;text-align:center;animation:fade-in .3s ease}@keyframes fade-in{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 480px){.header h1{font-size:2rem;letter-spacing:.3rem}.masked-title{font-size:1.4rem;letter-spacing:.2rem}.title-progress{padding:1rem 1.5rem}.ball{width:180px;height:180px}.ball:after{width:180px;height:180px}.eight-3d{transform:translateZ(80px)}.magic-3d{transform:translateZ(-80px)}.eight-circle,.magic-window{width:65px;height:65px}.eight{font-size:42px}.answer{width:45px;height:40px}.answer-text{font-size:22px}.code-input{max-width:280px}.input-wrapper{flex-direction:column}.code-input button{width:100%}}