.tetra-simplex {
  --ts-paper: #ffffff;
  --ts-ink: #000000;
  --ts-mute: #6b6b6b;
  --ts-hair: #d4d4d4;
  --ts-accent: #000000;
  --ts-u: 8px;
  --ts-font: Helvetica, "Helvetica Neue", Arial, sans-serif;
  box-sizing: border-box;
  font-family: var(--ts-font);
  color: var(--ts-ink);
  background: var(--ts-paper);
  -webkit-font-smoothing: antialiased;
  max-width: 100%;
}
.tetra-simplex *, .tetra-simplex *::before, .tetra-simplex *::after { box-sizing: border-box; }
.tetra-simplex .ts-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  margin: 0 0 var(--ts-u); padding-top: var(--ts-u); border-top: 2px solid var(--ts-ink);
  display: flex; align-items: baseline; gap: var(--ts-u);
}
.tetra-simplex .ts-title .ts-sub {
  margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ts-mute);
}
.tetra-simplex .ts-plot svg { display: block; width: 100%; height: auto; margin: var(--ts-u) 0; overflow: visible; }
.tetra-simplex .ts-frame { fill: none; stroke: var(--ts-ink); stroke-width: 1; }
.tetra-simplex .ts-bounds { fill: none; stroke: var(--ts-ink); stroke-width: 1; stroke-dasharray: 3 3; }
.tetra-simplex .ts-frame.back { stroke: var(--ts-mute); stroke-dasharray: 2 3; }
.tetra-simplex .ts-orbit { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.tetra-simplex .ts-orbit:active { cursor: grabbing; }
.tetra-simplex .ts-pt.pass { fill: var(--ts-accent); }
.tetra-simplex .ts-pt.fail { fill: var(--ts-paper); stroke: var(--ts-mute); stroke-width: 1; }
.tetra-simplex .ts-pt:hover { stroke: var(--ts-ink); stroke-width: 2; }
.tetra-simplex .ts-pt.pass:hover { stroke: var(--ts-mute); }
.tetra-simplex .ts-letter { font: 700 13px var(--ts-font); fill: var(--ts-ink); }
.tetra-simplex .ts-sub-line { font-size: 11px; color: var(--ts-mute); margin-top: 4px; font-variant-numeric: tabular-nums; }
.tetra-simplex .ts-legend { display: flex; gap: calc(var(--ts-u) * 2); font-size: 11px; color: var(--ts-mute); }
.tetra-simplex .ts-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tetra-simplex .ts-legend i { display: inline-block; width: 8px; height: 8px; }
.tetra-simplex .ts-legend i.pass { background: var(--ts-accent); }
.tetra-simplex .ts-legend i.fail { background: var(--ts-paper); border: 1px solid var(--ts-mute); }
.tetra-simplex .ts-pct { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; margin-top: calc(var(--ts-u) * 2); }
.tetra-simplex .ts-pct small { font-size: 16px; margin-left: 2px; letter-spacing: 0; }
.tetra-simplex .ts-tbl { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 11px; margin-top: var(--ts-u); font-variant-numeric: tabular-nums; }
.tetra-simplex .ts-tbl td { padding: 2px 0; border-bottom: 1px solid var(--ts-hair); }
.tetra-simplex .ts-tbl td.k { font-weight: 700; width: 16px; }
.tetra-simplex .ts-tbl td.name { color: var(--ts-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tetra-simplex .ts-tbl td.num { text-align: right; width: 48px; }
.tetra-simplex .ts-threshold { display: flex; align-items: center; gap: var(--ts-u); font-size: 11px; color: var(--ts-ink); margin: calc(var(--ts-u) * 2) 0 0; }
.tetra-simplex .ts-threshold input[type=range] { flex: 1; min-width: 0; accent-color: var(--ts-accent); margin: 0; }
.tetra-simplex .ts-threshold .val { font-weight: 700; font-variant-numeric: tabular-nums; width: 32px; text-align: right; }
.tetra-simplex.ts-dark {
  --ts-paper: #0e0e0e; --ts-ink: #f2f2f2; --ts-mute: #9a9a9a; --ts-hair: #333333; --ts-accent: #f2f2f2;
}