/* Green V2 visual system shared by the download archive and latest-version surfaces. */
.download-surface-preview {
  --download-paper: #f5f1e7;
  --download-panel: #fffefa;
  --download-sage: #dfe6da;
  --download-sage-soft: #edf1e9;
  --download-ink: #1f2d23;
  --download-muted: #5e695f;
  --download-line: #aeb7aa;
  --download-green: #315f3b;
  --download-green-dark: #264e31;
  --download-action: #33824f;
  --download-action-hover: #286a40;
  --download-green-alt: #527d5c;
  --download-amber: #9a7424;
  --download-amber-soft: #f4ecd8;
  --download-shadow: #c7cec3;
  width: calc(100% + 1.5rem);
  margin-right: -0.75rem;
  margin-left: -0.75rem;
  overflow: hidden;
  background: var(--download-paper);
  color: var(--download-ink);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.download-surface-preview > .max-w-4xl {
  width: min(1120px, calc(100% - 2.5rem));
  max-width: none !important;
  padding: 2rem 0 5rem !important;
}

.download-surface-preview nav[aria-label="Breadcrumb"] {
  margin-bottom: 1.4rem !important;
  padding: 0.15rem 0 0.75rem;
  border-bottom: 1px solid var(--download-line);
  color: var(--download-muted) !important;
  font-size: 0.72rem !important;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent !important;
}
.download-surface-preview nav[aria-label="Breadcrumb"] a { color: var(--download-green) !important; }
.download-surface-preview nav[aria-label="Breadcrumb"] span { color: var(--download-muted) !important; }

.download-surface-preview h1 {
  max-width: 19ch;
  margin: 0 auto 1.25rem !important;
  color: var(--download-ink) !important;
  font-size: clamp(2.45rem, 6vw, 4.5rem) !important;
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-align: center !important;
}
.download-surface-preview h1 > span {
  background: none !important;
  color: var(--download-ink) !important;
  -webkit-text-fill-color: var(--download-ink) !important;
}
.download-surface-preview > .max-w-4xl > h1 + p {
  max-width: 48rem !important;
  margin-right: auto !important;
  margin-left: auto !important;
  color: var(--download-muted) !important;
  text-align: center !important;
}
.download-surface-preview h2 {
  color: var(--download-ink) !important;
  letter-spacing: -0.025em;
}
.download-surface-preview h3,
.download-surface-preview h4 { color: var(--download-ink) !important; }

.download-surface-preview .text-white,
.download-surface-preview .text-gray-100,
.download-surface-preview .text-gray-200 { color: var(--download-ink) !important; }
.download-surface-preview .text-gray-300,
.download-surface-preview .text-gray-400,
.download-surface-preview .text-gray-500,
.download-surface-preview .text-gray-600 { color: var(--download-muted) !important; }
.download-surface-preview .text-yellow-400,
.download-surface-preview .text-purple-300,
.download-surface-preview .text-purple-400,
.download-surface-preview .text-blue-300,
.download-surface-preview .text-blue-400,
.download-surface-preview .text-cyan-400 { color: var(--download-green) !important; }

.download-surface-preview a { color: var(--download-green); }
.download-surface-preview a:focus-visible {
  outline: 3px solid #c59a3a;
  outline-offset: 3px;
}

.download-surface-preview [class*="bg-slate-"],
.download-surface-preview [class*="bg-gray-8"],
.download-surface-preview [class*="bg-gray-9"],
.download-surface-preview [class*="bg-purple-9"],
.download-surface-preview [class*="from-purple-"]:not(a):not(span) {
  border-color: var(--download-line) !important;
  background: var(--download-panel) !important;
  box-shadow: none !important;
}
.download-surface-preview h1 > span { background: transparent !important; }
.download-surface-preview [class*="border-purple-"],
.download-surface-preview [class*="border-gray-"] { border-color: var(--download-line) !important; }
.download-surface-preview [class*="divide-gray-"] > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--download-line) !important;
}

.download-surface-preview a.w-full.block[class*="bg-gradient-to"] {
  min-height: 3.65rem;
  border: 1px solid var(--download-action) !important;
  border-radius: 0 !important;
  background: var(--download-action) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #fff !important;
  transform: none !important;
}
.download-surface-preview a.w-full.block[class*="bg-gradient-to"] span,
.download-surface-preview a.w-full.block[class*="bg-gradient-to"] svg { color: #fff !important; }
.download-surface-preview a.w-full.block[class*="bg-gradient-to"]:hover {
  background: var(--download-action-hover) !important;
}
.download-surface-preview a.w-full.block[class*="bg-gradient-to"]:nth-of-type(even) {
  border-color: var(--download-green-alt) !important;
  background: var(--download-green-alt) !important;
}

.download-surface-preview table { color: var(--download-ink); }
.download-surface-preview thead {
  border-color: var(--download-line) !important;
  background: var(--download-sage) !important;
}
.download-surface-preview tbody tr { border-color: var(--download-line) !important; }
.download-surface-preview tbody tr:hover { background: var(--download-sage-soft) !important; }
.download-surface-preview table a { color: var(--download-green) !important; }

.download-surface-preview--archive .version-latest-badge {
  display: inline-flex;
  min-height: 1.5rem;
  padding: 0.2rem 0.55rem !important;
  align-items: center;
  border: 1px solid var(--download-green-dark);
  border-radius: 0.2rem !important;
  background: var(--download-green) !important;
  color: #fff !important;
  font-size: 0.7rem !important;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.download-surface-preview--archive #download-archive-primary-ad {
  margin-bottom: 3.5rem;
}

.download-surface-preview--archive .grid > [class*="bg-slate-"],
.download-surface-preview--archive .group[class*="bg-slate-"],
.download-surface-preview--latest > .max-w-4xl > [class*="bg-gray-"],
.download-surface-preview--latest .max-w-3xl > [class*="bg-gray-"] {
  border: 1px solid var(--download-line) !important;
  border-radius: 0 !important;
  background: var(--download-panel) !important;
}

.download-surface-preview--latest > .max-w-4xl > .max-w-3xl.my-8 > div {
  border: 1px solid #7f8f81 !important;
  border-radius: 0 !important;
  background: var(--download-panel) !important;
  box-shadow: 8px 8px 0 var(--download-shadow) !important;
}
.download-surface-preview--latest #latest-version-primary-card {
  margin-top: 2.25rem !important;
  margin-bottom: 2.75rem !important;
}

.download-surface-preview--latest #latest-version-primary-ad {
  margin-bottom: 3.5rem;
}
.download-surface-preview--latest .latest-version-language-note {
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--download-line);
  color: var(--download-muted);
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: center;
}
.download-surface-preview--latest .latest-version-language-note strong {
  color: var(--download-ink);
}
.download-surface-preview--latest .inline-block[class*="bg-green-"] {
  border-color: #9f7a28 !important;
  border-radius: 0 !important;
  background: var(--download-amber-soft) !important;
  color: #6b521e !important;
}
.download-surface-preview--latest .absolute[class*="bg-purple-"] { background: var(--download-line) !important; }
.download-surface-preview--latest [class*="bg-purple-600/30"],
.download-surface-preview--latest [class*="bg-pink-600/30"],
.download-surface-preview--latest [class*="bg-cyan-600/30"],
.download-surface-preview--latest [class*="bg-amber-600/30"] {
  border: 1px solid var(--download-line);
  border-radius: 0 !important;
  background: var(--download-sage-soft) !important;
  color: var(--download-green) !important;
}

@media (max-width: 720px) {
  .download-surface-preview > .max-w-4xl { width: min(100% - 1.5rem, 1120px); }

  .download-surface-preview--latest #latest-version-primary-ad {
    margin-bottom: 2.25rem;
  }

  .download-surface-preview--archive #download-archive-primary-ad {
    margin-bottom: 2.25rem;
  }
  .download-surface-preview h1 { font-size: clamp(2.15rem, 12vw, 3.4rem) !important; }
  .download-surface-preview--archive h1 { font-size: 2.35rem !important; }
}

@media (min-width: 1024px) {
  .download-surface-preview {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .download-surface-preview *,
  .download-surface-preview *::before,
  .download-surface-preview *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}