/* Fraunces (display: optical size, weight and softness axes) and Geist (text), self-hosted latin subsets */
@font-face { font-family: "Fraunces"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(fonts/fraunces-latin-full-normal.woff2) format("woff2-variations"); }
@font-face { font-family: "Geist"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(fonts/geist-latin-wght-normal.woff2) format("woff2-variations"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(fonts/geist-mono-latin-wght-normal.woff2) format("woff2-variations"); }

:root { --ink: #1c1c1e; --quiet: #6a6a70; --page: #f7f7f7; --edge: max(20px, env(safe-area-inset-left)); }
html, body { margin: 0; background: var(--page); overflow-x: hidden; }
body { font: 400 15px/1.5 "Geist", system-ui, sans-serif; letter-spacing: -0.005em; color: var(--ink);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 6px; }
h1, h2, p { margin: 0; }
/* the display voice: soft, high-contrast, set tight */
h1, h2, .wm { font-family: "Fraunces", Georgia, serif; font-optical-sizing: none; font-weight: 560; text-wrap: balance;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0; }

/* the bar: the wordmark left, GitHub right */
.bar { position: fixed; z-index: 2; top: 0; left: 0; right: 0; padding: 20px var(--edge); display: flex; justify-content: space-between; align-items: center;
  font-size: 14px; font-weight: 500; }
.wm { font-size: 25px; font-weight: 620; letter-spacing: -0.035em; line-height: 1; white-space: nowrap; }
.mark { width: .62em; height: .62em; margin: 0 .02em 0 .03em; vertical-align: -.06em; filter: drop-shadow(.03em .06em .05em rgba(28, 28, 30, .35)); }

/* the stage stays put; the track behind it is what scrolls */
.track { height: 900vh; }
.stage { position: fixed; inset: 0; overflow: hidden; }
.goo { width: 100%; height: 100%; }
.goo > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.b { position: absolute; left: 0; top: 0; will-change: translate; }

/* one line per blob */
.txt, .get, .ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }
h2 { font-size: 31px; line-height: 1.04; letter-spacing: -0.028em; }
.txt p { margin-top: 10px; font-size: 14.5px; line-height: 1.45; color: var(--quiet); text-wrap: pretty; }

/* the first screen */
h1 { position: absolute; left: 0; right: 0; padding: 0 var(--edge); text-align: center; font-size: clamp(42px, 6.2vw, 84px); line-height: 1;
  letter-spacing: -0.04em; font-weight: 520; }
.hint { position: absolute; left: 0; right: 0; bottom: 30px; text-align: center; font-size: 13px; color: var(--quiet); pointer-events: none; }
.ring { pointer-events: none; }
.ring > * { display: block; }
/* without WebGL the hero breathes through the 2D goo */
.flat .hero { animation: breathe 4.4s ease-in-out infinite alternate; }
@keyframes breathe { to { scale: calc(1 + .06 * var(--breath, 1)); } }

/* the last blob: how to get it */
.get h2 { font-size: 36px; }
pre { margin: 16px 0 18px; padding: 14px 18px; border-radius: 18px; background: rgba(28, 28, 30, .055); text-align: left;
  font: 450 13px/1.7 "Geist Mono", ui-monospace, Consolas, monospace; letter-spacing: -0.01em; white-space: pre-wrap; overflow-wrap: anywhere;
  box-shadow: inset 0 1px 2px rgba(28, 28, 30, .08); }
.cta { display: inline-block; padding: 10px 20px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 500;
  transition: scale .2s ease; }
.cta:hover { scale: 1.04; }
.get small { display: block; margin-top: 12px; font-size: 12.5px; color: var(--quiet); }

.foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px var(--edge); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px;
  font-size: 13px; color: var(--quiet); }
.foot a { margin-left: 20px; color: var(--ink); font-weight: 500; }
.foot a:first-child { margin-left: 0; }
.bar a:hover, .foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
.bar .logo:hover { text-decoration: none; }

@media (max-width: 1019px) {
  h2 { font-size: 27px; }
  .get h2 { font-size: 31px; }
  .txt p { font-size: 14px; }
  pre { font-size: 11.5px; padding: 12px 14px; }
  .wm { font-size: 22px; }
  .foot { justify-content: center; text-align: center; padding-bottom: 18px; }
}

/* reduced motion: the same blobs, still, one under the other */
.calm .bar { position: absolute; }
.calm .goo { height: auto; display: flex; flex-direction: column; align-items: center; gap: 36px; padding: 18vh 0 72px; }
.calm .b { position: relative; flex: none; }
.calm h1 { position: static; margin: 0 0 28px; }
.calm .foot { position: static; }