*,*:before,*:after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;overflow:hidden;background:#080812;font-family:Segoe UI,system-ui,-apple-system,sans-serif;color:#eee;touch-action:none}#gpu-canvas{display:block;width:100vw;height:100vh;position:fixed;top:0;left:0}#overlay{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#040412f2;z-index:100;cursor:pointer;transition:opacity .6s,visibility .6s}#overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}#overlay h1{font-size:clamp(1.5rem,6vw,3rem);font-weight:300;letter-spacing:.15em;text-transform:uppercase;margin-bottom:.5rem;background:linear-gradient(135deg,#7c3aed,#06b6d4,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}#overlay p{opacity:.5;margin-bottom:2rem;font-size:clamp(.7rem,2vw,.9rem)}#overlay .pulse{width:clamp(50px,10vw,80px);height:clamp(50px,10vw,80px);border-radius:50%;border:2px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:.4}50%{transform:scale(1.15);opacity:.9}}#hud{position:fixed;top:0;left:0;right:0;padding:clamp(10px,2vw,16px) clamp(12px,2vw,20px);display:flex;justify-content:space-between;pointer-events:none;z-index:50;font-size:clamp(10px,1.5vw,12px)}#hud.hidden{display:none}.hud-left,.hud-right{display:flex;gap:16px;opacity:.5;font-variant-numeric:tabular-nums;letter-spacing:.05em;text-shadow:0 1px 4px rgba(0,0,0,.6)}#now-playing{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;z-index:45;opacity:0;transition:opacity .5s}#now-playing.visible{opacity:.85}#now-playing img{width:clamp(60px,12vw,120px);height:clamp(60px,12vw,120px);border-radius:8px;margin-bottom:8px;box-shadow:0 0 30px #00000080}.track-name{font-size:clamp(11px,1.5vw,14px);font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.8)}.artist-name{font-size:clamp(9px,1.2vw,12px);opacity:.6;text-shadow:0 1px 3px rgba(0,0,0,.8)}#controls{position:fixed;bottom:clamp(10px,2vw,20px);left:50%;transform:translate(-50%);display:flex;gap:clamp(6px,1vw,10px);z-index:50;flex-wrap:wrap;justify-content:center}#controls.hidden{display:none}#controls button{background:#ffffff0f;border:1px solid rgba(255,255,255,.1);color:#ccc;padding:clamp(6px,1.2vw,8px) clamp(10px,2vw,14px);border-radius:8px;cursor:pointer;font-size:clamp(10px,1.5vw,13px);font-family:inherit;transition:all .2s;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);white-space:nowrap}#controls button:hover{background:#ffffff1f;color:#fff;border-color:#fff3}#controls button.spotify-btn{background:#1ed7601f;border-color:#1ed76040;color:#1ed760}#controls button.spotify-btn:hover{background:#1ed76033}#controls button.spotify-btn.connected{background:#1ed76033;border-color:#1ed760}.panel{position:fixed;top:0;bottom:0;width:min(380px,90vw);background:#080814eb;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-right:1px solid rgba(255,255,255,.06);z-index:80;overflow-y:auto;transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}.panel.hidden{transform:translate(-100%)}#spotify-panel{left:0;transform:translate(0)}#spotify-panel.hidden{transform:translate(-100%)}#scene-selector{left:0;transform:translate(0)}#scene-selector.hidden{transform:translate(-100%)}#settings-panel{right:0;border-right:none;border-left:1px solid rgba(255,255,255,.06)}#settings-panel.hidden{transform:translate(100%)}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.06)}.panel-header h2{font-weight:400;font-size:1rem;letter-spacing:.05em}.panel-header button{background:none;border:none;color:#888;font-size:1.2rem;cursor:pointer;padding:4px 8px;border-radius:4px}.panel-header button:hover{color:#fff;background:#ffffff0f}.panel-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.04);padding:0 16px;flex-shrink:0}.panel-tabs button.tab{background:none;border:none;color:#666;padding:10px 14px;cursor:pointer;font-size:.8rem;font-family:inherit;border-bottom:2px solid transparent;transition:all .2s}.panel-tabs button.tab.active{color:#fff;border-bottom-color:#7c3aed}.panel-search{padding:12px 16px;flex-shrink:0}.panel-search.hidden{display:none}#spotify-search{width:100%;padding:8px 12px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#fff;font-family:inherit;font-size:.85rem}#spotify-search::placeholder{color:#555}#spotify-search:focus{outline:none;border-color:#7c3aed66}.panel-content{flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:8px}.spotify-item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:6px;cursor:pointer;transition:background .15s}.spotify-item:hover{background:#ffffff0d}.spotify-item img{width:44px;height:44px;border-radius:4px;object-fit:cover;flex-shrink:0}.spotify-item .item-info{flex:1;min-width:0}.spotify-item .item-name{font-size:.85rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.spotify-item .item-sub{font-size:.7rem;opacity:.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scene-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px 16px}.scene-card{padding:14px 10px;background:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:8px;cursor:pointer;text-align:center;font-size:.75rem;transition:all .2s}.scene-card:hover{background:#ffffff0f}.scene-card.active{background:#7c3aed26;border-color:#7c3aed66}.scene-card .scene-icon{font-size:1.4rem;margin-bottom:4px}#dj-indicator{position:fixed;top:40px;right:16px;display:flex;align-items:center;gap:6px;font-size:10px;opacity:.5;z-index:50;letter-spacing:.05em;background:#0000004d;padding:4px 10px;border-radius:12px}#dj-indicator.hidden{display:none}.dj-dot{width:6px;height:6px;border-radius:50%;background:#7c3aed;animation:dj-blink 1.5s ease-in-out infinite}@keyframes dj-blink{0%,to{opacity:.4}50%{opacity:1}}.settings-content{padding:16px 20px;display:flex;flex-direction:column;gap:16px}.setting{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;cursor:pointer}.setting input[type=range]{width:100px;accent-color:#7c3aed}.setting input[type=checkbox]{accent-color:#7c3aed;width:16px;height:16px}#gpu-fallback{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#080812;z-index:200;text-align:center;padding:20px}#gpu-fallback.hidden{display:none}#gpu-fallback h2{font-weight:300;font-size:1.5rem}#gpu-fallback p{opacity:.5;max-width:400px}#gpu-fallback a{color:#7c3aed;text-decoration:none;padding:10px 24px;border:1px solid rgba(124,58,237,.3);border-radius:8px;transition:all .2s}#gpu-fallback a:hover{background:#7c3aed1a}@media(max-width:480px){#controls{gap:4px;bottom:8px}#controls button{padding:5px 8px;font-size:9px}#hud{padding:8px 10px}.hud-left,.hud-right{font-size:9px;gap:8px}.panel{width:100vw}.scene-grid{grid-template-columns:repeat(2,1fr)}}@media(orientation:landscape)and (max-height:500px){#controls{bottom:2px}#controls button{padding:3px 6px;font-size:8px}}.panel::-webkit-scrollbar{width:4px}.panel::-webkit-scrollbar-track{background:transparent}.panel::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:2px}.hidden{display:none!important}