:root {
  --floor: #d7dbe2;
  --ink: #1c2430;
  --paper: rgba(255, 252, 247, 0.88);
  --wood: #b8884f;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  min-height: 100%;
  color: var(--ink);
  background: var(--floor);
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-size: 1.05rem;
  line-height: 1.45;
}
header, .panel {
  position: relative;
  z-index: 2;
  max-width: 38rem;
  margin: 0;
  padding: 1.25rem 1.4rem 0.2rem;
}
.name {
  margin: 0;
  font-family: Fredoka, sans-serif;
  font-size: 1.4rem;
}
h1 {
  margin: 0.15rem 0 0.4rem;
  font-family: Fredoka, sans-serif;
  font-weight: 650;
  font-size: clamp(2rem, 4vw, 3.1rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.lede { margin: 0; max-width: 36rem; }
.panel {
  position: absolute;
  left: 0;
  bottom: 0;
  padding-bottom: 1.2rem;
  background: linear-gradient(to top, rgba(215, 219, 226, 0.95), rgba(215, 219, 226, 0));
}
h2 {
  margin: 0 0 0.35rem;
  font-family: Fredoka, sans-serif;
  font-size: 1.25rem;
}
ol { margin: 0 0 0.6rem; padding-left: 1.2rem; }
code {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-weight: 700;
}
a { color: #1a4f8b; }
canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
@media (max-width: 700px) {
  .panel { position: relative; background: transparent; }
  canvas { position: relative; height: 62vh; }
}
@media (prefers-reduced-motion: reduce) {
  canvas { }
}