/* Selected A30 Ink design. Scoped to the production competition stats row. */
#stats-details.competition-compute {
  --ns-title-size: clamp(24px, 1.5vw, 30px);
  --ns-metric-size: clamp(38px, 3.35vw, 50px);
  --think-color: #d7ad50;
  --think-spread: 32%;
  --tag-y: -10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc((100% - 2rem) * 6 / 11);
  gap: 0;
  height: clamp(594px, calc(33.2vw + 24px), 668px);
  min-width: 0;
  margin-top: 3.2rem;
  border-top: 1px solid #151713;
  border-bottom: 1px solid #151713;
  border-radius: 0;
}
#stats-details.competition-compute *,
#stats-details.competition-compute *::before,
#stats-details.competition-compute *::after { box-sizing: border-box; }
#stats-details.competition-compute :is(h2, p, dl, dd) { margin: 0; }
#stats-details.competition-compute .ns-pane {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: 62px minmax(0, 1fr) 214px;
  min-width: 0;
  padding: 32px 38px;
  container-type: inline-size;
}
#stats-details.competition-compute .ns-compute {
  --branch-paper: #0d0e0c;
  --branch-line: #777d68;
  color: #fffdf5;
  background: #0d0e0c;
}
#stats-details.competition-compute .ns-git {
  --branch-paper: #fffdf5;
  --branch-line: #111;
  --green-0: #202820;
  --green-1: #0e4429;
  --green-2: #006d32;
  --green-3: #26a641;
  --green-4: #39d353;
  color: #192016;
  background: #fffdf5;
}
#stats-details.competition-compute .ns-header {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 18px auto;
  grid-template-columns: 1fr auto;
  row-gap: 10px;
  align-content: start;
  min-width: 0;
}
#stats-details.competition-compute .ns-eyebrow {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  font: 400 10px/1.5 var(--mono);
  letter-spacing: .11em;
  color: #919782;
}
#stats-details.competition-compute .ns-git .ns-eyebrow { color: #777e6d; }
#stats-details.competition-compute .ns-heading {
  grid-column: 1 / -1;
  grid-row: 2;
  font: 300 var(--ns-title-size)/1.2 var(--sans);
  letter-spacing: -.025em;
  white-space: nowrap;
}
#stats-details.competition-compute .ns-heading em { font: italic 400 1.05em/1.1 var(--serif); }
#stats-details.competition-compute .ns-git .ns-header { column-gap: 18px; }
#stats-details.competition-compute .ns-git .ns-heading { grid-column: 1; align-self: baseline; }
#stats-details.competition-compute .ns-repo {
  grid-column: 2;
  grid-row: 2;
  align-self: baseline;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font: italic 400 calc(var(--ns-title-size) * 1.05)/1.1 var(--serif);
  color: #000;
  text-decoration: none;
  white-space: nowrap;
  transform: scale(1);
  transform-origin: right bottom;
}
#stats-details.competition-compute .ns-repo span { color: #000; }
#stats-details.competition-compute .ns-repo svg { width: 1em; height: 1em; flex: 0 0 1em; color: #192016; }
#stats-details.competition-compute .ns-repo:hover { opacity: 1; }
#stats-details.competition-compute .ns-repo:focus-visible { outline: 2px solid #287747; outline-offset: 4px; }
#stats-details.competition-compute .ns-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  min-width: 0;
}
#stats-details.competition-compute .ns-git-stage { display: block; isolation: isolate; }
#stats-details.competition-compute .ns-compute .ns-stage {
  transform: translateY(3px) scale(1.03);
  transform-origin: center;
}
#stats-details.competition-compute .ns-expression {
  display: block;
  position: relative;
  text-align: center;
  white-space: nowrap;
}
#stats-details.competition-compute .ns-token {
  display: inline-block;
  font: 300 clamp(30px, 10.3cqi, 72px)/1.05 var(--sans);
  letter-spacing: -.055em;
}
#stats-details.competition-compute .ns-tag {
  position: absolute;
  bottom: 7px;
  z-index: 4;
  font: 400 var(--think-size, 32px)/1.3 var(--mono);
  color: var(--think-color);
  letter-spacing: -.025em;
  transform: translate(-50%, var(--tag-y));
}
#stats-details.competition-compute .ns-tag[data-tag="open"] { left: calc(50% - var(--think-spread)); right: auto; }
#stats-details.competition-compute .ns-tag[data-tag="close"] { left: calc(50% + var(--think-spread)); right: auto; }
#stats-details.competition-compute .ns-token-label {
  margin-top: 21px;
  font: italic 400 clamp(22px, 4cqi, 27px)/1.2 var(--serif);
  color: #e5e4d9;
  text-align: center;
}
#stats-details.competition-compute .ns-map {
  position: absolute;
  z-index: 3;
  left: var(--map-left, 38px);
  top: var(--map-top, 120px);
  width: var(--map-width, 440px);
  max-width: none;
  padding: 0;
}
#stats-details.competition-compute .ns-heatmap {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  grid-template-rows: repeat(7, 1fr);
  grid-auto-flow: column;
  gap: 4px;
  width: 100%;
  padding: 0;
  border-radius: 0;
  background: transparent;
}
#stats-details.competition-compute .ns-day {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 5px;
  padding: 0;
  cursor: pointer;
  background: var(--green-0);
  box-shadow: none;
  transform: none;
  transition: filter .18s ease;
}
#stats-details.competition-compute .ns-day[data-level="1"] { background: var(--green-1); }
#stats-details.competition-compute .ns-day[data-level="2"] { background: var(--green-2); }
#stats-details.competition-compute .ns-day[data-level="3"] { background: var(--green-3); }
#stats-details.competition-compute .ns-day[data-level="4"] { background: var(--green-4); }
#stats-details.competition-compute .ns-day[data-date="2026-05-31"] { outline: 1px solid var(--think-color); outline-offset: 1px; }
#stats-details.competition-compute .ns-day[data-date="2026-05-31"]::before,
#stats-details.competition-compute .ns-day[data-date="2026-05-31"]::after {
  content: "";
  position: absolute;
  inset: auto;
  top: 50%;
  left: 50%;
  display: block;
  width: 50%;
  height: 1px;
  background: var(--think-color);
  color: transparent;
  text-shadow: none;
  pointer-events: none;
}
#stats-details.competition-compute .ns-day[data-date="2026-05-31"]::before { transform: translate(-50%, -50%) rotate(45deg); }
#stats-details.competition-compute .ns-day[data-date="2026-05-31"]::after { transform: translate(-50%, -50%) rotate(-45deg); }
#stats-details.competition-compute .ns-day:hover { filter: brightness(1.12); }
#stats-details.competition-compute .ns-day:focus-visible { outline: 2px solid #718954; outline-offset: 2px; }
#stats-details.competition-compute .ns-day[data-date="2026-05-31"]:focus-visible { outline-color: var(--think-color); }
#stats-details.competition-compute .ns-readout {
  height: 20px;
  margin-top: 9px;
  font: 400 10px/20px var(--mono);
  color: #697360;
  white-space: nowrap;
}
#stats-details.competition-compute .ns-tail {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 70px minmax(0, 1fr);
  row-gap: 0;
  min-width: 0;
}
#stats-details.competition-compute .ns-connector { width: 100%; height: 70px; color: var(--branch-line); }
#stats-details.competition-compute .ns-branch-svg { display: block; width: 100%; height: 70px; overflow: visible; }
#stats-details.competition-compute .ns-compute .ns-connector { position: relative; }
#stats-details.competition-compute .ns-compute .ns-connector::before {
  content: "";
  display: var(--a30-stem-display, block);
  position: absolute;
  pointer-events: none;
  left: calc(50% - .5px);
  width: 1px;
  top: calc(-1 * var(--a30-stem, 0px));
  height: calc(var(--a30-stem, 0px) + 3px);
  background: var(--branch-line);
}
#stats-details.competition-compute .ns-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: start;
}
#stats-details.competition-compute .fs-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#stats-details.competition-compute .ns-metrics > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding-top: 10px;
  text-align: center;
}
#stats-details.competition-compute .ns-metrics dd {
  display: flex;
  position: static;
  order: -1;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  font: 400 var(--ns-metric-size)/1 var(--sans);
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#stats-details.competition-compute .ns-metrics dt {
  margin-top: 9px;
  font: italic 400 23px/1.15 var(--serif);
  color: #dce0d0;
}
#stats-details.competition-compute .ns-git .ns-metrics > div {
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: clamp(5px, .55vw, 9px);
}
#stats-details.competition-compute .ns-git .ns-metrics dt { margin-top: 0; color: #68745e; white-space: nowrap; }
#stats-details.competition-compute .ns-compute .ns-metrics dd { font-size: clamp(34px, 3vw, 50px); }
#stats-details.competition-compute .rs-word { font: italic 400 .48em/1.2 var(--serif); letter-spacing: 0; }
#stats-details.competition-compute .ns-compute .fs-three .rs-word { font-size: clamp(15px, 1.15vw, 22px); }
#stats-details.competition-compute .ns-compute .fs-three dt { font-size: clamp(18px, 1.3vw, 23px); }
#stats-details.competition-compute .ns-hours {
  position: static;
  margin: 0;
  font: italic 400 .5em/1 var(--serif);
  letter-spacing: 0;
}
#stats-details.competition-compute .a30-gpu { overflow: visible; }
#stats-details.competition-compute .a30-source { color: inherit; text-decoration: none; }
#stats-details.competition-compute .a30-source:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
#stats-details.competition-compute .a30-source:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

@media (max-width: 1100px) and (min-width: 821px) {
  #stats-details.competition-compute { --ns-title-size: 24px; --ns-metric-size: 40px; }
  #stats-details.competition-compute .ns-pane { padding-inline: 24px; }
  #stats-details.competition-compute .ns-metrics dt { font-size: 21px; }
  #stats-details.competition-compute .ns-compute .fs-three dd { font-size: 32px; }
  #stats-details.competition-compute .ns-compute .fs-three .rs-word { font-size: 14px; }
}
@media (max-width: 820px) {
  #stats-details.competition-compute { height: auto; grid-template-columns: 1fr; --ns-title-size: 27px; --ns-metric-size: 44px; }
  #stats-details.competition-compute .ns-pane { height: 574px; padding: 30px 32px; grid-template-rows: 62px minmax(0, 1fr) 222px; }
}
@media (max-width: 460px) {
  #stats-details.competition-compute { --ns-title-size: 24px; --ns-metric-size: 37px; }
  #stats-details.competition-compute .ns-pane { height: 554px; padding: 25px 19px; grid-template-rows: 62px minmax(0, 1fr) 216px; }
  #stats-details.competition-compute .ns-tag { bottom: 3px; }
  #stats-details.competition-compute .ns-token { font-size: 10.1cqi; }
  #stats-details.competition-compute .ns-token-label { font-size: 22px; }
  #stats-details.competition-compute .ns-heatmap { gap: 4px; }
  #stats-details.competition-compute .ns-metrics dt { font-size: 20px; }
  #stats-details.competition-compute .ns-compute .fs-three dd { font-size: 23px; gap: 3px; }
  #stats-details.competition-compute .ns-compute .fs-three .rs-word { font-size: 11px; }
  #stats-details.competition-compute .ns-compute .fs-three dt { font-size: 18px; max-width: 95px; }
  #stats-details.competition-compute .fs-three .ns-hours { font-size: .43em; }
  #stats-details.competition-compute .ns-readout { font-size: 8px; }
}
@media (max-width: 360px) {
  #stats-details.competition-compute { --ns-title-size: 21px; }
  #stats-details.competition-compute .ns-compute .fs-three dd { font-size: 18px; gap: 2px; }
  #stats-details.competition-compute .ns-compute .fs-three .rs-word { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  #stats-details.competition-compute .ns-day { transition: none; }
}

@container (max-width: 400px) {
  #stats-details.competition-compute .ns-git .ns-heading { grid-column: 1 / -1; }
  #stats-details.competition-compute .ns-repo { grid-row: 1; }
}

/* Think tags: the A30 studio's look (28px gold, raised 10px, clear of the numeral),
   laid out as a baseline flex row rather than fixed-percentage absolutes so the gap
   is real clearance at every width instead of glyph side-bearing. */
#stats-details.competition-compute { --think-size: min(28px, 3.6cqi); }
#stats-details.competition-compute .ns-expression {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(10px, 3.4cqi, 27px);
  white-space: nowrap;
}
#stats-details.competition-compute .ns-tag {
  position: static;
  bottom: auto;
  left: auto;
  right: auto;
  font: 400 var(--think-size)/1.3 var(--mono);
  color: var(--think-color);
  letter-spacing: -.025em;
  transform: translateY(-10px);
}
#stats-details.competition-compute .ns-tag[data-tag="open"],
#stats-details.competition-compute .ns-tag[data-tag="close"] { left: auto; right: auto; }