:root {
  --course-paper: #ffffff;
  --course-surface: #ffffff;
  --course-ink: #000000de;
  --course-muted: #0000008c;
  --course-faint: #00000052;
  --course-rule: #0000001f;
  --course-rule-strong: #00000033;
  --course-primary: #4051b5;
  --course-primary-deep: #303fa1;
  --course-primary-soft: #526cfe1a;
  --course-link: #4051b5;
  --course-open: #4051b5;
  --course-open-soft: #526cfe1a;
  --course-soon: #0000008c;
  --course-header: #ffffff;
  --course-code: #f5f5f5;
  --course-header-max-width: 1440px;
  --course-header-gutter: clamp(20px, 3.2vw, 48px);
  --course-header-row-height: 68px;
  --course-tabs-row-height: 54px;
  --course-tabs-item-height: 53px;
  --course-tabs-gap: clamp(16px, 1.5vw, 24px);
  --course-sticky-header-height: calc(var(--course-header-row-height) + var(--course-tabs-row-height));
  --course-header-control-size: 40px;
  --course-header-icon-button-size: 44px;
  --course-header-icon-size: 22px;
  --course-header-search-width: 200px;
  --course-header-source-width: 190px;
  --course-header-meta-font-size: 14px;
  --course-tooltip-font-size: 14px;
  --course-tooltip-line-height: 20px;
  --course-tooltip-padding-block: 6px;
  --course-tooltip-padding-inline: 10px;
  --course-tooltip-radius: 6px;
  --course-brand-mark-size: 30px;
  --course-brand-gap: 16px;
  --course-brand-font: "Avenir Next", "Segoe UI Variable Display", "Helvetica Neue", Arial, sans-serif;
  --course-brand-font-size: 20px;
  --md-text-font: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --md-code-font: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}

[data-md-color-scheme="slate"] {
  --course-paper: var(--md-default-bg-color);
  --course-surface: rgb(var(--color-background-subtle));
  --course-ink: var(--md-default-fg-color);
  --course-muted: var(--md-default-fg-color--light);
  --course-faint: var(--md-default-fg-color--lighter);
  --course-rule: var(--md-default-fg-color--lightest);
  --course-rule-strong: hsla(var(--md-hue), 15%, 90%, 0.2);
  --course-primary: var(--md-typeset-a-color);
  --course-primary-deep: var(--md-accent-fg-color);
  --course-primary-soft: var(--md-accent-fg-color--transparent);
  --course-link: var(--md-typeset-a-color);
  --course-open: var(--md-typeset-a-color);
  --course-open-soft: rgb(84 136 232 / 12%);
  --course-soon: var(--md-default-fg-color--light);
  --course-header: var(--md-default-bg-color);
  --course-code: var(--md-code-bg-color);
}

html {
  scroll-behavior: smooth;
}

html:has(.course-home) {
  font-size: 100%;
}

body {
  background: var(--course-paper);
}

.md-typeset img.etcd-core-diagram {
  display: block;
  width: min(78%, 40rem);
  margin-inline: auto;
}

.md-typeset img.scheduler-framework-diagram,
.md-typeset img.scheduler-source-diagram {
  display: block;
  width: min(100%, 64rem);
  margin-inline: auto;
  padding: 0.75rem;
  border: 1px solid var(--course-rule);
  border-radius: 0.5rem;
  background: #ffffff;
}

.md-typeset img.scheduler-source-diagram {
  width: min(100%, 56rem);
}

.md-typeset figure.scheduler-source-comparison {
  display: block;
  width: min(100%, 60rem);
  margin: 1.5rem auto;
}

.md-typeset figure.scheduler-source-comparison p {
  margin: 0;
}

.md-typeset figure.scheduler-source-comparison img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--course-rule);
  border-radius: 0.5rem;
  background: #ffffff;
  cursor: zoom-in;
}

.md-typeset figure.scheduler-source-comparison.scheduler-source-portrait img {
  width: auto;
  max-width: 100%;
  max-height: 75svh;
  margin-inline: auto;
}

.md-typeset figure.scheduler-source-comparison figcaption {
  margin-top: 0.5rem;
  color: var(--md-default-fg-color--light);
  font-size: 0.75rem;
  font-style: normal;
}

.md-typeset figure.kubelet-diagram {
  width: min(100%, 60rem);
  margin: 1.5rem auto;
}

.md-typeset figure.kubelet-diagram p {
  margin: 0;
}

.md-typeset figure.kubelet-diagram img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--course-rule);
  border-radius: 0.5rem;
  background: #ffffff;
  cursor: zoom-in;
}

.md-typeset figure.kubelet-diagram figcaption {
  margin-top: 0.5rem;
  color: var(--md-default-fg-color--light);
  font-size: 0.75rem;
  font-style: normal;
}

.md-typeset img.runtime-stack-diagram {
  display: block;
  width: min(72%, 32rem);
  height: auto;
  margin-inline: auto;
  padding: 0.75rem;
  border: 1px solid var(--course-rule);
  border-radius: 0.5rem;
  background: #ffffff;
}

.md-typeset img.runtime-architecture-diagram,
.md-typeset img.runtime-wide-diagram,
.md-typeset img.runtime-medium-diagram,
.md-typeset img.runtime-performance-diagram {
  display: block;
  height: auto;
  margin-inline: auto;
  padding: 0.75rem;
  border: 1px solid var(--course-rule);
  border-radius: 0.5rem;
  background: #ffffff;
}

.md-typeset img.runtime-architecture-diagram,
.md-typeset img.runtime-wide-diagram {
  width: min(100%, 62rem);
}

.md-typeset img.runtime-medium-diagram {
  width: min(82%, 48rem);
}

.md-typeset img.runtime-performance-diagram {
  width: min(100%, 54rem);
}

.md-typeset .runtime-cri-sequence {
  width: min(80%, 48rem);
  margin: 1rem auto;
}

.md-typeset .runtime-cri-sequence .mermaid {
  margin: 0;
}

.md-typeset .scheduler-pod-flow {
  width: min(100%, 48rem);
  margin: 1rem auto;
}

.md-typeset .scheduler-pod-flow-queue {
  width: min(100%, 27rem);
}

.md-typeset .scheduler-pod-flow .mermaid {
  margin: 0;
}

.md-typeset div.scheduler-source-diagram {
  width: min(78%, 52rem);
  margin: 1rem auto;
}

.md-typeset div.scheduler-source-diagram-wide {
  width: min(85%, 60rem);
}

.md-typeset div.scheduler-source-diagram > .mermaid {
  margin: 0;
  cursor: zoom-in;
}

.md-typeset div.scheduler-source-diagram > .mermaid:focus-visible {
  outline: 0.15rem solid var(--md-accent-fg-color);
  outline-offset: 0.2rem;
}

.md-typeset div.scheduler-source-diagram > .mermaid:fullscreen {
  display: grid;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 2rem;
  overflow: auto;
  place-items: center;
  background: var(--course-paper);
  cursor: zoom-out;
}

.md-typeset div.scheduler-source-diagram > .mermaid:fullscreen svg {
  max-width: none;
  max-height: none;
}

.md-typeset img.storage-csi-component-diagram,
.md-typeset img.storage-architecture-diagram,
.md-typeset img.storage-wide-diagram {
  display: block;
  height: auto;
  margin-inline: auto;
  padding: 0.75rem;
  border: 1px solid var(--course-rule);
  border-radius: 0.5rem;
  background: #ffffff;
}

.md-typeset img.storage-csi-component-diagram {
  width: min(72%, 30rem);
}

.md-typeset img.storage-architecture-diagram {
  width: min(82%, 48rem);
}

.md-typeset img.storage-wide-diagram {
  width: min(100%, 60rem);
}

.md-typeset img.virtual-kubelet-diagram {
  display: block;
  width: min(100%, 56rem);
  height: auto;
  margin-inline: auto;
  padding: 0.75rem;
  border: 1px solid var(--course-rule);
  border-radius: 0.5rem;
  background: #ffffff;
}

.md-typeset img.network-performance-diagram,
.md-typeset img.network-architecture-diagram {
  display: block;
  height: auto;
  margin-inline: auto;
  padding: 0.75rem;
  border: 1px solid var(--course-rule);
  border-radius: 0.5rem;
  background: #ffffff;
}

.md-typeset img.network-performance-diagram {
  width: min(100%, 56rem);
}

.md-typeset img.network-architecture-diagram {
  width: min(88%, 52rem);
}

@media screen and (max-width: 48rem) {
  .md-typeset img.etcd-core-diagram,
  .md-typeset img.scheduler-framework-diagram,
  .md-typeset img.scheduler-source-diagram,
  .md-typeset img.runtime-stack-diagram,
  .md-typeset img.runtime-architecture-diagram,
  .md-typeset img.runtime-wide-diagram,
  .md-typeset img.runtime-medium-diagram,
  .md-typeset img.runtime-performance-diagram,
  .md-typeset img.storage-csi-component-diagram,
  .md-typeset img.storage-architecture-diagram,
  .md-typeset img.storage-wide-diagram,
  .md-typeset img.virtual-kubelet-diagram,
  .md-typeset img.network-performance-diagram,
  .md-typeset img.network-architecture-diagram,
  .md-typeset .runtime-cri-sequence,
  .md-typeset .scheduler-pod-flow,
  .md-typeset div.scheduler-source-diagram,
  .md-typeset div.scheduler-source-diagram-wide {
    width: 100%;
  }
}

.md-header {
  border-bottom: 1px solid var(--course-rule);
  background: var(--course-header);
  box-shadow: none;
  color: var(--course-ink);
}

.md-header--lifted {
  border-bottom: 0;
}

.md-header__inner {
  width: min(100%, var(--course-header-max-width));
  max-width: var(--course-header-max-width);
  min-height: var(--course-header-row-height);
  padding: 0 var(--course-header-gutter);
}

.md-header__button.md-logo {
  width: var(--course-brand-mark-size);
  height: var(--course-brand-mark-size);
  margin: 0 var(--course-brand-gap) 0 0;
  padding: 0;
}

.md-header__button.md-logo img {
  width: var(--course-brand-mark-size);
  height: var(--course-brand-mark-size);
  object-fit: contain;
}

.md-header__title {
  height: var(--course-header-row-height);
  margin-right: 0;
  margin-left: 0;
  font-size: 16px;
  line-height: normal;
}

.md-header__topic {
  height: 100%;
  align-items: center;
}

.md-header__topic:first-child .md-ellipsis {
  font-family: var(--course-brand-font);
  font-size: var(--course-brand-font-size);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.md-header__button,
.md-header__title,
.md-header__topic,
.md-header__topic:first-child {
  color: var(--course-ink);
}

@media screen and (max-width: 59.984375em) {
  .md-header__button.md-icon {
    width: var(--course-header-icon-button-size);
    height: var(--course-header-icon-button-size);
    margin: 0;
    padding: 11px;
  }

  .md-header__button.md-icon svg {
    width: var(--course-header-icon-size);
    height: var(--course-header-icon-size);
  }
}

@media screen and (min-width: 60em) {
  [dir="ltr"] .md-header__option {
    margin-right: 8px;
  }

  [dir="rtl"] .md-header__option {
    margin-left: 8px;
  }

  .md-header__option .md-header__button {
    width: var(--course-header-icon-button-size);
    height: var(--course-header-icon-button-size);
    margin: 0;
    padding: 11px;
  }

  .md-header__option .md-header__button svg {
    width: var(--course-header-icon-size);
    height: var(--course-header-icon-size);
  }

  .md-search {
    padding: 0;
  }

  .md-search__button {
    width: var(--course-header-search-width);
    height: var(--course-header-control-size);
    border-radius: 8px;
    font-size: 15px;
  }

  [dir="ltr"] .md-search__button {
    padding-right: 52px;
    padding-left: 46px;
  }

  [dir="rtl"] .md-search__button {
    padding-right: 46px;
    padding-left: 52px;
  }

  .md-search__button::before {
    top: 9px;
    width: var(--course-header-icon-size);
    height: var(--course-header-icon-size);
  }

  [dir="ltr"] .md-search__button::before {
    left: 12px;
  }

  [dir="rtl"] .md-search__button::before {
    right: 12px;
  }

  .md-search__button::after {
    top: 11px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 18px;
    padding: 0 6px;
  }

  [dir="ltr"] .md-search__button::after {
    right: 12px;
  }

  [dir="rtl"] .md-search__button::after {
    left: 12px;
  }

  .md-header__source {
    width: var(--course-header-source-width);
    max-width: var(--course-header-source-width);
  }

  [dir="ltr"] .md-header__source {
    margin-left: 24px;
  }

  [dir="rtl"] .md-header__source {
    margin-right: 24px;
  }

  .md-header .md-source {
    display: flex;
    min-height: 44px;
    align-items: center;
    font-size: var(--course-header-meta-font-size);
    line-height: 20px;
  }

  .md-header .md-source__icon {
    display: flex;
    width: 28px;
    height: 44px;
    flex: 0 0 28px;
    align-items: center;
  }

  .md-header .md-source__icon svg {
    width: 26px;
    height: 26px;
    margin: 0;
  }

  .md-header .md-source__repository {
    max-width: calc(100% - 36px);
  }

  [dir="ltr"] .md-header .md-source__icon + .md-source__repository {
    margin-left: 8px;
    padding-left: 0;
  }

  [dir="rtl"] .md-header .md-source__icon + .md-source__repository {
    margin-right: 8px;
    padding-right: 0;
  }
}

.md-tooltip2[role="tooltip"] > .md-tooltip2__inner {
  border-radius: var(--course-tooltip-radius);
  font-size: var(--course-tooltip-font-size);
  line-height: var(--course-tooltip-line-height);
  padding: var(--course-tooltip-padding-block) var(--course-tooltip-padding-inline);
}

.md-tabs {
  display: block;
  min-height: var(--course-tabs-row-height);
  border-bottom: 1px solid var(--course-rule);
  background: var(--course-header);
  box-shadow: none;
  color: var(--course-ink);
}

.md-tabs > .md-grid {
  width: min(100%, var(--course-header-max-width));
  max-width: var(--course-header-max-width);
  padding: 0 var(--course-header-gutter);
}

[dir="ltr"] .md-tabs__list,
[dir="rtl"] .md-tabs__list {
  margin: 0;
}

.md-tabs__list {
  gap: var(--course-tabs-gap);
}

.md-tabs__item {
  height: var(--course-tabs-item-height);
  padding: 0;
  border-bottom: 1px solid transparent;
}

.md-tabs__item--active {
  border-bottom-color: var(--course-ink);
  font-weight: 650;
}

.md-tabs__link {
  min-height: var(--course-tabs-item-height);
  align-items: center;
  margin: 0;
  color: var(--course-muted);
  font-size: 15px;
  font-weight: 500;
  opacity: 1;
}

.md-tabs__item--active .md-tabs__link,
.md-tabs__link:focus,
.md-tabs__link:hover {
  color: var(--course-ink);
}

@media screen and (min-width: 76.25em) {
  .md-header--lifted ~ .md-container .md-sidebar {
    top: var(--course-sticky-header-height);
  }
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  color: var(--course-ink);
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.md-typeset h2 {
  border-bottom: 0;
}

.md-typeset p,
.md-typeset li {
  text-wrap: pretty;
}

.md-typeset a:not(.course-home a) {
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.14em;
}

.md-typeset code {
  border-radius: 0.3rem;
}

.md-typeset pre > code {
  border: 0;
  border-radius: 0.5rem;
}

.md-typeset .cgroup-directory-tree .hll {
  /* 保持树线字符的常规字宽，用描影加重重点行，避免粗体字形导致错位。 */
  text-shadow: 0.02em 0 currentColor, -0.02em 0 currentColor;
}

.md-typeset table:not([class]) {
  border: 1px solid var(--course-rule);
  border-radius: 0.5rem;
  box-shadow: none;
  overflow: hidden;
}

.md-typeset .admonition,
.md-typeset details {
  border-radius: 0.5rem;
  box-shadow: none;
}

body:has(.course-home) {
  background: var(--course-paper);
}

body:has(.course-home) .md-footer {
  display: none;
}

.md-main__inner:has(.course-home),
.md-content:has(.course-home),
.md-content__inner:has(.course-home) {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.md-main:has(.course-home) {
  padding: 0;
}

.course-home {
  width: 100%;
  min-width: 0;
  margin: -0.4rem 0 0;
  color: var(--course-ink);
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.course-home,
.course-home * {
  box-sizing: border-box;
}

.course-home a {
  color: inherit;
  text-decoration: none;
}

.course-home a:focus-visible {
  border-radius: 0.2rem;
  outline: 3px solid rgb(82 108 254 / 38%);
  outline-offset: 4px;
}

.course-page {
  width: min(100%, 80rem);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3.4vw, 3rem) 1rem;
}

.course-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(20rem, 0.85fr);
  gap: clamp(1.75rem, 3.2vw, 3rem);
  align-items: center;
  padding: clamp(2rem, 3.4vw, 3rem) clamp(0rem, 1.6vw, 1.5rem) clamp(2.5rem, 4.6vw, 3.2rem);
}

.course-hero h1 {
  margin: 0;
  color: var(--course-ink);
  font-size: clamp(3.2rem, 5vw, 4.15rem);
  font-weight: 800;
  letter-spacing: -0.046em;
  line-height: 1.04;
}

.course-hero__deck {
  max-width: 39rem;
  margin: 1.55rem 0 0;
  color: var(--course-ink);
  font-size: clamp(1rem, 1.45vw, 1.13rem);
  font-weight: 450;
  line-height: 1.75;
}

.course-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.1rem;
  align-items: center;
  margin: 1.35rem 0 0;
  color: var(--course-link);
  font-size: 0.96rem;
  line-height: 1.5;
}

.course-hero__stats strong {
  color: inherit;
  font-weight: 740;
}

.course-hero__stats span {
  color: var(--course-muted);
}

.course-mastery {
  margin: 0;
  padding: 1.25rem 1.35rem 1.2rem;
  border: 1px solid var(--course-rule);
  background: var(--course-surface);
}

.course-mastery h2 {
  margin: 0 0 1.15rem;
  color: var(--course-ink);
  font-size: 1rem;
  font-weight: 760;
  letter-spacing: -0.01em;
}

.course-mastery ul,
.course-audience ul {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.course-mastery li,
.course-audience li {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: 0.58rem;
  align-items: start;
  margin: 0;
  color: var(--course-ink);
  font-size: 0.86rem;
  line-height: 1.55;
}

.course-list__icon {
  display: inline-flex;
  width: 0.92rem;
  height: 0.92rem;
  margin-top: 0.12rem;
  color: var(--course-primary);
}

.course-list__icon img,
.course-list__icon svg {
  width: 100%;
  height: 100%;
}

.course-list__text {
  min-width: 0;
}

.course-curriculum {
  scroll-margin-top: 1.25rem;
}

.course-section-heading {
  display: flex;
  min-height: 5.15rem;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 0.72rem 0 0.72rem 1.1rem;
  border-bottom: 1px solid var(--course-rule-strong);
  border-left: 0.34rem solid var(--course-primary);
}

.course-section-heading h2 {
  margin: 0;
  color: var(--course-ink);
  font-size: 1.4rem;
  font-weight: 760;
  letter-spacing: -0.025em;
}

.course-section-heading p {
  margin: 0.32rem 0 0;
  color: var(--course-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.course-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  color: var(--course-ink);
  font-size: 0.8rem;
}

.course-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.course-status-dot {
  display: inline-block;
  width: 0.58rem;
  height: 0.58rem;
  background: var(--course-soon);
}

.course-status-dot--open {
  background: var(--course-open);
}

.course-roadmap {
  width: 100%;
}

.course-roadmap__head,
.course-stage {
  display: grid;
  grid-template-columns: minmax(13rem, 0.9fr) minmax(21rem, 1.25fr) minmax(18rem, 1fr);
}

.course-roadmap__head {
  min-height: 2.8rem;
  align-items: center;
  border-bottom: 1px solid var(--course-rule-strong);
}

.course-roadmap__head span {
  padding: 0 1.15rem;
  color: var(--course-ink);
  font-size: 0.82rem;
  font-weight: 720;
}

.course-stage {
  border-bottom: 1px solid var(--course-rule);
}

.course-stage--open {
  min-height: 12.25rem;
}

.course-stage:nth-of-type(2) {
  min-height: 9.375rem;
}

.course-stage > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 1.4rem 1.15rem;
}

.course-stage > div + div {
  border-left: 1px solid var(--course-rule);
}

.course-stage__identity {
  display: grid !important;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  gap: 0.85rem;
  align-content: center;
  align-items: start;
}

.course-stage__number {
  color: var(--course-primary);
  font-family: var(--md-code-font);
  font-size: 2.5rem;
  font-weight: 350;
  letter-spacing: -0.06em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.course-stage__identity > div {
  display: flex;
  align-self: stretch;
  flex-direction: column;
  justify-content: center;
  padding-left: 0.85rem;
  border-left: 1px solid var(--course-rule);
}

.course-stage__identity h3 {
  margin: 0;
  color: var(--course-ink);
  font-size: 1.08rem;
  font-weight: 760;
  letter-spacing: -0.018em;
  line-height: 1.42;
}

.course-stage__identity p {
  margin: 0.72rem 0 0;
  color: var(--course-ink);
  font-size: 0.88rem;
  line-height: 1.45;
}

.course-stage__chapters ol {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.course-stage__chapters li {
  display: grid;
  grid-template-columns: 1.45rem minmax(0, 1fr);
  gap: 0.5rem;
  margin: 0;
  color: var(--course-ink);
}

.course-stage__chapters li > span {
  padding-top: 0.02rem;
  color: var(--course-muted);
  font-family: var(--md-code-font);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.course-stage__chapters li > div {
  display: grid;
  gap: 0;
}

.course-stage__chapters small {
  color: var(--course-muted);
  font-size: 0.75rem;
  line-height: 1.2;
}

.course-stage__chapters strong,
.course-stage__chapters a {
  color: var(--course-ink) !important;
  font-size: 0.85rem;
  font-weight: 540;
  line-height: 1.45;
}

.course-stage__chapters .is-open > span,
.course-stage__chapters .is-open small {
  color: var(--course-open);
  font-weight: 720;
}

.course-stage__chapters .is-open a {
  color: var(--course-ink) !important;
  font-weight: 700;
}

.course-stage__chapters a:hover {
  color: var(--course-link) !important;
}

.course-stage__topics p {
  margin: 0;
  color: var(--course-ink);
  font-size: 0.85rem;
  line-height: 1.72;
}

.course-audience-method {
  display: grid;
  grid-template-columns: minmax(0, 0.93fr) minmax(0, 1.07fr);
  gap: 1.35rem;
  padding-top: 1.35rem;
}

.course-audience,
.course-method {
  border: 1px solid var(--course-rule);
  background: var(--course-surface);
  padding: 1.15rem 1.35rem;
}

.course-audience h2,
.course-method h2 {
  display: flex;
  align-items: center;
  gap: 0.58rem;
  margin: 0 0 1.15rem;
  color: var(--course-ink);
  font-size: 1.08rem;
  font-weight: 760;
  letter-spacing: -0.02em;
}

.course-audience h2 > span,
.course-method h2 > span {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--course-primary);
}

.course-audience h2 img,
.course-method h2 img,
.course-audience h2 svg,
.course-method h2 svg {
  width: 100%;
  height: 100%;
}

.course-audience ul {
  gap: 0.58rem;
}

.course-audience li {
  font-size: 0.84rem;
}

.course-method {
  scroll-margin-top: 1rem;
}

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

.course-method__items > div {
  min-width: 0;
  padding: 0 1.05rem;
}

.course-method__items > div:first-child {
  padding-left: 0;
}

.course-method__items > div:last-child {
  padding-right: 0;
}

.course-method__items > div + div {
  border-left: 1px solid var(--course-rule);
}

.course-method__items > div > span {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--course-primary);
}

.course-method__items img,
.course-method__items svg {
  width: 100%;
  height: 100%;
}

.course-method__items h3 {
  margin: 0.72rem 0 0;
  color: var(--course-ink);
  font-size: 0.9rem;
  font-weight: 740;
  line-height: 1.45;
}

.course-method__items p {
  margin: 0.5rem 0 0;
  color: var(--course-muted);
  font-size: 0.8rem;
  line-height: 1.65;
}

@media (max-width: 70rem) {
  .course-roadmap__head,
  .course-stage {
    grid-template-columns: minmax(12rem, 0.9fr) minmax(18rem, 1.2fr) minmax(15rem, 1fr);
  }

  .course-stage > div,
  .course-roadmap__head span {
    padding-right: 0.85rem;
    padding-left: 0.85rem;
  }

  .course-stage__identity {
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: 0.65rem;
  }

  .course-stage__number {
    font-size: 2rem;
  }
}

@media (min-width: 55.01rem) {
  .course-hero h1 {
    white-space: nowrap;
  }
}

@media (max-width: 55rem) {
  .course-hero {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.75fr);
    gap: 2.4rem;
  }

  .course-roadmap__head {
    display: none;
  }

  .course-roadmap {
    display: grid;
    gap: 1rem;
    padding-top: 1rem;
  }

  .course-stage {
    grid-template-columns: minmax(12rem, 0.8fr) minmax(15rem, 1.2fr);
    border: 1px solid var(--course-rule);
    background: var(--course-surface);
  }

  .course-stage > div + div {
    border-left: 1px solid var(--course-rule);
  }

  .course-stage__topics {
    grid-column: 1 / -1;
    border-top: 1px solid var(--course-rule);
    border-left: 0 !important;
  }

  .course-stage__chapters::before,
  .course-stage__topics::before {
    margin-bottom: 0.8rem;
    color: var(--course-muted);
    font-size: 0.75rem;
    font-weight: 720;
    letter-spacing: 0.08em;
  }

  .course-stage__chapters::before {
    content: "章节";
  }

  .course-stage__topics::before {
    content: "主题与关键内容";
  }

  .course-audience-method {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 48rem) {
  .md-tabs {
    min-height: 49px;
  }

  .md-path:not([hidden]) {
    display: none;
  }

  .md-tabs__item,
  .md-tabs__link {
    min-height: 48px;
    height: 48px;
  }

  .md-tabs__link {
    font-size: 14px;
  }

  .course-hero {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 3.8rem 0 3.5rem;
  }

  .course-hero__deck br {
    display: none;
  }

  .course-mastery {
    padding: 1.25rem;
  }

  .course-section-heading {
    align-items: flex-start;
    flex-direction: column;
    min-height: 0;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
  }

  .course-section-heading {
    display: flex;
  }

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

  .course-stage > div + div {
    border-top: 1px solid var(--course-rule);
    border-left: 0;
  }

  .course-stage__identity {
    grid-template-columns: 3.25rem minmax(0, 1fr);
  }

  .course-stage__topics {
    border-left: 0 !important;
  }

  .course-method__items {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .course-method__items > div,
  .course-method__items > div:first-child,
  .course-method__items > div:last-child {
    padding: 0;
  }

  .course-method__items > div + div {
    padding-top: 1rem;
    border-top: 1px solid var(--course-rule);
    border-left: 0;
  }
}

@media (max-width: 30rem) {
  .md-tabs > .md-grid,
  .course-page {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .course-hero h1 {
    font-size: clamp(2.45rem, 12vw, 3.2rem);
  }

  .course-hero__stats {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }

  .course-hero__stats span {
    display: none;
  }

  .course-stage > div {
    padding: 1.3rem 1rem;
  }

  .course-audience,
  .course-method {
    padding: 1.2rem 1rem;
  }
}

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

  .md-tabs__item--active,
  .md-tabs__link {
    transition: none;
  }
}

@media print {
  .md-tabs {
    display: none;
  }
}