*{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100%;background:#05050a;overflow:hidden;font-family:system-ui,sans-serif}#side-controls-left{position:fixed;left:calc(20px + env(safe-area-inset-left,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:row;gap:20px;z-index:20;pointer-events:auto}#side-controls-right{position:fixed;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:15px;z-index:20;pointer-events:auto}@media (max-width: 768px){#side-controls-right{flex-direction:column;align-items:flex-end;gap:8px}}#now-playing{color:#fff;font-size:.9rem;font-weight:300;text-shadow:0 0 10px rgba(0,0,0,.5);background:#0000004d;padding:5px 15px;border-radius:20px;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);pointer-events:none;white-space:nowrap}@media (max-width: 768px){#now-playing{white-space:normal;text-align:right;max-width:calc(100vw - 40px);font-size:.8rem}}#thank-you-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#fff;display:flex;align-items:center;justify-content:center;z-index:100;opacity:0;pointer-events:none;transition:opacity .1s ease}#thank-you-overlay.flash{opacity:1}#thank-you-overlay.fade-out{opacity:0;transition:opacity 2s ease}.thank-you-text{color:#000;font-size:5rem;font-weight:900;letter-spacing:.5rem}.side-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;width:50px;height:50px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.2rem;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);transition:all .3s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.side-btn:hover{background:#fff3;transform:scale(1.1)}.side-btn.active{background:#fff6;border-color:#fff}#visualizer-container{width:100vw;height:100vh;margin:0;display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden;position:absolute;top:0;left:0;z-index:0}#scene{display:block;width:100%;height:100%}#controls{position:fixed;right:16px;bottom:16px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;background:#0009;padding:8px 16px;border-radius:8px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:10;max-width:90vw}.control-group{display:flex;align-items:center;gap:6px}#controls button{cursor:pointer}#controls button:disabled{cursor:not-allowed;opacity:.5}#controls select{cursor:pointer}#controls label{color:#fff;font-size:.8rem;white-space:nowrap}#controls input[type=range]{cursor:pointer}#waveform-container{width:150px;height:24px;background:#ffffff0d;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden}#waveform{width:100%;height:100%;display:block}