:root {
  --field: #0e1113;
  --panel: #151a1d;
  --text: #d9e0e3;
  --dim: #7c8a90;
  --amber: #ffb020;
  --teal: #63a6a0;
  --rule: rgba(217, 224, 227, 0.14);
  --rule-strong: rgba(217, 224, 227, 0.3);
  --grid: rgba(217, 224, 227, 0.045);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  background-color: var(--field);
  /* Drawing paper: a 28px grid, faint enough to read as texture. */
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

h1 {
  margin: 0;
  font-weight: 600;
  font-size: clamp(2.1rem, 6vw, 2.9rem);
  letter-spacing: -.035em;
  line-height: 1.02;
}

h2 {
  margin: 0;
}

p {
  margin: 0;
}

dl,
dt,
dd,
ol {
  margin: 0;
  padding: 0;
}

ol {
  list-style: none;
}

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

/* Annotation type: every label, ref and value on a drawing is mono. */
.note {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}