/* VISR page. Colors follow the app icon: a dark teal grid, cyan rim, gold visor. */

:root {
  color-scheme: dark;
  --bg: #081216;
  --ink: #e8f6fa;
  --muted: #93adb6;
  --line: #1d3640;
  --accent: #3fd6ff;
  --code-bg: #10232b;
  --code-ink: #c9f1fc;
  /* VISR blue and gold come from the icon artwork; the chart bars use them as they are. */
  --visr-blue: #1fa9d4;
  --visr-gold: #ffc24d;
  --chart-avg: var(--visr-blue);
  --chart-low: var(--visr-gold);
  /* Spacing, radius and type scale shared by every page. */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 40px;
  --radius-sm: 8px; --radius-md: 12px; --radius-pill: 999px;
  --text-sm: 0.85rem; --text-base: 1rem; --text-lg: 1.1rem;
  --measure: 70ch; --page-width: 1160px;
}


*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}

.page { max-width: 680px; margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-6); }
@media (min-width: 720px) { .page { padding: var(--space-6) var(--space-5) 56px; } }

/* The brand and navigation at the top of every page. */
.site-header { max-width: var(--page-width); margin: 0 auto; padding: var(--space-3) var(--space-4) 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-4); }
@media (min-width: 720px) { .site-header { padding-inline: var(--space-5); } }
.site-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; font: normal 1.15rem/1 var(--brand-font), sans-serif; letter-spacing: 0.06em; }
.site-brand img { width: 28px; height: 28px; border-radius: 22%; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-3); color: var(--muted); font-size: 0.95rem; text-decoration: none; box-shadow: inset 0 -2px 0 transparent; }
.site-nav a:hover { color: var(--ink); }
.site-nav .ext-icon { width: 0.95em; height: 0.95em; margin-left: 0.4em; flex: none; }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
.site-nav a:last-child { min-height: 36px; border: 1px solid var(--accent); border-radius: var(--radius-pill); color: var(--accent); }
.site-nav a:last-child:hover { background: var(--accent); color: var(--bg); }

@font-face {
  font-family: "Orbitron";
  src: url("fonts/Orbitron-VariableFont_wght.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root { --brand-font: "Orbitron"; }

h1, h2 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif; line-height: 1.2; }
h1 { font-size: clamp(1.8rem, 6vw, 2.5rem); letter-spacing: -0.015em; margin: 20px 0 12px; }
h2 { font-size: 1.25rem; margin: 0 0 10px; }
p, ul { margin: 0 0 14px; }
ul { padding-left: 1.2em; }
li { margin-bottom: 6px; }
a { color: var(--accent); text-underline-offset: 3px; }
code { font: 0.88em/1.4 ui-monospace, "SF Mono", Menlo, monospace; white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

.icon { display: block; border-radius: 20px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); }

/* The icon with the VISR wordmark beside it, centered on each other; both shrink on a phone */
.brand { display: flex; align-items: center; gap: clamp(14px, 4vw, 24px); font-family: var(--brand-font), sans-serif; font-optical-sizing: auto; font-weight: normal; font-style: normal; }
.brand .icon { width: clamp(88px, 24vw, 180px); height: auto; border-radius: 22%; flex: none; }
.brand .wordmark { font-family: var(--brand-font), -apple-system, BlinkMacSystemFont, system-ui, sans-serif; margin: 0; font-size: clamp(2.6rem, 11vw, 4.5rem); letter-spacing: 0.06em; line-height: 1; }
.lede { font-size: 1.1rem; color: var(--muted); }
blockquote { font-size: 1.1rem; color: var(--muted); }
.links { color: var(--muted); }

section { padding-top: 28px; margin-top: 28px; border-top: 1px solid var(--line); }
.aside { color: var(--muted); font-size: 0.95rem; }

pre { margin: 0 0 14px; background: var(--code-bg); color: var(--code-ink); border-radius: 8px; padding: 14px 16px; overflow-x: auto; font-size: 0.85rem; }
pre code { font-size: inherit; white-space: pre; }

.foot { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; }

section img { max-width: 100%; height: auto; }

/* Keep prose readable while giving gameplay room beside each platform's features. */
.page { max-width: 1160px; }
.head { max-width: 760px; margin-inline: auto; }
.head blockquote { margin-inline: 0; }
section { padding-top: 36px; margin-top: 44px; }
section > p:has(img) { margin-top: 24px; }
section > p > img { display: block; width: 100%; border-radius: 16px; }
.foot { max-width: 760px; margin-inline: auto; }

.platform-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-block: 26px 8px; }
.platform-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--code-bg);
  color: var(--code-ink);
  font-size: 0.95rem;
  text-decoration: none;
}
.nav-icon { display: inline-block; width: 1.05em; height: 1.05em; margin-right: 0.45em; vertical-align: -0.17em; }
.nav-icon svg { display: block; width: 100%; height: 100%; }
.platform-nav a:hover { border-color: var(--accent); }
.platform-layout { display: grid; gap: 26px; align-items: center; }
.platform-copy { min-width: 0; }
.platform-copy h2 { margin-bottom: 18px; }
.platform-media { display: grid; gap: 28px; min-width: 0; padding-bottom: 16px; }

.pillars { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 32px; text-align: center; }
.pillars li { margin: 0; }
.pillar-icon { display: block; width: 108px; height: 108px; margin: 0 auto 16px; border-radius: 24px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); }
.pillar-icon svg { display: block; width: 100%; height: 100%; }
.pillars h3 { margin: 0 0 6px; font-size: 1.05rem; }
.pillars p { margin: 0 auto; max-width: 30ch; color: var(--muted); }
@media (min-width: 720px) { .pillars { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 40px; } }


/* Generic bezels use no manufacturer artwork. */
.device {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin: 0;
  padding: 9px;
  border: 1px solid #51616a;
  border-radius: 26px;
  background: #11191f;
  box-shadow: 0 10px 24px #0003, inset 0 0 0 2px #242f37;
}
.device img { display: block; width: 100%; height: auto; border-radius: 18px; }
.device-iphone { width: 94%; justify-self: center; padding: 8px 17px; border-radius: 32px; }
.device-iphone img { border-radius: 24px; }
.device-ipad { width: 72%; justify-self: center; padding: 12px; border-radius: 23px; }
.device-ipad img { border-radius: 12px; }
.device-tv { border-radius: 9px; padding: 7px; margin-bottom: 24px; }
.device-tv img { border-radius: 3px; }
.device-tv::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -23px;
  left: 30%;
  width: 40%;
  height: 23px;
  background: #3a4851;
  clip-path: polygon(42% 0, 58% 0, 64% 80%, 100% 88%, 100% 100%, 0 100%, 0 88%, 36% 80%);
}
/* Vision Pro shows the view itself, so it has no bezel. */
.device-vision { padding: 0; border: 0; background: none; }
.device-vision img { border-radius: 14px; }
/* Vision Pro front glass: the home page's visor shape (`.glass-shape` carries its path),
   with a dark glass fill. The screen fills the glass and is clipped to the outline (`#glass-clip`, drawn in the same
   SVG, slightly inset), so the curves cut into its corners and edges. The content is padded to stay inside them. */
.device-vision.device-glass { aspect-ratio: 2 / 1; box-shadow: none; border-radius: 0; }
.device-glass .glass-shape { filter: drop-shadow(0 8px 14px #0004); position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; }
.device-glass .glass-shape path { fill: #0a141a; stroke: var(--visr-gold); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.device-glass .glass-shape clipPath path { fill: #000; stroke: none; }
.device-glass .glass-screen { position: absolute; inset: 0; }

.device-mac { border-radius: 12px 12px 4px 4px; padding: 9px 9px 14px; margin-bottom: 12px; }
.device-mac img { border-radius: 5px; }
.device-mac::after {
  content: "";
  position: absolute;
  left: -3%;
  bottom: -11px;
  width: 106%;
  height: 11px;
  border: 1px solid #51616a;
  border-radius: 2px 2px 14px 14px;
  background: linear-gradient(#596771, #26343e);
}

@media (min-width: 900px) {
  section { padding-top: 44px; margin-top: 60px; }
  section > h2 { margin-bottom: 24px; }
}

/* ---- Benchmarks page ---- */
.page-bench > h1 { margin: 12px 0 14px; }
.page-bench > p { max-width: 70ch; color: var(--muted); font-size: 0.95rem; line-height: 1.55; margin-bottom: 10px; }
.page-bench > p:first-of-type { color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Controls: the suite switch is a row of pills (the radios stay in the tab order behind them), with the selected suite's
   description and window screenshots beside or under it. The bar sticks to the top only where there is room for it. */
.bench-bar { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; min-width: 0; border: 0;
  padding: var(--space-3) 0; margin: var(--space-5) 0 var(--space-2); }
/* The legend names the group for assistive technology only; taking no room, it leaves the bar's whole box to the ::before background.
   The visible "Suite" label is the first item of the pills' row, so it wraps with the pills and never takes a row of its own. */
.bench-bar legend { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The device switch of a platform is the suite switch's pills, in the section under its text. */
.bench-device { border: 0; padding: 0; margin: var(--space-3) 0 0; min-width: 0; }
.bench-device legend { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.suite-label { margin-right: 6px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.suite-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.bench-bar label, .bench-device label { position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line);
  border-radius: var(--radius-pill); font-size: 0.9rem; cursor: pointer; user-select: none; }
.bench-bar label:hover, .bench-device label:hover { border-color: var(--accent); }
.bench-bar input, .bench-device input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bench-bar label:has(input:checked), .bench-device label:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }
.bench-bar label:has(input:focus-visible), .bench-device label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The selected suite's panel dissolves into the bar: its screenshots join the pills' row at the right, its description takes the row below. */
.suite-info { display: none; }
.bench-bar:has(input[value="overall"]:checked) .suite-info[data-suite="overall"] { display: contents; }
.bench-bar:has(input[value="campaign"]:checked) .suite-info[data-suite="campaign"] { display: contents; }
.bench-bar:has(input[value="combat"]:checked) .suite-info[data-suite="combat"] { display: contents; }
.bench-bar:has(input[value="cutscenes"]:checked) .suite-info[data-suite="cutscenes"] { display: contents; }
.bench-bar:has(input[value="multiplayer"]:checked) .suite-info[data-suite="multiplayer"] { display: contents; }
.bench-bar:has(input[value="co-op"]:checked) .suite-info[data-suite="co-op"] { display: contents; }
.suite-text { order: 2; flex: 1 1 100%; margin: 0; font-size: 0.85rem; line-height: 1.4; color: var(--muted); }
.suite-shots { order: 1; margin: 0 0 0 auto; display: flex; flex-wrap: nowrap; align-items: flex-start; gap: var(--space-2); list-style: none; padding: 0; }
.suite-shots li { margin: 0; width: 56px; }
.suite-shots img { display: block; width: 56px; height: 35px; border-radius: 4px; border: 1px solid var(--line); object-fit: cover; background: var(--code-bg); }
.suite-shots span { display: block; margin-top: 1px; white-space: nowrap; margin-inline: -8px; font-size: 0.6rem; line-height: 1.15; color: var(--muted); text-align: center; overflow-wrap: anywhere; }

@media (min-width: 900px) {
  /* The pills' row reserves the height of a screenshot with its caption, so the bar is as tall for Overall (no screenshots) as for any suite. */
  .suite-pills { min-height: 50px; }
}
@media (min-width: 900px) and (max-width: 1059px) {
  .bench-bar label, .bench-device label { padding: 0 10px; }
  .suite-shots { gap: 6px; }
  .suite-shots li, .suite-shots img { width: 44px; } .suite-shots img { height: 28px; }
}
@media (min-width: 900px) {
  .bench-bar { position: sticky; top: 0; z-index: 20; isolation: isolate; padding: var(--space-2) 0; row-gap: 4px; }
  /* The page color at about 96% opacity, spread past the column on both sides; the bottom line runs the same width.
     No backdrop blur: it makes Safari repaint the bar on every scroll frame. */
  .bench-bar::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw;
    background: var(--bg); border-bottom: 1px solid var(--line); }
  @supports (background: color-mix(in srgb, red 50%, transparent)) {
    .bench-bar::before { background: color-mix(in srgb, var(--bg) 96%, transparent); }
  }
  body { overflow-x: clip; }
}
@media (max-width: 599px) { .suite-label { display: none; } .bench-bar { padding-top: 0; margin-top: var(--space-4); } .suite-shots { margin-left: 0; order: 2; flex-wrap: wrap; flex: 1 1 100%; } .suite-text { order: 1; } .suite-shots li, .suite-shots img { width: 52px; } .suite-shots img { height: 32px; } .suite-shots span { white-space: normal; margin-inline: 0; } }

.bench { margin: 0 0 24px; padding-top: 36px; margin-top: 36px; }
.bench > h2 { font-size: 1.5rem; margin-bottom: 8px; }
.bench > p { max-width: 75ch; color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
.bench-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 32px; align-items: start; margin-top: 18px; }
@media (min-width: 900px) { .bench-grid { grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); } }
/* The device frames come from style.css; only the screen's content box is defined here. */
.bench-media { min-width: 0; }
.device .bench-chart, .device-flat .bench-chart { display: flex; align-items: center; justify-content: center; width: 100%; overflow: hidden;
  background: #fff; color: #111; border-radius: 18px; }
.device-flat { margin: 0; }
.device-flat .bench-chart { border: 1px solid var(--line); border-radius: 12px; }
.bench-group > h2 { font-size: 1.5rem; margin-bottom: 8px; }
/* The control sits at the top of the device frame's screen; the chart below it keeps clear of it. */
.bench-tabs { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 2; display: inline-flex; border: 1px solid var(--line);
  border-radius: 999px; padding: 2px; gap: 2px; background: #10232bdd; }
.bench-tabs button { font: inherit; font-size: 0.75rem; font-weight: 600; min-height: 24px; min-width: 48px; padding: 0 10px; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted); cursor: pointer; }
.bench-tabs button { white-space: nowrap; }
.bench-media .device-ipad, .bench-media .device-iphone, .bench-media .device-mac { width: 100%; }
.bench-tabs button:hover { color: var(--ink); }
.bench-tabs button[aria-selected="true"] { background: var(--accent); color: var(--bg); }
.has-tabs .bench-chart { box-sizing: border-box; padding-top: 40px; }
.device-glass.has-tabs .bench-tabs { top: 3%; }
.device-glass.has-tabs .bench-chart { padding: clamp(36px, 7%, 48px) 5% 11%; }
.bench-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bench[hidden] { display: none; }
.bench-sub { margin-top: 12px; padding-top: 12px; }
.bench-sub > h3 { font-size: 1.15rem; margin-bottom: 8px; }
.device-iphone .bench-chart { aspect-ratio: 19.5 / 9; border-radius: 24px; }
.device-ipad .bench-chart { aspect-ratio: 4 / 3; border-radius: 12px; }
.device-tv .bench-chart { aspect-ratio: 16 / 9; border-radius: 3px; }
.device-vision .bench-chart { aspect-ratio: 16 / 9; border-radius: 14px; }
.device-mac .bench-chart { aspect-ratio: 16 / 10; border-radius: 5px; }
.device-vision.device-glass .bench-chart { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; box-sizing: border-box; }
.device-glass .bench-chart { padding: 5% 5% 14%; }
/* On a phone the screens are taller than the desktop devices' so the plot keeps readable bars; Vision Pro's glass stays wide. */
@media (max-width: 599px) {
  .device-ipad .bench-chart { aspect-ratio: 1 / 1; }
  .device-mac .bench-chart { aspect-ratio: 1 / 1; }
  .device-tv .bench-chart { aspect-ratio: 4 / 3; }
  .bench-media .device-vision.device-glass { aspect-ratio: 3 / 2; }
}

.device-glass .bench-chart svg { width: 100%; height: 100%; }
.device-glass .bench-empty { padding: 4px 10px; text-align: center; font-size: clamp(0.7rem, 2.6vw, 1rem); line-height: 1.3; }
/* The chart fills its device screen: the SVG scales to the screen box (letterboxed only where the shapes differ), not to its own canvas width. */
.bench-chart svg, .bench-chart img { display: block; flex: 1 1 auto; min-width: 0; width: 100%; height: 100%; max-width: none !important; object-fit: contain; }
.device .bench-chart, .device-flat .bench-chart { background: #10232b; color: #e8f6fa; }
.bench-empty { color: inherit; margin: 0; padding: 24px 12px; font-size: 0.95rem; }
.bench-legend, .bench-direction, .bench-caption { margin: 12px 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.bench-legend { color: var(--ink); font-size: 0.9rem; }
.swatch { display: inline-block; width: 0.9em; height: 0.9em; border-radius: 2px; margin: 0 0.2em 0 0.6em; vertical-align: -0.1em; }
.swatch:first-child { margin-left: 0; }
.swatch.avg { background: var(--chart-avg); }
.swatch.low { background: var(--chart-low); }

/* Builds: one row per port, its other versions folded under it. */
.bench-rows { min-width: 0; margin: 0; padding: 14px 16px 10px; border: 1px solid var(--line); border-radius: 12px; }
.bench-rows legend { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 0 6px; }
.build-group { padding: 8px 0; border-top: 1px solid var(--line); }
.build-group:first-of-type { border-top: 0; }
.build { padding: 4px 0; line-height: 1.35; }
.build-label { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; cursor: pointer; }
.build-label input { flex: none; align-self: center; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.build-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.build-meta { flex: 1 1 100%; margin-left: 26px; font-size: 0.8rem; font-weight: 400; color: var(--muted); }
.build.off { color: var(--muted); }
.build.off .build-label { cursor: default; opacity: 0.5; }
.build.off .build-name { font-weight: 500; }
.build.off input { cursor: not-allowed; }
.why { margin: 2px 0 0 26px; font-size: 0.8rem; }
.why summary.tag { display: inline-block; cursor: pointer; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; line-height: 1.7; color: var(--muted); list-style: none; }
.why summary.tag::-webkit-details-marker { display: none; }
.why summary.tag::after { content: " \25BE"; }
.why[open] summary.tag::after { content: " \25B4"; }
.why summary.tag:hover { border-color: var(--accent); color: var(--ink); }
.why p { margin: 6px 0 4px; line-height: 1.45; color: var(--muted); }
.older { margin: 2px 0 0 26px; }
.older summary { cursor: pointer; font-size: 0.85rem; color: var(--accent); padding: 4px 0; min-height: 28px; }
.older[open] summary { margin-bottom: 2px; }
.older .build { padding-left: 0; }

/* Per-build figures under each chart. On a phone each row becomes a small card. */
.bench-caption { overflow-x: visible; }
.bench-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; line-height: 1.4; margin-top: 12px; }
.bench-table caption { text-align: left; color: var(--muted); padding-bottom: 8px; caption-side: top; }
.bench-table th, .bench-table td { text-align: left; vertical-align: top; padding: 7px 10px 7px 0; border-top: 1px solid var(--line); font-weight: 400; }
.bench-table thead th { border-top: 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.78rem; font-weight: 600; }
.bench-table tbody th { font-weight: 600; }
.bench-table td { font-variant-numeric: tabular-nums; color: var(--muted); }
.bench-table .build-meta { display: block; margin: 0; overflow-wrap: anywhere; }
.bench-table tbody th { min-width: 9.5em; }
.bench-table td[data-label="Measured"], .bench-table td[data-label="On time"] { white-space: nowrap; }
.bench-table td:not([data-label="Notes"]) { min-width: 4.5em; }
.bench-table thead th:not(:first-child):not(:last-child) { min-width: 4.5em; }
/* Three header lines for every view, so the rows below do not move when the marked columns bold and wrap differently. */
.bench-table.fixed thead th { height: calc(0.78rem * 1.4 * 3 + 14px); vertical-align: bottom; }
@media (max-width: 599px) {
  .bench-table:not(.fixed), .bench-table:not(.fixed) tbody, .bench-table:not(.fixed) tr, .bench-table:not(.fixed) th, .bench-table:not(.fixed) td, .bench-table:not(.fixed) caption { display: block; width: 100%; }
  .bench-table:not(.fixed) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .bench-table:not(.fixed) tr { border-top: 1px solid var(--line); padding: 8px 0; }
  .bench-table:not(.fixed) th, .bench-table:not(.fixed) td { border: 0; padding: 1px 0; }
  .bench-table:not(.fixed) td:empty { display: none; }
  .bench-table:not(.fixed) td::before { content: attr(data-label) ": "; color: var(--ink); font-weight: 600; }
}

/* The suite bar is sticky from 900px up, so jump targets keep clear of it. */
@media (min-width: 900px) { h2[id], .bench, .bench-media { scroll-margin-top: 130px; } }

.method { max-width: 760px; margin-inline: auto; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.method h2 { font-size: 1.5rem; }
.method h3 { font-size: 1.05rem; margin: 28px 0 10px; }
.method p, .method li { font-size: 0.95rem; line-height: 1.6; }
.method li { margin-bottom: 10px; }
.method code { white-space: normal; overflow-wrap: anywhere; }
.bench-group > .bench { border-top: 0; padding-top: 0; margin-top: 0; }

/* A platform's charts share one table layout: fixed columns, scrolling inside the table's own container where it is wider than the page. */
.bench-caption:has(.bench-table.fixed) { overflow-x: auto; }
.bench-table.fixed { table-layout: fixed; width: 100%; }
.bench-table.fixed th, .bench-table.fixed td { padding-right: 6px; }
.bench-table.fixed thead th { font-size: 0.72rem; overflow-wrap: normal; }
.bench-table.fixed tbody th { overflow-wrap: anywhere; }
.bench-table.fixed td.mark, .bench-table.fixed th.mark { color: var(--ink); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.bench-table.fixed thead th.mark { font-weight: 700; }
.bench-table.fixed td:nth-child(n+3), .bench-table.fixed th:nth-child(n+3) { padding-left: 8px; }
.bench-group > .bench > .bench-caption { margin-top: 20px; }
.bench-footnote { margin: 6px 0 0; color: var(--muted); font-size: 0.8rem; }