:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#e9efed;background:#101916;font-synthesis:none;--muted:#93a79e;--accent:#b4ebcc;--line:#304239;--panel:#19251f}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:1px solid #42594c;background:#24372c;color:#edf4ef;border-radius:8px;padding:12px 17px;transition:background .15s,transform .15s}button:hover{background:#344c3d}button:active{transform:translateY(1px)}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}input,select{width:100%;color:#edf4ef;border:1px solid #3c5045;background:#121e17;border-radius:7px;padding:13px 14px;outline:none}input:focus,select:focus{border-color:var(--accent)}label{display:grid;gap:9px;font-size:13px;color:#b7c5bd}header{height:94px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5vw}.brand{text-decoration:none;color:#f0f4ee;font-size:29px;font-weight:700;letter-spacing:-1px;display:flex;align-items:center;gap:10px}.brand-icon{color:var(--accent);font-size:33px}.brand-dot{color:var(--accent);margin-left:-9px}.header-right{display:flex;gap:28px;align-items:center}.private-label{font-size:10px;letter-spacing:1.8px;color:var(--muted)}.quiet{border:none;background:transparent;color:#bbcfc2;padding:6px 0;font-size:12px}.quiet:hover{background:transparent;color:white}.primary{background:var(--accent);border-color:var(--accent);color:#163626;font-weight:650}.primary:hover{background:#caf5dc}.primary span{float:right}main{max-width:1440px;margin:auto;padding:50px 5vw 65px;min-height:calc(100vh - 168px)}h1,h2,p{margin-top:0}h1{font-size:43px;letter-spacing:-1.6px;margin-bottom:12px;font-weight:550}h2{font-weight:550;font-size:22px;letter-spacing:-.5px;margin-bottom:12px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:600;color:var(--accent);margin-bottom:17px}.muted,.lede{color:var(--muted);font-size:14px;line-height:1.65}.panel{background:var(--panel);border:1px solid var(--line);border-radius:13px}.auth-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:10%;align-items:center;padding:70px 2vw;max-width:1100px;margin:auto}.welcome h1{font-size:60px;line-height:1.1;letter-spacing:-2.5px;margin-bottom:24px}.lede{font-size:16px;max-width:380px}.camera-line{display:flex;align-items:center;gap:16px;margin-top:42px;font-size:13px}.camera-line small{display:block;color:var(--muted);margin-top:7px;font-size:11px}.camera-symbol{border:1px solid var(--line);border-radius:12px;color:var(--accent);font-size:30px;padding:10px 17px}.auth-panel{padding:35px}.auth-panel h2{font-size:29px}.auth-panel form{display:grid;gap:22px;margin-top:28px}.form-foot{font-size:11px;color:var(--muted);text-align:center;margin:26px 0 0}.page-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.page-heading p:last-child{margin-bottom:0}.badge{font-size:11px;border:1px solid #3c5446;color:#bcd5c6;border-radius:30px;padding:8px 12px;white-space:nowrap}.viewer-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:22px}.video-panel{overflow:hidden;align-self:start}.panel-heading{padding:20px 23px;display:flex;justify-content:space-between;align-items:center;gap:16px}.panel-heading strong{font-size:12px;font-weight:500}.status-dot{display:inline-block;width:7px;height:7px;border-radius:100%;background:#7d8c84;margin-right:8px}.status-dot.live{background:#b4ebcc;box-shadow:0 0 9px #b4ebc955}.device-label{font-size:10px;letter-spacing:1px;color:var(--muted)}.video-wrap{aspect-ratio:16/9;background:#080e0a;position:relative;overflow:hidden}video{width:100%;height:100%;display:block}.video-wrap #video-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at center,#253b2c66,transparent 70%)}#video-placeholder[hidden]{display:none}.view-icon{font-size:56px;color:#729a80;margin-bottom:16px}#video-placeholder h2{font-size:20px}#video-placeholder p{font-size:13px;color:var(--muted);margin-bottom:24px}.video-footer{padding:17px 22px;display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:10px;color:var(--muted)}.controls-panel{padding:26px 24px}.controls-panel h2{font-size:20px}.controls-panel .eyebrow{margin-bottom:12px}.controls-panel .muted{font-size:12px}fieldset{border:0;padding:0;margin:0;min-width:0}.direction-pad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,47px);gap:7px;justify-content:center;margin:26px 0}.direction-pad button{font-size:23px;padding:5px;background:#24392c;border-color:#3b5445}.direction-pad button:hover{background:#36523f}.up{grid-area:1/2}.left{grid-area:2/1}.stop{grid-area:2/2;color:var(--accent);font-size:15px!important}.right{grid-area:2/3}.down{grid-area:3/2}.zoom-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.zoom-row button{font-size:21px;line-height:20px;padding:8px 14px}.zoom-row span{font-size:12px;color:#b7c9be}.control-note{display:flex;gap:10px;border-top:1px solid var(--line);padding-top:20px;margin-top:24px;color:var(--muted);font-size:11px;line-height:1.7}.control-note p{margin-bottom:0}.device-detail{display:grid;gap:7px;margin-top:25px}.device-detail span{font-size:9px;letter-spacing:1.4px;color:var(--muted)}.device-detail strong{font-size:12px;font-weight:500}.device-detail small{font-size:10px;color:var(--muted)}.people-panel{padding:28px;margin-top:26px}.people-panel .panel-heading{padding:0}.people-panel h2{margin-bottom:10px}.people-panel .eyebrow{margin-bottom:10px}.invite-form{display:grid;grid-template-columns:minmax(160px,1fr) minmax(150px,.7fr) auto;gap:15px;align-items:end;margin:25px 0}.invite-form button{min-height:46px}.notice{background:#233e30;border:1px solid #3b624a;border-radius:8px;color:#d1e9da;padding:15px 18px;font-size:12px;line-height:1.6;margin-bottom:20px}.notice p{margin-bottom:12px}.copy-row{display:flex;gap:12px}.copy-row button{white-space:nowrap}.people-list{display:grid}.person{border-top:1px solid var(--line);padding:17px 0;display:flex;align-items:center;gap:14px}.avatar{height:35px;width:35px;flex-shrink:0;display:grid;place-items:center;background:#304938;color:#c3e4cd;border-radius:50%;font-size:13px}.person-info{flex:1;min-width:0}.person-email{font-size:13px;overflow-wrap:anywhere}.person-meta{font-size:10px;color:var(--muted);margin-top:4px}.person select{width:145px;padding:8px;font-size:11px}.remove{font-size:11px;color:#e6b4a8;border:0;background:transparent;padding:8px}.account-panel{padding:20px 26px;margin-top:24px}summary{cursor:pointer;font-size:13px;color:#c8d8ce}summary span{float:right;color:var(--muted);font-size:11px}#message{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);max-width:90vw;width:max-content;background:#d2eedc;color:#183021;box-shadow:0 8px 40px #0006;border:1px solid #91b89c;border-radius:10px;padding:15px 22px;font-size:13px;z-index:20}#message.error{background:#f2d6cd;color:#562918}footer{border-top:1px solid var(--line);margin:0 5vw;padding:25px 0;display:flex;justify-content:space-between;color:#738e7c;font-size:10px;letter-spacing:1px}footer span:last-child{letter-spacing:0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}
@media(min-width:1500px){main{padding-left:55px;padding-right:55px}}@media(max-width:1000px){.viewer-grid{grid-template-columns:minmax(0,1fr) 240px}.controls-panel{padding:22px 18px}.welcome h1{font-size:47px}.auth-layout{gap:6%;padding:40px 0}.auth-panel{padding:26px}.device-detail{display:none}}@media(max-width:760px){header{height:76px}.brand{font-size:25px}.private-label{display:none}main{padding-top:32px}.auth-layout{grid-template-columns:1fr;gap:36px;padding:10px 0}.welcome h1{font-size:43px}.camera-line{display:none}.welcome .lede{margin-bottom:0}.viewer-grid{grid-template-columns:1fr}.controls-panel{display:block}.direction-pad{margin-top:20px}.control-note{margin-top:18px}.zoom-row{max-width:220px;margin:auto}.controls-panel h2,.controls-panel>.muted,.controls-panel>.eyebrow{text-align:center}.page-heading h1{font-size:35px}.page-heading .muted{font-size:12px}.people-panel{padding:22px}.invite-form{grid-template-columns:1fr}.person{flex-wrap:wrap}.person select{margin-left:49px}.person .badge{margin-left:auto}.video-footer{font-size:9px;padding:15px}.view-icon{font-size:30px;margin-bottom:7px}#video-placeholder h2{font-size:17px;margin-bottom:5px}#video-placeholder p{margin-bottom:13px;font-size:11px}#video-placeholder button{font-size:12px;padding:10px 15px}.copy-row{flex-direction:column}summary span{display:block;float:none;margin-top:10px}.people-panel>.panel-heading>.badge{display:none}footer{font-size:8px}}
[data-direction]{touch-action:none;user-select:none;-webkit-user-select:none}
[data-direction].held{background:#b4ebcc!important;color:#163626!important;box-shadow:0 0 0 3px #b4ebcc44}
#invite-form{grid-template-columns:minmax(160px,1fr) auto}
.video-footer{gap:16px}.video-footer>span{flex:1}
#viewer:fullscreen{position:relative;display:block;width:100vw;height:100vh;background:#050b08;padding:0;border:0}
#viewer:fullscreen .video-panel{width:100%;height:100%;border:0;border-radius:0;background:#050b08}
#viewer:fullscreen .video-wrap{position:absolute;inset:0;aspect-ratio:auto;height:100%;display:flex;align-items:center;justify-content:center}
#viewer:fullscreen video{width:100%;height:100%;object-fit:contain}
#viewer:fullscreen .panel-heading{position:absolute;top:0;left:0;right:0;z-index:2;background:linear-gradient(#000b,transparent);border:0}
#viewer:fullscreen .video-footer{position:absolute;bottom:0;left:0;right:0;z-index:3;background:#09130bd9}
#viewer:fullscreen .controls-panel{position:absolute;right:24px;bottom:76px;width:210px;z-index:3;background:#14261cdc;padding:14px;border-radius:12px}
#viewer:fullscreen .controls-panel>.eyebrow,#viewer:fullscreen .controls-panel>h2,#viewer:fullscreen .controls-panel>.muted,#viewer:fullscreen .device-detail{display:none}
#viewer:fullscreen .direction-pad{margin:0 auto 12px;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,44px)}
#viewer:fullscreen .control-note{margin-top:12px;padding-top:12px;font-size:10px}
@media(max-width:760px){#invite-form{grid-template-columns:1fr}#viewer:fullscreen .controls-panel{right:12px;bottom:68px;width:180px;padding:10px}#viewer:fullscreen .control-note{display:none}}

.camera-picker { display: block; max-width: 560px; margin: 0 0 24px; }
.camera-picker select { display: block; width: 100%; margin-top: 8px; padding: 12px; border: 1px solid var(--border, #35463d); border-radius: 8px; color: inherit; background: #18231e; font: inherit; }