.vg-tool { margin: 2.2em 0; }
.vg-tool__stage { background: #000; border-radius: 22px; padding: clamp(.6rem, 2vw, 1.2rem); }
.vg-tool__stage--light { background: #F5F5F7; }
.vg-tool svg { display: block; width: 100%; height: auto; }
.vg-tool__controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem 1.4rem; margin-top: 1.2rem; }
.vg-tool__controls label { display: flex; flex-direction: column; gap: .4rem; font-size: .9rem; font-weight: 600; color: #1D1D1F; }
.vg-tool__controls output { font-weight: 500; color: #6E6E73; font-variant-numeric: tabular-nums; }
.vg-tool__controls input[type="range"] { width: 100%; accent-color: #0A66D8; }
.vg-tool__controls select { font: inherit; font-weight: 500; padding: .5rem .7rem; border: 1px solid #D2D2D7; border-radius: 10px; background: #fff; }
.vg-tool__readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem 1.4rem; margin: 1.2rem 0 0; padding: 1rem 1.2rem; background: #F5F5F7; border-radius: 16px; }
.vg-tool__readout > div { min-width: 0; }
.vg-tool__readout dt { font-size: .78rem; color: #6E6E73; }
.vg-tool__readout dd { margin: .15rem 0 0; font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.vg-tool__note { margin-top: .8rem; font-size: .85rem; color: #6E6E73; }

.vg-l-axis { stroke: rgba(255,255,255,.18); stroke-width: 1; stroke-dasharray: 4 6; }
.vg-l-fov { fill: rgba(77,163,255,.10); }
.vg-l-chief { stroke: rgba(77,163,255,.7); stroke-width: 1.2; }
.vg-l-beam { fill: rgba(255,214,102,.16); }
.vg-l-ray { stroke: #FFD666; stroke-width: 1.4; }
.vg-l-lens { fill: rgba(170,210,255,.28); stroke: rgba(210,230,255,.9); stroke-width: 1.5; }
.vg-l-stop { stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.vg-l-ghost { stroke: rgba(255,255,255,.35); stroke-width: 1.5; stroke-dasharray: 3 5; }
.vg-l-sensor { fill: #E5412D; }
.vg-l-obj { fill: #FFD666; }
.vg-l-focal { fill: #4DA3FF; }
.vg-l-scale { stroke: rgba(255,255,255,.6); stroke-width: 2; }
.vg-l-label { fill: #fff; font: 600 13px Inter, system-ui, sans-serif; }
.vg-l-label--muted { fill: rgba(255,255,255,.55); font-weight: 500; }
.vg-s-label { font: 600 10px Inter, system-ui, sans-serif; }

.vg-sensor__table tbody tr { cursor: pointer; }
.vg-sensor__table tbody tr.is-off { opacity: .45; }
.vg-sensor__table tbody tr:focus-visible { outline: 2px solid #0A66D8; }
.vg-s-dot { display: inline-block; width: .7em; height: .7em; border-radius: 50%; margin-right: .5em; vertical-align: baseline; }

.vg-dof__bar { position: relative; height: 38px; margin-top: 1.2rem; border-radius: 999px; background: #F5F5F7; overflow: hidden; }
.vg-dof__zone { position: absolute; top: 0; bottom: 0; background: rgba(10,102,216,.25); transition: left .2s ease, width .2s ease; }
.vg-dof__focus { position: absolute; top: 6px; bottom: 6px; width: 2px; margin-left: -1px; background: #0A66D8; transition: left .2s ease; }
@media (prefers-reduced-motion: reduce) { .vg-dof__zone, .vg-dof__focus { transition: none; } }