:root {
  --color-bg: #08070a;
  --color-surface: #121015;
  --color-surface-2: #1a161f;
  --color-surface-3: #221d28;
  --color-surface-4: #0e0c11;
  --color-text: #f4edf7;
  --color-muted: #b7acbe;
  --color-border: #2e2735;
  --color-border-strong: #f4edf7;
  --color-primary: #dc55dc;
  --color-primary-deep: #a625a6;
  --color-accent: #dc55dc;
  --color-success: #b8ff5c;
  --color-warning: #ffd15c;
  --color-error: #ff6b8e;
  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-sm: 0.875rem;
  --space-md: 1.25rem;
  --space-lg: 1.75rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --shell: 1180px;
  --docs-shell: 1260px;
  --header-height: 4.5rem;
  --shadow-sm: 4px 4px 0 #000;
  --shadow-md: 8px 8px 0 #000;
  --shadow-lg: 12px 12px 0 #000;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    linear-gradient(rgba(220, 85, 220, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220, 85, 220, 0.08) 1px, transparent 1px),
    radial-gradient(circle at top right, rgba(220, 85, 220, 0.14), transparent 28%),
    var(--color-bg);
  background-size: 32px 32px, 32px 32px, auto, auto;
  color: var(--color-text);
  font-family: "Archivo", sans-serif;
}

a {
  color: inherit;
}

button,
input {
  font: inherit;
}

code,
pre,
.inline-code,
th,
.eyebrow,
.card-label,
.panel-label,
.docs-mode,
.docs-brand,
.docs-path,
.nav-link,
.hero-signals li,
.stack-card span,
.docs-subsection h4 {
  font-family: "IBM Plex Mono", monospace;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.shell {
  width: min(calc(100% - 2rem), var(--shell));
  margin: 0 auto;
}

.skip-link {
  position: absolute;
  top: -4rem;
  left: 1rem;
  z-index: 120;
  padding: 0.7rem 0.9rem;
  border: 2px solid var(--color-border-strong);
  background: var(--color-primary);
  color: #fff;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}

.skip-link:focus {
  top: 1rem;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 2px solid var(--color-border-strong);
  background: rgba(8, 7, 10, 0.98);
}

.header-inner {
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
}

.brand-mark {
  width: 0.95rem;
  height: 0.95rem;
  background: var(--color-primary);
  border: 2px solid var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.nav-link {
  padding: 0.35rem 0.55rem;
  border: 2px solid transparent;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--color-text);
  border-color: var(--color-primary);
  background: rgba(220, 85, 220, 0.12);
}

main {
  overflow: hidden;
}

.hero-section,
.story-section,
.principles-section,
.support-section,
.docs-shell,
.community-section {
  position: relative;
}

[data-section-index]::before {
  content: attr(data-section-index);
  position: absolute;
  top: 1rem;
  left: 1rem;
  color: rgba(220, 85, 220, 0.22);
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(3rem, 11vw, 8rem);
  font-weight: 700;
  line-height: 0.9;
  pointer-events: none;
}

[data-section-index]::after {
  content: attr(data-section-name);
  position: absolute;
  top: 1.4rem;
  right: 1rem;
  color: var(--color-muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.hero-section,
.story-section,
.principles-section,
.support-section,
.community-section {
  padding: calc(var(--space-3xl) + 1rem) 0 var(--space-3xl);
}

.hero-grid,
.architecture-grid,
.principles-grid,
.start-grid,
.summary-grid,
.feature-grid,
.concept-grid,
.community-grid {
  display: grid;
  gap: var(--space-md);
}

.hero-grid > *,
.architecture-grid > *,
.principles-grid > *,
.start-grid > *,
.summary-grid > *,
.feature-grid > *,
.concept-grid > *,
.community-grid > *,
.community-links > * {
  min-width: 0;
}

.hero-grid {
  grid-template-columns: minmax(0, 0.95fr) minmax(20rem, 0.85fr);
  align-items: start;
}

.hero-copy {
  max-width: 32rem;
}

.eyebrow,
.card-label,
.panel-label {
  margin: 0 0 var(--space-xs);
  color: var(--color-primary);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1,
h2,
h3,
h4,
h5,
p {
  margin: 0;
}

h1,
h2,
h3 {
  text-transform: uppercase;
  line-height: 0.9;
}

h1 {
  max-width: 6.4ch;
  font-size: clamp(3rem, 6.2vw, 5.8rem);
  font-weight: 900;
  letter-spacing: -0.06em;
}

h2,
.docs-intro h2 {
  max-width: 11ch;
  font-size: clamp(2.35rem, 5vw, 4.6rem);
  font-weight: 900;
  letter-spacing: -0.05em;
}

.hero-panel h2 {
  max-width: 8ch;
  font-size: clamp(2rem, 3.2vw, 4rem);
}

h3 {
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.04em;
}

h4 {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

h5 {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.lead,
.section-copy,
.panel-copy,
.stack-card p,
.architecture-card p,
.principle-card p,
.docs-copy,
.start-card p,
.summary-card p,
.feature-card p,
.concept-card p,
.community-column a,
.docs-list li,
.event-list li,
table td,
.docs-search-status {
  line-height: 1.55;
}

.lead {
  max-width: 42rem;
  margin-top: var(--space-md);
  color: var(--color-text);
  font-size: clamp(1rem, 2vw, 1.22rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.85rem 1.1rem;
  border: 2px solid var(--color-border-strong);
  border-radius: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: var(--shadow-sm);
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    background-color 140ms ease;
}

.button:hover,
.button:focus-visible,
.docs-mode:hover,
.docs-mode:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #000;
}

.button-solid {
  background: var(--color-primary);
  color: #fff;
}

.button-outline {
  background: var(--color-surface);
  color: var(--color-text);
}

.hero-signals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
  padding: 0;
  list-style: none;
}

.hero-signals li {
  padding: 0.5rem 0.65rem;
  border: 2px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hero-panel,
.architecture-card,
.principle-card,
.docs-block,
.start-card,
.summary-card,
.feature-card,
.concept-card,
.community-links {
  border: 2px solid var(--color-border-strong);
  border-radius: 0;
}

.hero-panel {
  padding: var(--space-md);
  background:
    linear-gradient(180deg, rgba(220, 85, 220, 0.14), transparent 24%),
    var(--color-surface-2);
  box-shadow: var(--shadow-lg);
  min-width: 0;
}

.panel-copy {
  margin-top: var(--space-md);
  color: var(--color-text);
}

.panel-stack {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.stack-card {
  padding: 0.95rem;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
}

.stack-card span {
  display: inline-block;
  margin-bottom: 0.45rem;
  color: var(--color-success);
  font-size: 0.76rem;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.section-heading {
  max-width: 48rem;
}

.section-copy {
  margin-top: var(--space-md);
  color: var(--color-muted);
}

.story-section {
  background: var(--color-surface-4);
  border-top: 2px solid var(--color-border-strong);
  border-bottom: 2px solid var(--color-border-strong);
}

.architecture-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--space-xl);
}

.architecture-card,
.principle-card,
.start-card,
.summary-card,
.feature-card,
.concept-card {
  padding: var(--space-md);
  box-shadow: var(--shadow-md);
}

.architecture-card-light,
.architecture-card-dark,
.architecture-card-soft,
.start-card,
.summary-card,
.feature-card,
.concept-card {
  background: var(--color-surface-2);
}

.principles-section {
  background: linear-gradient(180deg, #0c0a0f 0%, #141117 100%);
}

.principles-lead {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(18rem, 0.85fr);
  gap: var(--space-lg);
  align-items: end;
}

.principles-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--space-xl);
}

.principles-title {
  max-width: none;
}

.principles-title-line {
  display: block;
}

.principles-title-provider {
  min-height: 0.95em;
}

.provider-highlight,
.migration-provider {
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.provider-highlight.is-swapping,
.migration-provider.is-swapping {
  opacity: 0.2;
  transform: translateY(0.18em);
}

.provider-highlight {
  display: inline-block;
  color: var(--color-primary);
  font-size: clamp(1.85rem, 4.6vw, 3.8rem);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.92;
  white-space: nowrap;
}

.migration-panel {
  padding: var(--space-md);
  border: 2px solid var(--color-border-strong);
  background:
    linear-gradient(180deg, rgba(220, 85, 220, 0.1), transparent 24%),
    var(--color-surface-2);
  box-shadow: var(--shadow-md);
}

.migration-stage {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.migration-top {
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid rgba(220, 85, 220, 0.18);
}

.migration-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.migration-side {
  min-width: 0;
}

.migration-label {
  color: var(--color-muted);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.migration-provider {
  margin-top: var(--space-xs);
  color: var(--color-text);
  font-size: clamp(1.4rem, 2.6vw, 2.25rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  line-height: 0.95;
}

.migration-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.migration-benefits span {
  padding: 0.45rem 0.6rem;
  border: 2px solid var(--color-border);
  background: rgba(220, 85, 220, 0.08);
  color: var(--color-text);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.migration-benefits span.is-entering {
  animation: migration-chip-in 220ms ease both;
}

.migration-benefits span.is-leaving {
  animation: migration-chip-out 180ms ease both;
}

@keyframes migration-chip-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes migration-chip-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.principle-card {
  background: var(--color-surface-2);
}

.principle-card .card-label {
  color: var(--color-primary);
}

.principle-card p:last-child {
  color: var(--color-muted);
}

.setup-shell {
  position: relative;
  padding: var(--space-3xl) 0;
  border-top: 2px solid var(--color-border-strong);
  border-bottom: 2px solid var(--color-border-strong);
  background: linear-gradient(180deg, #0b090d 0%, #151018 100%);
}

.setup-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  align-items: start;
}

.setup-copy {
  min-width: 0;
}

.download-grid,
.guide-grid,
.setup-notes {
  display: grid;
  gap: var(--space-md);
}

.download-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.download-card,
.guide-card,
.setup-note {
  padding: var(--space-md);
  border: 2px solid var(--color-border-strong);
  background: var(--color-surface-2);
  box-shadow: var(--shadow-md);
  min-width: 0;
}

.download-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 12rem;
}

.download-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.download-actions .button {
  flex: 1 1 0;
  min-width: 0;
}

.guide-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--space-xl);
}

.setup-platforms {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.setup-anchor {
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

.setup-platform-shell {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 2px solid var(--color-border-strong);
  background: var(--color-surface-2);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-lg);
}

.setup-platform-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.setup-platform-button {
  width: auto;
}

.setup-platform-panel .guide-grid {
  margin-top: 0;
}

.guide-section + .guide-section {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 2px solid var(--color-border);
}

.guide-section p {
  color: var(--color-muted);
}

.guide-list {
  margin: var(--space-sm) 0 0;
  padding-left: 1.2rem;
  line-height: 1.55;
  color: var(--color-muted);
}

.guide-list li + li {
  margin-top: var(--space-xs);
}

.code-stack {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.code-stack pre {
  margin: 0;
  padding: var(--space-sm);
  border: 2px solid var(--color-border);
  background: #070609;
  overflow-x: auto;
  color: var(--color-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.setup-notes {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--space-xl);
}

.docs-hero {
  width: min(calc(100% - 2rem), var(--docs-shell));
  margin: 0 auto;
  padding: calc(var(--space-2xl) + 0.5rem) 0 var(--space-xl);
}

.docs-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.8fr);
  gap: var(--space-lg);
  align-items: start;
}

.docs-breadcrumbs {
  margin-bottom: var(--space-sm);
}

.docs-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.docs-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.docs-breadcrumbs li + li::before {
  content: "/";
  color: var(--color-primary);
}

.docs-breadcrumbs a {
  text-decoration: none;
}

.docs-breadcrumbs a:hover,
.docs-breadcrumbs a:focus-visible {
  color: var(--color-text);
}

.docs-hero-copy {
  min-width: 0;
}

.docs-page-title {
  max-width: 10ch;
}

.docs-actions {
  margin-top: var(--space-lg);
}

.docs-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}

.docs-chip {
  padding: 0.45rem 0.6rem;
  border: 2px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.docs-sidebar-note,
.docs-callout {
  margin-top: var(--space-md);
  padding: var(--space-sm);
  border: 2px solid var(--color-border);
  background: rgba(220, 85, 220, 0.08);
  color: var(--color-muted);
}

.docs-callout strong {
  color: var(--color-text);
}

.docs-code-block {
  margin-top: var(--space-md);
  border: 2px solid var(--color-border-strong);
  background: #050406;
}

.docs-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0.8rem 0.9rem;
  border-bottom: 2px solid var(--color-border);
  background: rgba(220, 85, 220, 0.08);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.docs-code-head strong {
  font-weight: 700;
}

.docs-copy-button {
  min-height: auto;
  padding: 0.35rem 0.6rem;
  border: 2px solid var(--color-border-strong);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.docs-copy-button:hover,
.docs-copy-button:focus-visible {
  background: var(--color-primary);
  color: #fff;
}

.docs-code-block pre {
  margin: 0;
  padding: var(--space-sm);
  overflow-x: auto;
  color: var(--color-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.docs-inline-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.docs-inline-list span {
  padding: 0.4rem 0.55rem;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.76rem;
}

.docs-code-block code {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.88rem;
  line-height: 1.65;
}

.token.comment,
.token.prolog {
  color: #8c8198;
}

.token.keyword,
.token.control,
.token.operator {
  color: #ff8ed8;
}

.token.function,
.token.method {
  color: #7ed7ff;
}

.token.string,
.token.attr-value {
  color: #b8ff5c;
}

.token.number,
.token.boolean {
  color: #ffd15c;
}

.token.property,
.token.parameter {
  color: #f7f0ff;
}

.token.punctuation {
  color: #c9b8d0;
}

.token.url,
.token.command,
.token.builtin {
  color: #8ef7d4;
}

.token.tag {
  color: #ff9ab3;
}

.docs-search-modal {
  width: min(60rem, calc(100% - 1.5rem));
  max-height: min(80vh, 56rem);
  padding: 0;
  border: 2px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
}

.docs-search-modal::backdrop {
  background: rgba(6, 4, 8, 0.82);
  backdrop-filter: blur(8px);
}

.docs-search-modal-shell {
  display: grid;
  gap: 0;
}

.docs-search-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-bottom: 2px solid var(--color-border);
  background: rgba(220, 85, 220, 0.08);
}

.docs-search-modal-head strong {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.docs-search-modal-body {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-sm);
}

.docs-search-modal-body .docs-search {
  min-height: 3.3rem;
}

.docs-search-results {
  display: grid;
  gap: var(--space-xs);
  max-height: 50vh;
  overflow-y: auto;
}

.docs-search-result {
  display: grid;
  gap: 0.35rem;
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 2px solid var(--color-border);
  background: var(--color-surface-4);
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
}

.docs-search-result:hover,
.docs-search-result:focus-visible,
.docs-search-result.is-active {
  border-color: var(--color-primary);
  background: rgba(220, 85, 220, 0.1);
}

.docs-search-result strong,
.docs-search-result span {
  pointer-events: none;
}

.docs-search-result strong {
  font-size: 1rem;
}

.docs-search-result span {
  color: var(--color-muted);
  line-height: 1.5;
}

.docs-search-meta {
  color: var(--color-primary);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.docs-search-empty {
  padding: var(--space-md);
  border: 2px solid var(--color-border);
  background: var(--color-surface-4);
  color: var(--color-muted);
}

.docs-shell {
  padding: var(--space-3xl) 0;
  background: transparent;
}

.docs-shell,
.docs-shell * {
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

.docs-chrome {
  width: min(calc(100% - 2rem), var(--docs-shell));
  margin: 0 auto;
  position: sticky;
  top: calc(var(--header-height) + 0.75rem);
  z-index: 35;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-md);
  padding: 1rem;
  border: 2px solid var(--color-border-strong);
  background: var(--color-surface-2);
  box-shadow: var(--shadow-lg);
}

.docs-branding {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
  min-width: 0;
}

.docs-brand {
  display: inline-flex;
  padding: 0.25rem 0.45rem;
  background: var(--color-primary);
  color: #fff;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.docs-path {
  color: var(--color-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  overflow-wrap: anywhere;
}

.docs-mode-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.docs-mode {
  min-height: 2.4rem;
  padding: 0.55rem 0.75rem;
  border: 2px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: var(--shadow-sm);
  overflow-wrap: anywhere;
}

.docs-mode.is-active {
  background: var(--color-primary);
}

.docs-surface {
  width: min(calc(100% - 2rem), var(--docs-shell));
  margin: 0 auto;
  padding: 1.25rem;
  border: 2px solid var(--color-border-strong);
  border-top: 0;
  background:
    linear-gradient(rgba(220, 85, 220, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220, 85, 220, 0.06) 1px, transparent 1px),
    var(--color-surface);
  background-size: 24px 24px, 24px 24px, auto;
  box-shadow: var(--shadow-lg);
}

.docs-layout {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  gap: var(--space-lg);
}

.docs-sidebar {
  position: sticky;
  top: calc(var(--header-height) + 7rem);
  align-self: start;
  padding: var(--space-sm);
  border: 2px solid var(--color-border-strong);
  background: var(--color-surface-4);
}

.docs-search-shell {
  display: grid;
  gap: var(--space-xs);
}

.docs-search {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 3rem;
  padding: 0 0.9rem;
  border: 2px solid var(--color-border-strong);
  background: #000;
  color: var(--color-primary);
}

.docs-search:focus-within {
  background: var(--color-surface-2);
}

.docs-search input {
  width: 100%;
  border: 0;
  background: transparent;
  outline: none;
  color: var(--color-text);
  font-family: "IBM Plex Mono", monospace;
}

.docs-search input::placeholder {
  color: var(--color-muted);
}

.docs-search svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.docs-search-prompt {
  width: 100%;
  justify-content: space-between;
  cursor: pointer;
  text-align: left;
}

.docs-search-prompt strong,
.docs-search-prompt span {
  pointer-events: none;
}

.docs-search-status {
  color: var(--color-muted);
  font-size: 0.82rem;
}

.docs-key-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.docs-key-hint kbd,
kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  min-height: 1.6rem;
  padding: 0 0.35rem;
  border: 2px solid var(--color-border);
  background: #000;
  color: var(--color-text);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.76rem;
  font-weight: 700;
}

.docs-nav {
  display: grid;
  gap: 0.2rem;
  margin-top: var(--space-md);
}

.docs-nav a {
  display: block;
  padding: 0.55rem 0.6rem;
  border: 2px solid transparent;
  color: var(--color-muted);
  text-decoration: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.docs-nav a:hover,
.docs-nav a:focus-visible,
.docs-nav a.is-active {
  border-color: var(--color-primary);
  color: var(--color-text);
  background: rgba(220, 85, 220, 0.1);
}

.docs-main {
  min-width: 0;
}

.docs-main > * + * {
  margin-top: var(--space-md);
}

.docs-intro {
  padding: var(--space-md);
  border: 2px solid var(--color-border-strong);
  background: var(--color-surface-4);
  box-shadow: var(--shadow-md);
}

.docs-empty-state {
  padding: var(--space-md);
  margin-top: var(--space-md);
  border: 2px solid var(--color-border-strong);
  background: #25000f;
  color: var(--color-text);
}

.docs-block {
  padding: var(--space-md);
  background: var(--color-surface-4);
  box-shadow: var(--shadow-md);
}

.docs-block + .docs-block {
  margin-top: var(--space-md);
}

.docs-block[hidden],
.docs-subsection[hidden] {
  display: none;
}

.docs-block-feature {
  background: linear-gradient(180deg, rgba(220, 85, 220, 0.12), transparent 18%), var(--color-surface-4);
}

.docs-block-dark {
  background: #050406;
}

.docs-block-heading {
  display: grid;
  gap: var(--space-2xs);
}

.docs-copy {
  margin-top: var(--space-sm);
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

.docs-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  color: var(--color-muted);
}

.start-grid,
.summary-grid,
.feature-grid,
.concept-grid {
  margin-top: var(--space-md);
}

.start-grid,
.summary-grid,
.feature-grid,
.concept-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.summary-card-dark,
.feature-card-dark {
  background: var(--color-surface-3);
}

.docs-subsection {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 2px solid var(--color-border);
}

.docs-subsection h4 {
  color: var(--color-primary);
}

.docs-subsection h5 {
  margin-top: var(--space-sm);
}

.docs-list {
  margin: var(--space-sm) 0 0;
  padding-left: 1.2rem;
}

.docs-list li + li {
  margin-top: var(--space-xs);
}

.event-list {
  margin: var(--space-sm) 0 0;
  padding-left: 1.15rem;
  columns: 2;
  column-gap: var(--space-lg);
}

.inline-code {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.35rem;
  border: 2px solid var(--color-primary);
  border-radius: 0;
  background: rgba(220, 85, 220, 0.12);
  color: #fff;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.table-wrap {
  overflow-x: auto;
  margin-top: var(--space-sm);
  border: 2px solid var(--color-border-strong);
  background: #09080a;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 0.9rem 0.8rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 2px solid var(--color-border);
  overflow-wrap: anywhere;
  word-break: break-word;
}

th {
  color: var(--color-primary);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

tbody tr:last-child td {
  border-bottom: 0;
}

.support-section,
.community-section {
  border-top: 2px solid var(--color-border-strong);
}

.support-section {
  background: linear-gradient(180deg, #09070c 0%, #151018 100%);
}

.support-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-lg);
  align-items: start;
}

.community-grid {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.support-panel {
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  border: 2px solid var(--color-border-strong);
  background:
    linear-gradient(180deg, rgba(220, 85, 220, 0.12), transparent 24%),
    var(--color-surface-2);
  box-shadow: var(--shadow-md);
  min-height: 100%;
}

.support-copy {
  margin-top: var(--space-sm);
  color: var(--color-muted);
}

.support-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  align-items: stretch;
}

.support-label {
  margin-bottom: var(--space-xs);
  color: var(--color-primary);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.support-address {
  margin-top: var(--space-sm);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.82rem;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.support-panel .download-actions {
  margin-top: auto;
  padding-top: var(--space-md);
}

@media (max-width: 1120px) {
  .hero-grid,
  .architecture-grid,
  .principles-lead,
  .support-layout,
  .principles-grid,
  .setup-hero,
  .download-grid,
  .setup-platforms,
  .guide-grid,
  .setup-notes,
  .start-grid,
  .summary-grid,
  .feature-grid,
  .concept-grid,
  .community-grid,
  .support-grid,
  .docs-layout {
    grid-template-columns: 1fr;
  }

  .docs-sidebar {
    position: static;
  }
}

@media (max-width: 860px) {
  .header-inner {
    min-height: auto;
    padding: 0.95rem 0;
    flex-direction: column;
    align-items: flex-start;
  }

  [data-section-index]::before,
  [data-section-index]::after {
    display: none;
  }

  .hero-section,
  .story-section,
  .principles-section,
  .support-section,
  .setup-shell,
  .docs-shell,
  .community-section {
    padding: var(--space-2xl) 0;
  }

  .docs-hero {
    padding: var(--space-2xl) 0 var(--space-lg);
  }

  .docs-hero-grid,
  .docs-layout {
    grid-template-columns: 1fr;
  }

  .docs-search-modal {
    width: min(calc(100% - 1rem), 60rem);
  }

  .hero-panel,
  .docs-sidebar,
  .docs-intro,
  .docs-block,
  .community-links,
  .architecture-card,
  .principle-card {
    box-shadow: var(--shadow-sm);
  }

  .docs-chrome {
    position: static;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .shell,
  .docs-chrome,
  .docs-surface,
  .docs-hero {
    width: min(calc(100% - 1rem), var(--docs-shell));
  }

  h1 {
    font-size: clamp(2.7rem, 15vw, 4.25rem);
  }

  h2,
  .docs-intro h2 {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .button,
  .docs-mode,
  .setup-platform-button,
  .docs-copy-button {
    width: 100%;
  }

  .download-actions {
    flex-wrap: wrap;
  }

  .download-actions .button {
    flex: 1 1 100%;
  }

  .hero-grid,
  .architecture-grid,
  .principles-lead,
  .support-layout,
  .principles-grid,
  .setup-hero,
  .download-grid,
  .setup-platforms,
  .guide-grid,
  .setup-notes,
  .start-grid,
  .summary-grid,
  .feature-grid,
  .concept-grid,
  .community-grid {
    gap: var(--space-sm);
  }

  .docs-surface {
    padding: 0.85rem;
  }

  .docs-sidebar,
  .docs-intro,
  .docs-block {
    padding: var(--space-sm);
  }

  th,
  td {
    padding: 0.7rem 0.6rem;
    font-size: 0.86rem;
  }

  .hero-actions,
  .docs-mode-switcher,
  .setup-platform-switcher,
  .docs-code-head,
  .docs-search-modal-head {
    flex-direction: column;
  }

  .migration-stage {
    grid-template-columns: 1fr;
  }

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

  .event-list {
    columns: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .button,
  .docs-mode,
  .setup-platform-button,
  .nav-link,
  .docs-copy-button {
    transition: none;
  }

  .provider-highlight,
  .migration-provider,
  .migration-benefits span.is-entering,
  .migration-benefits span.is-leaving,
  .migration-benefits span {
    animation: none;
    transition: none;
  }
}