html,
body {
  margin: 0;
  background: #09090b;
}

/* Hidden as soon as the document says JavaScript is running: the app renders
   its own /create in place of this one, and two designs in a row reads as a
   broken page. No-JS readers and crawlers never set the attribute. */
html[data-discovery-fallback="hidden"] .pickford-discovery {
  display: none;
}

.pickford-discovery {
  min-height: 100dvh;
  background: #09090b;
  color: #fafafa;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}
.pickford-discovery * {
  box-sizing: border-box;
}
.pickford-discovery header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid #27272a;
  padding: 20px 32px;
}
.pickford-discovery a {
  color: #fafafa;
  text-underline-offset: 4px;
}
.pickford-discovery nav,
.pickford-discovery footer {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.pickford-discovery .discovery-brand {
  text-decoration: none;
}
.pickford-discovery .discovery-brand img {
  display: block;
  height: 32px;
  width: auto;
}
.pickford-discovery main {
  width: min(1088px, 100%);
  padding: 64px 32px 48px;
  margin: 0 auto;
}
.pickford-discovery h1 {
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.04em;
  margin: 0 0 24px;
  text-wrap: balance;
}
.pickford-discovery h2 {
  font-size: 26px;
  letter-spacing: -0.025em;
  line-height: 1.25;
  margin: 0 0 12px;
}
.pickford-discovery p {
  color: #a1a1aa;
  margin: 0 0 20px;
}
.pickford-discovery .discovery-hero-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.pickford-discovery .discovery-hero-copy {
  min-width: 0;
}
.pickford-discovery .discovery-intro {
  font-size: 18px;
  margin-bottom: 28px;
}
.pickford-discovery .discovery-hero {
  width: 100%;
  aspect-ratio: 264 / 149;
  object-fit: cover;
  border-radius: 8px;
}
.pickford-discovery .discovery-button {
  display: inline-block;
  background: #fafafa;
  color: #09090b;
  border-radius: 6px;
  padding: 11px 20px;
  font-weight: 600;
  text-decoration: none;
}
.pickford-discovery .discovery-setup {
  max-width: 760px;
  margin: 64px auto 0;
  scroll-margin-top: 32px;
}
.pickford-discovery .discovery-step {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 24px;
  padding: 32px 0;
  border-top: 1px solid #27272a;
}
.pickford-discovery .discovery-step-number {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid #3f3f46;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 600;
}
.pickford-discovery .discovery-step-content {
  min-width: 0;
}
.pickford-discovery .discovery-step-content > :last-child {
  margin-bottom: 0;
}
.pickford-discovery .discovery-install {
  padding: 16px 0;
  border-top: 1px solid #27272a;
}
.pickford-discovery summary {
  cursor: pointer;
  font-weight: 600;
}
.pickford-discovery .discovery-install ol {
  margin: 20px 0 0;
  padding-left: 20px;
}
.pickford-discovery li {
  margin: 0 0 20px;
}
.pickford-discovery li:last-child {
  margin-bottom: 0;
}
.pickford-discovery li p {
  margin: 6px 0 12px;
}
.pickford-discovery pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border: 1px solid #3f3f46;
  border-radius: 6px;
  padding: 16px;
  font-size: 13px;
}
.pickford-discovery .discovery-starter-prompt {
  font-size: 15px;
  margin: 0;
}
.pickford-discovery .discovery-starter-prompt code {
  font-family: inherit;
}
.pickford-discovery .discovery-note {
  font-size: 13px;
  margin-top: 16px;
}
.pickford-discovery .discovery-note a,
.pickford-discovery footer a {
  color: #a1a1aa;
}
.pickford-discovery .discovery-access {
  max-width: 760px;
  margin: 8px auto 0;
  padding: 24px 0 0;
  border-top: 1px solid #27272a;
  font-size: 14px;
  scroll-margin-top: 32px;
}
.pickford-discovery footer {
  max-width: 760px;
  margin: 40px auto 0;
  font-size: 12px;
}
@media (max-width: 700px) {
  .pickford-discovery header {
    padding: 16px;
    gap: 12px;
  }
  .pickford-discovery nav {
    gap: 12px;
    font-size: 13px;
  }
  .pickford-discovery main {
    padding: 40px 20px;
  }
  .pickford-discovery .discovery-hero-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .pickford-discovery .discovery-hero {
    aspect-ratio: 2;
  }
  .pickford-discovery .discovery-setup {
    margin-top: 40px;
  }
  .pickford-discovery .discovery-step {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 16px;
    padding: 28px 0;
  }
  .pickford-discovery .discovery-step-number {
    width: 28px;
    height: 28px;
  }
}
@media (max-width: 639px) {
  .pickford-discovery .discovery-hero {
    display: none;
  }
}