/* Gauge and oscilloscope stack under the status board. Phones have no room for them. */
.inst-stack { display: none; }
@media (min-width: 760px) {
  .inst-stack { position: absolute; top: 101px; right: 24px; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
}
@media (min-width: 1110px) { .inst-stack { position: fixed; z-index: 11; } }
@media (min-width: 1400px) { .inst-stack { top: 133px; right: 72px; } }
.inst-box { display: block; width: 132px; border: 1px solid var(--rule); border-radius: 8px; background: var(--bg); }

.inst-gauge line { stroke: var(--node); stroke-width: 1; }
.inst-gauge text { fill: var(--mute); font: 500 7px var(--mono); letter-spacing: 1px; text-anchor: middle; }
.inst-gauge .hub { fill: var(--path); }
.inst-gauge .needle { stroke: var(--path); stroke-width: 1.25; transform-box: view-box; transform-origin: 66px 72px; transform: rotate(-60deg); }
@supports (animation-timeline: scroll()) {
  .inst-gauge .needle { animation: inst-sweep linear both; animation-timeline: scroll(root); }
  @keyframes inst-sweep { from { transform: rotate(-60deg); } to { transform: rotate(60deg); } }
}
.inst-scope { height: 72px; background: #141312; }