html{overflow:hidden;width:100vw;height:100vh;position:fixed}body{margin:0;font-family:Courier New,Courier,monospace;background-color:#ffefbc;overflow:hidden;width:100vw;height:100vh;position:fixed}#root{width:100vw;height:100vh;overflow:hidden;position:fixed}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Courier New,Courier,monospace;overflow:hidden;background-color:#ffefbc;width:100vw;height:100vh;position:fixed}.app{width:100vw;height:100vh;background-color:#ffefbc;display:flex;flex-direction:column;position:fixed;top:0;left:0;overflow:hidden}.waveform-canvas{position:absolute;top:0;left:0;display:block;width:100vw;height:100vh;image-rendering:pixelated;image-rendering:crisp-edges}.title-link{position:fixed;top:30px;left:30px;color:#5d2e2e;font-family:Courier New,Courier,monospace;font-size:18px;font-weight:700;text-decoration:none;text-shadow:0 0 10px #5D2E2E;letter-spacing:3px;padding:10px 15px;background:#ffefbcb3;border:2px solid #5D2E2E;box-shadow:0 0 20px #5d2e2e4d;transition:all .3s ease;z-index:20}.title-link:hover{background:#5d2e2e1a;box-shadow:0 0 30px #5d2e2e80;text-shadow:0 0 15px #5D2E2E}.track-selector{position:fixed;top:30px;right:30px;display:flex;gap:10px;padding:10px 15px;background:#ffefbcb3;border:2px solid #5D2E2E;box-shadow:0 0 20px #5d2e2e4d;z-index:20}.track-button{background-color:transparent;color:#5d2e2e;border:2px solid #5D2E2E;padding:8px 16px;font-size:14px;font-family:Courier New,Courier,monospace;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease;text-shadow:0 0 5px #5D2E2E;letter-spacing:2px;min-width:45px}.track-button:hover{background-color:#5d2e2e;color:#ffefbc;box-shadow:0 0 15px #5d2e2e80;text-shadow:none}.track-button.active{background-color:#5d2e2e;color:#ffefbc;box-shadow:0 0 20px #5d2e2e99;text-shadow:none;transition:none}.track-button:active{transform:scale(.95)}.bottom-controls{position:fixed;bottom:30px;left:30px;right:370px;display:flex;align-items:center;gap:15px;padding:15px 20px;background:#ffefbcb3;border:2px solid #5D2E2E;box-shadow:0 0 20px #5d2e2e4d;z-index:20;overflow:hidden;max-width:calc(100vw - 400px)}.waveform-full{flex:1;display:flex;align-items:center;height:90px;gap:1px;position:relative;cursor:pointer;overflow:hidden;min-width:0}.waveform-full:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#5d2e2e26;z-index:0}.full-bar{flex:1 1 0;background-color:#9d6e6e;box-shadow:0 0 3px #5d2e2e4d;position:relative;z-index:1;transition:background-color .2s ease;cursor:pointer;min-width:3px;max-width:100%}.full-bar.played{background-color:#5d2e2e;box-shadow:0 0 5px #5d2e2e99}.full-bar:hover{background-color:#7d4e4e}.volume-control{position:fixed;bottom:30px;right:30px;display:flex;align-items:center;gap:10px;padding:10px 15px;background:#ffefbcb3;border:2px solid #5D2E2E;box-shadow:0 0 20px #5d2e2e4d;z-index:20}.volume-control label{color:#5d2e2e;font-family:Courier New,Courier,monospace;font-size:14px;text-shadow:0 0 5px #5D2E2E;letter-spacing:2px}.volume-slider{width:100px;height:6px;-webkit-appearance:none;appearance:none;background:#d9c9a3;outline:none;border:1px solid #5D2E2E;cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:#5d2e2e;cursor:pointer;box-shadow:0 0 10px #5d2e2e}.volume-slider::-moz-range-thumb{width:16px;height:16px;background:#5d2e2e;cursor:pointer;border:none;box-shadow:0 0 10px #5d2e2e}.volume-slider::-webkit-slider-thumb:hover{box-shadow:0 0 15px #5d2e2e}.volume-slider::-moz-range-thumb:hover{box-shadow:0 0 15px #5d2e2e}.volume-value{color:#5d2e2e;font-family:Courier New,Courier,monospace;font-size:12px;text-shadow:0 0 5px #5D2E2E;min-width:40px;text-align:right}.time-display{color:#5d2e2e;font-family:Courier New,Courier,monospace;font-size:14px;text-shadow:0 0 5px #5D2E2E;white-space:nowrap;min-width:120px;text-align:right}.play-button{position:fixed;bottom:30px;left:30px;background-color:transparent;color:#5d2e2e;border:2px solid #5D2E2E;padding:15px 30px;font-size:18px;font-family:Courier New,Courier,monospace;cursor:pointer;transition:all .3s ease;letter-spacing:2px;text-shadow:0 0 10px #5D2E2E;box-shadow:0 0 20px #5d2e2e4d;z-index:20}.play-button:hover{background-color:#5d2e2e;color:#ffefbc;box-shadow:0 0 30px #5d2e2e99;text-shadow:none}.play-button:active{transform:scale(.95)}.control-button{background-color:transparent;color:#5d2e2e;border:2px solid #5D2E2E;padding:10px 20px;font-size:16px;font-family:Courier New,Courier,monospace;cursor:pointer;transition:all .3s ease;min-width:60px;text-shadow:0 0 5px #5D2E2E;flex-shrink:0}.control-button:hover{background-color:#5d2e2e;color:#ffefbc;text-shadow:none}.control-button:active{transform:scale(.95)}@media(max-width:768px){.title-link{top:20px;left:20px;font-size:16px;padding:8px 12px;letter-spacing:2px}.artist-name{display:none}.track-selector{top:20px;right:20px;padding:8px 12px;gap:8px;flex-direction:column}.track-button{padding:6px 12px;font-size:12px;min-width:40px}.play-button{bottom:20px;left:20px;padding:12px 24px;font-size:16px}.bottom-controls{bottom:20px;left:20px;right:20px;padding:12px 15px;gap:12px;max-width:calc(100vw - 40px)}.control-button{padding:8px 16px;font-size:14px;min-width:50px}.waveform-full{display:none}.time-display{font-size:12px;min-width:100px}.volume-control{bottom:20px;right:20px;padding:8px 12px}.volume-control label{font-size:12px}.volume-slider{width:80px}.volume-value{font-size:11px;min-width:35px}}@media(max-width:480px){.title-link{top:15px;left:15px;font-size:14px;padding:6px 10px;letter-spacing:1px}.track-selector{top:15px;right:15px;padding:6px 10px;gap:6px;flex-direction:column}.track-button{padding:5px 10px;font-size:11px;min-width:35px}.play-button{bottom:15px;left:15px;padding:10px 20px;font-size:14px}.bottom-controls{bottom:15px;left:15px;right:15px;padding:10px 12px;gap:10px;max-width:calc(100vw - 30px)}.control-button{padding:6px 12px;font-size:12px;min-width:45px}.waveform-full{display:none}.time-display{font-size:11px;min-width:90px}.volume-control{bottom:15px;right:15px;padding:6px 10px;gap:8px}.volume-control label{font-size:11px}.volume-slider{width:60px}.volume-value{font-size:10px;min-width:30px}}@media(hover:none)and (pointer:coarse){.play-button,.control-button{min-height:44px;min-width:44px}.progress-bar{height:20px;padding:5px 0}.progress-fill{height:10px;margin:5px 0}.volume-slider{height:20px}.volume-slider::-webkit-slider-thumb{width:20px;height:20px}.volume-slider::-moz-range-thumb{width:20px;height:20px}}