:is(signal-bench, light-bench, radio-bench, hobby-bench) {
  display: block;
  width: 100%;
  min-width: 0;
  container-type: inline-size;
}
.mx-bench {
  --mx-hot: #ffad70;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  font-family: "Inter", "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.45;
  text-align: left;
}
.mx-bench *, .mx-bench *::before, .mx-bench *::after { box-sizing: border-box; }
.mx-bench .mx-stage {
  position: relative;
  background: var(--stage);
  color: var(--stage-ink);
  padding: 20px clamp(12px, 4%, 30px) 12px;
}
.mx-bench .mx-bar { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.mx-bench .mx-bar h3 { margin: 0; font: 600 15px/1.35 "Inter","Segoe UI",sans-serif; letter-spacing: -.015em; color: var(--stage-ink); }
.mx-bench .mx-meta, .mx-bench .mx-legend, .mx-bench output, .mx-bench .mx-value, .mx-bench .mx-stage figcaption { font: 500 11px/1.4 "IBM Plex Mono", Consolas, monospace; letter-spacing: .025em; }
.mx-bench .mx-meta { color: var(--stage-muted); }
.mx-bench .mx-display { display: block; width: 100%; }
.mx-bench .mx-display svg { width: 100%; height: auto; display: block; overflow: visible; }
.mx-bench .mx-display svg text { font: 13px "IBM Plex Mono", Consolas, monospace; fill: var(--stage-muted); }
.mx-bench .mx-display svg .mx-pin { fill: var(--mx-hot); font-size: 12px; }
.mx-bench .mx-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; color: var(--stage-ink); padding-bottom: 2px; }
.mx-bench .mx-legend span { display: inline-flex; align-items: center; gap: 7px; }
.mx-bench .mx-legend i { display: inline-block; width: 16px; height: 2px; background: #c9e3a9; }
.mx-bench .mx-legend .mx-orange { background: var(--mx-hot); }
.mx-bench .mx-legend .mx-dash { background: none; border-top: 2px dashed var(--stage-muted); }
.mx-bench .mx-controls { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px 20px; padding: 16px clamp(14px, 4%, 30px) 8px; }
.mx-bench .mx-range { flex: 1 1 185px; max-width: 420px; min-width: 120px; display: block; color: var(--ink); font-size: 14px; font-weight: 600; }
.mx-bench .mx-range>span { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; }
.mx-bench .mx-value { color: var(--muted); }
.mx-bench input[type=range] { display: block; margin: 0; min-height: 37px; width: 100%; accent-color: var(--action); cursor: pointer; padding: 0; touch-action: pan-y; }
.mx-bench button { min-height: 42px; margin: 0 0 2px; padding: 8px 15px; border: 1px solid var(--action); border-radius: 5px; background: var(--action); color: var(--on-action); font: 600 13px/1.3 "Inter","Segoe UI",sans-serif; cursor: pointer; box-shadow: none; text-transform: none; letter-spacing: normal; }
.mx-bench button:hover { background: var(--action); text-decoration: underline; text-underline-offset: .18em; }
.mx-bench button:active { transform: translateY(1px); }
.mx-bench button:focus-visible, .mx-bench input:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.mx-bench .mx-readout { flex: 1 1 120px; min-width: 100px; align-self: center; margin: 0; color: var(--ink); }
.mx-bench .mx-readout small { display: block; font: 500 12px/1.4 "Inter","Segoe UI",sans-serif; color: var(--muted); }
.mx-bench .mx-readout strong { font: 500 20px/1.2 "IBM Plex Mono",Consolas,monospace; font-variant-numeric: tabular-nums; }
.mx-bench .mx-note { margin: 0; padding: 5px clamp(14px, 4%, 30px) 17px; font: 400 13px/1.5 "Inter","Segoe UI",sans-serif; color: var(--muted); }
.mx-bench .mx-spheres { display: grid; grid-template-columns: 1fr 1fr; margin: 15px 0 8px; background-image: linear-gradient(#625b5844 1px,transparent 1px),linear-gradient(90deg,#625b5844 1px,transparent 1px);background-size: 22px 22px; }
.mx-bench .mx-spheres figure { margin: 0; min-width: 0; display: grid; justify-items: center; position: relative; padding: 8px 0 6px; }
.mx-bench .mx-spheres figure+figure { border-left: 1px solid #625b58; }
.mx-bench .mx-spheres canvas { display: block; width: min(100%,165px); height: auto; }
.mx-bench .mx-spheres figcaption { margin: 4px 0; color: var(--stage-ink); }
.mx-bench .mx-tracing { stroke-dasharray: 1; animation: mx-write-trace 680ms ease-out both; }
@keyframes mx-write-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@container (max-width: 420px) {
  .mx-bench .mx-stage {padding: 14px 10px 10px;}
  .mx-bench .mx-controls {gap: 5px 12px; padding-top: 11px;}
  .mx-bench .mx-range {flex: 1 0 100%;max-width:none;}
  .mx-bench .mx-legend, .mx-bench .mx-meta {font-size:10px;}
  .mx-bench .mx-note {font-size:12px;}
}
@media (prefers-reduced-motion: reduce) {
  .mx-bench .mx-tracing { animation: none; }
  .mx-bench button:active { transform: none; }
}