:root{--ink:#fff;--lilac:#d8f;--magenta:#ff33ef;--violet:#8233ff;--bg:#070512}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0}html,body{background:var(--bg);touch-action:none;overscroll-behavior:none;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-family:Questrial,Montserrat,system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}canvas{touch-action:none;display:block}.overlay{z-index:2;pointer-events:none;flex-direction:column;justify-content:space-between;align-items:center;padding:clamp(20px,4vh,44px) 20px;display:flex;position:fixed;inset:0}.logo-wrap{justify-content:center;width:100%;display:flex}.logo{filter:drop-shadow(0 2px 12px #b45aff80);width:min(92px,26vw);height:auto;animation:1.1s cubic-bezier(.16,1,.3,1) both drop-in}.footer{text-align:center;color:var(--ink);will-change:transform;transition:transform .5s ease-out;animation:1.2s .3s both fade-in}.tagline{text-transform:uppercase;letter-spacing:0;color:#fff;text-shadow:0 2px 26px #b45aff66;will-change:transform;margin:0;font-family:Montserrat,Questrial,system-ui,sans-serif;font-size:clamp(.72rem,1.75vw,1.12rem);font-weight:500;animation:7s ease-in-out infinite float-tag}.sound-btn{color:#ffffffb8;pointer-events:auto;width:38px;height:38px;cursor:inherit;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffff0d;border:1px solid #ffffff2e;border-radius:50%;justify-content:center;align-items:center;transition:color .2s,border-color .2s,background .2s;display:flex;position:absolute;bottom:clamp(16px,3vw,30px);right:clamp(16px,3vw,30px)}.sound-btn:hover{color:#fff;background:#ffffff1a;border-color:#fff6}.svg-defs{width:0;height:0;position:absolute;overflow:hidden}.sparkle-layer{pointer-events:none;z-index:9;position:fixed;inset:0;overflow:hidden}.spark{clip-path:polygon(50% 0%,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0% 50%,39% 39%);filter:drop-shadow(0 0 4px #dd88ffe6);opacity:0;will-change:transform, opacity;background:radial-gradient(circle,#fff 0%,#f1d9ff 55%,#d8f0 100%);animation:.7s ease-out forwards spark-pop;position:absolute;transform:translate(-50%,-50%)}@keyframes spark-pop{0%{opacity:0;transform:translate(-50%,-50%)scale(.2)rotate(0)}35%{opacity:.95;transform:translate(-50%, -50%) scale(1) rotate(var(--rot,0deg))}to{opacity:0;transform:translate(-50%, -130%) scale(.3) rotate(var(--rot,0deg))}}@media (prefers-reduced-motion:reduce){.spark{display:none}}.hint{color:#ffffffb3;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;flex-direction:column;align-items:center;gap:2px;font-size:.72rem;transition:opacity .8s,transform .8s;animation:1.4s 1s both fade-in;display:flex;position:absolute;top:calc(70% + 30px);left:50%;transform:translate(-50%)}.hint .chev{font-size:1.3rem;line-height:1;animation:1.8s ease-in-out infinite bob}.hint.gone{opacity:0;animation:none;transform:translate(-50%)translateY(10px)}.loader{z-index:10;background:radial-gradient(120% 120% at 50% 40%,#160b30 0%,#070512 70%);flex-direction:column;justify-content:center;align-items:center;gap:22px;transition:opacity .7s;display:flex;position:fixed;inset:0}.loader.fade{opacity:0}.loader-logo{filter:drop-shadow(0 4px 30px #b45aff99);width:clamp(220px,40vw,380px);height:auto;animation:2s ease-in-out infinite pulse}.loader-bar{background:#ffffff1f;border-radius:3px;width:min(240px,60vw);height:3px;overflow:hidden}.loader-bar span{background:linear-gradient(90deg, var(--violet), var(--magenta));height:100%;transition:width .3s;display:block}.loader-text{letter-spacing:.24em;text-transform:uppercase;color:#ffffff8c;margin:0;font-size:.72rem}@keyframes drop-in{0%{opacity:0;transform:translateY(-22px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes rise-in{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(5px)}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.88;transform:scale(1.03)}}@keyframes float-tag{0%,to{transform:translate(-4px)rotate(-.8deg)}50%{transform:translate(4px,-14px)rotate(.8deg)}}@media (prefers-reduced-motion:reduce){.logo,.footer,.hint,.loader-logo,.hint .chev,.tagline{animation:none}}@media (width<=600px){.overlay{padding-top:10px}.hint{letter-spacing:.16em}}