:root{color-scheme:dark;font-family:Bahnschrift,"Segoe UI",sans-serif;color:#e0e8e8;background:#09131f;--gold:#ffe34d;--line:#ffffff20}*{box-sizing:border-box}body{margin:0}#stage{height:100dvh;min-height:560px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 38% 45%,#20394a,#0c1a28 65%,#08111d)}#viewport{width:100%;height:100%;display:block;touch-action:none;image-rendering:pixelated}.title{position:absolute;top:25px;left:30px;pointer-events:none}.title p{font:11px Consolas,monospace;letter-spacing:1.8px;color:#9eb4be}.title span{color:#718995}h1{font-size:38px;letter-spacing:1px;margin:10px 0;color:#e7ece6;font-weight:500}.title .subtitle{font:14px "Segoe UI",sans-serif;letter-spacing:.1px;color:#a7b6be}button,input,select{font:inherit}button,select{min-height:44px;border:1px solid #56717e80;border-radius:5px;color:#dce6e6;background:#18303dcc}button{padding:9px 12px;cursor:pointer}button:hover{background:#2e4651}button[aria-pressed=true]{color:var(--gold);border-color:#c7aa50;background:#3f3a28}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible,canvas:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.panel{position:absolute;right:22px;top:22px;bottom:90px;width:290px;overflow:auto;padding:20px;background:#0b1822c9;border:1px solid #5a74844d;border-radius:9px;backdrop-filter:blur(7px);scrollbar-width:thin}.eyebrow{font:10px Consolas,monospace;letter-spacing:1.8px;color:var(--gold);margin:0 0 8px}h2{font-size:20px;font-weight:500;margin:0 0 17px}.cameras{display:grid;grid-template-columns:1fr 1fr;gap:7px}label{display:block;font-size:13px;margin-top:18px;color:#bbcbd1}select{display:block;width:100%;margin-top:7px;padding:8px;font-size:16px}output{float:right;color:var(--gold);font:14px Consolas,monospace}input[type=range]{width:100%;min-height:44px;accent-color:var(--gold);touch-action:pan-y}#sweep{width:100%}.check{display:flex;align-items:center;min-height:44px;margin-top:8px;gap:10px}.check input{width:20px;height:20px;accent-color:var(--gold)}details{border-top:1px solid var(--line);margin-top:14px;padding-top:10px}summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:13px}details a{display:block;padding:10px 0;color:var(--gold);min-height:44px;font-size:13px}details p,.note,#notice{font-size:12px;line-height:1.6;color:#8fa6b1}.camera-bar{position:absolute;bottom:31px;left:30px;display:flex;gap:8px;padding:7px;border-radius:7px;background:#0b1822bb;border:1px solid #4f67734d}.camera-bar button:first-child,.camera-bar button:nth-child(2){width:45px;font-size:20px;padding:5px}.footer{position:absolute;bottom:10px;left:32px;right:25px;display:flex;justify-content:space-between;color:#6e8999;font:9px Consolas,monospace;letter-spacing:1px;pointer-events:none}#loading{position:absolute;inset:45% 330px auto 25px;text-align:center;color:var(--gold)}[hidden]{display:none!important}@media(max-width:850px){.title{left:20px;top:16px}h1{font-size:28px}.title span,.title .subtitle{display:none}.panel{width:245px;right:14px;top:95px;bottom:94px;padding:14px}.camera-bar{left:18px}.footer span:last-child{display:none}}@media(max-width:600px){#stage{height:auto;min-height:100dvh;overflow:visible;padding-bottom:20px}#viewport{height:58dvh;min-height:360px}.panel{position:relative;top:auto;right:auto;bottom:auto;width:auto;margin:0 14px;max-height:none}.title{top:12px}h1{font-size:25px}.camera-bar{position:relative;bottom:auto;left:auto;margin:14px;justify-content:center}.footer{position:static;margin:0 18px}#loading{inset:230px 20px auto}.panel h2{display:none}.cameras{grid-template-columns:repeat(3,1fr)}.camera-bar button{padding:8px}.title p{font-size:9px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
