@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";:root{--dark-bg: #09090b;--card-bg: rgba(24, 24, 27, .6);--primary: #8b5cf6;--secondary: #ec4899;--accent: #22d3ee;--text-main: #ffffff;--text-dim: #a1a1aa;--music-pulse: 1}*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none}body{background-color:var(--dark-bg);color:var(--text-main);font-family:Outfit,Inter,sans-serif;overflow:hidden;height:100vh}.app-container{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;position:relative;background:radial-gradient(circle at center,#1e1b4b 0%,#020617 100%)}.bg-orb{position:absolute;border-radius:50%;filter:blur(80px);z-index:0;opacity:.5;transform:scale(var(--music-pulse));transition:transform .1s linear}.orb-1{width:500px;height:500px;background:var(--primary);top:-10%;left:-10%}.orb-2{width:400px;height:400px;background:var(--secondary);bottom:-10%;right:-10%}.orb-3{width:300px;height:300px;background:var(--accent);top:40%;left:40%;opacity:.3}.player-card{width:900px;max-width:95vw;height:650px;max-height:90vh;background:var(--card-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:32px;box-shadow:0 30px 60px #0009;display:flex;flex-direction:column;overflow:hidden;z-index:10}.viz-screen{flex:1.5;position:relative;background:linear-gradient(to bottom,rgba(0,0,0,.2),rgba(0,0,0,0));display:flex;align-items:center;justify-content:center}.main-canvas{width:100%;height:100%;display:block}.empty-placeholder{position:absolute;display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--text-dim);opacity:.7}.player-body{flex:1;padding:24px 40px;display:flex;flex-direction:column;justify-content:flex-end;gap:20px;background:linear-gradient(to top,rgba(0,0,0,.4),transparent)}.track-meta{text-align:center;margin-bottom:10px}.track-title{font-size:1.8rem;font-weight:600;color:#fff;margin-bottom:8px;letter-spacing:-.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 10px rgba(0,0,0,.3)}.track-badges{display:flex;justify-content:center;gap:8px}.badge{font-size:.7rem;background:rgba(255,255,255,.1);padding:2px 8px;border-radius:4px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px}.progress-section{width:100%}.time-labels{display:flex;justify-content:space-between;font-size:.8rem;color:var(--text-dim);margin-bottom:8px;font-variant-numeric:tabular-nums}.seek-slider{-webkit-appearance:none;width:100%;height:6px;background:rgba(255,255,255,.1);border-radius:3px;outline:none;cursor:pointer;position:relative}.seek-slider::-webkit-slider-runnable-track{height:6px;background:linear-gradient(to right,var(--primary),var(--secondary) var(--progress),rgba(255,255,255,.1) var(--progress));border-radius:3px}.seek-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:white;border-radius:50%;margin-top:-6px;box-shadow:0 2px 10px #0000004d;transition:transform .2s}.seek-slider:hover::-webkit-slider-thumb{transform:scale(1.3)}.controls-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px}.side-controls{flex:1;display:flex;align-items:center;gap:16px}.side-controls.right{justify-content:flex-end}.icon-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:12px;color:var(--text-dim);cursor:pointer;transition:all .2s}.icon-btn:hover{background:rgba(255,255,255,.1);color:#fff}.viz-switcher{display:flex;background:rgba(0,0,0,.3);border-radius:20px;padding:4px}.mini-tag{background:transparent;border:none;color:var(--text-dim);padding:6px 12px;font-size:.75rem;border-radius:16px;cursor:pointer;transition:all .2s}.mini-tag.active{background:rgba(255,255,255,.15);color:#fff;font-weight:600}.play-fab{width:72px;height:72px;border-radius:50%;background:white;color:#000;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 0 30px #fff3;transition:all .2s ease}.play-fab:hover:not(.disabled){transform:scale(1.1);box-shadow:0 0 40px #fff6}.play-fab:active{transform:scale(.95)}.play-fab.disabled{background:#3f3f46;color:#71717a;box-shadow:none;cursor:not-allowed}.volume-wrapper{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);padding:8px 12px;border-radius:20px;color:var(--text-dim)}.volume-slider{-webkit-appearance:none;width:80px;height:4px;background:rgba(255,255,255,.2);border-radius:2px;outline:none}.volume-slider::-webkit-slider-runnable-track{height:4px;background:linear-gradient(to right,white var(--vol),transparent var(--vol));border-radius:2px}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:0;height:0}@media (max-width: 768px){.player-card{width:100vw;height:100vh;border-radius:0;border:none}.player-body{padding:20px}.controls-row{flex-direction:column;gap:20px}.side-controls{width:100%;justify-content:center!important}.viz-screen{flex:2}}:root{font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#fff;background-color:#000;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:#000000;overflow-x:hidden}#root{width:100%;min-height:100vh}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#111111}::-webkit-scrollbar-thumb{background:#333333;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#444444}::selection{background:rgba(224,242,254,.3);color:#fff}*:focus{outline:2px solid rgba(224,242,254,.5);outline-offset:2px}*:focus:not(:focus-visible){outline:none}*{transition:background-color .3s ease,border-color .3s ease,opacity .3s ease}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}.loading{animation:pulse 2s ease-in-out infinite}@media (max-width: 768px){:root{font-size:14px}}@media (max-width: 480px){:root{font-size:12px}}