@font-face {
  font-family: Manrope;
  src: url("/fonts/manrope-latin-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Manrope fallback";
  src: local("Arial");
  ascent-override: 103.31%;
  descent-override: 29.07%;
  line-gap-override: 0%;
  size-adjust: 103.19%;
}

:root { color-scheme: dark; }
*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100vh; }
body {
  display: grid;
  justify-items: start;
  margin: 0;
  color: #fff;
  background: hsl(0, 80%, 10%);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.6;
  user-select: none;
  text-transform: lowercase;
}
.site-root { font-family: Manrope, "Manrope fallback"; }
main {
  display: grid;
  justify-items: start;
  padding: 88px;
}
h1, h2 {
  margin: 0;
  padding-bottom: 16px;
  font-weight: inherit;
  font-size: 24px;
  line-height: 1;
  text-transform: none;
}
h2 { padding-top: 24px; font-size: 20px; }
ul { margin: 0; padding: 0; list-style: inside; }
ul + ul { padding-top: 16px; }
li { padding: 0; list-style: none; }
a {
  display: inline-flex;
  color: inherit;
  padding: 0 2px;
  text-decoration: none;
  outline: 0;
  border-radius: 2px;
}
a:focus-visible { margin-bottom: -1px; border-bottom: 1px solid currentColor; }
a:active { transform: scale(0.96); }
.hand-container {
  position: fixed;
  inset: 96px 96px auto auto;
  width: 127px;
  height: 190px;
  opacity: 0.9;
}
.hand {
  position: absolute;
  inset: 0;
  display: none;
  transform-origin: 50% 50%;
}
.hand-interaction { position: absolute; inset: 0; }
@media (min-width: 580px) { .hand { display: block; } }