:root {
  --bg:        #0a0b0e;
  --bg-2:      #0e1014;
  --bg-3:      #0b0d12;
  --panel:     #12141a;
  --line:      rgba(255, 255, 255, 0.06);
  --line-2:    rgba(255, 255, 255, 0.10);
  --line-3:    rgba(255, 255, 255, 0.16);
  --ink:       #eef0f4;
  --ink-2:     #a6adbb;
  --ink-3:     #6b7280;
  --ink-4:     #3a4050;
  --ink-5:     #22262f;
  --accent:    #3b82f6;
  --accent-2:  #5aa2ff;
  --danger:    #ef4770;
  --danger-2:  #ff8da1;
  --warn:      #d9a441;
  --ok:        #4ea884;
  --adr:       #74a8a8;

  --content-max: 74ch;
  --sidebar-w:   300px;
  --toc-w:       256px;
  --nav-h:       77px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
html { scroll-behavior: smooth; }
body {
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  overflow-x: hidden;
}
.mono { font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-feature-settings: "zero"; }

.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0.035;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}