/* Decisium identity on top of Nocturne: Ink/Paper carry the mark, Signal only on the decision diamond and tittles. */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@500&family=Geist+Mono:wght@400;500&display=swap");

/* Monochrome: Ink and Paper only. The Nocturne tokens are remapped to neutral greys; the ramp runs from the text colour
   (100) to the ground (900) in both themes, so Nocturne's "light step on dark" rules hold in light mode too. */
:root, :root[data-theme="dark"] {
  --ink: #0A0A0B; --paper: #F4F3EF;
  --color-bg: #0A0A0B; --color-surface: #141415; --color-text: #F4F3EF; --color-divider: #2A2A2C;
  --color-neutral-100: #EDECE8; --color-neutral-200: #D6D5D1; --color-neutral-300: #B4B3AF; --color-neutral-400: #8C8B88;
  --color-neutral-500: #6B6A68; --color-neutral-600: #4E4E4D; --color-neutral-700: #343435; --color-neutral-800: #232324;
  --color-neutral-900: #161617;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --color-bg: #FAFAF7; --color-surface: #F1F0EC; --color-text: #0A0A0B; --color-divider: #DEDDD8;
  --color-neutral-100: #17171A; --color-neutral-200: #2C2C2E; --color-neutral-300: #4A4A4C; --color-neutral-400: #6E6E6F;
  --color-neutral-500: #8E8E8E; --color-neutral-600: #ABABA8; --color-neutral-700: #CFCEC9; --color-neutral-800: #E6E5E0;
  --color-neutral-900: #F0EFEA;
  color-scheme: light;
}
:root {
  --color-accent: var(--color-text); --color-accent-2: var(--color-text);
  --color-accent-100: var(--color-neutral-100); --color-accent-200: var(--color-neutral-200); --color-accent-300: var(--color-neutral-200);
  --color-accent-400: var(--color-neutral-300); --color-accent-500: var(--color-text); --color-accent-600: var(--color-neutral-300);
  --color-accent-700: var(--color-neutral-700); --color-accent-800: var(--color-neutral-800); --color-accent-900: var(--color-neutral-900);
  --color-accent-2-100: var(--color-neutral-100); --color-accent-2-800: var(--color-neutral-800);
  --shadow-sm: none; --shadow-md: none; --shadow-lg: none;
  --signal: var(--color-text);
  --font-mono: "Geist Mono", ui-monospace, monospace;
}
body { background: var(--color-bg); color: var(--color-text); }
a { color: var(--color-text); text-underline-offset: 3px; text-decoration-color: var(--color-neutral-500); }
a:hover { text-decoration-color: var(--color-text); }
::selection { background: var(--color-neutral-700); color: var(--color-text); }
:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }

/* Mark (monochrome variant): the D and its node in the text colour, the aperture is the ground. */
.mark { --a: currentColor; color: var(--color-text); flex: none; }



/* Wordmark: dotless ı with a diamond tittle sitting where the dot would. */
.wordmark { display: inline-block; white-space: nowrap; font-family: "Geist", var(--font-heading); font-weight: 500;
  letter-spacing: -0.045em; line-height: 1; color: var(--color-text); --a: var(--color-text); }
.wordmark .i { position: relative; display: inline-block; letter-spacing: 0; margin-right: -0.04em; }
.wordmark .i::after { content: ""; position: absolute; left: 50%; top: 0.06em; width: 0.16em; height: 0.16em;
  background: var(--a); transform: translateX(-50%) rotate(45deg); }

.topbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 24px; height: 56px;
  padding: 0 clamp(16px, 3vw, 32px); background: color-mix(in srgb, var(--color-bg) 88%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-neutral-800); }
.topbar .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.topbar .brand .wordmark { font-size: 22px; }
.top-links { margin-left: auto; display: flex; gap: 20px; font-size: 14px; }
.top-links a { color: var(--color-neutral-300); text-decoration: none; }

.layout { display: grid; grid-template-columns: 240px minmax(0, 1fr) 220px; gap: 48px; padding: 0 clamp(16px, 3vw, 32px);
  max-width: 1440px; }
.sidebar, .toc { position: sticky; top: 56px; align-self: start; max-height: calc(100vh - 56px); overflow-y: auto;
  padding: 32px 0; display: flex; flex-direction: column; gap: 24px; font-size: 14px; }
.toc { gap: 2px; font-size: 13px; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-title { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-400); margin-bottom: 6px; }
.sidebar a, .toc a { color: var(--color-neutral-300); text-decoration: none; padding: 4px 10px; border-radius: var(--radius-sm);
  border-left: 2px solid transparent; }
.sidebar a:hover, .toc a:hover { color: var(--color-text); background: var(--color-neutral-900); }
.sidebar a[aria-current] { color: var(--color-text); border-left-color: var(--signal); background: var(--color-neutral-900); }
.toc a { padding: 3px 10px; }
.toc a.l3 { padding-left: 22px; }

pre, code { font-family: var(--font-mono); }
pre { background: var(--color-neutral-900); border-radius: var(--radius-md); padding: 16px 20px; font-size: 13px; line-height: 1.6;
  color: var(--color-neutral-200); overflow-x: auto; }
:not(pre) > code { background: var(--color-neutral-800); border-radius: 4px; padding: 0.1em 0.35em; font-size: 0.88em; }

.doc { min-width: 0; max-width: 820px; padding: 40px 0 96px; }
.doc h1 { font-size: 40px; letter-spacing: -0.025em; margin: 0 0 16px; }
.doc h2 { margin-top: 48px; font-size: 25px; scroll-margin-top: 72px; }
.doc h3 { margin-top: 32px; font-size: 19px; scroll-margin-top: 72px; }
.doc table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 14px; margin: 16px 0; }
.doc th, .doc td { border-bottom: 1px solid var(--color-neutral-800); padding: 8px 14px 8px 0; text-align: left; vertical-align: top; }
.doc th { color: var(--color-neutral-300); font-weight: 500; }
.doc td code { white-space: nowrap; }
.doc strong { font-weight: 600; }

.path { color: var(--color-neutral-400); font-family: var(--font-mono); font-size: 12px; margin: -8px 0 8px; }
pre.feature .ln { display: block; scroll-margin-top: 120px; }
pre.feature .ln a { display: inline-block; width: 3ch; margin-right: 2ch; text-align: right; color: var(--color-neutral-600);
  text-decoration: none; user-select: none; }
pre.feature .ln:target { background: color-mix(in srgb, var(--signal) 14%, transparent); }
pre.feature .ln:target a { color: var(--signal); }

.pager { display: flex; gap: 12px; margin-top: 64px; }
.pager a { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--color-neutral-800);
  border-radius: var(--radius-md); text-decoration: none; color: var(--color-text); }
.pager a:hover { border-color: var(--color-accent); }
.pager span { font-size: 12px; color: var(--color-neutral-400); }
.pager .next { text-align: right; margin-left: auto; }

@media (max-width: 1100px) { .layout { grid-template-columns: 220px minmax(0, 1fr); } .toc { display: none; } }
@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; gap: 0; }
  .sidebar { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; padding: 16px 0; border-bottom: 1px solid var(--color-neutral-800); }
}

.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  background: none; border: 0; border-radius: var(--radius-sm); color: var(--color-text); cursor: pointer; }
.theme-toggle:hover { background: var(--color-neutral-900); }
.theme-toggle .sun, :root[data-theme="light"] .theme-toggle .moon { display: none; }
:root[data-theme="light"] .theme-toggle .sun { display: block; }
.top-links { align-items: center; }
.icon-link { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); }
.icon-link:hover { background: var(--color-neutral-900); color: var(--color-text); }
.top-links { gap: 8px; }

.search { position: relative; margin-left: auto; width: min(320px, 40vw); }
.search input { width: 100%; height: 32px; padding: 0 32px 0 12px; font: inherit; font-size: 14px; color: var(--color-text);
  background: var(--color-neutral-900); border: 1px solid var(--color-divider); border-radius: var(--radius-sm); }
.search input::placeholder { color: var(--color-neutral-400); }
.search input:focus { outline: 2px solid var(--color-text); outline-offset: 1px; }
.search kbd { position: absolute; right: 8px; top: 7px; font: 11px var(--font-mono); color: var(--color-neutral-400);
  border: 1px solid var(--color-divider); border-radius: 4px; padding: 0 5px; pointer-events: none; }
.search input:focus + kbd { display: none; }
.search-results { position: absolute; top: 40px; right: 0; width: min(520px, 90vw); max-height: 70vh; overflow-y: auto; padding: 6px;
  background: var(--color-bg); border: 1px solid var(--color-divider); border-radius: var(--radius-md); z-index: 3; }
.search-results a { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--radius-sm); text-decoration: none; color: var(--color-text); }
.search-results a:hover, .search-results a[aria-selected] { background: var(--color-neutral-900); }
.r-title { font-size: 14px; font-weight: 500; }
.r-text { font-size: 12px; color: var(--color-neutral-400); }
.search-results mark { background: none; color: var(--color-text); text-decoration: underline; text-underline-offset: 2px; }
.r-none { margin: 8px 10px; font-size: 13px; color: var(--color-neutral-400); }
.top-links { margin-left: 0; }
@media (max-width: 760px) { .search kbd { display: none; } .topbar .brand .wordmark { display: none; } }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.npm-version { width: auto; gap: 6px; padding: 0 8px; font: 12px var(--font-mono); color: var(--color-neutral-300); text-decoration: none; }
.npm-version:hover { color: var(--color-text); }