*{box-sizing:border-box}body{margin:0;background:#0c1119;color:#edf0f5;font:15px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 80% 0%,#2e251821,transparent 60%)}button,input,select{font:inherit}button,select,input{border:1px solid #303b48;border-radius:9px;background:#171e29;color:inherit}button{padding:10px 17px;cursor:pointer;font-weight:650;transition:background .15s,transform .15s}button:hover:enabled{background:#283344}button:active:enabled{transform:translateY(1px)}button:disabled,select:disabled,input:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid #edb55c;outline-offset:3px}input:not([type=range]):not([type=checkbox]),select{padding:11px 13px;width:100%}input[type=range]{width:100%;accent-color:#efb85d;cursor:pointer;height:22px}input[type=checkbox]{accent-color:#efb85d;width:18px;height:18px}h1,h2,p{margin:0}h1{font-size:clamp(27px,3.3vw,43px);letter-spacing:-1.6px;line-height:1.2}h2{font-size:21px;letter-spacing:-.5px}label{display:block;font-size:13px;font-weight:600;margin-bottom:7px}.shell{max-width:1200px;margin:auto;padding:0 30px;position:relative}header{display:flex;justify-content:space-between;align-items:center;padding:28px 0;border-bottom:1px solid #26303a}.brand{color:inherit;text-decoration:none;display:flex;align-items:center;gap:13px;font-size:24px;letter-spacing:-.7px}.brand b{font-weight:350;color:#c6cdd7}.brand small{display:block;font-size:9px;letter-spacing:2px;color:#8291a6;font-weight:600}.mark{width:42px;height:42px;border:1px solid #edb55c70;background:#edb55c10;color:#efb85d;display:grid;place-items:center;border-radius:11px;font-weight:900;font-size:27px}.quiet{background:transparent;color:#a9b6c8;border:0}main{padding:43px 0 26px;min-height:75vh}.heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:26px}.heading .muted{margin-top:11px}.eyebrow{font-size:10px;font-weight:750;letter-spacing:2.1px;color:#caa673;margin-bottom:10px}.muted{color:#92a0b3;font-size:13px}.server-select{min-width:220px}.connection{display:flex;gap:11px;align-items:center;border:1px solid #39402f;background:#b5943410;border-radius:9px;padding:13px 17px;margin-bottom:24px;font-size:12px}.connection strong{font-weight:600}.connection>span:last-child{color:#8997aa;margin-left:auto}.dot{width:7px;height:7px;border-radius:50%;background:#d7a44e;flex:none}.connection.online{border-color:#37604d;background:#56c99009}.connection.online .dot{background:#6be4ab}.grid{display:grid;grid-template-columns:1fr 1.35fr;gap:22px}.card{padding:26px;border:1px solid #2a3441;border-radius:16px;background:linear-gradient(155deg,#19212c,#131a24);box-shadow:0 12px 35px #00000012}.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.tag{font-size:9px;font-weight:700;letter-spacing:1.2px;background:#27303c;padding:5px 9px;border-radius:5px;color:#aab7c9;white-space:nowrap}.player h2{margin-top:13px;word-break:break-word}.speaker-art{height:168px;display:flex;justify-content:center;align-items:center;gap:35px;margin:8px 0 22px;border-radius:11px;background:radial-gradient(ellipse,#e3ad4210,transparent 75%)}.speaker-ring{height:127px;width:127px;border-radius:50%;border:1px solid #9d875854;background:#141a22;box-shadow:0 0 0 9px #ab914813,0 0 0 10px #86735325;display:grid;place-items:center}.speaker-cone{height:95px;width:95px;border-radius:50%;background:radial-gradient(circle,#38414a 0 20%,#242d38 21% 48%,#101721 50% 64%,#2a3541 66%);box-shadow:inset 0 0 18px #0008}.signal{display:flex;align-items:center;gap:4px;height:75px}.signal i{display:block;width:4px;border-radius:5px;background:#d7ac67;opacity:.5;height:18px}.signal i:nth-child(2),.signal i:nth-child(6){height:32px}.signal i:nth-child(3),.signal i:nth-child(5){height:52px}.signal i:nth-child(4){height:72px}.playing .signal i{animation:pulse .8s ease-in-out infinite alternate;opacity:.9}.playing .signal i:nth-child(even){animation-delay:.3s}@keyframes pulse{to{transform:scaleY(.55)}}.seek-row{margin-top:28px}.seek-row>div{display:flex;justify-content:space-between;color:#8e9eb2;font:11px ui-monospace,monospace}.transport{display:flex;gap:8px;margin-top:18px}.transport button{flex:1;padding:11px 5px;font-size:14px}.transport span{font-size:11px;margin-left:3px}.transport .stop{background:#5c303426;color:#e8a5a7;border-color:#6a414752;flex:1.35}.volume{border-top:1px solid #2a3441;padding-top:24px;margin-top:24px}.volume>div{display:flex;justify-content:space-between}.volume output{font:13px ui-monospace,monospace;color:#efb85d}.volume small{display:block;font-size:10px;margin-top:8px}.toggle{display:flex;align-items:center;gap:10px;margin:18px 0 0;color:#aeb9c9;font-size:12px}.right-column{display:flex;flex-direction:column;gap:22px}.routing h2{margin-bottom:20px}.routing .muted{margin-top:14px;font-size:11px}#roomControl{margin-top:14px}.library{flex:1}.library .eyebrow{margin-bottom:6px}.upload-row{display:flex;gap:9px;margin-top:19px}.upload-row input{min-width:0;flex:1}.upload-button{padding:10px 13px;border:1px solid #967343;background:#c5932e18;border-radius:9px;margin:0;white-space:nowrap;color:#efc78b;cursor:pointer;display:flex;align-items:center;font-size:12px}#uploadStatus{margin-top:9px;font-size:10px}.clip-list{margin-top:19px;display:grid;gap:8px;max-height:290px;overflow-y:auto}.clip{border:1px solid #2d3846;border-radius:9px;display:flex;align-items:center;gap:12px;padding:11px 12px;background:#0d131b50}.clip .icon{color:#edb55c;font-size:18px}.clip .clip-info{min-width:0;flex:1}.clip strong{font-size:12px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.clip small{font-size:10px;color:#8999ad}.clip button{font-size:11px;padding:6px 11px}.clip .remove{border:0;background:none;color:#8795a8;padding:5px}.empty{color:#8393a7;font-size:12px;padding:16px 0}.builtins{margin-top:22px}.builtins .card-top>input{max-width:240px;margin-top:13px}.builtins .muted{margin-top:9px;font-size:11px}.sound-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:22px;max-height:240px;overflow-y:auto}.sound-grid button{text-align:left;font:11px ui-monospace,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:11px 10px;border-color:#2c3745;font-weight:500}.notice{color:#adbfce;font-size:12px;min-height:20px;margin-top:17px}.error{color:#ffb0aa;font-size:13px;white-space:pre-wrap;margin-top:9px}.login{max-width:465px;margin:40px auto 80px;padding:38px}.login h1{font-size:35px}.login .muted{margin:18px 0 27px}.login button{width:100%;margin-top:18px;text-align:left;display:flex;justify-content:space-between}.primary{background:#edb55c;color:#1f1a12;border-color:#edb55c}.primary:hover:enabled{background:#ffd291}footer{border-top:1px solid #26303a;padding:21px 0 30px;display:flex;justify-content:space-between;color:#627289;font-size:10px;letter-spacing:1.2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}@media(max-width:800px){.shell{padding:0 18px}.heading{align-items:flex-start;flex-direction:column}.server-select{width:100%}.grid{grid-template-columns:1fr}.player{order:0}.speaker-art{height:125px;margin-bottom:12px}.speaker-ring{width:96px;height:96px}.speaker-cone{width:72px;height:72px}.sound-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.builtins .card-top{flex-direction:column}.builtins .card-top>input{max-width:none;margin-top:0}.connection{flex-wrap:wrap}.connection>span:last-child{width:100%;margin-left:18px}.card{padding:21px}main{padding-top:30px}.transport span{font-size:12px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* Keep the controls usable in narrow Codex panels as well as phone browsers. */
.grid>*{min-width:0}.right-column,.card,.card-top>*{min-width:0}.server-select{min-width:0}.transport button{min-width:0}.brand>span{min-width:0}
@media(max-width:480px){.shell{padding:0 14px}header{gap:10px;flex-wrap:wrap}.brand{font-size:20px}.brand small{font-size:8px;letter-spacing:1px}.mark{width:34px;height:34px;font-size:23px}.quiet{padding:6px;font-size:12px}.card{padding:18px}.card-top{flex-wrap:wrap}.transport button{display:grid;gap:2px;justify-items:center;font-size:14px;padding:9px 3px}.transport span{font-size:10px;margin:0}.signal{gap:3px}.speaker-art{gap:25px}.upload-row{flex-wrap:wrap}.upload-row input{flex-basis:100%}.upload-button{width:100%;justify-content:center}.sound-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.login{padding:24px}.connection>span:last-child{margin-left:0}h1{overflow-wrap:anywhere}.server-select{width:100%}}

.youtube{margin-top:22px}.youtube .muted{font-size:12px;margin-top:10px}.youtube-form{display:flex;gap:10px;margin-top:20px}.youtube-form input{min-width:0;flex:1}.youtube-form button{white-space:nowrap}.youtube-results{display:grid;gap:9px;margin-top:14px}.youtube-video{display:flex;align-items:center;gap:14px;padding:12px;border:1px solid #2d3846;border-radius:9px}.youtube-video>div{min-width:0;flex:1}.youtube-video strong{display:block;font-size:13px;overflow-wrap:anywhere}.youtube-video small{display:block;color:#8999ad;font-size:11px;margin-top:5px}.youtube-video button{font-size:12px;white-space:nowrap}@media(max-width:480px){.youtube-form{flex-direction:column}.youtube-video{flex-wrap:wrap}.youtube-video>div{flex-basis:100%}.youtube-video button{width:100%}}

.clip{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}.clip-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.song-level{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:5px}.song-level label,.song-level output{font-size:12px;color:var(--muted,#9da9b9)}.song-level input{grid-column:1/-1;width:100%;min-width:0}.queue-card{margin-top:22px}.queue-controls{display:flex;gap:10px;flex-wrap:wrap}.queue-track{display:flex;align-items:center;gap:8px;padding:12px 0;border-bottom:1px solid #29313e}.queue-track>div{flex:1;min-width:0}.queue-track strong{display:block;overflow-wrap:anywhere}.queue-track small{display:block;color:#9da9b9;margin-top:4px}.queue-track button{padding:8px 12px;flex:none}@media(max-width:480px){.clip{grid-template-columns:1fr}.song-level{grid-column:1}.clip-actions button{flex:1}.queue-track{gap:4px}.queue-track button{padding:8px}}