@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap");

:root {
  --bg: #f7f7f5;
  --fg: #171716;

  --muted: #737370;
  --faint: #a3a3a0;

  --surface: #efefec;
  --surface-hover: #e9e9e5;

  --diagram-node-bg: #ecece8;
  --diagram-line: #858581;

  --line: #d9d9d5;
  --selection: #d9e7ff;

  --sans:
    "Geist",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  --mono:
    "Geist Mono",
    "SFMono-Regular",
    Consolas,
    monospace;

  --optical-x-height: 0.52;

  --page-width: 760px;
  --diagram-width: 1120px;
  --diagram-font-size: 14px;

  --gutter: 24px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10100f;
    --fg: #eeeeeb;

    --muted: #969691;
    --faint: #686864;

    --surface: #191918;
    --surface-hover: #20201e;

    --diagram-node-bg: #1e1e1c;
    --diagram-line: #777772;

    --line: #2c2c29;
    --selection: #263a58;

    color-scheme: dark;
  }
}


/* Base */

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  color: var(--fg);

  font-family: var(--sans);
  font-size: 16px;
  font-size-adjust: var(--optical-x-height);

  line-height: 1.55;

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;

  background: var(--bg);
  color: var(--fg);
}

::selection {
  background: var(--selection);
}


/* Document */

article {
  width: min(
    calc(100% - (2 * var(--gutter))),
    var(--page-width)
  );

  margin: 0 auto;
  padding: 72px 0 120px;
}

section {
  margin: 0 0 72px;
}

section:last-child {
  margin-bottom: 0;
}


/* Typography */

h1,
h2,
h3,
h4 {
  color: var(--fg);

  font-family: var(--sans);
  font-weight: 500;

  letter-spacing: -0.035em;
  line-height: 1.15;
}

h1 {
  margin: 0 0 28px;
  padding-top: 0.125em;

  border-top: 1px solid currentColor;

  font-size: 1.8rem;
}

h2 {
  margin: 42px 0 18px;
  font-size: 1.35rem;
}

h3 {
  margin: 32px 0 14px;
  font-size: 1.1rem;
}

p {
  margin: 0 0 18px;
}

ul,
ol {
  margin: 18px 0 22px;
  padding-left: 1.35rem;
}

li {
  margin: 8px 0;
  padding-left: 0.2rem;
}

strong {
  font-weight: 600;
}


/* Links */

a {
  color: inherit;

  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color:
    color-mix(in srgb, currentColor 28%, transparent);
  text-underline-offset: 0.17em;

  transition: text-decoration-color 120ms ease;
}

a:hover {
  text-decoration-color: currentColor;
}

h1 > a,
h2 > a,
h3 > a,
h4 > a {
  text-decoration: none;
}


/* Definitions */

dfn {
  font-style: normal;

  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-decoration-color:
    color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.18em;
}


/* Inline code */

code {
  padding: 0;

  border: 0;
  border-radius: 0;

  background: transparent;
  color: inherit;

  font-family: var(--mono);
  font-size: 1em;
  font-size-adjust: var(--optical-x-height);

  font-weight: 400;
  line-height: inherit;

  letter-spacing: 0;
  font-variant-ligatures: none;
}


/* Code blocks */

pre {
  margin: 28px 0;
  padding: 20px 22px;

  overflow-x: auto;

  border: 0;
  border-radius: 8px;

  background: var(--surface);

  font-family: var(--mono);
  font-size: 0.875rem;
  font-size-adjust: var(--optical-x-height);

  line-height: 1.55;

  tab-size: 2;
}

pre code {
  padding: 0;
  background: transparent;

  font-size: inherit;
  line-height: inherit;
}


/* Mermaid */

/* Source before Mermaid replaces it */

code.diagram {
  display: block;

  margin: 38px 0;
  padding: 0;

  overflow-x: auto;

  border: 0;
  border-radius: 0;

  background: transparent;
  color: var(--fg);

  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.5;

  white-space: pre;
}


/* Diagram layout */

.mermaid {
  display: flex;
  align-items: center;
  justify-content: center;

  width: min(
    var(--diagram-width),
    calc(100vw - (2 * var(--gutter)))
  );

  margin: 42px 0 42px 50%;
  padding: 16px 0;

  transform: translateX(-50%);

  overflow: visible;

  background: transparent;

  font-size-adjust: var(--optical-x-height);
}

.mermaid svg {
  display: block;

  /*
   * Preserve Mermaid's intrinsic size.
   * Large diagrams may shrink to fit, but small diagrams are never enlarged.
   */
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;

  margin-inline: auto;

  overflow: visible;

  background: transparent !important;

  font-family: var(--sans) !important;
}


/* Nodes */

.mermaid .node rect,
.mermaid .node polygon,
.mermaid .node circle,
.mermaid .node ellipse,
.mermaid .node path {
  fill: var(--diagram-node-bg) !important;

  stroke: none !important;
  stroke-width: 0 !important;
}

.mermaid .node rect {
  rx: 10px !important;
  ry: 10px !important;
}


/* Node labels */

.mermaid .node,
.mermaid .node .nodeLabel,
.mermaid .node .nodeLabel *,
.mermaid .node text,
.mermaid .node tspan {
  color: var(--fg) !important;
  fill: var(--fg) !important;

  font-family: var(--sans) !important;
  font-size: var(--diagram-font-size) !important;
  font-size-adjust: var(--optical-x-height) !important;
  font-weight: 400 !important;

  letter-spacing: -0.015em !important;
}


/* Program nodes */

.mermaid .node.program,
.mermaid .node.program *,
.mermaid .node.program text,
.mermaid .node.program tspan {
  font-family: var(--mono) !important;
  font-size: var(--diagram-font-size) !important;
  font-size-adjust: var(--optical-x-height) !important;
  font-weight: 400 !important;

  letter-spacing: 0 !important;
  font-variant-ligatures: none !important;
}


/* Connections */

.mermaid .flowchart-link,
.mermaid .edgePath path {
  fill: none !important;

  stroke: var(--diagram-line) !important;
  stroke-width: 1px !important;

  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.mermaid marker path,
.mermaid .arrowheadPath {
  fill: var(--diagram-line) !important;
  stroke: var(--diagram-line) !important;
  stroke-width: 0 !important;
}


/* Relationship labels */

.mermaid .edgeLabel {
  color: var(--muted) !important;

  font-family: var(--sans) !important;
  font-size: 12px !important;
  font-size-adjust: var(--optical-x-height) !important;
  font-weight: 400 !important;

  letter-spacing: -0.01em !important;
}

.mermaid .edgeLabel text,
.mermaid .edgeLabel tspan {
  fill: var(--muted) !important;

  font-family: var(--sans) !important;
  font-size: 12px !important;
  font-size-adjust: var(--optical-x-height) !important;
  font-weight: 400 !important;
}

.mermaid .edgeLabel rect,
.mermaid .labelBkg {
  fill: var(--bg) !important;
  stroke: none !important;

  opacity: 1 !important;
}


/* Subgraphs */

.mermaid .cluster rect {
  fill: transparent !important;

  stroke: var(--line) !important;
  stroke-width: 1px !important;

  rx: 8px;
  ry: 8px;
}


/* Responsive */

@media (max-width: 640px) {
  :root {
    --gutter: 18px;
  }

  article {
    padding-top: 42px;
    padding-bottom: 80px;
  }

  section {
    margin-bottom: 56px;
  }

  h1 {
    font-size: 1.55rem;
  }

  .mermaid {
    width: calc(100vw - (2 * var(--gutter)));

    margin-top: 34px;
    margin-bottom: 34px;

    padding: 10px 0;

    justify-content: flex-start;

    overflow-x: auto;
    overflow-y: hidden;
  }

  .mermaid svg {
    /*
     * On narrow screens, keep diagrams readable instead of shrinking complex
     * graphs until their labels become tiny. The container can scroll instead.
     */
    flex: 0 0 auto;

    max-width: none !important;

    margin-inline: auto;
  }
}