:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #100807;
  color: #faf5f2;
  font-size: 17px;
  line-height: 1.65;
}
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 740px; margin: auto; padding: 80px 28px 36px; }
header { padding-bottom: 30px; }
h1 { font-size: clamp(2.7rem, 9vw, 4rem); line-height: 1.1; letter-spacing: -.055em; margin: 32px 0 20px; }
h2 { font-size: 1.1rem; margin: 0 0 14px; }
p { margin: 0 0 16px; }
.intro { font-size: 1.25rem; max-width: 32ch; }
a { color: inherit; text-underline-offset: 4px; }
a:hover { color: #ff9387; }
a:focus-visible { outline: 2px solid #ff9387; outline-offset: 6px; }
.links { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin: 26px 0 10px; }
.download { background: #f23e32; color: #100807; font-weight: 700; border-radius: 10px; padding: 12px 20px; text-decoration: none; }
.download:hover { background: #ff786b; color: #100807; }
.download span { margin-left: 16px; }
.requirement { color: #b6a5a0; font-size: .8rem; }
section { padding: 28px 0; border-top: 1px solid #3b2824; }
ul, ol { margin: 0; padding-left: 23px; }
li { padding-left: 6px; margin-bottom: 12px; }
li:last-child { margin-bottom: 0; }
code { font-size: .85em; overflow-wrap: anywhere; }
footer { border-top: 1px solid #3b2824; padding-top: 24px; color: #b6a5a0; font-size: .85rem; }
nav { display: flex; gap: 24px; margin-bottom: 14px; }
.blob {
  --gaze-x: 0px;
  --gaze-y: 0px;
  --openness: 1;
  position: relative;
  width: 108px;
  height: 108px;
  border-radius: 50% 50% 50% 22.727%;
  background: #f23e32;
  box-shadow: 0 0 24px #f23e3266;
  transform: rotate(-7deg);
}
.eye {
  position: absolute;
  top: 31.818%;
  width: 22.727%;
  height: 22.727%;
  border-radius: 50%;
  background: #fff;
  transform: translate(var(--gaze-x), var(--gaze-y)) scaleY(var(--openness));
  transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}
.left { left: 22.727%; }
.right { left: 54.545%; }
.blob.blink { --openness: .1; }
.blob.blink .eye { transition-duration: .07s; }
@media (max-width: 480px) { main { padding: 48px 22px 24px; } }
@media (prefers-reduced-motion: reduce) { .eye { transition: none; } }