body {
  margin: 0;
  background: #f4f1ea;
  color: #2c2c2c;
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
}

.page {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

h1 {
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 1.5rem;
}

.section {
  margin-bottom: 2.5rem;
}

.section h2 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #8a8578;
  border-bottom: 1px solid #ddd8cc;
  padding-bottom: 0.5rem;
}

.section__note {
  margin: 0.75rem 0 0;
  max-width: 60ch;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #6f6a5e;
}

.examples {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  padding: 1.25rem 0 0;
}

.example {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: #fffdf7;
  border: 1px solid #e2ddd0;
  border-radius: 6px;
  overflow: hidden;
}

/* Fixed height so a row of cards lines up regardless of how tall each stamp
   renders — a long sentence is several times the height of a single word. */
.example__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 7rem;
  padding: 1.25rem;
  overflow: hidden;
}

/* Pushed to the bottom of the card so code blocks line up across a row even
   when they run to a different number of lines. */
.code {
  position: relative;
  margin-top: auto;
  background: #f7f4ec;
  border-top: 1px solid #e9e4d8;
}

.code__pre {
  margin: 0;
  /* Right padding leaves room for the copy button to sit over the block. */
  padding: 0.75rem 2.6rem 0.75rem 0.9rem;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #55504a;
  white-space: pre-wrap;
  /* Breaks between words but never mid-token, so a closing tag cannot end up
     split across two lines as "</Stamp" + ">". */
  overflow-wrap: break-word;
}

.code__copy {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  background: #fffdf7;
  border: 1px solid #e2ddd0;
  border-radius: 5px;
  color: #6f6a5e;
  cursor: pointer;
}

.code__copy:hover {
  color: #2c2c2c;
  border-color: #cfc9ba;
}

.code__copy:focus-visible {
  outline: 2px solid #2b4f9c;
  outline-offset: 1px;
}

.code__copy--done,
.code__copy--done:hover {
  color: #1e6f3f;
  border-color: #b9d4c2;
}

/* A stamp holding a full sentence is far wider than one card. It gets the full
   width of the grid and a smaller face, since `white-space: nowrap` means it
   cannot wrap its way out of an overflow. */
.example:has(.example__stage--wide) {
  grid-column: 1 / -1;
}

.example__stage--wide {
  font-size: 0.72rem;
}

.paper {
  background: #fffdf7;
  border: 1px solid #e2ddd0;
  border-radius: 6px;
  padding: 1.5rem;
  line-height: 1.7;
  position: relative;
}

/* Standing on its own outside a card, this block needs its own frame. */
.paper + .code {
  margin-top: 0.75rem;
  border: 1px solid #e9e4d8;
  border-radius: 6px;
}

/* GitHub corner — https://tholman.com/github-corners/
   Recoloured to the demo's palette: the ribbon takes the paper's ink, the
   octocat is cut out of it in the page background. */
.github-corner {
  position: absolute;
  top: 0;
  right: 0;
  color: #f4f1ea;
  mix-blend-mode: multiply;
}

.github-corner svg {
  display: block;
  fill: #2c2c2c;
}

.github-corner:focus-visible svg {
  outline: 2px solid #c62828;
  outline-offset: -4px;
}

/* The arm waves on hover, the way the original does. */
.github-corner:hover .github-corner__arm,
.github-corner:focus-visible .github-corner__arm {
  animation: octocat-wave 560ms ease-in-out;
}

@keyframes octocat-wave {
  0%,
  100% {
    transform: rotate(0);
  }
  20%,
  60% {
    transform: rotate(-25deg);
  }
  40%,
  80% {
    transform: rotate(10deg);
  }
}

.github-corner__arm {
  transform-origin: 130px 106px;
}

/* Touch screens have no hover, and the corner is large enough there that a
   permanently waving arm reads as a glitch. */
@media (max-width: 500px) {
  .github-corner:hover .github-corner__arm {
    animation: none;
  }

  .github-corner svg {
    width: 64px;
    height: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .github-corner:hover .github-corner__arm,
  .github-corner:focus-visible .github-corner__arm {
    animation: none;
  }
}