:root{font-family:'Noto Sans SC','Microsoft YaHei',sans-serif;color:#e8e7ef;background:#111217;font-synthesis:none;--muted:#91909f;--line:#2a2a34;--purple:#b7a3f8;--panel:#1b1c23;--green:#99c7b1}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}button{color:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--purple);outline-offset:4px}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon-definitions{position:absolute;width:0;height:0;overflow:hidden}[hidden]{display:none!important}.app-shell{min-height:100vh;display:flex}.navigation-rail{width:82px;flex-shrink:0;border-right:1px solid #24242d;display:flex;align-items:center;flex-direction:column;position:fixed;inset:0 auto 0 0;background:#15161c;z-index:3}.brand-mark{display:flex;gap:5px;align-items:center;height:88px}.brand-mark span{width:12px;height:28px;display:block;border-radius:5px;background:var(--purple);transform:skewY(-20deg)}.brand-mark span+span{height:22px;margin-top:14px;background:#8170b7}.rail-button{width:46px;height:46px;display:grid;place-items:center;border:0;border-radius:12px;background:transparent;color:#82808e}.rail-button.selected{background:#30293e;color:#c2adff;margin-top:23px}.rail-bottom{margin-top:auto;display:grid;justify-items:center;gap:22px;margin-bottom:26px}.self-avatar{display:grid;place-items:center;width:34px;height:34px;background:#31303c;border-radius:50%;font-size:12px;color:#c7bdde}.workspace{margin-left:82px;min-width:0;width:calc(100% - 82px)}.topbar{height:89px;padding:0 44px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #24242d}.wordmark{font-weight:700;font-size:22px;letter-spacing:2px}.wordmark span{font-size:9px;color:#898592;letter-spacing:3px;margin-left:14px;font-weight:500}.topbar-end{display:flex;align-items:center;gap:23px}.version-badge{font-size:9px;letter-spacing:1.5px;color:#9b91b0;border:1px solid #393140;border-radius:4px;padding:5px 8px}.privacy-badge{display:flex;align-items:center;gap:8px;font-size:11px;color:#a09cae}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block;flex-shrink:0}.text-button{background:transparent;border:0;display:inline-flex;gap:8px;align-items:center;justify-content:center;font-size:12px;color:#aaa5b9;padding:8px 0}.text-button:hover{color:var(--purple)}.text-button svg{width:17px;height:17px}main{max-width:1480px;margin:0 auto;padding:0 46px}.home-section{padding-top:56px}.eyebrow{font-size:10px;letter-spacing:2.1px;color:#aa98c8;font-weight:500;display:flex;align-items:center;gap:8px}.eyebrow>span{width:19px;height:1px;background:#a998bd}h1,h2,h3,p{margin:0}h1{font-size:37px;line-height:1.5;font-weight:600;letter-spacing:1px;margin:13px 0 12px}h1>span{color:var(--purple)}.hero-description{font-size:13px;color:#928d9f;letter-spacing:.4px}.entry-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:24px;margin-top:35px}.host-card,.join-card{border:1px solid var(--line);border-radius:16px;overflow:hidden}.host-card{background:#1b1c23;padding:25px 27px 0}.card-heading{display:flex;align-items:center;gap:13px}.icon-tile{height:40px;width:40px;border-radius:11px;display:grid;place-items:center;background:#302b3e;color:#b3a0e5}h2{font-size:18px;font-weight:600}.card-heading p{font-size:11px;color:var(--muted);margin-top:6px}.step-badge{font-size:9px;letter-spacing:1px;color:#807a90}.card-heading .step-badge{margin-left:auto;white-space:nowrap}.drop-zone{margin-top:24px;width:100%;border:1px dashed #484051;border-radius:11px;background:radial-gradient(ellipse at 50% 30%,#30293b80,transparent 70%);height:287px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#ded9e9;transition:.2s}.drop-zone:hover,.drop-zone.dragover{border-color:#b39ce6;background-color:#30293b55}.drop-zone>strong{font-size:16px;font-weight:500;margin:10px 0 7px}.drop-zone>span:not(.cinema-art){font-size:11px;color:#a39aa9}.drop-zone em{font-style:normal;color:#b8a2e9;margin-left:4px}.drop-zone small{font-size:10px;color:#736d80;margin-top:18px}.host-footnote{display:flex;justify-content:center;align-items:center;gap:8px;font-size:10px;color:#858091;padding:19px 0}.host-footnote svg{width:14px;height:14px}.cinema-art{width:204px;height:120px;position:relative;display:block}.screen-art{position:absolute;inset:15px 24px 12px;background:linear-gradient(145deg,#453c65,#242135);border:1px solid #72618f;border-radius:9px;box-shadow:8px 8px 0 -2px #221f2c,8px 8px 0 -1px #494155;overflow:hidden;transform:rotate(-5deg)}.screen-mountains{position:absolute;inset:36px -20px -30px;background:linear-gradient(135deg,#67567f,#2a233b);clip-path:polygon(0 75%,28% 0,57% 67%,80% 25%,100% 72%,100% 100%,0 100%)}.screen-sun{position:absolute;width:20px;height:20px;top:16px;right:24px;border-radius:50%;background:#9781b9}.art-play{position:absolute;top:32px;left:61px;width:30px;height:30px;display:grid;place-items:center;background:#c6b2ee;border-radius:50%;color:#382f4a}.art-play svg{width:18px;height:18px;fill:currentColor;stroke:none}.orbit{position:absolute;border:1px solid #51445e40;border-radius:50%;width:194px;height:77px;left:5px;top:25px;transform:rotate(-30deg)}.orbit-two{transform:rotate(25deg);width:220px;left:-8px}.art-file{position:absolute;right:2px;bottom:12px;font-size:9px;letter-spacing:1px;border:1px solid #6c5e7d;border-radius:5px;padding:7px 9px;background:#352d43;transform:rotate(7deg);color:#c8b4e4}.art-spark{position:absolute;font-size:18px;color:#9e86be}.spark-one{left:7px;top:12px}.spark-two{right:6px;top:0;font-size:12px}.join-card{background:radial-gradient(ellipse at 100% 0,#3e314945,transparent 70%),#1f1d27;padding:28px 30px;position:relative}.join-graphic{height:39px;width:44px;display:grid;place-items:center;margin:24px 0 15px;position:relative;color:#b6a1d5}.join-graphic svg{width:35px;height:35px;stroke-width:1.2}.join-graphic>span{position:absolute;right:0;top:1px;width:7px;height:7px;background:#b8a6eb;border-radius:50%;border:2px solid #25212d}.join-card h2{font-size:23px}.join-card>p{font-size:12px;line-height:1.9;color:#9c92a9;margin-top:10px}label{display:block;color:#aaa2b8;font-size:12px;margin-bottom:9px}#join-form{margin-top:25px}#join-form label{font-size:10px;color:#9f94ad}input:not([type=range]):not([type=checkbox]):not([type=file]),select{width:100%;border:1px solid #43384e;background:#17151e;color:#e4dcef;padding:12px 14px;border-radius:8px;outline:none}input::placeholder{color:#655d73}#invite-input{letter-spacing:5px;font-size:18px;height:53px;text-align:center;font-family:ui-monospace,monospace}#invite-input::placeholder{font-size:14px;letter-spacing:2px}input:not([type=range]):focus{border-color:#b39cd8}button.primary-button{background:#b9a5eb;color:#241c34;border:1px solid #b9a5eb;width:100%;min-height:45px;border-radius:8px;display:flex;justify-content:center;align-items:center;gap:14px;font-size:12px;font-weight:600;padding:10px 16px;transition:background .15s}.primary-button:hover{background:#c9b8f7}.primary-button svg{width:17px;height:17px}#join-button{margin-top:12px}#join-hint{display:block;text-align:center;font-size:10px;color:#7f758e;margin-top:11px}.how-it-works{display:grid;grid-template-columns:1.1fr 1.3fr 1.3fr 1.2fr;gap:20px;padding:33px 0 32px;border-bottom:1px solid #27242f;margin-top:12px}.section-label{font-size:12px;color:#86808e;line-height:1.9}.section-label strong{font-weight:500;color:#b1a8be}.how-it-works article{display:flex;align-items:center;gap:14px}.feature-number{font-size:20px;font-weight:400;color:#665973;font-family:Georgia,serif;font-style:italic}.how-it-works h3{font-size:12px;font-weight:500;color:#cbc3d7}.how-it-works p{font-size:10px;color:#77717f;margin-top:7px}.home-footer{display:flex;justify-content:space-between;font-size:10px;color:#6d6579;padding:20px 0}.home-footer b{margin:0 10px;font-weight:400}.alpha-notice{font-size:10px;color:#82728d;line-height:1.7;margin-bottom:20px}.room-section{padding-top:28px}.room-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:20px}.room-heading>div{min-width:0}.room-heading h1{font-size:21px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:60vw;margin:8px 0 0}.secondary-button{background:#25222e;border:1px solid #403749;border-radius:8px;padding:10px 17px;font-size:12px;white-space:nowrap}.secondary-button:hover{border-color:#8f77ac}.room-grid{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:22px;align-items:start}.player-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#19181e}.video-stage{aspect-ratio:16/9;background:#09090d;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}video{width:100%;height:100%;object-fit:contain;display:block}.subtitle-overlay{position:absolute;bottom:8%;left:8%;right:8%;text-align:center;white-space:pre-line;font-size:clamp(13px,1.6vw,24px);font-weight:600;color:#fff;text-shadow:1px 1px 3px #000,-1px -1px 3px #000;pointer-events:none}.video-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse,#262130,#0d0c11);color:#8b7b9c;padding:30px;text-align:center}.video-placeholder svg{width:52px;height:52px;margin-bottom:16px;stroke-width:1}.video-placeholder h2{font-size:17px;color:#b8a9c8}.video-placeholder p{font-size:12px;margin-top:12px;line-height:1.8}.mode-badge{position:absolute;top:14px;left:14px;font-size:10px;background:#191522bd;border:1px solid #77638666;color:#c8b3e1;padding:6px 10px;border-radius:5px;z-index:1}.player-controls{padding:12px 18px 8px}.control-row{display:flex;align-items:center;gap:10px}.control-spacer{flex:1}.icon-button{display:inline-grid;place-items:center;border:0;background:transparent;width:34px;height:34px;color:#c6bace;border-radius:6px}.icon-button:hover{background:#37303d}.time-label{font-size:10px;color:#99909f;font-family:ui-monospace,monospace}.small-icon{width:15px;height:15px;color:#9887a6}input[type=range]{accent-color:#bda3e4;height:3px;cursor:pointer}#seek-input{width:100%;display:block;margin:0 0 12px}#movie-volume{width:62px}.subtitle-button{background:none;border:1px solid #53465e;border-radius:4px;padding:3px 6px;font-size:10px;color:#b6a4c5}.player-footnote{display:flex;justify-content:space-between;padding:12px 18px;border-top:1px solid #2b2533;font-size:10px;color:#82728e;gap:12px}.room-sidebar{display:grid;gap:15px}.room-sidebar section{background:#1d1a24;border:1px solid #322b3b;border-radius:12px;padding:20px}.room-sidebar .eyebrow{font-size:9px;letter-spacing:1px}.room-sidebar h2{font-size:18px;margin:12px 0 8px}.room-sidebar p{font-size:11px;color:#92809e;line-height:1.8;margin:8px 0 16px}.code-display{width:100%;display:flex;align-items:center;justify-content:space-between;border:1px solid #50415c;background:#282033;border-radius:8px;padding:12px 14px;color:#d3bbf1}.code-display span{font-family:ui-monospace,monospace;letter-spacing:5px;font-size:24px}.code-display svg{width:18px;height:18px}.code-caption{display:block;font-size:10px;color:#857390;text-align:center;margin:10px 0 4px}.small{font-size:10px}#copy-link{width:100%}.members-card header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}h3{font-size:12px;font-weight:500}.members-card header>span{font-size:10px;color:#8a7796}.member{display:flex;align-items:center;gap:11px;margin-top:18px}.member>div{flex:1}.member strong{font-size:11px;font-weight:500;display:block}.member small{font-size:10px;display:block;color:#897793;margin-top:5px}.avatar{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;font-size:11px}.lavender{color:#c3ace3;background:#443252}.waiting{color:#7a6987;border:1px dashed #655171;background:#251e2d}.voice-card p{font-size:10px;margin-bottom:12px}.mic-button{width:100%;border:1px solid #51415c;border-radius:8px;background:#302537;color:#b7a0c8;font-size:11px;padding:11px;display:flex;align-items:center;justify-content:center;gap:9px}.mic-button svg{width:18px;height:18px}.mic-button.active{background:#263a32;border-color:#476a57;color:#b7dcc6}.voice-card label{font-size:10px;display:flex;align-items:center;justify-content:space-between;margin-top:17px;margin-bottom:0;color:#8f7b9c}.voice-card input{width:80px}.connection-notice{font-size:10px;color:#8e7c9c;display:flex;align-items:flex-start;gap:8px;line-height:1.8;padding:0 8px}.connection-notice .status-dot{margin-top:6px}#host-actions{display:flex;justify-content:space-between;margin-top:15px}dialog{width:470px;max-width:calc(100vw - 32px);background:#201b29;color:#e4d9ee;border:1px solid #534160;border-radius:16px;padding:28px;box-shadow:0 25px 100px #0009;max-height:90vh}dialog::backdrop{background:#07050bc4;backdrop-filter:blur(5px)}dialog header{display:flex;justify-content:space-between;margin-bottom:26px}dialog header h2{margin-top:10px}dialog label{margin-top:20px}dialog .primary-button,dialog .secondary-button{margin-top:14px}dialog .secondary-button{width:100%}.toggle-row{display:flex;align-items:center;justify-content:space-between;margin:0 0 24px}.toggle-row strong{font-weight:500;font-size:13px;display:block}.toggle-row small{display:block;font-size:10px;color:#9781a5;margin-top:8px}.toggle-row input{width:18px;height:18px;accent-color:var(--purple)}.field-note{font-size:10px;color:#9a85a7;line-height:1.8;margin-top:9px}.setting-callout{display:flex;gap:12px;background:#2b2233;padding:15px;border-radius:8px;color:#a48ab3;margin-top:22px}.setting-callout p{font-size:11px;line-height:1.8}.setting-callout svg{width:18px;height:18px;margin-top:3px}#subtitle-info{font-size:12px;color:#aa94b9;line-height:1.8}.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);border:1px solid #5d466e;background:#34233fee;color:#e8d6f7;font-size:12px;padding:14px 22px;max-width:90vw;border-radius:10px;z-index:100;box-shadow:0 12px 40px #0006;line-height:1.8}body:has(dialog[open]){overflow:hidden}#video-stage:fullscreen{width:100vw;height:100vh;aspect-ratio:auto}.video-stage:fullscreen .subtitle-overlay{font-size:32px}
@media(min-width:1500px){main{padding:0 65px}.home-section{padding-top:70px}.entry-grid{margin-top:42px}.drop-zone{height:330px}.join-card{padding:32px 38px}.how-it-works{padding:40px 0}}
@media(max-width:1100px){main{padding:0 25px}.topbar{padding:0 25px}.topbar-end{gap:12px}.privacy-badge{display:none}.card-heading .step-badge{display:none}.host-card{padding:22px 20px 0}.join-card{padding:25px 22px}.home-section{padding-top:35px}.room-grid{grid-template-columns:minmax(0,1fr) 250px;gap:15px}.room-sidebar section{padding:16px}.how-it-works{gap:12px}.how-it-works article{gap:9px}.how-it-works h3{font-size:11px}.how-it-works p{font-size:9px}h1{font-size:31px}}
@media(max-width:800px){.navigation-rail{width:60px}.workspace{margin-left:60px;width:calc(100% - 60px)}main{padding:0 20px}.topbar{height:74px;padding:0 20px}.wordmark span{display:none}.version-badge{font-size:8px}.topbar-end>.text-button{font-size:0;gap:0}.entry-grid{grid-template-columns:1fr}.join-card{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}.join-card>.step-badge{grid-column:1/-1}.join-graphic{margin-top:18px}.join-card>h2{grid-column:1}.join-card>p{grid-column:1;margin-bottom:10px}.join-card>form{grid-column:2;grid-row:2/5;align-self:center;margin:0}.how-it-works{grid-template-columns:1fr 1fr;row-gap:25px}.room-grid{grid-template-columns:1fr}.room-sidebar{grid-template-columns:1fr 1fr}.room-heading h1{max-width:50vw}.home-footer{gap:15px;line-height:1.8}.home-footer>span:last-child{display:none}.room-invite-card{grid-row:span 2}.room-sidebar .connection-notice{grid-column:1/-1}}
@media(max-width:480px){.navigation-rail{display:none}.workspace{margin:0;width:100%}.topbar{height:64px}.home-section{padding-top:28px}.eyebrow{font-size:8px}h1{font-size:25px;letter-spacing:0}.hero-description{font-size:11px}.entry-grid{margin-top:25px}.join-card{display:block}.join-graphic{display:none}.join-card>h2{font-size:20px;margin-top:18px}.join-card>p br{display:none}.join-card>form{margin-top:20px}.room-sidebar{grid-template-columns:1fr}.room-heading h1{font-size:16px;max-width:52vw}.player-footnote{font-size:8px}.control-row{gap:5px}.room-section{padding-top:20px}.alpha-notice{font-size:9px}.drop-zone{height:270px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}