:root{--ink:#151b20;--muted:#68737d;--paper:#f5f7f4;--line:#d8ded8;--signal:#dbff45;--signal-deep:#b9ec18;--night:#18231f;--night-soft:#22302b;--danger:#ff654f}*{box-sizing:border-box}html{background:var(--paper)}body{min-width:320px;min-height:100vh;color:var(--ink);background:var(--paper);margin:0;font-family:Microsoft YaHei,PingFang SC,system-ui,-apple-system,sans-serif}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.46}a{color:inherit;text-decoration:none}video{display:block}.brand{letter-spacing:.06em;align-items:center;gap:11px;font-size:18px;font-weight:800;display:flex}.brand-mark{background:var(--night);width:34px;height:34px;color:var(--signal);border-radius:50%;place-items:center;font:800 16px/1 Georgia,serif;display:grid}.brand-light{color:#fff}.brand-light .brand-mark{background:var(--signal);color:var(--night)}.home-shell{background:radial-gradient(circle at 82% 15%, #dbff4547, transparent 24rem), linear-gradient(90deg, #151b2009 1px, transparent 1px), linear-gradient(#151b2009 1px, transparent 1px), var(--paper);background-size:auto,32px 32px,32px 32px,auto;flex-direction:column;min-height:100vh;display:flex}.brand-bar{border-bottom:1px solid #151b201f;justify-content:space-between;align-items:center;height:78px;padding:0 clamp(24px,5vw,72px);display:flex}.secure-pill{color:var(--muted);align-items:center;gap:9px;font-size:13px;display:flex}.secure-pill i,.connection-state i,.desktop-status i,.share-title>i{background:#6b7770;border-radius:50%;flex:none;width:8px;height:8px}.secure-pill i,i.online{background:#83c718;box-shadow:0 0 0 5px #83c7181f}.hero{width:min(1120px,100% - 48px);margin:auto;padding:72px 0 60px}.eyebrow,.panel-kicker{color:#66840b;letter-spacing:.19em;font:700 12px/1.2 ui-monospace,monospace}.hero h1{letter-spacing:-.055em;max-width:850px;margin:20px 0 0;font-size:clamp(43px,6.1vw,82px);font-weight:820;line-height:1.04}.hero-copy{max-width:630px;color:var(--muted);margin:28px 0 42px;font-size:clamp(16px,1.5vw,19px);line-height:1.8}.role-grid{grid-template-columns:repeat(2,1fr);gap:18px;display:grid}.role-card{border:1px solid var(--line);background:#ffffffb8;grid-template-rows:auto auto 1fr auto;grid-template-columns:72px 1fr;column-gap:22px;min-height:246px;padding:28px;transition:transform .2s,border-color .2s,box-shadow .2s;display:grid;position:relative;overflow:hidden}.role-card:hover{border-color:#9fab9f;transform:translateY(-3px);box-shadow:0 18px 44px #18231f1a}.role-card-primary{background:var(--night);color:#fff;border-color:var(--night)}.role-number{color:#89938e;letter-spacing:.1em;font:600 12px/1 ui-monospace,monospace;position:absolute;top:20px;right:24px}.role-icon{background:var(--signal);border-radius:50%;grid-row:1/5;place-items:center;width:72px;height:72px;display:grid}.phone-icon i{border:3px solid var(--night);border-radius:6px;width:23px;height:39px;position:relative}.phone-icon i:after{content:"";background:var(--night);border-radius:50%;width:4px;height:4px;position:absolute;bottom:3px;left:7px}.desktop-icon i{border:3px solid var(--night);border-radius:3px;width:40px;height:29px;position:relative}.desktop-icon i:after{content:"";background:var(--night);width:18px;height:3px;box-shadow:0 5px 0 -1px var(--night);position:absolute;bottom:-9px;left:8px}.role-card strong{letter-spacing:-.02em;align-self:end;font-size:27px}.role-card>span:not(.role-number):not(.role-icon){color:var(--muted);margin-top:7px;line-height:1.5}.role-card-primary>span:not(.role-number):not(.role-icon){color:#b8c2bd}.role-card b{align-self:end;margin-top:30px;font-size:14px;font-weight:700}.role-card em{color:#78980d;margin-left:8px;font-size:20px;font-style:normal}.role-card-primary em{color:var(--signal)}.home-footer{min-height:70px;color:var(--muted);border-top:1px solid #151b201f;justify-content:center;align-items:center;gap:17px;font-size:12px;display:flex}.home-footer i{background:#9aa39d;border-radius:50%;width:3px;height:3px}.device-page{color:#fff;background:radial-gradient(circle at 15% 10%,#dbff4529,#0000 22rem),linear-gradient(145deg,#17211e,#101714 70%);min-height:100vh}.device-header,.live-header,.desktop-header{border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;height:76px;padding:0 clamp(20px,5vw,64px);display:flex}.device-tag{color:#aab6b0;letter-spacing:.08em;font-size:12px}.connect-panel{width:min(520px,100% - 32px);margin:0 auto;padding:clamp(54px,8vh,100px) 0}.connect-panel h1{letter-spacing:-.045em;margin:13px 0 10px;font-size:clamp(38px,8vw,58px)}.connect-panel>p{color:#aeb8b3;margin:0 0 36px;line-height:1.8}.connect-panel form{color:var(--ink);background:#fff;padding:28px;box-shadow:0 24px 80px #00000038}.connect-panel label{color:#5d6963;margin-bottom:10px;font-size:13px;font-weight:700;display:block}.connect-panel input{width:100%;height:72px;color:var(--ink);text-align:center;letter-spacing:.26em;background:#f7f9f6;border:1px solid #cdd5d0;border-radius:0;outline:none;padding:0 18px;font:750 34px/1 ui-monospace,monospace}.connect-panel input:focus{border-color:#89a526;box-shadow:0 0 0 3px #b9ec182e}.primary-button,.secondary-button,.danger-button,.copy-button{border:0;min-height:50px;padding:0 20px;font-weight:800;transition:transform .15s,filter .15s}.primary-button:hover:not(:disabled),.secondary-button:hover,.danger-button:hover,.copy-button:hover{filter:brightness(.96);transform:translateY(-1px)}.primary-button{background:var(--signal);width:100%;color:var(--night);margin-top:18px}.secondary-button{color:var(--ink);background:#e9eee9}.danger-button{background:var(--danger);color:#1d1715}.wide{width:100%;margin-top:14px}.privacy-note{color:#9eaaa4;justify-content:center;align-items:center;gap:9px;margin-top:24px;font-size:12px;display:flex}.privacy-note i{border:1px solid;border-radius:50%;width:7px;height:7px}.error-banner{color:#a13223;background:#fff0ed;border:1px solid #ff654f61;margin-top:14px;padding:12px 14px;font-size:13px;line-height:1.5}.error-banner.compact{margin:10px 0}.live-page{color:#fff;background:#101714;flex-direction:column;min-height:100svh;display:flex}.live-room{align-items:center;gap:12px;display:flex}.live-room span{color:#93a099;font-size:11px}.live-room strong{letter-spacing:.18em;font:800 17px/1 ui-monospace,monospace}.mobile-stage{background:#070a09;flex:1;min-height:0;margin:12px;position:relative;overflow:hidden}.screen-video{object-fit:contain;width:100%;height:100%}.video-placeholder{text-align:center;color:#dfe6e2;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.video-placeholder strong{margin-top:26px;font-size:18px}.video-placeholder p{color:#77827c;margin:8px 0 0;font-size:13px}.waiting-rings{border:1px solid #dbff4540;border-radius:50%;place-items:center;width:56px;height:56px;display:grid;position:relative}.waiting-rings:before,.waiting-rings:after{content:"";border:1px solid #dbff451f;border-radius:50%;position:absolute}.waiting-rings:before{inset:-12px}.waiting-rings:after{inset:-24px}.waiting-rings i{background:var(--signal);width:12px;height:12px;box-shadow:0 0 22px var(--signal);border-radius:50%}.local-preview{aspect-ratio:3/4;background:#17211e;border:2px solid #ffffffb8;width:min(30vw,150px);position:absolute;top:14px;right:14px;overflow:hidden;box-shadow:0 12px 30px #00000059}.local-preview video{object-fit:cover;width:100%;height:100%}.local-preview span{text-align:center;background:linear-gradient(#0000,#000000b3);padding:18px 8px 7px;font-size:10px;position:absolute;bottom:0;left:0;right:0}.mobile-controls{padding:12px 16px max(18px, env(safe-area-inset-bottom));background:#18211e}.connection-state{color:#afbab4;justify-content:center;align-items:center;gap:10px;min-height:26px;font-size:12px;display:flex}.button-row{grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;display:grid}.desktop-page{color:#fff;background:#101714;min-height:100vh}.desktop-header{background:#18211e;height:72px}.desktop-status{color:#aab5af;align-items:center;gap:11px;font-size:12px;display:flex}.desktop-layout{grid-template-columns:minmax(0,1fr) 330px;gap:16px;height:calc(100vh - 72px);padding:16px;display:grid}.camera-area{flex-direction:column;min-width:0;display:flex}.section-label{color:#a2aea7;justify-content:space-between;align-items:flex-start;height:38px;font-size:12px;display:flex}.section-label b{color:var(--signal);letter-spacing:.1em;font:700 11px/1 ui-monospace,monospace}.camera-frame{background:#070a09;border:1px solid #28332e;flex:1;min-height:0;position:relative;overflow:hidden}.camera-frame video{object-fit:contain;width:100%;height:100%}.camera-frame video.correct-front-camera{transform:scaleX(-1)}.desktop-placeholder{color:#e6ece8}.live-badge{color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);letter-spacing:.1em;background:#0c110fb8;align-items:center;gap:7px;height:27px;padding:0 10px;font:700 10px/1 ui-monospace,monospace;display:flex;position:absolute;top:16px;left:16px}.live-badge i{background:#ff5543;border-radius:50%;width:6px;height:6px;box-shadow:0 0 0 4px #ff554326}.control-panel{flex-direction:column;gap:12px;min-height:0;display:flex;overflow-y:auto}.room-card,.share-card{color:var(--ink);background:#f5f7f4;padding:22px}.room-card h2{margin:9px 0 18px;font-size:18px}.room-code{letter-spacing:.06em;white-space:nowrap;font:800 42px/1 ui-monospace,monospace}.room-code span{color:#75920e}.room-card p{color:var(--muted);margin:16px 0;font-size:12px;line-height:1.7}.copy-button{color:#334039;background:#fff;border:1px solid #cbd3ce;width:100%;min-height:44px;font-size:12px}.share-card{color:#fff;background:#202b27}.share-title{justify-content:space-between;align-items:center;display:flex}.share-title div{flex-direction:column;gap:4px;display:flex}.share-title span{font-size:15px;font-weight:800}.share-title strong{color:#88958e;font-size:11px;font-weight:500}.share-preview{aspect-ratio:16/9;color:#65716b;background:#0c110f;place-items:center;margin-top:16px;font-size:11px;display:grid;position:relative;overflow:hidden}.share-preview video{object-fit:contain;width:100%;height:100%}.share-preview span{position:absolute}.share-card small{color:#829089;margin-top:12px;font-size:10px;line-height:1.6;display:block}.dark-note{margin:auto 0 4px}@media (max-width:900px){.desktop-layout{grid-template-columns:1fr;height:auto;min-height:calc(100vh - 72px)}.camera-frame{min-height:55vh}.control-panel{grid-template-columns:1fr 1fr;display:grid;overflow:visible}.control-panel>.error-banner,.control-panel>.privacy-note{grid-column:1/-1}}@media (max-width:720px){.brand-bar{height:66px;padding:0 20px}.secure-pill{font-size:0}.hero{width:min(100% - 32px,560px);padding:52px 0 40px}.hero h1{font-size:clamp(39px,12vw,58px)}.hero-copy{margin:22px 0 30px;font-size:15px}.role-grid{grid-template-columns:1fr}.role-card{grid-template-columns:62px 1fr;column-gap:18px;min-height:210px;padding:24px}.role-icon{width:62px;height:62px}.home-footer{flex-wrap:wrap;padding:18px}.desktop-header{padding:0 18px}.desktop-status span{display:none}.desktop-layout{padding:10px}.camera-frame{min-height:48vh}.control-panel{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important}}