@font-face {
  font-family: "Readex Pro";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("https://last9.io/_astro/ReadexProVariable.DkfSrpTq.ttf")
    format("truetype");
}

@font-face {
  font-family: "Google Sans Code";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("https://last9.io/_astro/GoogleSansCodeVariable.a41q3NA0.ttf")
    format("truetype");
}

:root {
  --color-white: #fff;
  --color-black: #000;
  --color-zinc-100: oklch(96.7% 0.001 286.375);
  --color-zinc-200: oklch(92% 0.004 286.32);
  --color-zinc-300: oklch(87.1% 0.006 286.286);
  --color-zinc-400: oklch(70.5% 0.015 286.067);
  --color-zinc-500: oklch(55.2% 0.016 285.938);
  --color-zinc-600: oklch(44.2% 0.017 285.786);
  --color-zinc-700: oklch(37% 0.013 285.805);
  --color-zinc-800: oklch(27.4% 0.006 286.033);
  --color-zinc-900: oklch(21% 0.006 285.885);
  --color-zinc-950: oklch(14.1% 0.005 285.823);
  --color-lime-200: oklch(93.8% 0.127 124.321);
  --color-lime-500: oklch(76.8% 0.233 130.85);
  --color-lime-600: oklch(64.8% 0.2 131.684);
  --color-lime-700: oklch(53.2% 0.157 131.589);
  --color-lime-300: oklch(89.7% 0.196 126.665);
  --color-lime-400: oklch(84.1% 0.238 128.85);

  --background: var(--color-zinc-100);
  --surface: var(--color-white);
  --foreground: var(--color-zinc-900);
  --foreground-2: var(--color-zinc-600);
  --foreground-3: var(--color-zinc-700);
  --primary: var(--color-lime-600);
  --primary-hover: var(--color-lime-500);
  --accent: var(--color-lime-700);
  --card-border: color-mix(in oklab, var(--color-zinc-200) 60%, white);
  --ring: color-mix(in oklab, var(--color-lime-200) 35%, transparent);
  --shadow: 0 30px 80px rgba(24, 24, 27, 0.1);
  --hero-glow: color-mix(in oklab, var(--primary) 18%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: var(--color-zinc-950);
    --surface: var(--color-zinc-900);
    --foreground: var(--color-white);
    --foreground-2: var(--color-zinc-500);
    --foreground-3: var(--color-zinc-400);
    --primary: var(--color-lime-300);
    --primary-hover: var(--color-lime-400);
    --accent: var(--color-lime-400);
    --card-border: color-mix(in oklab, var(--color-zinc-800) 80%, transparent);
    --ring: color-mix(in oklab, var(--color-lime-300) 20%, transparent);
    --shadow: 0 32px 96px rgba(0, 0, 0, 0.45);
    --hero-glow: color-mix(in oklab, var(--primary) 12%, transparent);
  }
}

* {
  box-sizing: border-box;
}

body {
  color-scheme: light dark;
  margin: 0;
  min-height: 100vh;
  padding: 2rem;
  background:
    radial-gradient(120% 80% at 0% 0%, var(--hero-glow) 0%, transparent 52%),
    radial-gradient(
      100% 70% at 100% 100%,
      color-mix(in oklab, var(--primary) 8%, transparent) 0%,
      transparent 55%
    ),
    var(--background);
  color: var(--foreground);
  font-family: "Readex Pro", sans-serif;
}

.page {
  min-height: calc(100vh - 4rem);
  display: grid;
  place-items: center;
}

.landing {
  width: min(760px, 100%);
  padding: clamp(1.5rem, 3vw, 3rem);
  border: 1px solid var(--card-border);
  border-radius: 28px;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--surface) 92%, white) 0%,
      var(--surface) 100%
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='rgba(128,128,128,0.08)' stroke-width='1'%3E%3Cpath d='M0 70h140M70 0v140'/%3E%3C/g%3E%3C/svg%3E");
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}

.eyebrow {
  margin: 0 0 1rem;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 650;
  font-family: "Google Sans Code", Menlo, Courier, monospace;
}

h1 {
  margin: 0;
  font-family: "Readex Pro", sans-serif;
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1.03;
  font-weight: 620;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.subtitle {
  margin: 1.1rem 0 1.75rem;
  color: var(--foreground-2);
  line-height: 1.65;
  max-width: 56ch;
  font-size: clamp(1rem, 1.2vw, 1.08rem);
}

.flow {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  margin-bottom: 1.9rem;
  color: var(--foreground-3);
  font-size: 0.92rem;
  font-family: "Google Sans Code", Menlo, Courier, monospace;
}

.flow span {
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 0.34rem 0.64rem;
  background: color-mix(in oklab, var(--surface) 92%, transparent);
}

.flow span[aria-hidden="true"] {
  border: none;
  background: transparent;
  padding: 0;
  color: var(--foreground-2);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}

.cta,
.ghost {
  border-radius: 12px;
  padding: 0.72rem 1rem;
  font-size: 0.88rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease,
    background-color 160ms ease, color 160ms ease;
}

.cta {
  border: 1px solid color-mix(in oklab, var(--primary) 40%, transparent);
  background: color-mix(in oklab, var(--primary) 18%, transparent);
  color: var(--foreground);
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--ring);
}

.cta:hover {
  background: color-mix(in oklab, var(--primary-hover) 24%, transparent);
  transform: translateY(-1px);
}

.ghost {
  border: 1px solid var(--card-border);
  color: var(--foreground-2);
  background: transparent;
}

.ghost:hover {
  color: var(--foreground);
  border-color: color-mix(in oklab, var(--primary) 28%, var(--card-border));
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  body {
    padding: 1rem;
  }

  .page {
    min-height: calc(100vh - 2rem);
  }

  .landing {
    border-radius: 20px;
    padding: 1.35rem;
  }
}