:root{color-scheme:light;font-family:Inter,Segoe UI,Arial,sans-serif;color:#172b30;background:#f6f4ee;font-synthesis:none}*{box-sizing:border-box}body{margin:0}header{padding:28px 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dfdfd6}.brand{font-size:27px;font-weight:750;letter-spacing:-1px;color:inherit;text-decoration:none}.brand span{display:block;font-size:9px;letter-spacing:2.5px;color:#57716c;margin-top:3px}#badge{font-size:13px;border:1px solid #c6d8cd;border-radius:24px;padding:10px 15px;background:#eaf2e9}main{max-width:1280px;margin:0 auto;padding:64px 5vw;display:grid;grid-template-columns:0.85fr 1.15fr;gap:70px}.eyebrow{font-size:10px!important;letter-spacing:2px;font-weight:700;color:#507463}h1{font-size:clamp(42px,5.5vw,78px);letter-spacing:-4px;line-height:1.02;margin:26px 0}p{line-height:1.65}.intro>p{font-size:17px;max-width:360px;color:#5a6767}.prototype{font-size:10px!important;letter-spacing:1.5px;margin-top:40px}.panel{background:#fff;border:1px solid #e2e4db;border-radius:24px;padding:30px;box-shadow:0 12px 36px #22382b08}h2{font-size:23px;letter-spacing:-.7px;margin:0 0 10px}.panel p{font-size:14px;color:#66706b}label{display:block;font-size:12px;font-weight:650;margin:25px 0 9px}input,textarea{font:inherit;width:100%;border:1px solid #cfd8d0;border-radius:10px;padding:14px;background:#fbfcf9}textarea{height:100px;font-size:12px;resize:vertical;overflow-wrap:anywhere}button{font:inherit;font-size:14px;font-weight:600;padding:13px 18px;border:1px solid #cfd8d0;border-radius:10px;background:#f5f8f2;color:#193c2c;cursor:pointer;min-height:44px}button:disabled{opacity:.5;cursor:default}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #5c9d77;outline-offset:3px}.primary{background:#204e39;color:white;width:100%;margin-top:14px;border-color:#204e39;display:flex;justify-content:space-between}.danger{color:#93442f;background:#fff7f3;margin-top:8px}.note{background:#fff6df;padding:12px;border-radius:8px}#status{border-top:1px solid #eceee5;margin-top:25px;padding-top:18px;font-size:12px}.sessionhead{display:flex;align-items:center;justify-content:space-between}#size{font-size:11px;color:#76827c}.stage{display:flex;justify-content:center;background:#13241d;border-radius:12px;overflow:hidden;padding:8px;margin-top:20px}video{display:block;max-width:100%;max-height:65vh;object-fit:contain;touch-action:none;user-select:none}.navigation{display:flex;gap:8px}.navigation button{flex:1;padding:12px 5px}.hint{text-align:center;font-size:11px!important}footer{padding:25px 5vw;color:#748078;font-size:11px;text-align:center}#copy{margin-top:12px}[hidden]{display:none!important}@media(max-width:780px){main{grid-template-columns:1fr;gap:28px;padding:30px 6vw}.intro h1{font-size:47px;letter-spacing:-2.5px;margin:14px 0}.intro h1 br{display:none}.intro>p{max-width:none}.prototype{margin-top:12px}.panel{padding:22px}#badge{font-size:11px}header{padding:20px 6vw}}

#fallback{display:block;max-width:100%;max-height:65vh;object-fit:contain;touch-action:none;user-select:none}

body.connected{height:100dvh;overflow:hidden}body.connected header{height:64px;padding:8px 3vw}body.connected header .brand{font-size:21px}body.connected header .brand span{display:none}body.connected main{height:calc(100dvh - 64px)!important;padding:8px!important}body.connected .panel{height:100%;display:flex;flex-direction:column;padding:12px!important}body.connected #session{flex:1;min-height:0;display:flex;flex-direction:column}body.connected .sessionhead,body.connected .hint,body.connected footer{display:none}body.connected .viewer-tools{margin:0 0 8px}body.connected .stage{flex:1;min-height:100px;height:auto}body.connected .navigation{margin-top:8px}body.connected #status{margin:8px 0 0;padding-top:8px;font-size:12px}

/* Connection setup and scalable viewer, 0.3 */
.download{display:inline-block;padding:14px 18px;border-radius:10px;background:#204e39;color:white;text-decoration:none;font-weight:650}.small{font-size:13px!important}details{margin-top:20px}summary{cursor:pointer;line-height:1.5}li{margin-bottom:10px;line-height:1.5}.pair-code{display:block;font:700 clamp(24px,4vw,38px) ui-monospace,monospace;letter-spacing:2px;background:#ecf3e9;padding:24px 8px;text-align:center;border-radius:12px;color:#214e39;white-space:nowrap}#copyCode,#shareLink{margin-top:12px}.viewer-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0}.viewer-tools label{margin:0}.viewer-tools input{width:130px;padding:0;accent-color:#204e39}.viewer-tools output{min-width:45px;font-size:13px}.viewer-tools .danger{margin:0}.stage{display:block;height:65vh;min-height:260px;overflow:auto;padding:0;margin:0;overscroll-behavior:contain}#stageContent{display:flex;align-items:center;justify-content:center;min-width:100%;min-height:100%;padding:12px}#screen,#fallback{display:block;flex:none;max-width:none;max-height:none;object-fit:contain;touch-action:none;user-select:none}body.connected .intro{display:none}body.connected main{max-width:none;display:block;padding:20px 3vw}body.connected .panel{padding:20px}body.connected #stop{display:none}#session:fullscreen,#session.expanded{background:#f6f4ee;padding:16px;display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden}#session:fullscreen .stage,#session.expanded .stage{flex:1;height:auto;min-height:0}#session.expanded{position:fixed;inset:0;z-index:1000}#session:fullscreen .hint,#session.expanded .hint{margin:6px}#session:fullscreen .sessionhead h2,#session.expanded .sessionhead h2{font-size:18px;margin:0}body.native .intro{display:none}body.native main{display:block;padding:16px}body.native header{padding:12px 16px}body.native footer{display:none}@media(max-width:780px){.viewer-tools{gap:6px}.viewer-tools button{padding:10px}.viewer-tools input{width:80px}.stage{height:60vh}#session:fullscreen,#session.expanded{padding:8px}}

.connection-metrics{display:flex;flex-wrap:wrap;gap:6px 16px;padding:0 2px 8px;font-size:12px;color:#425d50;font-variant-numeric:tabular-nums}.connection-metrics span{white-space:nowrap}#connectionRoute{font-weight:700}#phonePing{color:#214e39}
.phone-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.phone-actions .home-control{background:#204e39;color:#fff;border-color:#204e39}.system-menu{position:relative;margin:0}.system-menu>summary{list-style:none;padding:12px 16px;border:1px solid #cfd8d0;border-radius:10px;background:#f5f8f2;color:#193c2c;font-size:14px;font-weight:600;min-height:44px}.system-menu>summary:focus-visible{outline:3px solid #5c9d77;outline-offset:3px}.system-options{position:absolute;top:calc(100% + 6px);right:0;width:220px;z-index:20;padding:10px;display:grid;gap:6px;background:#fff;border:1px solid #cfd8d0;border-radius:12px;box-shadow:0 8px 30px #172b3030}.system-options p{margin:4px;font-size:11px}.panel #systemHint{margin:6px 0 8px;font-size:12px;line-height:1.4;flex-shrink:0}@media(max-width:500px){.phone-actions{gap:5px}.phone-actions>button,.system-menu>summary{padding:10px;font-size:13px}}

/* Remote Ranger identity. Keep the active phone viewer compact. */
header{gap:16px;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:14px;letter-spacing:0;min-width:0}.brand img{width:88px;height:88px;object-fit:contain;background:transparent;flex:none}.brand .brand-copy{font-size:inherit;letter-spacing:0;color:inherit;margin:0;min-width:0}.brand strong{display:block;line-height:1.12}.brand small{display:block;font-size:9px;letter-spacing:1.4px;color:#8b4a25;margin-top:6px}.intro h1{font-size:clamp(40px,4.7vw,67px);letter-spacing:-2.8px}.download{box-shadow:0 3px 0 #133022}.brand:focus-visible{outline:3px solid #5c9d77;outline-offset:5px;border-radius:8px}body.connected header{flex-wrap:nowrap;gap:8px}body.connected .brand{gap:8px}body.connected .brand img{width:40px;height:40px}body.connected header .brand .brand-copy{display:block;font-size:18px}body.connected .brand small{display:none}body.connected #badge{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;padding:6px 10px}body.native header .brand img{width:56px;height:56px}body.native .brand strong{font-size:21px}@media(max-width:500px){header{gap:12px}.brand{gap:10px;font-size:23px}.brand img{width:72px;height:72px}.brand small{font-size:8px;letter-spacing:1px}.intro h1{font-size:42px;letter-spacing:-1.7px}body.connected .brand strong{font-size:17px}body.connected #badge{font-size:10px}}

body.native.connected header .brand img{width:40px;height:40px}