.animations-paused,.animations-paused *{animation-play-state:paused!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}:root{--neon-cyan: #00ffff;--neon-magenta: #ff00ff;--neon-violet: #9d4edd;--neon-pink: #ff2a6d;--neon-blue: #05d9e8;--neon-yellow: #f9f002;--neon-gold: #ffcc00;--bg-dark: #0a0015;--bg-purple: #1a0a2e;--bg-mid: #120826;--grid-color: rgba(157, 78, 221, .6);--panel-bg: rgba(10, 0, 21, .85);--panel-border: rgba(157, 78, 221, .5)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Courier New,monospace;background:linear-gradient(180deg,#0a0015 0% 30%,#1a0a2e 50%,#2d1b4e 70%,#1a0a2e);color:#e0e0e0;min-height:100vh;position:relative;overflow-x:hidden}.cyberpunk-bg{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}.mountains{position:absolute;bottom:45%;left:0;width:100%;height:300px;z-index:2}.mountains svg{width:100%;height:100%;filter:drop-shadow(0 0 10px var(--neon-violet)) drop-shadow(0 0 20px rgba(157,78,221,.5))}.grid-container{position:absolute;bottom:0;left:0;width:100%;height:55%;perspective:400px;perspective-origin:50% 0%;z-index:1;overflow:hidden}.grid{position:absolute;top:0;left:-50%;width:200%;height:200%;background-image:repeating-linear-gradient(90deg,transparent,transparent 48px,var(--grid-color) 48px,var(--grid-color) 50px),repeating-linear-gradient(0deg,transparent,transparent 48px,var(--grid-color) 48px,var(--grid-color) 50px);transform:rotateX(75deg);transform-origin:50% 0%;animation:grid-scroll 20s linear infinite}@keyframes grid-scroll{0%{transform:rotateX(75deg) translateY(0)}to{transform:rotateX(75deg) translateY(50px)}}.horizon-glow{position:absolute;bottom:45%;left:0;width:100%;height:4px;background:linear-gradient(90deg,transparent 0%,var(--neon-violet) 20%,var(--neon-magenta) 50%,var(--neon-violet) 80%,transparent 100%);box-shadow:0 0 20px var(--neon-violet),0 0 40px var(--neon-magenta),0 0 60px var(--neon-violet);z-index:3}.scanlines{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000;background:repeating-linear-gradient(0deg,rgba(0,0,0,.1) 0px,rgba(0,0,0,.1) 1px,transparent 1px,transparent 3px);animation:scanline-move 8s linear infinite}@keyframes scanline-move{0%{background-position:0 0}to{background-position:0 100px}}.container{max-width:1200px;margin:0 auto;padding:20px;position:relative;z-index:10}.header{display:flex;flex-direction:column;align-items:center;gap:15px;margin-bottom:30px}.header-top{display:flex;align-items:center;justify-content:space-between;width:100%}.header-top h1{flex:1;text-align:center}h1{text-align:center;color:var(--neon-cyan);font-size:2.2rem;text-transform:uppercase;letter-spacing:4px;text-shadow:0 0 5px var(--neon-cyan),0 0 10px var(--neon-cyan),0 0 20px var(--neon-cyan),0 0 40px var(--neon-magenta),0 0 80px var(--neon-magenta);animation:neon-flicker 3s ease-in-out infinite}@keyframes neon-flicker{0%,to{opacity:1}92%{opacity:1}93%{opacity:.8}94%{opacity:1}95%{opacity:.9}96%{opacity:1}}button{padding:12px 20px;font-size:14px;font-family:Courier New,monospace;border:2px solid;border-radius:0;cursor:pointer;font-weight:700;transition:all .3s ease;text-transform:uppercase;letter-spacing:2px;background:transparent;position:relative;overflow:hidden}button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s ease}button:hover:before{left:100%}.btn-primary{border-color:var(--neon-cyan);color:var(--neon-cyan);box-shadow:0 0 5px var(--neon-cyan),inset 0 0 5px #00ffff1a}.btn-primary:hover{background:#00ffff1a;box-shadow:0 0 10px var(--neon-cyan),0 0 20px var(--neon-cyan),0 0 40px var(--neon-cyan),inset 0 0 10px #0ff3;transform:translateY(-2px)}.btn-primary:disabled{border-color:#444;color:#444;box-shadow:none;cursor:not-allowed;transform:none}.btn-secondary{border-color:var(--neon-violet);color:var(--neon-violet);box-shadow:0 0 5px var(--neon-violet),inset 0 0 5px #9d4edd1a}.btn-secondary:hover{background:#9d4edd1a;box-shadow:0 0 10px var(--neon-violet),0 0 20px var(--neon-violet),0 0 40px var(--neon-violet),inset 0 0 10px #9d4edd33;transform:translateY(-2px)}.btn-secondary:disabled{border-color:#444;color:#444;box-shadow:none;cursor:not-allowed;transform:none}.btn-danger{border-color:var(--neon-pink);color:var(--neon-pink);box-shadow:0 0 5px var(--neon-pink),inset 0 0 5px #ff2a6d1a}.btn-danger:hover{background:#ff2a6d1a;box-shadow:0 0 10px var(--neon-pink),0 0 20px var(--neon-pink),0 0 40px var(--neon-pink),inset 0 0 10px #ff2a6d33;transform:translateY(-2px)}.btn-danger:disabled{border-color:#444;color:#444;box-shadow:none;cursor:not-allowed;transform:none}.btn-install{border-color:var(--neon-gold);color:var(--neon-gold);box-shadow:0 0 5px var(--neon-gold),inset 0 0 5px #ffcc001a;padding:8px 14px;font-size:11px;height:36px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}.btn-install:hover{background:#ffcc001a;box-shadow:0 0 10px var(--neon-gold),0 0 20px var(--neon-gold),0 0 40px var(--neon-gold),inset 0 0 10px #fc03;transform:translateY(-2px)}.header-buttons{display:flex;gap:10px;align-items:stretch;flex-shrink:0}.btn-donate{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;font-size:11px;font-family:Courier New,monospace;font-weight:700;text-transform:uppercase;letter-spacing:1px;text-decoration:none;border:2px solid #ffdd00;color:#fd0;background:transparent;cursor:pointer;transition:all .3s ease;box-shadow:0 0 5px #fd0,inset 0 0 5px #ffdd001a;height:36px;box-sizing:border-box}.btn-donate:hover{background:#ffdd0026;box-shadow:0 0 10px #fd0,0 0 20px #fd0,0 0 40px #fd0,inset 0 0 10px #fd03;transform:translateY(-2px);color:#fd0}.btn-donate svg{filter:drop-shadow(0 0 3px #ffdd00);flex-shrink:0}.btn-donate:hover svg{filter:drop-shadow(0 0 6px #ffdd00) drop-shadow(0 0 12px #ffdd00)}.btn-github{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;font-size:11px;font-family:Courier New,monospace;font-weight:700;text-transform:uppercase;letter-spacing:1px;text-decoration:none;border:2px solid #ffdd00;color:#fd0;background:transparent;cursor:pointer;transition:all .3s ease;box-shadow:0 0 5px #fd0,inset 0 0 5px #ffdd001a;height:36px;box-sizing:border-box}.btn-github:hover{background:#ffdd0026;box-shadow:0 0 10px #fd0,0 0 20px #fd0,0 0 40px #fd0,inset 0 0 10px #fd03;transform:translateY(-2px);color:#fd0}.btn-github svg{filter:drop-shadow(0 0 3px #ffdd00);flex-shrink:0}.btn-github:hover svg{filter:drop-shadow(0 0 6px #ffdd00) drop-shadow(0 0 12px #ffdd00)}.status-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}.status-card{background:var(--panel-bg);padding:20px;border:1px solid var(--panel-border);position:relative;backdrop-filter:blur(10px);box-shadow:0 0 10px #9d4edd4d,inset 0 0 30px #9d4edd0d;display:flex;flex-direction:column;min-height:220px}.status-card:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,var(--neon-cyan),var(--neon-violet));box-shadow:0 0 10px var(--neon-cyan)}.status-card.midi-card:before{background:linear-gradient(180deg,var(--neon-magenta),var(--neon-violet));box-shadow:0 0 10px var(--neon-magenta)}.status-card h2{font-size:14px;margin-bottom:15px;color:var(--neon-violet);border-bottom:1px solid var(--panel-border);padding-bottom:10px;text-transform:uppercase;letter-spacing:3px;text-shadow:0 0 5px var(--neon-violet),0 0 10px rgba(157,78,221,.5)}.status-items-container{display:flex;flex-direction:column;gap:10px;min-height:100px;margin-bottom:10px}.status-item{display:grid;grid-template-columns:100px 1fr;gap:10px;align-items:center}.status-label{color:var(--neon-cyan);font-weight:700;font-size:13px;text-shadow:0 0 5px rgba(0,255,255,.5)}.status-value{color:var(--neon-yellow);word-break:break-all;font-size:13px;text-shadow:0 0 5px var(--neon-yellow),0 0 10px rgba(249,240,2,.5)}.card-buttons{display:flex;gap:10px;margin-top:auto;padding-top:15px;border-top:1px solid var(--panel-border);flex-wrap:wrap;justify-content:flex-start}.card-buttons button{padding:8px 12px;font-size:11px}.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:20px;margin-top:20px}.panel{background:var(--panel-bg);border:1px solid var(--panel-border);padding:20px;backdrop-filter:blur(10px);position:relative;box-shadow:0 0 10px #9d4edd4d,inset 0 0 30px #9d4edd0d}.panel:before,.panel:after{content:"";position:absolute;width:20px;height:20px;border-color:var(--neon-violet);border-style:solid}.panel:before{top:-1px;left:-1px;border-width:2px 0 0 2px;box-shadow:-2px -2px 5px #9d4edd80}.panel:after{bottom:-1px;right:-1px;border-width:0 2px 2px 0;box-shadow:2px 2px 5px #9d4edd80}.panel h2{font-size:14px;margin-bottom:15px;color:var(--neon-violet);border-bottom:1px solid var(--panel-border);padding-bottom:10px;text-transform:uppercase;letter-spacing:3px;text-shadow:0 0 5px var(--neon-violet),0 0 10px rgba(157,78,221,.5)}.data-item{display:grid;grid-template-columns:140px 1fr;margin-bottom:8px;gap:15px;padding:8px 0;border-bottom:1px solid rgba(157,78,221,.1)}.data-label{color:var(--neon-blue);font-weight:700;text-shadow:0 0 5px rgba(5,217,232,.3);white-space:nowrap}.data-value{color:var(--neon-yellow);word-break:break-word;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 5px var(--neon-yellow),0 0 10px rgba(249,240,2,.5)}.beat-display{display:flex;align-items:center;gap:5px}.beat-number{font-size:28px;font-weight:700;color:var(--neon-yellow);min-width:50px;text-align:right;text-shadow:0 0 5px var(--neon-yellow),0 0 10px var(--neon-yellow),0 0 20px rgba(249,240,2,.7);transition:all .1s ease}.beat-number.pulse{transform:scale(1.1);color:var(--neon-magenta);text-shadow:0 0 5px var(--neon-magenta),0 0 10px var(--neon-magenta),0 0 20px var(--neon-magenta),0 0 40px var(--neon-magenta)}.beat-separator{font-size:20px;color:var(--neon-violet)}.beat-max{font-size:18px;color:var(--neon-yellow);min-width:40px;text-shadow:0 0 5px rgba(249,240,2,.5)}.progress-container{background:#00000080;border:1px solid var(--panel-border);height:16px;margin-top:10px;overflow:hidden;position:relative}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--neon-violet) 0%,var(--neon-magenta) 50%,var(--neon-cyan) 100%);background-size:200% 100%;transition:width .15s ease-out;animation:shimmer 2s infinite linear;box-shadow:0 0 10px var(--neon-violet),0 0 20px var(--neon-magenta)}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.progress-percentage{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:10px;color:#fff;text-shadow:0 0 5px rgba(0,0,0,.8);font-weight:700}.warning-banner{background:linear-gradient(90deg,#ff2a6d33,#9d4edd33);border:1px solid var(--neon-pink);color:var(--neon-pink);padding:15px;margin-bottom:20px;font-weight:700;text-shadow:0 0 5px rgba(255,42,109,.5);box-shadow:0 0 10px #ff2a6d4d,inset 0 0 20px #ff2a6d1a}.midi-select-container{display:flex;align-items:center;gap:8px}.btn-small{padding:6px 12px;font-size:11px;border:1px solid var(--neon-violet);background:transparent;cursor:pointer;font-weight:700;color:var(--neon-violet);transition:all .2s ease;font-family:Courier New,monospace;text-transform:uppercase;letter-spacing:1px}.btn-small:hover{background:#9d4edd33;box-shadow:0 0 10px var(--neon-violet),inset 0 0 10px #9d4edd1a}.midi-connected,.midi-disconnected{color:var(--neon-yellow)!important;text-shadow:0 0 5px var(--neon-yellow),0 0 10px rgba(249,240,2,.5)}.midi-syncing{color:var(--neon-yellow)!important;animation:neon-pulse-yellow 1s ease-in-out infinite}@keyframes neon-pulse{0%,to{text-shadow:0 0 5px var(--neon-cyan);opacity:1}50%{text-shadow:0 0 20px var(--neon-cyan),0 0 40px var(--neon-cyan);opacity:.8}}@keyframes neon-pulse-yellow{0%,to{text-shadow:0 0 5px var(--neon-yellow),0 0 10px rgba(249,240,2,.5);opacity:1}50%{text-shadow:0 0 10px var(--neon-yellow),0 0 20px var(--neon-yellow),0 0 40px var(--neon-yellow);opacity:.8}}#midiOutputSelect{min-width:200px;padding:6px 10px;background:#00000080;border:1px solid var(--panel-border);color:var(--neon-yellow);font-family:Courier New,monospace;font-size:13px;cursor:pointer;text-shadow:0 0 5px var(--neon-yellow),0 0 10px rgba(249,240,2,.5)}#midiOutputSelect:hover{border-color:var(--neon-violet);box-shadow:0 0 5px #9d4edd80}#midiOutputSelect:focus{outline:none;border-color:var(--neon-cyan);box-shadow:0 0 10px #00ffff80}#midiOutputSelect option{background:var(--bg-dark);color:#e0e0e0}.output{background:#000000b3;border:1px solid var(--panel-border);min-height:50px;height:400px;font-size:12px;box-shadow:0 0 10px #9d4edd4d,inset 0 0 30px #00000080;margin-top:20px;position:relative;overflow:hidden}.output-clear-btn{position:absolute;top:15px;right:15px;z-index:11}#outputLog{overflow-y:auto;height:100%;padding:15px;box-sizing:border-box}.output-line{margin:5px 0;padding:3px 0;border-bottom:1px solid rgba(157,78,221,.1)}.output-timestamp{color:var(--neon-cyan);margin-right:10px;text-shadow:0 0 3px rgba(0,255,255,.3)}.output-type{color:var(--neon-magenta);margin-right:10px;font-weight:700;text-shadow:0 0 3px rgba(255,0,255,.3)}.output-data{color:var(--neon-yellow);text-shadow:0 0 3px rgba(249,240,2,.3)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#0000004d;border:1px solid var(--panel-border)}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--neon-violet),var(--neon-magenta));box-shadow:0 0 5px var(--neon-violet)}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--neon-magenta),var(--neon-cyan));box-shadow:0 0 10px var(--neon-magenta)}@media(max-width:768px){h1{font-size:1.5rem;letter-spacing:2px}.status-cards,.panels{grid-template-columns:1fr}.card-buttons{justify-content:center}.header-top{flex-direction:column;gap:10px}}