*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#edf1f5;color:#233447;font:14px system-ui,sans-serif;display:flex;flex-direction:column}
header{padding:12px 20px;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #d2dbe4;gap:12px}
header h1{font-size:18px;margin:0;font-weight:650}
header p{margin:2px 0 0;color:#647589;font-size:12px}
#status{font-size:11px;letter-spacing:.4px;padding:5px 10px;border-radius:14px;background:#e7f1f2;color:#287883;white-space:nowrap}
#status.warn{background:#fdf0dc;color:#8a5a00}
main{flex:1;display:grid;grid-template-columns:1fr 340px;min-height:0}
#view{position:relative;overflow:hidden;background:#dfe6ee}
#view canvas{display:block;touch-action:none}
#hud{position:absolute;top:12px;left:14px;display:flex;gap:6px;flex-wrap:wrap}
#hint{position:absolute;bottom:10px;left:14px;color:#5d6d80;font-size:12px;pointer-events:none}
#legend{position:absolute;bottom:28px;left:14px;color:#5d6d80;font-size:12px;pointer-events:none}
#error{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:#fff;color:#a33;padding:30px;white-space:pre-wrap}
aside{background:#fff;border-left:1px solid #d2dbe4;overflow:auto;padding:10px 14px 30px;font-size:13px}
button{border:1px solid #c6d2de;background:#fff;padding:6px 10px;border-radius:6px;color:#31465b;cursor:pointer;font:inherit;font-size:12px}
button:hover{background:#e1ebf3}
button.active,button.on{background:#254f70;color:#fff;border-color:#254f70}
button.rec{background:#c0392b;color:#fff;border-color:#c0392b}
details{border-top:1px solid #e3e8ee;padding:6px 0}
summary{cursor:pointer;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#7a8999;padding:6px 0;user-select:none}
.modes{display:flex;gap:4px;margin:4px 0 8px;flex-wrap:wrap}
.modes label{flex:1;text-align:center;border:1px solid #c6d2de;border-radius:6px;padding:6px 4px;cursor:pointer;font-weight:600}
.modes input{display:none}
.modes input:checked+span{color:#fff}
.modes label:has(input:checked){background:#254f70;border-color:#254f70;color:#fff}
.row{display:grid;grid-template-columns:62px 1fr 58px;gap:8px;align-items:center;margin:3px 0}
.row label{color:#4f6072;font-size:12px;white-space:nowrap}
.row input[type=range]{width:100%;accent-color:#27617f;margin:0}
.row input[type=range].limit{accent-color:#c0392b}
.row output{font-variant-numeric:tabular-nums;text-align:right;font-size:12px}
.legrow{margin-top:6px;font-weight:600;color:#355}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:11.5px}
th{color:#7a8999;font-weight:500;text-align:right;padding:3px 4px;border-bottom:1px solid #e3e8ee}
th:first-child,td:first-child{text-align:left;white-space:nowrap}
td{text-align:right;padding:2px 3px;border-bottom:1px solid #f0f3f6;white-space:nowrap}
td.flag{color:#c0392b;font-weight:600}
td.bar{width:52px;padding:0 4px}
td.bar div{height:7px;background:#27617f;border-radius:3px}
td.bar div.warn{background:#e0a020}
td.bar div.bad{background:#c0392b}
.toggles label{display:inline-flex;align-items:center;gap:5px;margin:3px 10px 3px 0;font-size:12px}
.cams{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
#joy{width:140px;height:140px;border-radius:50%;border:2px solid #c6d2de;background:radial-gradient(#fff,#e9eef3);position:relative;touch-action:none;cursor:crosshair;margin:6px auto}
#joy-dot{position:absolute;width:16px;height:16px;border-radius:50%;background:#254f70;left:62px;top:62px;pointer-events:none}
#joy-label{text-align:center;font-size:11px;color:#647589}
.inline{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:6px 0}
.slip{display:flex;align-items:center;gap:8px;margin:6px 0}
.slip .track{flex:1;height:8px;background:#e3e8ee;border-radius:4px;overflow:hidden}
.slip .fill{height:100%;background:#27a06f;width:0}
.slip .fill.warn{background:#e0a020}
.slip .fill.bad{background:#c0392b}
.note{font-size:11.5px;line-height:1.5;color:#758495}
code{font-size:11px;background:#eef3f7;padding:1px 4px;border-radius:3px}
@media(max-width:900px){main{grid-template-columns:1fr}aside{border-left:0;border-top:1px solid #d2dbe4}#view{height:60vh}}