@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,700..900,100,1&family=IBM+Plex+Mono:wght@500;600;700&family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root {
  color-scheme: light dark;
  --ink: #171412;
  --paper: #f4efe5;
  --paper-deep: #e6d7bd;
  --acid: #b8ff3d;
  --coral: #ff6b4a;
  --cyan: #46d9ff;
  --body-dot: rgba(23, 20, 18, 0.12);
  --body-warm: rgba(255, 107, 74, 0.16);
  --body-cool: rgba(70, 217, 255, 0.18);
  --surface: rgba(255, 255, 255, 0.72);
  --surface-strong: rgba(255, 255, 255, 0.78);
  --field-surface: rgba(255, 255, 255, 0.72);
  --key-surface: rgba(255, 255, 255, 0.44);
  --muted: rgba(23, 20, 18, 0.78);
  --muted-strong: rgba(23, 20, 18, 0.72);
  --placeholder: rgba(23, 20, 18, 0.45);
  --idea: #78301f;
  --mark-bg: #171412;
  --mark-fg: #fff8e7;
  --hero-overlay: linear-gradient(90deg, rgba(244, 239, 229, 0.98), rgba(244, 239, 229, 0.7) 60%, rgba(244, 239, 229, 0.22));
  --hero-overlay-mobile: linear-gradient(180deg, rgba(244, 239, 229, 0.98), rgba(244, 239, 229, 0.78));
  --button-ink: #171412;
  --inline-code: rgba(23, 20, 18, 0.08);
  --pre-bg: #211d1a;
  --pre-fg: #fff8e7;
  --line: rgba(23, 20, 18, 0.16);
  --shadow: rgba(23, 20, 18, 0.28);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f7efdf;
    --paper: #11100e;
    --paper-deep: #1d1916;
    --acid: #bbff35;
    --coral: #ff785e;
    --cyan: #42d9ff;
    --body-dot: rgba(255, 248, 231, 0.09);
    --body-warm: rgba(255, 107, 74, 0.11);
    --body-cool: rgba(70, 217, 255, 0.12);
    --surface: rgba(30, 27, 24, 0.78);
    --surface-strong: rgba(30, 27, 24, 0.86);
    --field-surface: rgba(30, 27, 24, 0.82);
    --key-surface: rgba(255, 248, 231, 0.12);
    --muted: rgba(247, 239, 223, 0.74);
    --muted-strong: rgba(247, 239, 223, 0.7);
    --placeholder: rgba(247, 239, 223, 0.44);
    --idea: #ff9a78;
    --mark-bg: #f7efdf;
    --mark-fg: #171412;
    --hero-overlay: linear-gradient(90deg, rgba(17, 16, 14, 0.98), rgba(17, 16, 14, 0.76) 60%, rgba(17, 16, 14, 0.2));
    --hero-overlay-mobile: linear-gradient(180deg, rgba(17, 16, 14, 0.97), rgba(17, 16, 14, 0.82));
    --inline-code: rgba(255, 248, 231, 0.12);
    --pre-bg: #050505;
    --pre-fg: #fff8e7;
    --line: rgba(255, 248, 231, 0.2);
    --shadow: rgba(0, 0, 0, 0.6);
  }
}

* {
  box-sizing: border-box;
}

html {
  background: var(--paper);
  color: var(--ink);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 24px 24px, var(--body-dot) 1px, transparent 1px),
    linear-gradient(135deg, var(--body-warm), transparent 38%),
    linear-gradient(210deg, var(--body-cool), transparent 42%),
    var(--paper);
  background-size: 48px 48px, auto, auto, auto;
  color: var(--ink);
  font-family: "Space Grotesk", sans-serif;
}

button,
input {
  font: inherit;
}

a {
  color: inherit;
}

.hidden {
  display: none !important;
}

.hero {
  position: relative;
  min-height: 76svh;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.hero::before {
  position: absolute;
  inset: 0;
  content: "";
  z-index: 1;
  background: var(--hero-overlay);
  pointer-events: none;
}

.hero-bg-logo {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: max(18px, 6vw);
  width: min(54vw, 620px);
  height: auto;
  border-radius: clamp(22px, 3vw, 46px);
  clip-path: inset(7% round clamp(22px, 3vw, 46px));
  object-fit: cover;
  pointer-events: none;
  transform: translateY(-50%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 76svh;
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 0 30px;
}

.topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-weight: 700;
}

.brand-lockup img {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  clip-path: inset(7% round 8px);
  object-fit: cover;
  box-shadow: 0 8px 18px var(--shadow);
}

.top-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 14px;
  font-size: 0.95rem;
  font-weight: 600;
}

.top-actions a {
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.hero-copy {
  max-width: 900px;
  padding-top: 48px;
}

.kicker {
  width: fit-content;
  margin: 0 0 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(184, 255, 61, 0.52);
  padding: 8px 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.85rem;
  font-weight: 600;
}

h1 {
  max-width: 900px;
  margin: 0;
  font-size: 4rem;
  line-height: 1;
  font-weight: 800;
}

h1 .before-word {
  display: inline-block;
  color: var(--mark-fg);
  background: var(--mark-bg);
  border: 2px solid var(--mark-bg);
  border-radius: 8px;
  padding: 0 0.16em 0.08em;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-variation-settings:
    "SOFT" 100,
    "WONK" 1,
    "opsz" 72;
}

.idea-line {
  display: block;
  max-width: 13.5ch;
  margin-top: 0.1em;
  color: var(--idea);
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(3rem, 6vw, 5.25rem);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.92;
  text-wrap: balance;
}

.body-copy {
  max-width: 520px;
  margin: 16px 0 0;
  font-size: 1.22rem;
  line-height: 1.5;
  color: var(--muted);
}

.cta-row,
.waitlist-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  margin-top: 24px;
}

.button,
.social-button {
  min-height: 52px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-color: var(--button-ink);
  color: var(--button-ink);
  padding: 0 16px;
  font-weight: 800;
  box-shadow: 5px 5px 0 var(--button-ink);
}

.button:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--button-ink);
}

.social-button:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--ink);
}

.primary {
  background: var(--acid);
}

.secondary {
  background: var(--cyan);
}

.talk {
  margin-top: 12px;
  background: var(--coral);
}

.icon {
  width: 22px;
  height: 22px;
  display: inline-block;
  flex: 0 0 auto;
  background: currentColor;
}

.apple {
  clip-path: path("M16.8 12.8c0-2 1.6-3 1.7-3.1-1-.1-2.5-.9-3.4-.9-1.4 0-2.2.8-3.1.8-.9 0-1.7-.8-3-.8-1.5 0-3 .9-3.8 2.3-1.6 2.9-.4 7.2 1.2 9.5.8 1.1 1.7 2.4 3 2.3 1.2 0 1.7-.8 3.1-.8s1.8.8 3.1.8c1.3 0 2.1-1.1 2.9-2.2.9-1.3 1.2-2.5 1.2-2.6 0 0-2.5-1-2.5-4.1ZM14.2 7.3c.7-.8 1.1-1.9 1-3-1 .1-2.1.7-2.8 1.5-.6.7-1.1 1.8-1 2.8 1.1.1 2.2-.5 2.8-1.3Z");
}

.github {
  clip-path: path("M12 2C6.5 2 2 6.6 2 12.3c0 4.5 2.9 8.4 6.8 9.7.5.1.7-.2.7-.5v-1.9c-2.8.6-3.4-1.2-3.4-1.2-.5-1.2-1.1-1.5-1.1-1.5-.9-.6.1-.6.1-.6 1 0 1.6 1.1 1.6 1.1.9 1.6 2.4 1.1 3 .9.1-.7.4-1.1.7-1.4-2.2-.3-4.5-1.1-4.5-5 0-1.1.4-2 1-2.8-.1-.3-.4-1.3.1-2.7 0 0 .8-.3 2.8 1.1.8-.2 1.7-.3 2.5-.3.9 0 1.7.1 2.5.3 1.9-1.4 2.8-1.1 2.8-1.1.6 1.4.2 2.4.1 2.7.7.8 1 1.7 1 2.8 0 3.9-2.3 4.7-4.5 5 .4.3.7 1 .7 2v2.9c0 .3.2.6.7.5 4-1.3 6.8-5.2 6.8-9.7C22 6.6 17.5 2 12 2Z");
}

.windows {
  clip-path: path("M3 4.4 10.2 3v8.2H3V4.4Zm8.4-1.7L21 1.3v9.9h-9.6V2.7ZM3 12.8h7.2V21L3 19.7v-6.9Zm8.4 0H21v9.9l-9.6-1.4v-8.5Z");
}

.keygroup {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.keycap {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  border: 1.5px solid currentColor;
  border-radius: 6px;
  background: var(--key-surface);
  padding: 2px 6px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}

.command-symbol {
  display: inline-flex;
  min-height: 24px;
  min-width: 24px;
  align-items: center;
  justify-content: center;
  border: 1.5px solid currentColor;
  border-radius: 6px;
  background: var(--key-surface);
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1;
}

.waitlist-cta {
  flex: 1 1 460px;
}

.waitlist-field {
  position: relative;
  display: flex;
  min-height: 52px;
  min-width: min(100%, 320px);
  flex: 1 1 320px;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--field-surface);
  padding: 0 14px;
  box-shadow: 5px 5px 0 var(--ink);
}

.waitlist-field input {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
}

.waitlist-field input::placeholder {
  color: var(--placeholder);
}

.fill-bar {
  position: absolute;
  inset: auto auto 0 0;
  width: 42%;
  height: 100%;
  background: rgba(70, 217, 255, 0.48);
  transform-origin: left center;
  animation: fillPulse 1.6s ease-in-out infinite;
}

.form-state,
.contact-panel p {
  flex: 1 1 100%;
  margin: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.82rem;
  font-weight: 600;
}

.contact-panel {
  display: flex;
  max-width: 620px;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.social-button {
  display: inline-flex;
  min-width: 142px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--surface);
  padding: 0 14px;
  font-weight: 800;
  box-shadow: 5px 5px 0 var(--ink);
}

.social-glyph {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.96rem;
  font-weight: 800;
}

.howto-image-section {
  width: min(1040px, calc(100% - 40px));
  margin: 34px auto 0;
}

.howto-image-section img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.readme-section {
  padding: 34px 0 70px;
}

.readme-shell {
  width: min(1040px, calc(100% - 40px));
  margin: 0 auto;
}

.section-label {
  margin-bottom: 14px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
}

.readme-card {
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 6px 6px 0 var(--ink);
  padding: clamp(18px, 4vw, 34px);
}

.readme-card h2,
.readme-card h3,
.readme-card h4,
.readme-card h5 {
  margin: 1.4em 0 0.5em;
  line-height: 1.12;
}

.readme-card h2:first-child,
.readme-card h3:first-child {
  margin-top: 0;
}

.readme-card p,
.readme-card li {
  line-height: 1.62;
}

.readme-card img {
  max-width: 100%;
  border-radius: 8px;
}

.readme-card code {
  border-radius: 5px;
  background: var(--inline-code);
  padding: 0.12em 0.34em;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.9em;
}

.readme-card pre {
  overflow: auto;
  border-radius: 8px;
  background: var(--pre-bg);
  color: var(--pre-fg);
  padding: 16px;
}

.thanks-page {
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: 24px;
}

.thanks-card {
  width: min(520px, 100%);
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--surface-strong);
  box-shadow: 6px 6px 0 var(--ink);
  padding: 28px;
}

.thanks-card h1 {
  margin-top: 18px;
  font-size: 2.6rem;
}

@keyframes fillPulse {
  0%,
  100% {
    transform: scaleX(0.55);
  }
  48% {
    transform: scaleX(1.8);
  }
}

@media (max-width: 760px) {
  .hero::before {
    background: var(--hero-overlay-mobile);
  }

  .hero-bg-logo {
    top: auto;
    right: 50%;
    bottom: 4rem;
    width: min(82vw, 360px);
    transform: translateX(50%);
  }

  .hero-inner {
    min-height: 82svh;
    width: min(100% - 28px, 1180px);
    padding-top: 18px;
  }

  .topline {
    align-items: flex-start;
  }

  .top-actions {
    font-size: 0.85rem;
  }

  .hero-copy {
    padding-top: 40px;
  }

  h1 {
    font-size: clamp(2.45rem, 12vw, 3.8rem);
  }

  .idea-line {
    max-width: 100%;
    font-size: clamp(2.25rem, 11vw, 3.45rem);
    line-height: 0.96;
  }

  .body-copy {
    font-size: 1rem;
  }

  .button,
  .social-button,
  .waitlist-field {
    width: 100%;
  }
}