@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap";*{margin:0;padding:0;box-sizing:border-box}html,body{background:#000;color:#0f0;font:14px monospace;text-shadow:0 0 10px #0f0;margin:0;padding:0;height:100%;overflow:hidden}.container{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden}.left-panel{position:absolute;top:70px;left:10px;width:380px;max-height:0;overflow:hidden;background:#000000f2;border:0px solid #0f0;border-radius:0 0 8px 8px;border-top:none;z-index:9;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:max-height .4s cubic-bezier(.4,0,.2,1),padding .4s,opacity .3s ease,border-width .4s;padding:0 10px;opacity:.15}.left-panel:hover,.left-panel.touched{opacity:1}.left-panel.expanded{max-height:calc(100vh - 140px);padding:10px;border-width:1px;overflow-y:auto;opacity:1!important}.left-panel.expanded::-webkit-scrollbar{width:6px}.left-panel.expanded::-webkit-scrollbar-track{background:#00ff001a;border-radius:3px}.left-panel.expanded::-webkit-scrollbar-thumb{background:#00ff0080;border-radius:3px;border:1px solid rgba(0,255,0,.3)}.left-panel.expanded::-webkit-scrollbar-thumb:hover{background:#0f0c;box-shadow:0 0 5px #00ff0080}#gameContainer{position:absolute;top:0;left:0;width:100%;height:100%}button{background:#111;color:#0f0;border:1px solid #0f0;padding:10px 20px;margin:5px;cursor:pointer;text-shadow:0 0 5px #0f0}button:hover{background:#222;box-shadow:0 0 10px #0f0}.controls{margin:20px 0}.slider-row{display:flex;align-items:center;margin:10px 0;gap:10px}.slider-label{min-width:80px;text-align:right;color:#0f0}.slider{flex:1;max-width:200px}.sensitivity-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;outline:none;flex:1;max-width:200px}.sensitivity-slider::-webkit-slider-track{background:#333;height:4px;border-radius:2px}.sensitivity-slider::-moz-range-track{background:#333;height:4px;border-radius:2px}.sensitivity-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:#0f0;border-radius:50%;cursor:pointer;margin-top:-6px}.sensitivity-slider::-moz-range-thumb{width:16px;height:16px;background:#0f0;border-radius:50%;cursor:pointer;border:none}.sensitivity-slider::-webkit-slider-runnable-track{background:#333}.slider-value{min-width:40px;color:#ff0;font-weight:700}.sound-select{flex:1;max-width:200px;background:#111;color:#0f0;border:1px solid #0f0;padding:4px;font-family:monospace}h1{color:#ff0;text-shadow:0 0 20px #ff0;font-size:18px;margin:10px 0}.track-row{margin:5px 0;display:flex;align-items:center}.track-name{width:80px;text-align:right;margin-right:10px}.beat-indicator{display:inline-block;width:20px;height:20px;background:#030;border:1px solid #0f0;margin-right:5px}.pattern-display{display:inline-block;margin-left:10px;font-size:10px;color:#0a0}.mute-btn{width:40px;height:20px;padding:2px;margin:0 5px;font-size:10px;background:#030;color:#0f0;border:1px solid #0f0;cursor:pointer}.mute-btn.muted{background:#300;color:red;border-color:red}#progression{margin:20px 0;padding:10px;border:1px solid #0f0;background:#010}.music-controls{position:fixed;top:10px;left:10px;display:flex;align-items:center;gap:10px;background:#000000e6;border:1px solid #0f0;border-radius:8px;padding:10px;z-index:10;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:.15;transition:opacity .3s ease;max-width:calc(100vw - 20px);overflow:hidden;flex-wrap:wrap;touch-action:none}.music-controls:hover,.music-controls.touched,.music-controls.settings-open{opacity:1}.control-btn{width:40px;height:40px;background:#111;color:#0f0;border:1px solid #0f0;border-radius:4px;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;transition:all .2s;position:relative}.control-btn:hover{background:#222;box-shadow:0 0 10px #0f0}.control-btn.inactive svg{stroke:#666!important}.control-btn.active svg{stroke:#0f0!important}.track-squares{display:flex;gap:8px;padding:0 10px;border-left:1px solid #0f0;border-right:1px solid #0f0;flex-wrap:nowrap}.track-square{width:30px;height:30px;background:#030;border:2px solid #0f0;border-radius:4px;cursor:pointer;transition:all .2s}.track-square.active{background:#0f0;box-shadow:0 0 15px #0f0}.track-square.muted{background:#300;border-color:red;opacity:.5}.track-square.flash{animation:flash .1s}@keyframes flash{0%{background:#0f0;box-shadow:0 0 20px #0f0}to{background:#030;box-shadow:none}}body.mobile{font-size:18px}body.mobile .music-controls{padding:8px;gap:8px;max-width:calc(100vw - 16px)}body.mobile .control-btn{width:45px;height:45px;font-size:24px;border-width:2px}@media(max-width:480px)and (orientation:portrait){.music-controls{padding:2px;gap:2px;flex-wrap:nowrap;max-height:40px}.control-btn{width:26px;height:26px;font-size:14px}.track-squares{flex-wrap:nowrap;gap:1px;padding:0 3px}.track-square{width:18px;height:18px}body.mobile .control-btn{width:28px;height:28px;font-size:16px}body.mobile .track-squares{gap:1px;padding:0 3px}}@media(max-width:480px)and (orientation:landscape){.music-controls{padding:5px;gap:5px}.control-btn{width:35px;height:35px;font-size:18px}.track-square{width:25px;height:25px}}body.mobile .track-square{width:45px;height:45px;border-width:3px}body.mobile .track-squares{gap:12px;padding:0 15px}body.mobile .left-panel{width:90%;max-width:500px;font-size:18px}body.mobile .left-panel.expanded{max-height:calc(100vh - 120px);padding:20px}body.mobile button{padding:15px 30px;font-size:18px;border-width:2px}body.mobile .slider-label{min-width:120px;font-size:18px}body.mobile .sound-select{padding:8px;font-size:18px;border-width:2px}body.mobile h1{font-size:24px}body.mobile .slider-row{margin:15px 0;gap:15px}:root{--primary: #00ffcc;--secondary: #ff00ff;--accent: #ffff00;--bg-dark: #0a0a12;--bg-panel: rgba(10, 10, 18, .95);--glow-primary: 0 0 20px rgba(0, 255, 204, .5);--glow-secondary: 0 0 20px rgba(255, 0, 255, .5)}@keyframes bg-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}html{background:linear-gradient(135deg,#0a0a12,#0d0620,#0a0a12,#06101a,#0a0a12);background-size:400% 400%;animation:bg-shift 20s ease infinite}@keyframes neon-flicker{0%,19%,21%,23%,25%,54%,56%,to{text-shadow:0 0 7px var(--primary),0 0 20px var(--primary),0 0 40px var(--primary),0 0 80px var(--secondary);opacity:1}20%,24%,55%{text-shadow:none;opacity:.8}}@keyframes fade-in-up{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-glow{0%,to{text-shadow:0 0 8px var(--primary),0 0 20px var(--primary);opacity:1}50%{text-shadow:0 0 16px var(--primary),0 0 40px var(--primary),0 0 60px var(--secondary);opacity:.85}}.left-panel{background:var(--bg-panel);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-image:linear-gradient(160deg,#0fc6,#f0f3) 1}.left-panel.expanded{border-image:linear-gradient(160deg,#00ffcc80,#ff00ff4d) 1;box-shadow:0 0 30px #00ffcc14,inset 0 0 30px #0000004d}.music-controls{background:var(--bg-panel);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-image:linear-gradient(160deg,#0fc6,#f0f3) 1}