:root{--bg: #e6e6e6;--dark: #0a0a0a;--accent: #ccff00;--border: rgba(0, 0, 0, .1)}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;background-color:transparent;min-height:100vh;font-family:system-ui,-apple-system,sans-serif;overflow-x:hidden}#canvas-container{position:fixed;top:0;left:0;z-index:-1;opacity:.4}:root{--acid-lime: #ccff00;--acid-black: #000000;--acid-border: 2px solid #000000;--glass-blur: blur(24px) saturate(180%)}.site-logo{position:fixed;top:20px;left:20px;z-index:1001;-webkit-text-stroke:.5px var(--dark);text-decoration:none;font-weight:700;font-size:1rem;color:transparent;transition:color .3s}.site-logo:hover{background:transparent!important;opacity:.6;transform:none}.nav{position:fixed;top:20px;left:50%;transform:translate(-50%);z-index:999;pointer-events:none}.nav-inner{display:flex;align-items:center;gap:28px;position:relative;padding:8px 24px;pointer-events:auto;background:linear-gradient(180deg,#ffffff80,#d7d7d74d);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:var(--acid-border);border-radius:2px;box-shadow:0 12px 30px #00000014;transition:all .3s ease}.nav-inner:before{content:"STATUS: READY";position:absolute;top:-18px;right:0;font-size:9px;font-weight:900;background:var(--acid-black);color:var(--acid-lime);padding:1px 6px;letter-spacing:.5px}.nav-links{display:flex;gap:24px;align-items:center}.nav-links a,.dropdown-trigger{font-weight:800;color:var(--acid-black);text-decoration:none;font-size:12px;text-transform:uppercase;letter-spacing:.8px;position:relative;padding:4px 0;cursor:pointer;transition:color .2s ease}.nav-links a:hover,.dropdown-trigger:hover{color:var(--acid-black)}.nav-links>a:after,.dropdown-trigger:after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--acid-black);transition:width .25s cubic-bezier(.16,1,.3,1)}.nav-links>a:hover:after,.dropdown-trigger:hover:after{width:100%}.dropdown{position:relative;display:inline-flex;align-items:center}.dropdown-menu{display:none!important;position:absolute;top:100%;left:50%;transform:translate(-50%);padding-top:10px;z-index:1000;width:max-content}.dropdown-menu a{display:block;padding:8px 16px;margin-bottom:4px;font-size:11px;font-weight:800;color:var(--acid-black);text-decoration:none;text-transform:uppercase;white-space:nowrap;background:#ffffffe6;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1.5px solid #000000;box-shadow:3px 3px #000;transition:all .2s cubic-bezier(.16,1,.3,1)}.dropdown-menu a:hover{background:var(--acid-lime);color:#000;transform:translate(-2px,-2px);box-shadow:4px 4px #000}.dropdown:hover .dropdown-menu{display:flex!important;flex-direction:column;animation:fadeInDown .2s cubic-bezier(.16,1,.3,1)}@keyframes fadeInDown{0%{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%)}}.mobile-menu-btn,.mobile-menu-panel{display:none!important}@media (max-width: 768px){.site-logo{top:16px;left:16px;font-size:13px}.nav{top:16px;right:16px;left:auto;transform:none;pointer-events:auto!important;z-index:9999!important}.nav-inner{padding:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:none;box-shadow:none}.nav-inner:before{display:none}.nav-links{display:none!important}.mobile-menu-btn{display:block!important;pointer-events:auto!important;position:relative;z-index:1002;background:#ffffffd9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:var(--acid-border);box-shadow:3px 3px 0 var(--acid-black);padding:6px 12px;font-size:12px;font-weight:900;letter-spacing:1px;color:var(--acid-black);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:all .15s ease}.mobile-menu-btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--acid-black);background:var(--acid-lime)}.mobile-menu-panel{display:flex!important;flex-direction:column;gap:8px;position:fixed;top:60px;right:16px;width:180px;padding:12px;background:#ffffffeb;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:var(--acid-border);box-shadow:6px 6px 0 var(--acid-black);opacity:0;visibility:hidden;pointer-events:none!important;transform:translateY(-8px);transition:all .2s cubic-bezier(.16,1,.3,1);z-index:1000}.mobile-menu-panel.active{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translateY(0)!important}.mobile-menu-panel a{font-size:12px;font-weight:800;color:var(--acid-black);text-decoration:none;text-transform:uppercase;padding:8px;border:1px solid transparent;transition:all .15s ease}.mobile-menu-panel a:hover{background:var(--acid-lime);border:1px solid #000000}}:root{--acid-lime: #ccff00;--acid-black: #000000;--acid-border: 2.5px solid #000000;--hard-shadow: 5px 5px 0px #000000}body.midi-mode{background-image:url(/img/bg1.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;background-color:transparent}.midi-page .site-footer{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;color:#0006;border-top:1px solid rgba(0,0,0,.08)}.visualizer-card{position:relative!important;width:85%;max-width:1400px;height:85vh;margin:70px auto 40px}#noteContainerWrapper{position:relative!important;overflow:hidden;width:100%;max-width:1400px;height:85vh;margin:70px auto 40px;background:#ffffffa6;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:var(--acid-border);box-shadow:var(--hard-shadow)}#noteContainer{position:relative;height:100%}#chordDisplay{position:absolute!important;top:16px!important;left:16px!important;z-index:1000!important;pointer-events:none;background:#000;color:#cf0;padding:6px 12px;font-family:monospace;font-weight:700}body.recording-mode #noteContainerWrapper{background:#fff!important;border-color:#000!important;box-shadow:8px 8px #000!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}body.recording-mode .panel{opacity:0!important;pointer-events:none!important}#playhead{position:absolute;width:2px;height:100%;background:#00e0ff;box-shadow:0 0 6px #00e0ff}.note{position:absolute;height:6px;background:#c1bfbf;border-radius:2px;opacity:.7;transition:.1s}.note.active{background-color:#000}.note.active.glow{box-shadow:0 0 8px #00e0ff,0 0 18px #00e0ff80}.particle{width:3px;height:3px;border-radius:50%;background:#00e0ff;position:absolute;pointer-events:none;animation:particleFade .6s ease-out forwards}@keyframes particleFade{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}.panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(1);z-index:100;width:400px;padding:24px;background:#e1fcfa;border:var(--acid-border);box-shadow:8px 8px 0 var(--acid-black);border-radius:0;visibility:hidden;opacity:0;font-family:system-ui,-apple-system,sans-serif}.panel:before{display:none}.panel.hidden,body.recording-mode .panel{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translate(-50%,-50%) scale(.95)!important;transition:opacity .2s ease,transform .2s ease,visibility .2s!important}.row{display:flex;align-items:center;margin-bottom:16px;width:100%}.row label{flex-shrink:0;width:80px;font-size:12px;color:#000;font-weight:900;text-transform:uppercase;letter-spacing:.5px}.row.compact-row label{width:85px}.row.compact-row label:nth-of-type(2){margin-left:20px}.row input[type=range]{flex:1;margin:0 15px;accent-color:#000}.row input[type=number]{flex:1;max-width:70px;background:#c1dad7;border:var(--acid-border);color:#000;padding:6px;border-radius:0;text-align:center;font-weight:900;outline:none}.row input[type=number]:focus{background:var(--acid-lime)}.val-num{width:24px;text-align:right;font-size:12px;font-weight:900;color:#000;font-family:monospace}.upload-line{display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;padding:12px 14px;border-radius:0;background:#000;border:var(--acid-border);color:#fff;font-size:13px;font-weight:800;text-transform:uppercase;cursor:pointer;margin-bottom:20px;box-shadow:4px 4px 0 var(--acid-lime);transition:all .15s ease}.upload-line:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--acid-lime)}#uploadText{color:var(--acid-lime)}#fileName{color:#fff;font-weight:700;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-bar{position:fixed;bottom:50px;left:50%;transform:translate(-50%);z-index:90;display:flex;align-items:center;gap:16px;padding:8px 16px;background:#fff;border:var(--acid-border);box-shadow:6px 6px #000;border-radius:0;width:auto;min-width:520px}.player-controls,.player-actions{display:flex;align-items:center;gap:8px}.player-actions button.muted{color:#ff4757;border-color:#ff4757}.progress-wrapper{display:flex;align-items:center;gap:10px;flex:1;background:#111;padding:6px 10px;border:1.5px solid #000}.time-text{font-size:11px;font-family:Courier New,monospace;font-weight:700;color:var(--acid-lime);min-width:38px;text-align:center;-webkit-user-select:none;user-select:none}.progress-bar-container{flex:1;height:16px;display:flex;align-items:center;cursor:pointer;position:relative}.progress-rail{width:100%;height:4px;background:#333;border-radius:0;position:relative}.progress-fill{width:0%;height:100%;background:var(--acid-lime);position:absolute;left:0;top:0}.progress-thumb{position:absolute;left:0%;top:50%;transform:translate(-50%,-50%);width:6px;height:12px;background:#fff;border:1px solid #000;pointer-events:none}button{background:#fff;border:2px solid #000000;color:#000;padding:6px 12px;font-weight:900;font-size:12px;cursor:pointer;box-shadow:2px 2px #000;transition:all .1s ease;border-radius:0;text-transform:uppercase}button:hover{background:var(--acid-lime);transform:translate(-1px,-1px);box-shadow:3px 3px #000}button:active{transform:translate(1px,1px);box-shadow:0 0 #000}#playBtn{background:#000;color:var(--acid-lime);border:2px solid #000000;box-shadow:2px 2px 0 var(--acid-lime);padding:6px 16px}#playBtn:hover{background:var(--acid-lime);color:#000;box-shadow:3px 3px #000}#noteContainerWrapper::-webkit-scrollbar{width:8px;height:8px}#noteContainerWrapper::-webkit-scrollbar-track{background:#e0e0e0;border-top:2px solid #000}#noteContainerWrapper::-webkit-scrollbar-thumb{background:#000;border-radius:0}#noteContainerWrapper::-webkit-scrollbar-thumb:hover{background:var(--acid-lime)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}