:root {
  --canvas: #080d13;
  --canvas-top: #0d1625;
  --panel: #17202a;
  --panel-soft: #19212b;
  --panel-deep: #0c1421;
  --stroke: #2b3541;
  --stroke-strong: #3b4756;
  --text: #f4f7f9;
  --text-soft: #c3cad2;
  --text-muted: #9ca8b6;
  --lime: #91d438;
  --lime-soft: #b3ed67;
  --cat-plan: #ff7898;
  --cat-spec: #91d75d;
  --cat-layout: #63b7ff;
  --cat-general: #c294ff;
  --cat-library: #f5b84a;
  --cat-toolbar: #4dd6df;
  color-scheme: dark;
}

* { scrollbar-color: #5c6672 var(--panel-deep); }
body {
  background:
    radial-gradient(ellipse 54rem 38rem at -7% -3%, rgba(47,104,84,.38) 0%, rgba(25,71,69,.2) 44%, transparent 72%),
    radial-gradient(ellipse 70rem 46rem at 68% -14%, rgba(24,43,82,.45) 0%, transparent 70%),
    linear-gradient(180deg, #0d1729 0%, #0a111a 36rem, var(--canvas) 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
button, input, a { font-family: inherit; }
.topbar {
  height: 64px;
  padding: 0 18px;
  background: rgba(10,16,25,.94);
  border-top: 5px solid #05070a;
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(18px);
}
.brand { width: 326px; height: 59px; padding: 0 8px; border: 0; gap: 10px; }
.brand > span { width: 34px; height: 34px; border: 1px solid var(--stroke-strong); border-radius: 8px; color: var(--lime); font-size: 10px; }
.brand b { font-size: 13px; letter-spacing: -.01em; }
.brand small { color: var(--text-muted); font-size: 9px; letter-spacing: .12em; }
.search { width: min(560px,43vw); height: 39px; margin-left: 14px; border: 1px solid var(--stroke); border-radius: 9px; background: var(--panel-deep); }
.search:focus-within { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(145,212,56,.12); }
.search span { color: var(--text-muted); }
.search input { color: var(--text); font-size: 14px; }
.search input::placeholder { color: #64707e; }
.status { color: var(--text-muted); }
.status i { background: var(--lime); box-shadow: 0 0 0 4px rgba(145,212,56,.1); }

.rail { top: 64px; width: 326px; padding: 10px; background: rgba(10,16,24,.98); border-right: 1px solid var(--stroke); }
.rail-title { height: 48px; padding: 0 10px; border: 0; color: var(--text-muted); font-size: 10px; }
.rail-title b { color: var(--lime-soft); }
.rail nav { height: calc(100% - 48px); padding: 0 0 60px; }
.rail button, .rail button.previous, .rail button.current, .rail button.unreleased, .rail button.install {
  width: 100%; margin: 0 0 7px; padding: 11px 12px; grid-template-columns: 34px 1fr; gap: 7px;
  color: var(--text) !important; background: var(--panel-deep) !important;
  border: 1px solid var(--stroke); border-left: 3px solid var(--category,var(--stroke-strong)); border-radius: 10px;
}
.rail button.current, .rail button.current-release, .rail button.previous, .rail button.install {
  --category: var(--stroke-strong);
  background: var(--panel-deep) !important;
}
.rail button.unreleased {
  --category: #f15f71;
  background: linear-gradient(90deg,rgba(241,95,113,.16),var(--panel-deep) 38%) !important;
}
.rail button.cat-plan { --category: var(--cat-plan); }
.rail button.cat-spec { --category: var(--cat-spec); }
.rail button.cat-layout { --category: var(--cat-layout); }
.rail button.cat-general { --category: var(--cat-general); }
.rail button.cat-library { --category: var(--cat-library); }
.rail button.cat-toolbar { --category: var(--cat-toolbar); }
.rail button:hover { border-color: #4b5868; transform: translateX(2px); }
.rail button.active { filter: none; border-color: var(--category,var(--lime)); box-shadow: 0 0 0 2px color-mix(in srgb,var(--category,var(--lime)) 15%,transparent); }
.rail button *, .rail button.current *, .rail button.unreleased * { color: var(--text) !important; }
.rail button > span { color: var(--category,var(--text-muted)) !important; font-size: 10px; font-weight: 800; }
.rail strong { font-size: 12px; letter-spacing: .01em; text-transform: none; }
.rail small, .rail button.current small { color: #b4bdc8 !important; font-size: 10px; }

.workspace { margin-left: 326px; padding-top: 64px; }
.workspace-head { min-height: 214px; padding: 52px clamp(24px,5vw,74px) 30px; align-items: end; }
.workspace-head small, .kicker { color: var(--lime); font-weight: 800; letter-spacing: .16em; }
.workspace-head h1 { margin: 11px 0 10px; color: var(--text); font-size: clamp(42px,6vw,78px); letter-spacing: -.055em; }
.workspace-head p { color: var(--text-soft); font-size: 15px; line-height: 1.5; }
.manual-link { color: var(--lime-soft); text-decoration: none; }
.toggle { padding: 3px; border: 1px solid var(--stroke); border-radius: 10px; background: var(--panel-deep); }
.toggle button { color: var(--text-soft); border-radius: 7px; text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 700; }
.toggle .active { background: var(--lime); color: #17230b; }

.reader { margin: 0 clamp(18px,5vw,74px) 44px; }
.chapter {
  padding: clamp(28px,4.2vw,58px); color: var(--text); background: var(--panel);
  border: 1px solid var(--stroke); border-top: 3px solid var(--lime); border-radius: 16px;
  box-shadow: 0 24px 65px rgba(0,0,0,.26);
}
.chapter.update-chapter, .chapter.compare-chapter, .chapter.library-index-chapter {
  background: #19222c;
}
.chapter h1 { color: var(--text); text-transform: none; font-size: clamp(38px,5vw,68px); }
.deck, .chapter .deck { color: var(--text-soft); font-size: 17px !important; line-height: 1.55; }
.status-pill { border-radius: 999px; background: var(--panel-deep); color: var(--text); border: 1px solid var(--stroke); }
.status-pill.current { background: rgba(145,212,56,.12); color: var(--lime-soft); border-color: rgba(145,212,56,.45); }
.status-pill.unreleased { background: rgba(255,120,152,.12); color: #ff9ab1; border-color: rgba(255,120,152,.45); }
.prose h2, .detail-body h2, .detail-body h3 { color: var(--text); text-transform: none; }
.update-list li, .detail-body p, .detail-body li, .release-summary, .release-migration p { color: var(--text-soft) !important; font-family: inherit; font-size: 16px !important; line-height: 1.7 !important; }
.update-list li { margin: 9px 0; padding: 12px 14px; background: var(--panel-soft); border: 1px solid var(--stroke); border-left: 3px solid var(--lime); border-radius: 9px; }
.notice, .choice-final, .full-library-reminder, .release-summary, .release-migration, .release-migration > h2 {
  color: var(--text) !important; background: var(--panel-soft) !important; border: 1px solid var(--stroke) !important; border-left: 4px solid var(--lime) !important; border-radius: 11px;
}
.notice p, .full-library-reminder p { color: var(--text-soft) !important; }
.accordion-stack details { margin: 10px 0; border: 1px solid var(--stroke); border-radius: 11px; background: var(--panel-deep); overflow: hidden; }
.accordion-stack details > summary, .update-chapter > .accordion-stack > details > summary {
  margin: 0; color: var(--text); background: var(--panel-soft) !important; border: 0 !important; border-left: 4px solid var(--category,var(--lime)) !important;
}
.accordion-stack summary *, .accordion-stack summary strong { color: var(--text) !important; }
.accordion-stack summary span { color: var(--category,var(--lime)) !important; }
.accordion-stack summary small { color: var(--text-muted) !important; }
.accordion-stack details.cat-plan { --category: var(--cat-plan); }
.accordion-stack details.cat-spec { --category: var(--cat-spec); }
.accordion-stack details.cat-layout { --category: var(--cat-layout); }
.accordion-stack details.cat-general { --category: var(--cat-general); }
.accordion-stack details.cat-library { --category: var(--cat-library); }
.accordion-stack details.cat-toolbar { --category: var(--cat-toolbar); }
.detail-body { color: var(--text-soft); background: var(--panel-deep); }
.steps li { background: var(--panel-soft); border-color: var(--stroke); }
.steps li::marker { color: var(--lime); font-weight: 800; }
.tip, .release-check, .advanced-warning { color: var(--text); background: rgba(145,212,56,.07); border-color: var(--lime); border-radius: 9px; }
.advanced-warning { background: rgba(255,120,152,.08); border-color: var(--cat-plan); }
.release-migration { margin-bottom: 28px; }
.release-migration figure, .install-shot, .image-link { border-color: var(--stroke); background: var(--panel-deep); border-radius: 10px; overflow: hidden; }
.release-migration figcaption, .image-note, .install-shot figcaption { color: var(--text-muted); }
.category-heading {
  color: var(--text) !important; background: var(--panel-deep) !important; border: 1px solid var(--stroke) !important; border-left: 4px solid var(--category,var(--lime)) !important; border-radius: 8px;
}
.cat-plan { --category: var(--cat-plan); }
.cat-spec { --category: var(--cat-spec); }
.cat-layout { --category: var(--cat-layout); }
.cat-general { --category: var(--cat-general); }
.cat-library { --category: var(--cat-library); }
.cat-toolbar { --category: var(--cat-toolbar); }
/* Version tabs are color-coded by status, independent of content category. */
.rail button.install {
  --category: var(--cat-general) !important;
  border-left-color: var(--cat-general) !important;
  background: linear-gradient(90deg, rgba(194,148,255,.15), var(--panel-deep) 38%) !important;
}
.rail button.unreleased {
  --category: #f15f71 !important;
  border-left-color: #f15f71 !important;
  background: linear-gradient(90deg, rgba(241,95,113,.16), var(--panel-deep) 38%) !important;
}
.rail button.current,
.rail button.current-release {
  --category: var(--lime) !important;
  border-left-color: var(--lime) !important;
  background: linear-gradient(90deg, rgba(145,212,56,.16), var(--panel-deep) 38%) !important;
}
.rail button.previous {
  --category: var(--cat-layout) !important;
  border-left-color: var(--cat-layout) !important;
  background: linear-gradient(90deg, rgba(99,183,255,.14), var(--panel-deep) 38%) !important;
}
.rail button small,
.rail button.current small,
.rail button.previous small,
.rail button.unreleased small {
  color: #b4bdc8 !important;
}
.downloads li, .library-choice-grid section, .method-options section, .card, .migration-cards section {
  color: var(--text) !important; background: var(--panel-deep) !important; border-color: var(--stroke) !important; border-radius: 9px;
}
.library-choice-grid a, .update-guide-link, .library-index-link {
  color: #17230b !important; background: var(--lime) !important; border: 0 !important; border-radius: 999px;
}

/* Form controls and nested installation options use the same dark surface language. */
.compare-controls label { color: var(--text-soft) !important; }
.compare-controls select,
.compare-controls input {
  color: var(--text) !important;
  background: var(--panel-deep) !important;
  border: 1px solid var(--stroke-strong) !important;
  border-radius: 8px;
  color-scheme: dark;
}
.compare-controls select:focus,
.compare-controls input:focus {
  border-color: var(--lime) !important;
  outline: 3px solid rgba(145,212,56,.12);
}
.compare-controls select option {
  color: var(--text);
  background: var(--panel-deep);
}
.new-installation-chapter .accordion-stack .optional-install-detail > summary {
  color: var(--text) !important;
  background: var(--panel-soft) !important;
  border-left-color: var(--cat-general) !important;
}
.new-installation-chapter .optional-install-detail > summary::after {
  border-color: var(--text);
}
.chapter.new-installation-chapter .accordion-stack .detail-body h2,
.chapter.new-installation-chapter .accordion-stack .detail-body h3,
.chapter.new-installation-chapter .accordion-stack .detail-body h4 {
  color: var(--text) !important;
}
.chapter.new-installation-chapter .release-summary a:not(.update-guide-link) {
  color: var(--lime-soft) !important;
}
.new-installation-chapter .release-summary .update-guide-link {
  display: flex !important;
  width: fit-content !important;
  max-width: 100%;
  margin: 12px 0 2px !important;
  padding: 9px 14px !important;
  line-height: 1.2;
  text-decoration: none;
  box-sizing: border-box;
}
footer { border-top-color: var(--stroke); color: var(--text-muted); }
footer a { color: var(--lime-soft); }

@media (max-width: 1000px) {
  .topbar { height: 60px; padding: 0 8px; }
  .brand { height: 55px; min-width: 185px; }
  .rail { top: 60px; }
  .workspace { margin-left: 0; padding-top: 60px; }
}
@media (max-width: 650px) {
  .brand { min-width: 52px; }
  .brand div { display: none; }
  .search { margin-right: 4px; }
  .workspace-head { min-height: 0; padding: 34px 18px 22px; }
  .workspace-head h1 { font-size: 43px; }
  .reader { margin: 0 10px 28px; }
  .chapter { padding: 26px 18px 34px; border: 1px solid var(--stroke); border-top: 3px solid var(--lime); border-radius: 13px; }
  .rail { width: min(326px,90vw); }
}