:root{color-scheme:dark;--bg:#101e2b;--panel:#162a3b;--line:#2b4253;--text:#eef6f7;--muted:#a4b7c5;--ice:#7de8e2}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'Avenir Next',Avenir,system-ui,sans-serif}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:1px solid var(--line);border-radius:7px;color:var(--text);background:#203749;padding:11px 14px;transition:background .15s}button:hover{background:#304d61}button:disabled{opacity:.6;cursor:wait}button:focus-visible,a:focus-visible,canvas:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--ice);outline-offset:4px}header{height:86px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5vw}.brand{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;letter-spacing:3px;font-weight:600;font-size:20px}.mark{font-size:35px;color:var(--ice)}.edition{font:11px ui-monospace,monospace;letter-spacing:2px;border-left:1px solid var(--line);padding-left:16px;margin-left:8px;color:var(--muted)}.private{font-size:14px;color:var(--muted)}main{max-width:1640px;margin:auto;padding:38px 5vw 22px}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.eyebrow{font:11px ui-monospace,monospace;letter-spacing:2px;color:var(--ice);margin:0 0 12px}h1{font-family:'Avenir Next',system-ui,sans-serif;font-weight:450;letter-spacing:-1.6px;font-size:clamp(29px,3vw,46px);margin:0 0 7px}.intro p:last-child{color:var(--muted);margin:0;font-size:16px}.primary{background:var(--ice);color:#102b36;border:0;padding:16px 25px;font-weight:650}.primary:hover{background:#b0fff7}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 290px;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 22px 70px #06121d55}.viewport{position:relative;min-height:570px;background:radial-gradient(ellipse at 50% 42%,#193447,#081622 75%);overflow:hidden}canvas{width:100%;height:100%;position:absolute;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}.view-top,.view-bottom{position:absolute;left:25px;right:25px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.view-top{top:22px;font:11px ui-monospace,monospace;letter-spacing:1px;color:var(--muted)}#badge{background:#183247cc;border:1px solid #35566b;padding:9px 11px;border-radius:4px;color:#cee7ed}i,.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ice);margin-right:8px}.view-bottom{bottom:20px;font-size:12px;color:var(--muted)}.view-bottom button{pointer-events:auto;font-size:12px;background:#142a3ddd;padding:8px 11px}.axis{position:absolute;left:25px;bottom:63px;display:grid;font:11px ui-monospace,monospace;color:#6e96ab;gap:2px}.axis b{font-weight:400}aside{background:var(--panel);padding:26px 23px;border-left:1px solid var(--line)}h2{font-size:18px;font-weight:550;margin:0 0 7px}.panel-heading{margin-bottom:29px}.panel-heading span{font:10px ui-monospace,monospace;letter-spacing:1.5px;color:var(--muted)}.control{display:block;font-size:14px;margin-bottom:22px}output{float:right;font:12px ui-monospace,monospace;color:var(--ice)}input[type=range]{width:100%;margin:14px 0 0;accent-color:var(--ice);height:5px;cursor:pointer}select{width:100%;background:#102435;color:var(--text);border:1px solid var(--line);padding:9px;border-radius:5px;margin-top:10px;font-size:13px}fieldset{border:0;margin:0 0 23px;padding:0}legend{font-size:14px;padding:0;margin-bottom:12px}.swatches{display:flex;gap:6px}.swatches button{flex:1;font-size:12px;padding:8px 4px}.swatches .selected{background:#315c66;border-color:var(--ice);color:#adfffa}.toggle{display:flex;justify-content:space-between;font-size:14px;align-items:center;margin:14px 0}.toggle input{accent-color:var(--ice);width:17px;height:17px}.actions{display:flex;gap:8px;margin-top:24px}.actions button{flex:1;padding:10px 4px;font-size:12px}.text-button{border:0;background:transparent;font-size:12px;color:var(--muted);display:block;margin:13px auto 0;padding:4px}footer{font-size:12px;color:var(--muted);padding-top:20px;display:flex;justify-content:space-between;gap:25px;line-height:1.7}footer p{margin:0;max-width:350px}footer>div{max-width:650px}@media(min-width:1600px){.viewport{min-height:670px}}@media(max-width:850px){main{padding:28px 20px}.workspace{grid-template-columns:1fr}.viewport{min-height:470px}aside{border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:0 25px}.panel-heading{grid-column:1/-1}.actions{margin-top:0}.text-button{margin-bottom:15px}footer{display:block}footer p{margin-top:8px;max-width:none}.intro{gap:20px}.primary{padding:14px 18px;white-space:nowrap}.edition{display:none}}@media(max-width:520px){header{height:70px}.brand{font-size:17px}.private{font-size:11px}.intro{align-items:flex-start;flex-direction:column}.viewport{min-height:400px}aside{padding:22px 18px;gap:0 18px}.view-top,.view-bottom{left:14px;right:14px}.view-bottom{font-size:10px}}
/* Dual camera work surface */
header{height:72px}main{padding-top:27px}.intro{margin-bottom:18px}h1{font-size:clamp(28px,2.8vw,40px)}.start-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.device-status{font-size:13px;color:var(--muted);margin:0 0 18px}.studio{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:20px;align-items:start}.display-column{min-width:0}.camera-views{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:18px}.camera-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;padding:14px}.camera-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}.camera-title h2{margin:0;font-size:16px}.camera-title button{font-size:11px;padding:7px 9px}.camera-card label{display:block;font-size:12px;margin-bottom:9px}.camera-card select{font-size:12px;margin-top:5px;padding:7px;width:100%}.camera-screen{position:relative;background:#091824;aspect-ratio:16/9;display:grid;place-items:center;border-radius:4px;overflow:hidden;margin-top:12px}.camera-screen span{font-size:12px;color:#66869a}.camera-screen canvas{position:absolute;inset:0;object-fit:contain;cursor:default;width:100%;height:100%}.camera-card p{font:11px ui-monospace,monospace;color:var(--muted);line-height:1.7;margin:10px 0 0;min-height:19px;overflow-wrap:anywhere}.studio .viewport{border:1px solid var(--line);border-radius:10px;min-height:480px}.studio aside{border:1px solid var(--line);border-radius:10px;padding:22px}.studio .panel-heading{margin-bottom:22px}.studio .control{margin-bottom:18px}.studio .hint{font-size:11px;line-height:1.6;color:var(--muted);margin:-8px 0 20px}.two-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px}.studio details{border-top:1px solid var(--line);padding-top:15px;margin:5px 0 18px}.studio summary{font-size:14px;cursor:pointer;margin-bottom:18px}.setup{font-size:13px;line-height:1.7;border-top:1px solid var(--line);margin-top:22px;padding:18px 0;color:var(--muted)}.setup summary{color:var(--text);cursor:pointer}.setup a{color:var(--ice)}.setup p{max-width:1000px}.view-top #fps{white-space:nowrap}.view-top{gap:15px}footer>div{flex:1}@media(max-width:1100px){.studio{grid-template-columns:minmax(0,1fr) 275px}.studio aside{padding:18px}.camera-card{padding:10px}.camera-title{flex-wrap:wrap}.intro{align-items:flex-start}.start-actions{max-width:180px}}@media(max-width:850px){.studio{grid-template-columns:1fr}.studio aside{display:block}.start-actions{max-width:none}.studio .viewport{min-height:440px}.edition{display:none}.camera-title{flex-wrap:nowrap}.intro{flex-direction:column;gap:17px}.start-actions{justify-content:flex-start}}@media(max-width:500px){.camera-views{grid-template-columns:1fr;gap:12px}.camera-card{padding:13px}.studio .viewport{min-height:360px}#badge{padding:7px;font-size:9px}.view-top{font-size:10px}.start-actions button{padding:12px;font-size:13px}.intro p:last-child{font-size:14px}.camera-card label{display:inline-block;width:calc(50% - 5px);vertical-align:top}.camera-card label+label{margin-left:6px}}