/*
 * Reading-layer styles for the stock VitePress theme.
 *
 * The canonical Markdown remains responsible for content and the generated
 * projection remains responsible for routes. This file only establishes
 * spacing, focus, overflow, and responsive behavior shared by those pages.
 */
:root {

  /*
   * The stock theme names only Latin faces, so Chinese text falls through to the
   * generic `sans-serif` and each platform picks a different face. Naming the CJK
   * stack explicitly is the one typography change that costs no bytes: every face
   * below ships with its operating system, and the lab pages set `default-src
   * 'self'`, which forbids a font CDN. A self-hosted Chinese face is not an
   * option either — Noto Sans SC is 17 MB and Microsoft YaHei 19 MB.
   *
   * Latin faces come first on purpose. A CJK font also carries Latin glyphs, and
   * they are looser and lighter than a dedicated Latin face, so identifiers and
   * numbers set in a CJK font read worse beside the surrounding code.
   */
  --dsh-font-sans:
    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans SC", "Noto Sans CJK SC",
    "Microsoft YaHei UI", "Microsoft YaHei", "WenQuanYi Micro Hei",
    ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --dsh-font-mono:
    ui-monospace, "SFMono-Regular", "Cascadia Code", "JetBrains Mono", Menlo, Consolas,
    "Liberation Mono", "Sarasa Mono SC", "Noto Sans Mono CJK SC",
    "Microsoft YaHei UI", "Microsoft YaHei", monospace;
  --vp-font-family-base: var(--dsh-font-sans);
  --vp-font-family-mono: var(--dsh-font-mono);
  --dsh-reading-line-height: 1.85;
  --dsh-reading-radius: 8px;
  --dsh-reading-radius-lg: 16px;
  --dsh-reading-focus: color-mix(in srgb, var(--vp-c-brand-1) 22%, transparent);
  --dsh-reading-surface: color-mix(in srgb, var(--vp-c-bg-soft) 88%, transparent);
  --dsh-reading-shadow: 0 16px 42px rgba(37, 58, 112, 0.08);
  --dsh-reading-shadow-strong: 0 22px 52px rgba(37, 58, 112, 0.14);
  --dsh-reading-progress: 0%;
}

/*
 * Chinese has no inter-word spaces, so a Latin-tuned tracking value closes up
 * the visual gaps a reader uses to segment. Keep body tracking at zero and let
 * the line height carry the rhythm.
 */
.vp-doc :is(p, li, td, th, blockquote, dd) {

  letter-spacing: 0;
}

/*
 * Full-bleed sections use negative inline margins that extend past the
 * viewport on narrow screens. Clipping here (not `hidden`) keeps sticky
 * headers working while removing the stray horizontal scroll.
 */
.VPPage {
  overflow-x: clip;
}

/* The script only updates this percentage; it never records a reading history. */
body::before {

  position: fixed;
  z-index: 1001;
  inset: 0 auto auto 0;
  width: var(--dsh-reading-progress);
  height: 3px;
  background: var(--vp-c-brand-1);
  box-shadow: 0 1px 8px color-mix(in srgb, var(--vp-c-brand-1) 36%, transparent);
  content: '';
  pointer-events: none;
  transition: width 150ms ease-out;
}
.vp-doc {

  font-size: 16px;
  line-height: var(--dsh-reading-line-height);
}
::selection {

  background: color-mix(in srgb, var(--vp-c-brand-1) 26%, transparent);
  color: var(--vp-c-text-1);
}
.vp-doc :is(h1, h2, h3, h4) {

  scroll-margin-top: calc(var(--vp-nav-height) + 24px);
}
.vp-doc h1 {

  letter-spacing: 0;
  line-height: 1.2;
}
.vp-doc h2 {

  padding-top: 1.1rem;
  border-top: 1px solid var(--vp-c-divider);
  /* Tightening a heading slightly is what separates it from body tracking. */
  font-weight: 700;
  letter-spacing: -0.22px;
}
.vp-doc :is(p, ul, ol, blockquote) {

  text-wrap: pretty;
}
.vp-doc :is(ul, ol) {

  padding-left: 1.35rem;
}
.vp-doc .custom-block {

  border-radius: var(--dsh-reading-radius);
  box-shadow: 0 8px 24px rgba(37, 58, 112, 0.06);
}
.vp-doc .custom-block-title {

  letter-spacing: 0;
}
.vp-doc :is(pre, div[class*='language-']) {

  border-radius: var(--dsh-reading-radius);
}
.vp-doc div[class*='language-'] {

  overflow-x: auto;
  border: 1px solid var(--vp-c-divider);
  box-shadow: 0 10px 26px rgba(37, 58, 112, 0.08);
  -webkit-overflow-scrolling: touch;
}
.vp-doc div[class*='language-'] > pre {

  border: 0;
  box-shadow: none;
}
.vp-doc div[class*='language-'] code {

  min-width: max-content;
}
.vp-doc :is(code, pre) {

  font-variant-ligatures: none;
}
.vp-doc :is(h1, h2, h3, h4) {

  text-wrap: balance;
}
.vp-doc :is(a, button) {

  text-underline-offset: 3px;
}
.vp-doc :not(pre) > code {

  border: 1px solid var(--vp-c-divider);
  border-radius: 3px;
  background: var(--vp-c-bg-soft);
  padding: 1px 4px;
  font-size: 0.8em;
}
.vp-doc kbd {

  border: 1px solid var(--vp-c-divider);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--vp-c-bg-soft);
  color: var(--vp-c-text-1);
  font-size: 0.82em;
  padding: 0.1em 0.4em;
}
.vp-doc table {

  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--vp-c-divider);
}
.vp-doc th,
.vp-doc td {

  min-width: 7rem;
  vertical-align: top;
}
.vp-doc thead th {

  position: sticky;
  top: 0;
  z-index: 1;
  box-shadow: inset 0 -1px 0 var(--vp-c-divider);
}
.vp-doc :is(a, button):focus-visible,
.VPSidebarItem .item:focus-visible,
.VPDocAsideOutline .outline-link:focus-visible {

  outline: 3px solid var(--dsh-reading-focus);
  outline-offset: 3px;
}
.VPDocAsideOutline {

  border-left: 1px solid var(--vp-c-divider);
}
.VPDocAsideOutline .outline-link.active {

  color: var(--vp-c-brand-1);
  font-weight: 650;
}
.VPFooter {

  border-top: 1px solid var(--vp-c-divider);
  background: color-mix(in srgb, var(--vp-c-bg-soft) 56%, transparent);
}
.VPFooter .message,
.VPFooter .copyright {

  line-height: 1.7;
}
.VPFooter a {

  color: var(--vp-c-brand-1);
  font-weight: 600;
}
.VPFooter a:hover {

  color: var(--vp-c-brand-2);
}
.VPSidebarItem.level-0 > .item {

  margin-top: 0.35rem;
  border-radius: 8px;
  font-weight: 650;
}
.VPSidebarItem .item {

  border-radius: 8px;
  transition: background-color 150ms ease, color 150ms ease;
}
.VPSidebarItem .item:hover {

  background: var(--vp-c-bg-soft);
}
.VPSidebarItem.is-active > .item {

  background: var(--vp-c-brand-soft);
  color: var(--vp-c-brand-1);
  font-weight: 650;
}
.VPHome .VPHero .actions {

  gap: 12px;
}
.VPHome .VPHero .name {

  color: var(--vp-c-brand-1);
  font-size: 1.08rem;
  font-weight: 760;
  letter-spacing: 0;
  line-height: 1.35;
}
.VPHome .VPHero .text {

  max-width: 820px;
  font-size: 3.55rem;
  line-height: 1.12;
  text-wrap: balance;
}
.VPHome .VPHero .tagline {

  width: min(100%, 46rem);
  max-width: 46rem;
  text-wrap: pretty;
}
.VPHome .VPHero .actions .VPButton {

  min-height: 44px;
  border-radius: 12px;
  font-weight: 720;
  box-shadow: 0 8px 22px rgba(37, 58, 112, 0.08);
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease, border-color 150ms ease;
}
.VPHome .VPHero .actions .VPButton.brand {

  border-color: transparent;
  background: linear-gradient(135deg, var(--vp-c-brand-1), var(--vp-c-brand-2));
  color: #fff;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--vp-c-brand-1) 28%, transparent);
}
.VPHome .VPHero .actions .VPButton.alt {

  border-color: var(--vp-c-divider);
  background: color-mix(in srgb, var(--vp-c-bg-soft) 84%, transparent);
}
.VPHome .VPHero .actions .VPButton:hover {

  box-shadow: 0 16px 32px color-mix(in srgb, var(--vp-c-brand-1) 20%, transparent);
  transform: translateY(-2px);
}
.VPHome .VPHero .actions .VPButton:focus-visible {

  outline: 3px solid var(--dsh-reading-focus);
  outline-offset: 4px;
}

/*
 * Give the landing page a quiet visual starting point. The decoration is
 * intentionally CSS-only: it adds hierarchy without adding an image that
 * could fail to load on GitHub Pages or make the first screen heavier.
 */
.VPHome {

  background:
    radial-gradient(circle at 84% 7%, color-mix(in srgb, var(--vp-c-brand-soft) 72%, transparent), transparent 25rem),
    linear-gradient(180deg, color-mix(in srgb, var(--vp-c-bg-soft) 34%, transparent), transparent 30rem);
}
.VPHome .VPHero {

  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.VPHome .VPHero::before {

  position: absolute;
  z-index: -1;
  top: 2.8rem;
  right: max(2rem, calc((100vw - 1180px) / 2));
  width: 18rem;
  height: 18rem;
  border: 1px solid color-mix(in srgb, var(--vp-c-brand-1) 18%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 0 1.7rem color-mix(in srgb, var(--vp-c-brand-1) 5%, transparent),
    0 0 0 3.4rem color-mix(in srgb, var(--vp-c-brand-1) 3%, transparent);
  content: '';
  pointer-events: none;
}
.VPHome .VPHero::after {

  position: absolute;
  z-index: -1;
  top: 6.9rem;
  right: max(8rem, calc((100vw - 1180px) / 2 + 6rem));
  width: 6rem;
  height: 6rem;
  background-image: radial-gradient(color-mix(in srgb, var(--vp-c-brand-1) 28%, transparent) 1px, transparent 1px);
  background-size: 12px 12px;
  content: '';
  opacity: 0.55;
  pointer-events: none;
}
.VPHome .VPHero .main {

  position: relative;
  z-index: 1;
}
.VPHome .VPFeatures {

  max-width: 1180px;
  row-gap: 18px;
}
.VPHome .VPFeature {

  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
  background: color-mix(in srgb, var(--vp-c-bg-soft) 78%, transparent);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.VPHome .VPFeature:hover {

  border-color: color-mix(in srgb, var(--vp-c-brand-1) 35%, var(--vp-c-divider));
  box-shadow: 0 12px 28px rgba(37, 58, 112, 0.09);
  transform: translateY(-2px);
}
.dsh-proof-kicker {

  color: var(--vp-c-brand-1);
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: uppercase;
}
.dsh-command-card strong,
.dsh-task-card strong,
.dsh-proof-card strong,
.dsh-action-link strong {

  color: var(--vp-c-text-1);
  font-size: 1.03rem;
  letter-spacing: 0;
  line-height: 1.4;
}
.dsh-command-card small,
.dsh-task-card small,
.dsh-proof-card small,
.dsh-action-link small {

  color: var(--vp-c-text-2);
  font-size: 0.88rem;
  line-height: 1.55;
}
.dsh-command-card,
.dsh-task-card {

  display: grid;
  gap: 8px;
  margin: 1.45rem 0;
  padding: 19px 21px;
  border: 1px solid color-mix(in srgb, var(--vp-c-brand-1) 28%, var(--vp-c-divider));
  border-radius: 8px;
  background: var(--vp-c-bg-soft);
  box-shadow: 0 9px 24px rgba(37, 58, 112, 0.055);
}
.dsh-lesson-contract {

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 1.25rem 0 2rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--vp-c-brand-1) 22%, var(--vp-c-divider));
  border-radius: var(--dsh-reading-radius-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--vp-c-brand-soft) 58%, var(--vp-c-bg)), var(--vp-c-bg-soft));
  box-shadow: var(--dsh-reading-shadow);
}
.dsh-lesson-contract-item {

  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 128px;
  padding: 18px 18px 20px;
  border-right: 1px solid var(--vp-c-divider);
}
.dsh-lesson-contract-item:last-child {

  border-right: 0;
}
.dsh-lesson-contract-item > span {

  color: var(--vp-c-brand-1);
  font-size: 0.73rem;
  font-weight: 780;
  letter-spacing: 0.02em;
  line-height: 1.35;
}
.dsh-lesson-contract-item > strong {

  color: var(--vp-c-text-1);
  font-size: 1.01rem;
  line-height: 1.4;
}
.dsh-lesson-contract-item > small {

  color: var(--vp-c-text-2);
  font-size: 0.86rem;
  line-height: 1.55;
}
.dsh-command-card {

  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}
.dsh-command-card .dsh-proof-kicker {

  grid-row: span 2;
  padding: 5px 13px;
  border: 1px solid color-mix(in srgb, var(--vp-c-brand-1) 34%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--vp-c-bg) 52%, transparent);
  white-space: nowrap;
}
.dsh-task-card {

  background: color-mix(in srgb, var(--vp-c-bg-soft) 88%, transparent);
}
.dsh-check-row {

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 4px;
}
.dsh-check-item {

  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.dsh-check-item > span {

  display: inline-flex;
  flex: 0 0 auto;
  width: fit-content;
  min-width: 26px;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--vp-c-brand-soft);
  color: var(--vp-c-brand-1);
  font-size: 0.75rem;
  font-weight: 750;
}
.dsh-check-item > small {

  align-self: center;
}
.dsh-proof-grid {

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 1.35rem 0 1.5rem;
}
.dsh-proof-card {

  display: grid;
  gap: 6px;
  min-height: 126px;
  padding: 17px 18px;
  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
  background: var(--vp-c-bg-soft);
}
.dsh-proof-card-positive {

  border-color: color-mix(in srgb, #2f9e72 42%, var(--vp-c-divider));
}
.dsh-proof-card-caution {

  border-color: color-mix(in srgb, #d98c3f 44%, var(--vp-c-divider));
}
.dsh-next-actions {

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 1.45rem 0 1.8rem;
}
.dsh-action-link {

  display: grid;
  gap: 5px;
  padding: 16px 18px;
  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
  background: var(--vp-c-bg-soft);
  color: var(--vp-c-text-1);
  text-decoration: none;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.dsh-action-link:hover {

  border-color: color-mix(in srgb, var(--vp-c-brand-1) 42%, var(--vp-c-divider));
  box-shadow: 0 10px 22px rgba(37, 58, 112, 0.09);
  color: var(--vp-c-text-1);
  transform: translateY(-2px);
}
.dsh-action-link-primary {

  border-color: color-mix(in srgb, var(--vp-c-brand-1) 38%, var(--vp-c-divider));
  background: var(--vp-c-bg-soft);
}

/* Make a lesson's opening read like a small teaching card, not a wall of text. */
.VPDoc .vp-doc > h1:first-child {

  max-width: 46rem;
  margin-bottom: 0.9rem;
  letter-spacing: -0.015em;
}
.VPDoc .vp-doc > h1:first-child + p {

  max-width: 49rem;
  color: var(--vp-c-text-2);
  font-size: 1.06rem;
  line-height: 1.75;
}
.VPDoc .vp-doc > :is(h2, h3) {

  scroll-margin-top: calc(var(--vp-nav-height) + 32px);
}
.VPDoc .vp-doc > :is(table, blockquote, .custom-block):first-of-type {

  box-shadow: var(--dsh-reading-shadow);
}
@media (max-width: 959px) and (min-width: 720px) {
.vp-doc .dsh-lesson-contract {

    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
.dsh-lesson-contract-item:nth-child(2n) {

    border-right: 0;
  }
.dsh-lesson-contract-item:nth-child(-n + 2) {

    border-bottom: 1px solid var(--vp-c-divider);
  }
.dsh-lesson-contract-item:nth-child(n + 3) {

    border-bottom: 0;
  }

}
@media (max-width: 719px) {
.VPHome .VPHero {

    padding: 56px 20px 32px;
  }
.VPHome .VPHero .name {

    font-size: 1rem;
  }
.VPHome .VPHero .text {

    max-width: 26rem;
    font-size: 2.25rem;
    line-height: 1.22;
  }
.VPHome .VPHero .tagline {

    width: 100%;
    max-width: 100%;
    font-size: 1rem;
    line-height: 1.65;
  }
.VPHome .VPHero .actions {

    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }
.VPHome .VPHero .actions .VPButton {

    justify-content: center;
    width: 100%;
  }
.VPHome .VPFeatures {

    padding-inline: 20px;
  }
.VPFooter {

    padding-inline: 20px;
  }
.VPHome .VPFeature {

    border-radius: 8px;
    padding: 20px;
  }
.VPHome .dsh-proof-grid,
.VPHome .dsh-next-actions {

    grid-template-columns: 1fr;
    margin-inline: 20px;
  }
.vp-doc .dsh-proof-grid,
  .vp-doc .dsh-next-actions {

    grid-template-columns: 1fr;
    margin-inline: 0;
  }
.VPHome .VPHero::before,
  .VPHome .VPHero::after {

    display: none;
  }
.vp-doc .dsh-lesson-contract {

    grid-template-columns: 1fr;
  }
.dsh-lesson-contract-item,
  .dsh-lesson-contract-item:nth-child(2n) {

    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--vp-c-divider);
  }
.dsh-lesson-contract-item:last-child {

    border-bottom: 0;
  }
.dsh-command-card {

    grid-template-columns: 1fr;
  }
.dsh-command-card .dsh-proof-kicker {

    grid-row: auto;
    justify-self: start;
  }
.dsh-task-card,
  .dsh-command-card {

    margin-inline: 0;
  }
.dsh-check-row {

    grid-template-columns: 1fr;
  }
.vp-doc {

    padding-inline: 20px;
  }
.vp-doc h1 {

    font-size: 2rem;
  }
.vp-doc h2 {

    font-size: 1.45rem;
    padding-top: 0.85rem;
  }
.vp-doc table {

    font-size: 0.9rem;
  }
.vp-doc :is(pre, div[class*='language-']) {

    margin-inline: -4px;
  }

}
@media (prefers-reduced-motion: reduce) {
.VPSidebarItem .item,
.VPHome .VPFeature,
.VPHome .VPHero .actions .VPButton,
.dsh-action-link {

    transition: none;
  }
.VPHome .VPFeature:hover {

    transform: none;
  }
.VPHome .VPHero .actions .VPButton:hover {

    transform: none;
  }
.dsh-action-link:hover {

    transform: none;
  }
body::before {

    transition: none;
  }

}
@media (prefers-contrast: more) {
.dsh-action-link {

    border-color: var(--vp-c-text-2);
  }
.dsh-action-link:hover {

    box-shadow: inset 0 0 0 2px var(--vp-c-brand-1);
  }

}
@media print {
body::before,
  .VPNav,
  .VPSidebar,
  .VPDocAside,
  .VPFooter {

    display: none !important;
  }
.VPContent,
  .VPDoc,
  .vp-doc {

    margin: 0;
    max-width: none;
  }
.vp-doc a {

    color: inherit;
    text-decoration: underline;
  }

}

/*
 * 折叠起来的长参考表格。summary 自带行数，所以读者展开前就知道要面对多长的内容。
 *
 * 用原生 <details>：关掉脚本仍然能展开，浏览器的页内查找也能穿透进未展开的内容。
 * 图表的文字替代表格不折叠——那些是无脚本场景下唯一能读到证据的地方。
 */
.vp-doc details.reference-table {

  margin: 20px 0;
  border: 1px solid var(--vp-c-divider);
  border-radius: var(--dsh-reading-radius);
  background: var(--dsh-reading-surface);
}
.vp-doc details.reference-table > summary {

  padding: 10px 14px;
  border-radius: var(--dsh-reading-radius);
  cursor: pointer;
  font-size: 0.92em;
  font-weight: 600;
  list-style: none;
}
.vp-doc details.reference-table > summary::-webkit-details-marker {
 display: none; }

/* 三角自己画，因为默认标记在两种主题下的对比度不受控。 */
.vp-doc details.reference-table > summary::before {

  display: inline-block;
  margin-right: 8px;
  color: var(--vp-c-brand-1);
  content: '▸';
  transition: transform var(--dsh-reading-dur, 0.2s) ease;
}
.vp-doc details.reference-table[open] > summary::before {
 content: '▾'; }
.vp-doc details.reference-table > summary:hover {
 background: var(--vp-c-bg-alt); }
.vp-doc details.reference-table[open] > summary {

  border-bottom: 1px solid var(--vp-c-divider);
  border-radius: var(--dsh-reading-radius) var(--dsh-reading-radius) 0 0;
}
.vp-doc details.reference-table > :not(summary) {
 margin: 0 14px 14px; }
.vp-doc details.reference-table table {
 margin-top: 14px; }
@media (prefers-reduced-motion: reduce) {
.vp-doc details.reference-table > summary::before {
 transition: none; }

}

/* 首页横幅降噪：统一表面与左侧重音线，替代满底色块的堆叠感。 */
.VPHome .vp-doc .custom-block {

  border-radius: 12px;
  border: 1px solid var(--vp-c-divider);
  border-left-width: 3px;
  background: var(--vp-c-bg-soft);
}
.VPHome .vp-doc .custom-block.warning {

  border-left-color: var(--vp-c-warning-1, #b8942a);
  background: color-mix(in srgb, var(--vp-c-warning-soft, #fff7e6) 45%, var(--vp-c-bg));
}
.VPHome .vp-doc .custom-block.tip {
 border-left-color: var(--vp-c-brand-1); }
.VPHome .vp-doc blockquote,
.VPHome blockquote {

  border-left: 3px solid var(--vp-c-brand-1);
  background: transparent;
  padding-left: 16px;
  color: var(--vp-c-text-1);
}

/* 首页装饰动态版：同心环缓慢呼吸、点阵方格缓旋。纯 CSS，无 JS、无资源加载。 */
@media (prefers-reduced-motion: no-preference) {
.VPHome .VPHero::before {

    animation: home-ring-breathe 16s ease-in-out infinite alternate;
  }
.VPHome .VPHero::after {

    animation: home-dots-spin 90s linear infinite;
  }
@keyframes home-ring-breathe {

    from { transform: scale(1); }
    to { transform: scale(1.045); }
  }
@keyframes home-dots-spin {

    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

}

/* 行内代码的长 token（URL 路径、点分字段名）允许在窄屏任意断行，
   防止单个 span 把正文撑出视口；pre 块保持横向滚动不受影响。 */
.vp-doc :not(pre) > code {

  overflow-wrap: anywhere;
}

/* A/B 基准对比条形图（23 课）：内联 SVG 随栏宽缩放，暗色模式走主题变量。 */
.dsh-ab-chart {

  margin: 1.25rem 0;
}
.dsh-ab-chart svg {

  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
}

/* ===== 2026 视觉升级：微交互与层次感（追加，不影响既有规则） ===== */

/* 卡片悬停：轻抬 + 阴影加深 + 边框色向品牌色靠拢 */
.vp-doc .card,
.vp-doc [class*="card"] {

  transition: transform 150ms ease, box-shadow 200ms ease, border-color 150ms ease;
}
.vp-doc .card:hover {

  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  border-color: var(--vp-c-brand-soft);
}

/* 引用块：左侧品牌色条在暗色模式下更醒目 */
.vp-doc blockquote {

  border-left: 3px solid var(--vp-c-brand-1);
  border-radius: 0 6px 6px 0;
  padding-left: 16px;
}

/* 表格行悬停高亮 */
.vp-doc tr:nth-child(even) {

  transition: background-color 150ms ease;
}
.vp-doc tbody tr:hover {

  background: color-mix(in srgb, var(--vp-c-brand-1) 5%, transparent);
}

/* 按钮微交互：按下缩放反馈 */
.vp-doc a.button,
.vp-doc button {

  transition: transform 150ms ease, box-shadow 150ms ease;
}
.vp-doc a.button:active,
.vp-doc button:active {

  transform: scale(0.97);
}

/* 实验室枢纽卡片悬停：图标微放大 */
.lab-card:hover .lab-mini {

  transform: scale(1.06);
  transition: transform 200ms ease;
}
.lab-mini {

  transition: transform 200ms ease;
}

/* 平滑主题切换过渡 */
html {

  transition: background-color 300ms ease, color 300ms ease;
}

/* Mermaid 图自带浅色主题；深色外观下反相一次，保持图内文字与线条可读。 */
html.dark .mermaid {

  filter: invert(1) hue-rotate(180deg);
}