:root {
  --bg: #fafaf9;
  --surface: #ffffff;
  --fg: #0c0a09;
  --fg-muted: #57534e;
  --border: #e7e5e4;
  --accent: #1d4ed8;
  --accent-hover: #1e40af;
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  font-size: 16px;
  line-height: 1.6;
}

.font-display {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-feature-settings: 'ss01', 'ss02';
  letter-spacing: -0.01em;
}

.prose-narrow { max-width: 65ch; }
.container-x { max-width: 1100px; margin-inline: auto; padding-inline: 1.5rem; }

a.link-quiet {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.15s ease;
}
a.link-quiet:hover { text-decoration-color: var(--accent); }

.hairline { border-top: 1px solid var(--border); }

.numbered-list { counter-reset: item; }
.numbered-list > * { counter-increment: item; }
.numbered-list .num::before {
  content: counter(item, decimal-leading-zero);
}

.kbd {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--fg-muted);
}

.tag {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  background: var(--surface);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.95rem;
  transition: background 0.15s ease, color 0.15s ease, transform 0.05s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary { background: var(--fg); color: var(--bg); }
.btn-primary:hover { background: #292524; }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--fg); }

.field-label { font-size: 0.85rem; font-weight: 500; color: var(--fg); display:block; margin-bottom: 0.4rem; }
.field-input, .field-textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
  font: inherit;
  color: var(--fg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field-input:focus, .field-textarea:focus {
  outline: none;
  border-color: var(--fg);
  box-shadow: 0 0 0 3px rgba(12,10,9,0.08);
}
.field-textarea { resize: vertical; min-height: 160px; }
.field-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.diagram {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem;
  overflow-x: auto;
  white-space: pre;
  color: var(--fg);
}

@media (max-width: 640px) {
  .diagram { font-size: 0.68rem; }
}