/*
 * Gitstalk marketing site, in the product's Nightshift skin (prototypes/design-v2):
 * dark first, Space Grotesk + JetBrains Mono, a dot-matrix ground, a command-prompt voice,
 * and glow only on live things (the stalk, beans in flight, the caret).
 * Day mode is "Daylight phosphor". The theme follows the system until the toggle is used.
 */

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;
  --page: #05080b;
  --bg: #0a0f15;
  --subtle: #0e141c;
  --inset: #121a24;
  --band: #0f1720;
  --border: #1c2632;
  --border-muted: #151e28;
  --fg: #dce6ef;
  --fg-muted: #9aa9ba;
  --fg-subtle: #6f8096;
  --link: #49f2c2;
  --leaf: #2cf0b0;
  --leaf-ink: #45f0bd;
  --leaf-bg: rgba(44, 240, 176, 0.1);
  --on-leaf: #03150f;
  --sprout: #b6ff5c;
  --sprout-bg: rgba(182, 255, 92, 0.09);
  --bean: #b691ff;
  --bean-bg: rgba(182, 145, 255, 0.12);
  --amber: #ffc04d;
  --red: #ff4f6d;
  --red-bg: rgba(255, 79, 109, 0.1);
  --add-bg: rgba(44, 240, 176, 0.08);
  --del-bg: rgba(255, 79, 109, 0.09);
  --glowc: rgba(44, 240, 176, 0.55);
  --glow-sprout: rgba(182, 255, 92, 0.42);
  --glow-bean: rgba(182, 145, 255, 0.55);
  --glow-red: rgba(255, 79, 109, 0.6);
  --pulse: #e9fff7;
  --shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.95);
  --texture: radial-gradient(rgba(130, 170, 200, 0.075) 1px, transparent 1.3px) 0 0 / 18px 18px;
  --sans: 'Space Grotesk', -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
}

/* Daylight phosphor: the night screen lit by day, the filament still luminous. */
:root[data-theme='light'] {
  color-scheme: light;
  --page: #d4e4dc;
  --bg: #eff6f2;
  --subtle: #e8efeb;
  --inset: #dde7e2;
  --band: #e6f0eb;
  --border: #c3d3cb;
  --border-muted: #d5e1db;
  --fg: #08161a;
  --fg-muted: #344a44;
  --fg-subtle: #4d625b;
  --link: #006652;
  --leaf: #00b38c;
  --leaf-ink: #006e57;
  --leaf-bg: #cfeee3;
  --on-leaf: #03150f;
  --sprout: #5cc41a;
  --sprout-bg: #e1f4d2;
  --bean: #5d36d6;
  --bean-bg: #e7dffd;
  --amber: #7a5200;
  --red: #b3203d;
  --red-bg: #fbe0e5;
  --add-bg: #d6efe4;
  --del-bg: #fbe0e5;
  --glowc: rgba(0, 210, 160, 0.6);
  --glow-sprout: rgba(92, 196, 26, 0.38);
  --glow-bean: rgba(123, 82, 240, 0.4);
  --glow-red: rgba(212, 42, 74, 0.4);
  --pulse: #ffffff;
  --shadow: 0 40px 80px -50px rgba(0, 70, 50, 0.5);
  --texture: radial-gradient(rgba(10, 80, 60, 0.07) 1px, transparent 1.3px) 0 0 / 18px 18px;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  margin: 0;
  background: var(--texture), var(--page);
  color: var(--fg);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
[hidden] {
  display: none !important;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: var(--link);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
code,
pre,
kbd {
  font-family: var(--mono);
  font-variant-ligatures: none;
}
:focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: 3px;
  border-radius: 4px;
}
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap.wide {
  max-width: calc(1320px + 2 * var(--gutter));
}
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--leaf);
  color: var(--on-leaf);
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: 600;
}
.skip:focus {
  top: 12px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* One image per theme. */
.day,
:root[data-theme='light'] .night {
  display: none;
}
:root[data-theme='light'] .day {
  display: block;
}

/* ---------- Header ---------- */
.top {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--page) 82%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-muted);
}
.top .wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 60px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--fg);
  text-decoration: none;
  font: 600 16px/1 var(--mono);
  letter-spacing: -0.01em;
}
.brand svg {
  width: 20px;
  height: 22px;
}
.nav {
  display: flex;
  gap: 22px;
  margin: 0 auto;
}
.nav a {
  color: var(--fg-muted);
  text-decoration: none;
  font-size: 14.5px;
}
.nav a:hover {
  color: var(--fg);
}
.top .end {
  display: flex;
  align-items: center;
  gap: 10px;
}
.themebtn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg-muted);
  cursor: pointer;
}
.themebtn:hover {
  color: var(--fg);
}
.themebtn svg {
  width: 17px;
  height: 17px;
}
.themebtn .sun,
:root[data-theme='light'] .themebtn .moon {
  display: none;
}
:root[data-theme='light'] .themebtn .sun {
  display: block;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font: 600 15px/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover {
  border-color: var(--fg-subtle);
}
.btn.primary {
  background: var(--leaf);
  border-color: transparent;
  color: var(--on-leaf);
}
.btn.primary:hover {
  filter: brightness(1.08);
}
.btn.big {
  height: 48px;
  padding: 0 22px;
  font-size: 16px;
}
.btn.small {
  height: 34px;
  padding: 0 13px;
  font-size: 14px;
}

/* ---------- The prompt line (the product's Ask, as a voice) ---------- */
.prompt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 14px/1.4 var(--mono);
  color: var(--fg-muted);
  margin: 0 0 20px;
}
.prompt::before {
  content: '›';
  color: var(--leaf);
  font-weight: 600;
}
.caret {
  display: inline-block;
  width: 8px;
  height: 17px;
  background: var(--leaf);
  box-shadow: 0 0 8px var(--glowc);
  vertical-align: -3px;
}
@media (prefers-reduced-motion: no-preference) {
  .caret {
    animation: blink 1.1s steps(1) infinite;
  }
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* ---------- Hero ---------- */
.hero {
  padding: clamp(48px, 6vw, 80px) 0 0;
  text-align: center;
}
.hero h1 {
  font-size: clamp(40px, 5.8vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
  margin: 0 auto;
  max-width: 16ch;
  text-wrap: balance;
}
.hero .lede {
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 54ch;
  margin: 26px auto 0;
}
.cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 14px;
  margin-top: 32px;
}
.showcase {
  margin: clamp(48px, 7vw, 80px) auto 0;
  text-align: left;
}
.showcase .note {
  text-align: center;
  font: 13px/1.5 var(--mono);
  color: var(--fg-subtle);
  margin: 16px 0 0;
}

/* ---------- The app demo (an HTML recreation of the repository home) ---------- */
.app {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  box-shadow: var(--shadow);
  overflow: hidden;
  font-size: 13px;
  line-height: 1.45;
}
/* The repository header, as the app draws it: owner / name and visibility, then the tabs. */
.app-top {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 18px 4px;
  background: var(--subtle);
  white-space: nowrap;
  overflow: hidden;
}
.app-top .dots {
  display: inline-flex;
  gap: 6px;
}
.app-top .dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
}
.app-top .crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 17px var(--mono);
}
.app-top .crumb b {
  color: var(--leaf-ink);
  font-weight: 500;
}
.app-top .crumb span {
  color: var(--fg-subtle);
}
.app-top .crumb small {
  margin-left: 4px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font: 500 11px/18px var(--mono);
  color: var(--fg-muted);
}
.app-tabs {
  position: relative;
  display: flex;
  gap: 2px;
  padding: 4px 12px 0;
  background: var(--subtle);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.app-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 9px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font: 13px var(--mono);
  color: var(--fg);
  cursor: pointer;
  white-space: nowrap;
}
.app-tabs button:hover {
  background: var(--inset);
  border-radius: 6px 6px 0 0;
}
.app-tabs button[aria-pressed='true'] {
  border-bottom-color: var(--leaf);
  color: var(--leaf-ink);
}
.app-tabs button:focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: -2px;
}
.app-tabs .tabcount {
  min-width: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--inset);
  font: 500 11px/16px var(--mono);
  text-align: center;
  color: var(--fg);
}
.app-body {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  height: 600px;
}
.app-stalk {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  min-height: 0;
}
.app-stalk .ah {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 14px 8px;
  font: 12px var(--mono);
  color: var(--fg-subtle);
}
.app-stalk .ah b {
  color: var(--leaf-ink);
  font-weight: 600;
  font-size: 13px;
}
.app-stalk .ah span {
  margin-left: auto;
}
.app-rows {
  flex: 1;
  overflow: hidden;
  min-height: 0;
  mask-image: linear-gradient(to bottom, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent);
}
.player {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--border);
}
.player .play {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--fg);
  color: var(--bg);
}
.player .play svg {
  width: 12px;
  height: 12px;
}
.player .play .pause,
.app.playing .player .play .tri {
  display: none;
}
.app.playing .player .play .pause {
  display: block;
}
.app.playing .player .play {
  background: var(--leaf);
  box-shadow: 0 0 12px var(--glowc);
}
.player .track {
  height: 4px;
  border-radius: 2px;
  background: var(--inset);
  position: relative;
}
.player .track i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 2px;
  background: var(--leaf);
}
.player .track i::after {
  content: '';
  position: absolute;
  right: -6px;
  top: -4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--fg);
}
.player output {
  font: 12px var(--mono);
  color: var(--fg-muted);
  min-width: 78px;
  text-align: right;
}
.app-main {
  padding: 16px 20px;
  overflow: hidden;
  min-width: 0;
}
.d-ask {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  font: 14px var(--mono);
  color: var(--fg);
}
.d-ask.focus {
  border-color: var(--leaf);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--leaf) 18%, transparent);
}
.d-ask .ph {
  color: var(--fg-subtle);
}
.d-ask .q,
.askline .q {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--leaf);
  color: var(--leaf-ink);
  border-radius: 4px;
  font-size: 13px;
  flex: none;
}
.d-ask .caret {
  margin-left: -6px;
  height: 16px;
}
.d-ask kbd {
  margin-left: auto;
  font-size: 10.5px;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 4px;
  color: var(--fg-subtle);
}
.d-picked {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  font: 12px var(--mono);
  color: var(--fg-subtle);
}
.chip {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 7px;
  background: var(--subtle);
  color: var(--fg);
  font: 12px/18px var(--mono);
}
.chip b {
  color: var(--fg-subtle);
  font-weight: 500;
  margin-right: 4px;
}
.chip.soon {
  border-color: color-mix(in srgb, var(--amber) 55%, var(--border));
  background: color-mix(in srgb, var(--amber) 10%, transparent);
  color: var(--amber);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  vertical-align: 0.15em;
}
.chip.live {
  border-color: color-mix(in srgb, var(--leaf) 55%, var(--border));
  background: var(--leaf-bg);
  color: var(--leaf-ink);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  vertical-align: 0.15em;
}
.chip.jev {
  border-color: color-mix(in srgb, var(--leaf) 50%, var(--border));
  color: var(--leaf-ink);
  background: var(--leaf-bg);
}
.d-picked .sep {
  width: 8px;
}
.d-answer {
  margin: 14px 0 2px;
  font: 600 19px/1.3 var(--sans);
  letter-spacing: -0.01em;
}
.d-answer::before {
  content: '› ';
  color: var(--leaf);
  font-family: var(--mono);
}
.d-sub {
  color: var(--fg-muted);
  font-size: 12.5px;
  margin: 0 0 12px;
}
.d-box {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--subtle);
  margin-top: 12px;
  overflow: hidden;
}
.d-box > header {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-muted);
  font-size: 13px;
  color: var(--fg-subtle);
  font-family: var(--mono);
}
.d-box > header b {
  font-family: var(--sans);
  color: var(--fg);
  font-weight: 600;
  margin-right: 6px;
}
.g-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 6px 14px;
  border-top: 1px solid var(--border-muted);
  align-items: center;
}
.g-row:first-of-type {
  border-top: 0;
}
.g-row .a {
  color: var(--bean);
  font: 600 12px var(--mono);
}
.g-row .t {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.g-row .s {
  font: 11.5px var(--mono);
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.g-row.checking .s {
  color: var(--amber);
}
.spin {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--amber);
  border-top-color: transparent;
  display: inline-block;
}
.g-row.writing .spin {
  border-color: var(--bean);
  border-top-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .spin {
    animation: jspin 0.9s linear infinite;
  }
}
@keyframes jspin {
  to {
    transform: rotate(360deg);
  }
}
.g-empty {
  padding: 10px 14px;
  color: var(--fg-muted);
}
.ev {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 14px;
  border-top: 1px solid var(--border-muted);
}
.ev:first-of-type {
  border-top: 0;
}
.ev b {
  display: block;
  font-weight: 600;
  font-size: 13.5px;
}
.ev span {
  color: var(--fg-muted);
  font-size: 12.5px;
}
.ev .ic {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  margin-top: 1px;
}
.ev .ic.red {
  background: var(--red-bg);
  color: var(--red);
}
.ev .ic.decide {
  background: var(--leaf-bg);
  color: var(--leaf-ink);
}
.ev .ic.fell {
  background: var(--inset);
  color: var(--fg-subtle);
}
.app-status {
  display: flex;
  align-items: center;
  height: 28px;
  border-top: 1px solid var(--border);
  background: var(--inset);
  font: 11.5px/28px var(--mono);
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
}
.app-status span {
  padding: 0 12px;
  border-right: 1px solid var(--border-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.app-status .sp {
  flex: 1;
  border: 0;
}
.app-status .red {
  color: var(--red);
}

/* ---------- Stalk rows (shared by the demo and the lifecycle stalk) ---------- */
.srow {
  display: grid;
  grid-template-columns: 40px 28px minmax(0, 1fr) 48px;
  align-items: center;
  height: 26px;
  font-size: 12.5px;
  position: relative;
}
.srow .tm {
  color: var(--fg-subtle);
  font: 11px var(--mono);
  text-align: right;
  padding-right: 6px;
}
.srow .tt {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 6px;
}
.srow .ix {
  color: var(--fg-subtle);
  font: 11px var(--mono);
  text-align: right;
  padding-right: 12px;
}
.srow .stem,
.pointer .stem,
.seedrow .stem,
.tipnote .stem {
  position: relative;
  height: 100%;
}
.srow .stem::before,
.pointer .stem::before,
.tipnote .stem::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--leaf);
  box-shadow: 0 0 7px 1px var(--glowc);
}
:root[data-theme='light'] .srow .stem::before {
  width: 2.5px;
  margin-left: -1.25px;
}
.srow.sprout .stem::before {
  background: var(--sprout);
  box-shadow: 0 0 7px 1px var(--glow-sprout);
}
.lf {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 13px;
  margin-top: -11px;
  border-radius: 0 80% 0 80%;
  background: var(--leaf);
  transform-origin: 0 100%;
  transform: rotate(-10deg);
  box-shadow: 0 0 9px 1px var(--glowc);
}
.srow.l .lf {
  left: auto;
  right: 50%;
  border-radius: 80% 0 80% 0;
  transform-origin: 100% 100%;
  transform: rotate(10deg);
}
.srow.sprout .lf {
  background: var(--sprout);
  width: 10px;
  height: 10px;
  margin-top: -9px;
  box-shadow: 0 0 8px var(--glow-sprout);
}
.srow.red .lf {
  background: var(--red);
  box-shadow: 0 0 11px var(--glow-red);
}
.srow.fell {
  opacity: 0.5;
}
.srow.fell .stem::before {
  box-shadow: none;
}
.srow.fell .fl {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -2px 0 0 7px;
  border-radius: 0 80% 0 80%;
  background: var(--fg-subtle);
  transform: rotate(40deg);
}
.srow.fell .tt {
  color: var(--fg-muted);
  text-decoration: line-through;
}
.srow.bean .stem::before {
  background: repeating-linear-gradient(var(--bean) 0 3px, transparent 3px 6px);
  box-shadow: none;
  opacity: 0.55;
}
.beanmark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 9px;
  margin: -4.5px 0 0 -6px;
  border-radius: 50%;
  background: var(--bean);
  transform: rotate(-20deg);
  box-shadow: 0 0 9px 2px var(--glow-bean);
}
.srow.bean .ag {
  color: var(--bean);
  font: 600 11px var(--mono);
  text-align: right;
  padding-right: 6px;
}
.srow .st {
  font: 11px var(--mono);
  text-align: right;
  padding-right: 12px;
  color: var(--fg-subtle);
}
.srow.checking .beanmark {
  background: var(--bg);
  box-shadow: inset 0 0 0 2px var(--amber);
}
.srow.checking .st {
  color: var(--amber);
}
.srow.reworking .beanmark,
.srow.queued .beanmark {
  box-shadow: none;
}
.srow.reworking .beanmark {
  background: var(--red);
}
.srow.reworking .st {
  color: var(--red);
}
.srow.queued .beanmark {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--bean);
}
.srow.queued .stem::before {
  opacity: 0.25;
}
.pointer {
  display: grid;
  grid-template-columns: 40px 28px minmax(0, 1fr);
  align-items: center;
  height: 22px;
  font: 600 11px var(--mono);
  color: var(--leaf-ink);
}
.pointer span:last-child {
  border-top: 1px dashed color-mix(in srgb, var(--leaf) 50%, transparent);
  padding: 1px 0 0 6px;
  margin-right: 12px;
}
.tipnote,
.seedrow {
  display: grid;
  grid-template-columns: 40px 28px minmax(0, 1fr);
  align-items: center;
  height: 28px;
  font-size: 12.5px;
  color: var(--fg-muted);
}
.tipnote span:last-child,
.seedrow span:last-child {
  padding-left: 6px;
}
.seedrow {
  font: 11.5px var(--mono);
  color: var(--fg-subtle);
}
.seedrow .stem::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  height: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--leaf);
}
.seedrow .stem::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 8px;
  margin: -2px 0 0 -6.5px;
  border-radius: 50%;
  background: var(--fg-subtle);
}
@media (prefers-reduced-motion: no-preference) {
  .srow.writing .beanmark,
  .srow.reworking .beanmark {
    animation: breathe 1.8s ease-in-out infinite;
  }
  .srow.checking .beanmark {
    animation: spin 1.6s linear infinite;
    background: conic-gradient(var(--amber) 0 70%, transparent 0);
    box-shadow: none;
    -webkit-mask: radial-gradient(ellipse, transparent 2.5px, #000 3px);
    mask: radial-gradient(ellipse, transparent 2.5px, #000 3px);
  }
  .srow.sprout .stem::before,
  .srow.sprout .lf {
    animation: shimmer 2.6s ease-in-out infinite;
  }
  .srow.enter {
    animation: rowin 0.45s ease-out;
  }
  .srow.enter .lf {
    animation: grow 0.7s cubic-bezier(0.2, 1.5, 0.4, 1);
  }
  .srow.l.enter .lf {
    animation-name: growl;
  }
  .srow.promoted .lf {
    animation: flare 1s ease-out;
  }
  .validating .srow.stalk .stem::before,
  .validating .pointer .stem::before,
  .validating .tipnote .stem::before {
    background: linear-gradient(to top, var(--leaf) 0 35%, var(--pulse) 50%, var(--leaf) 65%) 0 0 /
      100% 300%;
    animation: pulseup 1.1s ease-out;
  }
}
@keyframes breathe {
  50% {
    transform: rotate(-20deg) scale(0.7);
    opacity: 0.65;
  }
}
@keyframes spin {
  to {
    transform: rotate(340deg);
  }
}
@keyframes shimmer {
  50% {
    opacity: 0.72;
    filter: brightness(1.25);
  }
}
@keyframes rowin {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
@keyframes grow {
  from {
    transform: rotate(-60deg) scale(0);
  }
  to {
    transform: rotate(-10deg) scale(1);
  }
}
@keyframes growl {
  from {
    transform: rotate(60deg) scale(0);
  }
  to {
    transform: rotate(10deg) scale(1);
  }
}
@keyframes flare {
  from {
    filter: brightness(3);
  }
  to {
    filter: none;
  }
}
@keyframes pulseup {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 100%;
  }
}

/* ---------- Sections ---------- */
section.band {
  padding: clamp(72px, 10vw, 128px) 0;
  border-top: 1px solid var(--border-muted);
}
.sechead {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.band h2,
.statband h2 {
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}
.band .intro,
.statband .intro {
  color: var(--fg-muted);
  font-size: 18.5px;
  max-width: 60ch;
  margin: 18px 0 0;
}
.sechead .intro {
  margin-left: auto;
  margin-right: auto;
}
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.split.flip > :first-child {
  order: 2;
}
.split h2 {
  max-width: 18ch;
}
.split p {
  color: var(--fg-muted);
  max-width: 50ch;
}
.split .lead {
  font-size: 18.5px;
  margin: 18px 0 0;
}
.callout {
  margin-top: 26px;
  padding: 16px 18px;
  border-left: 3px solid var(--sprout);
  background: var(--sprout-bg);
  border-radius: 0 8px 8px 0;
  max-width: 52ch;
}
.callout p {
  margin: 0;
  color: var(--fg);
  font-size: 17.5px;
}
.callout small {
  display: block;
  margin-top: 6px;
  color: var(--fg-muted);
  font-size: 15px;
}
.panel {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.panel > .head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 16px 10px;
  font: 12.5px/1.4 var(--mono);
  color: var(--fg-subtle);
  border-bottom: 1px solid var(--border-muted);
}
.panel > .head b {
  color: var(--fg);
  font: 600 14px var(--sans);
}
.panel > .head span:last-child {
  margin-left: auto;
}
.panel .caption {
  font: 12.5px/1.5 var(--mono);
  color: var(--fg-subtle);
  padding: 10px 16px;
  border-top: 1px solid var(--border-muted);
  background: var(--subtle);
  margin: 0;
}

/* ---------- Lifecycle ---------- */
.terms {
  margin: 28px 0 0;
  display: grid;
  gap: 20px;
}
.terms > div {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 2px 12px;
}
.terms dt {
  grid-column: 2;
  font: 600 19px/1.3 var(--sans);
}
.terms dd {
  grid-column: 2;
  margin: 0;
  color: var(--fg-muted);
  max-width: 46ch;
}
.terms .mark {
  grid-row: 1 / span 2;
  grid-column: 1;
  width: 34px;
  height: 34px;
  margin-top: 1px;
  justify-self: center;
  overflow: visible;
}
.terms > div:nth-child(1) .mark {
  filter: drop-shadow(0 0 5px var(--glow-bean));
}
.terms > div:nth-child(2) .mark {
  filter: drop-shadow(0 0 5px var(--glow-sprout));
}
.terms > div:nth-child(3) .mark {
  filter: drop-shadow(0 0 5px var(--glowc));
}
.stalkdemo .rows {
  height: 360px;
  overflow: hidden;
  padding: 6px 0 8px;
  mask-image: linear-gradient(to bottom, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
}

/* ---------- Parallel checks ---------- */
.lanes {
  padding: 6px 0;
}
.lane {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 96px 84px;
  gap: 10px;
  align-items: center;
  padding: 6px 16px;
  font-size: 13px;
}
.lane .a {
  color: var(--bean);
  font: 600 12px var(--mono);
}
.lane .t {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lane .t small {
  display: block;
  font: 11px var(--mono);
  color: var(--fg-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
}
.lane .bar {
  height: 6px;
  border-radius: 3px;
  background: var(--inset);
  overflow: hidden;
}
.lane .bar i {
  display: block;
  height: 100%;
  background: var(--amber);
  border-radius: 3px;
}
.lane.landed .bar i {
  background: var(--leaf);
  box-shadow: 0 0 8px var(--glowc);
}
.lane .s {
  font: 11.5px var(--mono);
  color: var(--amber);
  text-align: right;
  white-space: nowrap;
}
.lane.landed .s {
  color: var(--leaf-ink);
}
.facts {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: grid;
  gap: 12px;
}
.facts li {
  position: relative;
  padding-left: 26px;
  color: var(--fg-muted);
  max-width: 50ch;
}
.facts li b {
  color: var(--fg);
  font-weight: 600;
}
.facts li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 7px;
  width: 12px;
  height: 12px;
  border-radius: 0 80% 0 80%;
  background: var(--leaf);
}

/* ---------- Ask ---------- */
.askdemo .body {
  padding: 16px;
}
.askline {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--leaf);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--leaf) 16%, transparent);
  border-radius: 7px;
  font: 14px var(--mono);
}
.askdemo .d-answer {
  font-size: 18px;
}
.files {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 12px;
}
.files .f {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 7px 12px;
  border-top: 1px solid var(--border-muted);
  font: 12.5px var(--mono);
}
.files .f:first-child {
  border-top: 0;
}
.files .f span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.files .add {
  color: var(--leaf-ink);
}
.files .del {
  color: var(--red);
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 600 11.5px/18px var(--mono);
  padding: 0 6px;
  border-radius: 4px;
  background: var(--leaf-bg);
  color: var(--leaf-ink);
  white-space: nowrap;
}
.hunk {
  font: 12px/19px var(--mono);
  font-variant-ligatures: none;
  border-top: 1px solid var(--border-muted);
  background: var(--bg);
}
.hunk div {
  padding: 0 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hunk .a {
  background: var(--add-bg);
}
.hunk .d {
  background: var(--del-bg);
}
.hunk .h {
  color: var(--fg-subtle);
  background: var(--subtle);
}
.jevnote {
  margin-top: 22px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--subtle);
  max-width: 52ch;
}
.jevnote .chip {
  margin-top: 2px;
}
.jevnote p {
  margin: 0;
  font-size: 16px;
}
.jevnote small {
  display: block;
  margin-top: 6px;
  color: var(--fg-subtle);
  font-size: 14px;
}

/* ---------- Bento ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(0, auto);
  gap: 16px;
  margin-top: 52px;
}
.tile {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  min-width: 0;
}
.tile h3 {
  margin: 0;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 600;
}
.tile p {
  margin: 0;
  color: var(--fg-muted);
  font-size: 16px;
}
.tile.big {
  grid-column: span 2;
  grid-row: span 2;
  padding-bottom: 0;
}
.tile .shotcrop {
  margin: 8px -24px 0;
  flex: 1;
  min-height: 320px;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border);
}
.tile .shotcrop img {
  position: absolute;
  left: -36%;
  top: -200px;
  width: 132%;
  max-width: none;
}
.mini {
  margin-top: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--subtle);
  font: 12px/1.6 var(--mono);
  overflow: hidden;
}
.mini .mh {
  padding: 6px 10px;
  color: var(--fg-subtle);
  border-bottom: 1px solid var(--border-muted);
}
.mini .hunk {
  border-top: 0;
}
.vs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px;
}
.vs div {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font: 13px/1.4 var(--sans);
  color: var(--fg);
}
.vs div.win {
  border-color: var(--leaf);
  background: var(--leaf-bg);
}
.vs div.win small {
  color: var(--fg-muted);
}
.vs small {
  display: block;
  font: 11px var(--mono);
  color: var(--fg-subtle);
  margin-bottom: 3px;
}

/* ---------- Stat band: the race ---------- */
.statband {
  background: var(--band);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: clamp(64px, 8vw, 104px) 0;
}
:root:not([data-theme='light']) .statband {
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(44, 240, 176, 0.07), transparent 70%), #101a24;
  border-color: #223040;
}
:root:not([data-theme='light']) .statband .stat {
  background: #142130;
  border-color: #26364a;
}
.statband .sechead p {
  color: var(--fg-muted);
}
:root:not([data-theme='light']) .statband .sechead p {
  color: #b4c2d1;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 44px;
}
.stat {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  padding: 22px;
}
.stat .n {
  font: 600 clamp(32px, 3.6vw, 44px) / 1 var(--sans);
  letter-spacing: -0.03em;
  color: var(--fg);
}
.stat.us .n {
  color: var(--leaf-ink);
}
.stat .l {
  margin-top: 10px;
  color: var(--fg-muted);
  font-size: 15px;
  line-height: 1.45;
}
:root:not([data-theme='light']) .stat .l {
  color: #b4c2d1;
}
.compare {
  margin: 28px auto 0;
  max-width: 820px;
  display: grid;
  gap: 10px;
}
.cbar {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  font: 13px var(--mono);
  color: var(--fg-muted);
}
:root:not([data-theme='light']) .cbar {
  color: #c3d0dc;
}
.cbar .track {
  height: 26px;
}
.cbar .fill {
  height: 100%;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
  min-width: max-content;
  padding-left: 10px;
  font: 600 12.5px var(--mono);
  white-space: nowrap;
}
.cbar.us .fill {
  width: 45%;
  background: var(--leaf);
  color: var(--on-leaf);
  box-shadow: 0 0 16px -2px var(--glowc);
}
.cbar.queue .fill {
  width: 100%;
  background: color-mix(in srgb, var(--fg-subtle) 30%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg-subtle) 60%, transparent);
  color: var(--fg);
}
.tally {
  display: grid;
  grid-template-columns: repeat(20, minmax(0, 1fr));
  gap: 3px;
  margin-top: 14px;
  max-width: 220px;
}
.tally i {
  aspect-ratio: 1;
  border-radius: 0 80% 0 80%;
  background: var(--leaf);
}
.tally i.miss {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--fg-subtle);
}
.cmp-label {
  margin: 0 0 2px;
  text-align: center;
  font: 12.5px/1.5 var(--mono);
  color: var(--fg-subtle);
}
:root:not([data-theme='light']) .cmp-label {
  color: #8d9db0;
}

/* ---------- Bring your own agents ---------- */
.roster table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.roster th {
  text-align: left;
  font: 500 12px var(--mono);
  color: var(--fg-subtle);
  padding: 9px 16px 6px;
}
.roster td {
  padding: 9px 16px;
  border-top: 1px solid var(--border-muted);
  white-space: nowrap;
}
.roster .a {
  color: var(--bean);
  font: 600 13px var(--mono);
  width: 1%;
}
.roster .h {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--fg-muted);
}
.where {
  display: inline-block;
  font: 11.5px/18px var(--mono);
  padding: 0 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  margin-left: 6px;
}
.roster .s {
  font: 12px var(--mono);
  color: var(--fg-muted);
  text-align: right;
}
.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
}
.dot.bean {
  background: var(--bean);
  box-shadow: 0 0 6px var(--glow-bean);
}
.dot.amber {
  background: var(--amber);
}
.dot.leaf {
  background: var(--leaf);
  box-shadow: 0 0 6px var(--glowc);
}
.dot.red {
  background: var(--red);
}
.connect {
  margin-top: 16px;
  padding: 18px 20px 20px;
  border: 1px solid color-mix(in srgb, var(--leaf) 45%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--leaf) 6%, var(--bg));
}
.connect p {
  margin: 0 0 14px;
  color: var(--fg-muted);
  font-size: 15px;
}
.connect-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.connect-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--leaf) 55%, var(--border));
  background: var(--bg);
  color: var(--fg);
  font: 600 15px/1 var(--sans);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.connect-btn svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--leaf);
}
.connect-btn:hover {
  border-color: var(--leaf);
  background: color-mix(in srgb, var(--leaf) 12%, var(--bg));
}
.connect-btn:focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: 2px;
}

/* ---------- Agent tabs: pick an agent, copy one command (site.js, setupAgentTabs) ----------
 * Without JS every .cmd shows, stacked, each named in its header. With JS the host gets
 * .tabbed, a tablist goes on top and only the chosen panel shows. Commands keep their lines
 * and scroll inside their own block, so the page never scrolls sideways on a phone. */
.install {
  max-width: 900px;
  margin: 40px auto 0;
  text-align: left;
}
.install > .cmd + .cmd {
  margin-top: 12px;
}
.picker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.picker [role='tab'] {
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg-muted);
  font: 600 15px var(--sans);
  cursor: pointer;
}
.picker [role='tab']:hover {
  color: var(--fg);
  border-color: var(--fg-subtle);
}
.picker [role='tab'][aria-selected='true'] {
  color: var(--fg);
  border-color: var(--leaf);
  background: var(--leaf-bg);
  box-shadow: 0 0 0 1px var(--leaf) inset;
}
.picker [role='tab']:focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: 3px;
  border-radius: 999px;
}
.cmd {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.tabbed > .picker + .cmd,
.install > .cmd:first-child {
  margin-top: 16px;
}
.tabbed > .cmd[hidden] {
  display: none;
}
.cmd header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 55px;
  padding: 10px 10px 10px 16px;
  border-bottom: 1px solid var(--border-muted);
  background: var(--subtle);
  font: 12.5px var(--mono);
  color: var(--fg-subtle);
}
.cmd header > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.cmd header .btn {
  flex: none;
  margin-left: auto;
}
.cmd pre {
  margin: 0;
  padding: 18px 20px;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  color: var(--fg);
}
.cmd pre:focus-visible {
  outline-offset: -3px;
}
.cmd pre::before {
  content: '$ ';
  color: var(--leaf);
  font-weight: 600;
}
.cmd pre.chat::before {
  content: '› ';
}
.cmd pre.url::before {
  content: '';
}
.cmd-note {
  margin: 0;
  padding: 12px 20px 14px;
  border-top: 1px solid var(--border-muted);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-muted);
}
@media (max-width: 560px) {
  .picker {
    justify-content: flex-start;
  }
  .picker [role='tab'] {
    height: 36px;
    padding: 0 13px;
    font-size: 14px;
  }
  .cmd pre {
    padding: 14px 16px;
    font-size: 13px;
  }
  .cmd-note {
    padding: 10px 16px 12px;
  }
}
.alt code {
  font-size: 0.86em;
  color: var(--fg);
}
.copy[data-state='done'] {
  color: var(--leaf-ink);
  border-color: var(--leaf);
}
.copy[data-state='manual'] {
  color: var(--amber);
  border-color: var(--amber);
}
.copyhint {
  font: 12.5px var(--mono);
  color: var(--amber);
  padding: 0 20px 12px;
  margin: -6px 0 0;
}
/* The status line is read out on every copy but shown only when copying was blocked. */
.copyhint:not([data-state='manual']) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.alt {
  margin-top: 24px;
  color: var(--fg-muted);
  text-align: center;
}

/* ---------- Signup choice dialog ---------- */
dialog.choose {
  width: min(640px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.8);
}
dialog.choose::backdrop {
  background: color-mix(in srgb, var(--page) 70%, transparent);
  backdrop-filter: blur(4px);
}
.choose .inner {
  padding: 26px 26px 24px;
}
.choose h2 {
  margin: 0 0 6px;
  font-size: 26px;
  letter-spacing: -0.02em;
  font-weight: 600;
}
.choose .sub {
  margin: 0 0 22px;
  color: var(--fg-muted);
}
.choose .close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.options {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 12px;
}
.option {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--subtle);
  color: var(--fg);
  text-decoration: none;
}
.option:hover {
  border-color: var(--fg-subtle);
}
.option.agent {
  border-color: color-mix(in srgb, var(--leaf) 60%, var(--border));
  background: color-mix(in srgb, var(--leaf) 7%, var(--subtle));
}
.option.agent:hover {
  border-color: var(--leaf);
}
.option b {
  font-size: 18px;
  font-weight: 600;
}
.option span {
  color: var(--fg-muted);
  font-size: 15px;
  line-height: 1.5;
}
.option .rec {
  font: 12px var(--mono);
  color: var(--leaf-ink);
}

/* ---------- Agent and human pages ---------- */
.agenthero {
  padding: clamp(56px, 8vw, 104px) 0 clamp(72px, 9vw, 112px);
  text-align: center;
}
.agenthero h1 {
  font-size: clamp(38px, 5.6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
  margin: 0 auto;
  max-width: 16ch;
  text-wrap: balance;
}
.agenthero .lede {
  font-size: clamp(18px, 1.7vw, 21px);
  color: var(--fg-muted);
  max-width: 56ch;
  margin: 22px auto 0;
}
.agenthero .actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 34px auto 0;
}
.pointer-agent {
  margin: 56px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--border-muted);
  max-width: 620px;
}
.pointer-agent h2 {
  font-size: 22px;
  margin: 0 0 6px;
  letter-spacing: -0.015em;
}
.pointer-agent p {
  margin: 0 0 16px;
  color: var(--fg-muted);
}

/* ---------- Plain pages (about, privacy, terms) ---------- */
.prose {
  max-width: 68ch;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 88px) 0 clamp(64px, 8vw, 104px);
}
.prose h1 {
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin: 10px 0 0;
}
.prose h2 {
  font-size: 21px;
  font-weight: 600;
  margin: 36px 0 0;
}
.prose p,
.prose li {
  color: var(--fg-muted);
  font-size: 16.5px;
  line-height: 1.65;
}
.prose a {
  color: var(--leaf-ink);
}
.prose .stamp {
  font: 12.5px var(--mono);
  color: var(--fg-subtle);
  margin: 14px 0 0;
}

/* ---------- Footer ---------- */
.foot {
  border-top: 1px solid var(--border);
  background: var(--subtle);
  padding: 56px 0 28px;
  font-size: 15px;
}
.foot .cols {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr));
  gap: 32px;
}
.foot .about p {
  color: var(--fg-muted);
  margin: 14px 0 0;
  max-width: 30ch;
}
.foot h2 {
  font: 600 13px var(--mono);
  color: var(--fg-subtle);
  margin: 0 0 14px;
}
.foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.foot a {
  color: var(--fg-muted);
  text-decoration: none;
}
.foot a:hover {
  color: var(--fg);
}
.social {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.social a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}
.social svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}
.foot .base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--border-muted);
  font: 12.5px var(--mono);
  color: var(--fg-subtle);
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .app-body {
    grid-template-columns: 290px minmax(0, 1fr);
  }
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .foot .cols {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .foot .about {
    grid-column: 1 / -1;
  }
}
@media (max-width: 900px) {
  .nav {
    display: none;
  }
  .top .end {
    margin-left: auto;
  }
  .split {
    grid-template-columns: minmax(0, 1fr);
  }
  .split.flip > :first-child {
    order: 0;
  }
  .app-body {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }
  .app-stalk {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    height: 330px;
    order: 2;
  }
  .app-main {
    order: 1;
    height: 360px;
  }
  .app-status .opt {
    display: none;
  }
  .app[data-view='page'] .app-page {
    --view: 640px;
  }
}
@media (max-width: 640px) {
  body {
    font-size: 16px;
  }
  .bento {
    grid-template-columns: minmax(0, 1fr);
  }
  .tile.big {
    grid-column: auto;
    grid-row: auto;
  }
  .tile .shotcrop img {
    left: -52%;
    width: 190%;
    top: -270px;
  }
  .stats {
    grid-template-columns: minmax(0, 1fr);
  }
  .cbar {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .options {
    grid-template-columns: minmax(0, 1fr);
  }
  .roster .hide-s {
    display: none;
  }
  .connect-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .lane {
    grid-template-columns: 28px minmax(0, 1fr) 70px;
  }
  .lane .bar {
    display: none;
  }
  .form .row {
    flex-direction: column;
  }
  .foot .cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .top .end .btn.ghost {
    display: none;
  }
  .app-main {
    padding: 12px;
    height: 380px;
  }
  .app-top .dots {
    display: none;
  }
  .app-top {
    padding: 10px 12px 2px;
  }
  .app-top .crumb {
    font-size: 15px;
  }
  .app-tabs {
    padding: 2px 4px 0;
  }
  .app-tabs button {
    padding: 7px 9px 9px;
  }
  .pg-page {
    padding: 12px;
  }
  .pc-row,
  .ph-row {
    grid-template-columns: 18px minmax(0, 1fr);
  }
  .pc-row .pc-state {
    grid-column: 2;
    justify-self: start;
  }
  .ph-side {
    grid-column: 2;
    justify-content: flex-start;
  }
  .pp-box th:nth-child(3),
  .pp-box td:nth-child(3) {
    display: none;
  }
  .p-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .f-row,
  .f-row.ch-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  .d-picked .lbl {
    display: none;
  }
}

/* glyphs:start (option A, Seedling and leaf; generated from prototypes/glyphs) */
.srow .lf {
  position: absolute;
  left: 50%;
  right: auto;
  top: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' fill='%23fff' d='M12 15c1.2-5.6 5.2-8.6 10.4-8.2-.6 5.4-4.6 8.8-10.4 8.2ZM12.6 14.7 21.2 7.7l.3.4-8.6 7Z'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' fill='%23fff' d='M12 15c1.2-5.6 5.2-8.6 10.4-8.2-.6 5.4-4.6 8.8-10.4 8.2ZM12.6 14.7 21.2 7.7l.3.4-8.6 7Z'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  background: var(--leaf);
  filter: drop-shadow(0 0 3px var(--glowc));
  transform-origin: 50% 62%;
  transition: background 0.8s;
  animation: none;
}
.srow.l .lf {
  transform: scaleX(-1);
}
.srow.sprout .lf,
.srow.sprout.l .lf {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 14c-1-3.2-3.6-4.6-6-4.3.1 2.6 2.6 4.6 6 4.3ZM12 14c1-3.2 3.6-4.6 6-4.3-.1 2.6-2.6 4.6-6 4.3Z'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 14c-1-3.2-3.6-4.6-6-4.3.1 2.6 2.6 4.6 6 4.3ZM12 14c1-3.2 3.6-4.6 6-4.3-.1 2.6-2.6 4.6-6 4.3Z'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  background: var(--sprout);
  filter: drop-shadow(0 0 3px var(--glow-sprout));
  transform: none;
}
.srow.red .lf {
  background: var(--red);
  filter: drop-shadow(0 0 3px var(--glow-red));
}
.srow.red .stem::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -7.5px 0 0 4.6px;
  z-index: 2;
  background:
    linear-gradient(45deg, transparent 38%, var(--bg) 38% 62%, transparent 62%),
    linear-gradient(-45deg, transparent 38%, var(--bg) 38% 62%, transparent 62%);
}
.srow.red.l .stem::after {
  margin-left: -12.6px;
}
.srow.fell .fl {
  position: absolute;
  left: 50%;
  right: auto;
  top: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.3' d='M15 17c.4-3 2.6-4.8 5.6-4.6-.3 3-2.6 4.9-5.6 4.6Z' transform='rotate%2835 18 15%29'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.3' d='M15 17c.4-3 2.6-4.8 5.6-4.6-.3 3-2.6 4.9-5.6 4.6Z' transform='rotate%2835 18 15%29'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  background: var(--fg-subtle);
}
.srow .beanmark {
  position: absolute;
  left: 50%;
  right: auto;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8.94 8.97c2.2-1.6 6.4-.6 7.3 2.2.9 2.8-1.6 4.9-4.4 4.6-2.8-.3-4.6-2.4-4.2-4.6.2-.9.6-1.7 1.3-2.2Z'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8.94 8.97c2.2-1.6 6.4-.6 7.3 2.2.9 2.8-1.6 4.9-4.4 4.6-2.8-.3-4.6-2.4-4.2-4.6.2-.9.6-1.7 1.3-2.2Z'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  background: var(--bean);
  filter: drop-shadow(0 0 3px var(--glow-bean));
  animation: none;
}
.srow.queued .beanmark {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.5' stroke-dasharray='2 1.6' d='M8.94 8.97c2.2-1.6 6.4-.6 7.3 2.2.9 2.8-1.6 4.9-4.4 4.6-2.8-.3-4.6-2.4-4.2-4.6.2-.9.6-1.7 1.3-2.2Z'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.5' stroke-dasharray='2 1.6' d='M8.94 8.97c2.2-1.6 6.4-.6 7.3 2.2.9 2.8-1.6 4.9-4.4 4.6-2.8-.3-4.6-2.4-4.2-4.6.2-.9.6-1.7 1.3-2.2Z'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  background: var(--bean);
  filter: none;
}
.srow.checking .beanmark {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8.94 8.97c2.2-1.6 6.4-.6 7.3 2.2.9 2.8-1.6 4.9-4.4 4.6-2.8-.3-4.6-2.4-4.2-4.6.2-.9.6-1.7 1.3-2.2Z'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8.94 8.97c2.2-1.6 6.4-.6 7.3 2.2.9 2.8-1.6 4.9-4.4 4.6-2.8-.3-4.6-2.4-4.2-4.6.2-.9.6-1.7 1.3-2.2Z'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  background: var(--bean);
  box-shadow: none;
  transform: none;
  animation: none;
}
.srow.checking .stem::after {
  content: '';
  position: absolute;
  left: 50%;
  right: auto;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.6' fill='none' stroke='%23fff' stroke-width='1.7' stroke-dasharray='3 3.2' stroke-linecap='round'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.6' fill='none' stroke='%23fff' stroke-width='1.7' stroke-dasharray='3 3.2' stroke-linecap='round'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  background: var(--amber);
}
.srow.reworking .beanmark {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8.94 8.97c2.2-1.6 6.4-.6 7.3 2.2.9 2.8-1.6 4.9-4.4 4.6-2.8-.3-4.6-2.4-4.2-4.6.2-.9.6-1.7 1.3-2.2Z'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8.94 8.97c2.2-1.6 6.4-.6 7.3 2.2.9 2.8-1.6 4.9-4.4 4.6-2.8-.3-4.6-2.4-4.2-4.6.2-.9.6-1.7 1.3-2.2Z'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  transform: none;
  background: var(--red);
  filter: drop-shadow(0 0 3px var(--glow-red));
}
.srow.reworking .stem::after {
  content: '';
  position: absolute;
  left: 50%;
  right: auto;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' d='M17.5 8.2C16.8 4.8 13.6 3 10.4 3.8 8.6 4.3 7.3 5.5 6.6 7'/%3E%3Cpath fill='%23fff' d='M4.6 5.2l2 3.6 2.9-2.4Z'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' d='M17.5 8.2C16.8 4.8 13.6 3 10.4 3.8 8.6 4.3 7.3 5.5 6.6 7'/%3E%3Cpath fill='%23fff' d='M4.6 5.2l2 3.6 2.9-2.4Z'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  background: var(--red);
}
.srow.enter .lf,
.srow.l.enter .lf {
  animation: glyph-grow 0.7s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.srow.matured .lf,
.srow.promoted .lf {
  animation: glyph-mature 1.2s ease-out;
}
.matured-row {
  display: grid;
  grid-template-columns: 40px 28px minmax(0, 1fr);
  align-items: center;
  height: 20px;
  font: 600 10.5px var(--mono);
  color: var(--leaf);
}
.matured-row span:last-child {
  justify-self: start;
  border: 1px solid var(--leaf);
  border-radius: 4px;
  padding: 0 6px;
  margin-left: 4px;
  line-height: 16px;
  background: color-mix(in srgb, var(--leaf) 10%, transparent);
}
.matured-row .stem {
  position: relative;
  height: 100%;
}
.matured-row .stem::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--leaf);
}
@media (prefers-reduced-motion: no-preference) {
  .srow.writing .beanmark {
    animation: glyph-breathe 1.8s ease-in-out infinite;
  }
  .srow.checking .stem::after {
    animation: glyph-orbit 2.4s linear infinite;
  }
  .srow.reworking .beanmark {
    animation: glyph-nudge 1.6s ease-in-out infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .srow.enter .lf,
  .srow.l.enter .lf,
  .srow.matured .lf,
  .srow.promoted .lf {
    animation: none;
  }
}
@keyframes glyph-breathe {
  50% {
    transform: scale(0.8);
    opacity: 0.7;
  }
}
@keyframes glyph-orbit {
  to {
    transform: rotate(360deg);
  }
}
@keyframes glyph-nudge {
  50% {
    translate: -1.5px 0;
  }
}
@keyframes glyph-grow {
  from {
    scale: 0;
  }
  to {
    scale: 1;
  }
}
@keyframes glyph-mature {
  0% {
    scale: 0.5;
    filter: brightness(2.6);
  }
  55% {
    scale: 1.2;
  }
  100% {
    scale: 1;
  }
}
/* glyphs:end */

/* glyph-grow:start (option A in the demo's Growing now list) */
.g-row .spin {
  width: 15px;
  height: 15px;
  border: 0;
  border-radius: 0;
  background: var(--bean);
  animation: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8.94 8.97c2.2-1.6 6.4-.6 7.3 2.2.9 2.8-1.6 4.9-4.4 4.6-2.8-.3-4.6-2.4-4.2-4.6.2-.9.6-1.7 1.3-2.2Z'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8.94 8.97c2.2-1.6 6.4-.6 7.3 2.2.9 2.8-1.6 4.9-4.4 4.6-2.8-.3-4.6-2.4-4.2-4.6.2-.9.6-1.7 1.3-2.2Z'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
}
.g-row.checking .spin {
  background: var(--amber);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.6' fill='none' stroke='%23fff' stroke-width='1.7' stroke-dasharray='3 3.2' stroke-linecap='round'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.6' fill='none' stroke='%23fff' stroke-width='1.7' stroke-dasharray='3 3.2' stroke-linecap='round'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
}
.g-row.reworking .spin {
  background: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8.94 8.97c2.2-1.6 6.4-.6 7.3 2.2.9 2.8-1.6 4.9-4.4 4.6-2.8-.3-4.6-2.4-4.2-4.6.2-.9.6-1.7 1.3-2.2Z'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8.94 8.97c2.2-1.6 6.4-.6 7.3 2.2.9 2.8-1.6 4.9-4.4 4.6-2.8-.3-4.6-2.4-4.2-4.6.2-.9.6-1.7 1.3-2.2Z'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .g-row.checking .spin {
    animation: glyph-orbit 2.4s linear infinite;
  }
  .g-row.writing .spin {
    animation: glyph-breathe 1.8s ease-in-out infinite;
  }
}
/* glyph-grow:end */

/* demo-tour:start (the hero demo: life-long player, question tour, answers) */
.player {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 18px 8px;
  border-top: 1px solid var(--border);
}
.player .pl-lane {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.player .track {
  position: relative;
  height: 4px;
}
.player .track .week {
  position: absolute;
  top: -4px;
  bottom: -4px;
  right: 0;
  border-radius: 3px;
  background: color-mix(in srgb, var(--leaf) 14%, transparent);
  box-shadow: inset 1px 0 0 var(--leaf);
}
.player .track i {
  z-index: 1;
  transition: width 0.25s linear;
}
.player .scale {
  position: relative;
  height: 14px;
  font: 10.5px var(--mono);
  color: var(--fg-subtle);
}
.player .scale span {
  position: absolute;
  top: 0;
  white-space: nowrap;
}
.player .scale .minus7 {
  transform: translateX(-50%);
  color: var(--leaf-ink);
}
.player .scale .tick {
  transform: translateX(-50%);
}
.player output {
  min-width: 92px;
}
.app-rows {
  position: relative;
}
.app-rows .links {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.app-rows .links svg {
  overflow: visible;
}
.app-rows .links path {
  fill: none;
  stroke: var(--amber);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}
.app-rows .links text {
  fill: var(--amber);
  font: 9px var(--mono);
}
.app-rows .dim {
  opacity: 0.18;
}
.app-rows .hit .tt {
  color: var(--fg);
  font-weight: 600;
}
.app-rows .older .tt {
  color: var(--fg-subtle);
  font-style: italic;
}
.srow.revert .rv {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  background: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' d='M17.5 8.2C16.8 4.8 13.6 3 10.4 3.8 8.6 4.3 7.3 5.5 6.6 7'/%3E%3Cpath fill='%23fff' d='M4.6 5.2l2 3.6 2.9-2.4Z'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' d='M17.5 8.2C16.8 4.8 13.6 3 10.4 3.8 8.6 4.3 7.3 5.5 6.6 7'/%3E%3Cpath fill='%23fff' d='M4.6 5.2l2 3.6 2.9-2.4Z'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
}
.srow.revert .tt {
  color: var(--fg-muted);
}
.srow.revert .ix {
  color: var(--leaf-ink);
}
@media (prefers-reduced-motion: no-preference) {
  .srow.redpulse .lf {
    animation: red-pulse 0.9s ease-in-out infinite;
  }
  .srow.ringpulse .stem::after {
    animation-duration: 0.9s;
    filter: drop-shadow(0 0 4px var(--amber));
  }
}
@keyframes red-pulse {
  50% {
    scale: 1.35;
    filter: drop-shadow(0 0 6px var(--red));
  }
}
.d-view {
  display: grid;
}
/* An answer is shown whole the moment it is applied: no fade, no staged reveal. */
.d-panel {
  grid-area: 1 / 1;
  visibility: hidden;
  pointer-events: none;
  min-width: 0;
}
.d-panel.on {
  visibility: visible;
  pointer-events: auto;
}
.d-panel .d-picked {
  margin-top: 12px;
}
.f-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 6px 14px;
  border-top: 1px solid var(--border-muted);
  font-size: 12.5px;
}
.f-row:first-of-type {
  border-top: 0;
}
.f-row > .chip {
  justify-self: start;
}
.f-row .fn {
  font-family: var(--mono);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.f-row .fb {
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.f-row .fstat {
  font: 11.5px var(--mono);
  color: var(--leaf-ink);
}
.chip.fly {
  color: var(--bean);
  border-color: color-mix(in srgb, var(--bean) 40%, var(--border));
  background: color-mix(in srgb, var(--bean) 12%, transparent);
  font-size: 11px;
  line-height: 16px;
}
.chip.leafchip {
  white-space: nowrap;
  color: var(--leaf-ink);
  background: var(--leaf-bg);
  font-size: 11px;
  line-height: 16px;
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.lfm {
  display: inline-block;
  width: 13px;
  height: 13px;
  background: var(--leaf);
  flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' fill='%23fff' d='M12 15c1.2-5.6 5.2-8.6 10.4-8.2-.6 5.4-4.6 8.8-10.4 8.2ZM12.6 14.7 21.2 7.7l.3.4-8.6 7Z'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' fill='%23fff' d='M12 15c1.2-5.6 5.2-8.6 10.4-8.2-.6 5.4-4.6 8.8-10.4 8.2ZM12.6 14.7 21.2 7.7l.3.4-8.6 7Z'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
}
.hunk {
  font: 11.5px/18px var(--mono);
  border-top: 1px solid var(--border-muted);
  font-variant-ligatures: none;
}
.hunk div {
  padding: 0 14px;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hunk .a {
  background: color-mix(in srgb, var(--leaf) 12%, transparent);
}
.hunk .d {
  background: color-mix(in srgb, var(--red) 12%, transparent);
}
.hunk .h {
  color: var(--fg-subtle);
}
.d-box .card {
  padding: 10px 14px 12px;
  font-size: 12.5px;
  color: var(--fg-muted);
}
.d-box .card p {
  margin: 0 0 8px;
}
.d-box .steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.d-box .steps div {
  border: 1px solid var(--border-muted);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 11.5px;
}
.d-box .steps b {
  display: block;
  color: var(--fg);
  font: 600 12.5px var(--mono);
}
.g-row .t small {
  display: block;
  color: var(--fg-subtle);
  font: 11px var(--mono);
}
.srow.sprout.red .lf,
.srow.sprout.red.l .lf {
  background: var(--red);
}
.app-rows .srow .st {
  white-space: nowrap;
}
.d-tabhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 14px 0 0;
}
.d-tabhead b {
  font: 600 19px/1.3 var(--sans);
  letter-spacing: -0.01em;
  margin-right: 6px;
}
.f-row.ch-row {
  grid-template-columns: minmax(0, 1fr) auto 110px;
}
.f-row.ch-row .fstat {
  text-align: right;
}
.f-row.fell .fb {
  text-decoration: line-through;
}
.f-row.ask-sugg {
  grid-template-columns: 22px minmax(0, 1fr) auto;
  font: 13px var(--mono);
}
.f-row.ask-sugg .q {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--leaf);
  border-radius: 4px;
  color: var(--leaf);
  font-size: 12px;
}
.f-row.ask-sugg .fb {
  color: var(--fg);
}
.cmd-c {
  font: 12px var(--mono);
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rv-grid {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}
.rv-grid .rv-l {
  display: block;
  margin-bottom: 3px;
  font: 11px var(--mono);
  color: var(--fg-subtle);
}
.rv-grid .jc-fail {
  margin: 0;
}
.rv-with {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--fg);
}
.d-box .card .hunk {
  margin: 0 -14px 10px;
}
.p-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 8px 14px;
  border-top: 1px solid var(--border-muted);
}
.p-row:first-of-type {
  border-top: 0;
}
.p-row .pw {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.p-row .pw small {
  font: 400 11px var(--mono);
  color: var(--fg-subtle);
}
.p-row .av {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--leaf-bg);
  color: var(--leaf-ink);
  font: 600 11px var(--mono);
  font-style: normal;
  text-transform: uppercase;
}
.p-row .pss {
  display: grid;
  gap: 4px;
}
.p-row .ps {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
}
.p-row .ps b {
  font: 600 11px var(--mono);
  color: var(--bean);
  min-width: 26px;
}
.p-row .ps .dot {
  margin-left: auto;
}
.dot.idle {
  background: var(--fg-subtle);
  box-shadow: none;
  opacity: 0.6;
}
/* The Ask tab's suggested questions, under the ask box. */
.d-try {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  font: 12px var(--mono);
  color: var(--fg-subtle);
}
.d-try .chip {
  color: var(--fg-muted);
}
.j-steps {
  list-style: none;
  margin: 0;
  padding: 10px 14px;
  display: grid;
  gap: 6px;
  font-size: 12.5px;
  color: var(--fg-muted);
}
.j-steps li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
}
.j-steps li span {
  font: 11.5px var(--mono);
  color: var(--fg-subtle);
}
.j-steps li.ok {
  color: var(--leaf-ink);
}
.d-box > header .chip {
  margin-right: 6px;
}
.app[data-tab='ask'] .player {
  display: none;
}
/* demo-tour:end */

/* demo-pages:start (Changes, History, Automations, People and Settings, as miniatures of the app's pages) */
.app-page {
  display: none;
}
.app[data-view='page'] .app-stalk,
.app[data-view='page'] .app-main,
.app[data-view='page'] .player,
.app[data-view='page'] .app-status {
  display: none;
}
.app[data-view='page'] .app-body {
  grid-template-columns: minmax(0, 1fr);
  height: auto;
}
.app[data-view='page'] .app-page {
  --view: 686px;
  display: block;
  height: var(--view);
  overflow: hidden;
  min-width: 0;
  mask-image: linear-gradient(to bottom, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent);
}
.pg-page {
  padding: 20px 24px;
  font-size: 13.5px;
}
.pg-narrow {
  max-width: 680px;
  margin: 0 auto;
}
.pg-box {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--subtle);
  overflow: hidden;
}
.pg-box + .pg-box {
  margin-top: 16px;
}
.pg-box > header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-muted);
}
.pg-box > header h4 {
  margin: 0;
  font: 600 17px var(--sans);
}
.pg-box > header > span:last-child {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--fg-muted);
}
.pg-box ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pg {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 2px;
  background: var(--leaf);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3 20C4 10 10 4 21 3c-1 11-7 17-18 17Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3 20C4 10 10 4 21 3c-1 11-7 17-18 17Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.pg-sprout {
  background: var(--sprout);
}
.pg-red {
  background: var(--red);
}
.pg-bean {
  width: 11px;
  height: 11px;
  margin: 4px 1px 0 2px;
  border-radius: 50%;
  background: var(--bean);
  -webkit-mask: none;
  mask: none;
}
.pg-seed {
  width: 8px;
  height: 11px;
  margin: 3px 3px 0;
  border-radius: 50% 50% 45% 45%;
  background: var(--fg-subtle);
  -webkit-mask: none;
  mask: none;
}
@media (prefers-reduced-motion: no-preference) {
  .pg-live {
    animation: glyph-breathe 1.6s ease-in-out infinite;
  }
}
/* What just changed on a page is marked, without motion, for a moment. */
.pg-page .fresh {
  background: color-mix(in srgb, var(--leaf) 12%, transparent);
}
/* Changes */
.pc-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}
.pc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font: 600 13px var(--sans);
  color: var(--fg-muted);
}
.pc-pill span {
  font: 400 11px var(--mono);
  color: var(--fg-subtle);
}
.pc-pill.on {
  border-color: var(--leaf);
  color: var(--fg);
  background: color-mix(in srgb, var(--leaf) 12%, transparent);
}
.pc-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--fg-muted);
}
.pc-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--leaf);
  box-shadow: 0 0 6px var(--glowc);
}
.pc-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 2px 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-muted);
}
.pc-row:first-child {
  border-top: 0;
}
.pc-row.leaving {
  opacity: 0.5;
}
.pc-title {
  font: 600 14.5px var(--sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pc-state {
  align-self: start;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font: 500 11px/18px var(--mono);
  color: var(--fg-muted);
  white-space: nowrap;
}
.pc-state[data-state='checking'] {
  color: var(--bean);
  border-color: color-mix(in srgb, var(--bean) 50%, var(--border));
}
.pc-state[data-state='red'] {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 55%, var(--border));
}
.pc-state[data-state='landed'] {
  color: var(--leaf-ink);
  border-color: color-mix(in srgb, var(--sprout) 55%, var(--border));
}
.pc-state[data-state='validated'] {
  color: var(--leaf-ink);
  border-color: color-mix(in srgb, var(--leaf) 50%, var(--border));
}
.pc-meta {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 12.5px;
  color: var(--fg-muted);
}
.pc-meta b {
  color: var(--fg);
  font-weight: 600;
}
.pc-bean {
  font: 12px var(--mono);
  color: var(--bean);
}
.pc-why {
  grid-column: 2 / -1;
  list-style: none;
  margin: 8px 0 0;
  padding: 6px 10px;
  border-left: 2px solid var(--red);
  border-radius: 0 6px 6px 0;
  background: color-mix(in srgb, var(--red) 10%, transparent);
  font: 12px/1.7 var(--mono);
}
/* History */
.ph-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 2px 10px;
  padding: 11px 16px;
  border-top: 1px solid var(--border-muted);
}
.ph-row:first-child {
  border-top: 0;
}
.ph-title {
  font: 600 14.5px var(--sans);
  color: var(--leaf-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--leaf) 50%, transparent);
}
.ph-plain {
  font: 600 14.5px var(--sans);
}
.ph-row .pc-meta {
  grid-column: auto;
  margin-top: 3px;
}
.ph-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.ph-side code {
  font: 12px var(--mono);
  color: var(--fg-muted);
  text-decoration: underline;
}
.ph-more div {
  font-size: 12.5px;
  color: var(--fg-subtle);
}
.ph-pending {
  border-color: color-mix(in srgb, var(--sprout) 45%, var(--border));
}
/* People */
.pp-box,
.ps-box {
  padding: 16px 18px;
}
.pp-box h4,
.ps-box h4 {
  margin: 0 0 10px;
  font: 600 16px var(--sans);
}
.pp-box p,
.ps-box p {
  margin: 0 0 12px;
  color: var(--fg-muted);
}
.pp-box p b,
.ps-box p b {
  color: var(--fg);
}
.pp-box u {
  color: var(--leaf-ink);
}
.pp-list {
  display: grid;
  gap: 8px;
}
.pp-person {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--fg-muted);
}
.pp-person b {
  color: var(--fg);
  font-size: 13px;
}
.pp-person small {
  display: block;
  font-size: 12px;
}
.pp-role {
  margin-left: 6px;
  padding: 0 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font: 500 10.5px/16px var(--mono);
}
.pp-box table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.pp-box th {
  text-align: left;
  font-weight: 500;
  color: var(--fg-muted);
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-muted);
}
.pp-box td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border-muted);
  white-space: nowrap;
}
.pp-box td span {
  color: var(--fg-subtle);
}
/* Settings */
.ps-scroll {
  transform: translateY(calc(var(--scroll) * (var(--view) - 100% - 8px)));
}
.ps-box label {
  display: block;
  margin: 8px 0 6px;
  font: 600 12.5px var(--sans);
}
.ps-box small {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--fg-muted);
}
.ps-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 13px var(--mono);
  color: var(--fg-muted);
}
.ps-input {
  display: inline-block;
  min-width: 220px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  font: 13px var(--mono);
  color: var(--fg);
}
.ps-wide {
  display: block;
  font-family: var(--sans);
}
.ps-sel {
  min-width: 90px;
}
.ps-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: 600 12.5px var(--sans);
  color: var(--fg);
}
.ps-btn.primary {
  background: var(--leaf);
  border-color: var(--leaf);
  color: var(--on-leaf);
}
.ps-btn.danger {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 55%, var(--border));
}
.ps-radio {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12.5px;
}
.ps-radio small {
  margin: 0;
}
.ps-radio i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--fg-subtle);
  flex: none;
}
.ps-radio.on {
  border-color: var(--leaf);
}
.ps-radio.on i {
  border-color: var(--leaf);
  background: radial-gradient(circle, var(--leaf) 45%, transparent 50%);
}
.ps-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
}
.ps-head h4 {
  margin: 0;
}
.ps-head code {
  font: 12px var(--mono);
  color: var(--fg-muted);
}
.ps-facts {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 8px 12px;
  margin: 0;
  font-size: 12.5px;
}
.ps-facts dt {
  color: var(--fg-muted);
}
.ps-facts dd {
  margin: 0;
}
.ps-facts code {
  font: 12px var(--mono);
}
.ps-collab {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--fg-muted);
}
.ps-collab b {
  margin-right: auto;
  color: var(--fg);
}
.ps-collab .ps-btn,
.ps-collab .ps-input {
  margin: 0;
  padding: 4px 10px;
}
.ps-danger {
  border-color: color-mix(in srgb, var(--red) 50%, var(--border));
}
/* History: the lines' heads, the week, then the commits beside the verdicts */
.ph-lines {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.ph-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--leaf);
  border-radius: 8px;
  background: var(--subtle);
  font-size: 12.5px;
  color: var(--fg-muted);
}
.ph-line[data-line='sprout'] {
  border-left-color: var(--sprout);
}
.ph-line b {
  color: var(--fg);
  font: 600 13.5px var(--sans);
}
.ph-line code {
  font: 12px var(--mono);
  color: var(--fg);
}
.ph-week {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}
.ph-week div {
  padding: 6px 10px;
  border: 1px solid var(--border-muted);
  border-radius: 8px;
}
.ph-week dt {
  font-size: 11.5px;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ph-week dd {
  margin: 0;
  font: 600 17px var(--mono);
}
.ph-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 16px;
  align-items: start;
}
.ph-aside .pg-box + .pg-box {
  margin-top: 12px;
}
.ph-panel > header h4 {
  font-size: 14.5px;
}
.ph-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ph-panel li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  padding: 8px 14px;
  border-top: 1px solid var(--border-muted);
  font-size: 12.5px;
}
.ph-panel li:first-child {
  border-top: 0;
}
.ph-panel li[data-kind] {
  grid-template-columns: 8px minmax(0, 1fr);
}
.ph-panel li[data-kind]::before {
  content: '';
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--leaf);
}
.ph-panel li[data-kind='red']::before {
  background: var(--red);
}
.ph-panel li[data-kind='reverted']::before {
  background: var(--amber);
}
.ph-panel li > span {
  min-width: 0;
}
.ph-panel time {
  display: block;
  font: 11px var(--mono);
  color: var(--fg-subtle);
}
.ph-panel li:not([data-kind]) {
  grid-template-columns: auto minmax(0, 1fr);
}
.ph-panel li:not([data-kind]) time {
  grid-column: 2;
}
.ph-panel small {
  color: var(--fg-subtle);
}
.ph-panel em {
  display: block;
  font-style: normal;
  color: var(--fg-muted);
}
/* Automations: Actions (workflows, runs, one run) and Automations */
.am-subnav {
  margin-bottom: 14px;
}
.am-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--subtle);
}
.am-seg > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 13px;
  border-radius: 999px;
  font: 500 13px var(--sans);
  color: var(--fg-muted);
}
.am-seg > span.on {
  color: var(--fg);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--border);
}
.am-seg i {
  min-width: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--inset);
  font: 500 11px/16px var(--mono);
  font-style: normal;
  text-align: center;
  color: var(--fg);
}
.am-mark {
  flex: none;
  color: var(--leaf);
}
.am-mark[data-state='failure'] {
  color: var(--red);
}
.am-mark[data-state='running'] {
  color: var(--amber);
}
.am-mark[data-state='queued'] {
  color: var(--fg-subtle);
}
@media (prefers-reduced-motion: no-preference) {
  .am-mark .am-spin {
    transform-origin: 8px 8px;
    animation: am-turn 1.1s linear infinite;
  }
  .am-caret {
    animation: blink 1.1s steps(1) infinite;
  }
}
@keyframes am-turn {
  to {
    transform: rotate(360deg);
  }
}
.am-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.am-rail h5 {
  margin: 0 0 6px;
  padding: 0 10px;
  font: 600 12.5px var(--sans);
  color: var(--fg-subtle);
}
.am-rail ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
}
.am-rail li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
}
.am-rail li.on {
  background: var(--leaf-bg);
  box-shadow: inset 2px 0 0 var(--leaf);
}
.am-rail p {
  margin: 12px 0 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  color: var(--fg-muted);
}
.am-rail p b {
  color: var(--fg);
}
.am-head {
  padding: 14px 16px;
}
.am-head h4 {
  margin: 0;
  font: 650 19px var(--sans);
}
.am-head p {
  margin: 4px 0 0;
  font: 12px var(--mono);
  color: var(--fg-muted);
}
.am-filters {
  display: flex;
  gap: 14px;
  padding: 9px 16px;
  border-top: 1px solid var(--border-muted);
  border-bottom: 1px solid var(--border-muted);
  font-size: 12.5px;
  color: var(--fg-subtle);
}
.am-filters i {
  margin-left: 6px;
  padding: 2px 26px 2px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-style: normal;
  color: var(--fg);
}
.am-runs {
  list-style: none;
  margin: 0;
  padding: 0;
}
.am-run {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 3px 12px;
  align-items: start;
  padding: 10px 16px;
  border-top: 1px solid var(--border-muted);
}
.am-run:first-child {
  border-top: 0;
}
.am-run .am-mark {
  margin-top: 2px;
}
.am-title {
  font: 600 14px var(--sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.am-meta {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  font-size: 12.5px;
  color: var(--fg-subtle);
}
.am-meta b {
  color: var(--fg-muted);
  font-weight: 500;
}
.am-meta u,
.am-runhead u,
.am-facts u {
  font: 12px var(--mono);
  color: var(--fg-muted);
}
.am-event {
  color: var(--fg);
}
.am-times {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: grid;
  justify-items: end;
  gap: 1px;
  font: 11.5px var(--mono);
  color: var(--fg-subtle);
  white-space: nowrap;
}
.am-crumb {
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--leaf-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.am-runhead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  margin-bottom: 14px;
}
.am-runhead h4 {
  margin: 0;
  font: 650 21px/1.2 var(--sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.am-runhead .ps-btn {
  margin: 0;
}
.am-runhead p {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 0;
  font-size: 12.5px;
  color: var(--fg-muted);
}
.am-runhead p b {
  color: var(--fg);
  font-weight: 600;
}
.am-facts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  border-bottom: 1px solid var(--border-muted);
}
.am-facts div {
  padding: 8px 14px;
  border-right: 1px solid var(--border-muted);
}
.am-facts div:last-child {
  border-right: 0;
}
.am-facts dt {
  font-size: 11.5px;
  color: var(--fg-subtle);
}
.am-facts dd {
  margin: 2px 0 0;
  font: 500 13px var(--mono);
}
.am-jobs {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px 0;
  font-size: 12px;
  color: var(--fg-subtle);
}
.am-jobs b {
  font: 600 13.5px var(--sans);
  color: var(--fg);
}
.am-graph {
  display: flex;
  align-items: center;
  padding: 10px 14px 12px;
}
.am-node {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 0 8px;
  align-items: center;
  min-width: 150px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  font-size: 13px;
}
.am-node.on {
  border: 2px solid var(--leaf);
}
.am-node small {
  grid-column: 2;
  font: 11.5px var(--mono);
  color: var(--fg-subtle);
}
.am-stem {
  width: 44px;
  height: 2px;
  background: var(--leaf);
}
.am-stem[data-state='running'] {
  background: repeating-linear-gradient(90deg, var(--amber) 0 5px, transparent 5px 9px);
}
.am-log {
  margin-top: 12px;
}
.am-loghead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-muted);
  font-size: 13.5px;
}
.am-loghead > span:first-of-type {
  color: var(--fg-muted);
}
.am-search,
.am-dl {
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: 11.5px var(--mono);
  color: var(--fg-subtle);
}
.am-search {
  margin-left: auto;
  min-width: 140px;
}
.am-dl {
  color: var(--fg);
}
.am-logbox {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 250px;
  overflow: hidden;
  background: var(--bg);
}
.am-step {
  display: grid;
  grid-template-columns: 12px 14px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 5px 14px;
  border-top: 1px solid var(--border-muted);
  background: var(--subtle);
  font-size: 12.5px;
}
.am-step.wait {
  grid-template-columns: 14px minmax(0, 1fr) auto;
  padding-left: 34px;
  color: var(--fg-subtle);
}
.am-fold {
  font-style: normal;
  color: var(--fg-subtle);
}
.am-step time {
  font: 11px var(--mono);
  color: var(--fg-subtle);
}
.am-line {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  padding: 0 14px;
  font: 11.5px/1.7 var(--mono);
}
.am-line span {
  text-align: right;
  color: var(--fg-subtle);
}
.am-line code {
  font: inherit;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
}
.am-line mark {
  background: none;
  color: var(--amber);
}
.am-tail {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-top: 1px solid var(--border-muted);
  font: 11.5px var(--mono);
  color: var(--fg-subtle);
}
.am-caret {
  width: 7px;
  height: 13px;
  background: var(--leaf);
}
.am-autohead {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.am-tools {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.am-tools .ps-btn {
  margin: 0;
}
.am-autofacts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 16px;
  border: 1px solid var(--border-muted);
  border-radius: 8px;
}
.am-autofacts div {
  border-bottom: 1px solid var(--border-muted);
}
.am-autofacts div:nth-child(3n) {
  border-right: 0;
}
.am-autofacts div:nth-last-child(-n + 3) {
  border-bottom: 0;
}
.am-autofacts dd {
  overflow-wrap: anywhere;
}
.am-yaml {
  margin: 10px 16px 0;
  padding: 10px 14px;
  border: 1px solid var(--border-muted);
  border-radius: 8px;
  background: var(--bg);
  font: 11.5px/1.6 var(--mono);
  color: var(--fg-muted);
  white-space: pre-wrap;
}
.am-triggers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 10px 16px 12px;
}
.am-triggers li {
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font: 12px/20px var(--mono);
  color: var(--fg-muted);
}
/* People: an org that owns the repository */
.pp-org {
  margin-left: 6px;
  font: 500 10.5px/16px var(--mono);
  color: var(--bean);
}
/* Settings: the shell (who, a nav of sections) and the sections scrolling past */
.ps-shell {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 24px;
  max-width: 940px;
  margin: 0 auto;
}
.ps-aside {
  align-self: start;
}
.ps-who {
  padding: 4px 10px 14px;
}
.ps-who b {
  display: block;
  font: 600 15px var(--sans);
}
.ps-who small {
  font: 11.5px var(--mono);
  color: var(--fg-muted);
}
.ps-group {
  display: block;
  padding: 0 10px 4px;
  font: 600 11.5px var(--sans);
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ps-nav {
  display: grid;
  gap: 1px;
}
.ps-nav span {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--fg-muted);
  white-space: nowrap;
}
.ps-nav span.on {
  color: var(--fg);
  background: var(--leaf-bg);
  box-shadow: inset 2px 0 0 var(--leaf);
}
.ps-nav span.danger {
  color: var(--red);
}
.ps-main {
  min-width: 0;
}
.ps-shell .ps-scroll {
  position: relative;
  transform: translateY(calc(var(--scroll) * (var(--view) - 100% - 48px)));
}
.ps-title {
  margin: 0 0 14px;
  font: 650 22px var(--sans);
}
.ps-box h5 {
  margin: 14px 0 6px;
  font: 600 14px var(--sans);
}
.ps-box h6 {
  margin: 12px 0 2px;
  font: 600 12.5px var(--sans);
  color: var(--fg-muted);
}
.ps-box h6 u {
  color: var(--leaf-ink);
}
.ps-box p code {
  font: 12px var(--mono);
  color: var(--fg);
}
.ps-meter {
  height: 6px;
  border-radius: 999px;
  background: var(--inset);
  overflow: hidden;
}
.ps-meter i {
  display: block;
  height: 100%;
  background: var(--leaf);
}
.ps-box .ps-meterline {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 6px 0 4px;
  font-size: 12px;
}
.ps-secret {
  margin-top: 6px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12.5px;
}
.ps-secret code {
  font: 600 12.5px var(--mono);
  color: var(--fg);
}
.ps-secret.over > div > code:first-child {
  text-decoration: line-through;
  color: var(--fg-muted);
}
.ps-secret small {
  margin-top: 2px;
}
.ps-secret .ps-val {
  font-weight: 400;
  color: var(--leaf-ink);
}
.ps-tag {
  margin-left: 6px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font: 500 10.5px/16px var(--mono);
  color: var(--bean);
}
.ps-social {
  display: grid;
  align-content: end;
  gap: 2px;
  width: min(100%, 300px);
  aspect-ratio: 2;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background:
    radial-gradient(circle at 80% 20%, var(--leaf-bg), transparent 60%),
    linear-gradient(160deg, var(--inset), var(--bg));
  font-size: 11.5px;
  color: var(--fg-muted);
}
.ps-social i {
  width: 22px;
  height: 22px;
  margin-bottom: auto;
  border-radius: 6px;
  background: var(--leaf);
}
.ps-social b {
  font: 600 15px var(--mono);
  color: var(--fg);
}
.ps-invite {
  gap: 8px;
}
.ps-invite .ps-input:first-child {
  min-width: 140px;
  color: var(--fg-subtle);
}
@media (max-width: 900px) {
  .ph-split {
    grid-template-columns: minmax(0, 1fr);
  }
  .ph-aside {
    display: none;
  }
}
@media (max-width: 640px) {
  .ph-lines {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .ph-week {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .ph-line span {
    display: none;
  }
  .am-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .am-rail h5,
  .am-rail p {
    display: none;
  }
  .am-rail ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .am-rail li {
    padding: 4px 9px;
    font-size: 12px;
  }
  .am-run {
    grid-template-columns: 16px minmax(0, 1fr);
  }
  .am-times {
    grid-column: 2;
    grid-row: auto;
    display: flex;
    gap: 10px;
  }
  .am-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .am-facts div:nth-child(n + 4) {
    display: none;
  }
  .am-runhead h4 {
    font-size: 17px;
  }
  .am-runhead .ps-btn {
    display: none;
  }
  .am-node {
    min-width: 0;
    flex: 1;
  }
  .am-stem {
    width: 20px;
  }
  .am-search {
    display: none;
  }
  .am-dl {
    margin-left: auto;
  }
  .am-logbox {
    height: 200px;
  }
  .am-autohead {
    flex-direction: column;
  }
  .am-autofacts {
    grid-template-columns: minmax(0, 1fr);
  }
  .am-autofacts div {
    border-right: 0;
    border-bottom: 1px solid var(--border-muted);
  }
  .am-autofacts div:nth-last-child(-n + 3) {
    border-bottom: 1px solid var(--border-muted);
  }
  .am-autofacts div:last-child {
    border-bottom: 0;
  }
  .ps-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .ps-who,
  .ps-group {
    display: none;
  }
  /* The nav row stays above the sections as they scroll up under it. */
  .ps-aside {
    position: relative;
    z-index: 1;
    margin: -12px -12px 0;
    padding: 10px 12px;
    background: var(--bg);
    border-bottom: 1px solid var(--border-muted);
    box-shadow: 0 -24px 0 var(--bg);
  }
  .ps-nav {
    display: flex;
    gap: 4px;
    overflow: hidden;
  }
  /* On a phone the nav is one row: it starts at the section in view. */
  .ps-nav span.past {
    display: none;
  }
  .ps-shell .ps-scroll {
    transform: translateY(calc(var(--scroll) * (var(--view) - 100% - 90px)));
  }
}
/* demo-pages:end */

/* lifecycle:start (the continuous stalk check) */
.stalkdemo .rows {
  height: 450px;
}
.stalkdemo .srow .st {
  white-space: nowrap;
}
.stalkdemo .srow.inbatch {
  background: color-mix(in srgb, var(--amber) 7%, transparent);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--amber) 60%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .stalkdemo .srow.inbatch .lf {
    animation: batch-check 1.6s ease-in-out infinite;
  }
}
@keyframes batch-check {
  50% {
    filter: drop-shadow(0 0 5px var(--amber));
  }
}
/* lifecycle:end */

/* jcard:start (the sent-back journey, recreated live) */
.jcard {
  margin-top: 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--subtle);
  overflow: hidden;
  font-size: 13px;
}
.jc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-muted);
}
.jc-head b {
  font-size: 14.5px;
  font-weight: 600;
  flex-basis: 100%;
}
.jc-tag.red {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 40%, var(--border));
  background: color-mix(in srgb, var(--red) 12%, transparent);
  font-size: 11px;
  line-height: 16px;
}
.jc-meta {
  font: 11.5px var(--mono);
  color: var(--fg-subtle);
}
.jc-grid {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
}
.jc-steps {
  list-style: none;
  margin: 0;
  padding: 12px 14px 10px;
}
.jc-steps li {
  position: relative;
  padding: 5px 6px 9px 24px;
  font-size: 13.5px;
  color: var(--fg);
  line-height: 1.35;
  border-radius: 6px;
}
.jc-steps li span {
  font: 11px var(--mono);
  color: var(--fg-subtle);
  margin-right: 6px;
}
.jc-steps li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--fg-subtle);
}
.jc-steps li.agent::before {
  box-shadow: inset 0 0 0 2px var(--bean);
}
.jc-steps li.bad::before {
  background: var(--red);
  box-shadow: none;
}
.jc-steps li.on {
  background: color-mix(in srgb, var(--red) 9%, transparent);
  box-shadow: inset 2px 0 0 var(--red);
}
.jc-steps li.rework::before {
  width: 17px;
  height: 17px;
  left: 1px;
  top: 2px;
  border-radius: 0;
  box-shadow: none;
  background: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' d='M17.5 8.2C16.8 4.8 13.6 3 10.4 3.8 8.6 4.3 7.3 5.5 6.6 7'/%3E%3Cpath fill='%23fff' d='M4.6 5.2l2 3.6 2.9-2.4Z'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' d='M17.5 8.2C16.8 4.8 13.6 3 10.4 3.8 8.6 4.3 7.3 5.5 6.6 7'/%3E%3Cpath fill='%23fff' d='M4.6 5.2l2 3.6 2.9-2.4Z'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
}
.jc-steps li.live::before {
  box-shadow: none;
  border: 2px solid var(--bean);
  border-top-color: transparent;
  width: 8px;
  height: 8px;
}
@media (prefers-reduced-motion: no-preference) {
  .jc-steps li.live::before {
    animation: jspin 0.9s linear infinite;
  }
}
.jc-detail {
  border-left: 1px solid var(--border-muted);
  padding: 12px 0 12px;
  min-width: 0;
}
.jc-label {
  font: 11px var(--mono);
  color: var(--fg-subtle);
  padding: 0 14px;
  margin: 2px 0 4px;
}
.jc-fail {
  display: block;
  margin: 0 14px 12px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  color: var(--red);
  background: color-mix(in srgb, var(--red) 10%, transparent);
  white-space: normal;
}
.jc-landed {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 0 14px 8px;
  font-size: 12.5px;
  color: var(--fg-muted);
}
.jc-landed b {
  font: 600 11.5px var(--mono);
  color: var(--leaf-ink);
  margin-right: 4px;
}
.jcard .hunk {
  margin: 0;
}
@media (max-width: 760px) {
  .jc-grid {
    grid-template-columns: 1fr;
  }
  .jc-detail {
    border-left: 0;
    border-top: 1px solid var(--border-muted);
  }
}
.tile.big {
  padding-bottom: 24px;
}
/* jcard:end */
/* mq-section:start (merge queue vs Gitstalk: trunk and stalk, drawn by mq-section.js) */
.mqs {
  min-height: calc(100vh - 60px);
  min-height: calc(100svh - 60px);
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(32px, 6vh, 64px) var(--gutter) clamp(16px, 3vh, 32px);
  border-top: 1px solid var(--border-muted);
}
.mqs h2 {
  margin: 0 auto;
  text-align: center;
  font: 600 clamp(25px, 3.3vw, 46px) / 1.08 var(--sans);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.mqs h2 span {
  display: block;
  color: var(--fg-muted);
}
.mqs-stage {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: clamp(22px, 4vh, 40px) auto 0;
  min-height: 520px;
}
.mqs-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
@media (max-width: 759px) {
  .mqs-stage {
    min-height: 0;
    aspect-ratio: 1 / 2.15;
  }
}
/* mq-section:end */

/* git-section:start ("Just Git.": clone, push a bean, import, Actions) */
.gitgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 44px;
}
.gitcard {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 6px 14px;
  align-content: start;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--subtle);
}
.gitcard > * {
  grid-column: 1 / -1;
}
.gitcard > h3 {
  grid-column: 2;
  align-self: center;
}
.gitcard .gi {
  grid-column: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--leaf) 45%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--leaf) 10%, transparent);
  font: 600 15px var(--mono);
  color: var(--leaf-ink);
}
.gitcard .gi.bean::before {
  content: '';
  width: 18px;
  height: 18px;
  background: var(--bean);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8.94 8.97c2.2-1.6 6.4-.6 7.3 2.2.9 2.8-1.6 4.9-4.4 4.6-2.8-.3-4.6-2.4-4.2-4.6.2-.9.6-1.7 1.3-2.2Z'/%3E%3C/svg%3E")
    center / 150% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8.94 8.97c2.2-1.6 6.4-.6 7.3 2.2.9 2.8-1.6 4.9-4.4 4.6-2.8-.3-4.6-2.4-4.2-4.6.2-.9.6-1.7 1.3-2.2Z'/%3E%3C/svg%3E")
    center / 150% no-repeat;
}
.gitcard h3 {
  margin: 0;
  font: 600 18px/1.3 var(--sans);
}
.gitcard h3 .chip {
  margin-left: 6px;
}
.gitcard p {
  margin: 4px 0 0;
  color: var(--fg-muted);
  font-size: 15.5px;
}
.gitcard p code {
  font: 0.86em var(--mono);
  color: var(--fg);
}
.gitcard .gl {
  display: block;
  margin-top: 4px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  font: 13px var(--mono);
  color: var(--fg);
  overflow-wrap: anywhere;
}
.gitcard .hosts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.gitcard .hosts span {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  font: 600 13px var(--sans);
  color: var(--fg);
}
.gitcard .hosts span:last-child {
  font: 13px var(--mono);
  color: var(--fg-muted);
}
@media (max-width: 1080px) {
  .gitgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .gitgrid {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 32px;
  }
  .gitcard {
    padding: 16px;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 6px 12px;
  }
  .gitcard .gi {
    width: 30px;
    height: 30px;
  }
}
.gitcard.wide {
  grid-column: 1 / -1;
  border-color: color-mix(in srgb, var(--leaf) 40%, var(--border));
}
.gitcard.wide .gl {
  max-width: 420px;
}
.gitcard .later {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 14.5px;
  color: var(--fg-muted);
}
.gitcard .gaps {
  font-size: 14px;
  color: var(--fg-subtle);
}
/* git-section:end */

/* automations-section:start (the builder recreated: a blank file filled in field by field, the
   YAML beside it, save as a bean, then a test run streaming its steps). The YAML and the run
   keep their final size from the start (the script hides what has not happened yet with
   visibility), so on a wide screen the figure never changes height while it plays. */
.audemo {
  margin: 44px 0 0;
}
.audemo .crumb em {
  font-style: normal;
  color: var(--fg);
}
.au-templates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-muted);
  background: var(--subtle);
}
.au-label {
  font: 500 11px/1.4 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.au-templates .au-label {
  flex: none;
  margin-right: 4px;
  white-space: nowrap;
}
.au-tpl {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  font: 500 12.5px var(--sans);
  color: var(--fg-muted);
}
.au-tpl.on {
  border-color: color-mix(in srgb, var(--leaf) 60%, var(--border));
  background: var(--leaf-bg);
  color: var(--leaf-ink);
}
.au-body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}
.au-form {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 18px;
  min-width: 0;
}
.au-field {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
}
.au-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
.au-input {
  display: block;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--subtle);
  color: var(--fg);
  font: 13px/1.5 var(--sans);
  overflow-wrap: anywhere;
}
.au-input.focus {
  border-color: var(--leaf);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--leaf) 28%, transparent);
}
.au-input .sel {
  background: color-mix(in srgb, var(--leaf) 30%, transparent);
}
.au-mono {
  font: 12.5px/1.5 var(--mono);
}
.au-input.au-prompt {
  min-height: 74px;
  font: 12.5px/1.55 var(--mono);
  white-space: pre-wrap;
}
.au-input.bad {
  border-color: var(--red);
}
.au-input.ph {
  color: var(--fg-subtle);
}
.au-file {
  font-size: 12.5px;
  color: var(--fg-subtle);
  overflow-wrap: anywhere;
}
.au-file code {
  font: 12px var(--mono);
  color: var(--fg-muted);
}
.au-file code:first-child {
  margin-left: 6px;
}
.au-file .au-fname {
  color: var(--fg);
}
.au-use {
  margin-left: 8px;
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.au-use.press {
  color: var(--leaf-ink);
}
.au-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.au-chip {
  padding: 2px 9px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--subtle);
  font: 12px/18px var(--mono);
  color: var(--fg-subtle);
}
.au-chip.on {
  border-color: color-mix(in srgb, var(--leaf) 60%, var(--border));
  background: var(--leaf-bg);
  color: var(--leaf-ink);
}
.au-filter[hidden] {
  display: none;
}
.au-filter {
  display: grid;
  gap: 6px;
  padding: 8px 10px;
  border-left: 2px solid color-mix(in srgb, var(--leaf) 55%, var(--border));
  background: var(--subtle);
  border-radius: 0 7px 7px 0;
}
.au-ftitle {
  font-size: 12.5px;
  color: var(--fg-muted);
}
.au-ftitle code {
  font: 12px var(--mono);
  color: var(--fg);
}
.au-inline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.au-sub {
  font-size: 12.5px;
  color: var(--fg-muted);
}
.au-filter .au-input {
  background: var(--bg);
}
.au-hint {
  font-size: 12.5px;
  color: var(--fg-subtle);
}
.au-seg {
  display: inline-flex;
  justify-self: start;
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
  font: 500 12.5px/1 var(--sans);
}
.au-seg span {
  padding: 7px 12px;
  color: var(--fg-muted);
  background: var(--bg);
}
.au-seg span + span {
  border-left: 1px solid var(--border);
}
.au-seg span.on {
  background: var(--leaf-bg);
  color: var(--leaf-ink);
}
.au-seg span.focus {
  box-shadow: inset 0 0 0 2px var(--leaf);
}
.au-modelrow {
  position: relative;
}
.au-select {
  position: relative;
  padding-right: 26px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.au-select::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -5px;
  border-right: 1.5px solid var(--fg-muted);
  border-bottom: 1.5px solid var(--fg-muted);
  transform: rotate(45deg);
}
.au-menu {
  position: absolute;
  z-index: 3;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  display: grid;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  box-shadow: var(--shadow);
  font: 12px/1.4 var(--mono);
  color: var(--fg-muted);
}
.au-menu[hidden] {
  display: none;
}
.au-menu span {
  padding: 4px 8px;
  border-radius: 5px;
  overflow-wrap: anywhere;
}
.au-menu span.hover {
  background: var(--leaf-bg);
  color: var(--leaf-ink);
}
.au-menu span.chosen::before {
  content: '✓ ';
}
.au-check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  min-height: 32px;
  font-size: 13px;
  color: var(--fg-muted);
}
.au-check code {
  font: 11.5px var(--mono);
  color: var(--fg-subtle);
}
.au-box {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--border);
  border-radius: 3px;
  background: var(--bg);
}
.au-note {
  font-size: 12px;
  color: var(--fg-subtle);
}
.au-note.bad {
  color: var(--red);
  font-family: var(--mono);
  overflow-wrap: anywhere;
}
.au-caret {
  display: inline-block;
  width: 7px;
  height: 14px;
  margin-left: 1px;
  vertical-align: -2px;
  background: var(--leaf);
}
.au-save {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border-muted);
}
.au-valid {
  margin-right: auto;
  font: 12px var(--mono);
  color: var(--leaf-ink);
}
.au-valid.off {
  color: var(--fg-subtle);
}
.au-valid.bad {
  color: var(--red);
}
.au-btn {
  padding: 6px 14px;
  border: 1px solid var(--leaf);
  border-radius: 7px;
  background: var(--leaf);
  color: var(--on-leaf);
  font: 600 13px var(--sans);
  white-space: nowrap;
}
.au-btn.off {
  opacity: 0.45;
}
.au-btn.au-ghost {
  border-color: var(--border);
  background: var(--bg);
  color: var(--fg);
}
.au-btn.press {
  border-color: var(--leaf);
  background: var(--leaf-bg);
  color: var(--leaf-ink);
}
.au-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  min-height: 20px;
  margin: 0;
  font: 12.5px/1.5 var(--mono);
  color: var(--fg-muted);
}
.au-status b {
  color: var(--fg);
  font-weight: 500;
  overflow-wrap: anywhere;
}
.au-bean {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bean);
}
.au-phase {
  padding: 0 7px;
  border: 1px solid color-mix(in srgb, var(--amber) 55%, var(--border));
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--amber);
}
.au-phase.landed {
  border-color: color-mix(in srgb, var(--leaf) 55%, var(--border));
  background: var(--leaf-bg);
  color: var(--leaf-ink);
}
.au-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-left: 1px solid var(--border-muted);
}
.au-yaml {
  min-width: 0;
  background: var(--subtle);
}
.au-yhead {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-muted);
  font: 12px var(--mono);
  color: var(--fg-subtle);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.au-yhead b {
  color: var(--fg);
  font: 600 13px var(--sans);
}
/* `|-` and `->` stay two characters: the mono face's ligatures would hide YAML. The extra
   class outranks the `font` shorthands below, which reset these. */
.audemo .au-yaml pre,
.audemo .au-steps,
.audemo .au-input.au-prompt {
  font-variant-ligatures: none;
  font-feature-settings:
    'liga' 0,
    'calt' 0;
}
.au-yaml pre {
  margin: 0;
  padding: 12px 0;
  /* The finished file's height from the start, so the run below it never moves. */
  min-height: calc(15 * 1.6em + 24px);
  font: 12.5px/1.6 var(--mono);
  color: var(--fg);
  white-space: normal;
}
/* Long lines wrap with a hanging indent instead of scrolling: the text stays the file's. */
.au-yaml pre span {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 0 16px 0 calc(16px + 4ch);
  text-indent: -4ch;
  min-height: 1.6em;
}
.au-yaml pre span.new {
  background: var(--add-bg);
  box-shadow: inset 2px 0 var(--leaf);
}
.au-yaml pre span.bad {
  background: var(--red-bg);
  box-shadow: inset 2px 0 var(--red);
}
/* The test run: always laid out at its final size, revealed step by step. */
.au-runbox {
  position: relative;
  flex: 1 0 auto;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.au-idle {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: start center;
  margin: 0;
  padding: 48px 18px 18px;
  text-align: center;
  font-size: 14px;
  color: var(--fg-subtle);
}
.au-idle[hidden] {
  display: none;
}
.au-rbody {
  padding: 14px 18px 16px;
}
.audemo .gone {
  visibility: hidden;
}
.au-rhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: 14px;
}
.au-rhead b {
  color: var(--fg);
  font-weight: 600;
}
.au-rmeta {
  font-size: 12.5px;
  color: var(--fg-subtle);
}
.au-rtime {
  margin-left: auto;
  font: 12.5px var(--mono);
  color: var(--fg-muted);
}
.au-rstate {
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font: 500 11.5px/1.5 var(--mono);
  color: var(--fg-muted);
}
.au-rstate.run {
  border-color: color-mix(in srgb, var(--amber) 55%, var(--border));
  color: var(--amber);
}
.au-rstate.ok {
  border-color: color-mix(in srgb, var(--leaf) 55%, var(--border));
  background: var(--leaf-bg);
  color: var(--leaf-ink);
}
.au-job {
  margin: 8px 0 0;
  font: 12px var(--mono);
  color: var(--fg-subtle);
}
.au-steps {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font: 12.5px/1.5 var(--mono);
}
.au-steps li {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.au-st {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--fg);
}
.au-st i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  align-self: center;
}
.au-steps li.run .au-st i {
  border-color: var(--amber);
  background: var(--amber);
}
.au-steps li.ok .au-st i {
  border-color: var(--leaf);
  background: var(--leaf);
}
.au-steps li.wait .au-st {
  color: var(--fg-subtle);
}
.au-st em {
  margin-left: auto;
  font-style: normal;
  color: var(--fg-subtle);
}
.au-log {
  display: block;
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-muted);
  overflow-wrap: anywhere;
}
.au-log.au-call {
  padding-left: 30px;
  text-indent: -14px;
  color: var(--fg);
}
.au-log.au-res {
  padding-left: 44px;
  text-indent: -14px;
  color: var(--fg-subtle);
}
.au-out {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-muted);
}
.au-summary {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg);
}
.au-summary b {
  margin-right: 6px;
  color: var(--leaf-ink);
}
.au-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0;
  font-size: 13px;
}
.au-facts div {
  display: flex;
  gap: 6px;
}
.au-facts dt {
  color: var(--fg-subtle);
}
.au-facts dd {
  margin: 0;
  color: var(--fg);
}
.aunote {
  margin: 18px 0 0;
  text-align: center;
  font-size: 15px;
  color: var(--fg-muted);
}
.aunote .chip {
  margin-right: 10px;
}
.chip.rolling {
  border-color: color-mix(in srgb, var(--bean) 45%, var(--border));
  background: var(--bean-bg);
  color: var(--bean);
  font-size: 11.5px;
  font-weight: 500;
  vertical-align: 0.15em;
}
@media (max-width: 760px) {
  .audemo {
    margin-top: 32px;
  }
  .au-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .au-side {
    border-left: 0;
    border-top: 1px solid var(--border-muted);
  }
  .au-yaml pre,
  .au-input.au-prompt {
    font-size: 11px;
  }
  .au-row {
    gap: 10px;
  }
  .au-templates {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .au-tpl {
    flex: none;
  }
  .au-form,
  .au-templates,
  .au-rbody {
    padding-left: 14px;
    padding-right: 14px;
  }
  .au-rtime {
    margin-left: 0;
  }
  .audemo .app-top .crumb {
    font-size: 14px;
  }
}
/* automations-section:end */