:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,sans-serif;--bg:#06111b;--panel:#071722e8;--line:#28516a;--text:#dff4ff;--muted:#789aaa;--camera:#ffd166;--lidar:#5ed5ff;--radar:#ff7185;--navigation:#9b8cff}
*{box-sizing:border-box}body{margin:0;overflow:hidden;background:var(--bg);color:var(--text)}button,input,select{font:inherit}button{border:1px solid var(--line);border-radius:8px;padding:8px 11px;background:#0a1d2a;color:#c6e2ef;cursor:pointer}button:hover:not(:disabled){border-color:#5ed5ff;background:#0d2939}button:disabled{opacity:.42;cursor:not-allowed}#scene,.labels{position:fixed;inset:0}canvas{display:block}.labels{pointer-events:none}
.topbar{position:fixed;z-index:5;inset:18px 22px auto;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;pointer-events:none}.topbar button,.topbar select{pointer-events:auto}.eyebrow{color:#5ed5ff;font:11px ui-monospace,monospace;letter-spacing:.16em}h1{margin:5px 0 8px;font-size:25px}.trace{display:flex;gap:7px;flex-wrap:wrap}.chip{padding:6px 9px;border:1px solid var(--line);border-radius:999px;background:#071722d9;color:#a9c8d8;font-size:11px}.chip.warning{border-color:#8a6228;color:#ffd166}.mono{font-family:ui-monospace,monospace}
.topbar-actions{position:relative;display:flex;align-items:flex-end;gap:8px;pointer-events:auto}.vehicle-picker{display:grid;gap:4px;color:#9fc0cf;font-size:11px}.vehicle-picker select{min-width:230px;padding:8px 30px 8px 10px;border:1px solid var(--line);border-radius:8px;background:#0a1d2a;color:var(--text);outline:none}.vehicle-picker select:focus{border-color:#5ed5ff}.vehicle-picker select:disabled{opacity:.55}.topbar-actions.loading .vehicle-picker select{border-color:#3b718d}.load-error{position:absolute;top:calc(100% + 7px);right:0;max-width:430px;padding:7px 9px;border:1px solid #8f3d50;border-radius:7px;background:#261019e8;color:#ffdce1;font-size:11px;line-height:1.35}
.control-panel{position:fixed;z-index:5;right:22px;top:78px;width:330px;max-height:calc(100vh - 102px);display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;background:var(--panel);backdrop-filter:blur(9px);overflow:hidden}.control-panel section{padding:12px 13px;border-bottom:1px solid #173648}.control-panel section:last-child{border-bottom:0}.selection-controls>label,.range-row label{display:block;margin-bottom:6px;color:#9fc0cf;font-size:12px}.selection-controls input[type=search]{width:100%;padding:9px 10px;border:1px solid #234b61;border-radius:7px;background:#05131d;color:var(--text);outline:none}.selection-controls input:focus{border-color:#5ed5ff}.button-row{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}.master-controls{display:flex;gap:12px;flex-wrap:wrap;font-size:12px}.master-controls label,.sensor-row label{display:flex;align-items:center;gap:5px;cursor:pointer}.master-controls input,.sensor-row input{accent-color:currentColor}.range-row>div{display:flex;justify-content:space-between}.range-row input{width:100%;accent-color:#5ed5ff}.section-title{display:flex;justify-content:space-between;color:#9fc0cf;font-size:12px}.sensor-section{min-height:0;display:flex;flex-direction:column}.sensor-list{margin-top:8px;overflow:auto}.sensor-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;align-items:center;padding:6px 4px;border-bottom:1px solid #122f40;font:11px ui-monospace,monospace}.sensor-row.selected{background:#153448;border-radius:5px}.sensor-row.filtered{display:none}.sensor-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sensor-type{color:#6f91a1}.sensor-row button{padding:3px 6px;font-size:10px}.sensor-row .no-fov{width:18px;text-align:center;color:#426173}
.details-panel{position:fixed;z-index:5;left:22px;bottom:20px;width:410px;max-height:250px;overflow:auto;padding:14px;border:1px solid var(--line);border-radius:11px;background:var(--panel);font-size:12px;line-height:1.55}.details-panel p{margin:7px 0;color:#9ab7c5}.details-panel dl{display:grid;grid-template-columns:90px 1fr;gap:4px 8px;margin:8px 0}.details-panel dt{color:#6f91a1}.details-panel dd{margin:0;font-family:ui-monospace,monospace;overflow-wrap:anywhere}.details-panel a{color:#5ed5ff}.details-panel .warning-text{color:#ffb34d}
.legend{position:fixed;z-index:4;left:22px;top:116px;display:flex;gap:13px;padding:8px 10px;border:1px solid #234b61;border-radius:8px;background:#06141ecf;font-size:12px}.legend i{display:inline-block;width:8px;height:8px;margin-right:5px;border-radius:50%;background:currentColor;box-shadow:0 0 9px currentColor}.camera-color{color:var(--camera)}.lidar-color{color:var(--lidar)}.radar-color{color:var(--radar)}.navigation-color{color:var(--navigation)}.hint{position:fixed;z-index:4;right:370px;bottom:20px;color:var(--muted);font-size:11px}.sensor-label{padding:2px 5px;border-radius:4px;background:#06141edb;font:10px ui-monospace,monospace;white-space:nowrap;text-shadow:0 1px 2px #000;transition:opacity .12s}.sensor-label.overlap{opacity:.22}.sensor-label.selected{opacity:1!important;outline:1px solid currentColor}.sensor-label.outlier{border:1px dashed #ff9f43}.origin-label{font:10px ui-monospace,monospace}.tooltip{display:none;position:fixed;z-index:8;padding:8px 10px;border:1px solid #3b718d;border-radius:6px;background:#06141ef2;font:11px ui-monospace,monospace;pointer-events:none}.fatal-error{position:fixed;z-index:20;inset:40% auto auto 50%;transform:translate(-50%,-50%);max-width:560px;padding:20px;border:1px solid #ff7185;border-radius:10px;background:#261019;color:#ffdce1;white-space:pre-wrap}
@media(max-width:800px){.control-panel{right:10px;top:128px;width:300px;max-height:calc(100vh - 140px)}.details-panel{left:10px;bottom:10px;width:calc(100% - 330px)}.legend,.hint{display:none}.topbar{inset:12px 12px auto}.topbar-actions{align-items:flex-end;flex-direction:column}.vehicle-picker select{min-width:190px}h1{font-size:20px}}