@font-face { font-family: "Familjen Grotesk"; font-weight: 400 700; font-display: swap; src: url(/fonts/FamiljenGrotesk-Variable.woff2) format("woff2"); }
:root { --display: "Familjen Grotesk", var(--font);
  --surface: light-dark(oklch(99% 0.004 var(--h)), oklch(21% 0.014 var(--h)));
  --line: light-dark(oklch(85% 0.012 var(--h)), oklch(32% 0.016 var(--h)));
  --glow: light-dark(oklch(92% 0.045 var(--h)), oklch(30% 0.05 var(--h))); }
html { background: var(--bg); }
body { place-items: start center; position: relative; isolation: isolate; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60rem 28rem at 50% -6rem, var(--glow), transparent 70%); }
main { width: min(100%, 44rem); padding-block: .25rem 3rem; }
.bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0 0 3rem; font-family: var(--display); font-weight: 600; font-size: 1.0625rem; }
.bar a { text-decoration: none; }
.bar span { color: var(--muted); font-weight: 400; }
.bar { position: relative; z-index: 1; }
h1 { font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem); line-height: 1.05; margin: 0 0 .75rem; letter-spacing: -.01em; text-wrap: pretty; max-width: 30ch; }
.lead { font-size: 1.125rem; color: var(--muted); margin: 0 0 2.5rem; max-width: 36rem; }
h2 { font-family: var(--display); font-weight: 600; font-size: 1rem; color: var(--muted); margin: 2rem 0 .5rem; }
.tools { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.tools li { border-bottom: 1px solid var(--line); }
.tools a { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: baseline; padding: 1rem .25rem; text-decoration: none; }
.tools a:hover b { text-decoration: underline; text-underline-offset: .15em; }
.tools b { font-family: var(--display); font-weight: 600; font-size: 1.25rem; display: block; }
.tools small { display: block; color: var(--muted); font-size: .9375rem; margin-top: .15rem; }
.tools .url { font-family: var(--mono); font-size: .875rem; color: var(--muted); }
.tools .soon b { color: var(--muted); }
footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .9375rem; color: var(--muted); }
footer a { margin-right: 1rem; }
