@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap";:root{--neon-cyan: #00f3ff;--neon-magenta: #ff00ff;--dark-bg: #050505;--grid-color: rgba(0, 243, 255, .2)}*{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--dark-bg);color:var(--neon-cyan);font-family:Courier New,Courier,monospace;overflow:hidden;height:100vh;width:100vw;display:flex;justify-content:center;align-items:center}.warp-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;overflow:hidden;pointer-events:none}.warp-star{position:absolute;top:50%;left:50%;width:var(--size);height:var(--size);background:var(--neon-cyan);border-radius:50%;box-shadow:0 0 4px var(--neon-cyan);transform:rotate(var(--angle)) translate(var(--start-distance));animation:warp-travel 20s linear infinite}.warp-star:nth-child(2n){background:var(--neon-magenta);box-shadow:0 0 4px var(--neon-magenta)}.warp-star:nth-child(3n){background:gold;box-shadow:0 0 3px gold}@keyframes warp-travel{0%{transform:rotate(var(--angle)) translate(5vw);opacity:0;width:1px;height:1px}10%{opacity:1}to{transform:rotate(var(--angle)) translate(100vw);opacity:0;width:calc(var(--size) * 3);height:calc(var(--size) * 3)}}.warp-container.warping .warp-star{animation-duration:2s!important;box-shadow:0 0 8px var(--neon-cyan)}.warp-container.warping .warp-star:nth-child(2n){box-shadow:0 0 8px var(--neon-magenta)}.vignette{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:50;background:radial-gradient(ellipse at center,transparent 50%,rgba(150,0,100,calc(var(--vignette-intensity, .3) * .2)) 75%,rgba(255,0,150,calc(var(--vignette-intensity, .3) * .4)) 90%,rgba(200,0,120,calc(var(--vignette-intensity, .3) * .6)) 100%);transition:background .5s ease-out}.cyber-grid{position:absolute;top:0;left:-50vw;width:200vw;height:100vh;background-image:linear-gradient(var(--grid-color) 1px,transparent 1px),linear-gradient(90deg,var(--grid-color) 1px,transparent 1px);background-size:40px 40px;background-position:center;transform:perspective(300px) rotateX(80deg) translateY(100px);transform-origin:50% 100%;animation:grid-move var(--grid-speed, 5s) linear infinite;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,transparent 5%,black 60%);mask-image:linear-gradient(to bottom,transparent 5%,black 60%);transition:animation-duration .5s ease-out}.cyber-grid.grid-active{--grid-color: rgba(0, 243, 255, .35)}@keyframes grid-move{0%{background-position:center 0}to{background-position:center 40px}}.core-container{display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:10;--bass-scale: 1;--mid-opacity: .5;--treble-color: var(--neon-cyan)}.particle-orbit-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;transition:transform 1s ease-in-out}@keyframes spin-flat{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-flat-reverse{0%{transform:rotate(360deg)}to{transform:rotate(0)}}.particle-orbit-layer.layer-1{animation:spin-flat 40s infinite linear;animation-play-state:paused}.particle-orbit-layer.layer-1.active{animation-play-state:running}.particle-orbit-layer.layer-2{animation:spin-flat-reverse 25s infinite linear;animation-play-state:paused}.particle-orbit-layer.layer-2.active{animation-play-state:running}.particle-orbit-layer.layer-3{animation:spin-flat 15s infinite linear;animation-play-state:paused}.particle-orbit-layer.layer-3.active{animation-play-state:running}.core-complex{position:relative;width:950px;height:950px;display:flex;justify-content:center;align-items:center;transform-style:preserve-3d}.center-reactor{width:80px;height:80px;background:transparent;border:3px solid var(--neon-cyan);border-radius:50%;box-shadow:0 0 15px var(--neon-cyan),inset 0 0 10px var(--neon-cyan);position:relative;z-index:5;transform:translate(var(--eye-x),var(--eye-y)) scale(var(--bass-scale));transition:transform .5s ease-out,border-color .5s ease-out,box-shadow .5s ease-out}.center-reactor:after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at center,#000 30%,transparent 31%),repeating-conic-gradient(from 0deg,#ffd700 0deg 2deg,transparent 2deg 10deg),radial-gradient(circle at center,gold,#530);opacity:0;transition:opacity 1.5s ease-in-out;z-index:-1;pointer-events:none}.center-reactor.active{border-color:gold;box-shadow:0 0 30px gold,inset 0 0 20px gold}.center-reactor.active:after{opacity:1}.orbit-ring{position:absolute;inset:0;margin:auto;border-radius:50%;border:1px solid transparent;box-shadow:0 0 10px var(--treble-color);transition:box-shadow .5s ease-out,transform .5s ease-out,border-color .5s ease-out;pointer-events:none}.ring-1{width:140px;height:140px;border-radius:50%;border:4px solid hsl(var(--hud-hue),100%,50%);opacity:.8;box-shadow:0 0 25px hsl(var(--hud-hue),100%,50%),inset 0 0 15px hsl(var(--hud-hue),100%,50%);animation:spin 20s infinite linear;background:none;-webkit-mask:none;mask:none;transition:opacity .5s ease-out,border .5s ease-out,box-shadow .5s ease-out;--ring-scale: var(--scale-r1, 1)}.core-complex.active .ring-1{border:none;opacity:1;background:repeating-conic-gradient(from 0deg,hsl(var(--hud-hue),100%,50%) 0deg 1deg,transparent 1deg 5deg);-webkit-mask:radial-gradient(transparent 65%,black 66%);mask:radial-gradient(transparent 65%,black 66%);box-shadow:0 0 20px hsl(var(--hud-hue),100%,50%),inset 0 0 10px hsl(var(--hud-hue),100%,50%);animation:spin 20s infinite linear,fast-color-cycle 3s infinite linear}.ring-2{width:190px;height:190px;border-radius:50%;border:4px dashed hsl(calc(var(--hud-hue) + 30),100%,50%);box-shadow:0 0 5px hsl(calc(var(--hud-hue) + 30),100%,50%);-webkit-mask:radial-gradient(transparent 60%,black 61%);mask:radial-gradient(transparent 60%,black 61%);animation:spin-reverse 12s infinite linear;--ring-scale: var(--scale-r2, 1)}.ring-3{width:250px;height:250px;border-radius:50%;border:2px solid transparent;border-top:2px solid hsl(220,100%,50%);border-bottom:2px solid hsl(220,100%,50%);box-shadow:0 0 10px #05f;transform:rotate(45deg);animation:pulse-rotate 10s infinite ease-in-out;--ring-scale: var(--scale-r3, 1)}.core-complex.active .ring-3{border-top:2px solid hsl(calc(var(--hud-hue) + 120),100%,50%);border-bottom:2px solid hsl(calc(var(--hud-hue) + 120),100%,50%);box-shadow:0 0 10px hsl(calc(var(--hud-hue) + 120),100%,50%);animation:pulse-rotate 10s infinite ease-in-out,fast-color-cycle 2s infinite linear}.ring-3:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:104%;height:104%;border-radius:50%;border-left:4px solid hsl(220,100%,50%);border-right:4px solid hsl(220,100%,50%);opacity:.7}.core-complex.active .ring-3:before{border-left:4px solid #ffd700;border-right:4px solid #ffd700}.ring-4{width:320px;height:320px;border-radius:50%;border:1px dotted rgba(0,243,255,.3);border-color:hsl(calc(var(--hud-hue) + 90),100%,50%,.3);animation:spin 30s infinite linear reverse;--ring-scale: var(--scale-r4, 1)}.ring-4:after{content:"";position:absolute;top:-5px;left:50%;width:10px;height:10px;background:hsl(calc(var(--hud-hue) + 90),100%,50%);border-radius:50%;box-shadow:0 0 10px hsl(calc(var(--hud-hue) + 90),100%,50%)}.triangle-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity 1.5s ease-in-out,transform .3s ease-out,filter .5s ease-out;filter:hue-rotate(calc(var(--hud-hue, 180) * 1deg - 180deg)) drop-shadow(0 0 8px hsl(var(--hud-hue, 180),100%,50%))}.triangle-overlay.visible{opacity:1}.triangle-ext{width:380px;height:380px;transform:translate(-50%,calc(-50% - 20px)) scale(var(--scale-r1, 1))}.triangle-int{width:450px;height:450px;transform:translate(-50%,calc(-50% - 20px)) scale(var(--scale-r3, 1))}.chroma-layer{position:absolute;width:90px;height:90px;border-radius:50%;pointer-events:none;transition:opacity .2s ease-out}.chroma-r{background:radial-gradient(circle,rgba(255,215,0,.5),transparent 60%);transform:translate(-5px,-3px)}.chroma-b{background:radial-gradient(circle,rgba(0,100,255,.5),transparent 60%);transform:translate(5px,3px)}.pupil{position:absolute;top:50%;left:50%;width:30px;height:30px;background:radial-gradient(circle,#ff0 20%,#fa0,#840);border-radius:50%;transform:translate(-50%,-50%) scale(.5);transition:transform .2s ease-out;box-shadow:0 0 15px #ffd7004d,0 0 30px #ffd70026}.canvas-container{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1;background:#000}#root{max-width:100%;padding:0;text-align:center;overflow:hidden}.warp-container,.cyber-grid{display:none}.footer{position:absolute;bottom:30px;width:auto;right:30px;text-align:right;z-index:1000;font-family:Inter,sans-serif;letter-spacing:1px;pointer-events:none}.copyright{color:var(--neon-cyan);font-size:14px;text-shadow:0 0 5px var(--neon-cyan);margin-bottom:8px;text-transform:uppercase}.footer-year{color:var(--neon-magenta);text-shadow:0 0 5px var(--neon-magenta)}.email{color:gold;font-size:12px;text-shadow:0 0 5px #ffd700;font-family:Courier New,monospace;text-decoration:none;pointer-events:auto}.system-hud{position:absolute;top:50%;left:30px;transform:translateY(-50%);width:200px;background:#000510b3;border-left:2px solid hsl(var(--hud-hue),100%,50%);border-right:1px solid rgba(0,243,255,.2);padding:15px;z-index:100;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 0 15px hsl(var(--hud-hue),100%,50%,.5);font-family:Inter,sans-serif;color:#fff}.system-hud:before{content:"";position:absolute;top:-2px;left:-2px;width:10px;height:2px;background:hsl(var(--hud-hue),100%,50%)}.system-hud:after{content:"";position:absolute;bottom:-2px;left:-2px;width:10px;height:2px;background:hsl(var(--hud-hue),100%,50%)}.hud-header{font-size:14px;color:hsl(var(--hud-hue),100%,50%);text-transform:uppercase;letter-spacing:2px;margin-bottom:20px;border-bottom:1px solid rgba(0,243,255,.2);padding-bottom:5px;text-shadow:0 0 5px hsl(var(--hud-hue),100%,50%)}.hud-section{display:flex;flex-direction:column;gap:15px;margin-bottom:20px}.stat-item{width:100%}.stat-meta{display:flex;justify-content:space-between;font-size:11px;margin-bottom:4px;font-family:Courier New,monospace;font-weight:700}.stat-label{text-shadow:0 0 3px currentColor}.graph-container{width:100%;height:30px;background:#0000004d;border:1px solid rgba(255,255,255,.1);overflow:hidden}.hud-info{border-top:1px solid rgba(0,243,255,.2);padding-top:15px;display:flex;flex-direction:column;gap:8px}.info-row{display:flex;justify-content:space-between;font-size:10px;font-family:Courier New,monospace}.info-row .label{color:#888}.info-row .value{color:var(--neon-magenta);text-align:right}.ip-text{filter:blur(4px);transition:filter .3s;cursor:pointer}.ip-text:hover{filter:blur(0)}@keyframes spin{0%{transform:rotate(0) scale(var(--ring-scale, 1))}to{transform:rotate(360deg) scale(var(--ring-scale, 1))}}@keyframes spin-reverse{0%{transform:rotate(360deg) scale(calc(var(--ring-scale, 1) * .9))}to{transform:rotate(0) scale(calc(var(--ring-scale, 1) * .9))}}@keyframes pulse-rotate{0%{transform:rotate(0) scale(var(--ring-scale, 1));opacity:.5}50%{transform:rotate(180deg) scale(calc(var(--ring-scale, 1) * 1.1));opacity:1}to{transform:rotate(360deg) scale(var(--ring-scale, 1));opacity:.5}}.particle{position:absolute;background:var(--neon-cyan);border-radius:50%;box-shadow:0 0 5px var(--neon-cyan);transform:scale(var(--particle-kick));opacity:var(--mid-opacity);pointer-events:none;animation:float-particle 4s infinite ease-in-out;transition:transform .5s ease-out,opacity .5s ease-out}.outer-particle{opacity:.3!important;z-index:1;animation-duration:10s;background:gold;box-shadow:0 0 4px gold}.particle:nth-child(2n){background:var(--neon-magenta);box-shadow:0 0 5px var(--neon-magenta)}@keyframes float-particle{0%,to{transform:translate(0) scale(var(--particle-kick))}50%{transform:translate(10px,-10px) scale(calc(var(--particle-kick) * 1.5))}}.glitch-layer{position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,243,255,.05) 3px,rgba(0,243,255,.05) 3px);pointer-events:none;z-index:100}.audio-control{position:absolute;top:30px;left:50%;transform:translate(-50%);z-index:200}@keyframes attention-pulse{0%{transform:scale(1);box-shadow:0 0 5px var(--neon-cyan)}50%{transform:scale(1.05);box-shadow:0 0 15px var(--neon-cyan),0 0 25px #00f3ff66}to{transform:scale(1);box-shadow:0 0 5px var(--neon-cyan)}}.pill-toggle{background:#050505cc;border:1px solid var(--neon-cyan);color:var(--neon-cyan);border-radius:50px;padding:8px 20px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:all .3s ease;box-shadow:0 0 5px var(--neon-cyan);min-width:100px;justify-content:center;animation:attention-pulse 2s infinite ease-in-out}.pill-toggle:hover{box-shadow:0 0 15px var(--neon-cyan);background:#00f3ff1a;animation:none;transform:scale(1.05)}.pill-toggle.playing{box-shadow:0 0 15px var(--neon-cyan);animation:none}.bars{display:flex;align-items:flex-end;gap:2px;height:14px}.bar{width:3px;height:100%;background:var(--neon-cyan);transform:scaleY(.4);transform-origin:bottom}.playing .bar{animation:bar-dance .8s infinite ease-in-out}.playing .bar:nth-child(2){animation-delay:.2s}.playing .bar:nth-child(3){animation-delay:.4s}@keyframes bar-dance{0%{transform:scaleY(.4)}50%{transform:scaleY(1)}to{transform:scaleY(.4)}}.status-text{font-family:Inter,sans-serif;font-weight:700;font-size:14px;letter-spacing:1px}@keyframes pulse{0%,to{transform:rotate(45deg) scale(1);box-shadow:0 0 20px var(--neon-magenta)}50%{transform:rotate(45deg) scale(1.1);box-shadow:0 0 40px var(--neon-magenta),0 0 10px var(--neon-cyan)}}@keyframes rotate-forward{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotate-reverse{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}.under-construction{position:absolute;top:30px;left:30px;z-index:200;font-family:Inter,sans-serif;font-size:14px;font-weight:400;line-height:1.4;text-transform:uppercase;pointer-events:none;letter-spacing:1px}.uc-under{color:var(--neon-magenta);text-shadow:0 0 5px var(--neon-magenta)}.uc-construction{color:var(--neon-cyan);text-shadow:0 0 5px var(--neon-cyan)}.uc-coming{color:gold;text-shadow:0 0 5px #ffd700}.track-info{position:absolute;top:calc(50% - 100px);right:90px;transform:translateY(-50%);z-index:150;display:flex;flex-direction:column;align-items:center;gap:15px;animation:fadeIn .8s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-50%) translate(20px)}to{opacity:1;transform:translateY(-50%) translate(0)}}.track-cover{width:150px;height:auto;border:2px solid var(--neon-cyan);box-shadow:0 0 20px #00f3ff80,0 0 40px #f0f3;transition:box-shadow .3s ease}.track-cover:hover{box-shadow:0 0 30px #00f3ffcc,0 0 60px #f0f6}.track-text{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;font-family:Inter,sans-serif}.track-line{display:block}.track-line.remixed{color:var(--neon-magenta);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:2px;text-shadow:0 0 10px var(--neon-magenta)}.track-line.title{color:var(--neon-cyan);font-size:16px;font-weight:700;text-shadow:0 0 10px var(--neon-cyan)}.track-line.artist{color:gold;font-size:12px;font-weight:400;text-shadow:0 0 5px #ffd700}.skip-button{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:10px;background:transparent;border:none;color:var(--neon-cyan);width:15px;height:15px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;opacity:0;pointer-events:none;filter:drop-shadow(0 0 2px var(--neon-cyan))}.skip-button.visible{opacity:1;pointer-events:auto}.skip-button:hover:not(:disabled){transform:translateY(-50%) scale(1.2);color:var(--neon-magenta);filter:drop-shadow(0 0 5px var(--neon-magenta));background:transparent;box-shadow:none}.skip-button:disabled{opacity:.3;cursor:not-allowed}.skip-button.skipping{animation:spin-skip .5s linear infinite}@keyframes spin-skip{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.skip-icon-svg{width:100%;height:100%}.skip-icon{display:none}.audio-wrapper{position:absolute;top:30px;left:0;width:100%;height:0;display:flex;justify-content:center;z-index:200;pointer-events:none}.audio-center-tether{position:relative;width:auto;height:auto;display:flex;align-items:center;pointer-events:auto}.like-counter{position:absolute;bottom:180px;right:130px;z-index:200;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;transition:transform .2s ease;transform:scale(1.8);transform-origin:bottom right}.like-text-container{display:flex;align-items:center;gap:8px;justify-content:center}.like-counter:hover{transform:scale(1.9)}.heart-icon{width:40px;height:auto;filter:drop-shadow(0 0 10px var(--neon-cyan));transition:filter .3s ease,transform .3s ease}.heart-icon.liked{filter:drop-shadow(0 0 20px var(--neon-cyan))}.heart-icon.pulse{animation:heart-pulse .6s ease-out}@keyframes heart-pulse{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.like-count{font-family:Inter,sans-serif;font-size:10px;font-weight:700;color:var(--neon-magenta);text-shadow:0 0 10px var(--neon-magenta)}.like-text{font-family:Inter,sans-serif;font-size:8px;font-weight:400;color:gold;text-shadow:0 0 5px #ffd700}.comment-section{position:absolute;bottom:30px;left:30px;transform:none;z-index:200;display:flex;flex-direction:column;align-items:center;gap:8px;width:350px;max-width:90%}.comment-input{width:100%;height:40px;background:#000510b3;border:1px solid var(--neon-cyan);border-radius:5px;padding:10px 20px;color:#fff;font-family:Inter,sans-serif;font-size:14px;outline:none;transition:all .3s ease;box-shadow:0 0 10px #00f3ff4d}.comment-input::placeholder{color:#00f3ff99;font-style:italic}.comment-input:focus{border-color:var(--neon-magenta);box-shadow:0 0 20px #ff00ff80}.comment-status{font-family:Inter,sans-serif;font-size:12px;color:var(--neon-cyan);text-shadow:0 0 5px var(--neon-cyan)}@media(max-width:768px){.footer{width:100%;left:0;right:auto;bottom:10px;text-align:center}.comment-section{bottom:90px;left:50%;transform:translate(-50%);width:90%;max-width:600px}.under-construction{font-size:10px;top:15px;left:15px}.system-hud{width:120px;padding:8px;left:10px}.hud-header{font-size:10px;margin-bottom:10px;letter-spacing:1px}.hud-section{gap:10px;margin-bottom:10px}.stat-meta{font-size:8px}.graph-container{height:15px}.info-row{font-size:8px}}@media(min-width:1025px){.track-info{gap:22px}.track-cover{width:225px}.track-line.remixed{font-size:21px}.track-line.title{font-size:24px}.track-line.artist{font-size:18px}}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}