:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#24212b;background:#f4f2f8;font-synthesis:none;font-size:14px;--purple:#7955da;--muted:#8b8596;--line:#e5e0ed}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.43}button:focus-visible,input:focus-visible{outline:3px solid #bda8f0;outline-offset:3px}button{color:inherit}button,a,input{touch-action:manipulation}[hidden]{display:none!important}.app{width:min(100%,440px);margin:auto;padding:22px 25px max(18px,env(safe-area-inset-bottom));min-height:100dvh;display:flex;flex-direction:column}.topbar{display:flex;justify-content:space-between;align-items:center}.brand{font-size:10px;letter-spacing:2px;font-weight:800}.online{font-size:11px;color:var(--muted);display:flex;gap:5px;align-items:center}.online i{width:5px;height:5px;border-radius:50%;background:#8b6cce}.room-heading{display:flex;align-items:center;justify-content:space-between;margin-top:28px}.eyebrow{font-size:9px;letter-spacing:1.8px;color:var(--muted);margin:0 0 7px;font-weight:600}h1{font-size:36px;letter-spacing:-1.8px;line-height:1.1;margin:0;font-weight:750}.dot{color:var(--purple)}.round{width:36px;height:36px;border:1px solid var(--line);background:#faf9fc;border-radius:50%;font-size:20px;display:grid;place-items:center}.tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);margin-top:23px}.tab{border:0;background:none;color:var(--muted);padding:12px 0;font-size:12px}.tab.active{color:#30273f;box-shadow:0 2px var(--purple);font-weight:650}#chat-dot{font-size:8px;color:var(--purple);margin-left:3px}.notice{margin:12px 0 16px;font-size:11px;line-height:1.5;color:#75628f;background:#ece6f7;padding:10px 12px;border-radius:10px}.notice.error{color:#8f3a4c;background:#f4e5e9}.notice a{color:inherit;font-weight:700}.player{max-width:330px;width:100%;margin:auto}.artwork{height:225px;border-radius:15px;background:radial-gradient(ellipse at 20% 10%,#cabce8,transparent 55%),linear-gradient(135deg,#d7cce9,#a899c6);position:relative;display:grid;place-items:center;overflow:hidden;box-shadow:0 10px 24px #60517019}.record{width:182px;height:182px;border-radius:50%;background:repeating-radial-gradient(circle,#29222f 0,#29222f 2px,#39303e 3px,#29222f 4px);display:grid;place-items:center;box-shadow:7px 14px 20px #271c493b;transform:rotate(-12deg)}.record-label{width:80px;height:80px;border:6px solid #c6b8dd;border-radius:50%;background:#ece6f4;color:#4c395f;text-align:center;display:flex;justify-content:center;flex-direction:column;font-weight:750;font-size:15px;line-height:1.3}.record-label span{font-size:6px;letter-spacing:.6px;font-weight:500}.artwork-caption{position:absolute;left:14px;bottom:12px;font-size:7px;letter-spacing:1.5px;color:#382c4d;font-weight:650}.track{text-align:center;margin:20px 0 17px}.track h2{margin:0 0 7px;font-size:18px;letter-spacing:-.3px}.track p{font-size:10px;line-height:1.5;margin:0;color:var(--muted)}.progress{height:3px;background:#ded8e8;border-radius:3px}.time{display:flex;justify-content:space-between;color:#9b94a7;font-size:9px;margin-top:6px}.queue-heading{display:flex;align-items:center;justify-content:space-between;margin-top:18px}.queue-heading h3{font-size:11px;font-weight:650;margin:0}.queue-heading span{font-size:9px;color:var(--muted)}.empty-queue{padding:16px 0;color:#a098ac;font-size:11px;border-bottom:1px solid var(--line)}.actions{display:grid;grid-template-columns:1fr 42px 42px;gap:8px;margin:13px 0 20px}.actions button{height:35px;border:1px solid var(--line);background:#faf9fc;border-radius:10px;font-size:12px}.actions button:first-child{font-size:11px;background:#e8e0f5;border-color:#e2d6f3;color:#71549c}.wheel{position:relative;width:220px;height:220px;margin:5px auto 16px;border-radius:50%;background:radial-gradient(ellipse at 32% 22%,#fff,#e9e7ec 57%,#d6d2dc);border:1px solid #d2cddc;box-shadow:inset 0 1px 2px white,0 8px 20px #4d415511}.wheel button{position:absolute;border:none;background:none}.wheel-dislike,.wheel-like{width:48px;height:48px;top:5px;border:1px solid #ddd7e5!important;border-radius:50%;background:linear-gradient(#fff,#e7e3ed)!important;font-size:25px}.wheel-dislike{left:0}.wheel-like{right:0;color:#806599}.wheel-menu{left:calc(50% - 17px);top:20px;width:34px;height:32px;font-size:19px;color:#8a7d9c}.wheel-prev,.wheel-next{top:100px;font-size:16px;letter-spacing:-6px;color:#786f83}.wheel-prev{left:23px}.wheel-next{right:26px}.wheel-play{width:64px;height:64px;left:78px;top:78px;background:linear-gradient(#faf9fc,#ded8e6)!important;border:1px solid #c9c0d6!important;box-shadow:inset 0 1px 3px white,0 2px 3px #9886a91a;border-radius:50%;color:#79668e;font-size:20px;padding-left:10px}.wheel-volume{position:absolute;bottom:24px;width:100%;text-align:center;font-size:16px;color:#9d92a9}footer{display:flex;justify-content:space-between;font-size:9px;color:#aaa2b5;margin-top:auto;padding-top:16px;gap:12px}.chat{display:flex;flex:1;flex-direction:column;min-height:330px}.chat-info{display:flex;align-items:center;gap:11px;padding:0 0 15px;border-bottom:1px solid var(--line)}.mini-cover{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:#e3d9f1;color:#806499;font-size:22px}.chat-info strong{font-size:12px}.chat-info p{color:var(--muted);font-size:10px;margin:5px 0 0}.messages{flex:1;min-height:200px;max-height:calc(100dvh - 375px);overflow-y:auto;padding:18px 0;overscroll-behavior:contain}.empty-chat{text-align:center;margin:40px 0;color:var(--muted);font-size:12px}.message{max-width:88%;margin:0 0 12px}.message.mine{margin-left:auto}.message-meta{font-size:10px;color:#9a8fa9;margin:0 5px 5px;display:flex;gap:9px;align-items:center}.mine .message-meta{justify-content:flex-end}.message-meta strong{color:#7b609c;font-weight:600}.message-text{border:1px solid var(--line);background:#fff;border-radius:4px 13px 13px;padding:10px 12px;font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}.mine .message-text{border-radius:13px 4px 13px 13px;background:#eae1f6;border-color:#e2d5f1}.composer{display:flex;gap:8px;padding-top:12px;border-top:1px solid var(--line);margin-top:auto}.composer input{width:100%;min-width:0;border:1px solid var(--line);background:white;border-radius:13px;padding:13px 14px;font-size:16px}.composer button{flex-shrink:0;width:45px;border:0;border-radius:13px;background:var(--purple);color:white;font-size:24px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0)}dialog{border:1px solid var(--line);border-radius:22px;background:#f7f5fa;color:inherit;width:min(390px,calc(100% - 24px));padding:23px}dialog::backdrop{background:#2a20345c;backdrop-filter:blur(5px)}.dialog-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.dialog-top h2{font-size:24px;margin:0;letter-spacing:-.7px}.room-card{display:flex;gap:13px;align-items:center;width:100%;text-align:left;background:#eee7f7;border:1px solid #d9c9ec;border-radius:14px;padding:16px 12px}.city-icon{background:#dbcced;color:#75518f;border-radius:11px;width:42px;height:42px;display:grid;place-items:center;font-size:23px;font-weight:650}.room-card strong{display:block;font-size:16px}.room-card small{display:block;color:#9a8aa9;font-size:10px;margin-top:5px;line-height:1.5}.selected{margin-left:auto;color:var(--purple)}.dialog-note{color:var(--muted);font-size:11px;line-height:1.6;margin:20px 0 0}@media(min-width:600px){.app{margin:28px auto;border:1px solid #e3ddec;border-radius:30px;min-height:900px;box-shadow:0 25px 90px #5943710c}}@media(max-height:760px){.artwork{height:185px}.record{width:158px;height:158px}.room-heading{margin-top:18px}.wheel{margin-top:0}.track{margin:14px 0}.actions{margin-bottom:10px}}