@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,300..800&family=JetBrains+Mono:wght@400;500&display=swap');
:root{
  --ink:#0d0d0d; --paper:#ecebe7; --paper-2:#e2e0db; --concrete:#8e8b86; --mid:#5d5b57; --line:rgba(13,13,13,.12);
  --font:"Archivo",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--paper);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
.track{position:relative}
.stage{position:sticky;top:0;height:100vh;height:100lvh;width:100%;overflow:hidden}
.grain{position:absolute;inset:-50%;pointer-events:none;opacity:.22;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.brand{text-decoration:none;position:fixed;top:22px;left:28px;z-index:50;display:flex;align-items:center;gap:12px}
.brand svg{height:22px;width:auto;display:block}
.brand .mono{opacity:.55}
.versions{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;display:flex;gap:4px;padding:5px;
  background:rgba(13,13,13,.86);backdrop-filter:blur(8px);border-radius:999px}
.versions a{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#bdbbb6;text-decoration:none;padding:8px 13px;border-radius:999px;white-space:nowrap}
.versions a.on{background:#ecebe7;color:#0d0d0d}
.versions a:hover:not(.on){color:#fff}
.hint{position:absolute;left:50%;bottom:76px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px}
.hint i{display:block;width:1px;height:34px;background:currentColor;opacity:.5;animation:drip 1.6s ease-in-out infinite;transform-origin:top}
@keyframes drip{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.display{font-weight:650;font-stretch:108%;letter-spacing:-.025em;line-height:.98;font-size:clamp(34px,5.2vw,78px);text-wrap:balance}
.lede{font-size:clamp(15px,1.25vw,19px);line-height:1.5;color:var(--mid);max-width:34ch;text-wrap:pretty}
.next-tag{display:inline-flex;gap:10px;align-items:center;margin-top:22px}
@media (max-width:700px){
  .brand{top:16px;left:16px}
  .versions{bottom:12px}
  .versions a{padding:8px 10px;font-size:10px}
  .hint{bottom:70px}
}
.progress{position:fixed;left:0;top:0;height:3px;width:100%;background:#8e8b86;transform-origin:0 50%;transform:scaleX(0);z-index:70}