/* Diagnostic section instruments (ThreeUI DiagnosticsPanel "flow" and PerformanceGauges
   "tachometer"). Square frames whose edges fade into the page, so the authored dark grounds
   (#020804 and #000) meet the site's own night without a visible box. */
.instrument {
  margin: 0; aspect-ratio: 1 / 1; position: relative; overflow: hidden;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
}
.instrument iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: transparent; }
/* The authored panel is 360px inside 16px margins; the frame matches it, so the mesh fills it
   at its own size, and a soft radial fade dissolves the near-black ground into the section. */
.instrument--mesh { width: min(100%, 392px); margin: var(--space-5, 40px) auto var(--space-4, 28px);
  -webkit-mask-image: radial-gradient(closest-side, #000 38%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 38%, transparent 100%); }
.instrument--mesh iframe { background: #020804; }
.instrument--gauge { width: min(100%, 300px); flex: none; -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 92%); mask-image: radial-gradient(closest-side, #000 62%, transparent 92%); }
.instrument--gauge iframe { background: #000; }
.diag-close { display: flex; align-items: center; gap: var(--space-5, 40px); margin-top: var(--space-6, 56px); }
.diag-close .diag-cta { margin: 0; }
@media (max-width: 760px) {
  .diag-close { flex-direction: column; align-items: flex-start; gap: var(--space-4, 28px); }
  .instrument--gauge { width: min(100%, 260px); align-self: center; }
  .instrument--mesh { width: min(100%, 360px); }
}