:root{--ink:#10122b;--muted:#6d6f82;--paper:#f8f8f5;--lavender:#e6e5ff;--electric:#675bff;--lime:#d8ff62;--line:#dfe0e8;--card:#fff}*{box-sizing:border-box}html{background:var(--paper)}body{color:var(--ink);background:var(--paper);margin:0;font-family:DM Sans,Arial,sans-serif}button,input{font:inherit}button{cursor:pointer}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.topbar,.room-header{border-bottom:1px solid var(--line);align-items:center;height:78px;padding:0 clamp(20px,5vw,74px);display:flex}.brand{color:var(--ink);letter-spacing:-1px;background:0 0;border:0;align-items:center;gap:8px;padding:0;font-size:20px;font-weight:700;text-decoration:none;display:flex}.brand-mark{background:var(--electric);color:#fff;border-radius:9px;place-items:center;width:29px;height:29px;font-family:Fraunces,serif;font-size:20px;display:grid}.beta{color:var(--electric);background:var(--lavender);letter-spacing:.4px;border-radius:5px;margin-left:10px;padding:4px 7px;font:500 10px DM Mono,monospace}.how-link{color:var(--ink);align-items:center;gap:4px;margin-left:auto;font-size:14px;font-weight:600;text-decoration:none;display:flex}.home-hero{grid-template-columns:1fr .86fr;align-items:center;gap:clamp(45px,8vw,115px);max-width:1280px;min-height:530px;margin:auto;padding:clamp(58px,9vw,110px) clamp(20px,5vw,74px) 72px;display:grid}.eyebrow{color:var(--electric);letter-spacing:1px;align-items:center;gap:7px;margin:0 0 14px;font:500 11px DM Mono,monospace;display:flex}.hero-copy h1{letter-spacing:-5px;margin:0;font:700 clamp(55px,7vw,94px)/.91 Fraunces,Georgia,serif}.hero-copy h1 i{color:var(--electric);font-weight:600}.hero-subtitle{max-width:460px;color:var(--muted);margin:27px 0 30px;font-size:17px;line-height:1.6}.home-mode-picker{grid-template-columns:1fr 1fr;gap:9px;max-width:500px;margin:0 0 23px;display:grid}.home-mode-picker button{text-align:left;color:var(--muted);border:1px solid var(--line);background:#fff;border-radius:10px;align-items:flex-start;gap:9px;padding:12px;transition:border-color .15s,background .15s,color .15s;display:flex}.home-mode-picker button:hover,.home-mode-picker button.selected{border-color:var(--electric);color:var(--ink);background:#f3f2ff}.home-mode-picker button>span{flex-direction:column;gap:2px;display:flex}.home-mode-picker strong{font-size:12px}.home-mode-picker small{font-size:10px;line-height:1.3}.primary-button{background:var(--ink);color:#fff;box-shadow:4px 4px 0 var(--lime);border:0;border-radius:11px;align-items:center;gap:19px;padding:14px 17px 14px 20px;font-weight:700;transition:transform .2s,box-shadow .2s;display:flex}.primary-button:disabled{cursor:not-allowed;box-shadow:none;background:#999baa}.primary-button:disabled:hover{transform:none}.primary-button:hover{box-shadow:2px 2px 0 var(--lime);transform:translate(2px,2px)}.room-preview{border:1px solid var(--ink);color:#fff;box-shadow:12px 12px 0 var(--lime);background:#1c2154;border-radius:18px;overflow:hidden;transform:rotate(3deg)}.preview-top,.preview-bottom{letter-spacing:.5px;justify-content:space-between;align-items:center;padding:15px 18px;font:11px DM Mono,monospace;display:flex}.preview-top{border-bottom:1px solid #535883}.live-dot{background:#ff5a5f;border-radius:50%;width:7px;height:7px;margin-right:5px;display:inline-block;box-shadow:0 0 0 3px #ff5a5f33}.preview-video{background:linear-gradient(135deg,#4b3f9c,#2a5d93 55%,#daa0a1);place-items:center;height:230px;display:grid;position:relative;overflow:hidden}.preview-video:after{content:"";background:linear-gradient(120deg,#0000 35%,#fff3 35.5%,#0000 36%),linear-gradient(60deg,#0000 40%,#fff2 40.5%,#0000 41%);position:absolute;inset:0}.preview-video button{background:var(--lime);width:65px;height:65px;color:var(--ink);z-index:1;border:0;border-radius:50%;place-items:center;padding-left:5px;display:grid}.preview-video p{z-index:1;letter-spacing:2px;margin:0;font:500 10px DM Mono;position:absolute;bottom:8px;left:17px}.video-orb{filter:blur(1px);border-radius:50%;position:absolute}.orb-a{background:#fcbd67;width:220px;height:220px;top:-100px;right:-40px}.orb-b{background:#6959ee;width:190px;height:190px;bottom:-90px;left:10px}.preview-bottom strong,.preview-bottom span{display:block}.preview-bottom strong{font:600 15px DM Sans}.preview-bottom>div:first-child span{color:#bfc1dd;margin-top:3px}.stacked-avatars{display:flex}.stacked-avatars b,.avatar{width:28px;height:28px;color:var(--ink);border:2px solid #1c2154;border-radius:50%;place-items:center;font-size:10px;display:grid}.stacked-avatars b:first-child{background:#fdd07a}.stacked-avatars b:nth-child(2){background:#b9f6e2;margin-left:-7px}.stacked-avatars b:nth-child(3){background:#fff;margin-left:-7px}.join-strip{background:var(--lavender);justify-content:space-between;align-items:center;gap:35px;min-height:160px;padding:31px max(20px,50vw - 566px);display:flex}.join-strip .eyebrow{margin-bottom:5px}.join-strip h2{letter-spacing:-1px;margin:0;font:600 27px Fraunces,serif}.join-form{background:#fff;border:1px solid #b9b9d5;border-radius:10px;width:min(100%,420px);padding:4px;display:flex}.join-form input{letter-spacing:1px;border:0;outline:0;flex:1;min-width:0;padding:10px 12px;font:500 13px DM Mono}.join-form button{background:var(--electric);color:#fff;border:0;border-radius:7px;place-items:center;width:44px;display:grid}.how-grid{grid-template-columns:repeat(3,1fr);gap:25px;max-width:1280px;margin:auto;padding:77px clamp(20px,5vw,74px);display:grid}.how-grid div{border-top:1px solid var(--ink);padding-top:16px}.how-grid span{color:var(--electric);font:500 11px DM Mono}.how-grid h3{margin:34px 0 8px;font:600 20px Fraunces,serif}.how-grid p{color:var(--muted);max-width:260px;margin:0;font-size:14px;line-height:1.5}.room-shell{background:#f3f4fb;min-height:100vh}.room-header{background:#fff;height:68px;padding:0 clamp(17px,3vw,42px)}.room-brand{font-size:18px}.room-brand .brand-mark{width:26px;height:26px;font-size:17px}.room-status{color:var(--muted);align-items:center;gap:5px;margin:auto;font-size:12px;display:flex}.sync-dot{background:#ffb246;border-radius:50%;width:7px;height:7px}.sync-dot.connected{background:#62c673;box-shadow:0 0 0 3px #62c67322}.sync-dot.error,.sync-dot.room-not-found{background:#ff5a5f}.code-chip{color:var(--electric);letter-spacing:.5px;background:#f1f1fc;border-radius:4px;margin-left:7px;padding:5px 8px;font:500 10px DM Mono}.header-actions{gap:7px;display:flex}.icon-button,.menu-button{border:1px solid var(--line);width:34px;height:34px;color:var(--ink);background:#fff;border-radius:8px;place-items:center;display:grid}.menu-button{display:none}.room-layout{grid-template-columns:minmax(0,1fr) 340px;gap:27px;max-width:1450px;margin:auto;padding:clamp(20px,3vw,42px);display:grid}.video-frame{aspect-ratio:16/8.65;background:#191a2e;border-radius:14px;position:relative;overflow:hidden;box-shadow:0 12px 30px #151b4a18}.video-frame iframe{border:0;width:100%;height:100%}.video-label{color:#fff;text-shadow:0 1px 6px #000;opacity:0;flex-direction:column;gap:3px;transition:opacity .2s;display:flex;position:absolute;bottom:17px;left:19px}.video-frame:hover .video-label,.video-frame:hover .floating-fullscreen{opacity:1}.video-label span{letter-spacing:1px;font:500 9px DM Mono}.video-label strong{font-size:14px}.floating-fullscreen{color:#fff;opacity:0;background:#10122bbb;border:0;border-radius:6px;padding:8px;position:absolute;bottom:15px;right:15px}.now-playing{grid-template-columns:61px 1fr 43px;align-items:center;gap:14px;min-height:105px;padding:17px 0;display:grid}.artwork{color:#fff;background:linear-gradient(145deg,#9386ed,#f5bd94);border-radius:10px;place-items:center;height:61px;display:grid}.track-info p{color:var(--electric);letter-spacing:1px;margin:0 0 3px;font:500 9px DM Mono}.track-info h2{letter-spacing:-.4px;margin:0 0 3px;font-size:16px}.track-info span,.time{color:var(--muted);font-size:12px}.play-button{background:var(--ink);color:#fff;border:0;border-radius:50%;place-items:center;width:39px;height:39px;display:grid}.timeline{background:#d9dbe6;border-radius:5px;grid-column:2/4;height:3px}.timeline span{background:var(--electric);border-radius:5px;height:100%;display:block}.time{text-align:right;grid-area:2/3;margin-top:4px;font:10px DM Mono}.mode-switch{border:1px solid var(--line);background:#ededf5;border-radius:13px;grid-template-columns:1fr 1fr;gap:8px;padding:5px;display:grid}.mode-switch button{text-align:left;color:var(--muted);background:0 0;border:0;border-radius:9px;grid-template-columns:22px 1fr;align-items:center;gap:0 8px;padding:13px 15px;display:grid}.mode-switch button.active{color:var(--ink);background:#fff;box-shadow:0 1px 5px #11122b12}.mode-switch span{font-size:13px;font-weight:700}.mode-switch small{grid-column:2;margin-top:2px;font-size:11px}.add-video{border:1px solid var(--line);height:53px;color:var(--muted);background:#fff;border-radius:11px;align-items:center;gap:10px;margin-top:18px;padding:6px 7px 6px 15px;display:flex}.add-video input{border:0;outline:0;flex:1;min-width:0;font-size:13px}.add-video button{background:var(--ink);color:#fff;border:0;border-radius:7px;align-items:center;gap:5px;height:39px;padding:0 12px;font-size:12px;font-weight:600;display:flex}.add-video button:disabled{cursor:not-allowed;background:#c7c8d2}.room-notice{color:var(--electric);margin:8px 0 0;font-size:12px}.side-panel{border:1px solid var(--line);background:#fff;border-radius:14px;align-self:start;padding:22px}.side-heading{justify-content:space-between;align-items:start;display:flex}.side-heading .eyebrow{margin-bottom:3px;font-size:9px}.side-heading h2{letter-spacing:-.5px;margin:0;font:600 18px Fraunces,serif}.side-heading>span{color:var(--electric);background:var(--lavender);border-radius:50%;place-items:center;width:23px;height:23px;font:11px DM Mono;display:grid}.queue-list{margin-top:20px}.queue-item{text-align:left;background:#fff;border:0;border-bottom:1px solid #eeeef4;align-items:center;gap:9px;width:100%;padding:8px 0;display:flex}.queue-item:hover .queue-copy strong{color:var(--electric)}.queue-number{color:#9ea0af;width:19px;font:10px DM Mono}.queue-item img{object-fit:cover;background:var(--lavender);border-radius:4px;width:43px;height:31px}.queue-copy{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.queue-copy strong{white-space:nowrap;text-overflow:ellipsis;font-size:12px;transition:color .15s;overflow:hidden}.queue-copy small,.duration{color:var(--muted);font-size:10px}.duration{font-family:DM Mono}.people{padding-top:23px}.add-person{background:var(--lavender);color:var(--electric);border:0;border-radius:50%;place-items:center;width:27px;height:27px;display:grid}.people-list{gap:9px;margin-top:13px;display:grid}.people-list>div{align-items:center;gap:8px;font-size:12px;display:flex}.people-list .avatar{border:0;width:25px;height:25px}.avatar-you{background:#f9cf78}.avatar-ry{background:#8ee5cb}.avatar-tn{background:#e5a7d5}.people-list small{color:var(--muted)}.people-list svg,.presence{color:#e5af20;margin-left:auto}.presence{background:#74cd79;border-radius:50%;width:7px;height:7px}.order-layout{grid-template-areas:"watch queue""input qr";align-items:start}.order-layout .watch-panel{grid-area:watch}.order-layout .side-panel{grid-area:queue}.order-layout .video-frame{aspect-ratio:16/6.7}.order-layout .now-playing{grid-template-columns:47px 1fr 40px;gap:11px;min-height:64px;padding:8px 0}.order-layout .artwork{width:47px;height:47px}.order-layout .timeline,.order-layout .time,.order-layout .mode-switch{display:none}.order-input-panel{border:1px solid var(--line);background:#fff;border-radius:14px;grid-area:input;padding:16px}.order-input-panel .add-video{margin:0}.order-qr-card{background:var(--ink);color:#fff;border-radius:14px;grid-area:qr;padding:14px;box-shadow:0 14px 27px #151b4a1f}.order-qr-card .eyebrow{color:var(--lime);align-items:center;gap:6px;margin:0 0 5px;font-size:9px;display:flex}.order-qr-card h2{letter-spacing:-.5px;margin:0;font:600 21px Fraunces,serif}.order-qr-card>p:not(.eyebrow){display:none}.order-qr{background:#eef0ff;border-radius:8px;margin-top:9px;padding:5px;display:inline-flex}.order-link{color:#dfe0ed;background:#ffffff14;border-radius:7px;align-items:center;gap:7px;min-width:0;margin-top:8px;padding:6px 6px 6px 9px;font:9px DM Mono;display:flex}.order-link span{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.order-link button{color:#fff;background:#ffffff17;border:0;border-radius:6px;flex:none;place-items:center;width:27px;height:27px;margin-left:auto;display:grid}.empty-player{color:#f4f4ff;text-align:center;background:radial-gradient(circle at 30% 15%,#6154c3 0,#0000 34%),linear-gradient(135deg,#13152c,#27294b);flex-direction:column;justify-content:center;align-items:center;gap:8px;width:100%;height:100%;padding:28px;display:flex}.empty-player svg{color:var(--lime)}.empty-player strong{font:600 22px Fraunces,serif}.empty-player span{color:#c7c8db;max-width:270px;font-size:13px;line-height:1.5}.empty-queue{color:var(--muted);border-bottom:1px solid #eeeef4;margin:17px 0 0;padding:14px 0 18px;font-size:12px;line-height:1.55}.play-button:disabled{color:#84869b;cursor:not-allowed;background:#dfe0eb}.rename-listener{width:100%;color:var(--electric);background:#fafaff;border:1px dashed #cbcbe0;border-radius:7px;margin-top:13px;padding:8px;font-size:11px;font-weight:700}.name-card{background:#fff;border-radius:15px;width:min(100% - 32px,420px);padding:31px;position:relative;box-shadow:0 24px 70px #11122b40}.name-card .eyebrow{margin:0 0 8px}.name-card h2{letter-spacing:-.8px;margin:0 0 22px;font:600 28px Fraunces,serif}.name-card label{margin-bottom:7px;font-size:12px;font-weight:700;display:block}.name-card input{border:1px solid var(--line);outline-color:var(--electric);border-radius:8px;width:100%;height:47px;padding:0 12px;font-size:14px}.save-name{background:var(--ink);color:#fff;border:0;border-radius:8px;width:100%;height:45px;margin-top:13px;font-weight:700}.save-name:disabled{cursor:not-allowed;background:#c7c8d2}.modal-backdrop{z-index:5;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#10122b80;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.invite-card{text-align:center;background:#fff;border-radius:18px;width:min(100%,450px);padding:32px;position:relative;box-shadow:0 25px 60px #10122b55}.modal-close{width:31px;height:31px;color:var(--muted);background:#f0f1f8;border:0;border-radius:50%;place-items:center;display:grid;position:absolute;top:13px;right:13px}.invite-card .eyebrow{justify-content:center}.invite-card h2{letter-spacing:-1px;margin:0;font:600 31px Fraunces,serif}.invite-description{color:var(--muted);font-size:13px;line-height:1.5}.qr-wrap{background:#eef0ff;border-radius:12px;margin:13px auto 7px;padding:10px;display:inline-flex}.invite-link{text-align:left;background:#f4f4f8;border-radius:8px;align-items:center;gap:8px;margin-top:8px;padding:6px 6px 6px 12px;display:flex}.invite-link span{text-overflow:ellipsis;white-space:nowrap;color:var(--muted);flex:1;font:10px DM Mono;overflow:hidden}.invite-link button{background:var(--ink);color:#fff;border:0;border-radius:5px;align-items:center;gap:5px;padding:8px 9px;font-size:11px;display:flex}.invite-code{color:var(--muted);margin-top:12px;font-size:12px}.invite-code strong{color:var(--electric);margin-left:7px;font:500 12px DM Mono}.launch-video{text-align:left;margin-top:20px}.launch-video label{color:var(--ink);margin-bottom:6px;font-size:12px;font-weight:700;display:block}.launch-video>div{border:1px solid var(--line);background:#f4f4f8;border-radius:8px;gap:6px;padding:5px;display:flex}.launch-video input{background:0 0;border:0;outline:0;flex:1;min-width:0;padding:7px;font-size:11px}.launch-video button{color:#fff;background:var(--electric);border:0;border-radius:5px;align-items:center;gap:4px;padding:8px 9px;font-size:11px;font-weight:700;display:flex}.launch-video button:disabled{opacity:.45;cursor:not-allowed}.choose-later{color:var(--muted);background:0 0;border:0;margin-top:12px;font-size:11px;text-decoration:underline}.fullscreen-note{z-index:6;color:#fff;background:#10122bd9;border-radius:8px;padding:8px 12px;font-size:11px;position:fixed;bottom:20px;left:50%;transform:translate(-50%)}@media (max-width:820px){.home-hero{grid-template-columns:1fr;padding-top:65px}.room-preview{justify-self:center;width:90%;max-width:430px}.join-strip{flex-direction:column;align-items:flex-start}.join-form{width:100%}.how-grid{grid-template-columns:1fr;gap:36px}.how-grid h3{margin-top:18px}.room-layout{grid-template-columns:1fr}.side-panel{display:none}.room-status{margin-left:auto;margin-right:12px}.room-status>span:first-child+*{display:none}.menu-button{display:grid}.header-actions .icon-button{display:none}.order-layout{grid-template-areas:"watch""queue""input""qr"}.order-layout .side-panel{display:block}}@media (max-width:530px){.topbar,.room-header{height:64px;padding:0 17px}.how-link{display:none}.hero-copy h1{letter-spacing:-3px}.home-hero{min-height:0;padding-bottom:60px}.home-mode-picker{grid-template-columns:1fr}.preview-video{height:185px}.room-layout{padding:17px}.video-frame{border-radius:10px;margin:0 -2px}.now-playing{grid-template-columns:50px 1fr 39px;gap:11px}.artwork{width:50px;height:50px}.track-info h2{font-size:14px}.mode-switch button{grid-template-columns:18px 1fr;padding:11px 7px}.mode-switch small{font-size:9px}.add-video button{padding:0 9px;font-size:0}.add-video button svg{width:18px}.invite-card{padding:28px 20px 24px}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}