*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:#f5f7fa;color:#17212b;font:16px system-ui,sans-serif}main{height:100svh;min-height:100vh;padding:clamp(8px,2vw,20px);display:grid;grid-template-rows:auto auto auto auto minmax(0,1fr);gap:clamp(6px,1.2vw,12px);overflow:hidden}h1{margin:0;font-size:1.5rem}p{margin:.3rem 0}.controls,.camera-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.camera-controls{background:#edf2f6;padding:9px;border-radius:6px}.camera-controls strong{margin-right:4px}button{border:1px solid #8192a3;border-radius:6px;background:#fff;padding:9px 12px;font:inherit;cursor:pointer}.hud{background:#e4ebf1;padding:9px;border-radius:6px}.canvas{min-height:0;border:1px solid #b8c5d0;border-radius:8px;overflow:hidden}.canvas>div{height:100%}canvas{touch-action:none}main.nightshift{display:block;position:relative;padding:0;height:100svh;min-height:100vh;background:#1c2a36;color:#f4f8fb}.ns-canvas{position:absolute;inset:0}.ns-canvas>div{height:100%}.ns-hud{position:absolute;z-index:2;top:0;left:0;right:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left));pointer-events:none;background:linear-gradient(#0f1a23cc,#0f1a2300)}.ns-hud>*{pointer-events:auto}.ns-hud h1{font-size:1.1rem;margin:0 6px 0 0}.ns-shift{opacity:.8;font-size:.9rem}.ns-station{margin-left:auto;font-weight:700;background:#2f8f6b;border-radius:999px;padding:4px 12px}.ns-hud button,.ns-paused button{border-color:#3b6ea8;background:#f4f8fb;color:#17212b;padding:7px 12px}.ns-paused{position:absolute;z-index:3;inset:0;display:grid;place-content:center;gap:12px;text-align:center;background:#0f1a23b3;font-size:1.4rem}