/* JetBrains Mono, self-hosted latin subset (variable 400-700) — no cross-origin
   request, so text paints on the first connection. See fonts/README.md. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* autor3search landing — palette lifted from the design canvas
   ink #0c100d · panel #0f1410 · rule #1d2921 · green #4ad688 · red #e8654d */

html, body {
  margin: 0;
  padding: 0;
  background: #0c100d;
  color: #cfdcd1;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
body { font-size: 15px; line-height: 1.6; }
a { color: #4ad688; text-decoration: none; }
a:hover { color: #7ce8ab; }
::selection { background: #1f5c3a; color: #eafbef; }
@keyframes blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }

.wrap {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}
.rule { border-top: 1px solid #1d2921; }
.sunken { background: #0a0e0b; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hero-viz { position: absolute; inset: 0; opacity: 0.55; }
.hero-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(12, 16, 13, 0) 30%, rgba(12, 16, 13, 0.88) 100%);
}

.nav {
  position: relative;
  z-index: 2;
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.wordmark { color: #eef4ee; font-weight: 700; }
.wordmark span { color: #4ad688; }
.spacer { flex: 1; }
.nav-gh {
  font-size: 13px;
  color: #8fa393;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav-gh:hover { color: #4ad688; }

.badge {
  border: 1px solid #2a3c30;
  border-radius: 3px;
  padding: 2px 5px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.badge-go { border-color: #4ad688; color: #4ad688; }

.hero-body {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 48px 24px 96px;
  box-sizing: border-box;
}
.hero-body h1 {
  margin: 0 0 22px;
  color: #eef4ee;
  font-size: clamp(34px, 6.5vw, 72px);
  line-height: 1.1;
  font-weight: 700;
  text-wrap: pretty;
  max-width: min(18ch, 100%);
  text-shadow: 0 2px 30px rgba(12, 16, 13, 0.9);
}
.hero-body h1 .accent { color: #4ad688; }
.hero-sub {
  margin: 0 0 36px;
  color: #9fb0a3;
  font-size: 17px;
  max-width: min(48ch, 100%);
  text-wrap: pretty;
  text-shadow: 0 1px 12px rgba(12, 16, 13, 0.9);
}
.hero-sub .keep { color: #4ad688; font-weight: 700; }
.hero-sub .discard { color: #e8654d; font-weight: 700; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.scroll-hint {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-bottom: 26px;
  color: #728476;
  font-size: 12px;
}

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

.btn-primary {
  background: #4ad688;
  color: #0c100d;
  border: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 26px;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 0 40px rgba(74, 214, 136, 0.25);
}
.btn-primary:hover { background: #7ce8ab; }

.btn-ghost {
  border: 1px solid #2a3c30;
  color: #cfdcd1;
  font-family: inherit;
  font-size: 15px;
  padding: 13px 26px;
  border-radius: 4px;
  background: rgba(12, 16, 13, 0.6);
  cursor: pointer;
  display: inline-block;
}
.btn-ghost:hover { border-color: #4ad688; color: #eef4ee; }
.btn-ghost.sm { font-size: 13px; padding: 10px 18px; background: none; }

/* ---------- run section ---------- */

.split {
  padding-top: 88px;
  padding-bottom: 88px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 48px;
  align-items: center;
}
.terminal {
  border: 1px solid #223227;
  border-radius: 8px;
  background: #0f1410;
  overflow: hidden;
  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.45);
}
.terminal-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #1d2921;
  background: #121812;
}
.terminal-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.terminal-bar .r { background: #e8654d; }
.terminal-bar .y { background: #d9b04a; }
.terminal-bar .g { background: #4ad688; }
.terminal-bar em {
  color: #728476;
  font-size: 12px;
  font-style: normal;
  margin-left: 8px;
}
.terminal-body { padding: 18px; height: 440px; overflow: hidden; }

.split h2 {
  margin: 0 0 16px;
  color: #eef4ee;
  font-size: 26px;
  font-weight: 700;
  text-wrap: pretty;
}
.split h2 .accent { color: #4ad688; }
.split p {
  margin: 0 0 22px;
  color: #8fa393;
  font-size: 14px;
  max-width: min(44ch, 100%);
  text-wrap: pretty;
}
.checks { display: grid; gap: 10px; font-size: 13px; }
.checks li { display: flex; gap: 12px; color: #cfdcd1; }
.checks { list-style: none; margin: 0; padding: 0; }
.checks li::before { content: '✓'; color: #4ad688; }

/* ---------- loop ---------- */

.loop { padding: 72px 24px 56px; }
.loop-viz { width: 100%; height: 220px; min-width: 0; overflow: hidden; }
.caption {
  margin-top: 8px;
  color: #728476;
  font-size: 13px;
  text-align: center;
}

/* ---------- stats ---------- */

.stats {
  padding-top: 48px;
  padding-bottom: 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 36px;
  align-items: center;
}
.stats-viz { width: 100%; height: 300px; min-width: 0; overflow: hidden; }
.stat-figure { color: #eef4ee; font-size: 30px; font-weight: 700; }
.stat-label { color: #728476; font-size: 13px; margin-bottom: 20px; }
.stat-note {
  color: #8fa393;
  font-size: 13px;
  max-width: min(44ch, 100%);
  text-wrap: pretty;
  margin-bottom: 16px;
}

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

.ports {
  padding-top: 48px;
  padding-bottom: 48px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 14px;
  align-items: center;
}
.port {
  color: #8fa393;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.port:hover { color: #4ad688; }
.port-primary { color: #cfdcd1; }

.colophon {
  padding-top: 18px;
  padding-bottom: 18px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #728476;
}
.colophon a { color: #728476; }

/* ---------- modal ---------- */

.modal[hidden] { display: none !important; }
.modal {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 6, 0.78);
  backdrop-filter: blur(4px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
.modal-panel {
  background: #0f1410;
  border: 1px solid #2a3c30;
  border-radius: 8px;
  max-width: 660px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}
.modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #1d2921;
}
.modal-title { color: #eef4ee; font-weight: 700; font-size: 15px; }
.modal-close {
  background: none;
  border: none;
  color: #8fa393;
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
}
.modal-close:hover { color: #eef4ee; }

.tabs { display: flex; gap: 10px; padding: 16px 20px 0; flex-wrap: wrap; }
.tab {
  background: none;
  border: 1px solid #223227;
  color: #8fa393;
  font-family: inherit;
  font-size: 13px;
  padding: 8px 18px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tab .badge { color: #8fa393; }
.tab[aria-selected='true'] {
  background: #12241a;
  border-color: #4ad688;
  color: #eef4ee;
}

.prompt {
  margin: 16px 20px;
  padding: 16px;
  border: 1px solid #1d2921;
  border-radius: 6px;
  background: #0a0e0b;
  font-family: inherit;
  font-size: 11.5px;
  line-height: 1.6;
  color: #a9bcad;
  white-space: pre-wrap;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.modal-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 20px 20px;
}
.btn-copy {
  background: #4ad688;
  color: #0c100d;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 11px 18px;
  border-radius: 4px;
  cursor: pointer;
}
.btn-copy:hover { background: #7ce8ab; }
.lang-note { color: #728476; font-size: 12px; }

:focus-visible { outline: 2px solid #4ad688; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}