:root {
  color-scheme: dark;
  --bg: #09090b;
  --panel: #0c0c0c;
  --raised: #151819;
  --fg: #fff;
  --muted-strong: rgb(255 255 255 / 72%);
  --muted: rgb(255 255 255 / 62%);
  --quiet: rgb(255 255 255 / 50%);
  --faint: rgb(255 255 255 / 42%);
  --hairline: rgb(255 255 255 / 7%);
  --edge: rgb(255 255 255 / 14%);
  --focus: #fff;
  --font:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
}

body {
  min-width: 20rem;
}

a {
  color: var(--fg);
  text-decoration: none;
  text-underline-offset: 0.2em;
}

/* Links read as links by luminance against 62%-white body copy, as the design
   intends. The underline is kept for hover and keyboard focus. */
a:hover {
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 30%);
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

code {
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 0.3rem;
  background: rgb(255 255 255 / 9%);
  padding: 0.12rem 0.35rem;
  color: var(--fg);
  font: 0.88em var(--mono);
}

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

/* Access gate */

.gate-page {
  min-height: 100svh;
}

/* Anchored to the top, not centred. Centring made the mark's position depend on
   the height of whatever sat below it, so it jumped between the gate and the
   confirmation page. Nothing precedes the mark, so a top offset pins it. */
.gate {
  position: relative;
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1.75rem;
  padding: clamp(3.5rem, 14vh, 9rem) 1.5rem 4.5rem;
}

.gate-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  text-align: center;
}

.gate-head h1 {
  margin: 0;
  font-size: 1.625rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.gate-head p {
  max-width: 18.75rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.gate-form {
  display: flex;
  width: min(18.75rem, 84vw);
  flex-direction: column;
  gap: 0.625rem;
}

/* The same form inside a page block rather than a centred full-viewport gate.
   The width above is sized for the gate, which reads as stranded in prose. */
.gate-form.is-inline {
  width: min(24rem, 100%);
  margin-top: 1rem;
}

.gate-form.is-inline .consent {
  text-align: left;
}

.turnstile-slot:empty,
.access-status:empty {
  display: none;
}

.access-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.gate-form .solid:disabled {
  cursor: wait;
  opacity: 0.65;
}

.field {
  width: 100%;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 999px;
  outline: none;
  background: rgb(255 255 255 / 4%);
  padding: 0.8125rem 1rem;
  color: var(--fg);
  font-size: 0.875rem;
}

.field::placeholder {
  color: rgb(255 255 255 / 36%);
}

.field:focus {
  border-color: rgb(255 255 255 / 55%);
}

.solid {
  display: inline-block;
  width: fit-content;
  border: 0;
  border-radius: 999px;
  background: var(--fg);
  padding: 0.8125rem 1.125rem;
  color: #000;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 550;
  text-decoration: none;
}

.gate-form > .solid {
  width: 100%;
}

.solid:hover {
  color: #000;
  background: #dedee2;
}

.consent {
  margin: 0.375rem 0 0;
  color: var(--quiet);
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: center;
}

.consent a {
  color: var(--muted);
}

.by {
  position: absolute;
  bottom: 1.5rem;
  margin: 0;
  color: rgb(255 255 255 / 30%);
  font-size: 0.75rem;
}

.by a {
  color: var(--quiet);
}

.access-message {
  width: min(20rem, 88vw);
  margin-inline: auto;
  text-align: center;
}

.access-message > .gate-head > p {
  max-width: 20rem;
  margin: 0;
  color: var(--muted-strong);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.access-message form {
  margin: 0;
}

/* Verified setup page */

.docs {
  min-height: 100svh;
}

.bar {
  position: sticky;
  z-index: 10;
  top: 0;
  display: flex;
  max-width: 55rem;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin: 0 auto;
  border-bottom: 1px solid var(--hairline);
  background: var(--bg);
  padding: 0.875rem clamp(1.25rem, 4vw, 2.5rem);
}

.bar-left,
.brand {
  display: flex;
  align-items: center;
}

.bar-left {
  gap: 0.75rem;
}

.brand {
  gap: 0.625rem;
  font-size: 0.9375rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand img {
  width: 1.625rem;
  height: 1.625rem;
}

.by-inline {
  color: rgb(255 255 255 / 30%);
  font-size: 0.75rem;
}

.by-inline a {
  color: var(--faint);
}

.bar-right {
  display: flex;
  align-items: center;
  gap: 1.125rem;
}

.ghost {
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 999px;
  background: transparent;
  padding: 0.5625rem 0.875rem;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.75rem;
}

.ghost:hover {
  border-color: rgb(255 255 255 / 40%);
  color: var(--fg);
}

.llms {
  color: var(--muted);
  font: 0.75rem var(--mono);
  white-space: nowrap;
}

.docs main {
  max-width: 50rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.lead {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  padding: clamp(2.5rem, 7vw, 4rem) 0 0;
}

.lead h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 2.875rem);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.lead p {
  max-width: 44rem;
  margin: 0;
  color: var(--muted-strong);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.lead .small {
  color: var(--quiet);
  font-size: 0.9375rem;
}

.flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.375rem;
}

/* The hops share the leftover width so the chain reaches the same right edge as
   the heading. flex-basis stays auto, so each box keeps its content width as a
   floor and only the surplus is divided. */
.hop {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.2rem;
  border: 1px solid var(--edge);
  padding: 0.75rem 1rem;
}

.hop.is-guv {
  border-color: rgb(255 255 255 / 45%);
  background: var(--raised);
}

.hop-name {
  font-size: 0.875rem;
  font-weight: 600;
}

.hop-note {
  color: var(--faint);
  font: 0.6875rem var(--mono);
}

.api-label {
  color: var(--faint);
  font: 0.625rem var(--mono);
}

.wire {
  width: 2.125rem;
  height: 1px;
  flex: none;
  background: rgb(255 255 255 / 24%);
}

.api {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding-inline: 0.25rem;
}

.api-label {
  letter-spacing: 0.08em;
}

.api-wire {
  width: 3.25rem;
  border-top: 1px dashed rgb(255 255 255 / 30%);
}

.steps {
  margin-top: 3.5rem;
}

.step {
  display: flex;
  gap: 1.25rem;
  border-top: 1px solid var(--hairline);
  padding: 2.125rem 0;
}

.step:first-child {
  border-top: 0;
  padding-top: 0;
}

.step > .n {
  width: 1.75rem;
  flex: none;
  padding-top: 0.3125rem;
  color: var(--faint);
  font: 0.75rem var(--mono);
}

.step > .body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
}

.step h2,
.block h2 {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.step p,
.block > p {
  max-width: 44rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.step form {
  margin: 0.15rem 0;
}

.label {
  color: #7e8487;
  font: 0.6875rem var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.soon {
  display: inline-block;
  margin-left: 0.625rem;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 999px;
  padding: 0.1875rem 0.5rem;
  vertical-align: middle;
  color: var(--faint);
  font: 400 0.6875rem var(--mono);
  letter-spacing: 0.02em;
}

.agent-link {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  border: 1px solid var(--edge);
  background: var(--panel);
  padding: 1.125rem 1.25rem;
}

.agent-link p {
  margin: 0;
  color: var(--muted-strong);
  font-size: 0.875rem;
  line-height: 1.6;
}

.agent-link code {
  display: block;
  overflow-wrap: anywhere;
  border: 0;
  background: #0b0b0b;
  padding: 0.875rem 1rem;
  color: #dfe3e2;
  font-size: 0.8125rem;
  line-height: 1.55;
}

/* A phrase the reader says out loud. Exports as a markdown blockquote. */
.step blockquote {
  margin: 0;
  border-left: 1px solid rgb(255 255 255 / 28%);
  padding-left: 0.875rem;
  color: var(--muted-strong);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* Which agents or platforms a step supports. Each chip takes an optional logo
   before its text, so dropping the SVGs in needs no layout change. */
/* Both groups share one row. The column gap between groups is wider than the
   gap inside one, so "supports" and "coming soon" read as separate sets. Each
   group stays intact when the row wraps. */
.supports {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
}

.supports .group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid var(--edge);
  border-radius: 999px;
  padding: 0.25rem 0.625rem;
  color: var(--muted);
  font-size: 0.75rem;
}

.chip img {
  width: 1rem;
  height: 1rem;
}

/* Mono marks inherit currentColor as a fill, so a filter is what tints them
   here. The source SVGs are black, hence invert rather than a colour swap. */
.chip img,
.agent-logo {
  filter: grayscale(1) brightness(0) invert(1);
}

.agent-logo {
  width: 1.5rem;
  height: 1.5rem;
}

.chip.is-soon {
  color: var(--faint);
}

.agent-link form {
  margin: 0;
}

.agent-link button {
  width: fit-content;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 999px;
  background: transparent;
  padding: 0.5625rem 0.875rem;
  color: var(--fg);
  cursor: pointer;
  font-size: 0.75rem;
}

.agent-link button:hover {
  border-color: rgb(255 255 255 / 40%);
}

/* The empty state's only action stays the primary pill. */
.agent-link button.solid {
  border: 0;
  color: #000;
  font-size: 0.875rem;
  font-weight: 550;
}

.cmd {
  position: relative;
  display: flex;
  max-width: 100%;
  align-items: stretch;
  border: 1px solid var(--edge);
  background: #0b0b0b;
}

/* Commands scroll rather than wrap. A wrapped shell line reads as two
   commands, and min-width:0 is what lets the scroll happen inside the flex row
   instead of stretching it. */
.cmd pre {
  min-width: 0;
  margin: 0;
  flex: 1;
  overflow-x: auto;
  padding: 1.75rem 1.1rem 1rem;
  white-space: pre;
}

/* A label names each block, because one of them is a file you write rather than
   commands you paste. The label lives in CSS content so the copy button never
   picks it up. */
.cmd::before {
  content: attr(data-label);
  /* Absolute, not a flex item. As a flex item it stole horizontal space and
     pushed the code sideways. */
  position: absolute;
  top: 0.5rem;
  left: 0.75rem;
  color: var(--faint);
  font: 0.625rem var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* A file block reads as a document: named tab, and no shell prompt implied. */
.cmd:not([data-label="terminal"]):not(.is-output) {
  border-color: rgb(255 255 255 / 24%);
}

.cmd:not([data-label="terminal"]):not(.is-output)::before {
  color: var(--muted);
}

.cmd .copy {
  flex: none;
  border: 0;
  border-left: 1px solid var(--edge);
  background: transparent;
  padding: 0 1.125rem;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.75rem;
}

.cmd .copy:hover {
  color: var(--fg);
}

.cmd pre code {
  border: 0;
  background: transparent;
  padding: 0;
  color: #dfe3e2;
  font: 0.875rem/1.7 var(--mono);
}

.aside {
  border-left: 1px solid rgb(255 255 255 / 28%);
  padding: 0.125rem 0 0.125rem 0.875rem;
}

.aside .label {
  display: block;
  margin-bottom: 0.375rem;
}

.aside p {
  margin: 0;
  color: var(--muted-strong);
  font-size: 0.875rem;
  line-height: 1.6;
}

.did {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0;
  padding-left: 1.25rem;
  color: var(--muted-strong);
  font-size: 0.875rem;
  line-height: 1.55;
}

.did li::marker {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.75rem;
}

.block {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  margin-top: 3.25rem;
  border-top: 1px solid var(--hairline);
  padding-top: 2.5rem;
}

.block .fine {
  color: var(--quiet);
  font-size: 0.875rem;
}

.block h3 {
  margin: 1.2rem 0 0;
  font-size: 1.05rem;
  font-weight: 650;
}

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

.agent {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.75rem;
  border: 1px solid rgb(255 255 255 / 12%);
  background: var(--panel);
  padding: 1.25rem;
}

.agent-mark,
.agent .status {
  color: var(--faint);
  font: 0.75rem var(--mono);
}

.agent .status.soon {
  margin-left: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.agent strong {
  font-size: 0.9375rem;
  font-weight: 600;
}

.agent p {
  margin: 0;
  color: var(--quiet);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.rows {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  gap: 1.25rem;
  border-top: 1px solid var(--hairline);
  padding: 0.8125rem 0;
}

.row:last-child {
  border-bottom: 1px solid var(--hairline);
}

.row .k {
  width: 13.125rem;
  flex: none;
  color: var(--fg);
  font: 0.8125rem var(--mono);
}

.row .v {
  flex: 1;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.55;
}

.warn {
  display: flex;
  border: 1px solid rgb(255 255 255 / 30%);
  background: #0e1013;
}

.warn-edge {
  width: 0.5rem;
  flex: none;
  background: repeating-linear-gradient(
    135deg,
    rgb(255 255 255 / 50%) 0 2px,
    transparent 2px 6px
  );
}

.warn-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.125rem 1.25rem;
}

.warn-title {
  color: var(--fg);
  font: 0.75rem var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.warn-body p {
  margin: 0;
  color: var(--muted-strong);
  font-size: 0.875rem;
  line-height: 1.6;
}

.docs footer {
  display: flex;
  max-width: 50rem;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  margin: 4rem auto 0;
  border-top: 1px solid var(--hairline);
  padding: 1.5rem clamp(1.25rem, 4vw, 2.5rem) 1.875rem;
  color: var(--faint);
  font: 0.75rem var(--mono);
}

.docs footer a {
  color: var(--muted);
}

@media (max-width: 45rem) {
  .by-inline {
    display: none;
  }

  /* The bar never wrapped, so at the stylesheet's own 20rem floor its children
     overflowed and panned the whole page sideways. */
  .bar {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  .bar-right {
    gap: 0.75rem;
  }

  .flow {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    width: 100%;
  }

  /* Stacked, so growing would stretch the boxes vertically instead. */
  .hop {
    width: 100%;
    flex: none;
  }

  .wire {
    width: 1px;
    height: 1.4rem;
    margin-left: 1.6rem;
  }

  .api {
    flex-direction: row;
    gap: 0.5rem;
    padding: 0.35rem 0 0.35rem 1.6rem;
  }

  .api-wire {
    width: 0;
    height: 1.4rem;
    border-top: 0;
    border-left: 1px dashed #66666e;
  }

  .agents {
    grid-template-columns: 1fr;
  }

  .row {
    flex-direction: column;
    gap: 0.3rem;
  }

  .row .k {
    width: auto;
  }

  .docs footer {
    flex-direction: column;
    gap: 0.5rem;
  }
}

@media (max-width: 25rem) {
  .gate {
    padding-inline: 1rem;
  }

  .bar {
    padding-inline: 1rem;
  }

  .step {
    gap: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Docs filter. .docs carries no data-os or data-agent until the reader picks
   one, so with JS off or before any choice every variant is visible. */
.picker {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2rem;
}

.picker-hint {
  margin: 0;
  color: var(--quiet);
  font-size: 0.8125rem;
}

/* .chip was written for a span. As a button it picks up the user agent's grey
   background, which made unselected chips look filled and selected ones empty. */
.picker .chip {
  border-style: dashed;
  background: transparent;
  cursor: pointer;
}

.picker .chip[aria-pressed="true"] {
  border-style: solid;
}

.picker .chip:hover {
  border-color: rgb(255 255 255 / 40%);
  color: var(--fg);
}

.picker .chip[aria-pressed="true"] {
  border-color: rgb(255 255 255 / 45%);
  background: var(--raised);
  color: var(--fg);
}

/* Hide only the variants that do not match. One rule set, so there is no
   specificity race between a hide and a show. */
.docs[data-os="brew"] [data-when-os]:not([data-when-os="brew"]),
.docs[data-os="archive"] [data-when-os]:not([data-when-os="archive"]),
.docs[data-agent="pi"] [data-when-agent]:not([data-when-agent="pi"]),
.docs[data-agent="claude"] [data-when-agent]:not([data-when-agent="claude"]),
.docs[data-agent="custom"] [data-when-agent]:not([data-when-agent="custom"]) {
  display: none;
}