*{margin:0;padding:0;box-sizing:border-box}body{font-family:Courier New,monospace;background:#000;color:#fff;min-height:100vh;cursor:default;overflow-x:hidden;position:relative}#oscilloscope{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:1800px;height:1000px;max-width:100vw;max-height:100vh;background:#000c;z-index:0;display:block}.container{position:relative;z-index:1;text-align:center;-webkit-user-select:none;user-select:none;max-width:800px;width:100%;margin:0 auto;padding:15px;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center}h1{font-size:2.5em;margin-bottom:.3em;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.tabs{display:flex;gap:10px;margin-bottom:1em;justify-content:center}.tab{font-family:Courier New,monospace;font-size:1em;padding:.7em 1.5em;background:#0009;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:5px;cursor:pointer;transition:background .2s}.tab:hover{background:#000c}.tab.active{background:#ffffff4d;border-color:#fff9;font-weight:700}.instructions{font-size:1em;margin-bottom:1em;opacity:.9}#params{font-size:1.3em;font-weight:700;padding:.7em 1.5em;background:#000000b3;border-radius:10px;min-width:400px;box-shadow:0 4px 6px #0006}.controls{margin-top:1em;padding:1em;background:#000000b3;border-radius:10px;box-shadow:0 4px 6px #0006;text-align:left}.control-group{margin-bottom:.6em;display:flex;align-items:center;gap:10px}.control-group:last-child{margin-bottom:0}.control-label{flex:0 0 200px;font-size:.9em;opacity:.9}.control-input{flex:1;font-family:Courier New,monospace;font-size:.9em;padding:.3em .5em;background:#ffffffe6;color:#333;border:1px solid rgba(255,255,255,.3);border-radius:5px;resize:vertical;min-height:30px}select.control-input{cursor:pointer}textarea.control-input{min-height:30px;max-height:80px}.buttons{margin-top:1em;display:flex;gap:10px;justify-content:center}.button{font-family:Courier New,monospace;font-size:.9em;padding:.5em 1.5em;background:#0009;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:5px;cursor:pointer;transition:background .2s}.button:hover{background:#000c}.info{margin-top:1em;font-size:.85em;opacity:.7}.status{margin-top:.5em;font-size:.75em;opacity:.5}.oscilloscope-panels{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:20px;gap:10px}.oscilloscope-panel{background:#000c;border:2px solid rgba(0,136,255,.5);border-radius:4px;padding:8px;box-shadow:0 0 10px #0088ff4d}.frame-buffer-panel{margin-top:10px}.comparison-panels{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.panel-item{display:flex;flex-direction:column;align-items:center;gap:5px}.piano-panel{margin-bottom:10px}.panel-label{font-size:12px;color:#aaa;text-align:center;font-family:Courier New,monospace;margin-bottom:5px}.oscilloscope-panels canvas{background-color:#000;border-radius:2px}.oscilloscope-debug-overlay{position:fixed;top:10px;right:10px;z-index:100;background:#000c;border:2px solid rgba(0,255,0,.5);border-radius:4px;padding:10px;font-family:Courier New,monospace;font-size:14px;box-shadow:0 0 10px #00ff004d;pointer-events:none}.debug-item{display:flex;justify-content:space-between;gap:10px;margin-bottom:5px}.debug-item:last-child{margin-bottom:0}.debug-label{color:#aaa;font-weight:700}.debug-value{color:#0f0;min-width:100px;text-align:right}.oscilloscope-container{position:fixed;top:150px;right:10px;max-width:320px;z-index:1000;pointer-events:none;display:flex;flex-direction:column;gap:.5rem}.oscilloscope-error{pointer-events:auto;font-family:Courier New,monospace;font-size:.8em;color:#fdd;background:#8b0000e6;border:1px solid rgba(255,200,200,.8);border-radius:4px;padding:.5em .75em;box-shadow:0 2px 6px #0006}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.realtime-analysis-container{position:fixed;top:10px;left:10px;z-index:50;display:flex;flex-direction:column;gap:10px;pointer-events:none}.analysis-panel{background:#000000e6;border:2px solid rgba(0,255,0,.5);border-radius:4px;padding:8px;box-shadow:0 0 10px #00ff004d}.analysis-panel canvas{display:block}.full-waveform-container{position:fixed;bottom:10px;left:10px;right:10px;z-index:50;pointer-events:none}.full-waveform-panel{background:#000000e6;border:2px solid rgba(255,136,0,.5);border-radius:4px;padding:8px;box-shadow:0 0 10px #ff88004d}.full-waveform-panel canvas{display:block;width:100%}.repo-link{position:fixed;bottom:16px;left:16px;z-index:120;padding:8px 12px;font-family:Courier New,monospace;font-size:.9em;color:#ffffffd9;background:#0000008c;border:1px solid rgba(255,255,255,.25);border-radius:6px;text-decoration:none;box-shadow:0 4px 10px #0006;transition:background .2s,border-color .2s,color .2s}.repo-link:hover{background:#ffffff26;border-color:#ffffff73;color:#fff}.repo-link:focus-visible{background:#ffffff26;border-color:#ffffff73;color:#fff;outline:2px solid rgba(255,255,255,.9);outline-offset:2px}