/*
 * Wiki 正文排版与组件。
 * 前半是新设计词汇（term / case / duo / steps / quiz 等，全局可用，Landing 也复用）；
 * 后半是既有课程组件在同一套 token 下的皮肤（ scoped 到 .wiki-article ）。
 */

/* ============ 面包屑与页头 ============ */
.crumb-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}

.crumb {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.06em;
  color: var(--mut);
  display: flex;
  flex: 1 1 280px;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.crumb b {
  color: var(--watcha-deep);
  font-weight: 500;
}

.copy-btn {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line-2);
  background: var(--paper);
  border-radius: 8px;
  padding: 7px 13px;
  font-size: var(--t-ui);
  color: var(--ink-2);
  transition: 0.2s;
  white-space: nowrap;
}

.copy-btn svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.copy-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.copy-btn.done {
  border-color: var(--watcha);
  color: var(--watcha-deep);
  background: var(--watcha-soft);
}

/* ============ 正文排版 ============ */
.wiki-article {
  color: var(--ink-2);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}

.wiki-article > *:first-child,
.wiki-article section > *:first-child {
  margin-top: 0;
}

.wiki-article section > *:last-child {
  margin-bottom: 0;
}

.wiki-article h1 {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: var(--t-display);
  line-height: var(--lh-title);
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}

.standfirst,
.wiki-article .standfirst {
  font-family: var(--font-serif);
  font-size: var(--t-lead);
  color: var(--ink-2);
  line-height: var(--lh-lead);
  border-left: 3px solid var(--red);
  padding-left: 18px;
  margin: 24px 0 22px;
}

.meta-row,
.wiki-article .meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.08em;
  color: var(--mut);
  padding: 13px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}

.meta-row span {
  display: flex;
  align-items: center;
}

.meta-row span + span::before {
  content: "·";
  margin: 0 12px;
  color: var(--line-2);
}

.meta-row i {
  font-style: normal;
  color: var(--watcha);
  margin-right: 6px;
}

.wiki-article .speaker-card {
  display: flex;
  gap: 13px;
  align-items: center;
  margin: 18px 0 24px;
  padding: 5px 0;
}

.wiki-article .speaker-card__portrait {
  display: block;
  width: 52px;
  height: 52px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 9px;
  object-fit: cover;
}

.wiki-article .speaker-card .speaker-card__bio {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-comp);
  line-height: var(--lh-comp);
}

.wiki-article .speaker-card__bio b {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--t-cardtitle);
  font-weight: 900;
}

.wiki-article section {
  margin-top: 8px;
}

.wiki-article h2 {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: var(--t-h2);
  letter-spacing: 0.02em;
  line-height: var(--lh-title);
  color: var(--ink);
  margin: 58px 0 6px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  scroll-margin-top: 150px;
  position: relative;
}

.wiki-article h2 .no {
  font-family: var(--font-gara);
  font-style: italic;
  font-weight: 600;
  font-size: var(--t-body);
  color: var(--red);
  flex: none;
}

.h-anchor,
.wiki-article .h-anchor {
  opacity: 0;
  color: var(--watcha);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-h3);
  transition: 0.2s;
  flex: none;
  align-self: center;
  text-decoration: none;
}

.wiki-article h2:hover .h-anchor,
.wiki-article h2 .h-anchor:focus-visible {
  opacity: 1;
}

.wiki-article h3 {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: var(--t-h3);
  line-height: var(--lh-title);
  color: var(--ink);
  margin: 30px 0 4px;
  scroll-margin-top: 150px;
}

.wiki-article h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--t-cardtitle);
  line-height: var(--lh-title);
  color: var(--ink);
  margin: 24px 0 4px;
}

.wiki-article p {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: #2c2820;
  margin: 18px 0;
}

.wiki-article p b,
.wiki-article li b,
.wiki-article p strong,
.wiki-article li strong {
  font-weight: 700;
  color: var(--ink);
}

.wiki-article ul,
.wiki-article ol {
  margin: 14px 0 22px;
  padding-left: 24px;
}

.wiki-article li {
  margin: 8px 0;
  padding-left: 2px;
  line-height: var(--lh-body);
}

.wiki-article li > p {
  margin: 4px 0;
}

.wiki-article blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--line-2);
  color: var(--ink-2);
}

.wiki-article blockquote p {
  margin: 8px 0;
}

.wiki-article hr {
  height: 1px;
  margin: 48px 0;
  border: 0;
  background: var(--line);
}

.wiki-article img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.wiki-article figure {
  margin: 26px 0;
}

.wiki-article figure img {
  display: block;
  width: 100%;
}

.wiki-article .media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  margin: 26px 0;
}

.wiki-article .media-grid figure {
  min-width: 0;
  margin: 0;
}

.wiki-article figure.figure--portrait {
  width: min(100%, 520px);
  margin-inline: auto;
}

.wiki-article .media-grid figure.figure--portrait {
  width: 100%;
}

.wiki-article wiki-presentation {
  display: block;
}

.wiki-article wiki-presentation > [data-presentation-fallback] {
  margin: 24px 0 32px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--mut);
  background: var(--card);
  font-family: var(--font-sans);
  font-size: var(--t-ui);
  line-height: var(--lh-body);
  text-align: center;
}

/* 主站视频播放器的服务端可读占位；播放器本体由按需 Vue island 接管。 */
.wiki-article watcha-video-player {
  display: block;
  width: 100%;
}

.wiki-article watcha-video-player[ratio="9:16"] {
  width: min(100%, 420px);
  margin-inline: auto;
}

.wiki-article watcha-video-player [data-video-fallback] {
  display: flex;
  width: 100%;
  min-height: 220px;
  aspect-ratio: 16 / 9;
  margin: 24px 0 32px;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.72);
  background: var(--ink-surface);
  font-family: var(--font-sans);
  font-size: var(--t-comp);
  line-height: var(--lh-comp);
  text-align: center;
}

.wiki-article watcha-video-player[ratio="4:3"] [data-video-fallback] {
  aspect-ratio: 4 / 3;
}

.wiki-article watcha-video-player[ratio="9:16"] [data-video-fallback] {
  aspect-ratio: 9 / 16;
}

.wiki-article watcha-video-player [data-video-fallback][hidden] {
  display: none;
}

/*
 * 运行态播放器与编辑器 / 无脚本占位共用这一份正文组件样式。
 * 主站播放器内部的 Tailwind 与 Shaka 样式仍由按需客户端包提供。
 */
.wiki-article .wiki-video {
  width: 100%;
  margin: 24px 0 32px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-2);
}

.wiki-article .wiki-video--portrait {
  width: min(100%, 420px);
  margin-inline: auto;
}

/*
 * auins VideoPlayer 内部使用的少量 Tailwind utility 映射。
 * 它们和播放器外框一起留在正文样式事实源中，并限定在 .wiki-video 内，
 * 避免引入主站全局 theme / reset 后覆盖 Wiki 的排版 token。
 */
.wiki-article .wiki-video .relative {
  position: relative;
}

.wiki-article .wiki-video .absolute {
  position: absolute;
}

.wiki-article .wiki-video .inset-0 {
  inset: 0;
}

.wiki-article .wiki-video .right-0 {
  right: 0;
}

.wiki-article .wiki-video .top-3 {
  top: 0.75rem;
}

.wiki-article .wiki-video .z-20 {
  z-index: 20;
}

.wiki-article .wiki-video .flex {
  display: flex;
}

.wiki-article .wiki-video .h-full,
.wiki-article .wiki-video .size-full {
  height: 100%;
}

.wiki-article .wiki-video .w-full,
.wiki-article .wiki-video .size-full {
  width: 100%;
}

.wiki-article .wiki-video .w-\[84px\] {
  width: 84px;
}

.wiki-article .wiki-video .min-w-\[104px\] {
  min-width: 104px;
}

.wiki-article .wiki-video .items-center {
  align-items: center;
}

.wiki-article .wiki-video .justify-center {
  justify-content: center;
}

.wiki-article .wiki-video .overflow-hidden {
  overflow: hidden;
}

.wiki-article .wiki-video .rounded-md {
  border-radius: 0.375rem;
}

.wiki-article .wiki-video .bg-black {
  background: #000;
}

.wiki-article .wiki-video .bg-black\/60 {
  background: rgba(0, 0, 0, 0.6);
}

.wiki-article .wiki-video .px-3 {
  padding-inline: 0.75rem;
}

.wiki-article .wiki-video .px-4 {
  padding-inline: 1rem;
}

.wiki-article .wiki-video .text-center {
  text-align: center;
}

.wiki-article .wiki-video .text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.wiki-article .wiki-video .text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.wiki-article .wiki-video .text-white {
  color: #fff;
}

.wiki-article .wiki-video .break-words {
  overflow-wrap: break-word;
}

.wiki-article .wiki-video .object-contain {
  object-fit: contain;
}

.wiki-article .wiki-video .pointer-events-none {
  pointer-events: none;
}

/*
 * 主站清晰度菜单在窄视频里保持紧凑，但选项之间需要明确留白，避免多个
 * 圆角表面贴成一整块。这里只调整宿主视觉，不复制播放器交互。
 */
.wiki-article .wiki-video .quality-menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
}

.wiki-article .wiki-video .quality-option {
  min-height: 34px;
  padding-block: 4px;
  border-radius: 8px;
}

.wiki-article .wiki-video .line-clamp-2 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.wiki-article .wiki-video__stage {
  position: relative;
  width: 100%;
  min-height: 220px;
  overflow: hidden;
  contain: layout paint;
  isolation: isolate;
  color: rgba(255, 255, 255, 0.78);
  background: var(--ink-surface);
}

.wiki-article .wiki-video__player,
.wiki-article .wiki-video__stage iframe,
.wiki-article .wiki-video__stage .shaka-video-container {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.wiki-article .wiki-video__stage > div.wiki-video__player:not(.shaka-video-container) {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: var(--font-sans);
  font-size: var(--t-comp);
  line-height: var(--lh-comp);
  text-align: center;
}

.wiki-article .wiki-video__state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  color: rgba(255, 255, 255, 0.78);
  background: var(--ink-surface);
  font-family: var(--font-sans);
  font-size: var(--t-comp);
  line-height: var(--lh-comp);
  text-align: center;
}

.wiki-article .wiki-video__state--login,
.wiki-article .wiki-video__state--preview {
  padding: 0;
}

.wiki-article .wiki-video__cover {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  object-fit: cover;
  opacity: 1;
}

.wiki-article .wiki-video--portrait .wiki-video__cover {
  object-fit: contain;
}

.wiki-article .wiki-video__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(15, 15, 15, 0.38);
}

.wiki-article .wiki-video__state-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
}

.wiki-article .wiki-video__state p {
  margin: 0;
  color: inherit;
}

.wiki-article .wiki-video__state--login p,
.wiki-article .wiki-video__state--preview p {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
}

.wiki-article .wiki-video__state button {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 8px;
  color: #fff;
  background: rgba(15, 15, 15, 0.72);
  font-family: var(--font-sans);
  font-size: var(--t-ui);
  font-weight: 650;
}

.wiki-article .wiki-video__state button:hover {
  border-color: rgba(255, 255, 255, 0.62);
  background: rgba(15, 15, 15, 0.88);
}

.wiki-article .wiki-video__state .wiki-video__play-button {
  display: inline-flex;
  width: 58px;
  height: 58px;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-color: rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  color: #fff;
  background: rgba(15, 15, 15, 0.7);
}

.wiki-article .wiki-video__play-button:hover {
  transform: scale(1.04);
}

.wiki-article .wiki-video__play-icon {
  display: block;
  width: 26px;
  height: 26px;
  transform: translateX(1px);
  fill: currentColor;
}

.wiki-article .wiki-video__state button:focus-visible {
  outline: 3px solid var(--watcha-soft);
  outline-offset: 3px;
}

.wiki-article .wiki-video__caption {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 14px 12px;
  color: var(--mut);
  background: var(--paper-2);
  font-family: var(--font-sans);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
}

.wiki-article .wiki-video__caption strong {
  flex: none;
  color: var(--ink-2);
  font-weight: 650;
}

@media (max-width: 560px) {
  .wiki-article .wiki-video {
    margin-block: 20px 28px;
    border-radius: 9px;
  }

  .wiki-article .wiki-video__stage,
  .wiki-article watcha-video-player [data-video-fallback] {
    min-height: 180px;
  }

  .wiki-article .wiki-video__caption {
    display: block;
  }

  .wiki-article .wiki-video__caption strong {
    display: block;
  }

  .wiki-article .wiki-video__state .wiki-video__play-button {
    width: 52px;
    height: 52px;
    min-height: 52px;
  }

  .wiki-article .wiki-video__play-icon {
    width: 23px;
    height: 23px;
  }
}

.wiki-article figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.06em;
  color: var(--mut);
  text-align: center;
}

.wiki-article figure.meme {
  width: 100%;
  max-width: 50%;
  margin-inline: auto;
  text-align: center;
}

.wiki-article figure.meme > img {
  width: auto;
  max-width: 50%;
  margin-inline: auto;
  border: none;
  border-radius: 14px;
}

.wiki-article img[data-popup="true"] {
  cursor: zoom-in;
}

.wiki-article img[data-popup="true"]:focus-visible {
  outline: 2px solid var(--ink-2);
  outline-offset: 4px;
}

.wiki-article kbd {
  display: inline-flex;
  min-width: 24px;
  min-height: 22px;
  align-items: center;
  justify-content: center;
  padding: 1px 7px;
  border: 1px solid var(--line-2);
  border-radius: 5px;
  color: var(--ink-2);
  background: var(--card);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  line-height: 18px;
}

.wiki-article code,
.wiki-article .inline-code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 5px;
  padding: 2px 7px;
  color: var(--red-deep);
  white-space: nowrap;
  overflow-wrap: anywhere;
}

.wiki-article pre code {
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  white-space: pre;
}

.wiki-article a {
  color: var(--ink);
  font-weight: 700;
  border-bottom: 1.5px solid var(--watcha);
  transition: 0.2s;
  padding-bottom: 1px;
  text-decoration: none;
}

.wiki-article a:hover {
  color: var(--watcha-deep);
  background: var(--watcha-soft);
}

.wiki-article button.inl {
  appearance: none;
  border: 0;
  border-bottom: 1.5px solid var(--watcha);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  line-height: inherit;
  padding: 0 0 1px;
  cursor: pointer;
  transition: 0.2s;
}

.wiki-article button.inl:hover {
  color: var(--watcha-deep);
  background: var(--watcha-soft);
}

/* ============ 高亮块：术语卡 / 案例卡（整块浅色表面，不用单侧边框） ============ */
.term,
.wiki-article .term {
  margin: 26px 0;
  background: var(--watcha-soft);
  border-radius: 12px;
  padding: 18px 22px;
}

.term .t-label,
.wiki-article .term .t-label {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.14em;
  color: var(--watcha-deep);
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
}

.term .t-label::before,
.wiki-article .term .t-label::before {
  content: "✦";
  font-size: var(--t-mono);
}

.term p,
.wiki-article .term p {
  margin: 0;
  font-size: var(--t-comp);
  line-height: var(--lh-comp);
  color: var(--ink-2);
}

.term p + p,
.wiki-article .term p + p {
  margin-top: 8px;
}

.term a,
.wiki-article .term a {
  border-bottom-color: var(--watcha-deep);
}

.case,
.wiki-article .case {
  margin: 26px 0;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 12px;
  padding: 20px 22px;
}

.case .c-label,
.wiki-article .case .c-label {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.14em;
  color: var(--red);
  margin-bottom: 9px;
}

.case p,
.wiki-article .case p {
  margin: 0;
  font-size: var(--t-comp);
  line-height: var(--lh-comp);
  color: var(--ink-2);
}

.case p + p,
.wiki-article .case p + p {
  margin-top: 8px;
}

.case blockquote,
.wiki-article .case blockquote {
  margin: 12px 0;
  padding: 12px 16px;
  border-left: none;
  border-radius: 9px;
  background: var(--paper-2);
  font-family: var(--font-mono);
  font-size: var(--t-ui);
  line-height: var(--lh-comp);
  color: var(--ink-2);
}

.case blockquote p,
.wiki-article .case blockquote p {
  font-size: var(--t-ui);
  line-height: var(--lh-comp);
}

/* ============ 课末术语卡片 ============ */
.term-cards,
.wiki-article .term-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 26px 0;
}

.term-cards .tc,
.wiki-article .term-cards .tc {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-2);
  transition: 0.25s;
}

.term-cards .tc:hover,
.wiki-article .term-cards .tc:hover {
  border-color: var(--watcha-line);
  transform: translateY(-2px);
}

.term-cards .tc img,
.wiki-article .term-cards .tc img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
}

.term-cards .tc img.term-card-image--portrait,
.wiki-article .term-cards .tc img.term-card-image--portrait {
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: var(--card);
}

.term-cards .tc figcaption,
.wiki-article .term-cards .tc figcaption {
  margin: 0;
  padding: 14px 16px 16px;
  text-align: left;
}

.term-cards .tc b,
.wiki-article .term-cards .tc b {
  display: block;
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: var(--t-cardtitle);
  color: var(--ink);
}

.term-cards .tc span,
.wiki-article .term-cards .tc span {
  display: block;
  margin-top: 4px;
  font-size: var(--t-comp);
  line-height: var(--lh-comp);
  color: var(--ink-2);
  letter-spacing: normal;
}

/* ============ 双平权卡 ============ */
.duo,
.wiki-article .duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 28px 0;
}

.duo .d,
.wiki-article .duo .d {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 12px;
  padding: 22px;
  transition: 0.3s;
}

.duo .d:hover,
.wiki-article .duo .d:hover {
  transform: translateY(-3px);
  border-color: var(--watcha-line);
}

.d-head,
.wiki-article .d-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.d-k,
.wiki-article .d-k {
  width: 30px;
  height: 30px;
  border: 1px solid var(--watcha-line);
  background: var(--watcha-soft);
  color: var(--watcha-deep);
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: var(--t-body);
  flex: none;
}

.d-head h4,
.wiki-article .d-head h4 {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: var(--t-cardtitle);
  margin: 0;
  color: var(--ink);
}

.duo .d p,
.wiki-article .duo .d p {
  margin: 0;
  font-size: var(--t-comp);
  line-height: var(--lh-comp);
  color: var(--ink-2);
}

/* ============ 引文 ============ */
.pull,
.wiki-article .pull {
  margin: 30px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--red);
  font-family: var(--font-serif);
  font-size: var(--t-lead);
  font-weight: 700;
  line-height: var(--lh-lead);
  color: var(--ink);
}

/* ============ 表格 ============ */
.tbl,
.wiki-article .tbl {
  width: 100%;
  border-collapse: collapse;
  margin: 26px 0;
  font-size: var(--t-comp);
}

.tbl th,
.wiki-article .tbl th {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.12em;
  color: var(--mut);
  font-weight: 500;
  text-align: left;
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--line-2);
}

.tbl td,
.wiki-article .tbl td {
  padding: 13px 14px 13px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: var(--lh-comp);
  color: var(--ink-2);
}

.tbl td:first-child,
.wiki-article .tbl td:first-child {
  font-family: var(--font-mono);
  font-size: var(--t-ui);
  white-space: nowrap;
  color: var(--watcha-deep);
  font-weight: 500;
}

/* ============ 步骤 ============ */
.steps,
.wiki-article .steps {
  margin: 26px 0;
}

.step,
.wiki-article .step {
  display: flex;
  gap: 15px;
  padding: 13px 0;
  position: relative;
}

.step i,
.wiki-article .step i {
  font-style: normal;
  flex: none;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: var(--t-ui);
  font-weight: 700;
  color: var(--watcha-deep);
  background: var(--watcha-soft);
  position: relative;
  z-index: 1;
}

.step:not(:last-child)::before,
.wiki-article .step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 44px;
  bottom: -4px;
  width: 1px;
  background: var(--line);
}

.step div b,
.wiki-article .step div b {
  display: block;
  font-size: var(--t-comp);
  line-height: var(--lh-comp);
  margin-bottom: 2px;
  color: var(--ink);
}

.step div p,
.wiki-article .step div p {
  margin: 0;
  font-size: var(--t-comp);
  color: var(--ink-2);
  line-height: var(--lh-comp);
}

/* ============ 直播横幅 ============ */
.banner,
.wiki-article .banner {
  margin: 30px 0;
  background: var(--ink-surface);
  color: var(--ink-surface-text);
  border-radius: 14px;
  padding: 26px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.banner .b-label,
.wiki-article .banner .b-label {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.14em;
  color: #8ddb6b;
  display: flex;
  align-items: center;
  gap: 7px;
}

.banner .b-label::before,
.wiki-article .banner .b-label::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--watcha);
  border-radius: 50%;
  animation: blink 1.6s infinite;
}

.banner h4,
.wiki-article .banner h4 {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: var(--t-h3);
  margin: 8px 0 5px;
  color: var(--ink-surface-text);
}

.banner h4 span,
.wiki-article .banner h4 span {
  color: var(--red-soft);
}

.banner p,
.wiki-article .banner p {
  margin: 0;
  font-size: var(--t-ui);
  color: rgba(234, 228, 214, 0.6);
  line-height: var(--lh-ui);
}

.banner a,
.banner button,
.wiki-article .banner button,
.wiki-article .banner a {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--red);
  color: #fdf9f0;
  font-size: var(--t-ui);
  font-weight: 500;
  padding: 12px 22px;
  border-radius: 9px;
  transition: 0.25s;
  border: 0;
  border-bottom: none;
  font-family: inherit;
  cursor: pointer;
}

.banner a:hover,
.banner button:hover,
.wiki-article .banner button:hover,
.wiki-article .banner a:hover {
  background: var(--red-deep);
  transform: translateY(-2px);
  color: #fdf9f0;
}

/* ============ 新劝学书函 ============ */
.classic,
.wiki-article .classic {
  margin: 30px 0;
  border: 1px solid var(--ink);
  background: var(--paper);
  border-radius: 4px;
  box-shadow:
    0 0 0 6px var(--paper),
    0 0 0 7px var(--line-2);
  padding: 40px 30px;
  text-align: justify;
  text-justify: inter-ideograph;
}

.classic p,
.wiki-article .classic p {
  font-family: var(--font-serif);
  font-size: var(--t-cardtitle);
  letter-spacing: 0.1em;
  line-height: var(--lh-body);
  margin: 0;
  color: var(--ink-2);
  text-align: justify;
  text-justify: inter-ideograph;
}

.classic .c-lead,
.wiki-article .classic .c-lead {
  font-size: var(--t-h2);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: 0.16em;
  margin-bottom: 8px;
}

.classic em,
.wiki-article .classic em {
  font-style: normal;
  color: var(--red);
  font-weight: 700;
}

.colophon,
.wiki-article .colophon {
  margin-top: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.colophon .sign,
.wiki-article .colophon .sign {
  font-family: var(--font-serif);
  font-size: var(--t-mono);
  letter-spacing: 0.3em;
  color: var(--mut);
}

.seal,
.wiki-article .seal {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--red);
  color: #f8f3e8;
  border-radius: 5px;
  transform: rotate(-4deg);
}

.seal::after,
.wiki-article .seal::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(248, 243, 232, 0.5);
  border-radius: 3px;
}

.seal span,
.wiki-article .seal span {
  writing-mode: vertical-rl;
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: var(--t-mono);
  letter-spacing: 0.15em;
  line-height: 1;
}

/* ============ 互动题 ============ */
.quiz,
.wiki-article .quiz {
  margin: 32px 0;
}

.quiz-q,
.wiki-article .quiz-q {
  padding: 0;
}

.quiz-q + .quiz-q,
.wiki-article .quiz-q + .quiz-q {
  margin-top: 32px;
}

.q-title,
.wiki-article .q-title {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: var(--t-cardtitle);
  color: var(--ink);
  margin-bottom: 16px;
  display: flex;
  gap: 13px;
  align-items: baseline;
  line-height: var(--lh-ui);
}

.q-no,
.wiki-article .q-no {
  font-family: var(--font-gara);
  font-size: var(--t-body);
  font-style: italic;
  font-weight: 600;
  color: var(--red);
  flex: none;
}

.q-opts,
.wiki-article .q-opts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 16px;
}

.q-opts button,
.wiki-article .q-opts button {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  min-height: 44px;
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--t-comp);
  line-height: var(--lh-comp);
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--ink-2);
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.q-opts button:hover:not(:disabled),
.wiki-article .q-opts button:hover:not(:disabled) {
  background: var(--card);
}

.q-opts button:focus-visible,
.wiki-article .q-opts button:focus-visible {
  outline: 2px solid var(--watcha-deep);
  outline-offset: 2px;
}

.q-choice,
.wiki-article .q-choice {
  display: grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 4px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--paper-2);
  color: transparent;
  font-size: var(--t-ui);
  font-weight: 700;
  line-height: 1;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.quiz-q[data-multiple='true'] .q-choice,
.wiki-article .quiz-q[data-multiple='true'] .q-choice {
  border-radius: 4px;
}

.q-option-label,
.wiki-article .q-option-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.q-opts button.correct,
.wiki-article .q-opts button.correct,
.q-opts button[aria-pressed='true']:not(.correct):not(.wrong),
.wiki-article .q-opts button[aria-pressed='true']:not(.correct):not(.wrong) {
  background: var(--watcha-soft);
  border-color: var(--watcha-line);
  color: var(--watcha-deep);
}

.q-opts button:is(.correct, [aria-pressed='true']) .q-choice,
.wiki-article .q-opts button:is(.correct, [aria-pressed='true']) .q-choice {
  border-color: var(--watcha-deep);
  background: var(--watcha-deep);
  color: var(--paper-2);
}

.q-submit,
.wiki-article .q-submit {
  margin-top: 16px;
}

.q-opts button.wrong,
.wiki-article .q-opts button.wrong {
  border-color: var(--red);
  color: var(--red);
  animation: shk 0.45s;
}

@keyframes shk {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6px);
  }
  45% {
    transform: translateX(5px);
  }
  70% {
    transform: translateX(-3px);
  }
}

.quiz-q.solved .q-opts button,
.wiki-article .quiz-q.solved .q-opts button {
  pointer-events: none;
  opacity: 0.45;
}

.quiz-q.solved .q-opts button.correct,
.wiki-article .quiz-q.solved .q-opts button.correct {
  opacity: 1;
}

.q-fb,
.wiki-article .q-fb {
  margin-top: 12px;
  font-size: var(--t-ui);
}

.q-fb:empty,
.wiki-article .q-fb:empty {
  display: none;
}

.q-fb.ok,
.wiki-article .q-fb.ok {
  color: var(--watcha-deep);
  font-weight: 500;
}

.q-fb.bad,
.wiki-article .q-fb.bad {
  color: var(--red);
}

.q-done,
.wiki-article .q-done {
  padding-top: 16px;
  display: none;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: 0.5s;
}

.q-done.show,
.wiki-article .q-done.show {
  display: flex;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.q-done p,
.wiki-article .q-done p {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--t-cardtitle);
  margin: 0;
  color: var(--ink);
}

.q-done p span,
.wiki-article .q-done p span {
  color: var(--red);
}

.q-done a,
.wiki-article .q-done a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--ink);
  color: var(--paper-2);
  font-size: var(--t-ui);
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 9px;
  transition: 0.25s;
  border-bottom: none;
}

.q-done a:hover,
.wiki-article .q-done a:hover {
  background: var(--watcha-deep);
  color: var(--paper-2);
}

/* ============ 上下页 ============ */
.pn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 40px;
}

.pn a {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  background: var(--card);
  transition: 0.25s;
  display: block;
}

.pn a:hover {
  border-color: var(--watcha);
  transform: translateY(-3px);
}

.pn a.is-navigation-locked {
  cursor: not-allowed;
  color: var(--mut);
}

.pn a.is-navigation-locked:hover {
  border-color: var(--line);
  transform: none;
}

.pn .dir {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.18em;
  color: var(--mut);
}

.pn .t {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--t-body);
  color: var(--ink);
  margin-top: 7px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.pn .nx {
  text-align: right;
}

.pn .nx .t {
  flex-direction: row-reverse;
}

/*
 * ============ 既有课程组件的新皮肤 ============
 * 以下 class 来自 ai-game / demo 的真实页面，结构不变，只按 token 重做表面。
 */

.wiki-article .lesson-hero {
  padding: 0;
}

.wiki-article .eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.14em;
  color: var(--mut);
  text-transform: uppercase;
}

.wiki-article .eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--watcha);
  border-radius: 2px;
  flex: none;
}

.wiki-article .lead {
  font-family: var(--font-serif);
  font-size: var(--t-lead);
  color: var(--ink-2);
  line-height: var(--lh-lead);
  margin: 18px 0 0;
  text-wrap: pretty;
}

.wiki-article .lesson-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  margin-top: 20px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.wiki-article .lesson-meta span {
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.08em;
  color: var(--mut);
}

.wiki-article .lesson-meta span + span::before {
  content: "·";
  margin: 0 12px;
  color: var(--line-2);
}

/* 卡片网格家族 */
.wiki-article :is(
  .outcome-grid,
  .question-grid,
  .outline-grid,
  .lab-grid,
  .compare-grid,
  .responsibility-grid,
  .genre-grid,
  .scenario-grid,
  .feedback-stack,
  .component-state-grid
) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 24px 0 0;
}

.wiki-article :is(
  .outcome-grid,
  .genre-grid,
  .scenario-grid,
  .feedback-stack,
  .component-state-grid
) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wiki-article :is(
  .outcome-grid,
  .question-grid,
  .outline-grid,
  .lab-grid,
  .compare-grid,
  .responsibility-grid,
  .genre-grid,
  .scenario-grid,
  .feedback-stack,
  .component-state-grid
) > article,
.wiki-article .lab-card {
  min-width: 0;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.wiki-article :is(
  .outcome-grid,
  .question-grid,
  .outline-grid,
  .lab-grid,
  .genre-grid,
  .scenario-grid,
  .feedback-stack
) strong,
.wiki-article .lab-card strong {
  display: block;
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: var(--t-cardtitle);
  color: var(--ink);
  line-height: var(--lh-title);
}

.wiki-article :is(
  .outcome-grid,
  .question-grid,
  .outline-grid,
  .lab-grid,
  .genre-grid,
  .scenario-grid,
  .feedback-stack
) p,
.wiki-article .lab-card p {
  margin: 8px 0 0;
  color: var(--ink-2);
  font-size: var(--t-comp);
  line-height: var(--lh-comp);
}

.wiki-article .lab-card small,
.wiki-article .compare-card small {
  display: block;
  margin-bottom: 9px;
  font-family: var(--font-mono);
  color: var(--mut);
  font-size: var(--t-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.wiki-article .lab-card--live {
  border-color: var(--watcha-line);
  background: var(--watcha-soft);
}

.wiki-article .lab-card a {
  display: inline-block;
  margin-top: 12px;
  font-size: var(--t-ui);
}

.wiki-article .compare-card p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-comp);
  line-height: var(--lh-comp);
}

.wiki-article .compare-card--weak {
  background: rgba(191, 58, 38, 0.05);
}

.wiki-article .compare-card--strong,
.wiki-article .responsibility-grid article:last-child {
  border-color: var(--watcha-line);
  background: var(--watcha-soft);
}

.wiki-article .responsibility-grid ul {
  margin: 10px 0 0;
  color: var(--ink-2);
  font-size: var(--t-comp);
}

/* 提示与宣言 */
.wiki-article watcha-callout {
  display: block;
  margin: 24px 0;
  background: var(--watcha-soft);
  border-radius: 12px;
  padding: 18px 22px;
  color: var(--ink-2);
  font-size: var(--t-comp);
  line-height: var(--lh-comp);
}

.wiki-article watcha-callout[type='warning'] {
  border-color: rgba(191, 58, 38, 0.35);
  background: rgba(191, 58, 38, 0.06);
}

.wiki-article watcha-callout[type='exercise'] {
  border-style: dashed;
}

.wiki-article watcha-callout strong {
  color: var(--ink);
}

.wiki-article .statement-card {
  margin: 30px 0;
  border: 1px solid var(--ink);
  background: var(--paper);
  border-radius: 4px;
  box-shadow:
    0 0 0 6px var(--paper),
    0 0 0 7px var(--line-2);
  padding: 34px 30px;
  text-align: center;
}

.wiki-article .statement-card p {
  font-family: var(--font-serif);
  font-size: var(--t-cardtitle);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: var(--lh-body);
  margin: 0;
  color: var(--ink);
}

.wiki-article .statement-card small {
  display: block;
  margin-top: 14px;
  font-family: var(--font-mono);
  color: var(--mut);
  font-size: var(--t-mono);
  letter-spacing: 0.1em;
  line-height: var(--lh-comp);
}

/* 流程与编号 */
.wiki-article :is(.concept-flow, .loop-diagram, .state-flow) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow-x: auto;
  margin: 24px 0;
  padding: 22px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.wiki-article .concept-flow--wrap {
  flex-wrap: wrap;
}

.wiki-article :is(.concept-flow, .loop-diagram, .state-flow) span {
  flex: none;
  padding: 6px 12px;
  border: 1px solid var(--watcha-line);
  border-radius: 8px;
  color: var(--watcha-deep);
  background: var(--watcha-soft);
  font-family: var(--font-serif);
  font-size: var(--t-ui);
  font-weight: 700;
}

.wiki-article :is(.concept-flow, .loop-diagram, .state-flow) i {
  color: var(--mut);
  font-style: normal;
}

.wiki-article .principle-list {
  margin-top: 24px;
  border-block: 1px solid var(--line);
}

.wiki-article .principle-list article {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.wiki-article .principle-list article:last-child {
  border-bottom: 0;
}

.wiki-article :is(.principle-index, .stage-map article > span, .lesson-roadmap > a > span) {
  font-family: var(--font-gara);
  font-style: italic;
  font-weight: 600;
  font-size: var(--t-body);
  color: var(--red);
  line-height: var(--lh-title);
}

.wiki-article .principle-list h3 {
  margin: 0 0 2px;
  font-size: var(--t-cardtitle);
  font-weight: 700;
  line-height: var(--lh-title);
}

.wiki-article .principle-list .principle-index {
  padding-top: 3px;
  color: var(--red-soft);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 24px;
}

.wiki-article .principle-list p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-comp);
  line-height: var(--lh-comp);
}

.wiki-article .stage-map {
  display: grid;
  overflow: hidden;
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.wiki-article .stage-map article {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  padding: 17px 18px;
  border-bottom: 1px solid var(--line);
}

.wiki-article .stage-map article:last-child {
  border-bottom: 0;
}

.wiki-article .stage-map strong {
  color: var(--ink);
  font-size: var(--t-comp);
}

.wiki-article .stage-map p {
  margin: 3px 0 0;
  color: var(--ink-2);
  font-size: var(--t-comp);
  line-height: var(--lh-comp);
}

.wiki-article .stage-map--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wiki-article .stage-map--compact article:nth-child(odd) {
  border-right: 1px solid var(--line);
}

.wiki-article .stage-map--compact article:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.wiki-article .lesson-roadmap {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.wiki-article .lesson-roadmap a {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: inherit;
  border-bottom: 1px solid var(--line);
  transition: 0.2s;
}

.wiki-article .lesson-roadmap a:hover {
  border-color: var(--watcha-line);
  background: var(--watcha-soft);
  transform: translateY(-2px);
}

.wiki-article .lesson-roadmap strong {
  color: var(--ink);
  font-size: var(--t-comp);
}

.wiki-article .lesson-roadmap p {
  margin: 3px 0 0;
  color: var(--mut);
  font-size: var(--t-comp);
  line-height: var(--lh-comp);
}

.wiki-article .template-sheet {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.wiki-article .template-sheet > div {
  min-height: 88px;
  padding: 16px 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.wiki-article .template-sheet > div:nth-child(2n) {
  border-right: 0;
}

.wiki-article .template-sheet > div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.wiki-article .template-sheet strong {
  color: var(--ink);
  font-size: var(--t-comp);
}

.wiki-article .template-sheet p {
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: var(--t-comp);
  line-height: var(--lh-comp);
}

.wiki-article .budget-row {
  display: grid;
  grid-template-columns: 92px 96px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-ui);
}

.wiki-article .budget-row strong {
  color: var(--watcha-deep);
  font-family: var(--font-mono);
  font-size: var(--t-ui);
}

.wiki-article .budget-row p {
  margin: 0;
  color: var(--ink-2);
}

/* 步骤与清单 */
.wiki-article .checklist,
.wiki-article .step-list {
  margin: 20px 0 0;
  padding-left: 0;
  list-style: none;
}

.wiki-article .checklist li,
.wiki-article .step-list li {
  margin: 0;
  padding: 12px 0 12px 34px;
  border-bottom: 1px solid var(--line);
  position: relative;
  line-height: var(--lh-comp);
  font-size: var(--t-comp);
}

.wiki-article .checklist li::before {
  content: "✓";
  position: absolute;
  left: 4px;
  top: 13px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--watcha-soft);
  color: var(--watcha-deep);
  font-size: var(--t-mono);
  font-weight: 700;
}

.wiki-article .step-list {
  counter-reset: wiki-step;
}

.wiki-article .step-list li {
  counter-increment: wiki-step;
}

.wiki-article .step-list li::before {
  content: counter(wiki-step);
  position: absolute;
  left: 0;
  top: 12px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--watcha-soft);
  color: var(--watcha-deep);
  font-family: var(--font-serif);
  font-size: var(--t-ui);
  font-weight: 700;
}

.wiki-article .step-list li strong {
  display: block;
  color: var(--ink);
  font-size: var(--t-comp);
}

.wiki-article .step-list li p {
  margin: 2px 0 0;
  color: var(--ink-2);
  font-size: var(--t-comp);
  line-height: var(--lh-comp);
}

/* 任务卡与判断卡 */
.wiki-article :is(.brief-card, .decision-card, .practice-panel, .example-progress) {
  margin: 24px 0;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.wiki-article .decision-card {
  border-color: var(--watcha-line);
  background: var(--watcha-soft);
}

.wiki-article :is(.brief-card, .decision-card) p {
  margin: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-comp);
  line-height: var(--lh-comp);
  color: var(--ink-2);
}

.wiki-article :is(.brief-card, .decision-card) p:last-child {
  border-bottom: 0;
}

.wiki-article :is(.practice-panel, .example-progress) > small {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  color: var(--mut);
  font-size: var(--t-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.wiki-article :is(.practice-panel, .example-progress) h3 {
  margin: 0 0 6px;
}

.wiki-article :is(.practice-panel, .example-progress) > :last-child {
  margin-bottom: 0;
}

.wiki-article .diagnosis-list {
  margin-top: 20px;
  border-top: 1px solid var(--line);
}

.wiki-article .diagnosis-list article {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.wiki-article .diagnosis-list strong {
  color: var(--ink);
  font-size: var(--t-comp);
}

.wiki-article .diagnosis-list p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-comp);
  line-height: var(--lh-comp);
}

.wiki-article .prediction-reveal {
  margin: 24px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.wiki-article .prediction-reveal summary {
  padding: 14px 18px;
  color: var(--ink);
  font-size: var(--t-comp);
  font-weight: 700;
  cursor: pointer;
}

.wiki-article .prediction-reveal[open] summary {
  border-bottom: 1px solid var(--line);
}

.wiki-article .prediction-reveal > div {
  padding: 16px 18px;
  color: var(--ink-2);
  font-size: var(--t-comp);
}

.wiki-article .prediction-reveal > div > :last-child {
  margin-bottom: 0;
}

.wiki-article .token-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.wiki-article .token-strip span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--watcha-deep);
  font-size: var(--t-mono);
  font-weight: 700;
}

.wiki-article .visual-test {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 24px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.wiki-article .visual-test span {
  display: grid;
  min-height: 86px;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  color: var(--ink);
  background: var(--paper-2);
  font-size: var(--t-ui);
  font-weight: 700;
  text-align: center;
}

.wiki-article .visual-test span:nth-child(2) {
  border-radius: 50%;
  color: #fff;
  background: var(--ink-2);
}

.wiki-article .visual-test span:nth-child(3) {
  color: #fff;
  background: var(--red);
  transform: rotate(3deg);
}

.wiki-article .visual-test span:nth-child(4) {
  color: var(--watcha-deep);
  background: var(--watcha-soft);
}

.wiki-article .event-timeline {
  margin: 24px 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  list-style: none;
}

.wiki-article .event-timeline li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  margin: 0;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}

.wiki-article .event-timeline li:last-child {
  border-bottom: 0;
}

.wiki-article .event-timeline time {
  color: var(--watcha-deep);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
}

.wiki-article .event-timeline p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-comp);
  line-height: var(--lh-comp);
}

/* 表格家族 */
.wiki-article .docs-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 26px 0;
  scrollbar-color: var(--line-2) transparent;
  scrollbar-width: thin;
}

.wiki-article :is(.docs-table, .metric-table, .evidence-table) {
  width: 100%;
  margin: 26px 0;
  border: 0;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: var(--t-comp);
  line-height: var(--lh-comp);
  table-layout: auto;
}

.wiki-article .docs-table-wrap > :is(.docs-table, .metric-table, .evidence-table) {
  margin: 0;
}

.wiki-article .docs-table--reference {
  min-width: 720px;
}

.wiki-article :is(.docs-table, .metric-table, .evidence-table) thead {
  border-bottom: 1px solid var(--line-2);
}

.wiki-article :is(.docs-table, .metric-table, .evidence-table) tbody tr {
  border-bottom: 1px solid var(--line);
}

.wiki-article :is(.docs-table, .metric-table, .evidence-table) th,
.wiki-article :is(.docs-table, .metric-table, .evidence-table) td {
  min-width: 0;
  padding: 11px 28px 11px 0;
  border: 0;
  text-align: left;
  vertical-align: top;
}

.wiki-article :is(.docs-table, .metric-table, .evidence-table) th {
  padding-top: 0;
  padding-bottom: 10px;
  font-family: var(--font-mono);
  color: var(--mut);
  background: transparent;
  font-size: var(--t-mono);
  letter-spacing: 0.12em;
  font-weight: 500;
}

.wiki-article :is(.docs-table, .metric-table, .evidence-table) th:last-child,
.wiki-article :is(.docs-table, .metric-table, .evidence-table) td:last-child {
  padding-right: 0;
}

.wiki-article :is(.docs-table, .metric-table, .evidence-table) code {
  display: inline-block;
  white-space: nowrap;
}

.wiki-article .docs-table--definition th:first-child,
.wiki-article .docs-table--definition td:first-child {
  width: 36%;
}

.wiki-article .docs-table--compact th:first-child,
.wiki-article .docs-table--compact td:first-child {
  width: 34%;
}

.wiki-article .docs-term {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  color: var(--ink-2);
  background: var(--card);
  font-family: var(--font-mono);
  font-size: 0.86em;
  font-weight: 500;
  line-height: 1.45;
}

/* 端点与代码 */
.wiki-article .docs-endpoint {
  display: flex;
  min-width: 0;
  min-height: 46px;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
}

.wiki-article .docs-endpoint__method {
  flex: none;
  color: var(--watcha-deep);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 700;
}

.wiki-article .docs-endpoint code {
  overflow: hidden;
  min-width: 0;
  flex: 1;
  color: var(--ink-2);
  font-size: var(--t-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wiki-article .docs-endpoint__note {
  flex: none;
  color: var(--mut);
  font-size: var(--t-mono);
}

.wiki-article .docs-code,
.wiki-article .code-sample {
  position: relative;
  overflow: hidden;
  margin: 26px 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}

.wiki-article .docs-code__toolbar {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px 0 14px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}

.wiki-article .docs-code__tabs {
  display: flex;
  min-width: 0;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.wiki-article .docs-code__tabs::-webkit-scrollbar {
  display: none;
}

.wiki-article .docs-code__tabs button,
.wiki-article .docs-code__copy {
  min-height: 30px;
  border: 0;
  border-radius: 7px;
  color: var(--mut);
  background: transparent;
  font-size: var(--t-ui);
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
}

.wiki-article .docs-code__tabs button {
  min-height: 43px;
  flex: none;
  padding: 0 8px;
  text-decoration-color: transparent;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 14px;
}

.wiki-article .docs-code__tabs button:hover,
.wiki-article .docs-code__copy:hover {
  color: var(--ink);
}

.wiki-article .docs-code__tabs button[aria-selected='true'] {
  color: var(--watcha-deep);
  background: transparent;
  text-decoration-color: var(--watcha);
}

.wiki-article .docs-code__copy {
  display: inline-flex;
  min-width: 96px;
  min-height: 32px;
  flex: none;
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border: 1px solid var(--line-2);
  background: var(--paper-2);
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}

.wiki-article .docs-code__copy:disabled {
  cursor: wait;
}

.wiki-article .docs-code__copy[data-copy-state='success'] {
  color: var(--watcha-deep);
  border-color: var(--watcha-line);
  background: var(--watcha-soft);
}

.wiki-article .docs-code__copy[data-copy-state='error'] {
  color: var(--red);
  border-color: var(--red);
}

.wiki-article .docs-code__copy svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  flex: none;
}

.wiki-article .docs-code__copy span {
  white-space: nowrap;
}

.wiki-article .docs-code__copy[data-copy-state='success'] svg {
  animation: code-copy-confirm 0.24s ease-out;
}

@keyframes code-copy-confirm {
  from { opacity: 0; transform: scale(0.75); }
  to { opacity: 1; transform: scale(1); }
}

.wiki-article .docs-code pre,
.wiki-article .code-sample {
  max-height: none;
  overflow: auto;
  margin: 0;
  padding: 20px 0 22px;
  color: var(--ink-2);
  background: var(--card);
  font-family: var(--font-mono);
  font-size: var(--t-ui);
  line-height: 24px;
  scrollbar-color: var(--line-2) transparent;
  scrollbar-width: thin;
  tab-size: 2;
}

.wiki-article .code-sample {
  margin: 22px 0;
  padding: 16px 18px;
  white-space: pre;
  display: block;
}

.wiki-article .docs-code pre[hidden] {
  display: none;
}

.wiki-article .docs-code pre code {
  display: block;
  min-width: max-content;
  font-size: inherit;
  line-height: inherit;
}

/* 只有带行号的包装结构需要消除标签间空白；普通提示词必须直接可读。 */
.wiki-article .docs-code pre code:has(.code-line) {
  font-size: 0;
  line-height: 0;
}

.wiki-article .docs-code pre code:not(:has(.code-line)) {
  padding-inline: 24px;
}

.wiki-article .code-line {
  display: grid;
  min-height: 24px;
  grid-template-columns: 56px minmax(0, 1fr);
  font-size: var(--t-ui);
  line-height: 24px;
}

.wiki-article .code-line:hover {
  background: var(--paper-2);
}

.wiki-article .code-line__number {
  padding-right: 18px;
  color: var(--mut);
  text-align: right;
  user-select: none;
}

.wiki-article .code-line__content {
  padding-right: 56px;
  white-space: pre;
}

.wiki-article .docs-code--prose pre code {
  min-width: 0;
}

.wiki-article .docs-code--prose pre code:not(:has(.code-line)) {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.wiki-article .docs-code--prose .code-line__content {
  min-width: 0;
  padding-right: 24px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.wiki-article .docs-code--plain .docs-code__toolbar {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  min-height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
}

.wiki-article .docs-code--plain pre {
  padding-top: 18px;
}

.wiki-article .docs-code[data-code-collapsible='true'][data-code-expanded='false'] pre:not([hidden]) {
  max-height: calc(var(--docs-code-collapse-lines, 8) * 24px + 20px);
  overflow-y: hidden;
}

.wiki-article .docs-code__expand {
  min-height: 42px;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
}

.wiki-article .docs-code__expand[hidden] {
  display: none;
}

.wiki-article .docs-code__expand button {
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 0;
  color: var(--ink-2);
  background: transparent;
  font-size: var(--t-ui);
  font-weight: 500;
  cursor: pointer;
}

.wiki-article .docs-code__expand button:hover {
  color: var(--ink);
  background: var(--card);
}

.wiki-article .docs-code__expand svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  transition: transform 160ms ease;
}

.wiki-article .docs-code[data-code-expanded='true'] .docs-code__expand svg {
  transform: rotate(180deg);
}

.wiki-article .token-keyword,
.wiki-article .token-boolean {
  color: var(--red-deep);
}

.wiki-article .token-string {
  color: var(--watcha-deep);
}

.wiki-article .token-property,
.wiki-article .token-tag,
.wiki-article .token-function {
  color: #376c91;
}

.wiki-article .token-number {
  color: #98582f;
}

.wiki-article .token-comment {
  color: var(--mut);
  font-style: italic;
}

.wiki-article .token-operator,
.wiki-article .token-punctuation {
  color: var(--ink-2);
}

/* 按钮与状态 */
.wiki-article :is(.hero-actions, .component-control-row, .status-chip-row) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 24px 0 0;
}

.wiki-article :is(.primary-link, .secondary-link, .component-button) {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  color: var(--ink-2);
  background: var(--paper-2);
  font-size: var(--t-ui);
  font-weight: 500;
  line-height: 1.45;
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  cursor: pointer;
}

.wiki-article :is(.primary-link, .component-button--primary) {
  border-color: var(--ink);
  color: var(--paper-2);
  background: var(--ink);
}

.wiki-article :is(.secondary-link, .component-button):hover {
  border-color: var(--ink);
  color: var(--ink);
}

.wiki-article :is(.primary-link, .component-button--primary):hover {
  border-color: var(--watcha-deep);
  color: var(--paper-2);
  background: var(--watcha-deep);
}

.wiki-article .component-button--soft {
  border-color: var(--watcha-line);
  color: var(--watcha-deep);
  background: var(--watcha-soft);
}

.wiki-article .component-button:disabled {
  border-color: var(--line);
  color: var(--mut);
  background: var(--card);
  cursor: not-allowed;
}

.wiki-article .status-chip {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink-2);
  background: var(--paper-2);
  font-size: var(--t-mono);
  font-weight: 500;
  line-height: var(--lh-title);
  white-space: nowrap;
}

.wiki-article .status-chip--success {
  border-color: var(--watcha-line);
  color: var(--watcha-deep);
  background: var(--watcha-soft);
}

.wiki-article .status-chip--warning {
  border-color: rgba(191, 58, 38, 0.35);
  color: var(--red-deep);
  background: rgba(191, 58, 38, 0.06);
}

.wiki-article .status-chip--danger {
  border-color: var(--red);
  color: #fff;
  background: var(--red);
}

/* 表单与骨架（demo 展厅用） */
.wiki-article .component-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 20px 0;
}

.wiki-article .component-form-grid label {
  display: grid;
  gap: 7px;
}

.wiki-article .component-form-grid label > span {
  color: var(--ink-2);
  font-size: var(--t-ui);
  font-weight: 600;
}

.wiki-article .component-form-grid :is(input, select, textarea) {
  width: 100%;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  outline: 0;
  color: var(--ink);
  background: var(--paper-2);
  font-size: var(--t-ui);
}

.wiki-article .component-form-grid :is(input, select) {
  min-height: 42px;
  padding: 8px 11px;
}

.wiki-article .component-form-grid textarea {
  min-height: 108px;
  padding: 10px 11px;
  line-height: var(--lh-ui);
  resize: vertical;
}

.wiki-article .component-form-grid :is(input, select, textarea):focus {
  border-color: var(--watcha);
  outline: 3px solid var(--watcha-soft);
}

.wiki-article .component-state-grid article {
  display: grid;
  min-height: 148px;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.wiki-article .component-skeleton {
  display: grid;
  width: 100%;
  gap: 8px;
  margin-bottom: 16px;
}

.wiki-article .component-skeleton span {
  height: 9px;
  border-radius: 999px;
  background: var(--line);
}

.wiki-article .component-skeleton span:nth-child(2) {
  width: 82%;
}

.wiki-article .component-skeleton span:nth-child(3) {
  width: 58%;
}

.wiki-article .interaction-detail-list {
  display: grid;
  gap: 12px;
  margin: 20px 0;
}

.wiki-article .interaction-detail-list > article {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.wiki-article .interaction-detail-list header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wiki-article .interaction-detail-list header code {
  color: var(--mut);
  font-size: var(--t-mono);
}

.wiki-article .interaction-detail-list h3 {
  margin: 12px 0 4px;
}

.wiki-article .interaction-detail-list > article > p {
  margin: 0 0 12px;
  color: var(--ink-2);
  font-size: var(--t-comp);
  line-height: var(--lh-comp);
}

.wiki-article .interaction-detail-list dl {
  margin: 0;
  border-top: 1px solid var(--line);
}

.wiki-article .interaction-detail-list dl > div {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
}

.wiki-article .interaction-detail-list dt {
  color: var(--mut);
}

.wiki-article .interaction-detail-list dd {
  margin: 0;
  color: var(--ink-2);
}

/* 字号标本（demo 展厅用） */
.wiki-article .type-specimen {
  overflow: hidden;
  margin: 20px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.wiki-article .type-specimen__row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 20px;
  align-items: baseline;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.wiki-article .type-specimen__row:last-child {
  border-bottom: 0;
}

.wiki-article .type-specimen__row > small {
  color: var(--mut);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
}

.wiki-article .type-specimen__row :is(h1, h2, h3, h4, p) {
  margin: 0;
}

.wiki-article :is(.type-h1, .type-h2, .type-h3, .type-h4) {
  color: var(--ink);
  font-family: var(--font-serif);
  font-weight: 900;
  text-wrap: pretty;
}

.wiki-article .type-h1 {
  font-size: var(--t-display);
  line-height: var(--lh-title);
}

.wiki-article .type-h2 {
  font-size: var(--t-h2);
  line-height: var(--lh-title);
}

.wiki-article .type-h3 {
  font-size: var(--t-h3);
  line-height: var(--lh-title);
}

.wiki-article .type-h4 {
  font-size: var(--t-cardtitle);
  line-height: var(--lh-title);
}

.wiki-article .docs-kbd {
  display: inline-flex;
  min-width: 24px;
  min-height: 22px;
  align-items: center;
  justify-content: center;
  padding: 1px 7px;
  border: 1px solid var(--line-2);
  border-radius: 5px;
  color: var(--ink-2);
  background: var(--card);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  line-height: 18px;
}

.wiki-article .docs-quote {
  margin: 24px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--line-2);
  color: var(--ink-2);
}

.wiki-article .docs-quote > :last-child {
  margin-bottom: 0;
}

.wiki-article .docs-divider {
  height: 1px;
  margin: 48px 0;
  border: 0;
  background: var(--line);
}

.wiki-article .interaction-index {
  margin-top: 24px;
}

.wiki-article .type-caption {
  margin-top: 8px;
  color: var(--mut);
  font-size: var(--t-mono);
  line-height: var(--lh-ui);
}

/* ============ 登录内容门 ============ */
.wiki-gated-content {
  display: contents;
}

.wiki-gated-content[hidden],
.wiki-gate-wall[hidden] {
  display: none !important;
}

.wiki-gate-wall {
  margin: 30px 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  padding: 36px 30px;
  text-align: center;
}

.wiki-gate-wall svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--watcha-deep);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wiki-gate-wall h3 {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: var(--t-h3);
  color: var(--ink);
  margin: 12px 0 6px;
}

.wiki-gate-wall p {
  margin: 0 auto 20px;
  max-width: 380px;
  font-size: var(--t-comp);
  line-height: var(--lh-comp);
  color: var(--ink-2);
}

.wiki-gate-wall button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--ink);
  color: var(--paper-2);
  font-size: var(--t-ui);
  font-weight: 500;
  padding: 11px 22px;
  border-radius: 9px;
  transition: 0.25s;
}

.wiki-gate-wall button:hover {
  background: var(--watcha-deep);
  transform: translateY(-1px);
}

/* ============ 响应式 ============ */
@media (max-width: 839px) {
  .meta-row,
  .wiki-article .meta-row {
    justify-content: flex-start;
    gap: 6px 14px;
  }

  .meta-row span + span::before {
    content: none;
    margin: 0;
  }

  .wiki-article figure.meme {
    max-width: 100%;
  }

  .wiki-article figure.meme > img {
    max-width: 25%;
  }

  .wiki-article h2 {
    font-size: var(--t-h2);
    margin-top: 48px;
  }

  .wiki-article :is(
    .outcome-grid,
    .question-grid,
    .outline-grid,
    .lab-grid,
    .compare-grid,
    .responsibility-grid,
    .genre-grid,
    .scenario-grid,
    .feedback-stack,
    .stage-map--compact,
    .template-sheet,
    .media-grid,
    .component-form-grid,
    .component-state-grid
  ) {
    grid-template-columns: 1fr;
  }

  .wiki-article .speaker-card {
    align-items: flex-start;
    gap: 11px;
    padding: 3px 0;
  }

  .wiki-article .speaker-card__portrait {
    width: 46px;
    height: 46px;
  }

  .duo,
  .wiki-article .duo {
    grid-template-columns: 1fr;
  }

  .term-cards,
  .wiki-article .term-cards {
    grid-template-columns: 1fr;
  }

  .q-opts,
  .wiki-article .q-opts {
    grid-template-columns: 1fr;
  }

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

  .banner,
  .wiki-article .banner {
    padding: 22px;
  }

  .wiki-article .stage-map--compact article,
  .wiki-article .stage-map--compact article:nth-child(odd),
  .wiki-article .stage-map--compact article:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .wiki-article .stage-map--compact article:last-child {
    border-bottom: 0;
  }

  .wiki-article .template-sheet > div,
  .wiki-article .template-sheet > div:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .wiki-article .template-sheet > div:last-child {
    border-bottom: 0;
  }

  .wiki-article .visual-test {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wiki-article :is(.docs-table, .metric-table, .evidence-table) {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
  }

  .wiki-article .budget-row {
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
  }

  .wiki-article .budget-row p {
    grid-column: 1 / -1;
  }

  .wiki-article .diagnosis-list article {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .wiki-article :is(.concept-flow, .loop-diagram, .state-flow) {
    justify-content: flex-start;
  }

  .wiki-article .type-specimen__row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

@media (max-width: 520px) {
  .wiki-article .docs-table-wrap {
    width: calc(100% + 40px);
    margin-inline: -20px;
    padding-inline: 20px;
  }

  .wiki-article .docs-code {
    border-radius: 12px;
  }

  .wiki-article .docs-code__toolbar {
    padding-inline: 8px;
  }

  .wiki-article .event-timeline li {
    grid-template-columns: 54px minmax(0, 1fr);
  }
}

/* ================================================================
   Project-level collections: Treasure Vault + Term Card Library
   数据来自 content/shared，Demo 与后续正式入口复用同一套 runtime。
   ================================================================ */

.wiki-article wiki-term-library,
.wiki-article wiki-treasure-vault,
.wiki-article watcha-community-composer,
.wiki-article watcha-course-discussion {
  display: block;
  margin: 24px 0 8px;
}

.wiki-article .collection-fallback,
.wiki-article .trusted-component-fallback {
  display: grid;
  gap: 4px;
  min-height: 112px;
  place-content: center;
  padding: 24px;
  border: 1px solid var(--line-2);
  border-radius: var(--wiki-radius-lg);
  color: var(--ink-2);
  background: var(--paper-2);
  text-align: center;
}

.wiki-article .collection-fallback strong,
.wiki-article .trusted-component-fallback strong {
  color: var(--ink);
  font-size: var(--t-cardtitle);
}

.wiki-article .collection-fallback p,
.wiki-article .trusted-component-fallback p {
  margin: 0;
  font-size: var(--t-ui);
}

.collection-search {
  display: flex;
  min-width: 0;
  flex: 1 1 320px;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 7px 11px;
  border: 1px solid var(--line-2);
  border-radius: var(--wiki-radius-md);
  color: var(--ink-2);
  background: var(--paper-2);
}

.collection-search:focus-within {
  border-color: var(--watcha);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--watcha) 14%, transparent);
}

.collection-search svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.collection-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--t-ui);
}

.collection-search input::placeholder {
  color: var(--mut);
}

.collection-search--compact {
  flex: 0 1 260px;
}

.collection-empty {
  margin: 14px 0 0 !important;
  padding: 22px;
  border: 1px dashed var(--line-2);
  border-radius: var(--wiki-radius-md);
  color: var(--mut) !important;
  background: var(--card);
  text-align: center;
}

.term-library__tools,
.treasure-vault__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.term-library__tools > p {
  margin: 0 !important;
  color: var(--mut) !important;
  font-family: var(--font-mono);
  font-size: var(--t-mono) !important;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.term-library__tools > p strong {
  color: var(--watcha-deep);
}

.term-library__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.term-library-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--wiki-radius-lg);
  color: var(--ink);
  background: var(--paper-2);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.term-library-card:hover {
  border-color: var(--watcha-line);
  background: var(--watcha-soft);
  transform: translateY(-2px);
}

.term-library-card:focus-visible {
  outline: 2px solid var(--watcha);
  outline-offset: 3px;
}

.term-library-card__visual {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  border-radius: var(--wiki-radius-md);
  background: white;
}

.term-library-card__visual img {
  width: 100%;
  height: 100%;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover;
}

.term-library-card__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  padding: 5px 2px 3px;
}

.term-library-card__copy small {
  color: var(--watcha-deep);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.05em;
}

.term-library-card__copy strong {
  margin: 2px 0 7px;
  font-family: var(--font-serif);
  font-size: var(--t-h3);
  line-height: var(--lh-title);
}

.term-library-card__copy > span {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-2);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.term-library-card__copy i {
  margin-top: auto;
  padding-top: 10px;
  color: var(--watcha-deep);
  font-size: var(--t-ui);
  font-style: normal;
  font-weight: 650;
}

.term-library__dialog {
  width: min(1020px, calc(100vw - 40px));
  max-width: none;
  max-height: min(820px, calc(100dvh - 40px));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--wiki-radius-xl);
  color: var(--ink);
  background: var(--paper-2);
  box-shadow: 0 18px 60px rgb(40 31 18 / 18%);
}

.term-library__dialog::backdrop {
  background: rgb(24 20 14 / 56%);
  backdrop-filter: blur(3px);
}

.collection-dialog__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--ink-2);
  background: var(--paper-2);
  cursor: pointer;
}

.collection-dialog__close:hover {
  border-color: var(--watcha-line);
  color: var(--watcha-deep);
  background: var(--watcha-soft);
}

.collection-dialog__close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.term-detail {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.25fr);
  min-height: 580px;
  max-height: min(820px, calc(100dvh - 40px));
}

.term-detail__visual {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 42px 34px 30px;
  border-right: 1px solid var(--line);
  background: var(--card);
}

.term-detail__visual img {
  width: 100%;
  max-height: 590px;
  margin: 0 !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--wiki-radius-lg) !important;
  object-fit: contain;
  background: white;
}

.term-detail__visual figcaption {
  color: var(--mut);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  line-height: var(--lh-ui);
  text-align: center;
}

.term-detail__copy {
  min-width: 0;
  padding: 44px 46px 38px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.term-detail__eyebrow {
  margin: 0 0 4px !important;
  color: var(--watcha-deep) !important;
  font-family: var(--font-mono);
  font-size: var(--t-mono) !important;
  letter-spacing: 0.08em;
}

.term-detail__copy > h2 {
  margin: 0 44px 6px 0 !important;
  font-size: var(--t-display) !important;
}

.term-detail__summary {
  margin: 0 0 25px !important;
  color: var(--ink-2) !important;
  font-size: var(--t-lead) !important;
  line-height: var(--lh-lead) !important;
}

.term-detail__copy section {
  margin: 0 !important;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

.term-detail__copy section > h3 {
  margin: 0 0 8px !important;
  font-family: var(--font-serif);
  font-size: var(--t-cardtitle) !important;
}

.term-detail__copy section p,
.term-detail__copy section li {
  color: var(--ink-2);
  font-size: var(--t-comp);
  line-height: var(--lh-comp);
}

.term-detail__copy section p {
  margin: 0 0 8px !important;
}

.term-detail__copy section p:last-child {
  margin-bottom: 0 !important;
}

.term-detail__copy ul,
.term-detail__copy ol {
  margin: 0 !important;
  padding-left: 1.25em !important;
}

.term-detail__example {
  margin-top: 4px !important;
  padding: 16px 18px !important;
  border: 1px solid var(--watcha-line) !important;
  border-radius: var(--wiki-radius-md);
  background: var(--watcha-soft);
}

.term-detail__copy footer {
  padding-top: 22px;
}

.term-detail__copy footer a {
  color: var(--watcha-deep);
  font-size: var(--t-comp);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.collection-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.collection-filters button {
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink-2);
  background: var(--paper-2);
  font-family: var(--font-sans);
  font-size: var(--t-ui);
  cursor: pointer;
}

.collection-filters button:hover,
.collection-filters button[aria-pressed="true"] {
  border-color: var(--watcha-line);
  color: var(--watcha-deep);
  background: var(--watcha-soft);
}

.treasure-vault__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.treasure-card {
  display: flex;
  min-width: 0;
  min-height: 198px;
  flex-direction: column;
  padding: 21px;
  border: 1px solid var(--line);
  border-radius: var(--wiki-radius-lg);
  color: var(--ink) !important;
  background: var(--paper-2);
  text-decoration: none !important;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.treasure-card:hover {
  border-color: var(--watcha-line);
  background: var(--watcha-soft);
  transform: translateY(-2px);
}

.treasure-card > small {
  color: var(--watcha-deep);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.06em;
}

.treasure-card > strong {
  margin: 7px 0 7px;
  font-family: var(--font-serif);
  font-size: var(--t-h3);
  line-height: var(--lh-title);
}

.treasure-card > span {
  color: var(--ink-2);
  font-size: var(--t-comp);
  line-height: var(--lh-comp);
}

.treasure-card footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 16px;
}

.treasure-card footer i {
  color: var(--mut);
  font-size: var(--t-ui);
  font-style: normal;
}

.treasure-card footer b {
  color: var(--watcha-deep);
  font-size: var(--t-h3);
}

@media (max-width: 720px) {
  .term-library__grid,
  .treasure-vault__grid {
    grid-template-columns: 1fr;
  }

  .term-library-card {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .term-library__dialog {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }

  .term-detail {
    display: block;
    min-height: 0;
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
  }

  .term-detail__visual {
    min-height: 0;
    padding: 46px 22px 24px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .term-detail__visual img {
    width: min(100%, 360px);
    max-height: 52dvh;
    align-self: center;
  }

  .term-detail__copy {
    padding: 28px 22px 30px;
    overflow: visible;
  }

  .term-detail__copy > h2 {
    font-size: 28px !important;
  }

  .treasure-vault__tools {
    align-items: stretch;
  }

  .collection-search--compact {
    flex-basis: 100%;
  }
}

/* ============ 共学营课程归档 ============
 * AI CAMP / FDE 的旧课程文档只保留语义 class，视觉统一由 Wiki 正文事实源接管。
 * 不复制旧站 CSS，也不在生成出的单页里放局部样式。
 */
.wiki-article .course-archive-hero .standfirst {
  max-width: 760px;
  padding-left: 0;
  border-left: 0;
}

.wiki-article .course-archive-hero--editorial .standfirst {
  padding-left: 18px;
  border-left: 3px solid var(--red);
}

.wiki-article .course-archive-hero--comic-drama .meta-row {
  padding: 12px 0 0;
  border: 0;
  margin-bottom: 26px;
}

.wiki-article a.course-platform-link {
  padding-bottom: 0;
  border-bottom: 0;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.wiki-article a.course-platform-link:hover {
  color: var(--ink);
  background: transparent;
}

.wiki-article .course-archive-document .course-number-list {
  padding-left: 38px;
  list-style-type: decimal-leading-zero;
}

.wiki-article .course-archive-document .course-number-list > li::marker {
  color: var(--red);
  font-family: var(--font-gara);
  font-style: italic;
  font-weight: 700;
}

.wiki-article .course-archive-document .course-dot-list {
  padding-left: 20px;
  list-style-type: disc;
}

.wiki-article .course-archive-document .course-dot-list > li::marker {
  color: var(--red);
}

.wiki-article .course-archive-document {
  min-width: 0;
}

.wiki-article .course-archive-document--comic-drama > section > h2:first-child {
  margin-top: 58px;
}

.wiki-article .course-archive-document--comic-drama > section > h2:first-child .no {
  font-size: 0.72em;
  letter-spacing: 0.04em;
}

.wiki-article .course-archive-document--comic-drama .course-number-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 40px;
  margin: 22px 0 26px;
  padding-left: 0;
  list-style: none;
  counter-reset: comic-course-step;
}

.wiki-article .course-archive-document--comic-drama .course-number-list > li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  margin: 0;
  padding: 2px 0;
  counter-increment: comic-course-step;
  font-size: var(--t-comp);
}

.wiki-article .course-archive-document--comic-drama .course-number-list > li::before {
  content: counter(comic-course-step) '.';
  color: var(--red);
  font-family: inherit;
  font-size: inherit;
  font-style: normal;
  font-weight: 400;
  line-height: var(--lh-body);
  text-align: right;
}

.wiki-article .course-archive-document--comic-drama .course-number-list > li::marker {
  content: '';
}

@media (max-width: 839px) {
  .wiki-article .course-archive-document--comic-drama > section > h2:first-child {
    margin-top: 48px;
  }

  .wiki-article .course-archive-document--comic-drama .course-number-list {
    grid-template-columns: 1fr;
    gap: 7px;
  }
}

.wiki-article .course-application {
  margin: 34px 0 48px;
  scroll-margin-top: 148px;
}

.wiki-article .course-application__intro {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr);
  align-items: end;
  gap: 28px;
}

.wiki-article .course-application__eyebrow {
  display: block;
  margin-bottom: 7px;
  color: var(--watcha-deep);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 650;
  line-height: var(--lh-ui);
  letter-spacing: 0.1em;
}

.wiki-article .course-application__intro h2 {
  margin: 0;
}

.wiki-article .course-application__intro > p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-comp);
  line-height: var(--lh-comp);
}

.wiki-article .course-application__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.wiki-article .course-application__choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 14px;
  min-width: 0;
  padding: 19px 20px 18px;
  border: 1px solid var(--line);
  border-radius: var(--wiki-radius-md);
  color: var(--ink);
  background: var(--paper-2);
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.wiki-article .course-application__choice:hover {
  border-color: var(--watcha-line);
  color: var(--ink);
  background: var(--watcha-soft);
  text-decoration: none;
  transform: translateY(-1px);
}

.wiki-article .course-application__number {
  grid-row: 1 / span 2;
  color: var(--red);
  font-family: var(--font-gara);
  font-size: var(--t-ui);
  font-style: italic;
  font-weight: 700;
  line-height: var(--lh-ui);
}

.wiki-article .course-application__copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.wiki-article .course-application__copy strong {
  font-family: var(--font-serif);
  font-size: var(--t-cardtitle);
  line-height: var(--lh-title);
}

.wiki-article .course-application__copy small {
  color: var(--mut);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
}

.wiki-article .course-application__action {
  grid-column: 2;
  margin-top: 10px;
  color: var(--watcha-deep);
  font-size: var(--t-ui);
  font-weight: 700;
  line-height: var(--lh-ui);
}

.wiki-article .course-archive-introduction {
  margin: 34px 0 50px;
  padding: 26px 28px 28px;
  border: 1px solid var(--line);
  border-radius: var(--wiki-radius-lg);
  background: var(--paper-2);
}

.wiki-article .course-archive-introduction > :first-child {
  margin-top: 0;
}

.wiki-article .course-archive-introduction > :last-child {
  margin-bottom: 0;
}

.wiki-article .course-archive-introduction > h2 {
  margin-bottom: 18px;
}

.wiki-article .course-archive-introduction > h3 {
  margin: 28px 0 8px;
  font-size: var(--t-cardtitle);
}

.wiki-article .course-archive-introduction > :is(p, ul, ol) {
  color: var(--ink-2);
  font-size: var(--t-comp);
  line-height: var(--lh-comp);
}

.wiki-article .course-archive-introduction > p {
  margin-block: 10px;
}

.wiki-article .course-archive-introduction > :is(ul, ol) {
  margin: 10px 0 2px;
  padding-left: 24px;
}

.wiki-article .course-archive-introduction li {
  margin: 6px 0;
  padding-left: 3px;
}

.wiki-article .course-archive-replay {
  margin: 50px 0 56px;
}

.wiki-article .course-archive-replay > h2 {
  margin-top: 0;
}

.wiki-article .course-archive-assignment {
  margin-top: 56px;
}

.wiki-article .course-section-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--red);
  font-family: var(--font-sans);
  font-size: var(--t-mono);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

.wiki-article .course-section-kicker__mark {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 2px;
  background: var(--red);
  transform: rotate(45deg);
}

.wiki-article .course-archive-assignment > h2 {
  margin-top: 0;
}

.wiki-article .course-archive-assignment > :last-child {
  margin-bottom: 0;
}

.wiki-article .course-archive-assignment .course-assignment-notice {
  display: grid;
  gap: 7px;
  margin-top: 15px;
}

.wiki-article .course-archive-assignment .course-assignment-notice p {
  margin: 0;
  color: var(--ink-2);
  font-size: inherit;
  line-height: inherit;
}

.wiki-article .course-archive-assignment .course-assignment-notice strong {
  color: var(--watcha-deep);
  font-weight: 700;
}

.wiki-article .course-archive-document > h2 {
  margin-top: 48px;
}

.wiki-article .course-archive-document > h3 {
  margin-top: 34px;
}

.wiki-article .course-archive-document > .doc-callout:first-of-type {
  margin-top: 0;
}

.wiki-article .course-archive-document .docs-table--reference :is(th, td):first-child {
  width: 116px;
  min-width: 116px;
  white-space: nowrap;
  word-break: keep-all;
}

.wiki-article .course-archive-empty {
  margin: 20px 0 32px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--wiki-radius-lg);
  background: var(--paper-2);
  text-align: center;
}

.wiki-article .course-archive-empty p {
  margin: 0;
  color: var(--mut);
  font-size: var(--t-comp);
}

.wiki-article .course-archive-document .doc-callout {
  margin: 22px 0;
  padding: 17px 19px;
  border: 1px solid var(--line);
  border-radius: var(--wiki-radius-md);
  color: var(--ink-2);
  background: var(--card);
  font-size: var(--t-comp);
  line-height: var(--lh-comp);
}

.wiki-article .course-archive-document .doc-callout.tip {
  border-color: var(--watcha-line);
  background: var(--watcha-soft);
}

.wiki-article .course-archive-document .doc-callout.warn {
  border-color: #e4cfb0;
  background: #f8efe1;
}

.wiki-article .course-archive-document .doc-callout > * {
  margin: 0;
}

.wiki-article .course-archive-document .doc-callout-title {
  display: block;
  margin-bottom: 5px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--t-cardtitle);
  font-weight: 800;
}

.wiki-article .course-archive-document .doc-steps {
  margin: 20px 0 26px;
  padding-left: 42px;
  list-style-type: decimal-leading-zero;
}

.wiki-article .course-archive-document .doc-steps > li {
  margin: 0;
  padding: 14px 2px 14px 8px;
  border-bottom: 1px solid var(--line);
}

.wiki-article .course-archive-document .doc-steps > li::marker {
  color: var(--red);
  font-family: var(--font-gara);
  font-size: var(--t-ui);
  font-style: italic;
  font-weight: 700;
}

.wiki-article .course-archive-document .doc-step-title,
.wiki-article .course-archive-document .doc-card-title {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--t-cardtitle);
  font-weight: 800;
}

.wiki-article .course-archive-document .doc-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 22px 0 28px;
  padding: 0;
  list-style: none;
}

.wiki-article .course-archive-document .doc-cards > li {
  min-width: 0;
  margin: 0;
  padding: 17px 18px;
  border: 1px solid var(--line);
  border-radius: var(--wiki-radius-md);
  background: var(--paper-2);
  font-size: var(--t-comp);
  line-height: var(--lh-comp);
}

.wiki-article .course-archive-document .doc-kv {
  margin: 22px 0 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--wiki-radius-md);
  background: var(--paper-2);
}

.wiki-article .course-archive-document .doc-kv > div {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 18px;
  padding: 13px 16px;
}

.wiki-article .course-archive-document--comic-drama .doc-kv > div {
  grid-template-columns: minmax(220px, 2fr) minmax(0, 3fr);
  gap: 24px;
}

.wiki-article .course-archive-document .doc-kv > div + div {
  border-top: 1px solid var(--line);
}

.wiki-article .course-archive-document .doc-kv-key {
  color: var(--mut);
  font-size: var(--t-ui);
  font-weight: 650;
}

.wiki-article .course-archive-document .doc-kv-val {
  min-width: 0;
  color: var(--ink-2);
  font-size: var(--t-comp);
  line-height: var(--lh-comp);
}

.wiki-article .course-archive-document .doc-figure {
  margin: 26px 0;
  text-align: center;
}

.wiki-article .course-archive-document .doc-figure img {
  width: auto;
  max-height: min(680px, 75vh);
  margin-inline: auto;
}

.wiki-article .course-archive-document blockquote {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--wiki-radius-md);
  background: var(--paper-2);
}

.wiki-article .course-archive-document mark {
  padding: 1px 4px;
  color: var(--ink);
  background: #e7f1dc;
}

@media (max-width: 720px) {
  .wiki-article .course-application {
    margin: 28px 0 40px;
    scroll-margin-top: 118px;
  }

  .wiki-article .course-application__intro,
  .wiki-article .course-application__choices {
    grid-template-columns: 1fr;
  }

  .wiki-article .course-application__intro {
    gap: 10px;
  }

  .wiki-article .course-application__choices {
    gap: 10px;
    margin-top: 16px;
  }

  .wiki-article .course-application__choice {
    padding: 17px 18px 16px;
  }

  .wiki-article .course-archive-document .doc-kv > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .wiki-article .course-archive-introduction {
    margin: 28px 0 40px;
    padding: 20px;
  }

  .wiki-article .course-archive-replay {
    margin: 40px 0 46px;
  }

  .wiki-article .course-archive-document .doc-cards {
    grid-template-columns: 1fr;
  }

  .wiki-article .course-archive-document .doc-callout,
  .wiki-article .course-archive-empty {
    padding: 15px;
  }
}
.course-lock-icon[data-astro-cid-h3tiop3n] {
  display: inline-flex;
  width: 14px;
  height: 14px;
  flex: none;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

.course-lock-icon[data-astro-cid-h3tiop3n] svg[data-astro-cid-h3tiop3n] {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.course-lock-icon[data-astro-cid-h3tiop3n][hidden] {
  display: none;
}