@import "https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,500;6..96,700&family=Sora:wght@300;400;500;600&display=swap";body{margin:0}:root{--ink:#120e0c;--ink-soft:#2a211c;--wood:#3a2818;--wood-light:#5a3d24;--amber:#d4a35c;--amber-bright:#f0c57a;--accent:#d4a35c;--accent-soft:#f0c57a;--accent-deep:#8a5a28;--glow:#d4a35c59;--wash:#d4a35c29;--theme-on-accent:#120e0c;--cream:#e8dcc8;--fog:#e8dcc88c;--danger:#c45c4a;--radius:18px;--font-display:"Bodoni Moda", Georgia, serif;--font-ui:"Sora", system-ui, sans-serif;--tilt-x:0deg;--tilt-y:0deg;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html,body,#root{min-height:100%}body{font-family:var(--font-ui);color:var(--cream);-webkit-font-smoothing:antialiased;background:#0a0807;margin:0;overflow-x:hidden}button,input{font:inherit}a{color:var(--accent-soft)}.app{isolation:isolate;flex-direction:column;min-height:100vh;padding:1.25rem clamp(1rem,3vw,2.5rem) 2rem;display:flex;position:relative}.ambient{z-index:-1;pointer-events:none;background:#0a0807;transition:background 1.2s;position:fixed;inset:0;overflow:hidden}.ambient-wash{background:radial-gradient(ellipse 70% 55% at 22% 28%, var(--wash), transparent 58%), radial-gradient(ellipse 55% 45% at 82% 72%, color-mix(in srgb, var(--accent-deep) 45%, transparent), transparent 55%), linear-gradient(160deg, #0c0a09 0%, #15100c 48%, #0b0908 100%);transition:background 1.1s;position:absolute;inset:0}.ambient-cover{filter:blur(72px)saturate(1.35)brightness(.45);opacity:.55;background-position:50%;background-size:cover;transition:opacity 1s,filter 1s,background-image .8s;animation:18s ease-in-out infinite alternate ambient-drift;position:absolute;inset:-12%;transform:scale(1.08)}.ambient.is-playing .ambient-cover{opacity:.72;filter:blur(64px)saturate(1.55)brightness(.52)}@keyframes ambient-drift{0%{transform:scale(1.05)translate(-1.5%,-1%)}to{transform:scale(1.12)translate(1.5%,1.5%)}}.ambient-orb{filter:blur(40px);border-radius:50%;transition:background 1s,opacity .8s;position:absolute}.ambient-orb-a{background:var(--glow);opacity:.55;width:min(48vw,520px);height:min(48vw,520px);animation:9s ease-in-out infinite alternate orb-float;top:-8%;left:-6%}.ambient-orb-b{background:color-mix(in srgb, var(--accent-deep) 70%, transparent);opacity:.45;width:min(36vw,380px);height:min(36vw,380px);animation:11s ease-in-out infinite alternate-reverse orb-float;bottom:8%;right:4%}@keyframes orb-float{0%{transform:translate(0)scale(1)}to{transform:translate(3%,-4%)scale(1.08)}}.ambient-pulse{background:radial-gradient(circle, var(--glow), transparent 68%);opacity:0;border-radius:50%;transition:opacity .6s;position:absolute;inset:18% 22%;transform:scale(.85)}.ambient-pulse.on{opacity:.55;animation:2.8s ease-in-out infinite pulse-room}@keyframes pulse-room{0%,to{opacity:.35;transform:scale(.88)}50%{opacity:.65;transform:scale(1.05)}}.ambient-grain{opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' 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");position:absolute;inset:0}.topbar{z-index:2;justify-content:space-between;align-items:center;margin-bottom:1.5rem;display:flex;position:relative}.brand-mark{font-family:var(--font-display);letter-spacing:.04em;color:var(--cream);text-shadow:0 0 40px var(--glow);margin:0;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;transition:text-shadow .8s}.user-chip{color:var(--fog);align-items:center;gap:.85rem;font-size:.9rem;display:flex}.device-dot{width:8px;height:8px;box-shadow:none;background:#666;border-radius:50%}.device-dot.on{background:var(--accent-soft);box-shadow:0 0 10px var(--glow)}.device-wait{color:var(--fog);margin:0;font-size:.85rem}.user-chip button{border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);color:var(--cream);cursor:pointer;background:0 0;border-radius:999px;padding:.4rem .85rem;transition:border-color .25s,background .25s,transform .15s}.user-chip button:hover{border-color:var(--accent);background:var(--wash);transform:translateY(-1px)}.stage{z-index:1;flex:1;grid-template-columns:minmax(0,1.35fr) minmax(280px,.85fr);align-items:stretch;gap:clamp(1.25rem,3vw,2.5rem);display:grid;position:relative}.deck{flex-direction:column;gap:1.25rem;display:flex}.deck-wood{aspect-ratio:1.15;border-radius:calc(var(--radius) + 6px);background:linear-gradient(135deg, color-mix(in srgb, var(--accent-deep) 35%, transparent), #1a120ceb), repeating-linear-gradient(90deg, #3a281859 0px, #3a281859 2px, #2a1c1033 2px, #2a1c1033 6px), var(--wood);max-height:min(68vh,620px);box-shadow:inset 0 1px 0 color-mix(in srgb, var(--accent-soft) 28%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent), 0 30px 80px #0000008c, 0 0 60px var(--glow);transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));will-change:transform;transition:transform .35s,box-shadow .8s,background .8s;animation:.9s both deck-in;position:relative;overflow:hidden}.deck-glow{background:radial-gradient(circle at 40% 45%, var(--glow), transparent 55%);opacity:.35;pointer-events:none;transition:opacity .6s;position:absolute;inset:-20%}.app.is-playing .deck-glow{opacity:.7;animation:3.2s ease-in-out infinite deck-breathe}@keyframes deck-breathe{0%,to{opacity:.45;transform:scale(1)}50%{opacity:.8;transform:scale(1.04)}}@keyframes deck-in{0%{opacity:0;transform:perspective(900px)translateY(18px)scale(.98)}to{opacity:1;transform:perspective(900px)rotateX(0)rotateY(0)}}.vinyl-stage{place-items:center;display:grid;position:absolute;inset:8% 18% 12% 8%}.vinyl-rings{border:1px solid color-mix(in srgb, var(--accent) 25%, transparent);opacity:0;pointer-events:none;border-radius:50%;width:96%;height:96%;position:absolute}.vinyl-stage.is-spinning .vinyl-rings{opacity:1;box-shadow:0 0 0 18px color-mix(in srgb, var(--accent) 8%, transparent), 0 0 0 36px color-mix(in srgb, var(--accent) 4%, transparent);animation:2.4s ease-out infinite ring-out}@keyframes ring-out{0%{opacity:.7;transform:scale(.92)}to{opacity:0;transform:scale(1.08)}}.platter-shadow{filter:blur(8px);background:radial-gradient(circle,#0000008c,#0000 70%);border-radius:50%;width:92%;height:92%;position:absolute}.vinyl-hit{appearance:none;cursor:grab;aspect-ratio:1;touch-action:none;z-index:2;background:0 0;border:none;border-radius:50%;width:min(100%,420px);padding:0;position:relative}.vinyl-hit:active{cursor:grabbing}.vinyl-disc{width:100%;height:100%;box-shadow:0 0 0 3px #0a0a0a, 0 18px 40px #000000a6, 0 0 40px color-mix(in srgb, var(--accent) 22%, transparent);will-change:transform;transform-origin:50%;background:radial-gradient(circle,#1a1a1a 0 14%,#0a0a0a 15%,#111 38%,#050505 72%,#1c1c1c 100%);border-radius:50%;transition:box-shadow .6s;position:relative;overflow:hidden}.vinyl-stage.is-spinning .vinyl-disc{box-shadow:0 0 0 3px #0a0a0a, 0 18px 40px #000000a6, 0 0 55px var(--glow)}.vinyl-stage.is-dragging .vinyl-disc{filter:brightness(1.08)}@keyframes spin{to{transform:rotate(360deg)}}.vinyl-grooves{opacity:.85;pointer-events:none;background:repeating-radial-gradient(circle,#ffffff09 0 1px,#0000 1px 4px);border-radius:50%;position:absolute;inset:0}.vinyl-label{box-shadow:0 0 0 4px color-mix(in srgb, var(--accent-deep) 80%, #1a1008), inset 0 0 20px #00000073;z-index:2;border-radius:50%;transition:box-shadow .8s;position:absolute;inset:28%;overflow:hidden}.vinyl-cover{object-fit:cover;width:100%;height:100%;display:block}.vinyl-cover.placeholder{background:linear-gradient(145deg, var(--accent-deep), #2a1810);color:var(--accent-soft);font-family:var(--font-display);letter-spacing:.2em;place-items:center;font-size:1.1rem;display:grid}.vinyl-spindle{z-index:3;background:radial-gradient(circle at 35% 35%,#ddd,#666 55%,#222);border-radius:50%;width:14px;height:14px;margin:-7px 0 0 -7px;position:absolute;top:50%;left:50%;box-shadow:0 0 0 3px #111}.vinyl-shine{pointer-events:none;z-index:4;mix-blend-mode:screen;background:linear-gradient(125deg,#0000 35%,#ffffff14 48%,#0000 62%);border-radius:50%;position:absolute;inset:0}.vinyl-hint{letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb, var(--cream) 45%, transparent);pointer-events:none;opacity:0;margin:0;font-size:.68rem;transition:opacity .3s;position:absolute;bottom:-2%;left:50%;transform:translate(-50%)}.vinyl-stage:hover .vinyl-hint,.vinyl-stage.is-dragging .vinyl-hint{opacity:1}.tonearm{transform-origin:78% 18%;z-index:5;appearance:none;cursor:pointer;background:0 0;border:none;width:42%;height:55%;padding:0;transition:transform .7s cubic-bezier(.22,1,.36,1),filter .3s;position:absolute;top:10%;right:6%;transform:rotate(-18deg)}.tonearm:hover{filter:brightness(1.12)}.tonearm:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:12px}.tonearm.lowered{transform:rotate(12deg)}.tonearm-base{background:radial-gradient(circle at 30% 30%, var(--accent-soft), var(--accent-deep) 60%, #1a120c);width:48px;height:48px;box-shadow:0 6px 16px #00000073, 0 0 20px var(--glow);border-radius:50%;transition:background .8s;position:absolute;top:8%;right:12%}.tonearm-arm{transform-origin:100%;width:78%;height:14px;position:absolute;top:12%;right:18%;transform:rotate(28deg)}.tonearm-shaft{background:linear-gradient(#d8c4a0,#8a7050 45%,#4a3828);border-radius:8px;position:absolute;inset:0;box-shadow:0 2px 6px #0006}.tonearm-counterweight{background:linear-gradient(145deg,#999,#444);border-radius:6px;width:28px;height:30px;position:absolute;top:-8px;right:-10px}.tonearm-headshell{background:linear-gradient(160deg, var(--accent), var(--accent-deep));border-radius:4px 10px 10px 4px;width:36px;height:26px;transition:background .8s;position:absolute;top:-6px;left:-8px}.tonearm-stylus{background:#ddd;border-radius:1px;width:3px;height:14px;position:absolute;bottom:-10px;left:4px;box-shadow:0 4px #888}.tonearm.lowered .tonearm-stylus{box-shadow:0 4px 8px var(--glow)}.controls{gap:.85rem;padding:1rem .25rem 0;display:grid}.now-playing .track-title{font-family:var(--font-display);margin:0;font-size:clamp(1.35rem,2.5vw,1.85rem);font-weight:500;transition:color .6s}.controls.is-live .track-title{color:var(--accent-soft);text-shadow:0 0 28px var(--glow)}.now-playing .track-artist{color:var(--fog);margin:.25rem 0 0;font-size:.95rem;font-weight:300}.transport{align-items:center;gap:.75rem;display:flex}.icon-btn,.play-btn{cursor:pointer;color:var(--cream);background:#e8dcc814;border:none;transition:transform .15s,background .2s,box-shadow .3s}.icon-btn{border-radius:50%;place-items:center;width:44px;height:44px;display:grid}.icon-btn:hover{background:var(--wash)}.play-btn{background:linear-gradient(145deg, var(--accent-soft), var(--accent));width:64px;height:64px;color:var(--theme-on-accent);box-shadow:0 10px 30px var(--glow);border-radius:50%;place-items:center;transition:transform .15s,background .6s,box-shadow .6s;display:grid}.icon-btn:hover,.play-btn:hover{transform:scale(1.06)}.play-btn:active,.icon-btn:active{transform:scale(.96)}.scrubber,.volume{color:var(--fog);font-variant-numeric:tabular-nums;align-items:center;gap:.65rem;font-size:.8rem;display:flex}.scrubber-track{background:#e8dcc81f;border-radius:999px;flex:1;height:8px;position:relative;overflow:hidden}.scrubber-fill{border-radius:inherit;background:linear-gradient(90deg, var(--accent-deep), var(--accent-soft));box-shadow:0 0 12px var(--glow);pointer-events:none;transition:width .2s linear;position:absolute;inset:0 auto 0 0}.scrubber-track input{opacity:0;cursor:pointer;width:100%;margin:0;position:absolute;inset:0}.volume input{accent-color:var(--accent);cursor:pointer;flex:1}.library{border-radius:calc(var(--radius) + 4px);border:1px solid color-mix(in srgb, var(--accent) 16%, transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#120e0c8c;flex-direction:column;gap:1rem;min-height:0;padding:1rem;transition:border-color .8s;animation:1s .1s both deck-in;display:flex;box-shadow:0 16px 40px #00000047}.search{gap:.5rem;display:flex}.search input{border:1px solid color-mix(in srgb, var(--accent) 22%, transparent);color:var(--cream);background:#120e0ca6;border-radius:999px;outline:none;flex:1;padding:.75rem 1rem;transition:border-color .25s,box-shadow .25s}.search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--wash)}.search button{background:var(--accent);color:var(--theme-on-accent);cursor:pointer;box-shadow:0 6px 18px var(--glow);border:none;border-radius:999px;padding:.75rem 1.1rem;font-weight:600;transition:transform .15s,background .6s,box-shadow .3s}.search button:hover{transform:translateY(-1px)}.library-list{flex-direction:column;flex:1;gap:.35rem;max-height:min(62vh,560px);padding-right:.25rem;display:flex;overflow:auto}.library-label{text-transform:uppercase;letter-spacing:.16em;color:var(--fog);margin:0 0 .35rem;font-size:.72rem}.library-empty{color:var(--fog);font-size:.95rem;line-height:1.5}.track-row{text-align:left;width:100%;color:inherit;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:12px;grid-template-columns:48px 1fr auto;align-items:center;gap:.75rem;padding:.5rem;transition:background .2s,border-color .2s,transform .15s;display:grid}.track-row:hover{background:var(--wash);border-color:color-mix(in srgb, var(--accent) 22%, transparent);transform:translate(3px)}.track-row.is-active{background:color-mix(in srgb, var(--accent) 18%, transparent);border-color:color-mix(in srgb, var(--accent) 40%, transparent)}.track-row img,.track-row-fallback{object-fit:cover;background:var(--ink-soft);border-radius:6px;width:48px;height:48px;transition:transform .25s,box-shadow .25s}.track-row:hover img{box-shadow:0 0 16px var(--glow);transform:scale(1.06)}.track-row-title{margin:0;font-size:.92rem;font-weight:500}.track-row-meta{color:var(--fog);white-space:nowrap;text-overflow:ellipsis;margin:.15rem 0 0;font-size:.75rem;overflow:hidden}.eq{align-items:flex-end;gap:3px;width:14px;height:16px;display:flex}.eq i{background:var(--accent-soft);border-radius:2px;width:3px;animation:.9s ease-in-out infinite eq;display:block}.eq i:first-child{height:40%;animation-delay:0s}.eq i:nth-child(2){height:80%;animation-delay:.15s}.eq i:nth-child(3){height:55%;animation-delay:.3s}@keyframes eq{0%,to{transform:scaleY(.45)}50%{transform:scaleY(1)}}.now-chip{color:var(--fog);margin:0;font-size:.85rem}.now-chip strong{color:var(--accent-soft);font-weight:500;transition:color .6s}.login{background:radial-gradient(80% 60% at 20% 30%,#d4a35c2e,#0000 55%),radial-gradient(70% 50% at 85% 70%,#5a3d2473,#0000 50%),linear-gradient(160deg,#0c0a09 0%,#1a1410 45%,#0f0c0a 100%);grid-template-columns:1.1fr .9fr;align-items:center;gap:2rem;min-height:100vh;padding:clamp(1.5rem,5vw,4rem);display:grid;position:relative;overflow:hidden}.login-glow{pointer-events:none;background:radial-gradient(circle,#d4a35c38,#0000 65%);width:50vw;height:50vw;animation:5s ease-in-out infinite alternate glow-pulse;position:absolute;top:10%;right:-10%}@keyframes glow-pulse{0%{opacity:.6;transform:scale(.95)}to{opacity:1;transform:scale(1.05)}}.login-copy{z-index:1;max-width:34rem;position:relative}.login-copy h1{font-family:var(--font-display);color:var(--cream);margin:.6rem 0 1rem;font-size:clamp(2.2rem,5vw,3.6rem);font-weight:500;line-height:1.1}.lede{color:var(--fog);margin:0 0 1.75rem;font-size:1.05rem;font-weight:300;line-height:1.6}.cta{background:linear-gradient(145deg, var(--accent-soft), var(--accent));color:var(--theme-on-accent);cursor:pointer;box-shadow:0 12px 36px var(--glow);border:none;border-radius:999px;padding:.95rem 1.6rem;font-weight:600;transition:transform .2s}.cta:hover{transform:translateY(-2px)}.setup-box{border-radius:var(--radius);color:var(--fog);background:#120e0cb3;border:1px solid #e8dcc826;padding:1rem 1.15rem;line-height:1.55}.setup-box .uri,code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em}.setup-box .uri{color:var(--accent-soft);word-break:break-all;margin-top:.75rem;display:block}.fine-print{color:#e8dcc866;margin-top:1.25rem;font-size:.8rem}.login-visual{z-index:1;place-items:center;min-height:360px;display:grid;position:relative}.login-float{width:min(78%,420px);animation:4.5s ease-in-out infinite alternate float-y}.login-visual .vinyl-disc{width:100%}.login-visual .vinyl-spinner{aspect-ratio:1;width:100%}.login-visual .vinyl-disc.spin,.login-float .vinyl-disc.spin{animation:8s linear infinite spin}@keyframes float-y{0%{transform:translateY(0)}to{transform:translateY(-12px)}}.error-banner{color:#f0c2ba;background:#c45c4a2e;border:1px solid #c45c4a66;border-radius:12px;margin:.75rem 0 0;padding:.75rem 1rem;font-size:.9rem}.deck-error{margin-top:0}.boot{min-height:100vh;color:var(--fog);background:#0a0807;place-content:center;justify-items:center;gap:1rem;display:grid}.boot-disc{border:3px solid color-mix(in srgb, var(--accent) 30%, transparent);border-top-color:var(--accent);border-radius:50%;width:72px;height:72px;animation:.9s linear infinite spin}@media (width<=920px){.stage,.login{grid-template-columns:1fr}.login-visual{order:-1;min-height:260px}.login-float{width:min(70vw,280px)}.deck-wood{aspect-ratio:1;max-height:none;transform:none!important}.library-list{max-height:40vh}.vinyl-hint{display:none}}@media (prefers-reduced-motion:reduce){.ambient-cover,.ambient-orb,.ambient-pulse,.deck-glow,.vinyl-rings,.eq i{animation:none!important}.deck-wood{transition:none!important;transform:none!important}}