:root{color-scheme:dark;--bg:#100d18;--panel:#1b1625;--panel2:#241d31;--line:#ffffff14;--text:#fff8ff;--muted:#b5a9c2;--pink:#ff8fc5;--purple:#b5a1ff;--green:#9ae6bf;--red:#ff9eaf;--radius:24px}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}body{margin:0;min-height:100vh;padding-bottom:115px;background:radial-gradient(ellipse at 8% 0%,#3a2548 0,transparent 34%),radial-gradient(ellipse at 100% 18%,#272148 0,transparent 34%),var(--bg);color:var(--text);font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}button,input{font:inherit}button{border:0;min-height:44px;padding:11px 15px;border-radius:14px;font-weight:750;color:var(--text);background:#30263e;cursor:pointer;transition:transform .15s,opacity .15s}button:active{transform:scale(.98)}button:disabled{opacity:.5;cursor:wait}.primary{color:#28152c;background:linear-gradient(120deg,var(--pink),#ffd0e5)}.secondary{background:#ffffff08;border:1px solid var(--line)}.small{min-height:38px;padding:8px 12px;font-size:.83rem}.wrap{width:min(100% - 28px,1060px);margin:auto}.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 0 10px}.brand{display:flex;align-items:center;gap:11px;font-weight:850;letter-spacing:-.4px}.brandmark{width:43px;height:43px;display:grid;place-items:center;border-radius:15px;color:#29162f;background:linear-gradient(135deg,var(--pink),var(--purple));font-size:22px}.connection{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.78rem}.dot{width:8px;height:8px;border-radius:50%;background:#7d7289}.dot.live{background:var(--green);box-shadow:0 0 12px #9ae6bf80}.hero{text-align:center;padding:32px 0 26px}.eyebrow{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#ffffff06;border-radius:999px;padding:7px 12px;color:var(--pink);font-size:.75rem;font-weight:800;letter-spacing:.08em}.hero h1{margin:16px 0 9px;font-size:clamp(2.5rem,9vw,4.8rem);line-height:1.02;letter-spacing:-.075em}.hero h1 span{color:transparent;background:linear-gradient(100deg,var(--pink),var(--purple));background-clip:text;-webkit-background-clip:text}.hero p{max-width:450px;margin:12px auto 0;color:var(--muted);line-height:1.7}.layout{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:18px;align-items:start}.stack{display:grid;gap:18px;min-width:0}.panel{min-width:0;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,#251d31f2,#191421f5);box-shadow:0 18px 55px #00000017}.panelhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}.panelhead h2{margin:0;font-size:1rem;letter-spacing:-.02em}.sub{margin:5px 0 0;color:var(--muted);font-size:.82rem}.symbol{color:var(--pink);font-size:1.1rem}.row{display:flex;gap:9px;align-items:stretch}.row+.row{margin-top:10px}.row>*{min-width:0}.row .grow{flex:1}.field{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#100d18;color:var(--text);outline:none}.field:focus{border-color:#b5a1ff99;box-shadow:0 0 0 3px #b5a1ff18}.field::placeholder{color:#83788f}.roomcode{margin:16px 0 6px;color:var(--pink);font-weight:900;font-size:clamp(1.1rem,4vw,1.45rem);letter-spacing:.15em;overflow-wrap:anywhere}.status{margin:8px 0 0;color:var(--muted);font-size:.82rem;overflow-wrap:anywhere}.status.success{color:var(--green)}.status.error{color:var(--red)}.searchbox{display:flex;gap:8px;padding:6px;border:1px solid var(--line);border-radius:17px;background:#100d18}.searchbox input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);padding:9px}.results,.queue{display:grid;gap:3px;margin-top:14px}.song{display:flex;align-items:center;gap:11px;min-width:0;padding:10px 0;border-bottom:1px solid var(--line)}.song:last-child{border-bottom:0}.cover{width:52px;height:52px;flex-shrink:0;border-radius:13px;object-fit:cover;background:linear-gradient(135deg,#4b345f,#28203b)}.songinfo{flex:1;min-width:0}.songtitle{font-size:.88rem;font-weight:780;line-height:1.4;overflow-wrap:anywhere}.songartist{margin-top:4px;color:var(--muted);font-size:.78rem;line-height:1.35;overflow-wrap:anywhere}.song button{flex-shrink:0;min-height:40px;padding:8px 11px;font-size:.8rem}.empty{padding:18px 5px;text-align:center;color:var(--muted);font-size:.84rem;line-height:1.65}.playerpanel{background:radial-gradient(ellipse at 50% 0%,#a78bfa22,transparent 48%),linear-gradient(145deg,#261b38,#191421 80%)}.artwrap{padding:8px 6px 15px;text-align:center}.playerart,.artplaceholder{display:grid;width:min(100%,260px);aspect-ratio:1;margin:auto;border-radius:24px;object-fit:cover;background:linear-gradient(135deg,#52365f,#28203b);box-shadow:0 22px 50px #0005}.artplaceholder{place-items:center;font-size:4rem;color:#ffb4d7}.trackheading{text-align:center;margin-top:18px}.trackheading h3{margin:0;font-size:1.1rem;overflow-wrap:anywhere}.trackheading p{margin:6px 0 0;color:var(--muted);font-size:.85rem;overflow-wrap:anywhere}.progress{display:flex;justify-content:space-between;margin:18px 0 7px;color:var(--muted);font-size:.73rem;font-variant-numeric:tabular-nums}input[type=range]{width:100%;accent-color:var(--pink)}.controls{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:17px}.round{width:46px;min-width:46px;padding:0;border-radius:50%;display:grid;place-items:center}.playmain{width:60px;height:60px;min-height:60px;border-radius:50%;font-size:1.25rem;color:#28152c;background:linear-gradient(135deg,var(--pink),#ffd0e5)}.hint{text-align:center;margin:14px 0 0;color:var(--muted);font-size:.76rem;line-height:1.5}.count{border-radius:999px;background:#ffffff0c;color:var(--muted);padding:5px 9px;font-size:.75rem}.queue .song{cursor:pointer}.queue .song:hover{background:#ffffff04}.mini{position:fixed;z-index:10;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));width:min(700px,calc(100% - 24px));margin:auto;padding:10px 12px;display:flex;align-items:center;gap:11px;border:1px solid #ffffff1c;border-radius:19px;background:#211a2df2;backdrop-filter:blur(20px);box-shadow:0 12px 40px #0006}.mini[hidden], [hidden]{display:none!important}.mini img{width:42px;height:42px;border-radius:11px;object-fit:cover;background:#30263e}.miniinfo{flex:1;min-width:0}.miniinfo .songtitle,.miniinfo .songartist{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.miniinfo .songtitle{font-size:.8rem}.miniinfo .songartist{font-size:.72rem}.toast{position:fixed;z-index:30;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translate(-50%,10px);width:max-content;max-width:calc(100% - 28px);padding:12px 15px;border:1px solid var(--line);border-radius:14px;background:#30263e;box-shadow:0 10px 35px #0005;font-size:.83rem;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}.skeleton{height:70px;border-radius:14px;margin:6px 0;background:linear-gradient(90deg,#211a2d,#352841,#211a2d);background-size:200% 100%;animation:shimmer 1.4s linear infinite}@keyframes shimmer{to{background-position:-200% 0}}footer{text-align:center;color:var(--muted);font-size:.76rem;padding:28px 0 12px;line-height:1.7}@media(max-width:740px){.layout{grid-template-columns:1fr}.hero{padding:26px 0 22px}.panel{padding:17px;border-radius:21px}.stack{gap:14px}.layout{gap:14px}.playerart,.artplaceholder{width:min(76%,260px)}}@media(max-width:380px){.wrap{width:calc(100% - 20px)}.panel{padding:14px}.row{gap:7px}.row button{padding-left:10px;padding-right:10px}.cover{width:46px;height:46px}.song{gap:8px}.song button{padding:7px 9px}.controls{gap:13px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}