@import"https://fonts.googleapis.com/css2?family=VT323&display=swap";:root{--bg-color: #2b003b;--grid-color: #ff00ff;--cell-color: #00ffff;--text-color: #ff00ff;--button-bg: #000000;--button-border: #00ffff;--button-hover: #ff00ff}body{margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:20px;background-color:#1a0b2e;font-family:VT323,monospace;color:var(--text-color);overflow-x:hidden;overflow-y:auto}.vaporwave-bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;background:linear-gradient(to bottom,#0b001a,#2b003b 40%,#590059);overflow:hidden}.sun{position:absolute;bottom:5.3%;left:75%;transform:translate(-50%);width:50vh;height:50vh;background:linear-gradient(to bottom,#ff0,#f0f 60%,#90f);border-radius:50%;box-shadow:0 0 60px #f05;-webkit-mask-image:repeating-linear-gradient(to bottom,black 0%,black 5%,transparent 5%,transparent 6%);mask-image:repeating-linear-gradient(to bottom,black 0%,black 5%,transparent 5%,transparent 6%);clip-path:inset(0 0 40% 0)}.grid{position:absolute;bottom:-15%;left:-50%;width:200%;height:60%;background-image:linear-gradient(rgba(255,0,255,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(255,0,255,.4) 1px,transparent 1px);background-size:40px 40px;transform:perspective(50vh) rotateX(60deg);animation:gridMove 20s linear infinite;box-shadow:0 0 40px #f0f6;z-index:0;overflow:hidden}.grid-tracer{position:absolute;top:var(--lane, 50%);left:-20%;width:8px;height:8px;background:radial-gradient(circle,#fff 0%,var(--tracer-color, #ffb7ff) 60%,transparent 100%);box-shadow:0 0 15px var(--tracer-color, #ffb7ff),0 0 35px #ffffffb3;border-radius:50%;opacity:0;pointer-events:none;animation:gridTracerMove var(--duration, 5s) linear forwards}.grid-tracer:after{content:"";position:absolute;top:50%;left:50%;width:140px;height:4px;background:linear-gradient(90deg,rgba(255,255,255,.9),transparent);transform:translate(-100%,-50%) rotate(var(--angle, 0deg));filter:blur(.5px);opacity:.6}@keyframes gridTracerMove{0%{transform:translate(0) translateY(0) scale(.7);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:translate(160%) translateY(var(--drift, 0));opacity:0}}@keyframes gridMove{0%{background-position:0 0}to{background-position:0 40px}}#container{display:flex;flex-direction:column;align-items:center;gap:20px;width:min(90vw,960px);max-width:960px;padding:20px;border:4px solid var(--grid-color);border-radius:16px;box-sizing:border-box;box-shadow:0 0 20px var(--grid-color),inset 0 0 20px var(--grid-color);background:#0009;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}h1{font-size:4rem;margin:0;text-shadow:3px 3px 0px #00ffff;letter-spacing:5px;background:-webkit-linear-gradient(#ff00ff,#00ffff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-transform:uppercase}canvas{width:100%;max-width:100%;height:auto;max-height:70vh;border:2px solid var(--cell-color);box-shadow:0 0 15px var(--cell-color);background-color:#000;image-rendering:pixelated}.controls{display:flex;flex-wrap:wrap;justify-content:center;gap:15px;width:100%}button{background:var(--button-bg);color:var(--button-border);border:2px solid var(--button-border);padding:10px 20px;font-family:VT323,monospace;font-size:1.5rem;cursor:pointer;text-transform:uppercase;box-shadow:0 0 10px var(--button-border);transition:all .2s ease;flex:1 1 140px;min-width:130px;text-align:center}button:hover{background:var(--button-border);color:var(--button-bg);box-shadow:0 0 20px var(--button-border);transform:translateY(-2px)}button:active{transform:translateY(0)}.control-panel{display:flex;flex-direction:column;gap:20px;width:100%;align-items:center}.range-controls{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;width:100%}.range-control{display:flex;flex-direction:column;gap:8px;min-width:220px;max-width:360px;width:100%}.range-control label{font-size:1.5rem;color:var(--text-color);text-shadow:0 0 5px var(--text-color)}input[type=range]{-webkit-appearance:none;width:100%;max-width:100%;height:10px;background:var(--button-bg);border:1px solid var(--button-border);outline:none;box-shadow:0 0 5px var(--button-border)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;background:var(--cell-color);cursor:pointer;box-shadow:0 0 10px var(--cell-color)}input[type=range]::-moz-range-thumb{width:20px;height:20px;background:var(--cell-color);cursor:pointer;box-shadow:0 0 10px var(--cell-color);border:none}@media(max-width:900px){h1{font-size:3rem;letter-spacing:3px}canvas{max-height:60vh}}@media(max-width:600px){body{padding:10px}#container{width:100%}.controls{flex-direction:column}button{width:100%}.range-control{min-width:0}}