*{box-sizing:border-box}body{margin:0;background:#ededeb;color:#282a29;font:16px/1.45 Arial,Helvetica,sans-serif}button,select,input{font:inherit}button{cursor:pointer;border:1px solid #d0d1ce;border-radius:6px;padding:10px 15px;background:#fff;color:inherit}button:hover{filter:brightness(.95)}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #dfac33;outline-offset:3px}header{height:76px;background:#232524;color:#f8f7f1;display:flex;align-items:center;padding:0 34px;gap:55px;border-bottom:3px solid #111}.brand{font-weight:900;letter-spacing:-2px;font-size:32px;color:#fff;text-decoration:none}.brand span{color:#edc353;margin-left:5px}.breadcrumb{font-size:14px;color:#c3c5c0}.breadcrumb span{margin:0 15px;color:#696b67}header button{margin-left:auto;background:#333634;border-color:#535650;color:#f8f7f1;font-size:14px}main{max-width:1550px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 340px;min-height:calc(100vh - 76px)}.room-column{padding:25px 26px}.room-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:19px}h1{font-size:25px;letter-spacing:-.8px;margin:0 0 4px}h1 span{color:#aa822a}p{margin:0}.room-heading p{font-size:14px;color:#72756f}.demo-tag{font-size:12px;letter-spacing:1px;border:1px solid #c8c9c3;border-radius:4px;padding:5px 8px;white-space:nowrap}.room{height:510px;position:relative;background:#292823 url('room.png') center/cover;border:1px solid #191b18;border-radius:10px 10px 0 0;overflow:hidden;isolation:isolate}.room:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 70%,#17191588);z-index:-1}.room-sign{position:absolute;top:8%;left:0;right:0;text-align:center;color:#efcc76;font-size:18px;letter-spacing:4px;font-weight:bold;text-shadow:0 2px 4px #000}.room-sign small{display:block;font-size:10px;margin-top:4px;letter-spacing:2px;color:#c5aa75}.speech{position:absolute;top:22%;left:50%;transform:translateX(-50%);background:#fff8e6;border-radius:8px;padding:9px 14px;font-size:13px;max-width:80%;text-align:center;box-shadow:0 3px 12px #0004;z-index:4}.djs{position:absolute;top:36%;left:15%;right:15%;display:flex;justify-content:space-between;align-items:end}.dj{border:0;background:none;padding:0;width:19%;position:relative;text-align:center;color:#eee}.dj:hover{filter:brightness(1.1)}.avatar{display:block;font-size:55px;line-height:1.2;filter:drop-shadow(0 6px 3px #0009);transform-origin:bottom}.dj strong{display:inline-block;font-size:12px;background:#222d;padding:3px 5px;border-radius:4px;margin-top:10px;white-space:nowrap}.dj.active strong{color:#efc550;border:1px solid #efc550}.dj .badge{display:block;font-size:10px;letter-spacing:1px;color:#eee;visibility:hidden}.dj.active .badge{visibility:visible}.playing .dj.active .avatar{animation:bob .52s infinite alternate}.audience{position:absolute;bottom:12%;left:15%;right:15%;display:flex;justify-content:center;gap:22px;flex-wrap:wrap}.audience span{font-size:42px;filter:drop-shadow(0 5px 4px #0008)}.playing .audience span{animation:bob .55s infinite alternate;animation-delay:var(--delay)}@keyframes bob{to{transform:translateY(-5px) rotate(4deg)}}.room-caption{position:absolute;bottom:13px;left:17px;font-size:12px;color:#e6e6db}.enter{position:absolute;left:50%;bottom:21%;transform:translateX(-50%);background:#f2c95a;border:1px solid #f9df90;font-size:18px;font-weight:bold;padding:15px 26px;box-shadow:0 5px 28px #0007;z-index:5;white-space:nowrap}.enter small{display:block;font-weight:normal;font-size:12px;margin-top:2px}.player{background:#fff;position:relative;display:flex;align-items:center;gap:15px;padding:23px 20px 26px;border:1px solid #d6d6d0;border-top:0}.play{background:#282c28;color:#f4c75c;border-radius:50%;width:46px;height:46px;padding:0;flex-shrink:0}.track{flex:1}.eyebrow{font-size:10px;letter-spacing:1.3px;color:#8d743d;font-weight:bold}h2{font-size:20px;margin:1px 0 2px;letter-spacing:-.5px}.track p{font-size:12px;color:#767973}.player>button:not(.play){font-size:13px;padding:8px}.volume{font-size:10px;color:#777;display:flex;flex-direction:column;width:60px;gap:4px}.volume input{width:60px;accent-color:#b99a43}.progress{position:absolute;bottom:0;left:0;right:0;height:4px;background:#ddd}.progress i{display:block;width:0;background:#d7b150;height:100%}.vote-row{display:flex;gap:10px;align-items:center;padding:19px 0;font-size:13px}.vote-row>span:first-child{margin-right:auto}.vote-row button{font-size:14px;font-weight:bold}.awesome{background:#e9eedf;border-color:#b5c19e;color:#456331}#vote-status{font-size:12px;color:#7c8077;max-width:155px}.footnote{font-size:12px;color:#777b72;border-top:1px solid #d6d8d1;padding-top:12px}aside{background:#f8f8f5;border-left:1px solid #d4d6ce;display:flex;flex-direction:column;max-height:calc(100vh - 76px);min-height:750px}.tabs{display:flex;border-bottom:1px solid #d4d6ce;padding:13px 16px 0}.tabs button{border:0;border-radius:0;background:transparent;padding:15px 13px;color:#777;font-size:14px}.tabs button[aria-selected=true]{border-bottom:3px solid #aa8c42;color:#222;font-weight:bold}.tabs span{background:#e9eae3;border-radius:4px;padding:2px 5px;font-size:12px}.tab-content{padding:23px 22px;flex:1;overflow:auto}.tab-content[hidden]{display:none}.feed-intro{font-size:10px;letter-spacing:1px;color:#85877f;margin-bottom:20px}.feed-intro span{float:right;color:#9f8140}.event{display:flex;gap:12px;margin-bottom:23px;animation:arrive .3s ease}.event-icon{font-size:25px;line-height:1.3}.event strong{font-size:13px}.event p{font-size:14px;line-height:1.6;margin:3px 0;color:#74786f}.event small{font-size:11px;color:#92968c}.event .song{color:#8d7137}.agent-card{margin:0 18px 22px;padding:18px;border:1px solid #d6d9cd;border-radius:9px;background:#eff1e8}.agent-card-top{display:flex;gap:10px;align-items:center;margin-bottom:20px}.mini-avatar{font-size:28px}.agent-card strong{font-size:14px}.agent-card small{display:block;font-size:11px;color:#7f8774}.you{margin-left:auto;font-size:10px;color:#7e846d}.agent-card label{font-size:12px;font-weight:bold;display:block;margin-bottom:7px}.agent-card select{width:100%;font-size:13px;background:#fff;padding:10px 8px;border:1px solid #cbd0bc;border-radius:5px}.agent-card p{font-size:12px;color:#77806d;margin-top:10px}.empty{font-size:14px;color:#777;line-height:1.8;padding-top:15px}.saved{padding:14px 0;border-bottom:1px solid #ddd}.saved strong{display:block;font-size:14px}.saved small{color:#777;font-size:12px}dialog{max-width:470px;width:calc(100% - 32px);padding:35px;border:1px solid #c8c8be;border-radius:12px;color:#30332b;background:#f9f9f4;box-shadow:0 20px 80px #0005}dialog::backdrop{background:#151a18aa}dialog h2{font-size:28px;margin:16px 0}dialog p,dialog li{font-size:15px;line-height:1.7}dialog ol{padding-left:22px}.notice{color:#7b7e74;margin:18px 0}.close{position:absolute;right:10px;top:8px;border:0;background:none;font-size:24px}.primary{background:#e8c365;border-color:#be9e48;font-weight:bold;width:100%}@keyframes arrive{from{opacity:0;transform:translateY(5px)}}@media(min-width:1450px){.room{height:570px}}@media(max-width:1000px){main{grid-template-columns:minmax(0,1fr) 290px}.room-column{padding:18px 15px}.room{height:460px}.volume{display:none}.djs{left:9%;right:9%}.avatar{font-size:44px}.audience{gap:10px}#vote-status{display:none}}@media(max-width:740px){header{height:65px;padding:0 16px;gap:10px}.brand{font-size:28px}.breadcrumb{display:none}header button{font-size:12px;padding:9px}main{display:block}.room-column{padding:17px 12px}.room-heading{align-items:start}h1{font-size:21px}.room-heading p{font-size:12px;max-width:230px}.demo-tag{font-size:9px;padding:4px;letter-spacing:.5px}.room{height:440px;background-size:auto 100%}.room-sign{font-size:15px;top:9%}.djs{left:5%;right:5%;top:39%}.avatar{font-size:40px}.dj strong{font-size:10px;padding:3px 2px}.speech{font-size:12px;width:75%;top:24%}.audience{left:8%;right:8%;gap:13px;bottom:13%}.audience span{font-size:32px}.player{padding:16px 10px 21px;gap:10px}.track h2{font-size:16px}.eyebrow{font-size:9px}.track p{font-size:10px}.play{width:35px;height:35px}.player>button:not(.play){font-size:11px;padding:6px}#next{max-width:45px}.vote-row{gap:7px;font-size:12px}.vote-row button{padding:9px;font-size:13px}.footnote{line-height:1.6}aside{min-height:unset;max-height:none;border-left:0;border-top:1px solid #d4d6ce}.tab-content{max-height:350px;min-height:190px}.agent-card{margin-top:8px}.enter{font-size:16px}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}
/* Keep the DJs seated behind the illustrated decks. */
.djs{top:20%}.speech{top:58%}.room-sign{top:4%}.enter{bottom:19%}.audience{bottom:8%}
@media(max-width:740px){.djs{top:22%}.speech{top:57%}.room-sign{top:6%}}