.tab-shell {
  min-width: 0;
}

.tab-list {
  display: flex;
  max-width: 100%;
  gap: 8px;
  overflow-x: auto;
  padding: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-panel);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.tab-list [role="tab"] {
  min-width: max-content;
  min-height: 44px;
  padding: 10px 20px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-muted);
  font-weight: 700;
}

.tab-list [role="tab"]:hover {
  color: var(--color-text);
}

.tab-list [role="tab"][aria-selected="true"],
.tab-list [role="tab"].is-active {
  background: var(--color-page);
  color: var(--color-accent-dark);
  box-shadow: var(--shadow-soft);
}

[role="tabpanel"] {
  min-width: 0;
  margin-top: 24px;
}

[role="tabpanel"][hidden] {
  display: none;
}

.toc {
  display: flex;
  max-width: 100%;
  gap: 9px;
  overflow-x: auto;
  padding: 10px;
  border-radius: var(--radius-medium);
  background: var(--color-panel);
  -webkit-overflow-scrolling: touch;
}

.toc a {
  display: inline-flex;
  min-width: max-content;
  min-height: 40px;
  align-items: center;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 650;
}

.toc a:hover,
.toc a[aria-current="true"] {
  background: var(--color-page);
  color: var(--color-accent-dark);
}

.faq-list {
  display: grid;
  gap: 14px;
}

.faq-item {
  border-radius: var(--radius-medium);
  background: var(--color-page);
  box-shadow: var(--shadow-soft);
}

.faq-item summary {
  display: flex;
  min-height: 64px;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  font-weight: 750;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  width: 28px;
  height: 28px;
  margin-left: auto;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--color-panel);
  color: var(--color-accent-dark);
  content: "+";
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 28px;
  text-align: center;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-answer {
  padding: 0 22px 20px;
  color: var(--color-text-muted);
}

.faq-answer > :last-child {
  margin-bottom: 0;
}

.term-card {
  position: relative;
  min-width: 0;
  padding: 26px;
  border-radius: var(--radius-large);
  background: var(--color-page);
  box-shadow: var(--shadow-soft);
}

.term-card::before {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--term-color, var(--color-accent));
  content: "";
}

.term-card[data-tone="orange"] {
  --term-color: var(--color-stop-orange);
}

.term-card[data-tone="sky"] {
  --term-color: var(--color-stop-sky);
}

.term-card[data-tone="rose"] {
  --term-color: var(--color-stop-rose);
}

.term-name {
  padding-right: 28px;
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 750;
}

.term-category {
  display: inline-flex;
  max-width: 100%;
  margin-top: 10px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-panel);
  color: var(--color-text-muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.term-description {
  margin-top: 16px;
  margin-bottom: 0;
  color: var(--color-text-muted);
}

.client-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(24px, 4vw, 38px);
  border-radius: var(--radius-large);
  background: var(--color-page);
  box-shadow: var(--shadow-soft);
}

.client-head {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 16px;
}

.client-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.client-heading {
  min-width: 0;
}

.client-heading h3 {
  margin-bottom: 5px;
}

.client-version {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.client-copy {
  margin-top: 20px;
  color: var(--color-text-muted);
}

.client-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 22px;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.badge {
  display: inline-flex;
  max-width: 100%;
  min-height: 28px;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: var(--color-panel);
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.badge-primary {
  background: var(--color-accent);
  color: var(--color-page);
}

.badge-recommended {
  background: var(--color-accent-wash);
  color: var(--color-accent-dark);
}

.badge-warning {
  background: var(--color-warning);
  color: var(--color-text);
}

.badge-retired {
  background: var(--color-error);
  color: var(--color-page);
}

.badge-orange {
  background: var(--color-stop-orange);
  color: var(--color-page);
}

.badge-sky {
  background: var(--color-stop-sky);
  color: var(--color-page);
}

.badge-rose {
  background: var(--color-stop-rose);
  color: var(--color-page);
}

.article-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 28px;
  border-radius: var(--radius-large);
  background: var(--color-page);
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.article-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-float);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  margin-bottom: 16px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
}

.article-title {
  margin-bottom: 12px;
  font-size: 22px;
  line-height: 1.35;
}

.article-summary {
  margin-bottom: 22px;
  color: var(--color-text-muted);
}

.article-link {
  margin-top: auto;
  color: var(--color-accent-dark);
  font-weight: 750;
}

.callout {
  position: relative;
  min-width: 0;
  margin-block: 28px;
  padding: 22px 24px 22px 52px;
  border-radius: var(--radius-medium);
  background: var(--color-panel);
  color: var(--color-text-muted);
}

.callout::before {
  position: absolute;
  top: 24px;
  left: 24px;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  content: "";
}

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

.callout-warning::before {
  background: var(--color-warning);
}

.callout-error::before {
  background: var(--color-error);
}

.callout-success::before {
  background: var(--color-success);
}

.data-table-wrap,
.prose > .data-table {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  min-width: 680px;
}

.features-board {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 24px;
}

/* feature-detail-pin:tabpanel 全部钉在网格第 2 列第 1 行叠放(2026-08-17 3015 首页事故:#feature-repair 漏 hidden,自动落位甩进 250px 窄列成一字一行文字塔) */
.features-board > .feature-detail {
  grid-column: 2;
  grid-row: 1;
}

.features-index {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
}

.features-index button {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  gap: 11px;
  padding: 11px 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-panel);
  color: var(--color-text-muted);
  text-align: left;
}

.features-index button[aria-selected="true"] {
  background: var(--color-accent);
  color: var(--color-page);
  font-weight: 750;
}

.feature-dot {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--feature-color, var(--color-accent));
}

.feature-dot.orange {
  --feature-color: var(--color-stop-orange);
}

.feature-dot.sky {
  --feature-color: var(--color-stop-sky);
}

.feature-dot.rose {
  --feature-color: var(--color-stop-rose);
}

.feature-detail {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: clamp(28px, 5vw, 52px);
  border-radius: var(--radius-large);
  background: var(--color-page);
  box-shadow: var(--shadow-soft);
}

.feature-detail::before {
  position: absolute;
  inset: 0 0 auto;
  height: 7px;
  background: var(--feature-band, var(--color-accent));
  content: "";
}

.feature-detail[data-tone="orange"] {
  --feature-band: var(--color-stop-orange);
}

.feature-detail[data-tone="sky"] {
  --feature-band: var(--color-stop-sky);
}

.feature-detail[data-tone="rose"] {
  --feature-band: var(--color-stop-rose);
}

.feature-fact {
  margin-top: 24px;
  margin-bottom: 0;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
}

.download-guide-card {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 22px;
  margin-top: 48px;
  padding: 28px;
  border-radius: var(--radius-large);
  background: var(--color-panel);
}

.download-guide-card__icon {
  display: grid;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  place-items: center;
  border-radius: var(--radius-small);
  background: var(--color-accent);
  color: var(--color-page);
}

.download-guide-card__body {
  min-width: 0;
}

.download-guide-card__body h2,
.download-guide-card__body h3 {
  margin-bottom: 6px;
  font-size: 21px;
}

.download-guide-card__body p {
  margin-bottom: 0;
  color: var(--color-text-muted);
}

.download-guide-card .button {
  margin-left: auto;
  flex-shrink: 0;
}

.dl-fab {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 45;
  display: inline-flex;
  max-width: calc(100vw - 36px);
  min-height: 52px;
  align-items: center;
  gap: 11px;
  padding: 11px 18px 11px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-page);
  box-shadow: var(--shadow-accent);
  font-weight: 750;
}

.dl-fab:hover {
  background: var(--color-accent-dark);
}

.dl-fab__icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-white-soft);
  color: var(--color-accent-dark);
}

.preview-hero {
  padding-top: 34px;
  text-align: center;
}

.preview-hero h1 {
  max-width: 900px;
  margin: 0 auto;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.12;
}

.preview-hero h1 em {
  padding-inline: 4px;
  border-radius: 6px;
  background: linear-gradient(0deg, var(--color-accent-wash) 0 34%, transparent 34%);
  color: var(--color-accent-dark);
  font-style: normal;
}

.hero-sub {
  max-width: 640px;
  margin: 18px auto 0;
  color: var(--color-text-muted);
  font-size: 17px;
  line-height: 1.6;
}

.hero-sub strong {
  color: var(--color-text);
}

.cta-row,
.chip-row,
.platform-line,
.fact-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.cta-row {
  gap: 14px;
  margin-top: 24px;
}

.chip-row {
  gap: 10px;
  margin-top: 20px;
}

.chip {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: var(--radius-pill);
  background: var(--color-panel);
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 550;
  overflow-wrap: anywhere;
}

.chip:hover {
  background: var(--color-panel-strong);
  color: var(--color-text);
}

.chip-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

.chip-dot.orange {
  background: var(--color-stop-orange);
}

.chip-dot.sky {
  background: var(--color-stop-sky);
}

.chip-dot.rose {
  background: var(--color-stop-rose);
}

.platform-line {
  align-items: center;
  gap: 38px;
  margin-top: 26px;
}

.platform-line a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--color-text-muted);
  font-size: 14.5px;
  font-weight: 650;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.platform-line a svg {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  color: var(--color-accent);
}

.platform-line a:hover {
  transform: translateY(-2px);
  color: var(--color-accent-dark);
}

.rail-zone {
  margin-top: 22px;
}

.rail-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 0 6px 10px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.rail-head b {
  color: var(--color-text);
}

.rail-stage {
  position: relative;
  height: 250px;
}

.rail-svg {
  position: absolute;
  bottom: 34px;
  left: 0;
  width: 100%;
  height: 22px;
}

.rail-track {
  fill: var(--color-panel-strong);
}

.rail-dash {
  stroke: var(--color-page);
}

.rail-stop {
  position: absolute;
  bottom: 36px;
  display: flex;
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
}

.rail-stop-one {
  left: 10%;
}

.rail-stop-two {
  left: 31%;
}

.rail-stop-three {
  left: 52%;
}

.stop-cap {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 1px;
  padding: 10px 18px 9px;
  border-radius: 16px;
  color: var(--color-page);
  box-shadow: var(--shadow-soft);
}

.stop-cap code {
  font-size: 14px;
  font-weight: 750;
}

.stop-cap small {
  font-size: 11px;
  font-weight: 550;
}

.cap-orange,
.dot-orange {
  background: var(--color-stop-orange);
}

.cap-sky,
.dot-sky {
  background: var(--color-stop-sky);
}

.cap-rose,
.dot-rose {
  background: var(--color-stop-rose);
}

.stop-stem {
  width: 0;
  height: 44px;
  border-left: 2px dashed var(--color-line);
}

.stop-dot {
  width: 18px;
  height: 18px;
  border: 4px solid var(--color-page);
  border-radius: var(--radius-pill);
  box-shadow: 0 1px 4px var(--color-shadow-dot);
}

.release-board {
  position: absolute;
  bottom: 32px;
  left: 84%;
  display: flex;
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
}

.release-board-card {
  width: 300px;
  padding: 16px 20px 18px;
  border-radius: var(--radius-medium);
  background: var(--color-page);
  box-shadow: var(--shadow-accent);
  text-align: left;
}

.release-board-top {
  display: flex;
  align-items: center;
  gap: 9px;
}

.release-board-top code {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: 11.5px;
}

.release-board-top code i {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--color-success);
}

.release-board-line {
  margin: 12px 0 0;
  color: var(--color-accent-dark);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 750;
}

.release-board-note {
  margin: 5px 0 0;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.release-board-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 13px;
  padding: 11px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-page);
  font-size: 14px;
  font-weight: 750;
}

.release-board-button:hover {
  background: var(--color-accent-dark);
}

.release-board-stem {
  width: 0;
  height: 24px;
  border-left: 3px solid var(--color-accent);
}

.release-board-dot {
  width: 26px;
  height: 26px;
  border: 5px solid var(--color-page);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  box-shadow: 0 2px 8px var(--color-accent-glow);
}

.preview-peek {
  margin-top: 30px;
}

.preview-peek-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 26px 36px 70px;
  border-radius: var(--radius-large) var(--radius-large) 0 0;
  background: var(--color-panel);
}

.preview-peek-card h2 {
  margin: 0;
  font-size: 20px;
}

.preview-peek-card p {
  margin: 0 0 0 auto;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
}

.token-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.token-swatch {
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-medium);
  background: var(--color-page);
  box-shadow: var(--shadow-soft);
}

.token-color {
  height: 90px;
  background: var(--swatch);
}

.token-color.page {
  --swatch: var(--color-page);
}

.token-color.panel {
  --swatch: var(--color-panel);
}

.token-color.panel-strong {
  --swatch: var(--color-panel-strong);
}

.token-color.line {
  --swatch: var(--color-line);
}

.token-color.accent {
  --swatch: var(--color-accent);
}

.token-color.accent-dark {
  --swatch: var(--color-accent-dark);
}

.token-color.text {
  --swatch: var(--color-text);
}

.token-color.muted {
  --swatch: var(--color-text-muted);
}

.token-color.success {
  --swatch: var(--color-success);
}

.token-color.warning {
  --swatch: var(--color-warning);
}

.token-color.error {
  --swatch: var(--color-error);
}

.token-color.orange {
  --swatch: var(--color-stop-orange);
}

.token-color.sky {
  --swatch: var(--color-stop-sky);
}

.token-color.rose {
  --swatch: var(--color-stop-rose);
}

.token-label {
  padding: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.type-sample {
  padding: 28px;
  border-radius: var(--radius-large);
  background: var(--color-page);
  box-shadow: var(--shadow-soft);
}

.type-display {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 800;
  line-height: 1.1;
}

.type-body {
  color: var(--color-text-muted);
  font-size: 17px;
}

.type-mono {
  color: var(--color-accent-dark);
  font-family: var(--font-mono);
}

@media (max-width: 860px) {
  .features-board {
    grid-template-columns: minmax(0, 1fr);
  }

  .features-board > .feature-detail {
    grid-column: 1;
    grid-row: auto;
  }

  .features-index {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .features-index button {
    width: auto;
    min-width: max-content;
  }

  .features-board--wrap-tabs .features-index {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-x: visible;
  }

  .features-board--wrap-tabs .features-index button {
    min-width: 0;
    padding-inline: 10px;
  }

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

@media (max-width: 768px) {
  .preview-hero h1 {
    font-size: clamp(24px, 8.8vw, 30px);
  }

  .platform-line {
    gap: 18px 24px;
  }

  .rail-stage {
    height: auto;
    padding-top: 18px;
    padding-bottom: 22px;
  }

  .rail-svg {
    display: none;
  }

  .rail-stop,
  .release-board {
    position: static;
    transform: none;
  }

  .rail-stage {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .stop-stem,
  .stop-dot,
  .release-board-stem,
  .release-board-dot {
    display: none;
  }

  .stop-cap {
    width: 100%;
    min-width: 0;
    padding-inline: 8px;
  }

  .release-board {
    grid-column: 1 / -1;
    margin-top: 8px;
  }

  .release-board-card {
    width: 100%;
  }

  .preview-peek-card {
    align-items: flex-start;
    flex-direction: column;
    padding-inline: 24px;
  }

  .preview-peek-card p {
    margin-left: 0;
  }

  .download-guide-card {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .download-guide-card .button {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  .tab-list {
    border-radius: var(--radius-medium);
  }

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

  .rail-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .rail-stage {
    grid-template-columns: minmax(0, 1fr);
  }

  .platform-line a {
    min-width: 0;
    justify-content: flex-start;
  }

  .faq-item summary,
  .faq-answer {
    padding-left: 18px;
    padding-right: 18px;
  }

  .dl-fab {
    right: 12px;
    bottom: 12px;
    max-width: calc(100vw - 24px);
  }
}