@font-face {
  font-family: 'Amatic SC';
  src: url('/fonts/AmaticSC-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
:root { color-scheme: dark; --bg: #0a0a0a; --ink: #eeede8; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); }
body { color: var(--ink); -webkit-font-smoothing: antialiased; }
.night {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: max(32px, env(safe-area-inset-top)) 24px max(32px, env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at 50% 44%, #151514 0%, var(--bg) 64%);
  isolation: isolate;
}
.intro { position: relative; z-index: 2; text-align: center; }
h1 { margin: 0; font: 700 clamp(68px, 11vw, 132px)/1.1 'Amatic SC', sans-serif; letter-spacing: .025em; }
#footsteps { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.paw {
  position: absolute;
  width: var(--pw, 30px);
  height: calc(var(--pw, 30px) * 1.25);
  color: var(--ink);
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(var(--a)) scaleX(var(--m));
  animation: print-fade 7s linear both;
}
@keyframes print-fade {
  0% { opacity: 0; }
  5% { opacity: .48; }
  22% { opacity: .3; }
  55% { opacity: .16; }
  100% { opacity: 0; }
}
#footsteps.frozen .paw { animation-play-state: paused; }
#footsteps.still .paw { animation: none; opacity: .2; }
@media (max-width: 600px) {
  .paw { --pw: 24px; }
}
@media (prefers-reduced-motion: reduce) { .paw { animation: none; opacity: .2; } }