*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #08080c;--bg-surface: #0e0e14;--text: #c8c8d4;--text-dim: #5a5a6e;--text-bright: #e8e8f0;--accent: #7eb8ff;--accent-dim: rgba(126, 184, 255, .12);--glow: rgba(126, 184, 255, .08);--glow-strong: rgba(126, 184, 255, .22);--warm: rgba(255, 180, 120, .06);--x: 50vw;--y: 50vh;--contact-alpha: 0;--core-scale: .8;--halo-scale: .7;--ring-scale: .78;--font: "DM Sans", -apple-system, sans-serif;--mono: "JetBrains Mono", monospace;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;overscroll-behavior:none}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font)}#fx{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}#ambientCore{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:0}#ambientGlow{width:70vmax;height:70vmax;border-radius:50%;background:radial-gradient(circle,rgba(126,184,255,.03) 0%,rgba(80,120,200,.015) 40%,transparent 70%);filter:blur(60px);opacity:0;transition:opacity .4s,transform .4s;will-change:transform,opacity}#contact{position:fixed;left:var(--x);top:var(--y);transform:translate(-50%,-50%);pointer-events:none;z-index:2;opacity:var(--contact-alpha);transition:opacity .2s}.contact-layer{position:absolute;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);will-change:transform}#core{width:12px;height:12px;background:radial-gradient(circle,rgba(200,220,255,.9),rgba(126,184,255,.4) 60%,transparent 100%);transform:translate(-50%,-50%) scale(var(--core-scale))}#halo{width:120px;height:120px;background:radial-gradient(circle,rgba(126,184,255,.06) 0%,rgba(100,160,240,.02) 50%,transparent 100%);transform:translate(-50%,-50%) scale(var(--halo-scale))}#ring{width:48px;height:48px;border:1px solid rgba(126,184,255,.12);transform:translate(-50%,-50%) scale(var(--ring-scale))}#veil{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at center,transparent 30%,var(--bg) 100%);pointer-events:none;z-index:3;opacity:.6}#welcome{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:20;background:var(--bg);transition:opacity .5s ease,visibility .5s}#welcome.hide{opacity:0;visibility:hidden;pointer-events:none}.welcome-inner{text-align:center;max-width:400px;padding:2rem}.welcome-logo{font-family:var(--font);font-size:2.4rem;font-weight:300;letter-spacing:.18em;color:var(--text-bright);margin-bottom:.25rem}.welcome-sub{font-size:.72rem;font-weight:400;letter-spacing:.32em;text-transform:uppercase;color:var(--text-dim);margin-bottom:3rem}.welcome-action{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:1rem 1.8rem;border:1px solid rgba(126,184,255,.15);border-radius:12px;color:var(--accent);font-size:.85rem;font-weight:400;cursor:pointer;transition:all .3s ease;background:#7eb8ff08}.welcome-action:hover{background:#7eb8ff0f;border-color:#7eb8ff4d}.welcome-action:active{transform:scale(.97)}.welcome-action svg{opacity:.7;flex-shrink:0}.welcome-hint{margin-top:1.2rem;font-family:var(--mono);font-size:.65rem;font-weight:300;letter-spacing:.1em;color:var(--text-dim);opacity:.5}#dropOverlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;align-items:center;justify-content:center;background:#08080ceb;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}#dropOverlay.show{opacity:1;visibility:visible}.drop-inner{display:flex;flex-direction:column;align-items:center;gap:1rem;color:var(--accent);font-size:1rem;font-weight:400;letter-spacing:.08em}.drop-inner svg{opacity:.6}#touchHint{position:fixed;bottom:90px;left:50%;transform:translate(-50%);z-index:10;opacity:0;transition:opacity .6s ease;pointer-events:none}#touchHint.show{opacity:1}#touchHint.fade{opacity:0}.hint-content{display:flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:400;color:var(--text-dim);letter-spacing:.04em}.hint-icon{color:var(--accent);font-size:.6rem;opacity:.6;animation:hintPulse 2s ease-in-out infinite}@keyframes hintPulse{0%,to{opacity:.3}50%{opacity:.8}}#bottomBar{position:fixed;bottom:0;left:0;right:0;z-index:12;display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.6rem 1rem calc(env(safe-area-inset-bottom,8px) + .6rem);background:linear-gradient(to top,rgba(8,8,12,.9) 0%,transparent 100%);pointer-events:none;opacity:0;transition:opacity .5s ease}#bottomBar.show{opacity:1;pointer-events:auto}#presetBar{display:flex;gap:.35rem}.preset-btn{background:#ffffff0a;border:1px solid rgba(255,255,255,.06);border-radius:20px;padding:.35rem .9rem;color:var(--text-dim);font-family:var(--font);font-size:.7rem;font-weight:400;letter-spacing:.06em;cursor:pointer;transition:all .25s ease;-webkit-tap-highlight-color:transparent}.preset-btn:hover{background:#ffffff0f;color:var(--text)}.preset-btn.active{background:#7eb8ff1a;border-color:#7eb8ff33;color:var(--accent)}#trackInfo{display:flex;align-items:center;gap:.5rem}#trackName{font-family:var(--mono);font-size:.6rem;font-weight:300;color:var(--text-dim);opacity:.5;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#loadNewBtn{background:none;border:1px solid rgba(255,255,255,.08);border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);cursor:pointer;transition:all .2s;-webkit-tap-highlight-color:transparent}#loadNewBtn:hover{border-color:#7eb8ff4d;color:var(--accent)}#fileInput{position:fixed;opacity:0;pointer-events:none;width:0;height:0}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:256px}@media (max-width: 480px){.welcome-logo{font-size:1.8rem}.welcome-action{padding:.8rem 1.2rem;font-size:.8rem}.preset-btn{padding:.3rem .7rem;font-size:.65rem}}