/* dither-art — shared foundation for every page on the site.
   Tokens, texture, navbar, buttons, code colours and the footer live here so the
   landing page, the docs and anything added later cannot drift apart. */

:root {
  --paper: #f4f1ea;
  --paper-sunk: #eeeae1;
  --ink: #161513;
  --muted: #6d6a63;
  --line: #d9d4c8;
  --field: #fffdf8;
  --accent: #b8253c;
  --code-key: #a02440;
  --code-str: #4c6a37;
  --code-num: #8a5713;
  --code-fn: #1f4f6b;
  --grain: 0.16;
  --shadow: 0 1px 2px rgba(60, 52, 34, 0.05), 0 8px 24px -16px rgba(60, 52, 34, 0.25);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --step: 160ms var(--ease-out);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #141412;
    --paper-sunk: #100f0e;
    --ink: #ece8de;
    --muted: #9b978d;
    --line: #34322d;
    --field: #1c1b18;
    --accent: #ff7484;
    --code-key: #ff7484;
    --code-str: #a8c98d;
    --code-num: #d8a657;
    --code-fn: #7fb4cc;
    --grain: 0.19;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -16px rgba(0, 0, 0, 0.8);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #141412;
  --paper-sunk: #100f0e;
  --ink: #ece8de;
  --muted: #9b978d;
  --line: #34322d;
  --field: #1c1b18;
  --accent: #ff7484;
  --code-key: #ff7484;
  --code-str: #a8c98d;
  --code-num: #d8a657;
  --code-fn: #7fb4cc;
  --grain: 0.19;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -16px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
}

/* The page's own texture is the library's: one ink dot per 8px cell, the lattice a Bayer
   threshold map draws from, fixed so it reads as paper the content moves over. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Crect width='1' height='1' fill='%23808080'/%3E%3C/svg%3E");
  background-size: 8px 8px;
}

.wrap {
  position: relative;
  z-index: 1;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 16px;
}

a {
  color: inherit;
}

.skip {
  position: absolute;
  left: 16px;
  top: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

/* The header nav only. An unscoped `nav` rule captures the table of contents,
   the footer link list, and anything else semantic markup would reasonably use. */
.topnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 20px 0;
}

.topnav strong {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
}

.links a {
  text-decoration: none;
  color: var(--muted);
  transition: color var(--step);
}

.links a:hover {
  color: var(--ink);
}

.links .icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--muted);
}

.links a.icon:hover,
#theme:hover {
  color: var(--ink);
}

.links .icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* The npm mark is a wide, short glyph: at 18px it reads far lighter than the GitHub disc. */
.links .icon-npm svg {
  width: 24px;
  height: 24px;
}

/* It sits among plain links, so it drops the button chrome and signals state by colour. */
/* Recognisability beats novelty on a control nobody is looking for: sun, moon, and a
   monitor for "follow the system". It keeps its border so it reads as a button, not decoration. */
#theme {
  border-radius: 9px;
}
#theme svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#theme > svg {
  display: none;
}
#theme[data-mode="system"] .ico-auto,
#theme[data-mode="light"] .ico-sun,
#theme[data-mode="dark"] .ico-moon {
  display: block;
}

button,
.button {
  font: inherit;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 14px;
  cursor: pointer;
  text-decoration: none;
  transition:
    border-color var(--step),
    background-color var(--step),
    color var(--step),
    transform var(--step);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

pre {
  margin: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--field);
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.6;
}

/* Four hues only: keyword, string, number, call. Everything else stays ink or muted. */
.tok-key {
  color: var(--code-key);
}

.tok-str {
  color: var(--code-str);
}

.tok-num {
  color: var(--code-num);
}

.tok-fn {
  color: var(--code-fn);
}

.tok-mut {
  color: var(--muted);
}

/* The page is already monospace, so <code> only needs to inherit — the UA's monospace default
   otherwise shifts its line box and drags the baselines of paragraphs that contain it. */
code {
  font-family: inherit;
  font-size: inherit;
}


.endlinks {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
  margin-top: 80px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  list-style: none;
  text-align: right;
  font-size: 14px;
}

.endlinks a {
  text-decoration: none;
  transition: color var(--step);
}

.endlinks a:hover {
  color: var(--accent);
}

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 18px 0 48px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

footer a:hover {
  color: var(--accent);
}

footer a:hover {
  color: var(--ink);
}