:root{--bg:#080a12;--bg-2:#0f1220;--surface:#b2bee60d;--surface-2:#b2bee617;--well:#05070e73;--border:#c8d2f017;--border-strong:#c8d2f02b;--text:#eef0f7;--muted:#9aa1b8;--faint:#687089;--gold:#e8c48a;--gold-hi:#f7e6c4;--gold-lo:#c99a5b;--on-gold:#1b1408;--gold-fill:linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 55%, #dcae6c 100%);--violet:#8f8cf2;--violet-hi:#b8b6ff;--cyan:#6ccfe0;--pink:#e59ab6;--sun-1:#fff5e0;--sun-2:#edbf7c;--sun-3:#d27f67;--active:#4fcf9e;--idle:#edb65a;--offline:#ee8080;--yt:#f0475c;--radius:22px;--display:"Manrope", system-ui, sans-serif;--body:"Manrope", system-ui, -apple-system, sans-serif;--serif:"Instrument Serif", "Times New Roman", serif;--mono:"JetBrains Mono", ui-monospace, Menlo, monospace;--ease-out:cubic-bezier(.16, 1, .3, 1);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{min-height:100%;margin:0;overflow-x:clip}body{background:var(--bg);color:var(--text);font-family:var(--body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:15px;font-weight:500;line-height:1.55;overflow-x:hidden}::selection{color:#fff;background:#e8c48a52}#root{z-index:1;min-height:100vh;position:relative}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}input{font:inherit;color:inherit}input::placeholder{color:var(--faint)}h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;margin:0;font-weight:700}h1 em,.tagline em,.wordmark em{font-family:var(--serif);letter-spacing:0;font-style:italic;font-weight:400}:focus-visible{outline:2px solid var(--violet);outline-offset:2px}.muted{color:var(--muted)}.mono{font-family:var(--mono);letter-spacing:.12em}.row{align-items:center;display:flex}.gap{gap:10px}.full{width:100%}code{font-family:var(--mono);background:var(--surface-2);border-radius:6px;padding:1px 6px;font-size:.85em}.space{z-index:0;background:radial-gradient(at 50% 46%,#0d1122 0%,#070911 55%,#04050a 100%);position:fixed;inset:0;overflow:hidden}.space canvas{position:absolute;inset:0}.nebula{filter:blur(90px);opacity:.32;mix-blend-mode:screen;border-radius:50%;animation:28s ease-in-out infinite alternate drift;position:absolute}.n1{background:radial-gradient(circle,#3d3aa8 0%,#0000 65%);width:55vmax;height:55vmax;top:-20vmax;left:-15vmax}.n2{background:radial-gradient(circle,#12607a 0%,#0000 65%);width:45vmax;height:45vmax;animation-duration:34s;animation-delay:-8s;top:10vh;right:-15vmax}.n3{background:radial-gradient(circle,#7d2f5f 0%,#0000 65%);width:40vmax;height:40vmax;animation-duration:40s;animation-delay:-16s;bottom:-25vmax;left:20vw}@keyframes drift{0%{transform:translate(0)scale(1)}50%{transform:translate(4vw,3vh)scale(1.12)}to{transform:translate(-3vw,-2vh)scale(.95)}}.grain{opacity:.03;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:absolute;inset:0}body:has(.party.is-playing) .nebula{opacity:.42;animation-duration:12s}.hp-logo{--beat:1.1s;animation:hp-glow 4s ease-in-out infinite, hp-bob calc(var(--beat) * 2) ease-in-out infinite;overflow:visible}.hp-logo.is-live{--beat:.5s}.hp-logo *{transform-box:fill-box;transform-origin:50%}@keyframes hp-glow{0%,to{filter:drop-shadow(0 0 3px #8f8cf273)hue-rotate(-10deg)}50%{filter:drop-shadow(0 0 8px #e8c48a99)hue-rotate(12deg)}}@keyframes hp-bob{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-1.5%)rotate(-3deg)}}.hp-band{animation:hp-band var(--beat) ease-in-out infinite}@keyframes hp-band{0%,to{transform:translateY(0)scaleX(1)}15%{transform:translateY(-3%)scaleX(1.03)}40%{transform:translateY(0)scaleX(.99)}}.hp-cup-l{animation:hp-buzz-l var(--beat) linear infinite}.hp-cup-r{animation:hp-buzz-r var(--beat) linear infinite;animation-delay:calc(var(--beat) / -2)}@keyframes hp-buzz-l{0%{transform:translate(0)scale(1)}6%{transform:translate(-9%)scale(1.08)}12%{transform:translate(5%,1%)scale(.98)}18%{transform:translate(-5%,-1%)scale(1.04)}24%{transform:translate(3%,1%)}30%{transform:translate(-2%)}40%,to{transform:translate(0)scale(1)}}@keyframes hp-buzz-r{0%{transform:translate(0)scale(1)}6%{transform:translate(9%)scale(1.08)}12%{transform:translate(-5%,1%)scale(.98)}18%{transform:translate(5%,-1%)scale(1.04)}24%{transform:translate(-3%,1%)}30%{transform:translate(2%)}40%,to{transform:translate(0)scale(1)}}.hp-cone{animation:hp-cone var(--beat) ease-out infinite}.hp-cup-r .hp-cone{animation-delay:calc(var(--beat) / -2)}@keyframes hp-cone{0%{transform:scale(1)}8%{transform:scale(1.7)}30%,to{transform:scale(1)}}.hp-wave path{opacity:0;animation:hp-wave-l calc(var(--beat) * 1.4) ease-out infinite}.hp-wave-r path{animation-name:hp-wave-r}.hp-wave .w2{animation-delay:calc(var(--beat) * .35)}.hp-wave-r .w1{animation-delay:calc(var(--beat) * -.5)}.hp-wave-r .w2{animation-delay:calc(var(--beat) * -.15)}@keyframes hp-wave-l{0%{opacity:0;transform:translate(40%)scale(.7)}25%{opacity:1}to{opacity:0;transform:translate(-60%)scale(1.15)}}@keyframes hp-wave-r{0%{opacity:0;transform:translate(-40%)scale(.7)}25%{opacity:1}to{opacity:0;transform:translate(60%)scale(1.15)}}.hp-notes text{opacity:0;animation:hp-note calc(var(--beat) * 3) ease-out infinite;font-family:system-ui,sans-serif}.hp-notes .n2{animation-delay:calc(var(--beat) * -1.5);animation-name:hp-note-2}@keyframes hp-note{0%{opacity:0;transform:translateY(60%)rotate(0)scale(.6)}25%{opacity:1}to{opacity:0;transform:translate(70%,-120%)rotate(18deg)scale(1.1)}}@keyframes hp-note-2{0%{opacity:0;transform:translateY(60%)rotate(0)scale(.6)}25%{opacity:.9}to{opacity:0;transform:translate(-70%,-120%)rotate(-18deg)scale(1.05)}}.btn{border:1px solid var(--border);background:var(--surface);letter-spacing:-.005em;white-space:nowrap;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:11px 18px;font-weight:650;transition:background .2s,border-color .2s,box-shadow .3s,filter .2s,transform .2s;display:inline-flex}.btn:not(.btn-primary):not(.btn-yt):not(.btn-light):not(.btn-danger):hover:not(:disabled){background:var(--surface-2);border-color:var(--border-strong)}.btn-sm{border-radius:10px;padding:7px 12px;font-size:13px}.btn-lg{border-radius:14px;padding:15px 22px;font-size:16px}.btn-primary{color:var(--on-gold);background:var(--gold-fill);border:0;box-shadow:inset 0 1px #ffffff8c,inset 0 -1px #78501e40,0 10px 28px -12px #e8c48a99}.btn-primary:hover:not(:disabled){filter:brightness(1.05);box-shadow:inset 0 1px #ffffff8c,inset 0 -1px #78501e40,0 14px 34px -12px #e8c48abf}.btn-ghost{background:#b2bee60a}.btn-light{color:#121526;background:#f4f5fa;border:0}.btn-yt{color:#ffe3e7;background:linear-gradient(#f0475c38,#f0475c1f);border:1px solid #f0475c6b;box-shadow:inset 0 1px #ffffff14}.btn-yt svg{color:var(--yt)}.btn-yt:hover:not(:disabled){background:linear-gradient(#f0475c4d,#f0475c2e);border-color:#f0475ca6}.btn.glow{position:relative;overflow:hidden}.btn.glow:after{content:"";background:linear-gradient(110deg,#0000 30%,#ffffff73 50%,#0000 70%);animation:5s ease-in-out infinite sheen;position:absolute;inset:0;transform:translate(-100%)}@keyframes sheen{0%,70%{transform:translate(-100%)}to{transform:translate(100%)}}.icon-btn{border:1px solid var(--border);background:var(--surface);border-radius:12px;place-items:center;width:40px;height:40px;transition:background .2s,border-color .2s,transform .2s;display:inline-grid}.icon-btn:hover:not(:disabled){background:var(--surface-2);border-color:var(--border-strong)}.icon-btn.subtle{opacity:.7}.field{gap:7px;display:grid}.field span{text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-size:11.5px;font-weight:700}.field input,.code-input{border:1px solid var(--border);background:var(--well);border-radius:12px;outline:none;width:100%;padding:13px 15px;transition:border-color .2s,box-shadow .2s}.field input:focus,.code-input:focus{border-color:#8f8cf2b3;box-shadow:0 0 0 4px #8f8cf229}.spinner{border:2px solid;border-right-color:#0000;border-radius:50%;flex:none;width:16px;height:16px;animation:.8s linear infinite spin;display:inline-block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.card{border:1px solid var(--border);border-radius:var(--radius);-webkit-backdrop-filter:blur(20px)saturate(130%);background:linear-gradient(#181c2eb8,#0c0f1aad);box-shadow:inset 0 1px #ffffff0d,0 30px 70px -36px #000000e6}.glass-strong{background:linear-gradient(#161a2c99,#0a0c1680)}.card-head{justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px;display:flex}.card-head h2{letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-size:11.5px;font-weight:700}.error-text{color:var(--offline);margin:12px 0 0;font-size:14px}.notice{color:#f6deb0;background:#edb65a14;border:1px solid #edb65a40;border-radius:12px;margin:0 20px 12px;padding:12px 14px;font-size:13.5px}.home,.rejoin{z-index:1;position:relative}.home{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:48px 16px;display:flex}.hero-orbit{width:200px;height:200px;margin-bottom:8px;position:relative}.h-sun{background:radial-gradient(circle at 40% 35%, var(--sun-1), var(--sun-2) 48%, var(--sun-3));border-radius:50%;animation:3.5s ease-in-out infinite breathe;position:absolute;inset:80px;box-shadow:0 0 36px 8px #edbf7c66,0 0 90px 30px #d27f672e}.h-ring{border:1px dashed #c8d2f029;border-radius:50%;animation:linear infinite spin;position:absolute}.h-ring.r0{animation-duration:6s;inset:52px}.h-ring.r1{animation-duration:10s;animation-direction:reverse;inset:26px}.h-ring.r2{animation-duration:16s;inset:0}.h-planet{background:var(--cyan);width:10px;height:10px;box-shadow:0 0 12px var(--cyan);border-radius:50%;margin-left:-5px;position:absolute;top:-5px;left:50%}.r1 .h-planet{background:var(--pink);box-shadow:0 0 12px var(--pink)}.r2 .h-planet{background:var(--violet);box-shadow:0 0 12px var(--violet);width:12px;height:12px;margin-left:-6px}@keyframes breathe{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.logo{font-family:var(--display);letter-spacing:-.05em;perspective:600px;align-items:center;gap:.02em;font-size:clamp(48px,11vw,92px);font-weight:800;line-height:1.05;display:inline-flex}.logo-mark{place-items:center;width:1.05em;height:1.05em;margin-right:.06em;display:grid}.logo-mark svg{width:100%;height:100%}.logo span{background:linear-gradient(#fff 15%,#cdd2e6 95%);color:#0000;filter:drop-shadow(0 8px 28px #8f8cf22e);-webkit-background-clip:text;background-clip:text;display:inline-block}.logo span.serif{font-family:var(--serif);letter-spacing:-.01em;background-image:linear-gradient(180deg, var(--gold-hi) 10%, var(--gold) 55%, var(--gold-lo));filter:drop-shadow(0 8px 28px #e8c48a38);margin:0 -.04em;padding:0 .04em;font-size:1.14em;font-style:italic;font-weight:400}.logo span:not(.serif)+.serif{margin-left:.06em}.tagline{color:#c6cadb;text-shadow:0 0 2px #04050ae6,0 1px 14px #04050af2,0 0 28px #04050acc;margin:14px 0 34px;font-size:18px}.tagline em{color:var(--gold);font-size:1.28em;line-height:1}.home-card{text-align:left;gap:16px;width:min(420px,100%);padding:26px;display:grid}.divider{color:var(--faint);text-transform:uppercase;letter-spacing:.14em;align-items:center;gap:12px;font-size:11.5px;font-weight:700;display:flex}.divider:before,.divider:after{content:"";background:var(--border);flex:1;height:1px}.join-row{gap:10px;display:flex}.code-wrap{flex:1;min-width:0;display:flex;position:relative}.code-wrap:has(.scan-btn) .code-input{padding-right:50px}.code-input{font-family:var(--mono);text-transform:uppercase;letter-spacing:.4em;text-align:center;min-width:0;font-size:18px}.scan-btn{width:40px;height:40px;color:var(--violet-hi);background:#8f8cf224;border:0;border-radius:10px;place-items:center;transition:background .2s,transform .2s;display:grid;position:absolute;top:50%;right:6px;translate:0 -50%}.scan-btn:active{background:#8f8cf23d;transform:scale(.9)}.features{flex-wrap:wrap;justify-content:center;gap:8px 22px;margin:30px 0 0;padding:0;list-style:none;display:flex}.features li{color:var(--muted);align-items:center;gap:8px;font-size:13px;display:inline-flex}.features li:before{content:"";background:var(--gold);border-radius:50%;width:5px;height:5px;box-shadow:0 0 8px #e8c48a99}.rejoin{text-align:center;place-content:center;justify-items:center;gap:10px;min-height:100vh;padding:16px;display:grid}.warp{width:120px;height:120px;margin-bottom:16px;position:relative}.warp span{border:1.5px solid var(--gold);animation:warp 1.8s var(--ease-out) infinite;opacity:0;border-radius:50%;position:absolute;inset:0}.warp span:nth-child(2){border-color:var(--violet);animation-delay:.6s}.warp span:nth-child(3){border-color:var(--pink);animation-delay:1.2s}@keyframes warp{0%{opacity:1;transform:scale(.2)}to{opacity:0;transform:scale(1.4)}}.party{isolation:isolate;flex-direction:column;min-height:100vh;display:flex;position:relative}.party:before,.party:after{content:"";z-index:-1;pointer-events:none;position:absolute;inset:0}.party:before{opacity:.6;background:radial-gradient(38% 32% at 12% 18%,#8f8cf242,#0000 70%),radial-gradient(34% 30% at 88% 12%,#6ccfe021,#0000 70%),radial-gradient(42% 36% at 72% 88%,#e59ab62b,#0000 70%),radial-gradient(30% 28% at 22% 92%,#e8c48a21,#0000 70%);transition:opacity 1.2s;animation:26s ease-in-out infinite alternate aurora,30s ease-in-out infinite alternate aurora-hue}.party:after{background:linear-gradient(#0000 0%,#080a1266 100%)}.party.is-playing:before{opacity:.85;animation-duration:12s,16s}@keyframes aurora{0%{transform:translate(0)scale(1)}33%{transform:translate(2%,-2%)scale(1.06)}66%{transform:translate(-2%,1.5%)scale(.97)}to{transform:translate(1%,2%)scale(1.04)}}@keyframes aurora-hue{0%{filter:hue-rotate(-14deg)}to{filter:hue-rotate(18deg)}}.party-grid>.stage,.side>.card{animation:rise .7s var(--ease-out) both}.side>.card:first-child{animation-delay:80ms}.side>.card:nth-child(2){animation-delay:.16s}.side>.card:nth-child(3){animation-delay:.24s}@keyframes rise{0%{opacity:0;transform:translateY(18px)scale(.98)}to{opacity:1;transform:none}}.side>.card{transition:transform .35s var(--ease-out), border-color .35s, box-shadow .35s}.side>.card:hover{border-color:var(--border-strong);transform:translateY(-2px);box-shadow:inset 0 1px #ffffff0f,0 34px 70px -34px #000000f2}@property --np-angle{syntax:"<angle>";inherits:false;initial-value:0deg}.now-playing{position:relative}.now-playing.is-live:before{content:"";border-radius:inherit;pointer-events:none;background:conic-gradient(from var(--np-angle), var(--gold), var(--pink), var(--violet), var(--cyan), var(--gold));-webkit-mask-composite:xor;opacity:.85;padding:1px;animation:6s linear infinite np-spin;position:absolute;inset:0;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor,source-over;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}.now-playing.is-live{box-shadow:inset 0 1px #ffffff0d,0 30px 70px -36px #000000e6,0 0 60px -26px #e8c48a66}@keyframes np-spin{to{--np-angle:360deg}}.sync-btn{color:var(--cyan);border-color:#6ccfe042;justify-self:center;gap:8px}.btn.sync-btn:hover:not(:disabled){background:#6ccfe014;border-color:#6ccfe073}.sync-btn.is-syncing svg{animation:.8s linear infinite spin}.btn-danger{color:#fff;animation:pop .35s var(--ease-out);background:linear-gradient(#ef7d7d,#d9545f);border:0;box-shadow:inset 0 1px #fff3,0 10px 26px -12px #d9545fcc}.btn.danger-text{color:#f2a6a6;border-color:#ee808047}.topbar{z-index:20;padding:10px 24px;padding-top:max(10px, env(safe-area-inset-top));-webkit-backdrop-filter:blur(16px)saturate(140%);background:#080a1294;border-bottom:1px solid #c8d2f00f;justify-content:space-between;align-items:center;gap:12px;display:flex;position:sticky;top:0}.brand{font-family:var(--display);letter-spacing:-.03em;align-items:center;gap:10px;font-size:18px;font-weight:800;display:flex}.brand-mark{place-items:center;width:40px;height:40px;margin:-4px -4px -4px -6px;display:grid}.wordmark em{color:var(--gold);margin-left:.03em;font-size:1.16em}.room-chip{border:1px solid var(--border-strong);background:#b2bee60f;border-radius:999px;align-items:center;gap:9px;padding:7px 15px 7px 12px;font-weight:600;transition:border-color .2s,background .2s;display:inline-flex}.room-chip:hover{background:#e8c48a0f;border-color:#e8c48a73}.room-chip svg{color:var(--gold)}.room-chip .mono{letter-spacing:.2em;font-size:14px}.topbar-right{align-items:center;gap:12px;display:flex}.ping{font-family:var(--mono);color:var(--muted);align-items:center;gap:7px;font-size:12px;display:inline-flex}.ping-dot{background:var(--active);width:7px;height:7px;box-shadow:0 0 8px var(--active);border-radius:50%;animation:2s ease-in-out infinite blink}@keyframes blink{50%{opacity:.35}}.party-grid{flex:1;grid-template-columns:minmax(0,1fr) 380px;gap:20px;width:100%;max-width:1400px;margin:0 auto;padding:20px 24px 32px;display:grid}.stage{flex-direction:column;min-height:560px;padding:22px;display:flex;position:relative;overflow:hidden}.stage-head{z-index:2;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.stage-head h1{letter-spacing:-.03em;font-size:clamp(22px,2.4vw,28px);line-height:1.2}.stage-head h1 em{color:var(--gold);font-size:1.14em}.stage-head p{margin:4px 0 0;font-size:14px}.legend{border:1px solid var(--border);background:var(--well);color:var(--muted);border-radius:12px;flex-wrap:wrap;align-items:center;gap:14px;padding:7px 14px;font-size:12.5px;display:flex}.legend span{align-items:center;gap:7px;display:inline-flex}.legend b{color:var(--text);font-variant-numeric:tabular-nums;font-weight:700}.legend .dot{width:8px;height:8px}.invite-fab{z-index:3;position:absolute;bottom:22px;left:22px}.side{flex-direction:column;gap:20px;min-width:0;display:flex}.dot{border-radius:50%;flex:none;width:10px;height:10px;display:inline-block;position:relative}.dot-active{background:var(--active);box-shadow:0 0 8px #4fcf9e99}.dot-active:after{content:"";background:var(--active);animation:ping 1.8s var(--ease-out) infinite;border-radius:50%;position:absolute;inset:0}.dot-idle{background:var(--idle);box-shadow:0 0 8px #edb65a80}.dot-offline{border:2px solid var(--offline);background:0 0;animation:1s ease-in-out infinite blink}@keyframes ping{0%{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(2.8)}}.orbit-stage{--lean-x:0deg;--lean-y:0deg;aspect-ratio:4/3;flex:1;width:100%;min-height:0;max-height:74vh;margin:0 auto;position:relative}.orbit-system{--tilt:62deg;pointer-events:none;transform-style:preserve-3d;translate:-50% -50%;transform:rotateX(var(--lean-x)) rotateY(var(--lean-y));transition:transform .8s var(--ease-out);position:absolute;top:50%;left:50%}.orbit-plane{transform-style:preserve-3d;transform:rotateX(var(--tilt));position:absolute;inset:0}.guide{background:radial-gradient(circle,#edbf7c24 0%,#8f8cf21a 22%,#6ccfe009 50%,#0000 68%);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.guide:after{content:"";border:1px solid #ffffff0d;border-radius:50%;position:absolute;inset:18%;box-shadow:0 0 0 1px #8f8cf20f,inset 0 0 60px #8f8cf21a}.orbit{pointer-events:none;transform-style:preserve-3d;position:absolute;top:50%;left:50%}.orbit .ring{border:1px dashed #c8d2f024;border-radius:50%;position:absolute;inset:0}.orbit .spin{transform-style:preserve-3d;animation:spin var(--d) linear infinite;animation-delay:var(--delay);position:absolute;inset:0}.orbit .trail{background:conic-gradient(from 0deg, transparent 0deg 285deg, color-mix(in srgb, var(--c) 10%, transparent) 300deg, var(--c) 360deg);opacity:.85;border-radius:50%;position:absolute;inset:-1px;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 3px),#000 calc(100% - 2.5px));mask:radial-gradient(farthest-side,#0000 calc(100% - 3px),#000 calc(100% - 2.5px))}.orbit .sat{width:0;height:0;transform-style:preserve-3d;position:absolute;top:0;left:50%}.floor .sat:before{content:"";width:calc(var(--sat) * 1.6);height:calc(var(--sat) * 1.6);left:calc(var(--sat) * -.8);top:calc(var(--sat) * -.8);background:radial-gradient(circle, color-mix(in srgb, var(--c) 40%, transparent), transparent 65%);border-radius:50%;position:absolute}.sat-body{translate:-50% calc(var(--sat) / -2);transform-origin:50% calc(var(--sat) / 2);pointer-events:auto;animation:billboard var(--d) linear infinite;animation-delay:var(--delay);background:0 0;border:0;justify-items:center;padding:0;display:grid;position:absolute;top:0;left:0}@keyframes billboard{0%{transform:rotateZ(0deg) rotateX(calc(-1 * var(--tilt)))}to{transform:rotateZ(-360deg) rotateX(calc(-1 * var(--tilt)))}}.sat-pop{justify-items:center;display:grid;position:relative}.planet{width:var(--sat);height:var(--sat);color:#fff;isolation:isolate;background:radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--c) 24%, #151a2e) 0%, #0b0e1a 100%);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent), 0 0 22px -6px color-mix(in srgb, var(--c) 70%, transparent);transition:filter .5s, box-shadow .5s, transform .3s var(--ease-out);animation:3.2s ease-in-out infinite bob;animation-delay:var(--delay);border-radius:50%;place-items:center;display:grid;position:relative}.planet:after{content:"";pointer-events:none;background:radial-gradient(50% 30% at 50% 12%,#fff3,#0000 70%);border-radius:50%;position:absolute;inset:0}@keyframes bob{0%,to{translate:0}50%{translate:0 -3px}}.sat-body:hover .planet{transform:scale(1.14)}.sat-body .dot{top:2px;right:calc(50% - var(--sat) / 2 + 1px);z-index:2;border:2px solid var(--bg);width:13px;height:13px;position:absolute}.sat-body .dot-offline{border-color:var(--offline);background:var(--bg)}.sat-label{white-space:nowrap;text-shadow:0 1px 6px #000000e6;justify-items:center;margin-top:6px;line-height:1.15;display:grid}.sat-label strong{font-size:12.5px;font-weight:700}.sat-label small{color:var(--muted);font-size:10.5px}.orbit.is-held .spin,.orbit.is-held .sat-body{animation-play-state:paused}.orbit.status-idle .planet{filter:saturate(.45)brightness(.75);box-shadow:0 0 0 3px #080a12e6,0 0 14px #edb65a4d}.orbit.status-idle .trail{opacity:.35}.orbit.status-idle .sat-label small{color:var(--idle)}.zzz{font-family:var(--display);color:var(--idle);font-size:13px;font-weight:700;animation:2.2s ease-in-out infinite zzz;position:absolute;top:-10px;right:-6px}@keyframes zzz{0%{opacity:0;transform:translateY(4px)}40%{opacity:1}to{opacity:0;transform:translate(8px,-10px)}}.orbit.status-offline .spin,.orbit.status-offline .sat-body{animation-play-state:paused}.orbit.status-offline .planet{filter:grayscale()brightness(.55);box-shadow:0 0 0 3px #080a12e6,0 0 0 5px #ee808073}.orbit.status-offline .ring{border-color:#ee808042}.orbit.status-offline .trail{opacity:0}.orbit.status-offline .sat-label small{color:var(--offline)}.sat-spinner{border:2px solid #0000;border-top-color:var(--offline);border-right-color:var(--offline);border-radius:50%;animation:.9s linear infinite spin;position:absolute;inset:-7px}.sun-stand{width:0;height:0;transform-style:preserve-3d;transform:rotateX(calc(-1 * var(--tilt)));position:absolute;top:50%;left:50%}.sun{pointer-events:auto;place-items:center;display:grid;position:absolute;top:0;left:0;translate:-50% -50%}.sun-core{z-index:1;color:#3a2208;background:radial-gradient(circle at 38% 32%, var(--sun-1), var(--sun-2) 45%, var(--sun-3) 100%);border-radius:50%;place-content:center;justify-items:center;gap:0;width:100%;height:100%;animation:4s ease-in-out infinite breathe;display:grid;position:relative;box-shadow:0 0 40px 6px #edbf7c73,0 0 110px 30px #d27f6733,inset -10px -14px 30px #8c3c2866}.sun-core svg:first-child{color:#fffaf0;filter:drop-shadow(0 2px 4px #6e3c0a73);margin-bottom:2px}.corona{animation:corona 3.6s var(--ease-out) infinite;border:1.5px solid #edbf7c8c;border-radius:50%;position:absolute;inset:0}.corona.c2{border-color:#e59ab666;animation-delay:1.2s}.corona.c3{border-color:#8f8cf266;animation-delay:2.4s}@keyframes corona{0%{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(2.1)}}.is-playing .sun-core{animation:.48s ease-in-out infinite alternate beat}.is-playing .corona{animation-duration:1.4s}@keyframes beat{0%{transform:scale(1)}to{transform:scale(1.07)}}.sun-dot{z-index:2;border:2px solid var(--bg);width:14px;height:14px;position:absolute;top:6%;right:6%}.sun-label{white-space:nowrap;text-shadow:0 1px 8px #000000e6;justify-items:center;line-height:1.2;display:grid;position:absolute;top:calc(100% + 10px)}.sun-label strong{font-family:var(--display);letter-spacing:-.01em;font-size:15px;font-weight:800}.sun-label small{color:var(--gold);letter-spacing:.04em;font-size:11.5px;font-weight:600}.sun.status-offline .sun-core{filter:grayscale(.9)brightness(.6);animation:none}.sun.status-offline .corona{border-color:#ee808080}.sun.status-idle .sun-core{filter:saturate(.6)brightness(.85)}.orbit-empty{text-align:center;color:var(--muted);font-size:14px;animation:2.4s ease-in-out infinite blink;position:absolute;bottom:14%;left:0;right:0}.d3-stage{pointer-events:none;flex:none;display:inline-block;position:relative}.d3-model,.d3-part,.d3-box{width:0;height:0;transform-style:preserve-3d;position:absolute;top:50%;left:50%}.d3-model{animation:6s ease-in-out infinite alternate d3-sway;animation-delay:var(--d3-delay,0s);transform:rotateX(-10deg)rotateY(-24deg)}@keyframes d3-sway{0%{transform:rotateX(-10deg)rotateY(-32deg)}to{transform:rotateX(-6deg)rotateY(32deg)}}.d3-face{backface-visibility:hidden;background:linear-gradient(90deg,#9ea3bd,#e5e7f2 50%,#9ea3bd);position:absolute;top:0;left:0;overflow:hidden}.d3-front,.d3-back{border-radius:4px}.d3-phone .d3-front,.d3-phone .d3-back{border-radius:7px}.d3-back{background:linear-gradient(160deg,#f2f3f9,#babdd2)}.d3-screen{border-radius:inherit;background:radial-gradient(120% 90% at 25% 10%, color-mix(in srgb, var(--c,#8f8cf2) 80%, #fff) 0%, var(--c,#8f8cf2) 28%, color-mix(in srgb, var(--c,#8f8cf2) 25%, #0b0e1a) 70%);transition:filter .6s;position:absolute;inset:0;box-shadow:inset 0 0 0 1.5px #0b0e1a}.d3-screen:after{content:"";border-radius:inherit;background:linear-gradient(115deg,#0000 40%,#ffffff38 48%,#0000 56%);position:absolute;inset:0}.d3-pill{background:#000;border-radius:9px;width:32%;height:5%;position:absolute;top:6%;left:50%;translate:-50%}.d3-dot{aspect-ratio:1;background:var(--c,#8f8cf2);opacity:.9;border-radius:50%;width:16%;position:absolute;top:50%;left:50%;translate:-50% -50%}.d3-phone .d3-dot{background:#1a1d2e;width:18%;top:12%;left:24%;box-shadow:0 0 0 1px #fff6}.is-playing .d3-screen{animation:.96s ease-in-out infinite alternate d3-glow}@keyframes d3-glow{to{filter:brightness(1.3)saturate(1.15)}}.now-playing{padding:22px;overflow:hidden}.badge{border-radius:999px;align-items:center;gap:6px;padding:4px 10px;font-size:11.5px;font-weight:700;display:inline-flex}.badge-playing{color:var(--active);background:#4fcf9e1a;box-shadow:inset 0 0 0 1px #4fcf9e38}.badge-playing:before{content:"";background:currentColor;border-radius:50%;width:6px;height:6px;animation:1s infinite blink}.badge-paused{color:var(--idle);background:#edb65a1a;box-shadow:inset 0 0 0 1px #edb65a38}.badge-loading{color:var(--cyan);background:#6ccfe01a;box-shadow:inset 0 0 0 1px #6ccfe038}.np-empty{text-align:center;color:var(--muted);justify-items:center;gap:14px;padding:8px 0 18px;display:grid}.np-body{gap:14px;display:grid}.np-meta{gap:3px;min-width:0;display:grid}.np-kind{text-transform:uppercase;letter-spacing:.14em;color:var(--muted);align-items:center;gap:6px;font-size:11px;font-weight:700;display:inline-flex}.np-title{font-family:var(--display);letter-spacing:-.015em;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:18px;font-weight:700;line-height:1.3;display:-webkit-box;overflow:hidden}.np-meta small{color:var(--muted)}.vinyl{background:repeating-radial-gradient(circle,#101219 0 2px,#1b1e29 2px 4px);border-radius:50%;width:140px;height:140px;position:relative;box-shadow:0 16px 40px -16px #000000d9,0 0 50px -18px #e8c48a59,inset 0 0 0 1px #ffffff12}.vinyl:after{content:"";background:conic-gradient(from 30deg, transparent 0 40deg, #ffffff1f 60deg, transparent 80deg 220deg, #ffffff14 240deg, transparent 260deg);border-radius:50%;position:absolute;inset:0}.vinyl span{background:radial-gradient(circle, var(--bg) 0 12%, var(--sun-2) 13%, var(--sun-3));border-radius:50%;position:absolute;inset:36%}.vinyl.spinning{animation:1.9s linear infinite spin}.vinyl.idle{opacity:.8;width:96px;height:96px;animation:12s linear infinite spin}.file-art{place-items:center;padding:6px 0;display:grid}.yt-stage{aspect-ratio:16/9;width:100%;box-shadow:0 18px 40px -20px #000000e6, 0 0 0 1px var(--border);background:#000;border-radius:14px;position:relative;overflow:hidden}.yt-host,.yt-host>*{width:100%;height:100%;position:absolute;inset:0}.yt-loading{color:var(--muted);grid-auto-flow:column;place-content:center;align-items:center;gap:10px;font-size:14px;display:grid;position:absolute;inset:0}.yt-tap{color:#121526;background:#f4f5faf5;border:0;border-radius:12px;justify-content:center;align-items:center;gap:10px;padding:12px;font-weight:700;display:flex;position:absolute;inset:auto 12px 12px}.pulse-dot{background:var(--yt);border-radius:50%;width:10px;height:10px;animation:1.4s infinite pulse-ring;box-shadow:0 0 #f0475c99}@keyframes pulse-ring{to{box-shadow:0 0 0 12px #f0475c00}}.eq{align-items:flex-end;gap:3px;height:34px;display:flex}.eq span{background:linear-gradient(180deg, var(--gold), var(--pink) 55%, var(--violet));opacity:.28;border-radius:3px 3px 1px 1px;flex:1;height:15%;transition:height .4s,opacity .4s}.eq.on span{opacity:.95;animation:ease-in-out infinite alternate eq}@keyframes eq{0%{height:12%}30%{height:85%}60%{height:35%}to{height:100%}}.progress{grid-template-columns:auto 1fr auto;align-items:center;gap:10px;display:grid}.time{font-family:var(--mono);color:var(--muted);text-align:center;min-width:40px;font-size:12px}.progress input[type=range]{appearance:none;background:linear-gradient(90deg, var(--violet), var(--gold) var(--pct), #ffffff1a var(--pct));outline-offset:6px;border-radius:5px;width:100%;height:5px}.progress input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:15px;height:15px;transition:transform .2s;box-shadow:0 0 0 4px #e8c48a33,0 2px 8px #00000080}.progress input[type=range]::-moz-range-thumb{background:#fff;border:0;border-radius:50%;width:15px;height:15px;box-shadow:0 0 0 4px #e8c48a33,0 2px 8px #00000080}.progress input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.2)}.progress input:disabled::-webkit-slider-thumb{display:none}.sync-progress{gap:6px;display:grid}.sync-progress .bar{background:#ffffff1a;border-radius:5px;height:5px;overflow:hidden}.sync-progress .bar span{background:linear-gradient(90deg, var(--cyan), var(--violet));border-radius:5px;height:100%;display:block}.sync-progress small{color:var(--muted)}.controls{justify-content:center;align-items:center;gap:14px;display:flex}.play-btn{width:62px;height:62px;color:var(--on-gold);background:var(--gold-fill);border:0;border-radius:50%;place-items:center;display:grid;box-shadow:inset 0 1px #ffffff8c,0 12px 30px -10px #e8c48a8c,0 0 0 6px #e8c48a1a}.source-buttons{grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;display:grid}.source-buttons .btn{min-width:0;padding:12px 10px;font-size:14px}.now-playing>.btn.full{margin-top:18px}.devices{padding:22px}.devices ul{gap:2px;margin:0 -8px;padding:0;list-style:none;display:grid}.device{cursor:pointer;transition:background .2s, transform .25s var(--ease-out);border-radius:12px;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 10px;display:grid;position:relative}.device:before{content:"";background:var(--c);opacity:0;width:2px;transition:opacity .25s, transform .25s var(--ease-out);border-radius:2px;position:absolute;top:24%;bottom:24%;left:0;transform:scaleY(.3)}.device:hover{background:linear-gradient(90deg, color-mix(in srgb, var(--c) 10%, transparent), var(--surface));transform:translate(2px)}.device:hover:before{opacity:1;transform:none}.device-avatar{width:38px;height:38px;color:var(--c);background:color-mix(in srgb, var(--c) 14%, #0a0c1699);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 36%, transparent);border-radius:12px;place-items:center;display:grid;position:relative}.device-avatar .dot{border:2px solid #10131f;width:11px;height:11px;position:absolute;bottom:-3px;right:-3px}.device-avatar.big{background:radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--c) 28%, transparent), color-mix(in srgb, var(--c) 40%, #080a12));width:84px;height:84px;box-shadow:inset -8px -10px 18px #00000080, inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent), 0 0 34px -8px var(--c);border-radius:50%;margin:0 auto 6px}.device.status-offline .device-avatar{filter:grayscale()brightness(.6)}.device.status-idle .device-avatar{filter:saturate(.5)brightness(.8)}.device-info{min-width:0;line-height:1.25;display:grid}.device-kind{color:var(--muted);font-size:11.5px}.device-kind b{color:var(--gold);font-weight:700}.kind-summary{gap:6px;display:flex}.kind-summary span{border:1px solid var(--border);background:var(--well);font-family:var(--mono);color:var(--text);border-radius:999px;align-items:center;gap:5px;padding:3px 9px;font-size:12px;display:inline-flex}.kind-summary svg{color:var(--muted)}.device-name{text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:6px;min-width:0;font-weight:650;display:flex;overflow:hidden}.crown{color:var(--gold);flex:none}.device-status{font-size:12px;font-family:var(--mono);color:var(--muted)}.device.status-offline .device-status{color:var(--offline)}.device.status-idle .device-status{color:var(--idle)}.recent{padding:22px}.recent ul{gap:2px;margin:0 -8px;padding:0;list-style:none;display:grid}.recent-item{border-radius:12px;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;padding:6px 10px;transition:background .2s;display:grid}.recent-item:hover{background:var(--surface)}.recent-item.is-current{background:#e8c48a12;box-shadow:inset 0 0 0 1px #e8c48a29}.recent-icon{width:34px;height:34px;color:var(--violet-hi);background:#8f8cf21f;border-radius:10px;place-items:center;display:grid;box-shadow:inset 0 0 0 1px #8f8cf240}.recent-item.is-current .recent-icon{color:var(--gold);background:#e8c48a1f;box-shadow:inset 0 0 0 1px #e8c48a4d}.recent-title{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-weight:600;overflow:hidden}.recent-time{font-size:12px;font-family:var(--mono);color:var(--muted)}.recent-item.is-current .recent-time{color:var(--gold)}.scrim{z-index:40;-webkit-backdrop-filter:blur(6px);background:#04050a9e;position:fixed;inset:0}.modal{z-index:50;border:1px solid var(--border-strong);text-align:center;background:linear-gradient(#171b2e,#0e111d);border-radius:24px;gap:12px;width:min(400px,100vw - 32px);max-height:calc(100vh - 32px);padding:28px 24px 24px;display:grid;position:fixed;top:50%;left:50%;overflow:auto;translate:-50% -50%;box-shadow:0 40px 100px -24px #000000f2,inset 0 1px #ffffff0f}.modal h2{letter-spacing:-.025em;font-size:22px}.modal p{margin:0}.modal-x{position:absolute;top:14px;right:14px}.invite .row{flex-wrap:wrap;justify-content:center}.qr-frame{background:#fff;border-radius:20px;place-items:center;width:220px;height:220px;margin:6px auto;padding:12px;display:grid;position:relative;overflow:hidden;box-shadow:0 0 0 1px #e8c48a66,0 0 0 7px #e8c48a14,0 24px 60px -20px #e8c48a59}.qr-frame img{width:100%;height:100%;image-rendering:pixelated}.qr-frame .spinner{color:var(--violet)}.qr-scan{background:linear-gradient(#0000,#8f8cf240,#0000);height:40px;animation:2.6s ease-in-out infinite scan;position:absolute;top:-40px;left:0;right:0}@keyframes scan{to{top:100%}}.big-code{font-family:var(--mono);color:var(--gold-hi);justify-content:center;gap:8px;font-size:28px;font-weight:500;display:flex}.big-code span{background:var(--well);border:1px solid var(--border-strong);border-radius:12px;place-items:center;width:46px;height:56px;display:grid;box-shadow:inset 0 -2px #e8c48a40}.invite-link{border:1px solid var(--border);background:var(--well);color:var(--muted);border-radius:12px;align-items:center;gap:8px;padding:0 12px;display:flex}.invite-link input{min-width:0;font-family:var(--mono);color:var(--text);text-overflow:ellipsis;background:0 0;border:0;outline:none;flex:1;padding:11px 0;font-size:12.5px}.invite-actions{grid-template-columns:1fr 1fr;gap:10px;display:grid}.invite-actions .btn{min-width:0;padding-left:10px;padding-right:10px}.share-targets{grid-template-columns:repeat(4,1fr);gap:8px;display:grid;overflow:hidden}.share-targets a{color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:14px;justify-items:center;gap:6px;padding:10px 4px;font-size:12px;font-weight:600;text-decoration:none;transition:border-color .2s,background .2s;display:grid}.share-targets a span{width:38px;height:38px;color:var(--c);background:color-mix(in srgb, var(--c) 15%, transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 38%, transparent);border-radius:50%;place-items:center;display:grid}.share-targets a:hover{border-color:color-mix(in srgb, var(--c) 50%, transparent);background:color-mix(in srgb, var(--c) 8%, transparent)}.scan-view{aspect-ratio:1;color:#ffffff38;width:min(260px,100%);box-shadow:inset 0 0 0 1px var(--border);background:radial-gradient(circle,#161a2e,#070910);border-radius:22px;place-items:center;margin:4px auto;display:grid;position:relative;overflow:hidden}.scan-view video{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.scan-view .spinner{color:var(--gold);position:absolute}.scan-corners{pointer-events:none;background:linear-gradient(var(--gold), var(--gold)) 0 0 / 28px 2.5px, linear-gradient(var(--gold), var(--gold)) 0 0 / 2.5px 28px, linear-gradient(var(--gold), var(--gold)) 100% 0 / 28px 2.5px, linear-gradient(var(--gold), var(--gold)) 100% 0 / 2.5px 28px, linear-gradient(var(--gold), var(--gold)) 0 100% / 28px 2.5px, linear-gradient(var(--gold), var(--gold)) 0 100% / 2.5px 28px, linear-gradient(var(--gold), var(--gold)) 100% 100% / 28px 2.5px, linear-gradient(var(--gold), var(--gold)) 100% 100% / 2.5px 28px;filter:drop-shadow(0 0 6px #e8c48a99);background-repeat:no-repeat;animation:2.4s ease-in-out infinite breathe;position:absolute;inset:14%}.scan-line{background:var(--gold);height:2px;animation:2.2s ease-in-out infinite alternate scan-y;position:absolute;top:14%;left:14%;right:14%;box-shadow:0 0 14px 2px #e8c48a99}@keyframes scan-y{to{top:86%}}.scan-hint{color:var(--muted);font-size:12.5px}.scan-found{justify-items:center;gap:12px;display:grid}.scan-found .check-burst{width:44px;height:44px;font-size:22px}.yt-panel{z-index:50;border-left:1px solid var(--border-strong);width:min(520px,100vw);padding-top:env(safe-area-inset-top);background:linear-gradient(#16192afa,#0b0d16fc);flex-direction:column;display:flex;position:fixed;top:0;bottom:0;right:0;box-shadow:-40px 0 80px -20px #000c}.yt-panel-head{justify-content:space-between;align-items:center;padding:20px;display:flex}.yt-title{align-items:center;gap:12px;display:flex}.yt-title h2{letter-spacing:-.025em;font-size:20px}.yt-title p{color:var(--muted);margin:0;font-size:13px}.yt-logo{width:44px;height:44px;color:var(--yt);background:#f0475c1a;border-radius:14px;place-items:center;display:grid;box-shadow:inset 0 0 0 1px #f0475c4d}.yt-search{border:1px solid var(--border-strong);background:var(--well);color:var(--muted);border-radius:14px;align-items:center;gap:10px;margin:0 20px 14px;padding:6px 6px 6px 14px;transition:border-color .2s,box-shadow .2s;display:flex}.yt-search:focus-within{border-color:#f0475c99;box-shadow:0 0 0 4px #f0475c1f}.yt-search input{min-width:0;color:var(--text);background:0 0;border:0;outline:none;flex:1;padding:8px 0}.yt-results{scrollbar-width:thin;scrollbar-color:#c8d2f02e transparent;flex:1;padding:4px 20px 28px;overflow-y:auto}.yt-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;display:grid}.yt-card{text-align:left;background:0 0;border:0;border-radius:14px;gap:8px;padding:0;display:grid}.yt-card .thumb{aspect-ratio:16/9;background:var(--surface-2);box-shadow:0 0 0 1px var(--border);border-radius:12px;display:block;position:relative;overflow:hidden}.yt-card img{object-fit:cover;width:100%;height:100%;transition:transform .5s var(--ease-out)}.yt-card:hover img{transform:scale(1.06)}.play-overlay{opacity:0;color:#fff;background:#080a1273;place-items:center;transition:opacity .25s;display:grid;position:absolute;inset:0}.yt-card:hover .play-overlay,.yt-card:focus-visible .play-overlay{opacity:1}.dur{font-family:var(--mono);background:#000000bf;border-radius:6px;padding:2px 6px;font-size:11px;position:absolute;bottom:6px;right:6px}.yt-card .meta{gap:2px;display:grid}.yt-card strong{-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:13.5px;font-weight:650;line-height:1.35;display:-webkit-box;overflow:hidden}.yt-card small{color:var(--muted);font-size:12px}.yt-card.is-current .thumb{box-shadow:0 0 0 2px var(--gold), 0 0 30px -8px #e8c48a99}.yt-card.skeleton{aspect-ratio:16/11;background:linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%);background-size:300% 100%;border-radius:12px;margin-bottom:14px;animation:1.3s linear infinite shimmer}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.yt-link-card{text-align:left;background:#f0475c12;border:1px solid #f0475c59;border-radius:16px;gap:10px;width:100%;margin-bottom:16px;padding:12px;display:grid}.yt-link-card img{border-radius:10px;width:100%}.yt-link-card span{align-items:center;gap:8px;font-weight:650;display:inline-flex}.yt-suggest p{color:var(--muted);text-transform:uppercase;letter-spacing:.14em;margin:8px 0 10px;font-size:11.5px;font-weight:700}.chips{flex-wrap:wrap;gap:8px;display:flex}.chip{border:1px solid var(--border-strong);background:var(--surface);border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:600;transition:background .2s,border-color .2s}.chip:hover:not(:disabled){background:#f0475c14;border-color:#f0475c99}.banner-slot{z-index:70;top:max(10px, env(safe-area-inset-top));pointer-events:none;width:min(560px,100vw - 24px);position:fixed;left:50%;translate:-50%}.banner{pointer-events:auto;-webkit-backdrop-filter:blur(12px);border-radius:16px;align-items:center;gap:12px;padding:10px 12px 10px 16px;font-size:14px;display:flex;box-shadow:0 20px 50px -16px #000c}.banner>span:nth-child(2){flex:1}.banner-down{color:#ffdada;background:linear-gradient(135deg,#2c121af2,#1e1428f2);border:1px solid #ee808066}.banner-up{color:#cff5e6;background:linear-gradient(135deg,#0e2822f2,#0f1e2ef2);border:1px solid #4fcf9e73;justify-content:center}.check-burst{background:var(--active);color:#062a1e;width:22px;height:22px;animation:pop .5s var(--ease-out);border-radius:50%;place-items:center;font-weight:800;display:inline-grid}@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.3)}to{transform:scale(1)}}.toasts{z-index:60;right:16px;bottom:max(16px, env(safe-area-inset-bottom));gap:10px;width:min(360px,100vw - 32px);display:grid;position:fixed}.toast{border:1px solid var(--border-strong);-webkit-backdrop-filter:blur(12px);background:#141726f0;border-radius:14px;align-items:center;gap:10px;padding:12px 10px 12px 14px;font-size:14px;display:flex;box-shadow:0 16px 40px -12px #000c}.toast>span{flex:1}.toast-good{border-left:3px solid var(--active)}.toast-warn{border-left:3px solid var(--idle)}.toast-info{border-left:3px solid var(--violet)}.toast-x{color:var(--muted);background:0 0;border:0;padding:4px;display:grid}.island-slot{z-index:65;left:0;right:0;top:max(8px, calc(env(safe-area-inset-top) - 48px));pointer-events:none;justify-content:center;display:flex;position:fixed}.island{pointer-events:auto;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#000;position:relative;overflow:hidden;box-shadow:0 14px 40px -14px #000000f2,0 0 0 .5px #ffffff12}.isl-compact,.isl-alert,.isl-expanded{position:absolute;inset:0}.isl-compact{justify-content:space-between;align-items:center;padding:0 11px 0 7px;display:flex}.isl-row{align-items:center;gap:12px;min-width:0;display:flex}.isl-alert{padding:0 22px 0 14px}.isl-expanded{align-content:start;gap:14px;padding:18px 20px 14px;display:grid}.isl-art{object-fit:cover;border-radius:22%;flex:none;display:block}.isl-compact .isl-art{border-radius:50%}.isl-vinyl{background:radial-gradient(circle, #000 0 8%, var(--sun-1) 9%, var(--sun-2) 18%, var(--sun-3) 30%, transparent 31%), repeating-radial-gradient(circle, #14151d 0 1.5px, #262834 1.5px 3px);border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff1f}.isl-vinyl.spinning{animation:2.4s linear infinite spin}.isl-meta{text-align:left;flex:1;min-width:0;line-height:1.3;display:grid}.isl-meta strong{white-space:nowrap;text-overflow:ellipsis;font-size:15px;font-weight:650;overflow:hidden}.isl-meta small{color:#ebebf599;white-space:nowrap;text-overflow:ellipsis;font-size:12.5px;overflow:hidden}.isl-bars{flex:none;align-items:center;gap:2px;height:15px;display:flex}.isl-bars i{background:linear-gradient(180deg, var(--gold), var(--pink));border-radius:2px;width:3px;height:100%;transition:transform .3s;transform:scaleY(.25)}.isl-bars.on i{animation:.9s ease-in-out infinite alternate isl-bar}.isl-bars.on i:nth-child(2){animation-duration:.7s;animation-delay:-.3s}.isl-bars.on i:nth-child(3){animation-duration:1.1s;animation-delay:-.6s}.isl-bars.on i:nth-child(4){animation-duration:.8s;animation-delay:-.2s}.isl-bars.on i:nth-child(5){animation-duration:1s;animation-delay:-.5s}@keyframes isl-bar{0%{transform:scaleY(.2)}50%{transform:scaleY(1)}to{transform:scaleY(.45)}}.isl-alert .isl-bars,.isl-expanded .isl-bars{gap:3px;height:22px}.isl-alert .isl-bars i,.isl-expanded .isl-bars i{width:3.5px}.isl-spin{width:14px;height:14px;color:var(--cyan)}.isl-progress{font-family:var(--mono);color:#ebebf599;grid-template-columns:42px 1fr 42px;align-items:center;gap:10px;font-size:11px;display:grid}.isl-progress span:last-child{text-align:right}.isl-bar{background:#ffffff2e;border-radius:5px;height:5px;overflow:hidden}.isl-bar i{border-radius:inherit;background:#fff;height:100%;display:block}.isl-controls{justify-content:space-between;align-items:center;gap:6px;display:flex}.isl-btn{color:#fff;background:0 0;border:0;border-radius:50%;place-items:center;width:44px;height:44px;padding:0;transition:background .2s,transform .15s;display:grid}.isl-btn:first-child{color:var(--cyan)}.isl-btn:active:not(:disabled){background:#ffffff1f;transform:scale(.86)}.isl-btn.is-syncing svg{animation:.8s linear infinite spin}.isl-play{width:52px;height:52px}.isl-note{text-align:center;color:#ebebf599;flex:1;font-size:13px}.isl-count{background:#ffffff1f;border-radius:999px;place-items:center;min-width:32px;height:24px;padding:0 9px;font-size:12px;font-weight:700;display:grid}.party .topbar{transition:padding .4s var(--ease-out)}.party.has-island .topbar{padding-top:max(56px, calc(env(safe-area-inset-top) + 4px))}@media (width<=1020px){.party-grid{grid-template-columns:minmax(0,1fr)}.stage{min-height:0}.orbit-stage{max-height:none}}@media (width<=560px){.topbar{padding:8px 16px;padding-top:max(8px, env(safe-area-inset-top))}.brand .wordmark{display:none}.party-grid{gap:14px;padding:14px 12px 20px}.stage{padding:16px}.legend{gap:10px;padding:6px 11px;font-size:12px}.invite-fab{margin-top:8px;position:static}.source-buttons{grid-template-columns:1fr}.orbit-stage{aspect-ratio:1/.82}.is-small .sat-label strong{font-size:11.5px}.is-small .sat-label small{font-size:9.5px}.is-small .sat-body .dot{width:11px;height:11px}.is-small .sun-label strong{font-size:13px}.is-small .sun-label small{font-size:10.5px}.toasts{width:auto;left:12px;right:12px;bottom:max(12px, env(safe-area-inset-bottom));gap:6px}.toast{border-radius:12px;padding:9px 8px 9px 12px;font-size:13px}.toasts>:nth-last-child(n+3){display:none}.modal{padding:24px 18px 20px}.modal h2{padding:0 30px;font-size:20px}.big-code{gap:6px;font-size:24px}.big-code span{width:40px;height:50px}.yt-grid{grid-template-columns:1fr 1fr;gap:10px}.ping{display:none}.features{gap:8px 16px}}@media (width<=380px){body{font-size:14px}.topbar{padding-left:12px;padding-right:12px}.room-chip{padding:6px 12px 6px 10px}.party-grid{gap:12px;padding:10px 8px 16px}.stage,.now-playing,.devices,.recent{padding:14px}.devices ul,.recent ul{margin:0 -4px}.legend{gap:8px;font-size:11.5px}.controls{gap:8px}.play-btn{width:56px;height:56px}.vinyl{width:116px;height:116px}.recent-item,.device{gap:10px;padding-left:8px;padding-right:8px}.big-code{gap:5px;font-size:21px}.big-code span{border-radius:10px;width:34px;height:44px}.qr-frame{width:190px;height:190px}.invite .row .btn{padding:11px 14px}.home-card{padding:18px}.tagline{font-size:16px}.join-row{flex-direction:column}.share-targets{grid-template-columns:repeat(2,1fr)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}.orbit .spin,.sat-body{animation:none!important}.sat-body{transform:rotateX(calc(-1 * var(--tilt)))}}