@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600&family=Roboto+Condensed:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#0b1113;--panel:#121c20;--line:#2b3d41;--cyan:#65dbe0;--amber:#efb954;--red:#ed6c61;--text:#e4eceb}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 20% 0%,#172a2b 0,transparent 50%),var(--bg);color:var(--text);font-family:'Roboto Condensed',Arial,sans-serif}button{font:inherit;cursor:pointer;color:inherit;touch-action:manipulation}button:focus-visible,summary:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}main{max-width:1200px;margin:auto;padding:25px 28px 12px}header{display:flex;justify-content:space-between;align-items:center;padding-bottom:23px;border-bottom:1px solid var(--line);gap:15px}.brand{font:bold 25px Arial;letter-spacing:4px;color:#aac8c8}.brand span{display:block;font:9px Arial;letter-spacing:2px;margin-top:6px;color:#719193}.status{font-size:11px;letter-spacing:1px;display:flex;align-items:center;gap:8px}.status i{width:6px;height:6px;background:#7bd1a0;border-radius:50%;box-shadow:0 0 10px #7bd1a0}.status button{border:1px solid var(--line);background:none;padding:9px 10px;margin-left:10px;font-size:10px}.heading{display:flex;align-items:center;justify-content:space-between;margin:27px 0 23px}.eyebrow{font-size:10px;letter-spacing:2px;color:#8da6a8;margin:0 0 8px}h1{font-family:Oswald,Arial,sans-serif;font-size:clamp(32px,4vw,50px);font-weight:500;margin:0;line-height:1.1}h2{font-family:Oswald,Arial,sans-serif;font-size:32px;font-weight:500;line-height:1.15}.prototype{border:1px solid #56605b;color:#a5ada2;padding:5px 9px;font-size:10px;letter-spacing:2px}.layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(290px,1fr);gap:24px;align-items:start}.camera{position:relative;border:1px solid #3d5254;background:#10191b;overflow:hidden;border-radius:4px;isolation:isolate}canvas{display:block;width:100%;aspect-ratio:1}.camtop,.cambottom{position:absolute;left:0;right:0;padding:11px 13px;display:flex;justify-content:space-between;font:9px monospace;letter-spacing:.7px;pointer-events:none;background:linear-gradient(#061013dd,transparent);z-index:2}.camtop{top:0}.camtop b{color:var(--red);font-size:11px;margin-right:5px}.cambottom{bottom:0;background:linear-gradient(transparent,#061013dd);color:#b1c2bf}.scanlines{position:absolute;inset:0;pointer-events:none;opacity:.15;background:repeating-linear-gradient(transparent 0px,transparent 3px,#000 4px);z-index:1}.progress{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:11px;letter-spacing:1px;color:#a3b5b5}.progress>span:first-child{color:var(--cyan)}.bars{display:flex;width:100%;gap:5px}.bars i{height:3px;background:#26383b;flex:1}.bars i.current{background:var(--cyan)}.bars i.done{background:#71b68d}.radio{padding:18px;background:linear-gradient(115deg,#18303470,#152226);border:1px solid var(--line);margin:18px 0;border-left:2px solid var(--cyan);min-height:144px}.radiohead{font-size:10px;letter-spacing:1px;color:#8caeb1;display:flex;gap:12px;align-items:center}.pulse{color:var(--cyan);font-size:18px;letter-spacing:2px}.radio p{font-size:17px;line-height:1.45;margin:11px 0 0}.radio.warn{border-left-color:var(--amber)}.radio.warn p{color:#f2cf91}.controls{display:grid;gap:9px}.controls button{display:flex;align-items:center;text-align:left;gap:14px;min-height:66px;padding:12px 15px;border:1px solid var(--line);background:linear-gradient(110deg,#182326,#101a1d);border-radius:3px;transition:background .2s,border-color .2s}.controls button:hover{border-color:#66858a}.controls button.on{border-color:#bd8c3a;background:linear-gradient(110deg,#4c381b88,#191d1c);box-shadow:inset 2px 0 var(--amber)}.controls button.on b,.controls button.on .icon{color:var(--amber)}.controls button small{display:block;font-size:9px;letter-spacing:1px;color:#829b9d;margin-top:5px}.controls button b{font-size:9px;margin-left:auto;font-weight:500;letter-spacing:1px;color:#96a4a2}.icon{font:26px Arial;width:29px;text-align:center;color:#b2c4c4}.power{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:#738f91;margin:17px 0}.power b{color:#a6bab8;font-weight:400}.primary{display:flex;justify-content:space-between;align-items:center;width:100%;border:1px solid var(--cyan);background:#15383d;color:#a8f4f2;padding:17px 18px;font-size:14px;font-weight:700;letter-spacing:1px;border-radius:3px;min-height:53px}.primary:hover{background:#23515a}.primary:disabled{opacity:.55;cursor:default}.primary span{font-size:22px}.legend{display:flex;flex-wrap:wrap;gap:15px;font-size:11px;color:#92a8a9;margin:17px 0}.legend span{display:flex;gap:5px;align-items:center}.legend i{height:7px;width:7px;border:1.5px solid;border-radius:50%}.cyan{color:var(--cyan)}.red{color:var(--red)}.amber{color:var(--amber)}details{border-top:1px solid var(--line);font-size:13px;line-height:1.5;color:#91a5a6;padding-top:13px}summary{cursor:pointer}footer{display:flex;justify-content:space-between;padding:25px 0 10px;font:9px monospace;letter-spacing:1px;color:#627c7d}footer button{background:none;border:0;color:#a4b6b5;text-decoration:underline;font-size:12px}#intro{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:#061013ce;backdrop-filter:blur(4px);padding:25px}.introbox{max-width:390px}.introbox h2{font-size:42px;margin:10px 0 20px}.introbox p{font-size:18px;line-height:1.5}.introbox ul{list-style:none;padding:0;margin:22px 0;color:#aec0c0;font-size:14px;line-height:1.5}.introbox li{padding:4px 0}.introbox li:before{content:'— ';color:var(--cyan)}.introbox small{display:block;margin-top:13px;font-size:11px;color:#91a5a6}#success{max-width:620px;border:1px solid #4c9181;background:radial-gradient(ellipse at top,#21423b,#101c1d);margin:28px auto;padding:30px;text-align:center}#success h2{font-size:34px;margin:12px 0}#success p:not(.eyebrow){color:#b0c7c1}.coordinates{font:clamp(25px,5vw,38px) monospace;color:#a4e1c7;line-height:1.5;letter-spacing:2px;margin:25px 0}#success .primary{justify-content:center}.started #intro{display:none}body.won aside .controls{opacity:.4;pointer-events:none}@media(max-width:760px){main{padding:16px 13px 10px}.layout{grid-template-columns:1fr;gap:18px}header{padding-bottom:15px}.brand{font-size:20px;letter-spacing:3px}.brand span{font-size:7px}.status{font-size:9px;gap:5px}.status button{margin-left:0;padding:8px 5px;font-size:8px}.heading{margin:22px 0 16px}.eyebrow{font-size:8px}.controls{grid-template-columns:1fr 1fr;gap:8px}.controls button{padding:11px 9px;gap:8px;min-height:75px;position:relative;align-items:flex-start}.controls button>span:nth-child(2){font-size:15px}.controls button small{font-size:7px}.controls button b{position:absolute;left:43px;bottom:9px;font-size:8px}.icon{font-size:23px;width:25px}.radio{margin:13px 0;min-height:110px;padding:14px}.radio p{font-size:16px}.introbox h2{font-size:29px;margin:7px 0 12px}.introbox p{font-size:14px;margin:9px 0}.introbox ul{font-size:11px;margin:12px 0}.introbox small{font-size:9px;margin-top:9px}.introbox .primary{padding:10px;font-size:12px;min-height:44px}#intro{padding:20px}.camtop,.cambottom{font-size:7px;padding:7px 9px}.legend{font-size:10px;justify-content:space-between;gap:5px}.bars{gap:4px}footer{font-size:7px}.progress{font-size:10px}}
