@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/Geist-Regular.woff2) format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/Geist-Medium.woff2) format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/JetBrainsMono-Regular.woff2) format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/JetBrainsMono-Medium.woff2) format("woff2");
}

:root {
  --ink-0: #000;
  --ink-1: #0a0a0c;
  --fg: oklch(97% 0 0);
  --fg-dim: oklch(82% .005 80);
  --fg-faint: oklch(50% .008 80);
  --accent: oklch(80% .16 72);
  --accent-2: oklch(88% .07 85);
  --cradle-ember: oklch(50% .13 55);
  --cradle-umber: oklch(30% .07 50);
  --rule: oklch(100% 0 0/.08);
  --rule-strong: oklch(100% 0 0/.14);
  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.2,.8,.2,1);
  --edge: clamp(24px, 3vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

::selection { background: oklch(80% .16 72 / .30); }

html {
  color-scheme: dark;
  background: var(--ink-0);
  color: var(--fg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body { margin: 0; }

p, h1, ul { margin: 0; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; margin: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

s { text-decoration-thickness: 1px; }

/* Canvas */

.cradle {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  image-rendering: pixelated;
  opacity: 0;
  transition: opacity 800ms var(--ease);
}
.cradle.is-drawn { opacity: 1; }

.scan {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .35;
  background: repeating-linear-gradient(to bottom, rgb(0 0 0 / .4) 0 1px, transparent 1px 3px);
}

/* Brand */

.brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.brand svg { width: 22px; height: 22px; flex: none; color: var(--fg); }
.mark-dot { fill: var(--accent); }

/* Hero */

.hero { position: relative; z-index: 1; }

.eyebrow,
.row-head,
.row-text,
.row-action,
.clock,
.badge,
.chip {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .18em;
}

.eyebrow { font-size: 12px; color: var(--accent-2); }

h1 {
  margin: 18px 0 22px;
  font-size: clamp(2.4rem, 1.2rem + 3.8vw, 4.4rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -0.03em;
  color: var(--fg);
}
.h-dim { color: var(--fg-dim); }
.h-accent { color: var(--accent); }

.lede {
  font-size: 1.0625rem;
  line-height: 1.625;
  max-width: 46ch;
  color: var(--fg-dim);
}

/* Product list */

.list {
  margin-top: 36px;
  padding: 0;
  list-style: none;
  border: 1px solid var(--rule-strong);
  background: rgb(10 10 12 / .7);
}

.row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  min-height: 64px;
}
.row + .row { border-top: 1px solid var(--rule-strong); }

.row-glyph {
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
}
.row-glyph.is-accent { color: var(--accent); }
.row-glyph.is-faint { color: var(--fg-faint); }

.row-body {
  align-self: center;
  padding: 12px 16px 12px 0;
}

.row-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--fg);
}
.row-status { font-size: 11px; color: var(--fg-dim); }
.row-status.is-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.row-status.is-live::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

.row-text {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg);
}
.row-text.is-dim { color: var(--fg-dim); }

.row-action {
  min-width: 88px;
  padding: 0 18px;
  border-left: 1px solid var(--rule-strong);
  display: grid;
  place-items: center;
  font-size: 11px;
  color: var(--fg-dim);
  transition: color 150ms var(--ease);
}
a.row-action:hover { color: var(--fg); }
.row-action:focus-visible { outline-offset: -2px; }

/* Footer */

.foot { position: relative; z-index: 1; }
.clock { font-size: 11px; color: var(--fg-dim); }
.chip,
.badge {
  font-size: 11px;
  border: 1px solid var(--rule-strong);
  padding: 6px 10px;
  background: rgb(10 10 12 / .7);
}
.chip { color: var(--fg-dim); }
.badge {
  color: var(--fg);
  pointer-events: auto;
  transition: border-color 150ms var(--ease);
}
.badge-arrow { color: var(--accent); }
.badge:hover,
.badge:focus-visible { border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .cradle { transition: none; }
}

/* Desktop */

@media (min-width: 768px) {
  .brand { position: fixed; top: 28px; left: var(--edge); }
  .hero {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    padding: 72px 24px 120px max(24px, 12vw);
  }
  .col { width: min(640px, 100%); }
  .foot {
    position: fixed;
    left: var(--edge);
    right: var(--edge);
    bottom: 40px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    pointer-events: none;
  }
  .chip { justify-self: end; }
}

@media (min-width: 768px) and (min-height: 640px) {
  body { overflow: hidden; }
}

/* Mobile */

@media (max-width: 767.98px) {
  body { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .cradle.is-drawn { opacity: .55; }
  .brand { position: absolute; top: 24px; left: 24px; }
  .hero { padding: 96px 24px 0; }
  .foot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 40px 24px 0;
  }
  .badge {
    position: fixed;
    left: 50%;
    bottom: max(16px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 10;
  }
}