/*
 * Code Index static styles — tokens and layout ported from the original
 * React/Vite source (original/src/index.css + component Tailwind classes).
 */
:root {
  color-scheme: light;
  --bg: #FFFFFF;
  /* --bg */
  --tint: #ECEAF5;
  /* --accent-soft */
  --neutral: #5A6172;
  /* --text-secondary, see note below */
  --accent: #18006A;
  /* --accent, brand blueberry-deep */
  --data: #00E0FF;
  /* brand cyan, already identical */
  --t1: #0E0E1A;
  /* --text-primary */
  --t2: #5A6172;
  /* --text-secondary */
  --hair: #E6E8EC;
  /* --border */
  /* Raised panel, matching the UI Quality Bench leaderboard box. Dark takes
     that site's --bg-card (#14141F); light takes the tint it puts inside the
     table head, because its --bg-card is pure white and would not read as a
     separate surface against this page. */
  --surface: #F7F8FA;
  --success: #43a36b;
  --failure: #cb6c74;
  --warning: #5f5f5f;
  --failure-text: #cf222e;
  --font-sans: "Golos Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  --font-serif: "Newsreader", Georgia, serif;
  --sidebar-open: 226px;
  --sidebar-closed: 54px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B0B14;
  /* --bg */
  --tint: #1D1838;
  /* --accent-soft */
  --neutral: #9CA1AE;
  /* --text-secondary, see light-mode note */
  --accent: #8E7DFF;
  /* --accent, brand grape-medium */
  --data: #00E0FF;
  /* brand cyan */
  --t1: #ECEDF1;
  /* --text-primary */
  --t2: #9CA1AE;
  /* --text-secondary */
  --hair: #25252F;
  /* --border */
  --surface: #14141F;
  /* Between --t2 (#9CA1AE) and --t1 (#ECEDF1): long-form body copy that reads
     softer than a heading without dropping to the secondary grey. */
  --prose-soft: #D3D8E3;
  --success: #3fb950;
  --failure: #f85149;
  --warning: #fbbf24;
  --failure-text: #f85149;
}

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

html {
  height: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  height: 100%;
  min-width: 20rem;
  overflow: hidden;
  background: var(--bg);
  color: var(--t1);
  font-family: var(--font-sans);
  font-size: 15px;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.55rem 0.8rem;
  translate: 0 -200%;
  background: var(--t1);
  color: var(--bg);
  font: 600 0.75rem/1 var(--font-mono);
}

.skip-link:focus {
  translate: 0;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* —— Shell / sidebar —— */
.site-shell {
  display: flex;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.site-sidebar {
  display: flex;
  flex-direction: column;
  width: var(--sidebar-open);
  height: 100%;
  flex-shrink: 0;
  padding: 1.375rem 0.875rem;
  border-right: 1px solid var(--hair);
  overflow: auto;
  transition: width 200ms ease;
}

[data-sidebar="collapsed"] .site-sidebar {
  width: var(--sidebar-closed);
}

.site-sidebar__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.site-sidebar__brand {
  min-width: 0;
  flex: 1;
  padding-left: 0.25rem;
  color: inherit;
  text-decoration: none;
}

.site-sidebar__brand:hover {
  text-decoration: none;
}

.site-sidebar__brand-name {
  font: 600 13px/1.2 var(--font-mono);
  letter-spacing: 0.04em;
}

.site-sidebar__brand-sub {
  margin-top: 0.125rem;
  color: var(--t2);
  font: 400 10.5px/1.2 var(--font-mono);
  white-space: nowrap;
}

.site-nav {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin-top: 1.5rem;
  min-width: 0;
  font: 400 12px/1.3 var(--font-mono);
}

.site-nav a,
.site-nav__item {
  display: block;
  overflow: hidden;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  color: var(--t2);
  text-decoration: none;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  white-space: nowrap;
  transition: color 150ms ease, background 150ms ease;
}

.site-nav a:hover {
  color: var(--accent);
  text-decoration: none;
}

.site-nav a[aria-current="page"] {
  background: var(--tint);
  color: var(--accent);
  font-weight: 500;
}

.site-nav a.is-dataset,
.site-nav__item.is-dataset {
  padding-left: 1.375rem;
}

.site-nav__item.is-disabled {
  color: var(--neutral);
  cursor: default;
  opacity: 0.65;
}

.site-nav a.is-meta {
  margin-top: 0.875rem;
}

.site-nav .badge {
  margin-left: 0.375rem;
  color: var(--neutral);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.site-sidebar__footer {
  margin-top: auto;
  color: var(--neutral);
  font: 400 10px/1.4 var(--font-mono);
}

.site-sidebar__footer p {
  margin: 0;
}

[data-sidebar="collapsed"] .site-sidebar__brand,
[data-sidebar="collapsed"] .site-nav,
[data-sidebar="collapsed"] .site-sidebar__footer {
  display: none;
}

.site-main {
  display: flex;
  flex: 1;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.page {
  width: 100%;
  max-width: 1120px;
  padding: 2.5rem clamp(20px, 4vw, 56px) 5rem;
}

/* —— Type —— */
.eyebrow,
.kicker {
  margin: 0;
  color: var(--neutral);
  font: 400 10px/1.2 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.section-link {
  display: inline-grid;
  width: 0.875rem;
  height: 0.85rem;
  margin: 0 0 0 0.35rem;
  padding: 0;
  place-items: center;
  vertical-align: bottom;
  color: var(--neutral);
  opacity: 0.8;
  transition: color 150ms ease, opacity 150ms ease;
}

.section-link svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.section-link:hover,
.section-link:focus-visible,
.section-link:active,
.section-link.is-copied {
  color: var(--accent);
  opacity: 1;
}

.section-link__feedback {
  display: inline-block;
  margin-left: 0.2rem;
  color: var(--accent);
  opacity: 0;
  translate: -0.2rem 0;
  visibility: hidden;
  transition: opacity 150ms ease, translate 150ms ease, visibility 150ms ease;
  white-space: nowrap;
}

.section-link__feedback.is-visible {
  opacity: 1;
  translate: 0;
  visibility: visible;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

h3 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
}

.lede {
  margin: 0;
  color: var(--t2);
  font-size: 15px;
  line-height: 1.75;
}

.lede--dark {
  color: var(--t1);
  font-size: 1rem;
}

.mono {
  font-family: var(--font-mono);
}

.muted {
  color: var(--t2);
}

.neutral {
  color: var(--neutral);
}

.accent {
  color: var(--accent);
}

.small {
  font-size: 11px;
}

.italic {
  font-style: italic;
}

.not-italic {
  font-style: normal;
}

.prose p {
  margin: 0 0 0.875rem;
  font-size: 15px;
  line-height: 1.75;
  color: var(--t2);
}

.prose p:first-child,
.prose>.lede--dark {
  color: var(--t1);
  font-size: 1rem;
}

.prose h3 {
  margin-top: 1.5rem;
}

/* Plain lists were falling through to browser defaults, which put them at a
   tighter line height and a heavier colour than the paragraphs around them.
   Match .prose p so a bulleted run reads as body copy rather than a separate
   block. .bullet-list is excluded because it carries its own dot, indent and
   rhythm, and these element-plus-class selectors would otherwise outrank it. */
.prose ul:not(.bullet-list),
.prose ol:not(.bullet-list) {
  margin: 0 0 0.875rem;
  padding-left: 1.125rem;
}

.prose ul:not(.bullet-list) > li,
.prose ol:not(.bullet-list) > li {
  margin: 0 0 0.5rem;
  font-size: 15px;
  line-height: 1.75;
  color: var(--t2);
}

.prose ul:not(.bullet-list) > li:last-child,
.prose ol:not(.bullet-list) > li:last-child {
  margin-bottom: 0;
}

/* Figures carry their own max-width inline, since it depends on the aspect
   ratio of each image. Everything else stays consistent here. */
.prose figure {
  margin: 1.75rem auto;
}

.prose figure img {
  width: 100%;
}

.prose figcaption {
  text-align: center;
}

/* The methodology page and the long-form posts are read end to end rather than
   skimmed, so their body copy runs at full contrast instead of the secondary
   grey used elsewhere. Section kickers keep --neutral so the pages still match
   the site's heading rhythm. Posts are matched on .post__body because the post
   layout has no data-page wrapper. */
[data-page="methodology"] .prose p,
[data-page="methodology"] .prose li,
[data-page="methodology"] .lede,
[data-page="methodology"] .footnote,
.post .post__body p,
.post .post__body li,
.post .post__body .footnote {
  color: var(--t1);
}

/* Dark mode only: headings stay at full white while body copy steps down to a
   light grey, which is easier on a long read than paragraph after paragraph of
   maximum contrast. Still well above the --t2 grey this page used before. */
[data-theme="dark"] [data-page="methodology"] .prose p,
[data-theme="dark"] [data-page="methodology"] .prose li,
[data-theme="dark"] [data-page="methodology"] .lede,
[data-theme="dark"] [data-page="methodology"] .footnote,
[data-theme="dark"] .post .post__body p,
[data-theme="dark"] .post .post__body li,
[data-theme="dark"] .post .post__body .footnote {
  color: var(--prose-soft);
}

/* Metric headings link to the chart they describe; the arrow carries the
   affordance so the heading itself can stay at body colour. */
.metric-link {
  color: inherit;
}

.metric-link:hover {
  color: var(--accent);
  text-decoration: none;
}

.metric-link__arrow {
  margin-left: 0.35rem;
  color: var(--accent);
  font-size: 0.85em;
}

.chart-reading {
  margin-top: 1.5rem;
  padding: 0.25rem 0 0.25rem 1rem;
  border-left: 2px solid var(--accent);
}

.chart-reading .kicker {
  margin-bottom: 0.625rem;
  color: var(--t1);
  font-size: 10px;
}

.chart-reading p:last-child {
  margin-bottom: 0;
}

/* —— Page chrome —— */
.benchmark-backlink {
  margin-bottom: 1rem;
  font: 400 11px/1.4 var(--font-mono);
}

.benchmark-backlink a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--neutral);
}

.benchmark-backlink a:hover {
  color: var(--accent);
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--hair);
}

.page-header--stack {
  display: flex;
}

.page-header--stack h1 {
  margin-top: 0.5rem;
}

.page-header__actions {
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
  gap: 0.875rem;
  padding-top: 0.25rem;
}

.section {
  margin-top: 2.75rem;
}

.section--lg {
  margin-top: 4rem;
}

.section .kicker+.lede,
.section .eyebrow+.lede {
  margin-top: 0.625rem;
  margin-bottom: 1.125rem;
  color: var(--t1);
}

.footnote {
  margin-top: 0.875rem;
  color: var(--t2);
  font-size: 0.875rem;
  font-style: italic;
}

.page-footer {
  margin-top: 3.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hair);
  color: var(--neutral);
  font-size: 13px;
}

.bullet-list {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.bullet-list li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.625rem;
  color: var(--t2);
  font-size: 14.5px;
  line-height: 1.7;
}

.bullet-list li::before {
  position: absolute;
  left: 0;
  top: calc(1.7em / 2);
  transform: translateY(-50%);
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: var(--accent);
  content: "";
}

.bullet-list--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.5rem 1rem;
}

/* —— Buttons —— */
.button,
button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: 1.5rem;
  padding: 0 0.875rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font: 400 11.5px/1 var(--font-mono);
  white-space: nowrap;
  text-decoration: none;
  transition: opacity 150ms ease;
}

.button:hover {
  opacity: 0.9;
  text-decoration: none;
}

.button--hairline {
  border-color: var(--hair);
  background: transparent;
  color: var(--t2);
}

.button--hairline:hover {
  border-color: var(--accent);
  color: var(--accent);
  opacity: 1;
}

.button--sm {
  height: 1.25rem;
  padding: 0 0.625rem;
  font-size: 10px;
}

.button--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--t2);
}

.icon-button {
  display: inline-grid;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  place-items: center;
  border: 1px solid var(--hair);
  border-radius: 999px;
  color: var(--t2);
  font: 400 13px/1 var(--font-mono);
}

.icon-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.icon-button[data-sidebar-toggle]::before {
  content: "«";
}

[data-sidebar="collapsed"] .icon-button[data-sidebar-toggle]::before {
  content: "»";
}

.icon-button[data-theme-toggle]::before {
  content: "◐";
}

/* —— Score board ——
   One grid for the whole board, with each row a subgrid of it, so the head and
   every body row share the same tracks. The rank stays content-sized while the
   remaining space is shared by the columns after the model. */
.board {
  display: grid;
  grid-template-columns: max-content minmax(160px, max-content) repeat(4, minmax(max-content, 1fr));
  column-gap: 1rem;
  margin-top: 1rem;
  overflow-x: auto;
}

.board__body {
  display: contents;
}

.board__row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  padding: 0.875rem 0.25rem;
}

/* Without subgrid the rows cannot share the board's tracks, so fall back to the
   fixed template that keeps head and body aligned. */
@supports not (grid-template-columns: subgrid) {

  .board,
  .board__body {
    display: block;
  }

  .board__row {
    grid-template-columns: max-content minmax(160px, max-content) repeat(4, minmax(max-content, 1fr));
    column-gap: 1rem;
  }
}

.board__head {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--hair);
  color: var(--t2);
  font: 400 10.5px/1.2 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.board__body .board__row+.board__row {
  border-top: 1px solid var(--hair);
}

.board__rank {
  color: var(--accent);
  font: 400 13px/1.2 var(--font-mono);
}

.board__model {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  min-width: 0;
  font: 400 14.5px/1.2 var(--font-mono);
}

.board__model-logo {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  object-fit: contain;
}

[data-theme="light"] .model-logo--monochrome {
  filter: invert(1);
}

.board__model-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board__agent {
  color: var(--t2);
  font: 400 12px/1.2 var(--font-mono);
}

.board__metric {
  color: var(--t2);
  text-align: right;
  font: 400 11px/1.2 var(--font-mono);
  white-space: nowrap;
}

.board-token-usage {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
}

.board__score {
  text-align: right;
}

.board__body .board__score {
  font: 600 17px/1.2 var(--font-mono);
}

.board__bar-cell {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  justify-content: flex-end;
}

.board__bar-cell .board__score {
  flex: 0 0 2.5rem;
}

.score-bar {
  display: inline-flex;
  gap: 3px;
  justify-content: flex-end;
}

.score-bar__slot {
  width: 15px;
  height: 9px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--tint);
}

.score-bar__fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
}

/* —— Trial outcome matrix —— */
.trial-matrix {
  /* One source for the cell metrics: the task-id row derives its column width
     from these, so the numbers stay aligned with the trial groups. */
  --trial-cell: 16px;
  --trial-cell-gap: 0.7px;
  --trial-task: calc(3 * var(--trial-cell) + 2 * var(--trial-cell-gap));
  --trial-dot: 7px;
  --trial-dot-pass: calc(var(--trial-dot) * 1.6);
  width: 100%;
  margin-top: 1rem;
  padding-bottom: 0.5rem;
  overflow-x: auto;
}

.trial-matrix__inner {
  min-width: 1150px;
}

/* Title and legend hold the left edge while the matrix scrolls under them.
   width:max-content is what makes that work: as a full-width block it would
   already span the scrollport and sticky would have nothing to offset. */
.trial-matrix__header {
  position: sticky;
  left: 0;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  width: max-content;
  padding: 0 0.25rem 0.75rem;
  color: var(--t2);
  font: 400 10px/1.2 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.trial-matrix__title {
  margin: 0;
}

.trial-matrix__axis {
  padding-top: 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--hair);
}

/* Masks the task numbers as they scroll behind the model column. Stretched
   because the row centres its items, which would leave this empty cell with no
   height to mask with. */
.trial-matrix__axis-corner {
  position: sticky;
  left: 0;
  z-index: 1;
  align-self: stretch;
  background: var(--bg);
}

.trial-matrix__task-id {
  width: var(--trial-task);
  color: var(--neutral);
  font: 400 9px/1.2 var(--font-mono);
  text-align: center;
}

.trial-matrix__legend {
  display: flex;
  gap: 1rem;
  align-items: center;
  letter-spacing: normal;
  text-transform: none;
}

.trial-matrix__legend>span {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
}

.trial-matrix__row {
  display: grid;
  grid-template-columns: 180px auto;
  gap: 1rem;
  align-items: center;
  padding: 0.6rem 0.25rem;
}

.trial-matrix__row+.trial-matrix__row {
  border-top: 1px solid var(--hair);
}

.trial-matrix__model {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 0;
  overflow: hidden;
  background: var(--bg);
  font: 400 12px/1.2 var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trial-matrix__tasks {
  display: flex;
  gap: 6px;
  align-items: center;
}

.trial-matrix__task {
  display: grid;
  grid-template-columns: repeat(3, var(--trial-cell));
  gap: var(--trial-cell-gap);
  align-items: center;
  justify-items: center;
}

/* Circles rather than rounded squares; the grid track keeps its width so the
   layout and the task-id alignment are unchanged by the smaller marks. */
.trial-matrix__cell {
  display: block;
  width: var(--trial-dot);
  height: var(--trial-dot);
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: help;
}

/* Passes read as the signal, at double the radius of the other two. */
.trial-matrix__cell.is-pass {
  width: var(--trial-dot-pass);
  height: var(--trial-dot-pass);
  background: var(--success);
}

.trial-matrix__cell.is-fail {
  background: var(--failure);
}

.trial-matrix__cell.is-error {
  background: var(--warning);
}

.trial-matrix__cell:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* —— By-dataset dot plot —— */
.dot-plot {
  width: 100%;
  min-width: 0;
  max-width: 980px;
  margin-inline: auto;
  container-type: inline-size;
}

.dot-plot__desktop {
  display: none;
}

.dot-plot__head,
.dot-plot__row {
  display: grid;
  grid-template-columns: 160px repeat(4, minmax(125px, 1fr));
  gap: 0 1.25rem;
  align-items: center;
}

.dot-plot__head {
  padding: 0 0.25rem 0.5rem;
  border-bottom: 1px solid var(--hair);
}

.dot-plot__head-label {
  align-self: end;
  color: var(--neutral);
  font: 400 9.5px/1.2 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dot-plot__col {
  display: block;
  color: inherit;
  text-align: left;
  text-decoration: none;
}

.dot-plot__col:hover {
  text-decoration: none;
}

.dot-plot__swatch {
  display: block;
  width: 1.75rem;
  height: 3px;
  margin-bottom: 0.5rem;
  border-radius: 999px;
  transition: width 150ms ease;
}

.dot-plot__col:hover .dot-plot__swatch {
  width: 3rem;
}

.dot-plot__name {
  display: block;
  font: 600 10.5px/1.25 var(--font-mono);
  color: var(--t1);
}

.dot-plot__meta {
  color: var(--neutral);
  font: 400 9px/1.2 var(--font-mono);
}

.dot-plot__row {
  padding: 0.25rem 0.25rem;
  border-bottom: 1px solid var(--hair);
  border-radius: 2px;
  transition: background 150ms ease;
}

.dot-plot__row:hover {
  background: var(--tint);
}

.dot-plot__model {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  overflow: hidden;
  padding-right: 0.75rem;
  color: var(--t2);
  font: 400 11.5px/1.2 var(--font-mono);
}

.dot-plot__model-logo {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  object-fit: contain;
}

.dot-plot__model span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-mark {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  height: 2.25rem;
  padding-inline: 0.5rem;
  color: inherit;
  text-decoration: none;
  border-radius: 2px;
}

.score-mark:hover {
  text-decoration: none;
}

.score-mark--winner {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.score-mark--compact {
  height: 2rem;
}

.score-mark__track {
  position: relative;
  flex: 1;
  height: 1rem;
}

.score-mark__track::before {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 1px;
  background: color-mix(in srgb, var(--neutral) 45%, transparent);
  transform: translateY(-50%);
  content: "";
}

.score-mark__empty {
  flex: 1;
  height: 1px;
  background: var(--hair);
}

.score-mark__dot {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border: 2px solid var(--bg);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  transition: transform 150ms ease;
}

.score-mark:hover .score-mark__dot {
  transform: translate(-50%, -50%) scale(1.25);
}

.score-mark__value {
  width: 2rem;
  text-align: right;
  font: 600 11px/1 var(--font-mono);
  color: var(--t1);
}

.score-mark__value.is-empty {
  color: var(--neutral);
  font-weight: 400;
  font-size: 10px;
}

.dot-plot__mobile {
  display: grid;
  gap: 1.75rem;
}

.dot-plot__mobile-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0 0.25rem 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--hair);
  color: inherit;
  text-decoration: none;
}

.dot-plot__mobile-head:hover {
  text-decoration: none;
}

.dot-plot__mobile-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
}

.dot-plot__mobile-row {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 0.75rem;
  align-items: center;
  padding: 0.25rem 0.25rem;
  border-bottom: 1px solid var(--hair);
}

.dot-plot__note {
  margin-top: 0.75rem;
  color: var(--neutral);
  font: 400 9.5px/1.5 var(--font-mono);
}

/* The sidebar makes viewport width a poor proxy for the space available to
   this chart. Switch layouts only when the chart itself can fit the desktop
   grid (160px model column + four 125px score columns + gaps and padding). */
@container (min-width: 748px) {
  .dot-plot__desktop {
    display: block;
  }

  .dot-plot__mobile {
    display: none;
  }
}

/* —— Step curve —— */
.chart {
  position: relative;
  min-width: 0;
  max-width: 100%;
}

.chart__fallback {
  margin-top: 1rem;
}

.step-curve {
  width: 100%;
  min-width: 0;
  max-width: 860px;
  margin-inline: auto;
}

.step-curve__toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
}

.step-curve__filter {
  position: relative;
}

.step-curve__filter>summary {
  list-style: none;
}

.step-curve__filter>summary::-webkit-details-marker {
  display: none;
}

.step-curve__filter-panel {
  position: absolute;
  right: 0;
  z-index: 5;
  top: calc(100% + 0.35rem);
  min-width: 12rem;
  padding: 0.35rem;
  border: 1px solid var(--hair);
  border-radius: 0.35rem;
  background: var(--bg);
  box-shadow: 0 8px 24px rgb(14 22 35 / 10%);
}

.step-curve__filter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 2px;
  color: var(--t2);
  font: 400 10px/1.2 var(--font-mono);
  cursor: pointer;
}

.step-curve__filter-item:hover {
  background: var(--tint);
}

.step-curve__filter-item input {
  width: 0.75rem;
  height: 0.75rem;
  accent-color: var(--accent);
  cursor: pointer;
}

.swatch {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
  border-radius: 999px;
}

.step-curve__plot {
  position: relative;
}

.step-curve__svg {
  width: 100%;
  height: auto;
  font-family: var(--font-mono);
}

.step-curve__grid {
  stroke: var(--hair);
  stroke-width: 1;
}

.step-curve__baseline {
  stroke: var(--neutral);
  stroke-width: 1;
}

.step-curve__axis-label {
  fill: var(--t2);
  font-size: 10.5px;
}

.step-curve__line,
.step-curve__dot {
  transition: opacity 150ms ease, stroke-width 150ms ease;
}

.step-curve__dot {
  cursor: pointer;
}

.step-curve__hit-area {
  fill: transparent;
  cursor: crosshair;
  touch-action: pan-y;
}

.step-curve__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: var(--font-mono);
}

.step-curve__ytick {
  position: absolute;
  left: 0;
  width: 5%;
  color: var(--neutral);
  font-size: 10px;
  text-align: right;
  transform: translateY(-50%);
}

.step-curve__xtick {
  position: absolute;
  top: 89.5%;
  color: var(--neutral);
  font-size: 10px;
  transform: translateX(-50%);
}

.step-curve__label {
  position: absolute;
  color: inherit;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transform: translateY(-50%);
  transition: opacity 150ms ease;
}

.step-curve__tooltip {
  position: absolute;
  z-index: 4;
  max-width: min(18rem, calc(100% - 1rem));
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--hair);
  border-radius: 4px;
  background: var(--bg);
  color: var(--t1);
  box-shadow: 0 8px 24px rgb(14 22 35 / 10%);
  font: 400 0.72rem/1.35 var(--font-mono);
  letter-spacing: 0.01em;
  pointer-events: none;
  white-space: pre-line;
  transform: translate(12px, calc(-100% - 12px));
}

.step-curve__tooltip.is-left {
  transform: translate(calc(-100% - 12px), calc(-100% - 12px));
}

.step-curve__tooltip.is-below {
  transform: translate(12px, 12px);
}

.step-curve__tooltip.is-left.is-below {
  transform: translate(calc(-100% - 12px), 12px);
}

.step-curve__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1rem 0.5rem;
  margin-top: 0.5rem;
  color: var(--neutral);
  font: 400 10px/1 var(--font-mono);
}

.step-curve__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 3px 0.625rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--t2);
  font: 400 10px/1 var(--font-mono);
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}

.step-curve__chip.is-active {
  border-color: var(--hair);
}

.step-curve__chip.is-pinned {
  background: var(--tint);
  color: var(--accent);
}

.step-curve__note {
  margin: 1.5rem 0 0;
  color: var(--neutral);
  font: 400 10px/1.45 var(--font-mono);
}

@media (max-width: 767px) {
  .step-curve__plot {
    overflow: hidden;
  }

  /* Endpoint labels are repeated by the chips below the plot. Hiding them on
     narrow screens keeps long model names from widening the page. */
  .step-curve__label {
    display: none;
  }
}

/* —— Efficiency scatters —— */
.efficiency-charts {
  max-width: 900px;
  margin-inline: auto;
}

.efficiency-charts__toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.efficiency-charts__scale {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--t2);
  font: 400 10px/1 var(--font-mono);
}

.efficiency-charts__scale-toggle {
  position: relative;
  width: 1.75rem;
  height: 1rem;
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--tint);
  cursor: pointer;
}

.efficiency-charts__scale-toggle span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--accent);
  transition: translate 150ms ease;
}

.efficiency-charts__scale-toggle[aria-checked="true"] span {
  translate: 0.75rem 0;
}

.efficiency-charts__scale-toggle:hover,
.efficiency-charts__scale-toggle:focus-visible {
  border-color: var(--accent);
}

.efficiency-charts__filter {
  position: relative;
}

.efficiency-charts__filter>summary {
  list-style: none;
}

.efficiency-charts__filter>summary::-webkit-details-marker {
  display: none;
}

.efficiency-charts__filter-panel {
  position: absolute;
  right: 0;
  z-index: 5;
  top: calc(100% + 0.35rem);
  min-width: 12rem;
  padding: 0.35rem;
  border: 1px solid var(--hair);
  border-radius: 0.35rem;
  background: var(--bg);
  box-shadow: 0 8px 24px rgb(14 22 35 / 10%);
}

.efficiency-charts__filter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 2px;
  color: var(--t2);
  font: 400 10px/1.2 var(--font-mono);
  cursor: pointer;
}

.efficiency-charts__filter-item:hover {
  background: var(--tint);
}

.efficiency-charts__filter-item input {
  width: 0.75rem;
  height: 0.75rem;
  accent-color: var(--accent);
  cursor: pointer;
}

.efficiency-charts__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.efficiency-charts__title {
  margin: 0 0 0.35rem;
  color: var(--t2);
  font: 400 10px/1.2 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.efficiency-charts__plot {
  position: relative;
}

.efficiency-charts__svg {
  width: 100%;
  font-family: var(--font-mono);
}

.efficiency-charts__gridline {
  stroke: var(--hair);
  stroke-width: 1;
}

.efficiency-charts__baseline {
  stroke: var(--neutral);
  stroke-width: 1;
}

.efficiency-charts__axis-label {
  fill: var(--t2);
  font-size: 10.5px;
}

.efficiency-charts__dot {
  transition: opacity 150ms ease;
  cursor: pointer;
}

.efficiency-charts__frontier {
  fill: none;
  stroke: var(--neutral);
  stroke-width: 1.25;
  stroke-dasharray: 4 4;
  pointer-events: none;
}

.efficiency-charts__dot.is-frontier {
  stroke: var(--bg);
  stroke-width: 2.5;
  paint-order: stroke;
}

.efficiency-charts__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font: 400 10px/1 var(--font-mono);
  color: var(--neutral);
}

.efficiency-charts__ytick {
  position: absolute;
  left: 0;
  translate: 0 -50%;
}

.efficiency-charts__xtick {
  position: absolute;
  top: 89%;
  translate: -50% 0;
}

.efficiency-charts__panel-note,
.efficiency-charts__empty {
  margin: 0.25rem 0 0;
  color: var(--neutral);
  font: 400 9.5px/1.4 var(--font-mono);
}

.efficiency-charts__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.35rem;
  align-items: center;
  margin-top: 0.75rem;
  color: var(--t2);
  font: 400 10px/1.2 var(--font-mono);
}

.efficiency-charts__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: inherit;
  font: inherit;
}

.efficiency-charts__chip.is-active {
  border-color: var(--hair);
}

.efficiency-charts__chip.is-pinned {
  background: var(--tint);
  color: var(--accent);
}

.efficiency-charts__note {
  margin: 1.5rem 0 0;
  color: var(--neutral);
  font: 400 10px/1.45 var(--font-mono);
}

@media (max-width: 767px) {
  .efficiency-charts__grid {
    grid-template-columns: 1fr;
  }
}

/* —— Extended analysis charts —— */
.analysis-charts-host,
[data-analysis-root] {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.analysis-charts {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  max-width: 920px;
  margin-inline: auto;
}

.analysis-card {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--hair);
  border-radius: 0.35rem;
}

.analysis-card--wide {
  grid-column: 1 / -1;
}

.analysis-card__head {
  margin-bottom: 0.75rem;
}

.analysis-card__title,
.analysis-box-panel__title {
  margin: 0;
  color: var(--t2);
  font: 500 10px/1.2 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.analysis-card__description {
  max-width: 720px;
  margin: 0.35rem 0 0;
  color: var(--neutral);
  font: 400 10px/1.45 var(--font-mono);
}

/* As a reading note under the plot it runs the full width, like other charts. */
.analysis-split+.analysis-card__description {
  max-width: none;
  margin-top: 0.75rem;
}

/* Frameless like the other charts on the page. */
.analysis-plot {
  grid-column: 1 / -1;
  min-width: 0;
}

/* Centred as a unit: the legend is sized to its text rather than filling a
   column, so no dead space pulls the plot off to the left. */
.analysis-split {
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
}

.analysis-split__chart {
  flex: 0 1 78%;
  min-width: 0;
}

.analysis-legend {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 1rem;
  color: var(--t2);
  font: 400 10px/1.2 var(--font-mono);
}

.analysis-legend>span {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
}

.analysis-legend__swatch {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

@media (max-width: 767px) {
  .analysis-split {
    flex-direction: column;
    align-items: stretch;
  }

  .analysis-split__chart {
    width: 100%;
    flex: 1 1 auto;
  }

  .analysis-legend {
    flex-flow: row wrap;
    gap: 0.35rem 1rem;
  }
}

.analysis-chart__svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  overflow: visible;
  font-family: var(--font-mono);
}

@media (max-width: 767px) {
  .analysis-chart__svg {
    overflow: hidden;
  }
}

.analysis-chart__axis-line {
  stroke: var(--hair);
}

.analysis-chart__axis-text,
.analysis-chart__axis-label,
.analysis-chart__row-label,
.analysis-chart__column-label,
.analysis-chart__overlap-label {
  fill: var(--neutral);
  font: 400 9.5px/1 var(--font-mono);
}

/* Second line of a difficulty tier label: the pass-rate range, set back from
   the tier name so the name still reads as the axis category. */
.analysis-chart__axis-range {
  font-size: 8.5px;
  opacity: 0.75;
}

.analysis-chart__row-label {
  fill: var(--t2);
}

/* Matched to .step-curve__ytick / .step-curve__axis-label so the difficulty
   chart reads the same as the charts above it. */
.analysis-chart__tick {
  fill: var(--neutral);
  font: 400 10px/1 var(--font-mono);
}

.analysis-chart__plot-title {
  fill: var(--t2);
  font: 400 10.5px/1 var(--font-mono);
}

.analysis-chart__column-label {
  font-size: 9px;
}

.analysis-chart__axis-label {
  fill: var(--t2);
  font-size: 10px;
}

.analysis-chart__range,
.analysis-chart__whisker {
  stroke: var(--neutral);
  stroke-width: 2;
  stroke-linecap: round;
}

.analysis-chart__heat-cell {
  fill: var(--accent);
}

.analysis-chart__specialization-cell.is-positive {
  fill: var(--data);
}

.analysis-chart__specialization-cell.is-negative {
  fill: var(--accent);
}

.analysis-chart__cell-label {
  fill: var(--t1);
  font: 500 9.5px/1 var(--font-mono);
  pointer-events: none;
}

.analysis-chart__bar {
  fill: var(--accent);
  opacity: 0.68;
}

/* Stacked benchmark segments carry their own colour, matched to the legend.
   The page-background stroke separates neighbouring blocks in either theme. */
.analysis-chart__bar--segment {
  opacity: 1;
  stroke: var(--bg);
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.analysis-chart__bar-label {
  fill: var(--t2);
  font: 500 10px/1 var(--font-mono);
}

.analysis-box-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.analysis-box-panel {
  min-width: 0;
}

.analysis-box-panel__title {
  margin-bottom: 0.35rem;
}

.analysis-chart__box {
  opacity: 0.7;
}

.analysis-chart__median {
  stroke: var(--bg);
  stroke-width: 2;
}

.analysis-chart__overlap-dot {
  fill: var(--hair);
}

.analysis-chart__overlap-dot.is-active {
  fill: var(--accent);
}

@media (max-width: 1100px) {

  .analysis-charts,
  .analysis-box-grid {
    grid-template-columns: 1fr;
  }

  .analysis-card--wide {
    grid-column: auto;
  }
}

@media (max-width: 767px) {

  .analysis-card,
  .analysis-card--wide {
    padding: 0.75rem;
  }

  .analysis-chart__svg {
    min-width: 560px;
  }

  .analysis-card__body {
    overflow-x: auto;
  }

  /* The frameless difficulty chart is responsive rather than horizontally
     scrollable, so it must not inherit the fixed mobile SVG width above. */
  .analysis-split__chart .analysis-chart__svg {
    min-width: 0;
  }

  .analysis-box-panel .analysis-chart__svg {
    min-width: 390px;
  }
}

.table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.data-table th,
.data-table td {
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid var(--hair);
  text-align: left;
  font: 400 11px/1.3 var(--font-mono);
}

.data-table th {
  color: var(--t2);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Benchmark names are the row's identifier and should stay on one line; the
   "Modeled on" attribution is supporting detail, so it gives width back and
   wraps instead. Percentages are hints to the auto table algorithm, which is
   why the first column relies on nowrap rather than a width of its own. */
.data-table--benchmarks th:first-child,
.data-table--benchmarks td:first-child {
  white-space: nowrap;
}

.data-table--benchmarks th:nth-child(2),
.data-table--benchmarks td:nth-child(2) {
  width: 14%;
}

.numeric {
  text-align: right !important;
}

/* —— Dataset pages —— */
.example {
  margin-top: 1.375rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--hair);
  border-radius: 0.25rem;
  color: var(--t2);
  font: 400 11.5px/1.8 var(--font-mono);
}

.example .kicker {
  margin-bottom: 0.5rem;
  letter-spacing: 0.12em;
  font-size: 9.5px;
}

.pass-criterion {
  margin-top: 1rem;
  color: var(--t2);
  font-size: 14px;
  line-height: 1.6;
}

.wip-box {
  max-width: 660px;
  padding: 1.75rem;
  border: 1px dashed var(--neutral);
  border-radius: 0.25rem;
  color: var(--t2);
  font: 400 11.5px/1.6 var(--font-mono);
}

.diversity-grid,
.layout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2.5rem;
  max-width: 920px;
  margin-inline: auto;
}

.panel-title {
  margin: 0 0 0.875rem;
  color: var(--t2);
  font: 400 10px/1.2 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.panel-subtitle {
  margin: -0.375rem 0 0.875rem;
  color: var(--neutral);
  font: 400 9.5px/1.5 var(--font-mono);
}

.panel-caption {
  margin-top: 0.5rem;
  color: var(--neutral);
  font: 400 9.5px/1.4 var(--font-mono);
}

.bar-row {
  display: grid;
  grid-template-columns: 132px 1fr 40px;
  gap: 0.625rem;
  align-items: center;
  margin-bottom: 0.5rem;
  font: 400 11px/1.2 var(--font-mono);
}

.bar-row__label {
  overflow: hidden;
  color: var(--t2);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-row__track {
  height: 8px;
  background: var(--tint);
}

.bar-row__fill {
  display: block;
  height: 100%;
  background: var(--accent);
  opacity: 0.55;
}

.bar-row__count {
  text-align: right;
}

.range-chart {
  max-width: 860px;
  margin-top: 1.625rem;
  margin-inline: auto;
}

.range-chart__title {
  margin: 0;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--t1);
}

.range-chart__title span {
  font-weight: 400;
  color: var(--t2);
}

.range-chart__caption {
  margin: 0.125rem 0 0;
  color: var(--neutral);
  font: 400 10.5px/1.3 var(--font-mono);
}

.range-row {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 0 1.125rem;
  align-items: center;
  height: 2.75rem;
}

.range-row__label {
  overflow: hidden;
  color: var(--t2);
  font: 400 12px/1.2 var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.range-row--highlight .range-row__label {
  color: var(--accent);
  font-weight: 600;
}

.range-row__plot {
  position: relative;
  height: 100%;
}

.range-row__span {
  position: absolute;
  top: 60%;
  height: 9px;
  border-radius: 999px;
  background: var(--tint);
  transform: translateY(-50%);
}

.range-row--highlight .range-row__span {
  background: color-mix(in srgb, var(--accent) 32%, transparent);
}

.range-row__median {
  position: absolute;
  top: 60%;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: var(--neutral);
  transform: translate(-50%, -50%);
}

.range-row--highlight .range-row__median {
  background: var(--accent);
}

.range-row__value {
  position: absolute;
  top: 0;
  font: 600 12px/1 var(--font-mono);
  color: var(--neutral);
  transform: translateX(-50%);
}

.range-row--highlight .range-row__value {
  color: var(--accent);
}

.range-chart__axis {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 0 1.125rem;
}

.range-chart__ticks {
  position: relative;
  height: 1.125rem;
  border-top: 1px solid var(--hair);
  color: var(--neutral);
  font: 400 10px/1 var(--font-mono);
}

.range-chart__ticks span {
  position: absolute;
  top: 0.25rem;
  transform: translateX(-50%);
}

@media (max-width: 767px) {

  .range-row,
  .range-chart__axis {
    grid-template-columns: 110px 1fr;
  }
}

/* —— Talk / contact —— */
.talk {
  margin-top: 3.5rem;
  padding: 2rem 0 3.5rem;
  border-top: 1px solid var(--hair);
}

.talk .lede,
.talk .bullet-list li {
  color: var(--t1);
}

.talk .lede {
  margin-top: 0.75rem;
}

.talk .button {
  margin-top: 1.5rem;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--hair);
  border-radius: 999px;
  color: var(--t2);
  font: 400 11px/1 var(--font-mono);
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}

.chip:hover {
  color: var(--t1);
}

.chip[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--tint);
  color: var(--accent);
}

dialog {
  width: min(calc(100% - 2rem), 28rem);
  max-height: calc(100vh - 2rem);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--hair);
  border-radius: 0.375rem;
  background: var(--bg);
  color: var(--t1);
  box-shadow: 0 16px 40px rgb(14 22 35 / 14%);
}

dialog::backdrop {
  background: rgb(14 22 35 / 55%);
}

.contact-dialog {
  width: min(calc(100% - 2rem), 38rem);
}

.dialog__body {
  padding: 1.5rem;
}

.dialog__header {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}

.dialog__header h2 {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
  font-weight: 500;
}

.dialog__header p {
  margin: 0;
  color: var(--t2);
  font-size: 14px;
  line-height: 1.5;
}

.hubspot-form-shell {
  margin-top: 1.5rem;
}

.hubspot-form-status {
  margin: 0;
  color: var(--t2);
  font-size: 14px;
}

.hubspot-form-error {
  padding: 1rem;
  border: 1px solid var(--hair);
  border-radius: 0.25rem;
  background: var(--tint);
}

.hubspot-form-error p {
  margin: 0;
  color: var(--t2);
  font-size: 14px;
  line-height: 1.5;
}

.hubspot-form-error__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.9rem;
}

.hubspot-form .hs-form {
  color: var(--t1);
  font-family: var(--font-sans);
}

.hubspot-form .hs-form fieldset {
  display: block;
  width: 100%;
  max-width: none !important;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.hubspot-form .hs-form fieldset.form-columns-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.hubspot-form .hs-form-field {
  float: none !important;
  width: 100% !important;
  margin: 0 0 0.9rem !important;
  padding: 0 !important;
}

.hubspot-form .hs-form-field>label {
  display: block;
  margin: 0 0 0.35rem;
  color: var(--t2);
  font: 500 12px/1.4 var(--font-mono);
}

.hubspot-form .hs-form-required {
  margin-left: 0.15rem;
  color: var(--accent);
}

.hubspot-form .input {
  margin-right: 0 !important;
}

.hubspot-form .hs-input:not([type="checkbox"]):not([type="radio"]) {
  display: block;
  width: 100% !important;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  background: var(--tint);
  color: var(--t1);
  font: 400 14px/1.45 var(--font-sans);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.hubspot-form textarea.hs-input {
  min-height: 8rem !important;
  resize: vertical;
}

.hubspot-form .hs-input::placeholder {
  color: var(--t2);
  opacity: 0.75;
}

.hubspot-form .hs-input:focus {
  border-color: var(--accent) !important;
  outline: 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}

.hubspot-form .hs-submit {
  margin-top: 0.15rem;
}

.hubspot-form .hs-button {
  min-height: 2.65rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--accent);
  border-radius: 0.25rem;
  background: var(--accent);
  color: var(--bg);
  font: 500 12px/1 var(--font-mono);
  cursor: pointer;
  transition: opacity 150ms ease, translate 150ms ease;
}

.hubspot-form .hs-button:hover {
  opacity: 0.86;
  translate: 0 -1px;
}

.hubspot-form .inputs-list,
.hubspot-form .hs-error-msgs {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hubspot-form .inputs-list label {
  display: flex;
  gap: 0.45rem;
  align-items: flex-start;
  color: var(--t2);
  font-size: 12px;
  line-height: 1.45;
}

.hubspot-form .hs-error-msgs {
  margin-top: 0.3rem;
  color: var(--failure-text);
  font-size: 12px;
}

.hubspot-form .legal-consent-container,
.hubspot-form .submitted-message {
  color: var(--t2);
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 520px) {
  .hubspot-form .hs-form fieldset.form-columns-2 {
    display: block;
  }
}

.stack {
  display: grid;
  gap: var(--stack-gap, 0.75rem);
  margin-top: 1.25rem;
}

.field {
  display: grid;
  gap: 0.25rem;
}

.field label,
.field legend {
  color: var(--t2);
  font-size: 12.5px;
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--hair);
  border-radius: 2px;
  background: transparent;
  color: var(--t1);
  font-size: 14px;
}

.field textarea {
  min-height: 6rem;
  resize: vertical;
}

.layout-grid--2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.callout {
  margin-top: 1.25rem;
  color: var(--t2);
  font-size: 14px;
  line-height: 1.6;
}

/* —— WebGL binary hero —— */
.binary-hero-showcase {
  position: relative;
  margin-top: 0.5rem;
}

.binary-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.binary-hero--embedded {
  height: 260px;
}

.binary-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  mask-image:
    linear-gradient(to right, transparent, #000 5%, #000 95%, transparent),
    linear-gradient(to bottom, transparent, #000 12%, #000 90%, transparent);
  mask-composite: intersect;
}

.binary-hero__caption {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 8%;
  left: 0;
  margin: 0;
  color: var(--t2);
  font: 500 11px/1.2 var(--font-mono);
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}

.htmx-swapping .site-main {
  opacity: 0.65;
}

/* —— Responsive —— */
@media (max-width: 767px) {

  html,
  body {
    height: auto;
    overflow: auto;
  }

  .site-shell {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .site-sidebar,
  [data-sidebar="collapsed"] .site-sidebar {
    position: static;
    width: 100% !important;
    height: auto;
    padding: 1rem;
    border-right: 0;
    border-bottom: 1px solid var(--hair);
    overflow: visible;
  }

  [data-sidebar="collapsed"] .site-sidebar__brand,
  [data-sidebar="collapsed"] .site-nav,
  [data-sidebar="collapsed"] .site-sidebar__footer {
    display: flex;
  }

  [data-sidebar="collapsed"] .site-sidebar__footer {
    display: none;
  }

  .site-sidebar__top .icon-button[data-sidebar-toggle] {
    display: none;
  }

  .site-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.75rem;
  }

  .site-nav a.is-dataset {
    padding-left: 0.625rem;
  }

  .site-nav a.is-meta {
    margin-top: 0;
  }

  .site-sidebar__footer {
    display: none;
  }

  .site-main {
    overflow: visible;
  }

  .page {
    padding: 1.5rem 1rem 3.75rem;
  }

  .page-header {
    flex-wrap: wrap;
  }

  .board {
    column-gap: 0.5rem;
  }

  .layout-grid--2 {
    grid-template-columns: 1fr;
  }

  .binary-hero-showcase {
    width: calc(100% + 2rem);
    margin-left: -1rem;
  }

  .binary-hero--embedded .binary-hero__canvas {
    mask-image:
      linear-gradient(to right,
        transparent,
        #000 16px,
        #000 calc(100% - 16px),
        transparent),
      linear-gradient(to bottom, transparent, #000 12%, #000 90%, transparent);
  }
}

@media (min-width: 1024px) {
  body {
    zoom: 1.125;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

.code-index-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  max-width: min(18rem, calc(100vw - 1.5rem));
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--hair);
  border-radius: 4px;
  background: var(--bg);
  color: var(--t1);
  box-shadow: 0 8px 24px rgb(14 22 35 / 10%);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
  pointer-events: none;
  white-space: pre-wrap;
}

[data-theme="dark"] .code-index-tooltip {
  box-shadow: 0 10px 28px rgb(0 0 0 / 0.45);
}