
:root{color-scheme:dark;--bg:#090f19;--panel:#101a29;--line:#29364a;--cyan:#00d4ed;--muted:#91a2b9}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#e7eef8;font:14px system-ui,Arial}button,input,select{font:inherit}button,select,input[type=text],input[type=number]{background:#0b1422;color:#e4ecf6;border:1px solid var(--line);border-radius:7px;padding:9px 12px}button{cursor:pointer;transition:.15s}button:hover{border-color:var(--cyan);background:#133142}button.active,button[aria-pressed=true]{color:var(--cyan);border-color:var(--cyan);background:#103747}button:focus-visible,input:focus-visible{outline:2px solid white;outline-offset:2px}header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 25px;border-bottom:1px solid var(--line)}header h1{font-size:20px;margin:0}header small{color:var(--muted);display:block;margin-top:5px}.badge{font-size:11px;color:var(--cyan);border:1px solid #19758b;padding:5px 9px;border-radius:20px}.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}main{padding:16px;display:grid;grid-template-columns:minmax(0,3fr) minmax(320px,1fr);gap:16px;align-items:start}.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:16px;min-width:0}h2{font-size:15px;margin:0 0 16px}h2:before{content:'◈';color:var(--cyan);margin-right:10px}.sub{color:var(--muted);font-size:12px}.row{display:flex;justify-content:space-between;gap:14px;align-items:center}.screen{position:relative;background:#020813;aspect-ratio:16/9;border:2px solid #2c6271;border-radius:8px;overflow:hidden;margin:16px 0;isolation:isolate}.screen:after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0003 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,#0003 0 1px,transparent 1px 4px);z-index:4}.screen.pitch39:after{background:repeating-linear-gradient(0deg,#0005 0 2px,transparent 2px 6px),repeating-linear-gradient(90deg,#0005 0 2px,transparent 2px 6px)}canvas{width:100%;height:100%;display:block}.screen video,.screen img{position:absolute;object-fit:cover;width:100%;height:100%;inset:0}.picture{position:absolute;inset:0;filter:var(--adjust);overflow:hidden}.pip{position:absolute;right:3%;bottom:5%;width:31%;height:31%;border:2px dashed var(--cyan);background:#071c2a;z-index:3;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;text-align:center;font-size:11px;overflow:hidden}.pip video,.pip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.pip label{z-index:1}.pip label button{font-size:11px}.zoneLine{position:absolute;top:0;bottom:0;border-left:2px dashed #00d4ed88;pointer-events:none;z-index:3}.tc,.flags,.patternName{position:absolute;z-index:5;font:12px ui-monospace,monospace;padding:6px 9px;border-radius:4px;background:#00121ddd;color:var(--cyan)}.tc{left:10px;top:10px}.flags{right:10px;top:10px}.patternName{left:10px;bottom:10px;color:#ffba41}.black{position:absolute;inset:0;background:black;z-index:7;display:none}.emergency{position:absolute;inset:0;background:#971d25;z-index:8;display:none;align-items:center;justify-content:center;padding:30px;text-align:center;flex-direction:column}.emergency strong{font-size:clamp(22px,4vw,58px)}.emergency span{margin-bottom:20px;letter-spacing:3px}.controlGroup{margin-top:20px}.controlGroup>label{display:block;color:var(--muted);font-size:12px;margin-bottom:9px}.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.quick button{min-height:72px;font-weight:650}.quick button span{display:block;font-size:24px;margin-bottom:5px}.danger{color:#ff9194;border-color:#7e303a}.quick .danger.active{background:#712630;color:#fff;border-color:#ff9194}.timeline{display:flex;height:58px;position:relative;gap:2px;margin-top:14px}.slot{padding:8px;font-size:11px;text-align:left;overflow:hidden;border-radius:5px;min-width:0}.slot.active{outline:2px solid var(--cyan);outline-offset:0}.ticks{display:flex;justify-content:space-between;font:11px monospace;color:var(--muted);margin-top:7px}.cursor{position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--cyan);pointer-events:none;box-shadow:0 0 8px var(--cyan)}.timeRange{width:100%;accent-color:var(--cyan);margin-top:14px}.log{height:160px;overflow:auto;background:#080f1c;padding:10px;border:1px solid var(--line);border-radius:6px;font:11px/1.7 monospace;margin-top:12px;white-space:pre-wrap;color:#90d9e5}.ok{color:#39dca8}.slider{margin:20px 0}.slider label{display:flex;justify-content:space-between;gap:12px;color:var(--muted);margin-bottom:10px}.slider output{color:var(--cyan);font:600 15px monospace}input[type=range]{width:100%;accent-color:var(--cyan);cursor:pointer}.switch{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-block:18px}.switch input{width:20px;height:20px;accent-color:var(--cyan)}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:15px}.stats>div{background:#0b1422;border:1px solid var(--line);padding:12px 8px;border-radius:6px}.stats strong{display:block;font:18px monospace;color:var(--cyan);margin-bottom:5px}.stats small{font-size:10px;color:var(--muted)}.heatmap{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}.cab{aspect-ratio:1;border-radius:3px;padding:0;font:10px monospace;min-width:0}.legend{display:flex;gap:14px;font-size:11px;color:var(--muted);margin-top:12px}dialog{background:var(--panel);color:#e7eef8;border:1px solid var(--cyan);border-radius:12px;padding:25px;width:min(480px,90vw)}dialog::backdrop{background:#000a;backdrop-filter:blur(5px)}textarea{width:100%;height:110px;background:#080f1c;color:white;border:1px solid var(--line);border-radius:6px;padding:12px;margin:10px 0 20px;font:inherit}.hidden,[hidden]{display:none!important}input[type=file]{display:none}footer{padding:10px 25px 25px;color:var(--muted);font-size:12px}.screen:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;border:0;border-radius:0}.statusText{color:var(--cyan);font:12px monospace}.previewControls{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.previewControls>div>label{display:block;color:var(--muted);font-size:12px;margin-bottom:8px}.endpoint{width:100%;margin:10px 0}.notify{color:#41d5a9;font-size:12px;min-height:20px;margin-top:10px}.alertborder{border-color:#d35e4c}.customInputs{display:flex;gap:8px;margin-top:10px}.customInputs input{width:45%}@media(max-width:1050px){main{grid-template-columns:1fr}.side{display:grid;grid-template-columns:1fr 1fr;gap:16px}.side .panel{margin:0}.side .panel:last-child{grid-column:1/-1}}@media(max-width:620px){header{padding:16px;align-items:flex-start;flex-wrap:wrap}header h1{font-size:18px}main{padding:10px;gap:10px}.panel{padding:13px}.side{display:block}.side .panel{margin-bottom:12px}.quick{grid-template-columns:1fr 1fr}.row{flex-wrap:wrap}.screen{margin:12px 0}.tc,.flags,.patternName{font-size:9px;padding:4px}.pip{font-size:8px;gap:3px}.pip button{padding:3px;font-size:8px!important}.slot{padding:4px;font-size:8px}.timeline{height:65px}.toolbar button{font-size:12px;padding:8px}.screen:after{opacity:.5}.previewControls{gap:15px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.zoneTitle{position:absolute;z-index:3;left:3%;font:12px monospace;color:#a1e5ec;pointer-events:none}#bannerTitle{top:6%}#tickerTitle{top:93%}.picture.threeZones{inset:20% 0 10%}.liveMetrics strong{font-size:15px}.cab{transition:background .7s}#wallClock{font-size:15px}@media(max-width:620px){.zoneTitle{font-size:8px}.heatmap{gap:2px}}
.auxZone{position:absolute;left:0;width:100%;z-index:3;overflow:hidden}.auxZone img,.auxZone video{position:absolute;inset:0;object-fit:cover;width:100%;height:100%}.auxUpload{position:absolute;right:2%;top:20%;z-index:2;font-size:10px;padding:4px 7px}.auxZone{filter:var(--zoneFilter,none)}@media(max-width:620px){.auxUpload{font-size:8px;padding:2px 4px;top:5%}}
@keyframes emergencyPulse{0%,100%{background:#971d25}50%{background:#e63740}}.emergency{animation:emergencyPulse 1.4s ease-in-out infinite}@media(prefers-reduced-motion:reduce){.emergency{animation:none;background:#b52530}}
