@font-face {
  font-family: "Courier Prime";
  src: url("assets/fonts/courier-prime.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: light;
  --paper: #f3eee3;
  --ink: #393631;
  --muted: #655f56;
  --line: #39352e26;
  font-family: "Courier Prime", "Courier New", monospace;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  place-items: start;
  padding: 48px;
  background-image: linear-gradient(#8a9ba51c 1px, transparent 1px), linear-gradient(90deg, #8a9ba51c 1px, transparent 1px);
  background-size: 24px 24px;
}
.page { width: min(100%, 320px); }
h1 {
  margin: 0;
  font-size: 32px;
  line-height: 48px;
  font-weight: 400;
  letter-spacing: -1px;
}
.letter { display: inline-block; white-space: pre; }
.links {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.link {
  position: relative;
  display: inline-block;
  min-height: 24px;
  color: var(--ink);
  font-size: 13px;
  line-height: 24px;
  font-weight: 400;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.link::after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: -1px;
  right: -2px;
  height: 1px;
  background: currentColor;
  clip-path: inset(0 100% 0 0);
  opacity: .85;
  transition: clip-path 220ms ease-in-out;
  pointer-events: none;
}
.link[href]:is(:hover, :focus-visible)::after {
  clip-path: inset(0 0 0 0);
  transition-duration: 340ms;
  transition-timing-function: cubic-bezier(.25,.6,.35,1);
}
.link:focus-visible { outline: 1px dashed var(--muted); outline-offset: 5px; border-radius: 2px; }
.link[aria-disabled="true"] { color: var(--muted); --ink: var(--muted); }
footer {
  margin-top: 24px;
  --ink: var(--muted);
  color: var(--muted);
  font-size: 12px;
  line-height: 24px;
  font-weight: 400;
}
@keyframes arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}
.links, footer { animation: arrive 400ms cubic-bezier(.2,.7,.3,1) both; }
.links { animation-delay: 80ms; }
footer { animation-delay: 140ms; }
@media (max-width: 600px) { body { padding: 24px; } }
@media (max-width: 380px) { h1 { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .link[href]:is(:hover, :focus-visible) { text-decoration: underline; }
}

/* The zero-height inline marker identifies the font's actual baseline. */
.baseline-marker { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
h1, .link, footer { position: relative; top: var(--baseline-shift, 0px); }