/* The site's whole stylesheet. No framework: a language's documentation
   should load on a bad connection and read on a phone, and neither of those
   needs a build step. */

:root {
  --ink: #1a1c20;
  --paper: #fbfbf9;
  --muted: #5b6068;
  --rule: #e2e2dd;
  --accent: #b8442c;
  --code-bg: #f4f4f0;
  --keyword: #a3336b;
  --string: #2c6e49;
  --comment: #8a8f98;
  --number: #b45309;

  /* ---- brand ------------------------------------------------------------
     The brand sheet is the authority for this block: the mark's colourways,
     the wordmark's face and tracking, and the header's metrics.

     --kite-mark is a variable rather than `currentColor` because the mark is
     loaded as an <img>, and colour does not cross that boundary. kite-mark.svg
     reads this token itself, so one file serves every colourway. */
  --kite-mark: #c9812a;             /* on light */
  --brand-ground: #f4f1ec;          /* the sheet's light ground */
  --brand-ink: #23212a;             /* the sheet names this for the wordmark */
  --brand-dim: #6c6a74;
  --brand-rule: rgba(35, 33, 42, 0.16);
  --brand-violet: #5f51b0;
  --brand-violet-ink: #4b3f96;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e6e6e1;
    --paper: #161826;
    --muted: #9aa0a8;
    --rule: #2c3037;
    --accent: #e8795c;
    --code-bg: #1d1f2d;
    --keyword: #e78ab5;
    --string: #7fbf9a;
    --comment: #767c86;
    --number: #dba55a;

    --kite-mark: #e9a63c;
    --brand-ground: #1d1f2d;
    --brand-ink: #e9e9ed;
    --brand-dim: #8b8d9e;
    --brand-rule: rgba(233, 233, 237, 0.16);
    /* The violet is the sheet's own #9184d9. Its light-ground counterpart
       above is the same hue taken down far enough to read on paper. */
    --brand-violet: #9184d9;
    --brand-violet-ink: #c3bbee;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.65 ui-serif, Georgia, "Times New Roman", serif;
  -webkit-text-size-adjust: 100%;
}

/* ---- the header, as the brand sheet draws it ----
   Metrics are the sheet's: 26px of side padding, a 28px mark, 12px to the
   wordmark, 26px between nav items. The mark's clear space is a quarter of its
   height — 7px at this size — and every gap here is larger than that. */

header {
  border-bottom: 1px solid var(--brand-rule);
  background: var(--brand-ground);
  color: var(--brand-dim);
  padding: 16px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

header .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

header .mark { display: block; width: 28px; height: 28px; }

/* JetBrains Mono Medium at −2% tracking. The sheet fetches the face from
   Google Fonts; this site fetches nothing, so it asks for JetBrains Mono and
   falls back to whatever monospace face is already installed. The weight and
   the tracking are what carry the wordmark either way. */
header .name {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--brand-ink);
}

header .chip {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 11px;
  color: var(--brand-dim);
  border: 1px solid var(--brand-rule);
  border-radius: 4px;
  padding: 2px 6px;
}

header nav {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13.5px;
}

header nav a { color: var(--brand-dim); text-decoration: none; }
header nav a:hover,
header nav a[aria-current="page"] { color: var(--brand-ink); }

header nav a.gh {
  border: 1px solid var(--brand-violet);
  border-radius: 8px;
  padding: 6px 13px;
  font-size: 12.5px;
  color: var(--brand-violet-ink);
}
header nav a.gh:hover { color: var(--brand-violet-ink); background: color-mix(in srgb, var(--brand-violet) 12%, transparent); }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

main { max-width: 46rem; margin: 0 auto; padding: 2rem 1.5rem 5rem; }
main.wide { max-width: 72rem; }

h1 { font-size: 2.1rem; line-height: 1.2; letter-spacing: -0.02em; margin: 1.5rem 0 0.5rem; }
h2 { font-size: 1.4rem; margin: 2.5rem 0 0.5rem; letter-spacing: -0.01em; }
h3 { font-size: 1.1rem; margin: 2rem 0 0.5rem; }

.lede { font-size: 1.15rem; color: var(--muted); }

code, pre, textarea, .out {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.86em;
}

code { background: var(--code-bg); padding: 0.1em 0.3em; border-radius: 3px; }

/* The sheet gives a code block a 2px left edge in the mark's colour and
   squares that corner off, so the accent reads as a margin rule. */
pre {
  background: var(--code-bg);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--kite-mark);
  border-radius: 0 6px 6px 0;
  padding: 0.9rem 1rem;
  overflow-x: auto;
  line-height: 1.5;
}

pre code { background: none; padding: 0; }

table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: 0.95rem; }
th, td { border-bottom: 1px solid var(--rule); padding: 0.4rem 0.6rem; text-align: left; vertical-align: top; }
th { font-weight: 600; }

blockquote {
  margin: 1rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--rule);
  color: var(--muted);
}

/* ---- the playground ---- */

.pad { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 60rem) { .pad { grid-template-columns: 1fr; } }

textarea {
  width: 100%;
  min-height: 26rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--code-bg);
  color: var(--ink);
  resize: vertical;
  line-height: 1.5;
  tab-size: 4;
}

.out {
  white-space: pre-wrap;
  min-height: 26rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--code-bg);
  overflow-x: auto;
}

.controls { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin: 0 0 0.75rem; }

button, select {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}

button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button:disabled { opacity: 0.5; cursor: default; }

.samples { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.75rem; }
.samples button { font-size: 0.8rem; padding: 0.2rem 0.55rem; }

.muted { color: var(--muted); }
.status { color: var(--muted); font-size: 0.85rem; }

/* ---- syntax colours ---- */

.k { color: var(--keyword); }
.s { color: var(--string); }
.c { color: var(--comment); font-style: italic; }
.n { color: var(--number); }