/* moonnum — graph paper and a pen.
 *
 * The site is a sheet of squared paper: a fine blue grid, a red margin rule, and
 * handwriting on top of it. The metaphor is the one the library is about —
 * working a sum out on paper — so the page is the paper, not a frame around it.
 *
 * Two hands, both legible: Architects Daughter drafts the headings, Patrick Hand
 * writes the prose. Code stays monospaced and machine-set, because it is typed
 * onto the sheet rather than written on it, and because a column of numbers that
 * does not line up is a bug in a numeric library's documentation.
 *
 * Dark mode is the same sheet held up to the light: white grid on blueprint
 * blue, chalk for ink.
 */

@import url("https://cdn.jsdelivr.net/npm/@fontsource/architects-daughter@5/index.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/patrick-hand@5/index.css");

:root {
  --paper: #f6f3e7;
  --paper-raised: #fdfbf2;
  --paper-sunk: #efeade;
  --ink: #26313d;
  --ink-soft: #4f5b68;
  --ink-faint: #6b7581;
  --rule: rgba(38, 49, 61, 0.16);
  --rule-strong: rgba(38, 49, 61, 0.32);
  --pen-red: #b23b2e;
  --pen-blue: #1f4e79;
  --marker: rgba(255, 214, 92, 0.55);
  --grid: rgba(74, 110, 165, 0.13);
  --grid-major: rgba(74, 110, 165, 0.22);
  --tape: rgba(246, 226, 154, 0.62);
  /* Latin hands first, then the Chinese ones a reader is most likely to have:
     the site is written in English, but a Chinese reader should not get a
     printed gothic for the few characters that might appear. */
  --hand: "Patrick Hand", "LXGW WenKai", "Kaiti SC", "KaiTi", "STKaiti",
    "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  --hand-display: "Architects Daughter", "Patrick Hand", "LXGW WenKai",
    "Kaiti SC", "KaiTi", "STKaiti", "Segoe Print", cursive;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  --measure: 62ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #10233a;
    --paper-raised: #152b46;
    --paper-sunk: #0b1b2e;
    --ink: #e6eef8;
    --ink-soft: #b3c3d4;
    --ink-faint: #8497aa;
    --rule: rgba(200, 225, 255, 0.14);
    --rule-strong: rgba(200, 225, 255, 0.3);
    --pen-red: #ff9d88;
    --pen-blue: #9ecbff;
    --marker: rgba(255, 214, 92, 0.22);
    --grid: rgba(190, 220, 255, 0.09);
    --grid-major: rgba(190, 220, 255, 0.19);
    --tape: rgba(214, 232, 255, 0.2);
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The sheet decides what the scrollbar looks like; the operating system does
     not. `color-scheme` is what keeps the browser's own chrome — the bar before
     this stylesheet paints, form controls — in the same light as the page. */
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
}

/* A scrollbar drawn with the same pen as everything else: a soft pencil thumb
   floating on the paper, red when you take hold of it. The transparent border
   and `background-clip` are what give it the inset, rounded shape — a solid
   block the height of the window would read as browser chrome. */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--ink-faint);
  background: color-mix(in srgb, var(--ink-faint) 62%, transparent);
  background-clip: content-box;
  border: 3px solid transparent;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--pen-red);
  background: color-mix(in srgb, var(--pen-red) 72%, transparent);
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:active {
  background: var(--pen-red);
  background-clip: content-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Firefox has no `::-webkit-scrollbar`; it gets the two properties it does have.
   The query keeps Chromium on the drawn version, where the two would fight. */
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--ink-faint) transparent;
  }
}

/* The sheet: a fine grid, a heavier rule every fifth square, and the uneven
   light of a page lying on a desk. */
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--hand);
  font-size: 19px;
  line-height: 1.72;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    radial-gradient(
      120% 90% at 12% -10%,
      rgba(255, 255, 255, 0.55),
      transparent 60%
    );
  background-size:
    120px 120px,
    120px 120px,
    24px 24px,
    24px 24px,
    cover;
  background-attachment: fixed;
  text-rendering: optimizeLegibility;
}

@media (prefers-color-scheme: dark) {
  body {
    background-image:
      linear-gradient(var(--grid-major) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
      linear-gradient(var(--grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px),
      radial-gradient(
        120% 90% at 15% -10%,
        rgba(120, 175, 235, 0.16),
        transparent 60%
      );
  }
}

::selection {
  background: var(--marker);
  color: var(--ink);
}

a {
  color: var(--pen-blue);
  text-decoration: underline wavy;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, var(--pen-blue) 55%, transparent);
}

a:hover {
  color: var(--pen-red);
  text-decoration-color: var(--pen-red);
}

/* ── the sheet's furniture ───────────────────────────────────────────── */

.wrap {
  width: min(1000px, calc(100% - 3rem));
  margin: 0 auto;
}

/* The margin rule of an exercise book, down the left of the writing. It is
   fixed to the viewport because it belongs to the sheet, not to a container:
   the page is several `.wrap` blocks, and the rule has to run past all of them.
   The offset is half the column plus the gutter, so it sits in the margin. */
body::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: calc(50% - 534px);
  width: 1.5px;
  background: var(--pen-red);
  background: color-mix(in srgb, var(--pen-red) 48%, transparent);
  pointer-events: none;
}

@media (max-width: 1100px) {
  body::after {
    display: none;
  }
}

/* A hand-drawn rule, drawn once as a mask so it takes the ink colour of the
   theme instead of being baked in. */
.squiggle,
header.bar::after,
footer::before,
.pager::before {
  --squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='7' viewBox='0 0 140 7'%3E%3Cpath d='M0 3.6q17.5-2.4 35-.4t35 .2 35-.6 35 .4' fill='none' stroke='%23000' stroke-width='1.15' stroke-linecap='round'/%3E%3C/svg%3E");
  background: var(--ink);
  -webkit-mask-image: var(--squiggle);
  mask-image: var(--squiggle);
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 140px 7px;
  mask-size: 140px 7px;
}

/* ── top bar ─────────────────────────────────────────────────────────── */

header.bar {
  padding: 1.15rem 0 1rem;
  position: relative;
}

header.bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7px;
  opacity: 0.42;
}

header.bar .wrap {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  flex-wrap: wrap;
}

.wordmark {
  font-family: var(--hand-display);
  font-size: 1.32rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--ink);
  transform: rotate(-1.1deg);
}

.wordmark .dot {
  color: var(--pen-red);
}

header.bar nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1.15rem;
  font-family: var(--hand-display);
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

header.bar nav a {
  text-decoration: none;
  color: var(--ink-soft);
}

header.bar nav a[aria-current="page"] {
  color: var(--pen-red);
  text-decoration: underline wavy;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

header.bar nav a:hover {
  color: var(--ink);
}

/* ── the hero ────────────────────────────────────────────────────────── */

.hero {
  padding: 3.2rem 0 2.2rem;
  position: relative;
}

.hero .eyebrow {
  font-family: var(--hand-display);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1rem;
}

.hero h1 {
  font-family: var(--hand-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1.1;
  letter-spacing: 0.005em;
  font-weight: 400;
  margin: 0 0 1.1rem;
  max-width: 22ch;
}

.hero h1 em {
  font-style: normal;
  color: var(--pen-red);
  display: inline-block;
  transform: rotate(-1.4deg);
}

.hero p.lede {
  font-size: 1.12rem;
  max-width: 46ch;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
}

/* The worked example: a card taped to the sheet. */
.specimen {
  position: relative;
  margin: 2.2rem 0 1rem;
  padding: 1.35rem 1.5rem 1.2rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  box-shadow: 0 2px 0 -1px var(--paper), 0 6px 14px -10px rgba(0, 0, 0, 0.5);
  transform: rotate(-0.45deg);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.95rem 1.8rem;
  font-family: var(--mono);
  font-size: 0.86rem;
}

.specimen::before,
.specimen::after {
  content: "";
  position: absolute;
  top: -0.42rem;
  width: 5.4rem;
  height: 1.5rem;
  background: var(--tape);
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  border-right: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  opacity: 0.9;
}

.specimen::before {
  left: -1.1rem;
  transform: rotate(-34deg);
}

.specimen::after {
  right: -1.1rem;
  transform: rotate(32deg);
}

.specimen div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.specimen .k {
  font-family: var(--hand-display);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.specimen .v {
  font-size: 0.95rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.specimen .v.bad {
  color: var(--pen-red);
}

/* ── sections ────────────────────────────────────────────────────────── */

section {
  padding: 2.6rem 0;
}

section + section,
.hero + section {
  border-top: 1px dashed var(--rule);
}

section h2 {
  font-family: var(--hand-display);
  font-size: 0.92rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 400;
  margin: 0 0 1.4rem;
}

h3 {
  font-family: var(--hand-display);
  font-size: 1.42rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  margin: 2rem 0 0.55rem;
  color: var(--ink);
  text-decoration: underline wavy;
  text-decoration-color: color-mix(in srgb, var(--pen-red) 45%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.34em;
}

p,
li {
  max-width: var(--measure);
}

/* ── the ledger of kinds ─────────────────────────────────────────────── */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  margin: 0.4rem 0 1rem;
}

th {
  text-align: left;
  font-family: var(--hand-display);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 400;
  padding: 0 0.8rem 0.45rem 0;
  border-bottom: 1px solid var(--rule-strong);
}

td {
  padding: 0.6rem 0.8rem 0.6rem 0;
  border-bottom: 1px dashed var(--rule);
  vertical-align: top;
}

td:first-child {
  white-space: nowrap;
}

tr:hover td {
  background: color-mix(in srgb, var(--marker) 35%, transparent);
}

code,
.mono {
  font-family: var(--mono);
  font-size: 0.84em;
}

/* A highlighter stroke under the code in a sentence. */
p code,
li code,
h3 code {
  background: linear-gradient(
    180deg,
    transparent 58%,
    var(--marker) 58%,
    var(--marker) 94%,
    transparent 94%
  );
  padding: 0 0.16em;
  border-radius: 1px;
}

/* ── code, which is typed on the sheet rather than written ───────────── */

pre {
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.65;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--pen-blue);
  box-shadow: 0 4px 12px -12px rgba(0, 0, 0, 0.65);
  padding: 0.95rem 1.1rem;
  overflow-x: auto;
  margin: 1rem 0 1.3rem;
  tab-size: 2;
}

pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

pre::-webkit-scrollbar {
  height: 9px;
}

pre::-webkit-scrollbar-thumb {
  border-width: 2px;
}

/* The pairing: what you write, and what comes out. */
.pair {
  display: grid;
  /* `minmax(0, …)` rather than `1.35fr`: a grid track's automatic minimum is
     its content, so one long line of output would push the whole page wider
     than the phone it is being read on. The `pre` scrolls instead. */
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 0;
  border: 1px dashed var(--rule-strong);
  margin: 1.1rem 0 1.5rem;
  background: color-mix(in srgb, var(--paper-raised) 82%, transparent);
}

.pair pre {
  min-width: 0;
  margin: 0;
  border: none;
  box-shadow: none;
  background: none;
}

.pair pre + pre {
  border-left: 1px dashed var(--rule-strong);
  color: var(--ink-soft);
}

.pair .label {
  font-family: var(--hand-display);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0.55rem 1.1rem 0;
}

@media (max-width: 720px) {
  .pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .pair pre + pre {
    border-left: none;
    border-top: 1px dashed var(--rule-strong);
  }
}

/* ── tutorial furniture ──────────────────────────────────────────────── */

.lesson {
  padding: 2.4rem 0 3rem;
}

.lesson .folio {
  font-family: var(--hand-display);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px dashed var(--rule);
  padding-bottom: 0.6rem;
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
}

.lesson .folio span:first-child {
  color: var(--pen-red);
}

.lesson h1 {
  font-family: var(--hand-display);
  font-size: clamp(2rem, 4.4vw, 2.9rem);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.14;
  margin: 0 0 0.9rem;
  max-width: 26ch;
}

.lesson .lede {
  font-size: 1.06rem;
  color: var(--ink-soft);
  max-width: 54ch;
  margin-bottom: 1.5rem;
}

/* A note written in the margin, in pencil. */
.note {
  border-left: 2px dashed var(--ink-faint);
  padding: 0.1rem 0 0.1rem 1rem;
  color: var(--ink-soft);
  font-size: 1rem;
  margin: 1.2rem 0;
}

.note strong {
  color: var(--pen-red);
  font-weight: 400;
}

.pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.6rem 0 3rem;
  font-family: var(--hand-display);
  font-size: 0.92rem;
  position: relative;
}

.pager::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 7px;
  opacity: 0.38;
}

.pager a {
  text-decoration: none;
  color: var(--pen-blue);
}

.pager a:hover {
  color: var(--pen-red);
  text-decoration: underline wavy;
}

.pager .next {
  margin-left: auto;
  text-align: right;
}

/* ── api reference ───────────────────────────────────────────────────── */

.api-group {
  padding-top: 2.2rem;
}

.api-group > h2 {
  color: var(--ink);
  font-family: var(--hand-display);
  font-size: 1.55rem;
  letter-spacing: 0.005em;
  text-transform: none;
  border-bottom: 2px solid var(--pen-red);
  border-bottom: 2px solid color-mix(in srgb, var(--pen-red) 70%, transparent);
  padding-bottom: 0.35rem;
  margin-bottom: 1rem;
}

.item {
  padding: 0.9rem 0;
  border-bottom: 1px dashed var(--rule);
}

.item:last-child {
  border-bottom: none;
}

.item .traits {
  margin: 0.5rem 0 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--ink-faint);
}

.item .sig {
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.58;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0 0 0.35rem;
  padding-left: 1.6em;
  text-indent: -1.6em;
}

.item .sig .name {
  color: var(--pen-red);
  font-weight: 700;
}

.item .doc {
  font-size: 1rem;
  color: var(--ink-soft);
  max-width: 74ch;
  margin: 0;
}

.item .doc p {
  margin: 0 0 0.5rem;
}

.item .doc p:last-child {
  margin-bottom: 0;
}

.item .doc code {
  background: linear-gradient(
    180deg,
    transparent 58%,
    var(--marker) 58%,
    var(--marker) 94%,
    transparent 94%
  );
  padding: 0 0.16em;
}

.item .doc pre {
  font-size: 0.78rem;
  margin: 0.55rem 0 0.2rem;
}

.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.8rem;
  font-family: var(--hand-display);
  font-size: 0.86rem;
  margin: 1rem 0 0;
}

.jump a {
  text-decoration: none;
  color: var(--ink-soft);
  border: 1px solid var(--rule-strong);
  background: var(--paper-raised);
  padding: 0.18rem 0.62rem;
  box-shadow: 0 1px 0 var(--rule);
  transform: rotate(-0.6deg);
}

.jump a:nth-child(even) {
  transform: rotate(0.7deg);
}

.jump a:hover {
  color: var(--pen-red);
  border-color: var(--pen-red);
}

/* ── diagrams ────────────────────────────────────────────────────────── */

figure {
  margin: 1.6rem 0 1.8rem;
}

figure svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

figure svg text {
  font-family: var(--hand);
}

figcaption {
  font-family: var(--hand);
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  color: var(--ink-faint);
  margin-top: 0.5rem;
}

/* ── footer ──────────────────────────────────────────────────────────── */

footer {
  padding: 2.2rem 0 3rem;
  font-family: var(--hand);
  font-size: 0.95rem;
  color: var(--ink-faint);
  position: relative;
}

footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 7px;
  opacity: 0.42;
}

footer .wrap {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
  align-items: baseline;
}

footer a {
  color: var(--ink-soft);
  text-decoration: none;
}

footer a:hover {
  color: var(--pen-red);
  text-decoration: underline wavy;
}

footer .spacer {
  margin-left: auto;
}

@media (max-width: 640px) {
  body {
    font-size: 18px;
    background-size: 120px 120px, 120px 120px, 22px 22px, 22px 22px, cover;
  }

  .specimen {
    grid-template-columns: 1fr;
    transform: none;
  }

  .hero {
    padding-top: 2.2rem;
  }

  header.bar nav {
    gap: 0.7rem;
    font-size: 0.78rem;
    margin-left: 0;
  }

  .lesson h1 {
    max-width: none;
  }
}