@font-face {
  font-family: "Courier Prime";
  src: url("./fonts/courier-prime-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #10140f;
  --text: #eee9db;
  --muted: #b7bba7;
  --sage: #93a184;
  --amber: #c3a36e;
  --surface: rgb(16 20 15 / 48%);
  --border: rgb(183 187 167 / 22%);
  font-family: ui-sans-serif, system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
}
* { box-sizing: border-box; }
body { margin: 0; height: 100vh; height: 100dvh; overflow: hidden; }
#scene { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='grain' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  opacity: .055;
  mask-image: linear-gradient(to top, #000, rgb(0 0 0 / 55%) 45%, transparent 85%);
}
main, footer, #motion-toggle { z-index: 2; }
main {
  position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(420px, calc(100% - 32px));
  padding: 32px;
  font-family: "Courier Prime", "Courier New", Courier, monospace;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
}
h1 { margin: 0; font-size: clamp(36px, 5vw, 56px); font-weight: 400; line-height: 1.1; letter-spacing: -.035em; }
h2 { margin: 12px 0 0; font-size: clamp(16px, 2vw, 20px); font-weight: 400; line-height: 1.4; color: var(--muted); }
p { margin: 28px 0 0; font-size: 14px; line-height: 1.6; }
a { color: inherit; text-decoration: none; text-underline-offset: 4px; }
a:hover, a:focus-visible { color: var(--amber); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 5px; }
footer {
  position: absolute; inset: auto 0 0;
  min-height: calc(44px + env(safe-area-inset-bottom));
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0 8px;
  border-top: 1px solid var(--border);
  background: rgb(16 20 15 / 75%);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  color: var(--muted); font-size: 12px; line-height: 30px;
}
footer a { display: inline-block; white-space: nowrap; }
#motion-toggle {
  position: fixed; top: calc(12px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right));
  width: 44px; height: 44px; padding: 14px;
  border: 1px solid var(--border); border-radius: 2px;
  background: var(--surface); color: var(--muted); cursor: pointer;
}
#motion-toggle:hover { color: var(--amber); border-color: currentColor; }
#motion-toggle span { display: block; width: 12px; height: 14px; margin: auto; border-left: 3px solid; border-right: 3px solid; }
#motion-toggle[aria-label="Resume animation"] span { width: 0; height: 0; border: 7px solid transparent; border-right: 0; border-left: 11px solid currentColor; }
@media (max-width: 599px) { main { padding: 24px; } }
@media (max-height: 499px) { main { padding-top: 16px; padding-bottom: 16px; } h2, p { margin-top: 8px; } }