@keyframes gradientShift{0%{background-position:0 50%}25%{background-position:100% 50%}50%{background-position:50% 100%}75%{background-position:0 50%}to{background-position:0 50%}}@keyframes haze{0%,to{opacity:.3;transform:scale(1) translate(0) rotate(0deg)}25%{opacity:.5;transform:scale(1.2) translate(10%,-10%) rotate(5deg)}50%{opacity:.4;transform:scale(.9) translate(-10%,10%) rotate(-5deg)}75%{opacity:.5;transform:scale(1.1) translate(5%,-5%) rotate(3deg)}}@keyframes ghostWisp1{0%{transform:translateY(0);opacity:0}10%{opacity:.15}70%{opacity:.15}to{transform:translateY(-120vh);opacity:0}}@keyframes ghostWisp2{0%{transform:translateY(0);opacity:.3}20%{opacity:.25}40%{opacity:.18}60%{opacity:.1}80%{opacity:.05}to{transform:translateY(-120vh);opacity:0}}@keyframes ghostWisp3{0%{transform:translateY(0);opacity:0}10%{opacity:.18}70%{opacity:.18}to{transform:translateY(-120vh);opacity:0}}@keyframes ghostWisp4{0%{transform:translateY(0);opacity:0}10%{opacity:.1}70%{opacity:.1}to{transform:translateY(-120vh);opacity:0}}body{margin:0;padding:0;font-family:system-ui,sans-serif;background:linear-gradient(135deg,#0a0a0a,#1a1520 20%,#0f0f1a 40%,#1a1a2e 60%,#0d0d15 80%,#000);background-size:400% 400%;animation:gradientShift 25s ease-in-out infinite;color:#fff;overflow-x:hidden}body,html{max-width:100vw}html{overflow-x:hidden!important}#__next,#__next>div,body,html{overflow-x:hidden!important;max-width:100vw!important}body:before{top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at 15% 20%,rgba(138,43,226,.15) 0,transparent 50%),radial-gradient(ellipse at 85% 80%,rgba(75,0,130,.12) 0,transparent 50%),radial-gradient(circle at 50% 50%,rgba(72,61,139,.08) 0,transparent 60%)}body:after,body:before{content:"";position:fixed;pointer-events:none;z-index:0}body:after{top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 30% 40%,rgba(147,112,219,.15) 0,transparent 30%),radial-gradient(circle at 70% 60%,rgba(123,104,238,.12) 0,transparent 35%),radial-gradient(circle at 50% 80%,rgba(138,43,226,.1) 0,transparent 40%),radial-gradient(circle at 20% 70%,rgba(75,0,130,.08) 0,transparent 35%),radial-gradient(circle at 80% 30%,rgba(106,90,205,.1) 0,transparent 40%);filter:blur(100px);animation:haze 35s ease-in-out infinite}body>*{position:relative;z-index:1}.ghost-wisp{position:fixed;bottom:-80px;font-size:50px;pointer-events:none;z-index:10;filter:blur(3px)}.ghost-right{right:15%;animation:ghostWisp2 60s linear forwards}.ghost-left{left:15%;animation:ghostWisp2 60s linear 60s forwards}*{box-sizing:border-box;max-width:100%}canvas,img,svg,video{max-width:100%;height:auto}.tooltip-btn{position:relative}.tooltip-btn[data-title]:after{content:attr(data-title);padding:4px 8px;background:#333;color:#fff;font-size:10px;white-space:nowrap;border-radius:4px;margin-bottom:4px}.tooltip-btn[data-title]:after,.tooltip-btn[data-title]:before{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);pointer-events:none;z-index:1000;opacity:0;transition:opacity .2s}.tooltip-btn[data-title]:before{content:"";border:4px solid transparent;border-top-color:#333}.tooltip-btn:hover:after,.tooltip-btn:hover:before{opacity:1}.tooltip-btn-bottom[data-title]:after{content:attr(data-title);padding:4px 8px;background:#333;color:#fff;font-size:10px;white-space:nowrap;border-radius:4px;margin-top:4px}.tooltip-btn-bottom[data-title]:after,.tooltip-btn-bottom[data-title]:before{position:absolute;top:100%;left:50%;transform:translateX(-50%);pointer-events:none;z-index:1000;opacity:0;transition:opacity .2s}.tooltip-btn-bottom[data-title]:before{content:"";border:4px solid transparent;border-bottom-color:#333}.tooltip-btn-bottom:hover:after,.tooltip-btn-bottom:hover:before{opacity:1}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulseBtn{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes floatBtn{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.ghost-icon{animation:floatBtn 3s ease-in-out infinite}@keyframes vanishOnce{0%{opacity:.7}to{opacity:0}}.vanish-text{animation:vanishOnce 30s ease-in-out forwards}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes bounce{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}button{transition:all .2s ease;background:linear-gradient(135deg,#333,#222)}button:hover{transform:translateY(-1px);filter:brightness(1.2)}button:active{transform:translateY(0);filter:brightness(.8)}.emoji-btn{background:linear-gradient(135deg,#444,#333)!important}.emoji-btn:hover{animation:bounce .5s ease}.emoji-btn:active{transform:scale(.9)}.start-btn{padding:16px 48px;background:linear-gradient(135deg,#fff,#f0f0f0 50%,#e0e0e0);color:#000;border:none;border-radius:12px;font-size:clamp(16px,3vw,18px);font-weight:700;cursor:pointer;transition:all .3s ease;animation:pulseBtn 2s ease-in-out infinite;box-shadow:0 4px 12px rgba(255,255,255,.2)}.start-btn:hover{background:linear-gradient(135deg,#fff,#fafafa 50%,#f0f0f0);box-shadow:0 8px 24px rgba(255,255,255,.4);transform:translateY(-2px)}.start-btn:active{filter:brightness(.95);transform:translateY(0)}.how-to-btn{animation:none}.how-to-btn:hover{background:linear-gradient(135deg,#fff,#fafafa 50%,#f0f0f0);box-shadow:0 6px 20px rgba(255,255,255,.3);transform:translateY(-2px)}select{accent-color:#fd0}select:focus{outline:2px solid #fd0;outline-offset:2px}select option{background:#111;color:#fff}select option:checked{background:#fd0;color:#000;font-weight:700}select option:hover{background:#fa0!important;color:#000!important}