:root{color-scheme:dark;--bg:#081426;--panel:#10243b;--cyan:#62dcf3;--mint:#59d9ad;--text:#f0f7ff;--muted:#b3cbdc;font-family:system-ui,'Segoe UI',sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% 0%,#133958 0,transparent 55%),linear-gradient(135deg,#070f20,#0b162b 70%);color:var(--text);min-height:100vh}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(transparent 97%,#4bb0cb0a 100%),linear-gradient(90deg,transparent 97%,#4bb0cb0a 100%);background-size:40px 40px}.shell{max-width:1080px;margin:auto;padding:22px 22px 32px;position:relative}.brand{display:block;width:clamp(210px,36vw,355px);max-height:190px;object-fit:contain;object-position:left center;margin:-24px 0 -8px}.topline,.panel-head,.telemetry,footer{font:700 .72rem/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em}.topline{display:flex;justify-content:space-between;gap:10px;color:#90c3d9}.secure{color:var(--mint)}h1{font-size:clamp(2.2rem,5.8vw,4rem);letter-spacing:-.055em;margin:14px 0 2px}h1 span{color:var(--cyan)}.site-head p{color:var(--muted);margin:0 0 22px;font-size:1.04rem}.panel,.details{border:1px solid #28546c;background:linear-gradient(145deg,#112741,#0e1d35);border-radius:21px;box-shadow:0 12px 44px #020b1b50;padding:16px}.panel-head{display:flex;justify-content:space-between;color:var(--cyan);margin:0 6px 12px;gap:10px}.panel-head #camSignal{color:#80a4b2}.panel-head #camSignal.online{color:var(--mint)}.viewport{position:relative;overflow:hidden;border:1px solid #27546a;background:#050b18;border-radius:13px;aspect-ratio:16/9;max-height:600px}#camera,#overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}#overlay{pointer-events:none}#placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:#a4c3d6;font-size:.93rem}#placeholder.hidden{display:none}.corner{position:absolute;width:36px;height:36px;border:3px solid var(--cyan);pointer-events:none;filter:drop-shadow(0 0 7px #44dfff70)}.tl{top:8px;left:8px;border-right:0;border-bottom:0}.tr{top:8px;right:8px;border-left:0;border-bottom:0}.bl{bottom:8px;left:8px;border-right:0;border-top:0}.br{bottom:8px;right:8px;border-left:0;border-top:0}.reticle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:300 28px monospace;color:#62dcf36b;pointer-events:none}.status{position:absolute;left:16px;bottom:15px;border-radius:30px;background:#081628d9;border:1px solid #345266;padding:7px 13px;font-size:.76rem;color:#d5e7f2;max-width:calc(100% - 32px)}.status.active{color:#8effd3;border-color:#45997d}.telemetry{display:flex;align-items:center;gap:14px;justify-content:space-between;padding:15px 7px 10px;color:#a6cfe0}.telemetry output{color:var(--cyan)}.meter{flex:1;max-width:260px;height:8px;background:#253b4b;border-radius:20px;overflow:hidden}.meter>div{height:100%;width:0;background:linear-gradient(90deg,#42a7d1,#62dcf3,#59d9ad);transition:width .15s}.controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:5px 4px}button{background:#226782;color:white;border:1px solid #4d899f;border-radius:9px;padding:12px 15px;font-weight:700;cursor:pointer}button:hover:not(:disabled){background:#318ca7}button:disabled{opacity:.42;cursor:not-allowed}#stop{background:#293e56}#test{background:#274961}label{color:#b9d4e7;margin-left:auto;font-size:.86rem}input[type=range]{accent-color:var(--cyan);width:148px}.details{margin-top:20px;padding:18px 24px;color:#bad1e5;line-height:1.7}.details h2{color:var(--text);margin:0 0 8px}.details p{margin:8px 0}footer{text-align:center;color:#86abc3;padding:25px 5px 0}@media(max-width:650px){.shell{padding:12px}.brand{margin:-14px 0 -6px}.secure{font-size:.55rem}.panel{padding:9px}.panel-head{font-size:.61rem}.viewport{aspect-ratio:4/3}.telemetry{font-size:.55rem;gap:6px}.controls button{padding:10px}.controls label{margin-left:0}.details{padding:15px}}@media(prefers-reduced-motion:reduce){.meter>div{transition:none}}