:root{color-scheme:light;--ink:#313356;--purple:#6546d5;--pink:#ec6eaa;--aqua:#37bdb9;--line:#d9dbef}
body{background:#f1f5ff;color:var(--ink)}
header{background:#fff;color:var(--ink);border-bottom:1px solid var(--line);height:82px;padding:0 30px;gap:40px}
.brand{color:var(--purple);font-size:31px;letter-spacing:-1.5px;white-space:nowrap}.brand span{color:#ed6aab;margin-left:9px}.breadcrumb{color:#737698}.breadcrumb span{color:#b0aed2}
header button{background:#eee9ff;color:#5636ba;border:1px solid #d3c6ff;border-radius:24px;padding:11px 19px;font-weight:700}
main{gap:0}.room-column{padding:25px 25px 20px}.room-heading{margin-bottom:20px}h1{color:#363458;font-size:27px}h1 span{color:#e168a6}.room-heading p{color:#747595;font-size:14px}
.demo-tag{background:#e9e4ff;border:0;color:#6859a0;border-radius:20px;font-size:11px;letter-spacing:.7px;padding:7px 11px}
.room{background-color:#a6e2ed;background-image:url('room-color.png');border:2px solid #b7b0e4;border-radius:23px 23px 0 0;box-shadow:0 9px 0 #dfe2f4}
.room:after{background:linear-gradient(transparent 80%,#5486b122)}
.room-sign{color:#524199;text-shadow:0 2px 0 #ffffff88;font-size:18px;letter-spacing:3px}.room-sign small{color:#696094}
.speech{background:#fff;color:#5d528c;border:2px solid #c1b3f0;box-shadow:0 4px 0 #7060b02b;border-radius:20px;padding:10px 17px;font-size:14px}
.dj{color:#413466}.dj strong{background:#fffc;color:#554887;border:1px solid #d2c8ef;border-radius:15px;padding:5px 8px;font-size:12px;box-shadow:0 3px 0 #7a6bb325}.dj.active strong{background:#f7ddf0;color:#8c346c;border:2px solid #e488c2}.dj .badge{color:#674395;font-weight:700;font-size:10px;text-shadow:0 1px #fff}.avatar{filter:drop-shadow(0 5px 2px #504c842b)}.audience span{filter:drop-shadow(0 5px 2px #504c8433)}
.room-caption{color:#4d5980;background:#ffffffce;border-radius:14px;padding:5px 10px;bottom:12px;font-size:12px}.enter{background:#7054df;color:#fff;border:2px solid #9f88f5;border-radius:25px;box-shadow:0 5px 0 #5030a9,0 10px 22px #49367e35;padding:14px 24px}.enter small{color:#eee8ff}
.player{border:1px solid #d8d6ec;border-top:0;background:#fff;padding-top:22px;padding-bottom:26px;box-shadow:0 5px 0 #e1e3f4;border-radius:0 0 17px 17px;overflow:hidden}.play{background:#6b50d9;color:#fff;border:0}.eyebrow{color:#8365b8}.track h2{color:#3c3561}.track p{color:#827b9a}.player>button:not(.play){background:#f5f1ff;border-color:#e1d8f3;color:#69538e;border-radius:18px;padding:9px 12px}.volume{color:#817994}.volume input{accent-color:#9170dd}.progress{background:#efebf9}.progress i{background:#9d7be7}
.vote-row{padding:23px 0 18px;color:#747594}.vote-row button{border-radius:21px;border:1px solid #ded6ee;background:#fff;color:#78628f;padding:10px 17px}.vote-row .awesome{background:#d7f4e9;border-color:#a5dac8;color:#287763}#vote-status{color:#7b7d99}.footnote{border-color:#dbe0f0;color:#8185a0;line-height:1.7}
aside{background:#fbfcff;border-left:1px solid #dcdff0;max-height:calc(100vh - 82px)}.tabs{border-color:#e2e2f0;padding-top:16px}.tabs button{color:#9591ab}.tabs button[aria-selected=true]{border-color:#9472e7;color:#665099}.tabs span{background:#eee8fb;color:#8b73b1;border-radius:10px}.feed-intro{color:#9187ad}.feed-intro span{color:#ad76b6}.event{border-bottom:1px solid #eeedf6;padding-bottom:18px;margin-bottom:19px}.event strong{color:#655481}.event p{color:#898297}.event small{color:#a49cb0}.event .song{color:#a061be}.empty{color:#93899f}.saved{border-color:#e2dbee}.saved strong{color:#785590}.saved small{color:#9585a3}
.agent-card{border:1px solid #d7ccf4;border-radius:17px;background:#efe9fc;box-shadow:0 4px 0 #e4dcf4;padding:18px}.agent-card strong{color:#6b4d98}.agent-card small{color:#9d86b7}.you{color:#946eb8;background:#e3d7f6;padding:3px 7px;border-radius:12px}.agent-card label{color:#785696;font-size:13px}.agent-card select{color:#76618f;border-color:#d9cbea;border-radius:9px;padding:11px 8px}.agent-card p{color:#967faa;font-size:12px}
dialog{background:#fcfaff;color:#645576;border-color:#d2bdeb;border-radius:24px;box-shadow:0 20px 80px #44316040}dialog::backdrop{background:#66518966}dialog h2{color:#694b96}.notice{color:#9786a6}.primary{color:#fff;background:#8863ca;border-color:#ae91de;border-radius:21px}.close{color:#977ab2}
button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #9b68de;outline-offset:3px}
@media(max-width:1000px){header{gap:22px}.room-column{padding:20px 16px}.room-heading p{max-width:300px}.player>button:not(.play){padding:8px}.dj strong{padding:4px 5px}}
@media(max-width:740px){header{height:70px;padding:0 15px;gap:8px}.brand{font-size:25px;letter-spacing:-1px}.brand span{margin-left:4px}header button{font-size:11px;padding:9px 12px}.room-column{padding:19px 12px}h1{font-size:23px}.room-heading p{font-size:12px;max-width:230px}.demo-tag{font-size:9px;padding:5px 7px}.room{border-radius:20px 20px 0 0}.room-sign{font-size:14px}.speech{font-size:12px;padding:8px 11px}.dj strong{font-size:10px;padding:4px 3px}.room-caption{font-size:10px}.player{padding:17px 10px 21px}.player>button:not(.play){font-size:11px;padding:6px 8px}.vote-row{font-size:12px}.vote-row button{font-size:12px;padding:9px 12px}aside{max-height:none;border-top:1px solid #ddd9ed}.agent-card{margin-top:13px}}