* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  background: #fff;
  color: #111;
  min-height: 100dvh;
  overflow-x: hidden;
}

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

/* ── Dev banner ── */
.dev-banner {
  position: fixed;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.35rem;
  z-index: 100;
  pointer-events: none;
}

.dev-banner span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #dc2626;
  border: 1.5px solid #dc2626;
  border-radius: 0.25rem;
  padding: 0.1rem 0.3rem;
  line-height: 1;
}

/* ── Above the fold ── */
.above-fold {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ── Nav ── */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  flex-shrink: 0;
  line-height: 1.6;
}

.nav-left {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  /* Shrink below content rather than pushing the bar wider: the action
     buttons must win the space. Deliberately NOT overflow:hidden — that would
     clip the "uses" menu, which hangs below the bar. */
  min-width: 0;
}

/* Overflow-driven collapse, applied by nav-collapse.js after it measures the
   bar: blog goes first, then docs, then the wordmark. The media queries near
   the end of this file make roughly the same cuts without JS. */
nav[data-hide-blog] .nav-link-blog,
nav[data-hide-docs] .nav-link-docs,
nav[data-hide-wordmark] .nav-logo-text {
  display: none;
}

.nav-logo {
  display: flex;
  align-self: center;
}

.nav-logo img {
  width: 1.5rem;
  height: 1.5rem;
}

.nav-logo-text {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text, #111);
  text-decoration: none;
}

.nav-link {
  font-size: 0.85rem;
  color: #6b7280;
  text-decoration: none;
}

.nav-link:hover {
  color: #111;
}

/* ── Nav dropdown ("uses") ── */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: baseline;
}

.nav-dropdown-trigger {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.nav-link.nav-dropdown-trigger {
  font-size: 0.85rem;
  color: #6b7280;
}

.nav-link.nav-dropdown-trigger:hover {
  color: #111;
}

.nav-dropdown-caret {
  width: 0.85em;
  height: 0.85em;
  transition: transform 0.18s ease;
}

.nav-dropdown:hover .nav-dropdown-caret,
.nav-dropdown:focus-within .nav-dropdown-caret,
.nav-dropdown.open .nav-dropdown-caret {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  min-width: 18rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.18), 0 4px 8px -4px rgba(0, 0, 0, 0.08);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  z-index: 50;
}

/* Invisible hover bridge to prevent flicker between trigger and menu. */
.nav-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0.75rem;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.375rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}

.nav-dropdown-item:hover,
.nav-dropdown-item:focus-visible {
  background: #f3f4f6;
  outline: none;
}

.nav-dropdown-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #111;
}

.nav-dropdown-desc {
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.5;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: #6b7280;
}

.nav-right a:hover {
  color: #111;
}

.nav-login {
  padding: 0.4rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  transition: all 0.15s;
  color: #6b7280;
  text-decoration: none;
}

.nav-login:hover {
  border-color: #111;
  color: #111;
}

.nav-login-short {
  display: none;
}

/* "Get a Demo": the primary logged-out call to action for teams that want a
   conversation before they try it themselves. Filled, so it reads as the
   emphasized sibling of the outlined Login button. */
.nav-demo {
  padding: 0.4rem 1rem;
  border: 1px solid #111;
  border-radius: 0.375rem;
  background: #111;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s;
}

.nav-demo:hover {
  background: #374151;
  border-color: #374151;
  color: #fff;
}

.nav-right a.nav-demo:hover {
  color: #fff;
}

.nav-demo-short {
  display: none;
}

/* ── Hero ── */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 2rem;
}

.hero-title {
  font-size: clamp(2.7rem, 7.2vw, 6.3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0;
  text-align: center;
}

.hero-tagline {
  font-size: 0.8rem;
  font-weight: 400;
  opacity: 0.6;
  text-align: center;
  margin: 0.5rem 0 0;
}

/* Home-page hed/dek above the builder island. */
.home-hed {
  text-align: center;
  padding: 0 1rem;
}

.hero-hed {
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

.hero-dek {
  font-size: clamp(0.85rem, 1.4vw, 1rem);
  font-weight: 400;
  opacity: 0.65;
  margin: 0.6rem 0 0;
}

/* Lead-in head shared by the scroll "pages" on the home page. */
.home-page-head {
  text-align: center;
  padding: 0 1rem;
  margin-bottom: 1.5rem;
}
.home-page-hed {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.home-page-dek {
  font-size: clamp(0.85rem, 1.4vw, 1rem);
  opacity: 0.75;
  margin: 0.6rem 0 0;
}
.home-page-dek code {
  font-weight: 600;
  opacity: 1;
}

/* Pages 2 and 3: full-viewport panes, content centered. */
.home-page-2,
.home-page-3 {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 2rem;
  box-sizing: border-box;
}

/* The builder grows downward as the user types/selects; anchor it with a
   fixed gap above instead of re-centering (which would make it jump). */
.home-page-3 {
  justify-content: flex-start;
  padding-top: 22vh;
}

.hero-spacer {
  flex: 1;
}

.hero-headline {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.hero-headline > .hero-spacer {
  flex: 1;
  min-height: 0;
}

.hero-headline > .hero-spacer:first-child {
  flex: 0.5;
}

.hero-spacer:first-child {
  flex: 0.5;
}

/* Home page 1: the hed/dek pane fills the viewport minus the nav, so the
   next page peeks in only after a scroll. */
.home-page-1 .hero-headline {
  min-height: calc(100dvh - 8rem);
}

.hero-columns {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  column-gap: 3rem;
  align-items: stretch;
}

.hero-divider {
  background: #d1d5db;
  align-self: stretch;
}

.hero-left {
  min-width: 0;
  text-align: right;
}

.hero-left h2,
.hero-right h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.hero-sub {
  font-size: 0.85rem;
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* ── Prompt box ── */
.prompt-box {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.prompt-label {
  font-size: 0.8rem;
  color: #6b7280;
}

.prompt-input {
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.75rem;
  border: 1.5px solid #d1d5db;
  border-radius: 0.5rem;
  resize: none;
  background: #fafafa;
  transition: border-color 0.15s;
  line-height: 1.5;
  width: 100%;
  max-width: 100%;
  text-align: left;
  height: clamp(10.5rem, 22vh, 15rem);
}

.prompt-input:focus {
  outline: none;
  border-color: #111;
  background: #fff;
}

.prompt-input::placeholder {
  color: #6b7280;
}

.prompt-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.ideas-btn {
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  background: transparent;
  color: #6b7280;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.15s;
}

.ideas-btn:hover {
  border-color: #111;
  color: #111;
}

.prompt-submit {
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.5rem 1.25rem;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background 0.15s;
}

.prompt-submit:hover {
  background: #333;
}

/* ── SSH command (right side) ── */
.hero-right {
  display: flex;
  flex-direction: column;
  min-width: 0;
}


.ssh-sub {
  font-size: 0.85rem;
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* ── Features ── */
.features {
  border-top: 1px solid #e5e7eb;
  max-width: 1200px;
  margin: 0 auto;
  padding: 5rem 2rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
}

.features-single {
  grid-template-columns: 1fr;
  max-width: 720px;
}

.feature-inner {
  padding-top: 1.5rem;
  border-top: 2px solid #111;
}

.feature h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.feature p {
  font-size: 0.8rem;
  color: #4b5563;
  line-height: 1.7;
}

.feature p + p {
  margin-top: 0.9rem;
}

.feature a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.feature code {
  font-size: 0.8rem;
  background: #f3f4f6;
  padding: 0.1em 0.35em;
  border-radius: 0.25rem;
}

.feature a:hover {
  color: #111;
}

/* ── News ── */
.news {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 2rem 4rem;
  text-align: center;
  color: #6b7280;
  font-size: 0.95rem;
  line-height: 1.6;
}

.news a {
  color: #111;
  text-decoration: underline;
}

@media (max-width: 600px) {
  .news {
    padding: 0 1rem 3rem;
  }
}

/* ── Endorsements ── */
.endorsements {
  border-top: 1px solid #e5e7eb;
  max-width: 720px;
  margin: 0 auto;
  padding: 5rem 2rem;
}

.endorsements h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 3rem;
  text-align: center;
}

.endorsement-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.endorsement {
  padding: 1.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
}

/* ── Endorsement carousel ── */
.endorsement-carousel {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
}

.carousel-viewport {
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 0.4s ease;
  will-change: transform;
}

.carousel-slide {
  flex: 0 0 100%;
  box-sizing: border-box;
  min-height: 100%;
}

.carousel-btn {
  background: transparent;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.25rem;
  line-height: 1;
  color: #4b5563;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.carousel-btn:hover {
  background: #f3f4f6;
  color: #111;
  border-color: #d1d5db;
}

.carousel-btn:focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
}

.carousel-dots {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.carousel-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: #d1d5db;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.carousel-dot[aria-selected="true"] {
  background: #111;
  transform: scale(1.2);
}

.endorsement blockquote {
  font-size: 0.8rem;
  color: #374151;
  line-height: 1.7;
  font-style: normal;
}

.endorsement cite {
  display: block;
  margin-top: 1rem;
  font-size: 0.75rem;
  color: #6b7280;
  font-style: normal;
}

.source-link {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.25rem;
  color: #9ca3af;
  transition: color 0.2s;
}

.source-link:hover {
  color: #4b5563;
}

.source-link svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* ── Footer ── */
footer {
  border-top: 1px solid #e5e7eb;
  font-size: 0.8rem;
  color: #9ca3af;
  padding: 2rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

footer a:hover {
  text-decoration: underline;
}

/* ── Animations ── */
/* ── Malleable letter wave ── */
.malleable {
  display: inline-block;
  white-space: nowrap;
  animation: ml-stretch 0.9s ease-out both;
}

/* Slow stretch, fast snap, slight overshoot */
@keyframes ml-stretch {
  0%   { letter-spacing: 0; }
  40%  { letter-spacing: 0.35em; }
  52%  { letter-spacing: -0.02em; }
  68%  { letter-spacing: 0.005em; }
  100% { letter-spacing: 0; }
}

/* Per-letter wave: M moves most, e barely moves.
   Stagger creates the traveling-wave effect on both
   stretch and snap-back. */
.ml {
  display: inline-block;
  animation: ml-wave 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94)
             calc(var(--i) * 0.06s) both;
}

@keyframes ml-wave {
  0%   { transform: translateX(0); }
  40%  { transform: translateX(calc((8 - var(--i)) * -0.15rem)); }
  52%  { transform: translateX(calc((8 - var(--i)) * 0.025rem)); }
  100% { transform: translateX(0); }
}

/* Bouncing final e — fires when the snap-back wave arrives.
   Delay = last letter stagger (8×0.06=0.48s) + wave snap point
   (0.7×0.46=0.32s) ≈ 0.8s */
.ml-drop {
  display: inline-block;
  animation: ml-bounce 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.8s both;
}

@keyframes ml-bounce {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(-0.3em); }
  50%  { transform: translateY(0); }
  68%  { transform: translateY(-0.1em); }
  82%  { transform: translateY(0); }
  92%  { transform: translateY(-0.03em); }
  100% { transform: translateY(0); }
}

/* ── Responsive: tablet ── */
@media (max-width: 900px) {
  .hero-title {
    font-size: clamp(2.25rem, 8vw, 7rem);
  }

  .hero-columns {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 3rem;
  }

  .hero-divider {
    display: none;
  }

  .hero-left {
    text-align: left;
  }

  .prompt-actions {
    justify-content: flex-start;
  }

  .hero-right {
    padding-top: 0;
  }

  .features {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .endorsement-grid {
    grid-template-columns: 1fr;
  }

  .endorsement-carousel {
    gap: 0.5rem;
  }

  .carousel-btn {
    width: 2rem;
    height: 2rem;
    font-size: 1.1rem;
  }
}

/* ── Responsive: mobile ── */
@media (max-width: 640px) {
  nav {
    padding: 0.75rem 1rem;
  }

  .nav-left {
    gap: 0.5rem;
  }

  .nav-logo-text {
    font-size: 0.8rem;
    margin-right: 0.5rem;
  }

  .nav-link {
    font-size: 0.75rem;
  }

  .nav-login {
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
  }

  .nav-demo {
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
  }

  .nav-right {
    gap: 0.4rem;
  }

  .nav-login-full {
    display: none;
  }

  .nav-login-short {
    display: inline;
  }

  .nav-demo-full {
    display: none;
  }

  .nav-demo-short {
    display: inline;
  }

  /* Two action buttons plus five nav links do not fit a phone; the links
     collapse instead of wrapping. nav-collapse.js refines this by measuring;
     these breakpoints cover the no-JS case and first paint. */
  .nav-link-blog {
    display: none;
  }

  /* The 18rem menu is wider than a small phone once the trigger's own left
     offset is added, so anchor it to the nav (which spans the viewport)
     rather than the trigger, and let it use the nav's gutters. Without this
     it stretches the page wider than the viewport even while hidden. */
  nav {
    position: relative;
  }

  .nav-dropdown {
    position: static;
  }

  .nav-dropdown-menu {
    left: 1rem;
    right: 1rem;
    min-width: 0;
  }

  .nav-dropdown::after {
    display: none;
  }

  .above-fold {
    padding-bottom: 5rem;
  }

  .hero {
    padding: 2rem 1rem 3rem;
  }

  .hero-title {
    font-size: clamp(1.75rem, 11vw, 2.75rem);
  }

  .hero-spacer {
    flex: 0;
    min-height: 2.5rem;
  }

  .hero-spacer:first-child {
    min-height: 0;
  }

  .hero-spacer:last-child {
    min-height: 5rem;
  }

  .hero-left h2,
  .hero-right h2 {
    font-size: 1.25rem;
  }

  .hero-columns {
    gap: 3rem;
  }

  .features {
    padding: 3rem 1rem;
  }

  .endorsements {
    padding: 3rem 1rem;
  }

  .endorsements h2 {
    font-size: 1.25rem;
    margin-bottom: 2rem;
  }

  footer {
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
  }

  .ideas-panel {
    width: 100%;
    max-width: 100%;
  }

  .ideas-grid {
    grid-template-columns: 1fr;
    gap: 0.375rem;
  }
}

/* ── Ideas Drawer ── */
.ideas-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
}

.ideas-drawer.open {
  display: flex;
  justify-content: flex-end;
}

.ideas-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  animation: ideasFadeIn 0.2s ease;
}

@keyframes ideasFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ideas-panel {
  position: relative;
  background: #fff;
  width: 480px;
  max-width: calc(100% - 20px);
  height: 100%;
  overflow-y: auto;
  padding: 1.5rem;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.08);
  animation: ideasSlideIn 0.25s ease;
}

@keyframes ideasSlideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.ideas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.ideas-header h2 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.ideas-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: #999;
  padding: 0.25rem 0.5rem;
  line-height: 1;
}

.ideas-close:hover {
  color: #333;
}

.ideas-section {
  margin-bottom: 1.25rem;
}

.ideas-section:last-child {
  margin-bottom: 0;
}

.ideas-section-title {
  font-size: 0.7rem;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 0.5rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid #eee;
}

.ideas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.625rem;
}

.ideas-card {
  background: #fafafa;
  border: 1px solid #e5e5e5;
  border-radius: 0.625rem;
  padding: 0.875rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ideas-card:hover {
  border-color: #bbb;
  background: #f0f0f0;
}

.ideas-card-icon {
  font-size: 1.375rem;
  line-height: 1;
}

.ideas-card-icon img {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 0.25rem;
}

.ideas-card-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: #111;
  line-height: 1.3;
}

.ideas-card-desc {
  font-size: 0.7rem;
  color: #666;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ideas-empty {
  text-align: center;
  padding: 1.5rem 1rem;
  color: #999;
  font-size: 0.8rem;
}

/* Narrowest phones, without JS: docs goes too, then the wordmark yields to
   the logo image. nav-collapse.js applies the same steps by measurement. */
@media (max-width: 420px) {
  .nav-link-docs {
    display: none;
  }
}

@media (max-width: 380px) {
  .nav-logo-text {
    display: none;
  }
}

/* ── Dark mode ── */
@media (prefers-color-scheme: dark) {
  body {
    background: #111;
    color: #f3f4f6;
  }

  .nav-logo-text {
    color: #f3f4f6;
  }

  .nav-link {
    color: #9ca3af;
  }

  .nav-link:hover {
    color: #f3f4f6;
  }

  .nav-link.nav-dropdown-trigger {
    color: #9ca3af;
  }

  .nav-link.nav-dropdown-trigger:hover {
    color: #f3f4f6;
  }

  .nav-dropdown-menu {
    background: #1a1a1a;
    border-color: #2a2a2a;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.6), 0 4px 8px -4px rgba(0, 0, 0, 0.4);
  }

  .nav-dropdown-item:hover,
  .nav-dropdown-item:focus-visible {
    background: #2a2a2a;
  }

  .nav-dropdown-title {
    color: #f3f4f6;
  }

  .nav-dropdown-desc {
    color: #9ca3af;
  }

  .nav-right {
    color: #9ca3af;
  }

  .nav-right a:hover {
    color: #f3f4f6;
  }

  .nav-login {
    color: #9ca3af;
    border-color: #4b5563;
  }

  .nav-login:hover {
    border-color: #f3f4f6;
    color: #f3f4f6;
  }

  .nav-demo {
    background: #f3f4f6;
    border-color: #f3f4f6;
    color: #111;
  }

  .nav-demo:hover,
  .nav-right a.nav-demo:hover {
    background: #fff;
    border-color: #fff;
    color: #111;
  }

  .hero-sub,
  .ssh-sub {
    color: #9ca3af;
  }

  .news a {
    color: #f3f4f6;
  }

  .prompt-input {
    background: #1a1a1a;
    border-color: #374151;
    color: #f3f4f6;
  }

  .prompt-input:focus {
    border-color: #f3f4f6;
    background: #1a1a1a;
  }

  .prompt-input::placeholder {
    color: #9ca3af;
  }

  .prompt-label {
    color: #9ca3af;
  }

  .prompt-submit {
    background: #f3f4f6;
    color: #111;
  }

  .prompt-submit:hover {
    background: #d1d5db;
  }

  .hero-divider {
    background: #374151;
  }

  .hero-right {
    border-top-color: #2a2a2a;
  }

  .features {
    border-top-color: #2a2a2a;
  }

  .feature-inner {
    border-top-color: #f3f4f6;
  }

  .feature p {
    color: #9ca3af;
  }

  .feature a {
    color: #d1d5db;
  }

  .feature a:hover {
    color: #f3f4f6;
  }

  .feature code {
    background: #2a2a2a;
  }

  .endorsements {
    border-top-color: #2a2a2a;
  }

  .endorsement {
    border-color: #2a2a2a;
  }

  .carousel-btn {
    border-color: #2a2a2a;
    color: #9ca3af;
  }

  .carousel-btn:hover {
    background: #2a2a2a;
    color: #f3f4f6;
    border-color: #3f3f46;
  }

  .carousel-dot {
    background: #3f3f46;
  }

  .carousel-dot[aria-selected="true"] {
    background: #f3f4f6;
  }

  .endorsement blockquote {
    color: #d1d5db;
  }

  .endorsement cite {
    color: #9ca3af;
  }

  .source-link {
    color: #6b7280;
  }

  .source-link:hover {
    color: #9ca3af;
  }

  footer {
    border-top-color: #2a2a2a;
    color: #6b7280;
  }

  .ideas-btn {
    color: #9ca3af;
    border-color: #4b5563;
  }

  .ideas-btn:hover {
    border-color: #f3f4f6;
    color: #f3f4f6;
  }

  .ideas-backdrop {
    background: rgba(0, 0, 0, 0.4);
  }

  .ideas-panel {
    background: #1a1a1a;
  }

  .ideas-close {
    color: #666;
  }

  .ideas-close:hover {
    color: #ccc;
  }

  .ideas-section-title {
    color: #666;
    border-bottom-color: #333;
  }

  .ideas-card {
    background: #1a1a1a;
    border-color: #2a2a2a;
  }

  .ideas-card:hover {
    border-color: #444;
    background: #222;
  }

  .ideas-card-title {
    color: #f0f0f0;
  }

  .ideas-card-desc {
    color: #888;
  }

  .ideas-empty {
    color: #666;
  }
}