@import"https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800;900&family=DM+Mono:wght@400;500&display=swap";:root{font-family:DM Mono,monospace;color:#e5ebdf;background:#080d0e;font-synthesis:none}*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden}button,input{font:inherit}button{cursor:pointer}#stage,canvas{position:absolute;inset:0;width:100%;height:100%}#stage canvas{display:block}.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 28%,rgba(0,0,0,.67) 100%);z-index:2}#grain{position:absolute;inset:-20%;z-index:3;pointer-events:none;opacity:.11;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");animation:grain .27s steps(4) infinite}@keyframes grain{0%{transform:translate(0)}25%{transform:translate(-2%,1%)}50%{transform:translate(2%,-2%)}75%{transform:translate(-1%,2%)}}#flash{position:absolute;inset:0;background:#d3f3e5;pointer-events:none;z-index:25;opacity:0}.hidden{display:none!important}.screen{position:absolute;inset:0;z-index:10}#menu{padding:7vh 7.5vw 5vh;background:linear-gradient(90deg,#030a0bed,#040c0dc9,#050b0c1a 72%,#04080942);display:flex;flex-direction:column;align-items:flex-start}.eyebrow,.panel-kicker{color:#b9dbca;letter-spacing:.28em;font-size:11px;font-weight:500}h1{margin:7vh 0 0;font-family:Barlow Condensed,Impact,sans-serif;font-weight:900;letter-spacing:.015em;line-height:.78;font-size:clamp(66px,9.4vw,158px);text-shadow:0 9px 24px #000}h1 span{color:#d25a4b}.menu-rule{margin:3vh 0 2vh;width:72px;height:3px;background:#c95043}nav{display:flex;flex-direction:column;align-items:flex-start;gap:2px}nav button{background:transparent;border:0;color:#e6e8df;text-align:left;padding:5px 22px 5px 0;font-family:Barlow Condensed,Impact,sans-serif;font-size:clamp(21px,2.2vw,34px);font-weight:700;letter-spacing:.09em;transition:color .16s,transform .16s,text-shadow .16s}nav button:hover,nav button:focus-visible{color:#e96d5b;transform:translate(9px);text-shadow:0 0 20px #d25245}.menu-foot{margin-top:auto;width:100%;display:flex;justify-content:space-between;color:#8ba69e;font-size:9px;letter-spacing:.19em}.hud-top,.hud-bottom{position:absolute;left:3.5vw;right:3.5vw;display:flex;justify-content:space-between;z-index:7;pointer-events:none}.hud-top{top:3.5vh;align-items:flex-start}.brand{font-family:Barlow Condensed,Impact,sans-serif;font-size:27px;font-weight:900;letter-spacing:.07em;color:#e6ebe2;text-shadow:0 2px 8px #000}.brand span{font-family:DM Mono,monospace;font-size:10px;letter-spacing:.2em;color:#8bbca6;margin-left:9px}.night-clock{text-align:right;color:#dce9d9;font-size:10px;letter-spacing:.19em;text-shadow:0 1px 8px #000}.night-clock strong{display:block;margin-top:4px;font-family:Barlow Condensed,Impact,sans-serif;font-size:43px;line-height:1;letter-spacing:.03em}.hud-bottom{bottom:3vh;align-items:end}.power{width:245px;padding:13px 14px;background:#020c0cc4;border:1px solid #3c5c54;box-shadow:0 5px 30px #0008}.power-header{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.11em;color:#b7cfc0}.power-header strong{font-size:14px;color:#dbe9d4}.power-track{height:7px;background:#223330;margin-top:10px}.power-track div{height:100%;width:100%;background:#8cd4ac;box-shadow:0 0 9px #83caa3;transition:width .2s}.power-track div.critical{background:#d35a49;box-shadow:0 0 10px #d35a49}.usage{margin-top:8px;font-size:9px;letter-spacing:.12em;color:#a8c8b6}.usage span{margin-left:8px;color:#cfe1ce;font-size:15px;letter-spacing:1px}.control-hint{color:#b9c8b9;font-size:9px;letter-spacing:.13em;text-shadow:0 2px 8px #000}.side-controls{position:absolute;top:43%;z-index:8;display:flex;flex-direction:column;gap:5px;padding:10px;background:#060d0ec4;border:1px solid #55615c;box-shadow:0 10px 24px #0009}.side-controls.left{left:2.5vw}.side-controls.right{right:2.5vw}.side-label{text-align:center;font-size:8px;letter-spacing:.17em;color:#a9c3b3;margin-bottom:3px}.control-btn{display:flex;justify-content:space-between;gap:17px;min-width:108px;border:1px solid #61746b;padding:8px;background:#1e2c2b;color:#d9e7d7;font-size:10px;letter-spacing:.1em}.control-btn span{color:#8ccba4}.control-btn.active{border-color:#b54f42;background:#472923}.control-btn.active span{color:#e7826b}#cameraToggle{position:absolute;z-index:8;bottom:2.5vh;left:50%;transform:translate(-50%);padding:12px 22px;background:#071514d6;border:1px solid #8bada0;color:#e6efe4;font-size:10px;letter-spacing:.14em;white-space:nowrap}#cameraToggle:hover,#cameraDown:hover{background:#385049}#cameraUi{position:absolute;inset:0;z-index:9;background:#14302b2e;pointer-events:none;filter:contrast(1.14) saturate(.62)}#cameraUi:before{content:"";position:absolute;inset:12px;border:1px solid rgba(172,213,184,.42);pointer-events:none}.scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(0,0,0,.32) 3px,transparent 4px);opacity:.5}.cam-top{position:absolute;top:4vh;left:4vw;right:4vw;display:flex;justify-content:space-between;font-size:13px;letter-spacing:.11em;text-shadow:0 2px 8px #000}.rec{color:#ea5445;margin-right:17px;animation:blink 1.4s infinite}@keyframes blink{50%{opacity:.4}}.cam-bottom{position:absolute;bottom:4vh;left:4vw;right:4vw;display:flex;align-items:end;justify-content:space-between;gap:2vw}.cam-help{font-size:10px;line-height:1.7;letter-spacing:.1em;text-shadow:0 2px 6px #000}.cam-map{pointer-events:auto;position:relative;width:min(28vw,320px);height:min(25vh,220px);border:1px solid #a9cbb2;background:linear-gradient(90deg,transparent 49.5%,#73998588 50%,transparent 50.5%),linear-gradient(transparent 49.5%,#73998588 50%,transparent 50.5%),#051513d6;box-shadow:0 0 0 6px #0a1715aa,0 10px 30px #000b}.cam-map:before{content:"FACILITY MAP";position:absolute;left:8px;top:6px;font-size:9px;letter-spacing:.1em;color:#a9cdb5}.cam-pin{position:absolute;transform:translate(-50%,-50%);width:37px;height:25px;padding:0;border:1px solid #96ba9f;background:#1a342c;color:#d8ead6;font-size:11px;box-shadow:0 2px 7px #000}.cam-pin:hover,.cam-pin.selected{background:#e2e9d6;color:#122319;box-shadow:0 0 13px #cee8cf}#cameraDown{pointer-events:auto;padding:11px 15px;min-width:155px;border:1px solid #a4c5ab;background:#11251f;color:#dce9dc;font-size:10px;letter-spacing:.11em}#cameraStatic{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(235,255,245,.7) 0 1px,transparent 2px 4px),radial-gradient(circle,#fff8,transparent 55%);mix-blend-mode:screen;pointer-events:none;opacity:0}#modal{display:grid;place-items:center;background:#010607d1;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);padding:20px}.panel{width:min(660px,94vw);padding:clamp(24px,4vw,52px);border:1px solid #709586;background:linear-gradient(135deg,#132321f5,#0a1415fa);box-shadow:0 25px 80px #000,0 0 0 7px #071010a8;position:relative}.panel:before{content:"";height:3px;background:#b95648;position:absolute;top:0;left:0;right:0}.panel h2{margin:12px 0 20px;font-family:Barlow Condensed,Impact,sans-serif;font-weight:800;font-size:clamp(39px,5vw,66px);line-height:.92;letter-spacing:.03em}.panel p{font-size:13px;line-height:1.7;color:#b9cfc1;max-width:52ch}.panel em{color:#e6bfab}.panel #modalActions{display:flex;flex-wrap:wrap;gap:9px;margin-top:29px}.panel #modalActions button{padding:12px 18px;border:1px solid #a8c9ae;background:#24443b;color:#e1ece0;font-size:11px;letter-spacing:.1em}.panel #modalActions button:hover{background:#3f6c55}.panel #modalActions button+button{background:transparent}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:19px 0}.help-grid div{display:flex;flex-direction:column;gap:3px;border-left:2px solid #648674;padding-left:10px}.help-grid b{font-size:10px;letter-spacing:.08em}.help-grid span{color:#a7c3b0;font-size:11px}.night-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.night-grid button{background:#18302a;color:#dbe9d9;border:1px solid #719a83;padding:17px 6px;display:flex;flex-direction:column;gap:3px}.night-grid button b{font:800 35px Barlow Condensed,sans-serif}.night-grid button span{font-size:7px;letter-spacing:.07em}.night-grid button:disabled{opacity:.35;cursor:not-allowed}.night-grid button:not(:disabled):hover{background:#426954}.setting{display:flex;align-items:center;gap:14px;margin:18px 0;font-size:11px;letter-spacing:.07em;color:#c6dfce}.setting input[type=range]{accent-color:#8cc59e;flex:1}.setting input[type=checkbox]{accent-color:#8cc59e}.toast{position:absolute;top:16%;left:50%;transform:translate(-50%);z-index:14;padding:9px 17px;background:#101c1cd9;border:1px solid #a0bba7;color:#deebde;font-size:10px;letter-spacing:.1em;text-align:center;white-space:nowrap;animation:toast .2s}@keyframes toast{0%{opacity:0;transform:translate(-50%,-8px)}}.photo-error{position:absolute;z-index:30;left:12px;right:12px;bottom:12px;padding:12px;background:#541d19;color:#fff;font-size:12px;text-align:center}@media(max-width:700px){#menu{padding:5vh 6vw}h1{margin-top:7vh;font-size:clamp(55px,14vw,90px)}.menu-foot{font-size:7px}.control-hint{display:none}.side-controls{top:auto;bottom:14vh;padding:6px}.side-controls.left{left:2vw}.side-controls.right{right:2vw}.control-btn{min-width:88px;font-size:9px;padding:7px}.cam-bottom{align-items:end}.cam-help{display:none}.cam-map{width:58vw;height:20vh}.cam-pin{width:29px;height:22px;font-size:9px}#cameraDown{min-width:0;font-size:8px;padding:9px}.night-grid{gap:4px}.night-grid button{padding:13px 2px}.night-grid button b{font-size:26px}.night-grid button span{font-size:6px}.brand{font-size:21px}.brand span{display:none}.night-clock strong{font-size:32px}.power{width:160px;padding:8px}.power-header{font-size:7px}.hud-bottom{bottom:7vh}}#app:has(#cameraUi:not(.hidden)) .hud-top,#app:has(#cameraUi:not(.hidden)) #cameraToggle,#app:has(#cameraUi:not(.hidden)) .control-hint{opacity:0;pointer-events:none}.cam-time-block{display:flex;flex-direction:column;align-items:flex-end;gap:5px}.cam-time-block span:first-child{color:#b5d6c1;font-size:10px}.scanlines{opacity:.3}
