/* ============================================================
   Jimin content pages: Community + Booklet
   Shares the current Day / Night system from style.css.
   ============================================================ */

.content-page {
  --page-panel-fill: color-mix(in srgb, var(--card) 58%, var(--paper));
  --page-panel-fill-soft: color-mix(in srgb, var(--card) 48%, var(--paper));
  --page-panel-fill-hover: color-mix(in srgb, var(--brand-blue) 8%, var(--card));
  --page-panel-line: color-mix(in srgb, var(--card-border) 74%, transparent);
  --page-panel-active-line: var(--brand-blue-line);
  --page-panel-hover-shadow: none;
  --page-title-weight: 700;
  --page-hero-title-size: var(--type-page-title);
  --page-hero-title-line: 1.06;
  --page-hero-sub-size: var(--type-lead);
  --page-section-title-size: var(--type-section-title);
  --page-section-title-line: 1.1;
  --page-section-sub-size: var(--type-lead);
  --page-card-title-size: var(--type-card-title);
  --page-card-title-line: 1.333333;
  --page-card-title-weight: 700;
  --page-card-body-size: var(--type-body);
  --page-card-body-line: 1.5;
  --page-card-padding: clamp(22px, 2.2vw, 28px);
  --page-card-padding-compact: clamp(18px, 1.8vw, 24px);
  --page-card-padding-bottom: calc(var(--page-card-padding) + var(--card-bottom-adjust));
  --page-card-padding-compact-bottom: calc(var(--page-card-padding-compact) + var(--card-bottom-adjust));
  --page-card-gap: clamp(12px, 1.4vw, 18px);
  --page-card-gap-tight: 10px;
  --page-feature-title-size: clamp(20px, 1.45vw, 22px);
  --page-quote-size: 16px;
  --page-stat-value-size: 22px;
  --page-stat-label-size: 13px;
  --page-note-size: 13px;
  --page-kicker-size: 12px;
  --page-meta-size: 11px;
  --page-meta-letter: 0.08em;
  --page-link-size: 14px;
  --page-link-weight: 700;
  --page-link-gap: 16px;
  --page-card-footer-inset: var(--page-card-padding-bottom);
  --page-card-footer-gap: var(--page-link-gap);
  --page-profile-avatar-size: clamp(24px, 2vw, 30px);
  --page-profile-gap: clamp(7px, 0.65vw, 10px);
  --page-profile-name-size: clamp(13px, 1vw, 15px);
  --page-profile-name-weight: 400;
  --page-profile-meta-size: 12.5px;
  --page-media-divider: 1px solid var(--page-panel-line);
  --page-interaction-offset: 0px;
  min-height: 100vh;
  color: var(--ink);
  background: var(--paper);
}

.content-page main {
  position: relative;
  z-index: 1;
  padding-top: var(--header-height);
}

.content-page .lp-footer {
  position: relative;
  z-index: 1;
}


.page-shell {
  position: relative;
  overflow-x: hidden;
}

.page-booklet,
.page-about {
  --booklet-band-bg: linear-gradient(
    135deg,
    color-mix(in srgb, #E9EDF1 82%, var(--card)) 0%,
    color-mix(in srgb, #C8D0D8 54%, var(--paper)) 46%,
    color-mix(in srgb, #F6F8FA 88%, #D5DDE5) 100%
  );
}

[data-theme="dark"] .page-booklet,
[data-theme="dark"] .page-about {
  --booklet-band-bg: linear-gradient(
    135deg,
    color-mix(in srgb, #1B222A 76%, var(--brand-blue)) 0%,
    color-mix(in srgb, #303842 58%, #141A20) 48%,
    color-mix(in srgb, #171D24 86%, #D8E0E8) 100%
  );
}

.page-shell::before,
.page-shell::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
}

.page-shell::before {
  inset: -14vh -12vw auto -18vw;
  height: 82vh;
  background:
    linear-gradient(
      156deg,
      rgba(149, 177, 206, 0.42) 0%,
      rgba(255, 255, 255, 0.24) 46%,
      rgba(149, 177, 206, 0.12) 100%
    );
  filter: blur(34px);
  transform: rotate(-8deg);
}

.page-shell::after {
  right: -22vw;
  top: 30vh;
  width: 70vw;
  height: 150vh;
  background:
    linear-gradient(
      104deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(149, 177, 206, 0.22) 42%,
      rgba(255, 255, 255, 0) 100%
    );
  filter: blur(46px);
  transform: rotate(10deg);
}

[data-theme="dark"] .page-shell::before {
  background:
    linear-gradient(
      156deg,
      rgba(149, 177, 206, 0.2) 0%,
      rgba(18, 23, 29, 0.28) 48%,
      rgba(149, 177, 206, 0.08) 100%
    );
}

[data-theme="dark"] .page-shell::after {
  background:
    linear-gradient(
      104deg,
      rgba(11, 13, 16, 0) 0%,
      rgba(149, 177, 206, 0.14) 42%,
      rgba(11, 13, 16, 0) 100%
    );
}

.page-hero,
.page-section,
.page-band {
  position: relative;
  z-index: 1;
}

.page-hero,
.page-section {
  width: var(--layout-width);
  max-width: var(--wide-max);
  margin-inline: auto;
}

.page-hero {
  display: flex;
  min-height: auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: clamp(108px, 13vw, 156px) clamp(60px, 7vw, 92px);
}

.page-title {
  margin: 0 auto;
  max-width: var(--layout-max);
  color: var(--ink);
  font-size: var(--page-hero-title-size);
  font-weight: var(--page-title-weight);
  line-height: var(--page-hero-title-line);
  letter-spacing: -0.025em;
}

/* 手动断行工具类。原先写作 `.page-title span { display:block }`，
   会把 H1 里任何 <span> 变成块级——加入 .t-em / .t-hl 强调后会误伤，
   故改为具名类。改动时全站没有页面在用旧写法。 */
.page-title .t-line {
  display: block;
}

.page-sub {
  max-width: var(--measure-copy);
  margin: clamp(20px, 2vw, 28px) auto 0;
  color: var(--ink-soft);
  font-size: var(--page-hero-sub-size);
  line-height: 1.5;
}

/* The visible field stays in place when its results open. */
.booklet-search {
  position: relative;
  width: min(720px, 100%);
  margin: clamp(32px, 4vw, 46px) auto 0;
  text-align: left;
}

.page-search {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 5px 6px 5px 18px;
  box-sizing: border-box;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--floating-shadow);
  backdrop-filter: blur(8px);
  transition: border-color var(--ui-duration) ease;
}

.page-search img {
  width: 20px;
  height: 20px;
  opacity: 0.72;
}

.page-search:hover { border-color: var(--field-border-hover); }
.page-search:focus-within { border-color: var(--field-border-focus); }

.page-shortcuts {
  margin: 12px auto 0;
  color: var(--ink-faint);
  font-size: var(--page-note-size);
}

.page-hero__actions {
  display: flex;
  justify-content: center;
  margin: clamp(28px, 3.5vw, 42px) auto 0;
}

.page-section {
  padding-block: clamp(64px, 8vw, 112px);
}

.page-section--tight {
  padding-block: clamp(42px, 6vw, 82px);
}

.page-section__head {
  max-width: var(--layout-max);
  margin: 0 auto clamp(30px, 4vw, 48px);
  text-align: center;
}

.page-section__title {
  margin: 0;
  color: var(--ink);
  font-size: var(--page-section-title-size);
  font-weight: var(--page-title-weight);
  line-height: var(--page-section-title-line);
  letter-spacing: -0.025em;
}

.page-section__sub {
  margin: clamp(14px, 1.6vw, 20px) auto 0;
  max-width: var(--measure-copy);
  color: var(--ink-soft);
  font-size: var(--page-section-sub-size);
  line-height: 1.5;
}

.page-card {
  color: var(--ink);
  background: var(--page-panel-fill);
  border: 1px solid var(--page-panel-line);
  border-radius: var(--surface-radius);
  box-shadow: none;
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.28s ease,
    background 0.28s ease,
    box-shadow 0.28s ease;
}

.page-card h3,
.page-card h4,
.page-card p {
  margin-block-start: 0;
}

.page-card:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand-blue) 62%, transparent);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .page-card:not(.talk-panel):hover,
  .page-card:focus-visible {
    border-color: var(--page-panel-active-line);
    background: var(--page-panel-fill-hover);
    box-shadow: none;
    transform: translateY(var(--page-interaction-offset));
  }

  .page-card:hover .page-icon-chip {
    color: color-mix(in srgb, var(--ink) 72%, var(--brand-blue));
  }
}

.page-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

.media-align-left {
  object-position: left center;
}

.page-icon-chip {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 0;
}

.page-icon-chip img {
  width: 32px;
  height: 32px;
  opacity: 0.8;
}

.community-spotlight-grid,
.voice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--gallery-gap);
}

.community-spotlight {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
}

.community-spotlight__media {
  height: clamp(220px, 18vw, 280px);
  min-height: 0;
  border-bottom: var(--page-media-divider);
}

.community-spotlight__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--page-card-gap);
  padding: var(--page-card-padding) var(--page-card-padding) var(--page-card-padding-bottom);
}

.community-spotlight__title {
  margin: 0;
  color: var(--ink);
  font-size: var(--page-feature-title-size);
  font-weight: var(--page-card-title-weight);
  line-height: var(--page-card-title-line);
}

/* Each multi-column row shares its title, profile, summary and stats tracks.
   Longer future titles grow the shared track; card footers stay aligned. */
@supports (grid-template-rows: subgrid) {
  .community-spotlight {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .community-spotlight__body {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: var(--page-card-gap);
  }
}
.community-spotlight__body > .community-stats {
  margin-top: 0;
}
@supports not (grid-template-rows: subgrid) {
  .community-spotlight__body > .community-stats { margin-top: auto; }
}
.community-profile > .community-profile__avatar {
  flex: 0 0 auto;
  margin-top: 0;
}

.community-spotlight__summary {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--page-card-body-size);
  line-height: var(--page-card-body-line);
}

.community-profile {
  display: flex;
  align-items: center;
  gap: var(--page-profile-gap);
  margin-top: 0;
}

.community-profile img,
.community-profile__avatar {
  width: var(--page-profile-avatar-size);
  height: var(--page-profile-avatar-size);
  object-fit: cover;
  box-sizing: border-box;
  border: 1.5px solid rgba(235, 240, 240, 0.45);
  border-radius: var(--radius-round);
  background: rgba(235, 240, 240, 0.12);
}

.community-profile strong {
  display: block;
  color: var(--ink);
  font-size: var(--page-profile-name-size);
  font-weight: var(--page-profile-name-weight);
  line-height: 1.2;
}

.community-profile span {
  display: block;
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: var(--page-profile-meta-size);
  line-height: 1.25;
}

.community-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 4px;
}

.community-stat strong {
  display: block;
  color: var(--ink);
  font-size: var(--page-stat-value-size);
  line-height: 1;
}

.community-stat span {
  display: block;
  margin-top: 8px;
  color: var(--ink-faint);
  font-size: var(--page-stat-label-size);
  line-height: 1.25;
}

.community-spotlight__profile {
  margin-top: 0;
}

.channel-grid,
.booklet-group-grid,
.booklet-tools-grid {
  display: grid;
  gap: var(--gallery-gap);
}

.voice-card {
  display: flex;
  min-height: 210px;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--page-card-padding) var(--page-card-padding) var(--page-card-padding-bottom);
}

.voice-card blockquote {
  margin: 0;
  color: var(--ink);
  font-size: var(--page-quote-size);
  font-weight: 400;
  line-height: 1.45;
}

.voice-card .community-profile {
  margin-top: 24px;
  padding-top: 0;
  border-top: 0;
}

.community-notes-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}

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

.community-note-card {
  display: flex;
  overflow: hidden;
  min-height: clamp(330px, 25vw, 400px);
  flex-direction: column;
  color: var(--ink);
  text-decoration: none;
}

.community-note-card__media {
  height: clamp(158px, 13vw, 200px);
  overflow: hidden;
  border-bottom: var(--page-media-divider);
}

.community-note-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--page-card-gap-tight);
  padding: var(--page-card-padding-compact) var(--page-card-padding-compact) var(--page-card-padding-compact-bottom);
}

.community-note-card h3 {
  overflow: hidden;
  margin: 0;
  color: var(--ink);
  font-size: var(--page-card-title-size);
  font-weight: var(--page-card-title-weight);
  line-height: var(--page-card-title-line);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-note-card p {
  display: -webkit-box;
  overflow: hidden;
  min-height: 2.8em;
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--page-card-body-size);
  line-height: var(--page-card-body-line);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.community-note-card__byline {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--page-profile-gap);
  color: var(--ink-faint);
  font-size: var(--page-profile-meta-size);
  line-height: 1.2;
}

.community-note-card__byline img {
  width: var(--page-profile-avatar-size);
  height: var(--page-profile-avatar-size);
  flex: 0 0 auto;
  object-fit: cover;
  box-sizing: border-box;
  border: 1.5px solid rgba(235, 240, 240, 0.45);
  border-radius: var(--radius-round);
  background: rgba(235, 240, 240, 0.12);
}

.community-note-card__author {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: var(--page-profile-name-size);
  font-weight: var(--page-profile-name-weight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-note-card__date {
  flex: 0 0 auto;
  color: var(--ink-faint);
  white-space: nowrap;
}

.community-note-card__date::before {
  content: "·";
  margin-right: 7px;
}

.community-note-card .community-note-card__link {
  margin-top: auto;
  padding-top: calc(var(--page-card-footer-gap) - var(--page-card-gap-tight));
  font-size: var(--page-link-size);
}

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

.channel-card {
  display: flex;
  min-height: 190px;
  flex-direction: column;
  padding: var(--page-card-padding) var(--page-card-padding) var(--page-card-padding-bottom);
  text-decoration: none;
}

.channel-card h3 {
  margin: 20px 0 8px;
  color: var(--ink);
  font-size: var(--page-card-title-size);
  font-weight: var(--page-card-title-weight);
  line-height: var(--page-card-title-line);
}

.channel-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--page-card-body-size);
  line-height: var(--page-card-body-line);
}

.channel-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  color: color-mix(in srgb, var(--brand-blue) 70%, var(--ink));
  font-size: var(--page-link-size);
  font-weight: var(--page-link-weight);
  line-height: 1.2;
}

.channel-card__arrow {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

@media (hover: hover) and (pointer: fine) {
  .channel-card:hover .channel-card__arrow,
  .channel-card:focus-visible .channel-card__arrow,
  .community-note-card:hover .channel-card__arrow,
  .community-note-card:focus-visible .channel-card__arrow,
  .booklet-group-card:hover .channel-card__arrow,
  .booklet-group-card:focus-visible .channel-card__arrow,
  .booklet-path-card:hover .channel-card__arrow,
  .booklet-path-card:focus-visible .channel-card__arrow,
  .booklet-tool-card:hover .channel-card__arrow,
  .booklet-tool-card:focus-visible .channel-card__arrow,
  .engine-guide-card:hover .channel-card__arrow,
  .engine-guide-card:focus-visible .channel-card__arrow,
  .article-related-card:hover .channel-card__arrow,
  .article-related-card:focus-visible .channel-card__arrow,
  .article-related__view-all:hover .channel-card__arrow,
  .article-related__view-all:focus-visible .channel-card__arrow,
  .talk-card:hover .channel-card__arrow,
  .talk-card:focus-visible .channel-card__arrow {
    transform: translateX(2px);
  }
}

.booklet-group-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
}

.booklet-group-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
  height: auto;
  min-height: 240px;
  overflow: hidden;
  text-decoration: none;
}

.booklet-group-card__body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  padding: var(--page-card-padding) var(--page-card-padding) var(--page-card-padding-bottom);
}

.booklet-group-card h3,
.booklet-tool-card h3,
.booklet-path-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: var(--page-card-title-size);
  font-weight: var(--page-card-title-weight);
  line-height: var(--page-card-title-line);
}

.booklet-group-card p,
.booklet-path-card p {
  margin: 14px 0 0;
  color: var(--ink-soft);
  font-size: var(--page-card-body-size);
  line-height: var(--page-card-body-line);
}

.booklet-tool-card p {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: var(--page-card-body-size);
  line-height: var(--page-card-body-line);
}

.booklet-group-card__media {
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border-left: var(--page-media-divider);
}

.media-align-top {
  object-position: center top;
}

/* Center the copy independently of the arrow controls. */
.page-booklet .booklet-path-heading {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 96px;
  column-gap: 16px;
  align-items: center;
  text-align: center;
}
.booklet-path-heading__copy { grid-column: 2; min-width: 0; }
.booklet-path-heading__copy .page-section__sub { margin-inline: auto; }
.booklet-path-controls:not([hidden]) {
  display: flex;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  gap: 8px;
}
.booklet-path-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--page-panel-line);
  border-radius: var(--radius-round);
  background: var(--page-panel-fill);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--ui-duration) ease, border-color var(--ui-duration) ease, opacity var(--ui-duration) ease;
}
.booklet-path-arrow:hover:not([aria-disabled="true"]) {
  background: var(--page-panel-fill-hover);
  border-color: var(--brand-blue-line);
}
.booklet-path-arrow:active:not([aria-disabled="true"]) { background: color-mix(in srgb, var(--brand-blue) 22%, var(--card)); }
.booklet-path-arrow[aria-disabled="true"] { opacity: .35; cursor: default; }
.booklet-path-arrow:focus-visible { outline: 2px solid #448ac7; outline-offset: 2px; }
.booklet-path-row {
  --path-visible: 4;
  --path-gap: var(--page-card-gap);
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--path-visible) - 1) * var(--path-gap)) / var(--path-visible));
  gap: var(--path-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* Bleed only the focus-ring allowance; card edges still align to the shell. */
  width: calc(100% + 8px);
  margin: -4px;
  padding: 4px;
  scroll-padding-inline: 4px;
  scroll-snap-type: x mandatory;
}
.is-path-carousel .booklet-path-row { scrollbar-width: none; }
.is-path-carousel .booklet-path-row::-webkit-scrollbar { display: none; }
@media (max-width: 1099px) { .booklet-path-row { --path-visible: 3; } }
@media (max-width: 900px) {
  .page-booklet .booklet-path-heading { grid-template-columns: minmax(0, 1fr); }
  .booklet-path-heading__copy { grid-column: 1; }
  .booklet-path-controls:not([hidden]) { grid-column: 1; grid-row: 2; justify-self: center; margin-top: 20px; }
}
@media (max-width: 767px) { .booklet-path-row { --path-visible: 2; } }
@media (max-width: 560px) { .booklet-path-row { grid-auto-columns: 86%; } }
@media (prefers-reduced-motion: reduce) { .booklet-path-arrow { transition: none; } }

.booklet-path-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 392px;
  overflow: hidden;
  scroll-snap-align: start;
  text-decoration: none;
}

.booklet-path-card:focus-visible { outline: 2px solid #448ac7; outline-offset: 2px; }

.booklet-path-card__media {
  flex: 0 0 auto;
  height: clamp(190px, 16vw, 230px);
  border-bottom: var(--page-media-divider);
}

.booklet-path-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  padding: var(--page-card-padding) var(--page-card-padding) var(--page-card-padding-bottom);
}

.booklet-tools-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.booklet-tool-card {
  display: flex;
  flex-direction: column;
  min-height: 190px;
  padding: var(--page-card-padding) var(--page-card-padding) var(--page-card-padding-bottom);
  text-decoration: none;
}

.booklet-tool-card .page-icon-chip {
  margin-bottom: 20px;
}

.booklet-tool-card .page-icon-chip,
.talk-card .page-icon-chip {
  color: var(--accent);
}

.booklet-tool-card .page-icon-chip img,
.talk-card .page-icon-chip img {
  opacity: 1;
  filter: invert(58%) sepia(15%) saturate(812%) hue-rotate(170deg) brightness(94%) contrast(89%);
}

.page-band {
  width: 100%;
  margin-block: clamp(46px, 6vw, 82px);
  padding-block: clamp(50px, 7vw, 82px);
  background: var(--booklet-band-bg, color-mix(in srgb, var(--card) 74%, var(--paper)));
  border-block: 0;
  box-shadow: none;
}

.page-band__inner {
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 72px);
  width: var(--layout-width);
  max-width: var(--wide-max);
  margin-inline: auto;
}

#booklet-engines {
  padding-block: clamp(38px, 5.2vw, 62px);
}

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

.engine-guide-card {
  --page-card-footer-inset: var(--page-card-padding-compact-bottom);
  display: flex;
  min-height: clamp(152px, 12vw, 176px);
  flex-direction: column;
  padding: var(--page-card-padding-compact) var(--page-card-padding-compact) var(--page-card-padding-compact-bottom);
  color: var(--ink);
  text-decoration: none;
}

.engine-guide-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: var(--page-card-title-size);
  font-weight: var(--page-card-title-weight);
  line-height: var(--page-card-title-line);
}

.engine-guide-card p {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: var(--page-card-body-size);
  line-height: var(--page-card-body-line);
}

/* Every Booklet guide link is anchored to its text area's bottom padding.
   Flexible space absorbs copy length; the minimum gap prevents collisions. */
.booklet-group-card__body,
.booklet-path-card__body,
.booklet-tool-card,
.engine-guide-card {
  padding-bottom: var(--page-card-footer-inset);
}

:is(.booklet-group-card, .booklet-path-card, .booklet-tool-card, .engine-guide-card) .channel-card__link {
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: var(--page-card-footer-gap);
}

.booklet-updates-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(42px, 7vw, 96px);
  align-items: start;
}

.booklet-updates-copy {
  padding-top: 4px;
}

.booklet-updates-copy .page-section__title,
.booklet-updates-copy .page-section__sub {
  margin-inline: 0;
  text-align: left;
}

.booklet-updates-copy .page-section__sub {
  max-width: 48ch;
}

.updates-list {
  width: 100%;
  margin-inline: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.updates-panel__body {
  position: relative;
  display: grid;
  gap: 0;
  --timeline-line-x: 120px;
}

.updates-panel__body::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: var(--timeline-line-x);
  width: 1px;
  background: color-mix(in srgb, var(--brand-blue) 42%, var(--card-border));
}

.update-row {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 56px;
  padding: 0 0 38px;
  border-bottom: 0;
}

.update-row:last-child {
  padding-bottom: 0;
}

.update-row::after {
  content: "";
  position: absolute;
  top: 3px;
  left: calc(var(--timeline-line-x) - 5px);
  width: 11px;
  height: 11px;
  border: 2px solid var(--paper);
  border-radius: var(--radius-round);
  background: color-mix(in srgb, var(--brand-blue) 70%, var(--card-border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-blue) 20%, transparent);
}

.update-row time {
  color: color-mix(in srgb, var(--brand-blue) 78%, var(--ink));
  font-size: var(--page-kicker-size);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.update-row__content {
  max-width: 60ch;
}

.update-row h3 {
  margin: 0;
  color: var(--ink);
  font-size: var(--page-card-title-size);
  font-weight: var(--page-card-title-weight);
  line-height: var(--page-card-title-line);
}

.update-row p {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: var(--page-card-body-size);
  line-height: var(--page-card-body-line);
}

[data-theme="dark"] .updates-panel__body::before {
  background: color-mix(in srgb, var(--brand-blue) 36%, var(--card-border));
}

[data-theme="dark"] .update-row::after {
  border-color: color-mix(in srgb, var(--paper) 82%, transparent);
  background: color-mix(in srgb, var(--brand-blue) 68%, var(--card-border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-blue) 18%, transparent);
}

[data-theme="dark"] .update-row time {
  color: color-mix(in srgb, var(--brand-blue) 72%, var(--ink-soft));
}

.talk-panel {
  display: grid;
  width: 100%;
  max-width: var(--wide-max);
  margin-inline: auto;
  padding: 0;
}

.talk-panel__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.talk-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 168px;
  padding: var(--page-card-padding-compact) var(--page-card-padding-compact) var(--page-card-padding-compact-bottom);
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  border: 1px solid var(--page-panel-line);
  border-radius: var(--surface-radius);
  background: var(--page-panel-fill-soft);
  box-shadow: none;
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.28s ease,
    background 0.28s ease,
    box-shadow 0.28s ease;
}

.talk-card:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand-blue) 62%, transparent);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .talk-card:hover,
  .talk-card:focus-visible {
    border-color: var(--page-panel-active-line);
    background: var(--page-panel-fill-hover);
    box-shadow: none;
    transform: translateY(var(--page-interaction-offset));
  }
}

.talk-card h3 {
  margin: 12px 0 0;
  color: var(--ink);
  font-size: var(--page-card-title-size);
  font-weight: var(--page-card-title-weight);
  line-height: var(--page-card-title-line);
}

.talk-card p {
  margin: 7px 0 0;
  color: var(--ink-soft);
  font-size: var(--page-card-body-size);
  line-height: var(--page-card-body-line);
}

.channel-card .channel-card__link,
.talk-card .channel-card__link,
.article-related-card .channel-card__link {
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: var(--page-card-footer-gap);
}

/* ------------------------------------------------------------------
   About page — shared Jimin content-page system
   Uses the same Portal Hero, section heads, page bands, and cards as
   Community and Booklet. Custom rules only arrange About content.
   ------------------------------------------------------------------ */
.page-about {
  --about-band-title-size: clamp(32px, 2.6vw, 42px);
  --about-band-copy-width: min(620px, 100%);
  --about-site-media-shadow: rgba(19, 31, 44, 0.14);
}

[data-theme="dark"] .page-about {
  --about-surface-muted: color-mix(in srgb, var(--card) 72%, var(--paper));
  --about-surface-soft: color-mix(in srgb, var(--card) 46%, var(--paper));
  --about-rule: color-mix(in srgb, var(--ink) 17%, transparent);
  --about-site-media-shadow: rgba(0, 0, 0, 0.3);
}

.page-about .about-site-hero {
  padding-bottom: clamp(70px, 8vw, 104px);
}

.page-about .page-section {
  padding-block: clamp(58px, 6.5vw, 92px);
}

.page-about .page-section--tight {
  padding-block: clamp(46px, 5.5vw, 76px);
}

.page-about .page-band {
  margin-block: clamp(34px, 4.5vw, 58px);
  padding-block: clamp(50px, 6vw, 78px);
}

.page-about .about-site-hero .page-sub {
  max-width: 1040px;
}

.about-site-hero-copy span {
  display: block;
}

.about-site-hero-copy {
  text-wrap: balance;
}

.about-site-mission-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--page-card-gap);
  width: 100%;
  margin: 0 auto;
}

.about-site-prose {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.about-site-prose p {
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.68;
}

.about-site-media {
  min-width: 0;
  margin: 0;
}

.about-site-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 22px 40px var(--about-site-media-shadow));
}

.about-site-band-copy {
  min-width: 0;
}

.about-site-band-copy .page-section__title,
.about-site-band-copy .page-section__sub {
  margin-inline: 0;
  text-align: left;
}

.about-site-band-copy .page-section__sub {
  max-width: 50ch;
}

.about-site-band-copy .about-site-prose {
  margin-top: clamp(24px, 3vw, 36px);
}

.about-site-feature__inner {
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
  align-items: center;
}

.about-site-feature__media {
  display: grid;
  min-height: clamp(300px, 31vw, 430px);
  place-items: center;
}

.about-site-feature__media img {
  max-height: 430px;
}

.about-site-principles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--page-card-gap);
}

.about-site-mission-card,
.about-site-principle {
  min-width: 0;
  padding: var(--page-card-padding) var(--page-card-padding) var(--page-card-padding-bottom);
}

.about-site-mission-card {
  display: flex;
  min-height: 176px;
  flex-direction: column;
  justify-content: center;
}

.about-site-principle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 176px;
}

.about-site-mission-card h3,
.about-site-principle h3 {
  margin: 0;
  color: var(--ink);
  font-size: var(--page-card-title-size);
  font-weight: var(--page-card-title-weight);
  line-height: var(--page-card-title-line);
}

.about-site-mission-card p,
.about-site-principle p {
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  color: var(--ink-soft);
  font-size: var(--page-card-body-size);
  line-height: var(--page-card-body-line);
}

.about-site-media--practice {
  overflow: visible;
}

.about-site-media--practice img {
  object-fit: contain;
  filter: drop-shadow(0 24px 38px var(--about-site-media-shadow));
}

.page-about .about-site-feedback,
.page-about .about-site-architecture {
  margin-bottom: 0;
}

.page-about .about-site-direction {
  padding-block: clamp(58px, 7vw, 92px);
}

.about-site-direction .page-section__head {
  width: 100%;
  max-width: 920px;
  margin-bottom: 0;
}

.about-site-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 34px);
}

@media (max-width: 1180px) {
  .about-site-principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-site-principle {
    min-height: 168px;
  }
}

@media (max-width: 900px) {
  .about-site-mission-grid {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .about-site-mission-card {
    min-height: 0;
  }

  .about-site-feature__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-site-band-copy .page-section__title,
  .about-site-band-copy .page-section__sub {
    margin-inline: auto;
    text-align: center;
  }

  .about-site-band-copy .about-site-prose {
    max-width: 680px;
    margin-inline: auto;
  }

  .about-site-feature__media {
    width: 100%;
    min-height: 0;
    margin-inline: auto;
  }

}

@media (max-width: 640px) {
  .page-about .about-site-hero {
    padding-bottom: 58px;
  }

  .about-site-mission-grid,
  .about-site-principles {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-site-mission-card,
  .about-site-principle {
    min-height: 0;
  }

  .about-site-hero-copy span {
    display: inline;
  }

  .about-site-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .about-site-actions .btn {
    width: 100%;
  }
}

/* 文章页首屏（规则 2.2）：原先 h1 居中而 h2/正文左对齐，同一页两种姿态，
   且左边缘差 17–52px。统一为左对齐。 */
.article-hero {
  display: flex;
  width: var(--layout-width);
  max-width: var(--wide-max);
  margin-inline: auto;
  padding: clamp(54px, 8vw, 96px) 0 clamp(34px, 5vw, 58px);
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* 文章页首屏与正文共用同一套栅格，让 h1 / 副标题 / 元信息 / 题图
   和下方的 h2、正文落在同一条左边缘上（规则 2.2）。 */
.page-article .article-hero {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, var(--measure-reading));
  column-gap: clamp(36px, 5.5vw, 86px);
  row-gap: 0;
}

.page-article .article-hero > * {
  min-width: 0;
  grid-column: 2;
  justify-self: stretch;
}

/* Back 留在左边那一列，和下方的目录同一条左边缘 */
.page-article .article-hero > .article-back {
  grid-column: 1;
  justify-self: start;

  border-radius: var(--radius-pill);

  min-height: 44px;

  font-size: 14px;

  font-weight: 700;

  line-height: 20px;
}

.article-hero .page-title,
.article-hero .page-sub {
  max-width: none;
  margin-inline: 0;
}

/* Note 是单栏居中，正文列和 .article-layout--single 对齐。
   Back 用绝对定位贴在页面最左侧（和改动前一致），这样它不占栅格宽度，
   窄屏下也不会把整页撑出横向滚动。 */
.page-community-note .article-hero {
  position: relative;
  grid-template-columns: minmax(0, var(--measure-reading));
  justify-content: center;
  padding-top: calc(clamp(54px, 8vw, 96px) + 62px);
}

.page-community-note .article-hero > * {
  grid-column: 1;
}

.page-community-note .article-hero > .article-back {
  /* grid-column:auto 很关键：绝对定位的栅格子元素若被指定了列，
     包含块会变成那个栅格区域（居中的正文列），而不是容器本身。 */
  position: absolute;
  grid-column: auto;
  top: clamp(54px, 8vw, 96px);
  left: 0;

  border-radius: var(--radius-pill);

  min-height: 44px;

  font-size: 14px;

  font-weight: 700;

  line-height: 20px;
}

@media (max-width: 900px) {
  .page-article .article-hero,
  .page-community-note .article-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-article .article-hero > * {
    grid-column: 1;
  }
}

.article-back {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  color: color-mix(in srgb, var(--ink) 70%, var(--ink-soft));
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.article-back:hover,
.article-back:focus-visible {
  color: var(--ink);
  background: color-mix(in srgb, var(--brand-blue) 16%, var(--card));
  border-color: color-mix(in srgb, var(--brand-blue) 34%, transparent);
  box-shadow: none;
  transform: none;
}

.article-hero .page-title {
  margin-top: clamp(48px, 7vw, 76px);
}

.article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 24px;
}

.article-hero__meta span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 0 16px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--page-panel-line);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--card) 56%, transparent);
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, var(--measure-reading));
  gap: clamp(36px, 5.5vw, 86px);
  width: var(--layout-width);
  max-width: var(--wide-max);
  margin: 0 auto;
  align-items: start;
}

.article-layout--single {
  grid-template-columns: minmax(0, var(--measure-reading));
  justify-content: center;
}

.article-toc-shell {
  position: sticky;
  top: calc(var(--header-height) + 36px + clamp(46px, 6vw, 78px));
  margin-top: clamp(46px, 6vw, 78px);
  z-index: 8;
}

.article-toc-back {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  width: max-content;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.article-toc-shell.is-past-hero .article-toc-back {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.article-toc {
  display: grid;
  gap: 6px;
}

.article-toc a {
  display: flex;
  min-height: 38px;
  align-items: center;
  padding: 0 12px;
  color: var(--ink-soft);
  font-size: var(--page-link-size);
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.article-toc a.is-active {
  color: var(--ink);
  background: color-mix(in srgb, var(--brand-blue) 9%, transparent);
  border-color: var(--page-panel-active-line);
}

@media (hover: hover) and (pointer: fine) {
  .article-toc a:hover,
  .article-toc a:focus-visible {
    color: var(--ink);
    background: var(--page-panel-fill-hover);
    border-color: var(--page-panel-active-line);
    box-shadow: none;
    transform: translateY(var(--page-interaction-offset));
  }
}

.article-body {
  min-width: 0;
}

.article-section {
  scroll-margin-top: calc(var(--header-height) + 36px);
  padding-block: clamp(46px, 6vw, 78px);
  border-top: 1px solid var(--page-panel-line);
}

.article-section:first-child {
  border-top: 0;
}

.article-section h2,
.article-related h2 {
  margin: 0;
  color: var(--ink);
  font-size: var(--page-section-title-size);
  font-weight: var(--page-title-weight);
  line-height: var(--page-section-title-line);
  letter-spacing: -0.025em;
}

.article-lede {
  max-width: 62ch;
  margin: 18px 0 0;
  color: var(--ink-soft);
  font-size: clamp(18px, 1.65vw, 22px);
  line-height: 1.45;
}

.article-copy {
  margin-top: 34px;
}

.article-copy h3 {
  margin: 32px 0 10px;
  color: var(--ink);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: var(--page-card-title-weight);
  line-height: 1.12;
}

.article-copy p,
.article-copy li {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.75;
}

.article-copy p {
  margin: 0 0 18px;
}

.article-copy ul {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding-left: 20px;
}

.article-copy strong {
  color: var(--ink);
}

.article-quote {
  margin: 32px 0 0;
  padding: 24px 28px;
  color: var(--ink);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.25;
}

.article-card-grid,
.article-toolbar-grid,
.article-related-grid,
.article-key-groups {
  display: grid;
  gap: 12px;
  margin-top: 30px;
}

.article-card-grid--three,
.article-related-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.article-info-card,
.article-toolbar-card,
.article-related-card {
  padding: var(--page-card-padding-compact) var(--page-card-padding-compact) var(--page-card-padding-compact-bottom);
}

.article-key-group {
  padding: var(--page-card-padding-compact);
}

.article-info-card h3,
.article-toolbar-card h3,
.article-key-group h3 {
  margin: 0;
  color: var(--ink);
  font-size: var(--page-card-title-size);
  font-weight: var(--page-card-title-weight);
  line-height: var(--page-card-title-line);
}

.article-info-card p,
.article-toolbar-card p {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: var(--page-card-body-size);
  line-height: var(--page-card-body-line);
}

.article-toolbar-card p {
  display: -webkit-box;
  overflow: hidden;
  min-height: 2.8em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.article-token {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 0 7px;
  color: color-mix(in srgb, var(--brand-blue) 55%, var(--ink)); /* Day 对比度：3.4~3.9:1 → 5.3:1 (WCAG AA) */
  font-family: var(--font-mono, "JetBrains Mono", "SFMono-Regular", Consolas, monospace);
  font-size: 0.86em;
  font-weight: 800;
  line-height: 1;
  border: 1px solid color-mix(in srgb, var(--brand-blue) 30%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--brand-blue) 9%, transparent);
}

.article-token--button {
  min-width: 26px;
  justify-content: center;
}

.article-table-wrap {
  overflow-x: auto;
  margin-top: 22px;
}

.article-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  color: var(--ink);
  font-size: var(--page-card-body-size);
  line-height: var(--page-card-body-line);
}

.article-table th,
.article-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--page-panel-line);
}

.article-table th {
  color: var(--ink);
  font-weight: 800;
}

.article-table td {
  color: var(--ink-soft);
}

.article-table tr:last-child td {
  border-bottom: 0;
}

.article-note {
  margin-top: 30px;
  padding: 22px 24px calc(22px + var(--card-bottom-adjust));
}

.article-note strong {
  display: block;
  color: var(--ink);
  font-size: var(--page-card-title-size);
  line-height: var(--page-card-title-line);
}

.article-note p {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: var(--page-card-body-size);
  line-height: var(--page-card-body-line);
}

.article-role-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.article-role-chip {
  display: grid;
  min-height: 64px;
  grid-template-columns: 12px minmax(0, 1fr);
  align-content: center;
  column-gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--page-panel-line);
  border-radius: var(--radius-control);
  background: var(--page-panel-fill-soft);
}

.article-role-chip span {
  grid-row: 1 / span 2;
  width: 12px;
  height: 12px;
  align-self: center;
  border-radius: 4px;
  background: currentColor;
}

.article-role-chip strong {
  color: currentColor;
  font-size: 14px;
  line-height: 1.1;
}

.article-role-chip em {
  margin-top: 3px;
  color: var(--ink-faint);
  font-size: 12px;
  font-style: normal;
  line-height: 1.1;
}

.article-role-chip--admin,
.article-role-name--admin {
  color: #3F607F;
}

.article-role-chip--editor,
.article-role-name--editor {
  color: #5E82A6;
}

.article-role-chip--viewer,
.article-role-name--viewer {
  color: #6E7C86;
}

.article-role-name {
  font-weight: 800;
}

.article-toolbar-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

.article-key-groups {
  grid-template-columns: 1fr;
}

.article-key-table {
  display: grid;
  gap: 0;
  margin-top: 16px;
}

.article-key-table div {
  display: grid;
  grid-template-columns: minmax(160px, 0.45fr) minmax(0, 1fr);
  gap: 18px;
  padding: 12px 0;
  border-top: 1px solid var(--page-panel-line);
}

.article-key-table div:first-child {
  border-top: 0;
}

.article-key-table kbd {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  margin: 0 4px 4px 0;
  padding: 0 8px;
  color: var(--ink);
  font-family: var(--font-mono, "JetBrains Mono", "SFMono-Regular", Consolas, monospace);
  font-size: 12px;
  font-weight: 800;
  border: 1px solid var(--page-panel-line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--card) 70%, transparent);
}

.article-key-table span {
  color: var(--ink-soft);
  font-size: var(--page-card-body-size);
  line-height: var(--page-card-body-line);
}

.article-related {
  margin-block: clamp(56px, 7vw, 90px) clamp(70px, 9vw, 116px);
  padding-top: clamp(42px, 5vw, 64px);
  border-top: 1px solid var(--page-panel-line);
}

.article-related__head {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.article-related__view-all {
  padding-top: 0;
  color: color-mix(in srgb, var(--brand-blue) 55%, var(--ink)); /* Day 对比度：3.4~3.9:1 → 5.3:1 (WCAG AA) */
  text-decoration: none;
}

.article-related-card {
  display: flex;
  min-height: 190px;
  flex-direction: column;
  color: var(--ink);
  text-decoration: none;
}

.article-related-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: var(--page-card-title-size);
  font-weight: var(--page-card-title-weight);
  line-height: var(--page-card-title-line);
}

.article-related-card p {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: var(--page-card-body-size);
  line-height: var(--page-card-body-line);
}

.article-related-card em {
  display: inline-flex;
  margin-top: auto;
  font-style: normal;
  text-decoration: none;
}

.community-note-hero .page-sub {
  max-width: min(1060px, 100%);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.5;
}

.community-note-hero .page-title {
  max-width: 1060px;
  font-size: var(--page-section-title-size);
  line-height: var(--page-section-title-line);
  letter-spacing: -0.025em;
}



.community-note-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--page-profile-gap);
  margin-top: 24px;
  color: var(--ink-faint);
  font-size: var(--page-profile-meta-size);
  line-height: 1.25;
}

.community-note-byline img {
  width: var(--page-profile-avatar-size);
  height: var(--page-profile-avatar-size);
  object-fit: cover;
  box-sizing: border-box;
  border: 1.5px solid rgba(235, 240, 240, 0.45);
  border-radius: var(--radius-round);
  background: rgba(235, 240, 240, 0.12);
}

.community-note-author {
  color: var(--ink);
  font-size: var(--page-profile-name-size);
  font-weight: var(--page-profile-name-weight);
}

.community-note-date::before,
.community-note-read::before {
  content: "·";
  margin-right: 10px;
  color: var(--ink-faint);
}

.community-note-hero-media,
.community-note-figure {
  margin: clamp(38px, 5vw, 62px) 0 0;
}

/* 图框样式从 <figure> 下移到内层 .community-note-frame，
   这样 <figcaption> 可以放进 <figure> 里（语义正确）而不被框住，视觉与之前一致 */
.community-note-frame {
  display: block;
  overflow: hidden;
  border: 1px solid var(--page-panel-line);
  /* 原写的是 --radius-card，全站从未定义过这个变量，实际圆角一直是 0 */
  border-radius: var(--radius-surface);
  background: var(--page-panel-fill);
}

.community-note-hero-media img,
.community-note-figure img,
.community-note-figure video {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-media);
}

.community-note-hero-media img {
  height: clamp(320px, 43vw, 620px);
}

.community-note-figure img,
.community-note-figure video {
  height: clamp(280px, 34vw, 500px);
}

.community-note-caption {
  margin: 12px auto 0;
  color: var(--ink-faint);
  font-size: var(--page-note-size);
  line-height: 1.45;
  text-align: center;
}

.community-note-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin: clamp(34px, 5vw, 58px) auto 0;
}

.community-note-fact {
  display: grid;
  gap: 7px;
  min-height: 96px;
  align-content: center;
  padding: 18px 16px;
  text-align: center;
  border: 1px solid var(--page-panel-line);
  border-radius: var(--radius-surface);
  background: var(--page-panel-fill-soft);
}

.community-note-fact span {
  color: var(--ink-faint);
  font-size: var(--page-meta-size);
  font-weight: 800;
  letter-spacing: var(--page-meta-letter);
  line-height: 1.1;
  text-transform: uppercase;
}

.community-note-fact strong {
  color: var(--ink-soft);
  font-size: var(--page-card-body-size);
  font-weight: var(--page-card-title-weight);
  line-height: 1.3;
}

.community-note-options {
  margin-top: 30px;
}

.community-note-pullquote {
  text-align: center;
}

.community-note-callout {
  border-color: color-mix(in srgb, var(--brand-blue) 34%, transparent);
  background: color-mix(in srgb, var(--brand-blue) 10%, var(--page-panel-fill));
}

.page-community-note .article-copy p,
.page-community-note .article-copy li {
  font-size: 18px;
  line-height: 1.72;
}

@media (max-width: 1180px) {
  .booklet-tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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


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

  .article-card-grid--three,
  .article-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

}

@media (max-width: 900px) {
  .content-page main {
    padding-top: var(--header-height);
  }

  .content-page {
    --page-hero-title-size: var(--type-page-title);
    --page-section-title-size: var(--type-section-title);
    --page-section-sub-size: 16px;
    --page-hero-sub-size: 16px;
  }

  .page-band__inner,
  .booklet-updates-layout {
    grid-template-columns: 1fr;
  }

  .booklet-updates-layout {
    gap: clamp(28px, 6vw, 44px);
  }

  .booklet-updates-copy .page-section__sub {
    max-width: 58ch;
  }

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

  .article-layout {
    grid-template-columns: 1fr;
    gap: clamp(28px, 5vw, 44px);
  }

  .article-toc-shell {
    top: calc(var(--header-height) + 8px);
    /* grid item 默认 min-width:auto 会被 TOC 内容撑开，导致整页横向溢出；
       归零后 .article-toc 的 overflow-x:auto 才能真正建立滚动容器 */
    min-width: 0;
    max-width: 100%;
    margin-top: 0;
    margin-inline: calc(var(--page-gutter) * -0.25);
    padding: 10px 0;
    background: color-mix(in srgb, var(--paper) 84%, transparent);
    backdrop-filter: blur(14px);
  }

  .article-toc-back {
    display: none;
  }

  .article-toc {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-inline: calc(var(--page-gutter) * 0.25);
  }

  .article-toc a {
    min-width: max-content;
  }

  .article-role-row {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 767px) {
  /* Keep split-card copy readable before switching to stacked media. */
  .booklet-group-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
}

@media (max-width: 640px) {

  .page-hero,
  .page-section__head {
    text-align: left;
  }

  .page-sub,
  .page-section__sub {
    margin-inline: 0;
  }

  .community-spotlight__media {
    height: 250px;
    min-height: 0;
  }

  .community-stats,
  .community-notes-grid,
  .booklet-group-grid,
  .booklet-tools-grid,
  .engine-guide-grid,
  .talk-panel__grid {
    grid-template-columns: 1fr;
  }

  .community-note-card__media {
    height: 190px;
  }

  .booklet-group-card {
    height: auto;
    grid-template-columns: 1fr;
  }

  .booklet-group-card__media {
    height: 180px;
    border-left: 0;
    border-top: var(--page-media-divider);
  }

  

  .updates-panel__body::before,
  .update-row::after {
    display: none;
  }

  .update-row {
  grid-template-columns: 1fr;
    gap: 8px;
    padding-bottom: 24px;
  }

  .article-hero {
    align-items: flex-start;
    text-align: left;
  }

  .article-hero__meta {
    justify-content: flex-start;
  }

  .community-note-byline {
    justify-content: flex-start;
  }

  .article-section h2,
  .article-related h2 {
    font-size: var(--page-section-title-size);
  }

  .article-copy p,
  .article-copy li {
    font-size: 16px;
    line-height: 1.65;
  }

  .article-card-grid--three,
  .article-toolbar-grid,
  .article-toolbar-grid--viewer,
  .article-related-grid {
    grid-template-columns: 1fr;
  }

  .community-note-facts {
    grid-template-columns: 1fr;
  }

  .article-key-table div {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* Booklet inline search: one field and an anchored results panel. */
.page-hero.has-open-search { z-index: 20; }
.booklet-search.is-open[data-reveal] { opacity: 1; transform: none; transition: none; }

.page-search .bk-search__input {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0;
  color: var(--ink);
  font: 400 16px/24px var(--font-sans);
  background: transparent;
  border: 0;
  outline: none;
  appearance: none;
}
.page-search .bk-search__input::placeholder { color: var(--ink-soft); opacity: 1; }
.page-search .bk-search__input:focus-visible { outline: none; }
.bk-search__input::-webkit-search-cancel-button { display: none; }

.bk-search__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: var(--radius-round);
  cursor: pointer;
  transition: background var(--ui-duration) ease, color var(--ui-duration) ease;
}
.bk-search__close:hover { color: var(--ink); background: color-mix(in srgb, var(--brand-blue) 12%, transparent); }
.bk-search__close:active { background: color-mix(in srgb, var(--brand-blue) 22%, transparent); }
.bk-search__close:focus-visible { outline: 2px solid #448ac7; outline-offset: -2px; }

.bk-search {
  position: absolute;
  z-index: 1;
  top: calc(100% + 8px);
  inset-inline: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: var(--bk-search-max-h, min(420px, 55dvh));
  overflow: hidden;
  box-sizing: border-box;
  color: var(--ink);
  background: color-mix(in srgb, var(--card) 96%, var(--paper));
  border: 1px solid var(--card-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--floating-shadow);
}
.bk-search[hidden], .bk-search__close[hidden], .bk-search__empty[hidden] { display: none; }

.bk-search__results {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--card-border) transparent;
  margin: 0;
  padding: 8px;
  list-style: none;
}
.bk-search__results:empty { display: none; }
.bk-search__results li + li { margin-top: 4px; }
.bk-search__results a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 6px 12px;
  padding: 14px 16px;
  border-radius: var(--radius-surface);
  text-decoration: none;
  transition: background var(--ui-duration) ease;
}
.bk-search__results strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font: 400 var(--page-card-body-size)/24px var(--font-sans);
}
.bk-search__category {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--brand-blue) 12%, transparent);
  font: 400 var(--page-note-size)/18px var(--font-sans);
}
.bk-search__description {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  font: 400 var(--page-card-body-size)/24px var(--font-sans);
}
.bk-search__results a[aria-selected="true"] {
  background: color-mix(in srgb, var(--brand-blue) 14%, transparent);
}
.bk-search__empty {
  margin: 0;
  padding: 24px;
  color: var(--ink-soft);
  font: 400 var(--page-card-body-size)/24px var(--font-sans);
}
@media (prefers-reduced-motion: no-preference) {
  .bk-search:not([hidden]) { animation: bk-search-in 160ms ease-out; }
}
@keyframes bk-search-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .page-search, .bk-search__close, .bk-search__results a { transition: none; }
}

/* Content page controls and cards share the website's geometry. */
.content-page :is(.page-search input, .article-toc a) { min-height: 44px; }
.content-page input { font-size: 16px; }
.content-page input:focus-visible { outline: 2px solid #448ac7; outline-offset: 2px; }