/* Aurora Glass — landing page.
   The aurora is the only loud thing here. Everything else stays quiet. */

:root {
  --bg:        #f1f3f6;
  --bg-alt:    #e9ecf1;
  --ink:       #0f1318;
  --muted:     #5b6472;
  --line:      rgba(15, 19, 24, 0.11);
  --line-soft: rgba(15, 19, 24, 0.07);
  --btn-bg:    #0f1318;
  --btn-ink:   #f6f8fb;
  --focus:     #1f6bff;

  /* the mock display stays dark in both themes — it is a product photo */
  --screen:    #04060b;
  --screen-2:  #0a0e16;

  --fallback-aurora: linear-gradient(104deg, #0DFF8C 2%, #26F2CC 32%, #598CFF 64%, #D94DF2 96%);

  --shell: 1080px;
  --sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #07090d;
    --bg-alt:    #0b0f15;
    --ink:       #e9edf3;
    --muted:     #8e97a6;
    --line:      rgba(255, 255, 255, 0.13);
    --line-soft: rgba(255, 255, 255, 0.07);
    --btn-bg:    #eef1f6;
    --btn-ink:   #0a0e13;
    --focus:     #6fa8ff;
  }
}

* { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: 'ss01';
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 50;
  background: var(--btn-bg);
  color: var(--btn-ink);
  padding: 0.6rem 1rem;
  border-radius: 8px;
  text-decoration: none;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ── type ─────────────────────────────────────────────────────────────── */

.display {
  margin: 0;
  font-size: clamp(2.5rem, 6.4vw, 4.6rem);
  font-weight: 500;
  letter-spacing: -0.036em;
  line-height: 0.99;
}

.h2 {
  margin: 0 0 1.1rem;
  font-size: clamp(1.7rem, 3.5vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.1;
  max-width: 24ch;
}

.h2-center { max-width: none; text-align: center; }

/* Left-aligned like the text around it. Only the hero centres it
   (.hero-live .lede); centring it here pushed every docs lede and the
   report page's into a grey block that started 120px in from its heading. */
.lede {
  margin: 1.5rem 0 0;
  max-width: 48ch;
  font-size: clamp(1.08rem, 1.7vw, 1.3rem);
  line-height: 1.52;
  color: var(--muted);
}

.prose {
  margin: 0 0 2.6rem;
  max-width: 62ch;
  color: var(--muted);
}

.prose-tail { margin: 3rem 0 0; }

.statement {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(1.45rem, 3.2vw, 2.1rem);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.32;
}

.fineprint {
  margin: 1.4rem 0 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 56ch;
}

.fineprint-center { margin-inline: auto; text-align: center; }

.link {
  color: var(--ink);
  text-decoration-color: var(--line);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.link:hover { text-decoration-color: currentColor; }

/* A button that reads as a link in running text. */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.link-quiet {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 0.5rem 0;
}
.link-quiet:hover { color: var(--ink); }

/* ── nav ──────────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}

/* The live aurora strip behind the nav, plus the glass that sits over it so
   the links stay readable. Both fade in together once the hero is gone. */
.nav-aurora,
.nav-glass {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.nav-glass {
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: saturate(150%) blur(16px);
}

.nav.is-live .nav-aurora { opacity: 1; }
.nav.is-live .nav-glass  { opacity: 1; }

.nav-inner {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .nav-aurora, .nav-glass { transition: none; }
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 58px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.wordmark-glyph { width: 20px; height: 20px; flex: none; }

.nav-links {
  display: flex;
  gap: 1.5rem;
  margin-left: auto;
  font-size: 0.925rem;
}

.nav-links a {
  color: var(--muted);
  text-decoration: none;
}
.nav-links a:hover { color: var(--ink); }

/* ── buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--btn-bg);
  color: var(--btn-ink);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.82rem 1.6rem;
  font: inherit;
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: -0.008em;
  text-decoration: none;
  transition: opacity 0.16s ease;
}
.btn:hover { opacity: 0.84; }

.btn-small { padding: 0.46rem 1.05rem; font-size: 0.9rem; flex: none; }
.btn-wide  { width: 100%; margin-top: auto; }
.btn-big   { padding: 1rem 2.2rem; font-size: 1.05rem; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { opacity: 1; border-color: var(--ink); }

/* ── hero ─────────────────────────────────────────────────────────────── */

.hero { padding: clamp(2.2rem, 5vw, 4rem) 0 clamp(4rem, 8vw, 7rem); }

.device {
  width: min(100% - 32px, 1180px);
  margin: 0 auto clamp(2.4rem, 5vw, 4rem);
}

.device-screen {
  /* Anchor the aurora to the mock menu bar's own height, so the hero shows
     what the app actually does by default: it lights the bar, and spills a
     little glow onto the desktop. Filling half the screen with it oversold
     the product. */
  --mb-h: 34px;
  position: relative;
  aspect-ratio: 1180 / 392;
  min-height: 210px;
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(118% 135% at 50% 0%, var(--screen-2) 0%, var(--screen) 66%);
  box-shadow: 0 28px 70px -40px rgba(4, 7, 14, 0.75);
}

/* the aurora dissolves downward inside the screen, the way the real spill does */
#aurora-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 var(--mb-h),
    rgba(0, 0, 0, 0.40) calc(var(--mb-h) * 1.95),
    transparent calc(var(--mb-h) * 3.5));
  mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 var(--mb-h),
    rgba(0, 0, 0, 0.40) calc(var(--mb-h) * 1.95),
    transparent calc(var(--mb-h) * 3.5));
}

/* only shown when WebGL is unavailable */
.device-fallback {
  position: absolute;
  inset: 0;
  display: none;
  background: var(--fallback-aurora);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 var(--mb-h),
    rgba(0,0,0,.40) calc(var(--mb-h) * 1.95), transparent calc(var(--mb-h) * 3.5));
          mask-image: linear-gradient(to bottom, #000 0, #000 var(--mb-h),
    rgba(0,0,0,.40) calc(var(--mb-h) * 1.95), transparent calc(var(--mb-h) * 3.5));
  filter: blur(14px) saturate(130%);
  opacity: 0.85;
}

.is-static .device-fallback { display: block; }
.is-static #aurora-canvas { display: none; }

/* the mock menu bar */
.menubar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 34px;
  display: flex;
  align-items: stretch;
  color: rgba(255, 255, 255, 0.92);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.mb-side {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 1;
  min-width: 0;
  padding-inline: 16px;
}

.mb-right { justify-content: flex-end; gap: 13px; }

.mb-item { white-space: nowrap; }
.mb-bold { font-weight: 600; }
.mb-clock { font-variant-numeric: tabular-nums; }

.mb-apple { width: 13px; height: 15px; fill: currentColor; flex: none; }
.mb-icon  { height: 13px; width: auto; fill: currentColor; flex: none; opacity: 0.95; }

/* the notch: a real cut-out, which is how the app's "Mask out" mode behaves */
.notch {
  flex: none;
  width: 168px;
  height: 100%;
  background: #000;
  border-radius: 0 0 11px 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notch-cam {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #141922;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.hero-copy { text-align: center; }

.hero-copy .fineprint,
.hero-copy .hint { margin-inline: auto; max-width: 52ch; }

.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  margin-top: 2.1rem;
}

.hint {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

/* It invites the pointer into a live bar, so it goes wherever there is no
   pointer, no live bar (no WebGPU) or no motion. */
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .hint { display: none; }
}
.no-webgpu .hint { display: none; }

/* A phone or tablet cannot open a DMG: there the download links give way
   to a line that says what the app is for. */
.touch-only { display: none; }
@media (hover: none) and (pointer: coarse) {
  .mac-only { display: none; }
  .touch-only { display: block; }
  .cta .touch-only { display: inline-block; }
}
/* No display of its own here: .touch-only decides whether it shows. */
/* Plain text, not a pill: it stands where a button was and must not look
   like one that does nothing. */
.for-mac {
  margin: 0;
  font-weight: 500;
}
.for-mac-big { margin-top: 0.9rem; font-size: 1.15rem; }


/* ── bands ────────────────────────────────────────────────────────────── */

.band {
  padding-block: clamp(4.5rem, 9vw, 8rem);
  border-top: 1px solid var(--line-soft);
  /* Has to match the sticky nav, or a section you jumped to sits underneath
     it. The nav wraps to two rows on small screens, so this follows. */
  scroll-margin-top: var(--nav-h, 58px);
}

.band-alt { background: var(--bg-alt); }

.band-statement { padding-block: clamp(4rem, 8vw, 7rem); }

.band-close { text-align: center; }
.band-close .btn-big { margin-top: 0.9rem; }

/* ── pipeline (a genuine sequence, so it is numbered) ─────────────────── */

.pipeline {
  display: grid;
  /* 200px, not 240: there are four stages, and at the page's content width a
     240px minimum fits only three, orphaning the fourth on a second row. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  /* A real gutter, and the same space on both sides of every column.
     Previously the columns butted together with gap:0 and each had
     padding-right but padding-left:0, so the text pressed against the rule on
     its left while sitting well clear of the one on its right. */
  column-gap: clamp(1.75rem, 4vw, 3.25rem);
  row-gap: 2.75rem;
  margin: 0;
  padding: 2.25rem 0 0;
  list-style: none;
  counter-reset: stage;
  border-top: 1px solid var(--line);
}

.stage {
  counter-increment: stage;
  padding: 0;
  /* No vertical rules. With auto-fit the columns wrap, and a :last-child rule
     cannot know which item ends a row — so the dividers left a stray edge at
     some widths. The numbering already gives the sequence its structure. */
}

.stage-art {
  width: 78px;
  height: 52px;
  display: block;
  color: var(--ink);
  fill: currentColor;
  opacity: 0.92;
  margin-bottom: 1.1rem;
}

.stage-name {
  margin: 0 0 0.45rem;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}

.stage-name::before {
  content: counter(stage) '. ';
  color: var(--muted);
  font-weight: 400;
}

.stage-text {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.58;
  color: var(--muted);
}

.stage-text em { font-style: italic; color: var(--ink); }

@media (max-width: 640px) {
  .pipeline { row-gap: 2.25rem; }
}

/* ── palette specimen sheet ───────────────────────────────────────────── */

.sheet-wrap { margin-bottom: clamp(3rem, 6vw, 5rem); }

.sheet {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  overflow: hidden;
}

.swatch {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0.85rem 0.9rem 0.95rem;
  background: var(--bg-alt);
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: background 0.14s ease, color 0.14s ease;
}

.swatch:hover { background: var(--bg); color: var(--ink); }

.swatch[aria-checked='true'] {
  background: var(--bg);
  color: var(--ink);
  font-weight: 600;
}

.swatch-chip {
  display: block;
  height: 30px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
  transition: transform 0.18s ease;
}

.swatch[aria-checked='true'] .swatch-chip { transform: scaleY(1.22); }

.sheet-now {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.sheet-now span { color: var(--ink); font-weight: 600; }

/* ── spec list ────────────────────────────────────────────────────────── */

.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  column-gap: clamp(2rem, 4vw, 3.5rem);
  row-gap: clamp(2.2rem, 4vw, 3rem);
}

.spec-name {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.spec-text {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--muted);
}

/* The app's main promise leads the grid on a row of its own. */
.spec-lead { grid-column: 1 / -1; }
.spec-lead .spec-name { font-size: 1.15rem; }
.spec-lead .spec-text { max-width: 62ch; font-size: 1rem; }

/* ── pricing ──────────────────────────────────────────────────────────── */

.tiers {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(2.75rem, 7vw, 6rem);
  max-width: 62rem;
  margin-inline: auto;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* The divider lives in the middle of the gutter so both columns get the same
   breathing room, instead of one being pushed up against the rule. */
.tiers::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--line);
}

.tiers-single {
  grid-template-columns: minmax(0, 32rem);
  justify-content: center;
  max-width: 32rem;
}

.tiers-single::before { display: none; }

.tier {
  display: flex;
  flex-direction: column;
  padding: 3rem 0 3.1rem;
}

.tier-pro {
  padding-left: 0;
}

.tier-name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.tier-price {
  margin: 0.5rem 0 1.6rem;
  font-size: clamp(2.1rem, 4.4vw, 2.9rem);
  font-weight: 500;
  letter-spacing: -0.038em;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.tier-unit {
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}

.tier-list {
  margin: 0 0 2.2rem;
  padding: 0;
  list-style: none;
  font-size: 0.93rem;
  color: var(--muted);
}

.tier-list li {
  padding: 0.58rem 0 0.58rem 1.45rem;
  position: relative;
  line-height: 1.5;
}

.tier-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.38;
}

.tier-soon { opacity: 0.72; }

.tag {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.08rem 0.42rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  vertical-align: 1px;
}

@media (max-width: 680px) {
  .tiers { grid-template-columns: 1fr; column-gap: 0; }
  .tiers::before { display: none; }
  .tier { padding-right: 0; }
  .tier-pro { border-top: 1px solid var(--line); }
}

/* ── terminal ─────────────────────────────────────────────────────────── */

.term {
  border-radius: 13px;
  overflow: hidden;
  background: #06080d;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 18px 50px -28px rgba(4, 7, 14, 0.7);
}

.term-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0.65rem 0.95rem;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.term-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.17);
}

.term-title {
  margin-left: 0.5rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.38);
}

.term-body {
  margin: 0;
  padding: 1.35rem 1.4rem 1.5rem;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.83rem;
  line-height: 1.95;
  color: #cfd8e6;
  tab-size: 2;
  /* without this, "--flag" renders as an em dash and reads as prose */
  font-variant-ligatures: none;
  font-feature-settings: 'liga' 0, 'calt' 0;
}

.c-c { color: #5d6b80; }
.c-p { color: #4dd6a0; }
.c-s { color: #ffc46b; }
.c-o { color: #8fb4ff; }
.c-k { color: #7fa6ff; }
.c-n { color: #e5b4ff; }
.c-h { color: #4dd6a0; }

/* ── scene language ───────────────────────────────────────────────────── */

.code {
  font-family: var(--mono);
  font-size: 0.86em;
  font-variant-ligatures: none;
  background: var(--line-soft);
  border-radius: 4px;
  padding: 0.1em 0.34em;
  white-space: nowrap;
}
/* On a phone one in running text may break, or a long one pushes the whole
   page sideways: a brew command in the docs did, by 55px at 390. Table cells
   keep theirs whole; they have the room. */
@media (max-width: 640px) {
  p .code, li .code { white-space: normal; overflow-wrap: anywhere; }
}

.code-panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #06080d;
}

.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1.1rem;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-family: var(--mono);
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.42);
  font-variant-ligatures: none;
}

.code-body {
  margin: 0;
  padding: 1.35rem 1.4rem 1.5rem;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.83rem;
  line-height: 1.95;
  color: #cfd8e6;
  font-variant-ligatures: none;
  font-feature-settings: 'liga' 0, 'calt' 0;
}

.inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  column-gap: clamp(1.6rem, 3vw, 2.8rem);
  row-gap: 2.2rem;
  margin-top: clamp(2.6rem, 5vw, 3.6rem);
}

.input-name {
  margin: 0 0 0.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}

.input-vals {
  margin: 0 0 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  line-height: 1.9;
}

.input-vals .code { background: var(--line); color: var(--ink); }

.input-text {
  margin: 0;
  font-size: 0.89rem;
  line-height: 1.55;
  color: var(--muted);
}

/* ── what a machine sends to its fleet ────────────────────────────────────
   A ledger, not a feature list: the first row is the one thing a machine
   always sends and the rest are off until switched on, so the first row is
   marked and the others are deliberately quieter. */

.sends {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
  gap: 0;
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.send {
  display: grid;
  gap: 0.15rem;
  padding: 0.85rem 1.4rem 0.9rem 0;
  border-bottom: 1px solid var(--line-soft);
}

.send-name {
  font-size: 0.93rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--muted);
}

.send-what {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--muted);
  opacity: 0.8;
}

/* The one that is always on reads at full strength; the switchable ones are
   dimmed, which is the state they arrive in. */
.send-always .send-name { color: var(--ink); }
.send-always .send-what { opacity: 1; }

.send-always .send-name::after {
  content: "always on";
  margin-left: 0.5rem;
  padding: 0.05rem 0.42rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
  vertical-align: 1px;
  white-space: nowrap;
}

/* ── sidepulse bridge ─────────────────────────────────────────────────── */

.bridge {
  margin: 2.8rem 0 0;
  padding: 2rem clamp(1.2rem, 3vw, 2.4rem) 1.6rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-alt);
}

.bridge-strip {
  height: 26px;
  border-radius: 6px;
  background: var(--fallback-aurora);
  filter: saturate(118%) blur(0.4px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
}

.bridge-leds {
  display: flex;
  justify-content: space-between;
  margin-top: 1.9rem;
  padding-inline: clamp(8px, 3vw, 34px);
}

.led {
  --led: #0DFF8C;
  width: 15px;
  height: 15px;
  flex: none;
  border-radius: 50%;
  background: var(--led);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.2),
    0 0 9px -1px var(--led),
    0 0 22px 1px color-mix(in srgb, var(--led) 55%, transparent);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.bridge-cap {
  margin: 1.5rem 0 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 52ch;
}

/* ── footer ───────────────────────────────────────────────────────────── */

.foot {
  border-top: 1px solid var(--line);
  padding-block: 2.4rem 3rem;
}

.foot-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.foot-mark {
  margin: 0;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.015em;
}

.foot-links {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
  font-size: 0.875rem;
}

.foot-links a {
  color: var(--muted);
  text-decoration: none;
}
.foot-links a:hover { color: var(--ink); }

.foot-id { display: grid; gap: 0.3rem; }
.foot-maker { margin: 0; font-size: 0.8rem; color: var(--muted); }
.foot-also { flex: 1 0 100%; margin: 0.4rem 0 0; font-size: 0.8rem; color: var(--muted); }

/* ── small screens ────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  /* The section links used to be hidden outright below this width, which
     left a page nine screens tall with no way to navigate it on a phone —
     exactly where wayfinding matters most. They scroll sideways instead:
     the row is edge-to-edge, so it is obvious there is more to the right,
     and the Download button keeps its place. */
  .nav-links {
    order: 3;
    flex: 1 0 100%;
    gap: 1.15rem;
    margin: 0 calc(24px * -1);
    padding: 0 24px 0.1rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    font-size: 0.82rem;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { white-space: nowrap; }
  /* height is fixed at 58px above; the wrapped second row needs it to grow. */
  .nav-inner { flex-wrap: wrap; row-gap: 0.5rem; gap: 1rem; height: auto; min-height: 58px; padding-block: 0.5rem; }
  :root { --nav-h: 100px; }  /* measured, not guessed: the wrapped nav is 100px */
  .btn-small { margin-left: auto; }
  .notch { width: 108px; }
  .menubar { height: 28px; font-size: 11px; }
  .mb-side { gap: 11px; padding-inline: 11px; }
  .mb-hide-sm { display: none; }
  .device-screen { aspect-ratio: 800 / 430; border-radius: 15px; }
  .sheet { grid-template-columns: repeat(2, 1fr); }
  .bridge-leds { padding-inline: 2px; }
  .led { width: 12px; height: 12px; }
  .term-body,
  .code-body { font-size: 0.74rem; line-height: 1.85; }
}

@media (max-width: 420px) {
  body { font-size: 16px; }
  .shell { padding-inline: 20px; }
  .notch { width: 84px; }
  .mb-item { font-size: 10.5px; }
}


/* ── screen recording ─────────────────────────────────────────────────── */

.capture {
  margin: 2rem 0 0;
  padding: 0;
}

.capture-video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  /* The strip is 2048x52, so it renders as a thin ribbon. A soft surround
     stops it reading as a stray band of colour on the page. */
  box-shadow:
    0 0 0 1px var(--line),
    0 18px 50px -30px rgba(4, 7, 14, 0.9);
  background: #000;
}

.capture-caption {
  margin-top: 0.85rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.prose-small {
  font-size: 0.86rem;
  color: var(--muted);
}

/* ── homebrew install, beside the download ───────────────────────────── */

.brew {
  margin: 2.25rem auto 0;
  max-width: 30rem;
  text-align: left;
}

.brew-label {
  margin: 0 0 0.6rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
}

.code-block-tight pre { padding: 0.85rem 1rem; }

.brew-note {
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}

/* ── copy button, on the dark code panels ─────────────────────────────── */

/* The panel is dark in both themes — it is a terminal, not page furniture —
   so this is styled against the panel rather than against the theme. */
.code-copy {
  flex: none;
  margin: -0.25rem -0.4rem -0.25rem 0;
  padding: 0.28rem 0.62rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.62);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-variant-ligatures: none;
  line-height: 1.4;
  cursor: pointer;
  transition: color 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}

.code-copy:hover {
  background: rgba(255, 255, 255, 0.11);
  color: rgba(255, 255, 255, 0.92);
}

.code-copy:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.code-copy[data-done] {
  color: #4dd6a0;
  border-color: rgba(77, 214, 160, 0.45);
  background: rgba(77, 214, 160, 0.1);
}

/* ── help ─────────────────────────────────────────────────────────────── */

.faq {
  max-width: 70ch;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 48px;   /* a linked question lands below the bar */
}

.faq-q {
  position: relative;
  padding: 1.1rem 2.4rem 1.1rem 0;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.014em;
  cursor: pointer;
  list-style: none;
}

.faq-q::-webkit-details-marker { display: none; }

/* A hairline cross that becomes a minus — no icon font, no SVG. */
.faq-q::after,
.faq-q::before {
  content: '';
  position: absolute;
  right: 0.35rem;
  top: 50%;
  width: 0.72rem;
  height: 1px;
  background: var(--muted);
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.faq-q::before { transform: translateY(-50%) rotate(90deg); }
.faq-q::after  { transform: translateY(-50%); }

.faq-item[open] .faq-q::before { transform: translateY(-50%) rotate(0deg); opacity: 0; }

.faq-q:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 5px;
}

.faq-a {
  margin: 0 0 1.15rem;
  max-width: 62ch;
  font-size: 0.93rem;
  line-height: 1.62;
  color: var(--muted);
}

.faq-a strong { color: var(--ink); font-weight: 600; }

.faq-a-tight { margin-top: 1rem; }

.faq-list {
  margin: 0 0 1.2rem;
  padding-left: 1.15rem;
  max-width: 62ch;
  font-size: 0.93rem;
  line-height: 1.62;
  color: var(--muted);
}

.faq-list li { margin-bottom: 0.55rem; }
.faq-list strong { color: var(--ink); font-weight: 600; }

.faq .code-panel { margin: 0 0 0.4rem; }

.foot-version {
  margin-left: 0.5rem;
  font-size: 0.78rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
   The halfway rule, and the label that says whose product something is.

   The page answers two different questions for two different readers: "what
   is this and do I want it", then "how does it work and what can I script".
   It used to interleave them — physics before features, pricing in the
   middle, a separate product's hardware between two developer sections — and
   the result read as rambling even though every individual part was fine.
   These two small styles are what let the page say where the break is.
   --------------------------------------------------------------------------- */

.rule {
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
  text-align: center;
}

.rule-label {
  /* inline-block, so the hairlines below can be positioned from the edges of
     the TEXT. As a block it filled the shell and they were drawn off-screen. */
  display: inline-block;
  position: relative;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* A hairline either side, drawn from the label outwards so it never collides
   with the text at any width. */
.rule-label::before,
.rule-label::after {
  content: "";
  position: absolute;
  top: 50%;
  width: min(18vw, 9rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.rule-label::before { right: calc(100% + 1.25rem); }
.rule-label::after  { left:  calc(100% + 1.25rem); }

@media (max-width: 640px) {
  .rule-label { font-size: 0.74rem; }
  .rule-label::before,
  .rule-label::after { display: none; }
}

.eyebrow {
  margin: 0 0 0.6rem;
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}


/* ── which section you are in ──────────────────────────────────────────────
   The page is nine screens tall and the links all look identical, so until
   now the nav could tell you where you could go but not where you were.
   Set by a scroll observer in aurora.js; it degrades to plain links without
   JavaScript, which is the right failure. */

.nav-links a {
  position: relative;
  padding-block: 0.15rem;
  transition: color 0.18s ease;
}

.nav-links a[aria-current="true"] { color: var(--ink); }

.nav-links a[aria-current="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.1rem;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  .nav-links a { transition: none; }
}

/* A sub-heading inside a band, for a section that has two distinct halves —
   the aurora command in general, and wiring it into an agent in particular. */
.h3-sub {
  margin: 2.75rem 0 0.75rem;
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}


/* ═══ The menu bar header ═══════════════════════════════════════════════════
   Every page's header is a Mac menu bar (site/_shared/header.html). On the
   home page home.js runs the app's own renderer behind it, with the look's
   tails hanging down into the hero; elsewhere it shows the look's picture.

   Stacking, bottom to top: the live canvas, sRGB-encoded as the app's
   drawable is; the glass, which lifts the canvas's bar rows a little the way
   the menu bar's material does (x1.2, the figure fitted in editor.html); the
   still picture, made the same way by ./thumbs.sh, for a bar with no live
   renderer and for the moment a new look warms up; and the links. The picture
   sits above the glass so it is never brightened twice.

   The bar starts empty. Once its light is ready — the renderer's first
   warmed-up frame, or the picture loaded where nothing runs — .is-lit fills
   it in from the left with a soft leading edge, like a loading bar, rather
   than showing a picture and swapping the live bar in over it. */

.mbar {
  --mbar-h: 36px;
  /* The live bar can be wider than a phone (home.js MIN_BAR) and is centred;
     clip it sideways without making a scroll box, so the tails still hang. */
  overflow-x: clip;
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--mbar-h);
  background: #05070b;
  color: rgba(255, 255, 255, 0.94);
}

/* --fill runs 0% to 100% as the bar fills in. It is registered so that it
   can be transitioned; a browser without @property simply shows the bar. */
@property --fill { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
.mbar {
  --fill: 0%;
  /* The edge is 40% of the bar wide and goes from beyond the left end to
     beyond the right, so nothing is lit at 0% and nothing is shaded at 100%. */
  --reveal: linear-gradient(to right, #000 calc(var(--fill) * 1.4 - 40%), transparent calc(var(--fill) * 1.4));
  transition: --fill 2.4s cubic-bezier(0.45, 0, 0.15, 1);
}
.mbar.is-lit { --fill: 100%; }
@media (prefers-reduced-motion: reduce) {
  .mbar { transition: none; }
  .mbar-canvas, .mbar-still { opacity: 0; }
  .mbar.is-lit .mbar-canvas { opacity: 1; }
}

.mbar-canvas,
.mbar-still {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  transition: opacity 1.2s ease, clip-path 0.45s ease;
  clip-path: inset(0 0 0 0);
  -webkit-mask-image: var(--reveal);
  mask-image: var(--reveal);
}

.mbar-canvas { display: block; }

/* The look's still (media/bars, by ./thumbs.sh): the site's own renderer at
   this header's geometry, 1440 x 186 pt, so it covers the bar and its tails
   without a seam. Shown only once the bar is lit and while the live bar is
   not drawing: always where there is no renderer, and for the few frames a
   newly chosen look takes to warm up. */
.mbar-still {
  height: calc(var(--mbar-h) + 150px);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  z-index: 2;
  opacity: 0;
}
.mbar.is-lit:not(.is-live) .mbar-still { opacity: 1; }

.mbar-glass {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--mbar-h);
  z-index: 1;
  pointer-events: none;
}

.mbar.is-live .mbar-glass { backdrop-filter: brightness(1.2); -webkit-backdrop-filter: brightness(1.2); }

/* Once the top of the page has gone, the bar keeps its light and stops
   spilling it over the text. */
.mbar.is-docked .mbar-canvas,
.mbar.is-docked .mbar-still { clip-path: inset(0 0 calc(100% - var(--mbar-h)) 0); }

/* On the home page the tails do not go away as a block. home.js turns their
   light down as the page scrolls — so the faint wisps go first and the bright
   ones linger as streaks of their own — and this soft edge draws up behind
   them, laid over the fill. --dissolve runs 0 to 1. */
.home .mbar {
  --dissolve: 0;
  --tails: linear-gradient(to bottom, #000 0,
    #000 calc(var(--mbar-h) + (1 - var(--dissolve)) * 110px),
    transparent calc(var(--mbar-h) + (1 - var(--dissolve)) * 150px + 1px));
}
.home .mbar-canvas,
.home .mbar-still {
  clip-path: none;
  -webkit-mask-image: var(--reveal), var(--tails);
  -webkit-mask-composite: source-in;
  mask-image: var(--reveal), var(--tails);
  mask-composite: intersect;
}

.mbar-inner {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0 0.9rem;
  font: 500 13.5px/1 -apple-system, BlinkMacSystemFont, "Helvetica Neue", var(--sans);
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
}

.mbar-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: inherit;
  text-decoration: none;
}
.mbar-mark svg { width: 17px; height: 17px; flex: none; }
.mbar-mark b { font-weight: 700; }

.mbar-links {
  display: flex;
  gap: 1.15rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.mbar-links::-webkit-scrollbar { display: none; }

.mbar-links a,
.mbar-get {
  color: inherit;
  text-decoration: none;
  opacity: 0.9;
}
.mbar-links { gap: 0.2rem; padding: 0 0.1rem; }
.mbar-links a {
  opacity: 1;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  transition: background-color 0.18s ease;
}
.mbar-links a:hover { background: rgba(255, 255, 255, 0.12); }
/* The open menu, as macOS draws it: a pill of light behind the title. */
.mbar-links a[aria-current] { background: rgba(255, 255, 255, 0.26); }
.mbar-links a:active { background: rgba(255, 255, 255, 0.36); }
@media (prefers-reduced-motion: reduce) { .mbar-links a { transition: none; } }

.mbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.mbar-get {
  opacity: 1;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
}
.mbar-get:hover { background: rgba(255, 255, 255, 0.26); }

.mbar-clock { font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .mbar-inner { gap: 0.9rem; }
  .mbar-mark b, .mbar-clock { display: none; }
}
/* On a phone the page's own Download button is enough, and the links need
   the room. */
@media (max-width: 520px) {
  .mbar-inner { gap: 0.7rem; padding: 0 0.7rem; font-size: 13px; }
  .mbar-links { gap: 0.8rem; }
  .mbar-get { display: none; }
}
/* Six links need 353px. Above 520 the row has room for all of them beside
   the Download button; below it the button goes, and the editor goes with
   it — at 420 the six were cut off mid-word with nothing to say the row
   scrolled. The editor is a desktop tool and the footer still has it. */
@media (max-width: 520px) {
  .mbar-roomy { display: none; }
}
/* Five need 324px, which runs out at about 390: below that the row fades
   at its edge so it reads as one that scrolls. (Four needed 261 and ran out
   at 325, before the fleet link.) */
@media (max-width: 389px) {
  .mbar-links {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
  }
}
/* Nor is there anything to download on a phone or a tablet. */
@media (hover: none) and (pointer: coarse) {
  .mbar-get { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mbar-canvas, .mbar-still { transition: none; }
}

/* Anchors land below the bar, not under it. */
.band { scroll-margin-top: 36px; }


/* ═══ Home: the hero under the bar ══════════════════════════════════════════ */

.hero-live {
  position: relative;
  background: #05070b;
  color: #e9edf3;
  /* Never less than the tails' 150px, which are drawn over the top of it. */
  padding: max(10.5rem, 14vw) 0 clamp(4rem, 8vw, 6.5rem);
  text-align: center;
}


.hero-live .display { color: #f4f6fa; }
.hero-live .lede { color: rgba(233, 237, 243, 0.78); margin-inline: auto; }
.hero-live .fineprint,
.hero-live .hint { color: rgba(233, 237, 243, 0.6); margin-inline: auto; }

.btn-on-dark { background: #f4f6fa; color: #070a0f; }

.link-on-dark {
  color: #f4f6fa;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(244, 246, 250, 0.4);
}
.link-on-dark:hover { text-decoration-color: currentColor; }


/* ═══ Home: the looks gallery ══════════════════════════════════════════════ */

.now {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  column-gap: 1rem;
  margin: 2rem 0 1.2rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.now-label { margin: 0; font-size: 0.78rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.now-name { margin: 0; font-weight: 600; }
.now-about { margin: 0; grid-column: 2; color: var(--muted); font-size: 0.92rem; }
.now .link { grid-column: 3; grid-row: 1; font-size: 0.92rem; }

@media (max-width: 640px) {
  .now { grid-template-columns: 1fr; row-gap: 0.25rem; }
  .now-about, .now .link { grid-column: 1; grid-row: auto; }
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
}

.look {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0 0 0.85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.look:hover { transform: translateY(-2px); border-color: var(--muted); }
.look[aria-pressed="true"] {
  border-color: var(--ink);
  box-shadow: 0 0 0 1.5px var(--ink);
}

.look-art {
  display: block;
  height: 78px;
  background: #05070b;
  margin-bottom: 0.55rem;
}
.look-art img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }

/* The chosen card runs live (home.js): the canvas fades in over its picture
   once it has drawn, with the bar's rows lifted x1.2 for the glass, as the
   header does. */
.look-art { position: relative; overflow: hidden; }
.look-live {
  position: absolute; left: 0; top: 0; width: 100%; display: block;
  opacity: 0; transition: opacity 0.6s ease; pointer-events: none;
}
.look-glass {
  position: absolute; left: 0; right: 0; top: 0; height: 18px; pointer-events: none;
}
.look-art.is-live .look-live { opacity: 1; }
.look-art.is-live .look-glass { backdrop-filter: brightness(1.2); -webkit-backdrop-filter: brightness(1.2); }
.look-art.is-live img { opacity: 0; transition: opacity 0.6s ease; }
@media (prefers-reduced-motion: reduce) { .look-live, .look-art.is-live img { transition: none; } }

.look-name { padding: 0 0.9rem; font-weight: 600; font-size: 0.95rem; }

/* Two rows on a desktop and four cards on a phone until it is opened; the
   look that is running stays, wherever it is in the list (home.js). */
.gallery:not(.is-open) .look:nth-child(n+9):not([aria-pressed="true"]) { display: none; }
@media (max-width: 640px) {
  .gallery:not(.is-open) .look:nth-child(n+5):not([aria-pressed="true"]) { display: none; }
}
.gallery-foot { margin: 1.4rem 0 0; text-align: center; }
.gallery-more {
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
}
.gallery-more:hover { border-color: var(--muted); }
.look-about { padding: 0 0.9rem; font-size: 0.84rem; line-height: 1.45; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .look { transition: none; }
  .look:hover { transform: none; }
}


/* ═══ Home: agent states ═══════════════════════════════════════════════════ */

.states-hint { margin: 1.6rem 0 0; color: var(--muted); }
.no-webgpu .states-hint { display: none; }

.states {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 1rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 760px) { .states { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.state {
  display: block;
  width: 100%;
  padding: 0 0 0.6rem;
  border: 0;
  border-radius: 12px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.state:hover .state-art { box-shadow: 0 0 0 1.5px var(--muted); }
.state[aria-pressed="true"] .state-art { box-shadow: 0 0 0 2px var(--ink); }
.no-webgpu .state { cursor: default; }
.state-art {
  display: block;
  width: 100%;
  height: 64px;
  object-fit: cover;
  object-position: left top;
  border-radius: 10px;
  background: #05070b;
}
.state-name { display: block; margin: 0.7rem 0 0.1rem; font-weight: 600; }
.state-text { display: block; margin: 0; font-size: 0.9rem; color: var(--muted); line-height: 1.5; }

.dev-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}
/* minmax(0, ...), not 1fr: a plain 1fr will not shrink below its widest
   line, and a line of shell is wider than a phone. The code panel scrolls. */
@media (max-width: 760px) { .dev-grid { grid-template-columns: minmax(0, 1fr); } }
.dev-grid .code-panel { margin-top: 0.9rem; }

/* The fleet's two ways in, side by side, and the dashboard under them. */
.fleet-join { margin-top: 2.2rem; }
.join-steps { margin: 0.9rem 0 0.9rem 1.2rem; padding: 0; line-height: 1.65; }
.join-steps li { margin: 0 0 0.45rem; padding-left: 0.2rem; }
.fleet-cta { margin: 2.2rem 0 3rem; }
.dev-grid .code-body { padding: 0.9rem 1.1rem; line-height: 1.8; }

/* The Homebrew line in the closing section: centred, but the command reads
   left to right like any terminal. */
.dl-facts .foot-version { margin: 0; font-size: inherit; color: inherit; }
.brew-panel { max-width: 32rem; margin: 1.8rem auto 1.4rem; text-align: left; }
.brew-panel .fineprint { margin-bottom: 0.7rem; }
.brew-panel .code-body { padding: 0.9rem 1.1rem; line-height: 1.6; }