*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0d0d0f;--surface: rgba(24, 24, 28, .75);--surface-hover: rgba(32, 32, 38, .85);--surface-active: rgba(40, 40, 48, .9);--border: rgba(255, 255, 255, .08);--border-hover: rgba(255, 255, 255, .12);--accent: #4d7cff;--accent-hover: #6b94ff;--accent-glow: rgba(77, 124, 255, .4);--accent-bright: rgba(77, 124, 255, .15);--purple: #9b6dff;--purple-glow: rgba(155, 109, 255, .3);--text: #ffffff;--text-secondary: rgba(255, 255, 255, .7);--text-tertiary: rgba(255, 255, 255, .5);--radius: 10px;--radius-lg: 12px;--radius-sm: 6px}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,system-ui,sans-serif;color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#canvas{position:fixed;top:0;right:0;bottom:0;left:0;width:100%!important;height:100%!important}#ui{position:fixed;top:0;left:0;width:300px;height:100vh;padding:20px;background:var(--surface);-webkit-backdrop-filter:blur(40px) saturate(1.5);backdrop-filter:blur(40px) saturate(1.5);border-right:1px solid var(--border);overflow-y:auto;display:flex;flex-direction:column;gap:16px;z-index:10;transition:transform .3s cubic-bezier(.4,0,.2,1)}#ui.collapsed{transform:translate(-300px)}#panel-toggle{position:fixed;top:50%;left:300px;transform:translateY(-50%);width:28px;height:64px;background:var(--surface);-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);border:1px solid var(--border);border-left:none;border-radius:0 var(--radius) var(--radius) 0;color:var(--text-tertiary);font-size:16px;cursor:pointer;z-index:11;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.4,0,.2,1);padding:0}#panel-toggle:hover{color:var(--text);background:var(--surface-hover);border-color:var(--border-hover)}#panel-toggle.collapsed{left:0}#ui h1{font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--text);padding:0 0 16px;margin:0;border-bottom:1px solid var(--border)}section{display:flex;flex-direction:column;gap:10px}.section-title{font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:2px}#preset-grid{display:flex;flex-direction:column;gap:8px}.preset-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid transparent;border-radius:var(--radius);background:var(--surface);cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative}.preset-card:hover{background:var(--surface-hover);border-color:var(--border-hover)}.preset-card.active{background:var(--accent);border-color:var(--accent);box-shadow:0 0 24px var(--accent-glow),0 4px 12px #0000004d}.preset-card.active .card-label,.preset-card.active .card-genre{color:#fff}.card-icon{font-size:13px;font-weight:600;color:var(--text-secondary);font-family:SF Mono,monospace}.preset-card.active .card-icon{color:#fff}.card-label{font-size:14px;font-weight:500;flex:1;color:var(--text)}.card-genre{font-size:11px;color:var(--text-tertiary);white-space:nowrap}#library-list{display:flex;flex-direction:column;gap:6px}.library-track{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid transparent;border-radius:var(--radius);background:var(--surface);cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1)}.library-track:hover{background:var(--surface-hover);border-color:var(--border-hover)}.library-track.active{background:var(--accent);border-color:var(--accent);box-shadow:0 0 24px var(--accent-glow),0 4px 12px #0000004d}.library-icon{font-size:13px;color:var(--text-secondary)}.library-track.active .library-icon,.library-track.active .library-label{color:#fff}.library-label{font-size:13px;font-weight:500;color:var(--text);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.upload-row{display:flex;flex-direction:column;gap:8px}#btn-upload{padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);cursor:pointer;font-size:13px;font-weight:500;transition:all .25s cubic-bezier(.4,0,.2,1)}#btn-upload:hover{background:var(--surface-hover);border-color:var(--border-hover)}#upload-label{font-size:12px;color:var(--text-secondary);min-height:1em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.controls-row{display:flex;align-items:center;gap:8px}#btn-play{flex:1;padding:12px;border:1px solid transparent;border-radius:var(--radius);background:var(--surface);color:var(--text);font-size:14px;font-weight:500;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1)}#btn-play:hover{background:var(--surface-hover);border-color:var(--border-hover)}#btn-play.playing{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 24px var(--accent-glow),0 4px 12px #0000004d}.slider-row{display:flex;flex-direction:column;gap:8px}.slider-label-row{display:flex;justify-content:space-between;font-size:12px;color:var(--text-secondary);font-weight:500}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;background:var(--surface);border-radius:3px;outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#fff;border-radius:50%;cursor:pointer;box-shadow:0 2px 8px #0000004d;transition:all .2s cubic-bezier(.4,0,.2,1)}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 0 16px var(--accent-glow),0 2px 12px #0006}.vu-meter{display:flex;flex-direction:column;gap:6px}.vu-row{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--text-secondary);font-weight:500}.vu-row span{width:40px;text-align:right;text-transform:uppercase;font-size:10px}.vu-track{flex:1;height:6px;background:var(--surface);border-radius:3px;overflow:hidden;position:relative}.vu-bar{height:100%;width:0%;transition:width .05s ease-out;border-radius:3px}#vu-sub,#vu-bass{background:linear-gradient(90deg,var(--accent),var(--accent-hover))}#vu-mid{background:linear-gradient(90deg,var(--accent),var(--purple))}#vu-presence{background:linear-gradient(90deg,var(--purple),#c084fc)}#vu-high{background:linear-gradient(90deg,var(--purple),#e879f9)}#vu-centroid{background:linear-gradient(90deg,var(--accent),var(--purple))}#vu-flux{background:linear-gradient(90deg,var(--purple),#e879f9)}#btn-particles{padding:10px 14px;border:1px solid transparent;border-radius:var(--radius);background:var(--surface);color:var(--text);font-size:13px;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);font-weight:500}#btn-particles:hover{background:var(--surface-hover);border-color:var(--border-hover)}.tip{font-size:12px;color:var(--text-tertiary);line-height:1.6;margin-top:auto;padding-top:16px;border-top:1px solid var(--border)}.tip strong{color:var(--text-secondary);font-weight:500}#ui::-webkit-scrollbar{width:8px}#ui::-webkit-scrollbar-track{background:transparent}#ui::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}#ui::-webkit-scrollbar-thumb:hover{background:#ffffff4d}