:root{color-scheme:dark;font:16px/1.5 system-ui,sans-serif;background:#101b22;color:#edf3f4}*{box-sizing:border-box}body{margin:0}header,main,footer{max-width:1280px;margin:auto}header{height:88px;display:flex;align-items:center;gap:24px;padding:0 32px;border-bottom:1px solid #2c3a42}.brand{color:#f2f7f6;text-decoration:none;font-size:24px;letter-spacing:-1px}.brand:first-letter{color:#b5d7af}.local,.eyebrow{font-size:11px;letter-spacing:2px;color:#a8bebf}header button{margin-left:auto}main{padding:36px 32px;min-height:calc(100vh - 170px)}h1{font-size:32px;letter-spacing:-1px;line-height:1.15;margin:10px 0 24px}h1 span{font-size:14px;font-weight:400;color:#a8bebf;margin-left:12px;letter-spacing:0}h2{margin:6px 0;font-size:23px}p{color:#a8bebf}button,input{font:inherit}button{cursor:pointer;min-height:44px;border:1px solid #40515a;background:#1c2b34;color:#edf3f4;border-radius:8px;padding:10px 18px}button:hover{background:#2b3d45}button:disabled{opacity:.5;cursor:default}button:focus-visible,input:focus-visible{outline:3px solid #b5d7af;outline-offset:3px}.primary{background:#b5d7af;color:#17241b;font-weight:650;border:0}.heading{display:flex;justify-content:space-between;align-items:center}.badge{background:#2a3439;border:1px solid #46545b;color:#c0c9ce;border-radius:30px;padding:7px 14px;font-size:13px}.badge.live{background:#203b31;color:#b5dfbd;border-color:#45654b}.viewer{position:relative;aspect-ratio:16/9;background:#090e12;border:1px solid #32424b;border-radius:12px;overflow:hidden}.viewer img{width:100%;height:100%;object-fit:contain}.unavailable{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;background:#090e12}.unavailable span{color:#8eabb6;font-size:14px}.fullscreen{position:absolute;right:16px;bottom:16px;background:#101b22c9;font-size:22px}.video-label{position:absolute;top:18px;left:18px;font-size:11px;letter-spacing:2px;background:#101b22b0;padding:6px 10px;border-radius:5px}.toolbar{display:flex;align-items:center;gap:12px;padding:18px 0}.toolbar span{margin-left:auto;color:#9db1ba;font-size:12px}.controls{margin-top:14px;display:flex;align-items:center;justify-content:space-between;padding:28px 32px;background:#17252e;border:1px solid #33454f;border-radius:12px}.controls p{font-size:14px;margin:10px 0}.dpad{display:grid;grid-template-columns:56px 56px 56px;grid-template-rows:56px 56px 56px;gap:7px}.dpad button{font-size:23px;padding:0;touch-action:none;user-select:none;-webkit-user-select:none}.dpad button.active{background:#b5d7af;color:#17241b}.dpad button:nth-child(1){grid-column:2}.dpad button:nth-child(2){grid-row:2;grid-column:1}.dpad button:nth-child(3){grid-row:2;grid-column:2;color:#b5d7af}.dpad button:nth-child(4){grid-row:2;grid-column:3}.dpad button:nth-child(5){grid-row:3;grid-column:2}.safety{max-width:220px}.muted{font-size:13px}#message{color:#edc892;min-height:24px}.offline{border:1px solid #775a32;background:#322b20;border-radius:8px;padding:16px}.login-card{max-width:430px;margin:35px auto 60px}.login-card h1{font-size:44px}.login-card label{display:block;color:#cbd8dd;margin-top:18px}input:not([type=range]){display:block;margin:8px 0;width:100%;padding:12px;border:1px solid #445862;background:#192832;color:#fff;border-radius:8px}.login-card button{width:100%;margin-top:22px}footer{display:flex;justify-content:space-between;padding:22px 32px;color:#93a7b0;font-size:11px;letter-spacing:1px;border-top:1px solid #2c3a42}[hidden]{display:none!important}.viewer:fullscreen{border:0;border-radius:0;width:100%;height:100%;aspect-ratio:auto}@media(max-width:640px){header{height:72px;padding:0 18px;gap:14px}.brand{font-size:21px}.local{display:none}main{padding:24px 16px}.heading h1{font-size:25px}.heading h1 span{display:block;margin:7px 0 0}.badge{font-size:12px;padding:6px 10px}.viewer{border-radius:8px}.toolbar{flex-wrap:wrap}.toolbar span{width:100%;margin:0}.controls{padding:20px 16px;gap:12px;flex-wrap:wrap}.controls>div:first-child{max-width:150px}.safety{max-width:none!important;width:100%}.dpad{grid-template-columns:52px 52px 52px;grid-template-rows:52px 52px 52px}footer{padding:18px 16px}footer span{letter-spacing:0}.login-card{margin-top:24px}}

.view-tabs{display:flex;gap:8px;margin:0 0 20px}.view-tabs button[aria-pressed=true]{background:#b5d7af;color:#17241b;border-color:#b5d7af}.recordings-panel{border:1px solid #33454f;background:#17252e;border-radius:12px;padding:24px;margin-bottom:24px}.recordings-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}.recordings-heading p{margin:8px 0 16px}.recording-date-row{display:flex;align-items:end;gap:16px}.recording-date-row label{display:block;font-size:14px;color:#cbd8dd}.recording-date-row input{min-width:185px;margin-bottom:0}.recording-state{border:1px solid #5b5443;background:#272923;padding:20px;border-radius:8px;margin:18px 0}.recording-state p{margin:8px 0 0;max-width:750px}.recording-state[data-state=loading]{border-color:#405f71;background:#1b303c}.recording-state[data-state=offline],.recording-state[data-state=error]{border-color:#805543;background:#332a25}.recording-limit{font-size:13px;max-width:800px;margin-bottom:0}@media(max-width:640px){.recordings-panel{padding:18px 14px}.recordings-heading{align-items:start;flex-direction:column}.recording-date-row{flex-wrap:wrap;margin-top:18px;gap:12px}.recording-date-row label{max-width:100%}.recording-state{padding:16px}.view-tabs button{flex:1}}