:root{color-scheme:dark;--bg:#0a1116;--card:#121d24;--line:#26343c;--text:#edf5f6;--muted:#91a5af;--accent:#8aebd8}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 70% 0,#17313955,transparent 50%),var(--bg);color:var(--text);font-family:Inter,"Segoe UI",Arial,sans-serif}main{max-width:1120px;margin:auto;padding:32px 44px}header{display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-size:13px;letter-spacing:2px;font-weight:800}.logo{display:inline-flex;align-items:center;border:1px solid #5a877f;padding:6px 9px;border-radius:9px;font-size:20px;color:var(--accent)}.logo span{font-size:16px;margin-left:1px}.tag{font-size:9px;letter-spacing:1px;color:var(--accent);border-left:1px solid var(--line);padding-left:10px}.pill{border:1px solid var(--line);border-radius:30px;padding:8px 12px;font-size:11px;color:var(--muted)}.pill.online{color:var(--accent);border-color:#416c63}.intro{padding:55px 0 30px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--accent)}h1{font-size:clamp(42px,6vw,68px);letter-spacing:-3px;line-height:1.04;margin:16px 0}h1 em{font-style:normal;color:var(--accent)}.intro p{color:var(--muted);font-size:15px;line-height:1.7}.layout{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;align-items:start}.card{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden}.art{height:230px;position:relative;background:radial-gradient(ellipse at 85% 0,#739f8938,transparent 70%),linear-gradient(130deg,#233a3c,#172b31 65%);overflow:hidden}.art svg{position:absolute;inset:15px -20px;width:110%;height:180px;fill:none;stroke:#81d5c34a;stroke-width:2}.art svg .rail{stroke:#81d5c31e;stroke-width:5}.art-label,.art-number{position:absolute;left:26px;top:24px;font-size:8px;letter-spacing:2px;color:#b4d4ce}.art-number{top:auto;bottom:21px}.art-title{position:absolute;left:26px;bottom:54px;font-size:51px;letter-spacing:4px;font-weight:900}.art-title span{display:block;font-size:8px;letter-spacing:4px;margin-top:5px;font-weight:500;color:#cae0db}.player-body{padding:27px}.song-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}h2{font-size:21px;letter-spacing:-.5px;margin:9px 0 0}#playStatus{font-size:12px;color:var(--muted);min-height:30px;margin:15px 0}.progress{height:4px;background:#2b3b43;border-radius:4px;overflow:hidden}.progress div{height:100%;width:0;background:var(--accent);transition:width .4s linear}.time{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;margin:9px 0 21px;font-variant-numeric:tabular-nums}button{font:inherit;border:0;cursor:pointer;border-radius:10px;transition:filter .15s}button:hover{filter:brightness(1.1)}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible{outline:2px solid #91e4d5;outline-offset:3px}.primary{background:var(--accent);color:#102d28;font-size:13px;font-weight:750;padding:14px 18px;width:100%}.secondary{display:flex;justify-content:space-between;width:100%;padding:13px 15px;color:var(--text);border:1px solid #51646b;background:#213039;margin-top:12px;font-size:13px}.volume{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--muted);margin-top:23px}.volume input{width:100%;min-width:60px;accent-color:var(--accent)}.volume span{min-width:35px;text-align:right;font-variant-numeric:tabular-nums}.hint{font-size:10px;color:#718993;text-align:center;margin:19px 0 0}.connect{padding:29px}.connect>p{color:var(--muted);font-size:13px;line-height:1.8}code{color:#d1e6df;padding:3px 6px;background:#25383d;border-radius:4px}.connect form{margin-top:23px}.connect form label{display:block;font-size:11px;color:#c3d1d6;margin-bottom:9px}.connect form input{width:100%;background:#0b161d;border:1px solid #34474f;border-radius:9px;padding:13px 12px;color:var(--text);font:inherit;font-size:13px}.steps{border-top:1px solid var(--line);padding-top:21px;margin-top:26px;display:grid;gap:17px}.steps div{display:flex;gap:13px;font-size:11px;align-items:center;color:var(--muted)}.steps b{font-size:9px;color:var(--accent)}.message{color:#edbba2!important;font-size:12px!important;min-height:10px}.identity{display:flex;align-items:center;gap:12px;background:#1c302f;border:1px solid #3b5e55;padding:17px;border-radius:12px;margin-top:22px}.avatar{color:var(--accent);font-size:23px}.identity small{display:block;font-size:8px;letter-spacing:1px;color:var(--muted);margin-bottom:5px}.identity strong{font-size:16px}.text-button{background:none;color:var(--muted);font-size:11px;margin-top:15px;text-decoration:underline;padding:0}.equalizer{display:flex;align-items:center;gap:3px;height:27px}.equalizer i{display:block;width:3px;height:5px;background:var(--accent);border-radius:3px}.equalizer.playing i{animation:bounce .9s ease-in-out infinite alternate}.equalizer i:nth-child(2){animation-delay:-.4s}.equalizer i:nth-child(3){animation-delay:-.8s}.equalizer i:nth-child(4){animation-delay:-.2s}@keyframes bounce{to{height:23px}}footer{display:flex;justify-content:space-between;gap:16px;font-size:9px;color:#647b85;padding:30px 0 12px}footer span:last-child{letter-spacing:1px}[hidden]{display:none!important}@media(max-width:760px){main{padding:22px}.intro{padding-top:40px}.layout{grid-template-columns:1fr}.connect{padding:24px}.art{height:210px}footer{flex-direction:column}.pill{font-size:9px}.brand{font-size:11px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}