@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-roman.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans.ttf") format("truetype"); font-display: swap; }
:root {
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-synthesis: none;
  color-scheme: light;
  --paper: #f7f4ea;
  --paper-lift: #fffcf5;
  --ink: #211e18;
  --ink-soft: #655f54;
  --ink-faint: #777064;
  --rule: #ded8ca;
  --rule-strong: #beb6a5;
  --accent: #ad482f;
  --accent-soft: #f0e1d8;
  --sage: #56684a;
  --sage-soft: #e8ece2;
  --ease-out: cubic-bezier(.16, .8, .3, 1);
  --ease-settle: cubic-bezier(.2, 1.12, .4, 1);
  --ease: var(--ease-out);
  --duration-fast: 140ms;
  --duration-normal: 220ms;
  --control-height: 50px;
  --control-radius: 4px;
  --type-kicker: 11px;
  --type-label: 12px;
  --type-small: 13px;
  --type-body: 14px;
  --type-control: 15px;
  color: var(--ink);
  background: var(--paper);
}
::selection { background: var(--accent-soft); color: var(--ink); }
.brain-signature { display: inline-flex; flex: 0 0 auto; width: 28px; height: 28px; vertical-align: middle; }
.brain-mark { display: block; width: 100%; height: 100%; overflow: visible; }
.brain-mark__cross { stroke: var(--rule); stroke-width: 1.2; }
.brain-mark__edge { stroke: var(--rule-strong); stroke-width: 1.4; }
.brain-mark__node { fill: var(--paper-lift); stroke: var(--ink-faint); stroke-width: 1.5; }
.brain-mark__signal { stroke: var(--accent); stroke-width: 2.8; stroke-linecap: round; stroke-dasharray: .08 .92; stroke-dashoffset: 1; opacity: 0; }
.brain-mark__core { transform-box: fill-box; transform-origin: center; }
.brain-mark__ring { stroke: var(--accent); stroke-opacity: .25; stroke-width: 1.5; }
.brain-mark__dot { fill: var(--accent); }
.brain-kicker { display: flex; align-items: center; gap: 12px; }
.brain-kicker .brain-signature { width: 44px; height: 44px; }
.wordmark { display: inline-flex; align-items: center; }
.wordmark .brain-signature { margin: 0 9px 0 0; }
.docs-footer .brain-signature { width: 20px; height: 20px; margin-right: 7px; }
.entry-kicker .brain-signature { width: 36px; height: 36px; }

/* The same ink response on the site, forms and documentation. */
a, button, input, textarea, .original-proof { transition: color var(--duration-fast), background-color var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast) var(--ease-out); }
.site-header nav :is(a, button), .docs-header nav a { position: relative; }
.site-header nav :is(a, button)::after, .docs-header nav a::after { content: ""; position: absolute; height: 1px; inset: auto 0 5px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-normal) var(--ease-out); }
.site-header nav :is(a, button):is(:hover, :focus-visible)::after,
.docs-header nav a:is(:hover, :focus-visible, [aria-current])::after { transform: scaleX(1); }
.button, .entry-primary, .entry-secondary { transition: color var(--duration-fast), background-color var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast) var(--ease-out); }
.button:active, .entry-primary:active:not(:disabled), .entry-secondary:active, .code-copy:active { transform: translateY(1px); }
.button svg, .text-link svg, .original-link > svg, .related-records svg { transition: transform var(--duration-normal) var(--ease-out); }
.button:is(:hover, :focus-visible) svg, .text-link:is(:hover, :focus-visible) svg { transform: translateX(2px); }
.original-link:is(:hover, :focus-visible) > svg, .related-records button:is(:hover, :focus-visible) svg { transform: translate(2px, -2px); }
.original-proof:has(.original-link:is(:hover, :focus-visible)) { border-left-color: var(--accent); }
#docs-nav a:is(:hover, :focus-visible) { background: var(--accent-soft); }
.heading-link { transition: opacity var(--duration-fast), color var(--duration-fast); }
article h2:target { border-top-color: var(--accent); }
.code-block:focus-within { border-color: var(--rule-strong); }
.code-copy[data-state="copied"] { color: var(--sage); background: var(--sage-soft); }
.code-copy[data-state="copied"]::before { content: "✓"; display: inline-block; margin-right: 5px; }
.code-copy[data-state="selected"] { color: var(--accent); }
.entry-dialog::backdrop { background: rgb(33 30 24 / 44%); }
.entry-sheet { box-shadow: 0 24px 70px rgb(33 30 24 / 12%); }

@keyframes brain-arrive { from { opacity: .8; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes brain-signal { 0% { opacity: 0; stroke-dashoffset: 1; } 18% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes brain-settle { from { transform: scale(.86); } to { transform: scale(1); } }
@keyframes brain-highlight { from { background: transparent; } to { background: var(--accent-soft); } }
@media (prefers-reduced-motion: no-preference) {
  .hero, .page-intro, .error-layout main { animation: brain-arrive 420ms var(--ease-out); }
  dialog[open] :is(.entry-sheet, .original-sheet) { animation: brain-arrive 240ms var(--ease-out); }
  .brain-signature--wake .brain-mark__signal,
  .wordmark:is(:hover, :focus-visible) .brain-mark__signal { animation: brain-signal 1100ms var(--ease-out) var(--signal-delay) both; }
  .brain-signature--wake .brain-mark__core,
  .wordmark:is(:hover, :focus-visible) .brain-mark__core { animation: brain-settle 600ms var(--ease-settle); }
  .code-copy[data-state="copied"]::before, .entry-success > span { animation: brain-settle 220ms var(--ease-settle); }
  dialog[open] .original-body mark { animation: brain-highlight 500ms var(--ease-out); }
}
@media (max-width: 399px) { .docs-header .wordmark .brain-signature { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}