/* The explorer stylesheet. Loaded after tokens.css and primitives.css, which
   sit beside it; every rule here composes their tokens, with no fonts,
   colors, radii, or text treatments of its own. The font URLs point at the
   explorer's own copies. */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/GeistMono.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; }
body {
  overflow-x: hidden;
  background: var(--paper);
  color: var(--carbon);
  font: 400 16px/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
body.menu-locked { overflow: hidden; }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--oxide); outline-offset: 4px; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; letter-spacing: -0.025em; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
code { font-family: var(--font-mono); }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- page column: 1024px at most, with fluid gutters ---- */

.page {
  width: min(calc(100% - clamp(64px, 10vw, 192px)), 1024px);
  margin-inline: auto;
}

/* ---- shared type ---- */

.eyebrow {
  margin: 0 0 20px;
  color: var(--oxide);
  font: 400 12px/1.5 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.title {
  max-width: 900px;
  font: 600 clamp(34px, 3.4vw, 52px)/1.1 var(--font-mono);
  font-variant-ligatures: none;
  letter-spacing: var(--type-title-tracking);
  overflow-wrap: anywhere;
}
.page-title {
  font: 600 clamp(28px, 2.6vw, 38px)/1.12 var(--font-mono);
  font-variant-ligatures: none;
  letter-spacing: var(--type-title-tracking);
  overflow-wrap: anywhere;
}
/* The sweep gradient is sized to the element's box, so a swept title hugs
   its text like an inline .sweep-words span; on a column-wide block the
   stripe crosses short words in the fast first quarter of the pass. */
[data-sweep] { width: fit-content; }
.section-lede {
  max-width: 760px;
  margin: 28px 0 0;
  color: rgba(19, 23, 28, 0.75);
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.55;
}
/* the small print under a thing (primitives.css --under-* vars) */
.under {
  margin: 14px 0 0;
  color: var(--under-ink);
  font-size: var(--under-size);
  font-weight: 400;
  line-height: 1.6;
}
.under a,
.text-link {
  color: var(--under-action-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.text-link { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.under--split { display: flex; justify-content: space-between; gap: 16px; }
.mono {
  font-family: var(--font-mono);
  font-variant-ligatures: none;
  letter-spacing: -0.025em;
}
/* one arrow everywhere: the mono glyph at 14px, whether the link has text or is the bare arrow after a copy button */
.ext::after { content: " ↗"; font: 500 14px/1 var(--font-mono); letter-spacing: 0; }
.ext:empty::after { content: "↗"; }

/* ---- buttons ---- */

.button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 21px;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.button--primary { border-color: var(--carbon); background: var(--carbon); color: var(--paper); }
.button--secondary { background: var(--paper); }
.header-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 18px;
  border: 1px solid rgba(19, 23, 28, 0.18);
  border-radius: 8px;
  background: transparent;
  color: var(--carbon);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: border-color 160ms ease;
}
.header-button:hover { border-color: currentColor; }
.header-button--primary { border-color: var(--carbon); background: var(--carbon); color: var(--paper); }

/* ---- header: fixed, transparent over the hero, the charcoal pill bar once
   scrolled. Ink is paper on both. ---- */

.site-header {
  position: fixed;
  z-index: 20;
  inset: 0 0 auto;
  height: 72px;
  color: var(--paper);
  transition: height 220ms ease, background-color 220ms ease;
}
.site-header.nav-pill { height: 60px; background: var(--charcoal); }
/* the catch-up strip: above the header while the index is behind the chain;
   the header and the hero move down by its height */
.catchup {
  position: fixed;
  z-index: 21;
  inset: 0 0 auto;
  height: var(--catchup-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  background: var(--oxide);
  color: var(--carbon);
  font: 500 13px/1 var(--font-sans);
  text-align: center;
}
.has-catchup { --catchup-h: 32px; }
.has-catchup .site-header { top: var(--catchup-h); }
.has-catchup .hero__top > .page { padding-top: calc(72px + var(--catchup-h) + clamp(28px, 4vw, 40px)); }
.header-logo { filter: invert(1); }
.site-header > .page {
  height: 100%;
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
}
.header-logo-link { display: block; flex: 0 0 auto; width: clamp(150px, 12vw, 190px); }
.header-logo { width: 100%; height: auto; }
.header-nav {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}
.header-links, .header-actions { display: flex; align-items: center; }
.header-links { flex: 1; justify-content: center; gap: clamp(18px, 2vw, 32px); }
.header-actions { flex: 1; justify-content: flex-end; gap: 10px; }
.header-links a {
  color: rgba(255, 248, 242, 0.68);
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  transition: color 160ms ease;
}
.header-links a:hover { color: var(--paper); }
.header-links a[aria-current="page"] { color: var(--paper); font-weight: 600; }
.site-header .header-button { border-color: rgba(255, 248, 242, 0.3); color: var(--paper); }
.site-header .header-button--primary { border-color: var(--paper); background: var(--paper); color: var(--charcoal); }

/* network switcher: a dropdown menu on an outlined button */
.header-dropdown { position: relative; }
.header-dropdown > summary::after {
  content: "⌄";
  display: inline-block;
  font-size: 12px;
  transform: translateY(-1px);
}
.header-dropdown[open] > summary::after { transform: translateY(1px) rotate(180deg); }
.header-dropdown__menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 10px);
  right: 0;
  width: 210px;
  padding: 10px;
  border: 1px solid rgba(19, 23, 28, 0.18);
  border-radius: 8px;
  background: var(--paper);
  color: var(--carbon);
  box-shadow: 0 18px 50px rgba(19, 23, 28, 0.14);
}
.header-dropdown__menu a,
.header-dropdown__menu > span {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border-radius: 5px;
  color: inherit;
  font-size: 13px;
  font-weight: 400;
}
.header-dropdown__menu > span { color: var(--under-ink); }
.header-dropdown__menu a:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.header-dropdown__menu a[aria-current="true"] { color: var(--oxide); }
.header-dropdown__menu small {
  padding: 3px 5px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font: 9px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
}
.mobile-menu { display: none; }

/* ---- surfaces ---- */

.surface-paper { background: var(--paper); color: var(--carbon); }
.surface-charcoal {
  background: var(--charcoal);
  color: var(--paper);
  --under-ink: rgba(255, 248, 242, 0.55);
  --under-action-ink: rgba(255, 248, 242, 0.82);
}

/* ---- hero: a charcoal section with the header over it ---- */

/* the hero and the body create no stacking context of their own: menus that open
   from either must paint above the transitions and the other half of the page.
   Only the stats half of the hero is lifted (it overlaps the pulled-up
   transition) and it stays above the heading half, so a menu opening upward
   from under the stats is not hidden by the address row. */
.hero { position: relative; }
/* charcoal of its own too: on a page with no stats row it is what covers the
   pulled-up transition's top edge (see .hero__stats) */
.hero__top { position: relative; z-index: 3; background: var(--charcoal); }
.hero__clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero__top > .page { position: relative; z-index: 2; padding-top: calc(72px + clamp(28px, 4vw, 40px)); }
/* charcoal of its own: it sits above the pulled-up transition, whose polygon
   tops leave a faint coloured row where they all close 2px past the stage */
.hero__stats { position: relative; z-index: 3; padding-bottom: 0; background: var(--charcoal); }
/* the meter is up to 600px wide */
.hero-meter { width: min(100%, 600px); margin-top: 24px; }
.hero-meter.demo-meter { width: min(100%, 600px); }
.hero .title { color: var(--paper); }
.hero .section-lede { color: rgba(255, 248, 242, 0.75); }
.title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.title-row > div { min-width: 0; }
.title-row .demo-widget { flex: 0 1 420px; margin-top: 0; }
.heading .address-row { width: min(100%, 720px); margin-top: 22px; }
.heading .hero-meter { margin-top: 20px; }
.heading .under--split { width: min(100%, 600px); }


/* blueprint art, cropped by the hero */
.hero-art {
  position: absolute;
  z-index: 0;
  color: var(--paper);
  pointer-events: none;
}
.hero-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero-art svg path { stroke-linecap: round; }
.hero-art--home {
  top: 72px;
  right: max(clamp(24px, 4vw, 64px), calc((100% - 1200px) / 2));
  width: 280px;
  opacity: 0.5;
}
.hero-art--home .machine path { stroke-width: 1.4; }
.hero-art--home .tape { position: absolute; inset: 0; }
.hero-art--home .tape path { stroke-width: 1.4; }
.hero-art--home .tape .tape-flow {
  stroke: var(--charcoal);
  stroke-dasharray: 2 7;
  opacity: 0.35;
  animation: tape-flow 1.1s linear infinite;
}
@keyframes tape-flow { to { stroke-dashoffset: 9; } }
.hero-art--home .spool {
  position: absolute;
  left: 50.85%;
  top: 7.59%;
  width: 38.76%;
  height: auto;
  animation: spool-spin 6s linear infinite;
  transform-origin: 50% 50%;
}
.hero-art--home .spool path { stroke-width: 1.4; }
@keyframes spool-spin { to { transform: rotate(360deg); } }
/* giant corner-bleed spool on the list pages: hairline strokes */
.hero-art--spool {
  top: -300px;
  right: -260px;
  width: 704px;
  opacity: 0.45;
  animation: spool-spin 40s linear infinite;
  transform-origin: 50% 50%;
}
.hero-art--spool path { stroke-width: 0.3; }
/* the reel outline, slow spin, on detail pages */
.hero-art--reel {
  top: -280px;
  right: -300px;
  width: 673px;
  opacity: 0.35;
  animation: reel-spin 46s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes reel-spin { to { transform: rotate(-360deg); } }
/* fleet of small machines on the nodes page */
.hero-art--fleet {
  top: -30px;
  right: max(clamp(24px, 4vw, 64px), calc((100% - 1200px) / 2));
  width: 340px;
  height: 100%;
  opacity: 0.4;
}
.hero-art--fleet svg { position: absolute; width: 92px; height: auto; }
.hero-art--fleet svg path { stroke-width: 2.2; }
.hero-art--fleet svg:nth-of-type(1) { right: 232px; top: 14px; }
.hero-art--fleet svg:nth-of-type(2) { right: 116px; top: -34px; }
.hero-art--fleet svg:nth-of-type(3) { right: 0; top: 26px; }

@media (max-width: 1100px) {
  .hero-art--home { width: 240px; opacity: 0.4; }
}

/* ---- chromatic transitions: the SVG bands drawn by transitions.js ---- */

.page-transition {
  --transition-h: clamp(200px, 18vw, 240px);
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: var(--transition-h);
  /* transitions.js puts the band edge at 28% of the stage plus 50px; pull the
     stage up so the edge's high end sits a few px under the hero */
  margin: calc(48px - 0.28 * var(--transition-h)) 0 0;
  overflow: visible;
  pointer-events: none;
}
/* a 1px overlap so a fractional stage height never leaves a paper seam above the charcoal */
.page-transition--top { margin: 0 0 -1px; }
polygon { shape-rendering: geometricPrecision; }
.transition-halftone { shape-rendering: crispEdges; }

/* ---- page body ---- */

/* the footer transition's dots reach 100px above its stage; keep them off the
   last row. The body paints above the hero and both transitions (menus that
   open upward must sit on top of them) and has no background of its own: the
   page is already paper, and the dots show through where nothing is drawn. */
.body { position: relative; background: transparent; padding-top: 0; padding-bottom: clamp(112px, 11vw, 140px); }
.body > .block:first-child { margin-top: clamp(20px, 2.5vw, 32px); }

/* ---- search field (.demo-form) ---- */

.demo-widget { width: min(100%, 780px); margin-top: 42px; }
.demo-field-surface { border-color: transparent !important; background: #d8d5d1 !important; }
.demo-form {
  position: relative;
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid var(--line-paper);
  border-radius: 10px;
  background: var(--paper);
}
.demo-form__input-shell { position: relative; min-width: 0; flex: 1; height: 46px; }
.demo-form__input-shell::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 13px;
  z-index: 1;
  width: 11px;
  height: 24px;
  background: var(--oxide);
  pointer-events: none;
  transform: translateY(-50%);
  animation: demo-terminal-cursor-blink 1.05s steps(1, end) infinite;
}
.demo-form__input-shell.no-cursor::before,
.demo-form__input-shell:focus-within::before { display: none; }
@keyframes demo-terminal-cursor-blink {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}
.demo-form__input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  padding: 0 13px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--carbon);
  caret-color: var(--carbon);
  font: 19px/46px var(--font-mono);
  letter-spacing: -1px;
}
.demo-form__input::placeholder { color: rgba(19, 23, 28, 0.45); letter-spacing: -0.025em; }
.demo-form__submit {
  width: 48px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  border: 0;
  border-radius: 8px;
  background: var(--carbon);
  color: var(--paper);
  cursor: pointer;
  font-size: 21px;
  font-weight: 600;
}
.demo-form:focus-within { outline: 2px solid var(--oxide); outline-offset: 4px; }
/* on charcoal the field is the install-command row: transparent, hairline, paper */
.surface-charcoal .demo-form { border-color: var(--line-charcoal) !important; background: var(--charcoal-raised) !important; }
.surface-charcoal .demo-result__command { background: var(--charcoal-raised); }
.surface-charcoal .demo-form__input { color: var(--paper); caret-color: var(--paper); }
.surface-charcoal .demo-form__submit { background: var(--paper); color: var(--charcoal); }
.demo-form__under {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 14px 0 0;
  color: var(--under-ink);
  font-size: var(--under-size);
  font-weight: 400;
}
.demo-form__under a { color: var(--under-action-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---- meter (.demo-meter) ---- */

.demo-meter {
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--line-paper);
  border-radius: 10px;
  overflow: hidden;
  color: rgba(19, 23, 28, 0.94);
  font: clamp(22px, 2.2vw, 26px)/1 var(--font-mono);
  font-variant-ligatures: none;
  font-feature-settings: "calt" 0;
  white-space: nowrap;
}
.demo-meter__bar { display: block; width: 100%; overflow: hidden; }
.surface-charcoal .demo-meter { border-color: var(--line-charcoal); color: rgba(255, 248, 242, 0.94); }
.demo-meter [data-brick],
.status [data-brick],
.brick {
  color: var(--oxide);
  font-family: var(--font-mono);
  font-variant-ligatures: none;
  font-feature-settings: "calt" 0;
}

/* ---- selector: an outlined summary with a nav-style menu ---- */

.select { position: relative; flex: none; }
.select > summary {
  height: 46px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border: 1px solid var(--line-paper);
  border-radius: 8px;
  background: var(--paper);
  color: var(--carbon);
  font: 500 15px/1.25 var(--font-mono);
  letter-spacing: -0.025em;
  white-space: nowrap;
}
.select > summary::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.select[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.select__menu {
  position: absolute;
  z-index: 6;
  top: calc(100% + 8px);
  right: 0;
  width: 210px;
  max-height: min(60vh, 480px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px;
  border: 1px solid var(--line-paper);
  border-radius: 8px;
  background: var(--paper);
  color: var(--carbon);
  box-shadow: 0 18px 50px rgba(19, 23, 28, 0.14);
}
.select__menu a {
  display: flex;
  min-height: 38px;
  align-items: center;
  padding: 0 10px;
  border-radius: 5px;
  font: 400 13px/1.2 var(--font-sans);
}
.select__menu a:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.select__menu a[aria-current="true"] { color: var(--oxide); }
details.menu-up .select__menu { top: auto; bottom: calc(100% + 8px); }

/* ---- stats, left-aligned ---- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line-paper);
  border-left: 1px solid var(--line-paper);
}
.stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stat {
  position: relative;
  min-width: 0;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  padding: 16px 18px 14px;
  border-right: 1px solid var(--line-paper);
  border-bottom: 1px solid var(--line-paper);
  color: inherit;
}
.stat__label {
  padding-right: 20px;
  color: var(--under-ink);
  font: 400 12px/1.5 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.stat__value {
  margin-top: 8px;
  font: 600 clamp(22px, 2vw, 28px)/1.1 var(--font-mono);
  font-variant-ligatures: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
a.stat:hover .stat__value { text-decoration: underline; text-underline-offset: 5px; }
.stat__detail { margin-top: auto; padding-top: 6px; color: var(--under-ink); font-size: var(--under-size); }
.surface-charcoal .stats { border-color: var(--line-charcoal); }
.surface-charcoal .stat { border-color: var(--line-charcoal); }
.surface-charcoal .stat__label { color: var(--oxide); }
.surface-charcoal .stat__value { color: var(--paper); }
.surface-charcoal .info { color: rgba(255, 248, 242, 0.45); }
.surface-charcoal .info:hover, .surface-charcoal .info:focus { color: var(--paper); }
.surface-charcoal .tip { background: var(--paper); color: var(--carbon); }
.stat__detail a { color: var(--under-action-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---- info tips: charcoal tip, no offset shadow ---- */

.info {
  position: absolute;
  top: 14px;
  right: 14px;
  color: var(--under-ink);
  font: 400 13px/1 var(--font-mono);
  letter-spacing: 0;
  text-transform: none;
  cursor: help;
  outline: none;
}
.info:hover, .info:focus { color: var(--carbon); }
.tip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: max-content;
  max-width: 240px;
  padding: 10px 13px;
  border-radius: 8px;
  background: var(--charcoal);
  color: var(--paper);
  font: 400 13px/1.45 var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  box-shadow: 0 12px 30px rgba(19, 23, 28, 0.12);
  display: none;
  pointer-events: none;
}
.info:hover .tip, .info:focus .tip, .info.is-open .tip { display: block; }
th .info { position: relative; top: auto; right: auto; margin-left: 6px; font-size: 11px; vertical-align: middle; }
th .info .tip { left: 0; right: auto; }
th:last-child .info .tip { left: auto; right: 0; }

/* ---- blocks + tables ---- */

.block { margin-top: clamp(36px, 4vw, 48px); }
.block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.block__head h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 600 20px/1.3 var(--font-mono);
  font-variant-ligatures: none;
  letter-spacing: -0.025em;
}

.block__head .under { margin: 0; }
.pager { margin-top: 18px; }
.table-wrap { position: relative; }
.table-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.table-scroll::-webkit-scrollbar { display: none; }
/* right-edge fade while there is more to scroll to (the command-row mask) */
.table-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(90deg, transparent, var(--paper));
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.table-wrap.scroll-more::after { opacity: 1; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  padding: 0 16px 12px 0;
  border-bottom: 1px solid var(--line-paper);
  color: var(--under-ink);
  font: 400 12px/1.5 var(--font-mono);
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
tbody td {
  padding: 12px 16px 12px 0;
  border-top: 1px solid rgba(19, 23, 28, 0.1);
  color: rgba(19, 23, 28, 0.82);
  vertical-align: middle;
  white-space: nowrap;
}
tbody tr:first-child td { border-top: 0; }
thead th:last-child, tbody td:last-child { padding-right: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.addr {
  color: var(--carbon);
  font: 500 14px/1.4 var(--font-mono);
  font-variant-ligatures: none;
  letter-spacing: -0.025em;
}
a.addr:hover { text-decoration: underline; text-underline-offset: 3px; }
/* long names (paths) and content types clip with an ellipsis; the full
   value is in the title. Per-column widths via --clip. */
.clip {
  display: inline-block;
  max-width: var(--clip, 240px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.clip--type { --clip: 180px; }
/* hovering an address underlines its other occurrences on the page */
.addr-match {
  text-decoration: underline;
  text-decoration-color: var(--oxide);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.status { display: inline-flex; align-items: center; gap: 9px; }
.status::before { content: ""; width: 6px; height: 6px; flex: none; background: currentColor; }
.status--ready::before { background: var(--signal); }
.status--live::before { background: var(--pulse); }
.status--bad::before { background: var(--accent-signal); }
.status--pending::before { display: none; }
.status--muted { color: var(--under-ink); }
.status--muted::before { background: rgba(19, 23, 28, 0.25); }
.surface-charcoal .status--muted::before { background: rgba(255, 248, 242, 0.35); }
.committee::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 9px;
  background: var(--oxide);
  transform: translateY(-1px);
}
.copy-cell { width: 1%; text-align: right; }
.row-copy {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cmd-copy);
  cursor: pointer;
  vertical-align: middle;
}
.row-copy:hover { color: var(--cmd-ink); }
.row-copy svg { width: 18px; height: 18px; }
.row-copy .install-check-icon { display: none; }
.row-copy.is-copied { color: var(--signal); }
.row-copy.is-copied .install-copy-icon { display: none; }
.row-copy.is-copied .install-check-icon { display: block; animation: install-check-pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1); }
td .row-copy { margin: -8px 0; }

/* ---- key/value fields ---- */

.fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
  margin: 0;
  border-top: 1px solid var(--line-paper);
}
.fields--1 { grid-template-columns: minmax(0, 1fr); }
.field {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(19, 23, 28, 0.1);
  font-size: 14px;
}
.field dt {
  color: var(--under-ink);
  font: 400 12px/1.7 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.field dd { min-width: 0; margin: 0; color: rgba(19, 23, 28, 0.82); overflow-wrap: anywhere; }
.field dd .row-copy { margin: -8px 0; }

/* ---- footer ---- */

.site-footer {
  padding: 0 0 48px;
  --footer-art-h: clamp(34px, 4.85vw, 54px);
}
.site-footer .footer-logo { filter: invert(1); }
.site-footer .footer-legal { color: rgba(255, 248, 242, 0.55); }
.footer-links a { color: rgba(255, 248, 242, 0.78); }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
}
.footer-links a { text-underline-offset: 3px; }
.footer-links a:hover { text-decoration: underline; }
.footer-brand-row {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(280px, 0.9fr);
  align-items: center;
  gap: clamp(42px, 7vw, 106px);
  margin-top: 0;
}
.footer-logo-link { display: inline-block; width: fit-content; max-width: 100%; height: var(--footer-art-h); }
.footer-logo, .footer-spools { width: auto; height: 100%; }
.footer-spools { height: var(--footer-art-h); justify-self: end; }
.footer-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: clamp(28px, 3.6vw, 43px) 0 0;
  font: 11px/1 var(--font-mono);
  text-transform: uppercase;
}
.footer-legal p { margin: 0; }
/* the social line icons in paper, on the copyright row, no discs */
.footer-social { display: flex; align-items: center; gap: 18px; }
.footer-social a { display: inline-flex; width: 22px; height: 22px; color: var(--paper); opacity: 0.82; transition: opacity 160ms ease; }
.footer-social a:hover { opacity: 1; }
.footer-social svg { width: 100%; height: 100%; }

/* ---- fixed feedback chip, bottom right ---- */

.preview-feedback {
  position: fixed;
  z-index: 30;
  right: 20px;
  bottom: 20px;
  max-width: min(420px, calc(100% - 40px));
  padding: 14px 18px;
  border-radius: 8px;
  background: var(--charcoal);
  color: var(--paper);
  font: 400 13px/1.5 var(--font-sans);
  box-shadow: 0 12px 30px rgba(19, 23, 28, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- hero composition ---- */
.hero__top > .page { padding-bottom: clamp(24px, 3vw, 32px); }
.hero__stats .stats { margin-top: 0; }
.hero .eyebrow .live { color: var(--oxide); }


/* ---- search placements ---- */

/* a compact field in the header actions, outlined like the network
   switcher, the shortcut as a small pill */
.header-search-button { display: none; }
.header-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: clamp(160px, 15vw, 220px);
  height: 42px;
  padding: 0 10px 0 14px;
  border: 1px solid rgba(255, 248, 242, 0.3);
  border-radius: 8px;
  color: var(--paper);
  transition: border-color 160ms ease, width 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* the field grows in place when it takes focus; there is no overlay */
.header-search:focus-within { width: clamp(300px, 36vw, 460px); border-color: var(--paper); }
.header-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--paper);
  font: 400 14px/1 var(--font-sans);
}
.header-search__input::placeholder { color: rgba(255, 248, 242, 0.55); }
.header-search .key,
.header-button .key,
.search-overlay .key {
  flex: none;
  padding: 3px 5px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font: 400 9px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
}
.header-search:focus-within .key { display: none; }
/* the header button that opens the overlay */
.header-button .key { margin-left: 2px; }
.header-search-mobile { display: none; }

/* the prompt line. No box: a terminal prompt with the oxide block cursor
   on a hairline, so it cannot read as a second meter. */
.prompt-line {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(100%, 640px);
  height: 52px;
  margin-top: 34px;
  border-bottom: 1px solid var(--line-charcoal);
}
.prompt-line__prompt { flex: none; color: rgba(255, 248, 242, 0.5); font: 400 19px/1 var(--font-mono); }
.prompt-line__shell { position: relative; flex: 1; min-width: 0; height: 46px; }
.prompt-line__shell::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  width: 11px;
  height: 24px;
  background: var(--oxide);
  pointer-events: none;
  transform: translateY(-50%);
  animation: demo-terminal-cursor-blink 1.05s steps(1, end) infinite;
}
.prompt-line__shell.no-cursor::before,
.prompt-line__shell:focus-within::before { display: none; }
.prompt-line__input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--paper);
  caret-color: var(--paper);
  font: 19px/46px var(--font-mono);
  letter-spacing: -1px;
}
.prompt-line__key { flex: none; color: rgba(255, 248, 242, 0.45); font: 400 12px/1 var(--font-mono); letter-spacing: 0.08em; }
.prompt-line:focus-within { border-color: rgba(255, 248, 242, 0.6); }

/* the meter without its box, so the field is the only box in the head */
.demo-meter--bare { height: auto; padding: 0; border: 0; border-radius: 0; }
.demo-meter--bare + .under { margin-top: 12px; }

/* the overlay: one paper panel on a blurred charcoal scrim */
.search-overlay {
  position: fixed;
  z-index: 40;
  inset: 0;
  overflow-y: auto;
  padding: clamp(24px, 12vh, 120px) 20px 40px;
  background: rgba(27, 27, 27, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.search-overlay__panel {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 10px 10px 18px;
  border-radius: 10px;
  background: var(--paper);
  color: var(--carbon);
  box-shadow: 0 18px 50px rgba(19, 23, 28, 0.3);
}
.search-overlay .demo-form { border-color: transparent; }
.search-overlay .under { padding: 0 10px; }
.search-overlay .under--split { display: flex; }
.search-results { margin-top: 14px; padding: 0 10px; }
.search-results table { font-size: 14px; }
.search-results thead th { padding-top: 6px; }
.search-results tbody td { padding-block: 12px; }
.search-overlay__close { color: var(--under-action-ink); }

/* ---- object and track pages ---- */

.surface-charcoal .demo-result__selector { border-color: var(--line-charcoal); background: var(--charcoal-raised); }
.surface-charcoal .demo-result__menu { z-index: 30; }
/* a path as a title: smaller, breaks at slashes */
.page-title--path { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.3; }
/* hex editor view for inline tracks */
.hex-offset { color: rgba(255, 248, 242, 0.34); }
.hex-ascii { color: var(--paper); }

.eyebrow a { text-decoration: underline; text-underline-offset: 3px; }
/* the gateway URL is the hero action: the command row plus the paper button */
.gateway-row { width: min(100%, 780px); margin-top: 22px; }
.gateway-row .address-row { margin-top: 0; }
.gateway-row .demo-result__command code { font-size: 16px; }
.demo-result__command, .demo-result__selector { height: 56px; }
.demo-result__command code { font-size: 16px; }
.demo-result__selector > summary { font-size: 16px; }
.heading .under .status { margin-right: 2px; }
/* full hashes in the key-value list */
.hash { font: 500 13px/1.5 var(--font-mono); font-variant-ligatures: none; letter-spacing: -0.025em; overflow-wrap: anywhere; }
/* content preview: a charcoal terminal panel */
.content-preview {
  max-height: 380px;
  margin: 0;
  padding: 20px 24px;
  overflow: auto;
  border-radius: 10px;
  background: var(--charcoal);
  color: rgba(255, 248, 242, 0.62);
  font: 400 13px/1.7 var(--font-mono);
  font-variant-ligatures: none;
  white-space: pre;
  scrollbar-width: thin;
}
.content-preview strong { color: var(--paper); font-weight: 500; }
@media (max-width: 560px) {
  .gateway-row { grid-template-columns: minmax(0, 1fr); }
  .content-preview { max-height: 260px; font-size: 12px; }
}

/* ---- tape heading: the tape number as the title, and the cassette beside it ----
   Three areas: text (eyebrow and number), art (the cassette), row (address
   and the Solana link). Each variant places them; the cassette is never
   above the title. */

.tape-heading { display: grid; align-items: center; column-gap: clamp(24px, 4vw, 64px); }
.tape-heading__text { grid-area: text; min-width: 0; }
.tape-heading__art { grid-area: art; }
.tape-heading__row { grid-area: row; min-width: 0; }
.tape-heading__row .address-row { width: min(100%, 720px); margin-top: 22px; }
.tape-number {
  margin: 0;
  color: var(--paper);
  font: 600 clamp(64px, 9vw, 128px)/0.95 var(--font-mono);
  font-variant-ligatures: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.06em;
}
/* beside: the cassette at the right edge, the address row beside it */
.tape-heading--aside { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text art" "row art"; }
.tape-heading--aside .tape-heading__text { align-self: end; }
.tape-heading--aside .tape-heading__row { align-self: start; }
.tape-heading--aside .tape-heading__art { width: clamp(240px, 30vw, 420px); }
.tape-heading--billboard .tape-number { font-size: clamp(96px, 15vw, 208px); letter-spacing: -0.07em; }
.tape-heading--billboard .tape-heading__art { width: clamp(300px, 36vw, 500px); }
/* hug: the cassette right after the number, left aligned against it */
.tape-heading--hug { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "text art" "row row"; column-gap: clamp(28px, 4vw, 56px); }
.tape-heading--hug .tape-heading__art { width: clamp(240px, 28vw, 360px); justify-self: start; }
/* left: the cassette first */
.tape-heading--left { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "art text" "row row"; column-gap: clamp(28px, 4vw, 56px); }
.tape-heading--left .tape-heading__art { width: clamp(180px, 18vw, 220px); }
.tape-heading--left .tape-number { font-size: clamp(56px, 7vw, 96px); }
.tape-heading--left .eyebrow { margin-bottom: 12px; }
.tape-heading--hug .tape-heading__row .address-row, .tape-heading--left .tape-heading__row .address-row { margin-top: 28px; }

/* the cassette: 400 by 254, flat, coloured from the tape address */
.cassette { display: block; width: 100%; height: auto; }
.cassette text { font-family: var(--font-mono); font-variant-ligatures: none; }
.cassette .cs-letter { font-size: 18px; font-weight: 600; }
.cassette .cs-line-text { font-size: 12px; letter-spacing: -0.02em; }
.cassette .cs-number { font-size: 20px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.cassette--expired { filter: grayscale(1); opacity: 0.5; }

/* the gallery */
.hero__gallery { position: relative; z-index: 1; padding-bottom: clamp(24px, 3vw, 32px); }
.hero--gallery .hero__top > .page { padding-bottom: 0; }
.hero--gallery .hero__top .under { max-width: 720px; }
.cassette-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(20px, 3vw, 40px); margin-top: clamp(28px, 4vw, 40px); }
.cassette-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }
.cassette-card { display: block; color: inherit; text-decoration: none; }
.cassette-card .under { margin-top: 12px; }
.cassette-card strong { font-weight: 500; color: var(--paper); }
.cassette-card--paper strong { color: var(--carbon); }
.cassette-card__art { transition: transform 0.25s ease; }
a.cassette-card:hover .cassette-card__art { transform: translateY(-3px); }
a.cassette-card:hover .under { text-decoration: underline; text-underline-offset: 3px; }

/* ---- breakpoints ----
   1180 laptop: smaller hero art
   1000 tablet: a shorter header, the menu sheet, five stats over two rows
    760 small tablet: the search field shrinks, stats two across, fields one
        column, secondary columns hide, the footer stacks
    560 phone: narrower gutters, smaller stats, meter, and rows */

@media (max-width: 1180px) {
  .hero-art--home { width: 240px; opacity: 0.4; }
}
@media (max-width: 1000px) {
  .site-header { height: 68px; }
  .site-header.nav-pill { height: 58px; }
  .header-logo-link { width: 164px; }
  .header-search-mobile {
    min-height: 38px;
    margin-left: auto;
    margin-right: 2px;
    padding: 0 14px;
    font-size: 13px;
  }
  .mobile-menu { margin-left: 0; }
  .mobile-menu > summary {
    position: relative;
    z-index: 31;
    width: 42px;
    height: 42px;
    display: grid;
    place-content: center;
    color: var(--paper);
  }
  .mobile-menu > summary svg { width: 30px; height: 30px; }
  .mobile-menu .menu {
    position: fixed;
    z-index: 30;
    inset: 0;
    height: 100dvh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: clamp(68px, 12.8svh, 108px) 24px max(20vh, env(safe-area-inset-bottom));
    overflow: hidden;
    background: var(--charcoal);
    color: var(--paper);
    font: 600 clamp(16px, 3dvh, 26px)/1 var(--font-mono);
    letter-spacing: 0.6px;
    text-transform: uppercase;
  }
  .mobile-menu .menu a { padding: clamp(7px, 1.65svh, 18px) 10px; color: rgba(255, 248, 242, 0.78); }
  .mobile-menu .menu a[aria-current="page"] { color: var(--paper); }
  .mobile-menu .menu-sep { margin: clamp(5px, 1.4svh, 14px) 10px; border-top: 1px solid rgba(255, 248, 242, 0.16); }
  .menu-subnav {
    display: flex;
    flex-direction: column;
    margin: -4px 0 4px 14px;
    padding-left: 14px;
    border-left: 1px solid rgba(255, 248, 242, 0.18);
  }
  .mobile-menu .menu .menu-subnav a,
  .mobile-menu .menu .menu-subnav span {
    padding: clamp(3px, 0.9svh, 10px) 10px;
    color: rgba(255, 248, 242, 0.56);
    font-size: clamp(11px, 1.8dvh, 15px);
  }
  .mobile-menu[open] > summary { color: rgba(255, 248, 242, 0.85); }
  .menu-line { transform-box: fill-box; transform-origin: center; transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1); }
  .mobile-menu[open] .menu-line--top { transform: translateY(3px) rotate(45deg); }
  .mobile-menu[open] .menu-line--bottom { transform: translateY(-3px) rotate(-45deg); }
  .site-header.menu-open .header-logo-link { position: relative; z-index: 31; }
  .site-header.menu-open .header-logo { filter: invert(1); }
  .hero-art--home { display: none; }

  .hero__top > .page { padding-top: calc(68px + 28px); }
  .has-catchup .hero__top > .page { padding-top: calc(68px + var(--catchup-h) + 28px); }
  .hero-art--home { display: none; }
  .hero-art--spool { width: 560px; top: -260px; right: -230px; }
  .hero-art--reel { width: 560px; top: -250px; right: -250px; }
  .hero-art--fleet { display: none; }
  .stats--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .stats--5 .stat { grid-column: span 2; }
  .stats--5 .stat:nth-child(n+4) { grid-column: span 3; }
  .clip { --clip: 190px; }
  .clip--type { --clip: 150px; }
}
@media (max-width: 760px) {
  .site-header > .page { gap: 16px; }
  .header-logo-link { width: 130px; overflow: hidden; transition: width 240ms cubic-bezier(0.4, 0, 0.2, 1), opacity 160ms ease; }
  .header-logo { width: 130px; max-width: none; }
  .header-search { width: 104px; height: 38px; padding: 0 12px; }
  .header-search .key { display: none; }
  .header-search:focus-within { flex: 1 1 auto; width: auto; }
  .site-header:has(.header-search:focus-within) .header-logo-link { width: 0; opacity: 0; }
  .header-dropdown > summary { min-height: 38px; padding: 0 12px; font-size: 13px; }
  .stats, .stats--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats--3 .stat:nth-child(3):last-child { grid-column: span 2; }
  .fields { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hide-sm { display: none; }
  .prompt-line { width: 100%; }
  .footer-brand-row { grid-template-columns: 1fr; gap: 26px; margin-top: 0; }
  .footer-brand-row > .footer-logo-link { grid-row: 2; width: 100%; max-width: none; height: auto; }
  .footer-logo { width: 100%; height: auto; }
  .footer-spools { grid-row: 1; width: 100%; max-width: none; height: auto; justify-self: start; }
}
@media (max-width: 560px) {
  .page { width: min(calc(100% - 40px), 1024px); }
  .header-logo-link { width: 150px; }
  .header-search-mobile { min-height: 34px; padding: 0 11px; }
  .stats--5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats--5 .stat, .stats--5 .stat:nth-child(n+4) { grid-column: span 2; }
  .stats--5 .stat:nth-child(5) { grid-column: span 4; }
  .stat { min-height: 0; padding: 14px 16px 12px; }
  .stat__value { font-size: 22px; }
  .demo-form__submit { width: 46px; height: 46px; flex-basis: 46px; }
  .demo-meter { height: 48px; padding: 8px 12px; font-size: 22px; }
  .demo-result__command { height: 56px; padding-left: 16px; }
  .demo-result__command code { font-size: 15px; }
  .field { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
  .clip { --clip: 150px; }
  .clip--type { --clip: 120px; }
  .block__head { flex-wrap: wrap; }
  .footer-legal { flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 32px; }
  .search-overlay { padding: 12px 10px 28px; }
}

/* ---- tape heading breakpoints ----
   1000 tablet: same arrangement, the address row shrinks beside the cassette
    760 phone: a smaller cassette, under the address row or beside the number
    560: the address row wraps instead of scrolling */
@media (max-width: 1000px) {
  .tape-heading--aside .tape-heading__art { width: clamp(220px, 30vw, 280px); }
  .tape-heading--billboard .tape-heading__art { width: clamp(240px, 36vw, 320px); }
  .tape-heading--aside .tape-heading__row .address-row { height: 48px; padding-left: 14px; }
  .tape-heading--aside .tape-heading__row .address-row code { font-size: 13px; }
  .tape-heading--billboard .tape-heading__row .address-row code { font-size: 12px; }
  .tape-heading--hug .tape-heading__art { width: clamp(220px, 30vw, 300px); }
  .cassette-grid, .cassette-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .tape-number, .tape-heading--left .tape-number, .tape-heading--billboard .tape-number { font-size: clamp(56px, 16vw, 72px); letter-spacing: -0.06em; }
  /* under the address row, small */
  .tape-heading--aside, .tape-heading--m-under { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "row" "art"; }
  .tape-heading--aside .tape-heading__art, .tape-heading--m-under .tape-heading__art { width: 200px; margin-top: 24px; justify-self: start; }
  .tape-heading--aside .tape-heading__row .address-row { height: 56px; padding-left: 16px; }
  .tape-heading--aside .tape-heading__row .address-row code { font-size: 15px; }
  /* beside the number, small */
  .tape-heading--hug, .tape-heading--left { column-gap: 20px; }
  .tape-heading--hug .tape-heading__art, .tape-heading--left .tape-heading__art { width: clamp(116px, 32vw, 140px); }
  .tape-heading--m-beside { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text art" "row row"; column-gap: 20px; }
  .tape-heading--m-beside .tape-heading__text { align-self: center; }
  .tape-heading--m-beside .tape-heading__art { width: clamp(116px, 32vw, 140px); margin-top: 0; justify-self: end; }
}
@media (max-width: 560px) {
  .tape-heading .tape-heading__row .address-row { height: auto; min-height: 56px; padding: 12px 0 12px 14px; }
  .tape-heading .tape-heading__row .address-row code { font-size: 13px; line-height: 1.45; white-space: normal; overflow: visible; overflow-wrap: anywhere; -webkit-mask-image: none; mask-image: none; }
  .tape-heading--aside:not(.tape-heading--m-beside) .tape-heading__art, .tape-heading--m-under .tape-heading__art { width: 180px; }
  .cassette-grid, .cassette-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .cassette-card { max-width: 320px; }
}

/* ---- the tape number without the cassette ----
   Seven typographic ways to make the bare number read as the tape's number:
   say the word Tape in the title (one size, light, small on the baseline, or
   stacked above), put a sign before it (# or №), or set it as a serial with
   dimmed leading zeros. The heading is a plain stack: eyebrow, title,
   address row, link. */
.tape-heading--plain { display: block; }
.tape-title { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.28em; }
.tape-title__word, .tape-title__mark { font: inherit; letter-spacing: inherit; }
/* light: the word at 300 and dimmed, the number carries the weight */
.tape-title--light .tape-title__word { font-weight: 300; opacity: 0.55; }
/* small: the word at a third of the size, on the number's baseline */
.tape-title--small { column-gap: 0.16em; }
.tape-title--small .tape-title__word { font-size: 0.3em; font-weight: 500; letter-spacing: -0.02em; opacity: 0.7; }
/* stacked: the word on its own line, tight over the number */
.tape-title--stacked { flex-direction: column; align-items: flex-start; }
.tape-title--stacked .tape-title__word { font-size: 0.3em; font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin-bottom: 0.45em; opacity: 0.7; }
/* hash and numero: a sign before the number, light and dimmed so the number stays the title */
.tape-title--hash { column-gap: 0.04em; }
.tape-title--numero { column-gap: 0.14em; }
.tape-title__mark { font-weight: 300; opacity: 0.4; }
/* serial: a fixed width, the leading zeros dimmed */
.tape-title__zeros { font-weight: 300; opacity: 0.28; }

/* ---- a value the index does not have ---- */
.none { color: var(--under-ink); }

/* ---- the Get Started callout ---- */
/* z-index 3, like the hero: the transition's polygons all close 2px past the
   stage and their coincident anti-aliased edges leave a pink residue row;
   the section paints over it. */
/* the callout and the footer share one charcoal parent, so a sub-pixel seam
   between them is charcoal too, never the paper behind */
.site-end { background: var(--charcoal); }
.get-started { position: relative; z-index: 3; padding: clamp(24px, 3vw, 40px) 0 clamp(72px, 8vw, 110px); }
.get-started .title { max-width: 900px; color: var(--paper); }
.get-started .section-lede { color: rgba(255, 248, 242, 0.75); }
.action-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.surface-charcoal .button--primary { border-color: var(--paper); background: var(--paper); color: var(--charcoal); }
.surface-charcoal .button--secondary { background: transparent; }
@media (max-width: 560px) {
  .get-started .action-row .button { flex: 1 1 100%; }
}

/* ---- list pages ---- */
.hero .page-title + .under { margin-top: 14px; }
.block--empty .under { max-width: 560px; margin-top: 4px; }

/* ---- detail pages ---- */
.field dt.mono { font-size: 13px; }
.signers { font: 500 16px/1 var(--font-mono); letter-spacing: 3px; white-space: nowrap; }
.signers a { color: var(--carbon); text-decoration: none; }
.signers a.off { color: rgba(19, 23, 28, 0.28); }
.signers a:hover { color: var(--oxide); }
/* the vote's signers as the epoch meter: one cell per spool, links to the node */
.hero-meter.demo-meter.signers-meter { width: fit-content; max-width: 100%; margin-top: 24px; }
.signers-meter .demo-meter__bar { letter-spacing: 0.06em; }
.hero__stats .signers-meter + .under { margin-bottom: 4px; }
.signers-meter a { color: inherit; text-decoration: none; }
.signers-meter a:hover { color: var(--oxide); }
/* a tip beside a page title: inline after the words, the tip opening below and to the right */
.page-title .info { position: relative; top: auto; right: auto; display: inline-block; margin-left: 8px; vertical-align: top; transform: translateY(3px); font-size: 14px; line-height: 1; }
.page-title .info .tip { top: calc(100% + 10px); right: auto; left: 0; bottom: auto; }

/* ---- not in the index yet. Detail pages always open; the blocks that
   have nothing yet show shimmering rows and the page checks again every
   5 seconds until the data lands, then every 30 as usual. ---- */
.skeleton { display: grid; gap: 16px; padding: 20px 0 8px; border-top: 1px solid var(--line-paper); }
.skeleton-row {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(19, 23, 28, 0.06) 0%, rgba(19, 23, 28, 0.13) 40%, rgba(19, 23, 28, 0.06) 80%);
  background-size: 200% 100%;
  animation: skeleton-sweep 1.6s linear infinite;
}
.surface-charcoal .skeleton-row { background-image: linear-gradient(90deg, rgba(255, 248, 242, 0.08) 0%, rgba(255, 248, 242, 0.18) 40%, rgba(255, 248, 242, 0.08) 80%); }
.stat__value .skeleton-row { display: block; width: 72px; height: 18px; margin: 5px 0 6px; }
@keyframes skeleton-sweep { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton-row { animation: none; } }
.field--wide { grid-column: 1 / -1; }
.heading .address-row + .gateway-row { margin-top: 12px; }
/* previous and next on the shoulders of the stats */
.stats-shoulders { margin: 0 0 12px; }
/* the gateway row under the stats, its status line under that */
.hero__stats .gateway-row { margin-top: 24px; }
.hero__stats .gateway-row + .under { margin-top: 12px; }
/* a state inside a line of small print sits on the line's baseline */
.under .status { display: inline-flex; align-items: baseline; gap: 8px; vertical-align: baseline; }
.under .status::before { align-self: center; }
/* the address row hugs the address; the fade and scroll only kick in when the column is narrower than it */
.heading .address-row { width: fit-content; max-width: 100%; }
/* room after the last character so the command row's right-edge fade never eats it when the address fits */
.heading .address-row code { padding-right: 34px; }

/* ---- menus. Items in Geist Mono 13px on 30px rows, a one-pixel divider
   with no shadow or highlight. ---- */
.demo-result__menu button, .select__menu a {
  min-height: 30px;
  padding: 0 10px;
  font: 400 13px/1.2 var(--font-mono);
  font-variant-ligatures: none;
  letter-spacing: -0.02em;
}
.demo-result__menu, .select__menu { padding: 6px; }
.demo-result__divider, .select__menu hr {
  height: 0;
  margin: 6px 4px;
  border: 0;
  border-top: 1px solid var(--line-paper);
  background: none;
  box-shadow: none;
}