:root {
  /* Surface */
  --ink: #2a2326;
  --ink-strong: #14110f;
  --muted: #544b4c;
  --line: rgba(20, 17, 15, 0.1);
  --paper: #f8f5f2;
  --paper-soft: #f3efeb;
  --cream: #fffcf9;
  --surface: rgba(255, 252, 249, 0.78);
  --surface-strong: rgba(255, 252, 249, 0.96);
  --glass: rgba(255, 252, 249, 0.72);
  --glass-strong: rgba(255, 252, 249, 0.92);

  /* Accent */
  --coral: #f57a68;
  --coral-deep: #f45d48;
  --coral-soft: rgba(244, 93, 72, 0.08);
  --teal: #078080;
  --teal-soft: rgba(7, 128, 128, 0.08);

  /* Typography stacks */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  --font-serif: "Source Serif 4", "Noto Serif SC", "Songti SC", "STSong", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Type scale (fluid) — clear rhythm: display > h1 > h2 > h3 > h4 */
  --fs-display: clamp(48px, 6.4vw, 80px);   /* Hero opening only */
  --fs-h1: clamp(34px, 4.2vw, 56px);        /* Page title (card detail) */
  --fs-h2: clamp(26px, 3vw, 40px);          /* Section heading */
  --fs-h3: clamp(20px, 1.9vw, 26px);        /* Subsection / card title */
  --fs-h4: 18px;                            /* Aside heading */
  --fs-lede: clamp(17px, 1.5vw, 21px);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-micro: 12px;

  /* Heading weights — distinct rhythm */
  --fw-display: 700;
  --fw-h1: 700;
  --fw-h2: 600;
  --fw-h3: 600;
  --fw-h4: 600;

  /* Line-heights */
  --lh-display: 1.08;
  --lh-h1: 1.14;
  --lh-h2: 1.2;
  --lh-h3: 1.32;
  --lh-h: 1.2;
  --lh-body: 1.7;
  --lh-tight: 1.3;

  /* Tracking */
  --tracking-display: -0.025em;
  --tracking-h1: -0.018em;
  --tracking-h2: -0.012em;
  --tracking-h3: -0.005em;
  --tracking-h: -0.01em;
  --tracking-eyebrow: 0.14em;

  /* Shadow */
  --shadow: 0 48px 150px rgba(51, 39, 42, 0.11);
  --shadow-tight: 0 18px 48px rgba(51, 39, 42, 0.08);
  --shadow-card: 0 30px 88px rgba(51, 39, 42, 0.18);
  --shadow-cta:
    0 24px 60px -10px rgba(244, 93, 72, 0.32),
    0 2px 4px 0 rgba(255, 255, 255, 0.18) inset;
  --shadow-soft: 0 1px 0 rgba(20, 17, 15, 0.03), 0 24px 60px -30px rgba(20, 17, 15, 0.18);

  /* Misc */
  --radius: 40px;
  --header-height: 72px;
  --container: 1240px;

  /* Level accents */
  --l0: #b03a4e;
  --l1: #1f5fbf;
  --l2: #d83386;
  --l3: #df4b42;
  --l4: #6941c6;
  --l5: #0f766e;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "ss01", "cv11";
  background:
    linear-gradient(180deg, rgba(255, 252, 249, 0.94) 0%, rgba(248, 245, 242, 0.96) 36%, rgba(243, 239, 235, 0.92) 100%),
    radial-gradient(circle at 18% 10%, rgba(245, 122, 104, 0.12), transparent 30%),
    radial-gradient(circle at 82% 14%, rgba(7, 128, 128, 0.08), transparent 34%),
    var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* === Typography baseline — page-wide rhythm === */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--ink-strong);
  margin: 0;
}
h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tracking-h1);
}
h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-h2);
}
h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tracking-h3);
}
h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-h4);
  line-height: 1.4;
  letter-spacing: 0;
}

p {
  font-family: var(--font-sans);
}

strong, b { font-weight: 600; }
em, i { font-style: italic; }

/* Eyebrow / micro labels */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--teal);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(51, 39, 42, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51, 39, 42, 0.026) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.18), transparent 68%);
}

.skip-link {
  position: fixed;
  left: 18px;
  top: 18px;
  z-index: 100;
  translate: 0 -72px;
  padding: 10px 14px;
  border-radius: 999px;
  color: var(--cream);
  background: var(--ink-strong);
  font-size: 14px;
  font-weight: 800;
  transition: translate 180ms ease;
}

.skip-link:focus {
  translate: 0 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.ambient {
  display: none;
}

.ambient-a {
  left: -160px;
  top: 160px;
  background: #b9c7d8;
}

.ambient-b {
  right: -120px;
  top: 420px;
  background: #d6dde7;
}

.ambient-c {
  left: 48%;
  bottom: -220px;
  background: #bfc8d5;
}

.site-header {
  position: sticky;
  top: 14px;
  z-index: 30;
  width: min(1240px, calc(100% - 40px));
  height: 64px;
  margin: 14px auto 0;
  padding: 6px 6px 6px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(20, 17, 15, 0.06);
  border-radius: 999px;
  background: rgba(248, 245, 242, 0.85);
  box-shadow: 0 1px 0 rgba(20, 17, 15, 0.03), 0 18px 50px -16px rgba(20, 17, 15, 0.12);
  backdrop-filter: blur(20px) saturate(1.18);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-strong);
}

.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  box-shadow: 0 6px 14px -4px rgba(244, 93, 72, 0.32), 0 1px 2px rgba(20, 17, 15, 0.06);
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-text strong {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.015em;
  color: var(--ink-strong);
}

.brand-text em {
  margin-top: 4px;
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(20, 17, 15, 0.5);
}

.top-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  color: rgba(20, 17, 15, 0.66);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.top-nav a {
  padding: 10px 14px;
  border-radius: 999px;
  transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.top-nav a:hover {
  background: rgba(255, 252, 249, 0.72);
  color: var(--ink-strong);
}

.top-nav a:last-child {
  color: var(--cream);
  background: linear-gradient(180deg, var(--coral) 0%, var(--coral-deep) 100%);
  box-shadow: 0 8px 20px -4px rgba(244, 93, 72, 0.42), inset 0 1px 2px rgba(255, 255, 255, 0.18);
  padding: 10px 18px;
  font-weight: 500;
}

.top-nav a:last-child:hover {
  background: linear-gradient(180deg, var(--coral) 0%, var(--coral-deep) 100%);
  box-shadow: 0 12px 28px -4px rgba(244, 93, 72, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

.hero {
  width: min(1180px, calc(100% - 40px));
  min-height: auto;
  margin: 0 auto;
  padding: clamp(42px, 5vw, 70px) 0 70px;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(34px, 5vw, 54px);
  align-items: start;
}

.hero-copy {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.hero .eyebrow {
  margin: 0 auto 22px;
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--teal-soft);
  box-shadow: inset 0 0 0 1px rgba(7, 128, 128, 0.22);
}

.hero h1 {
  margin: 0;
  max-width: 1120px;
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--ink-strong);
}

/* Chinese display weight needs to be bumped for Noto Serif SC at the same visual weight as Source Serif 4 600 */
.hero h1,
.section-heading h2,
.institution-copy h2,
.stack-intro h3 {
  font-feature-settings: "ss01", "cv11";
}

.hero-lede {
  max-width: 660px;
  margin: 26px auto 0;
  color: rgba(20, 17, 15, 0.62);
  font-family: var(--font-sans);
  font-size: var(--fs-lede);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.005em;
}

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 540px;
  gap: 0;
  justify-content: center;
  margin: 56px auto 0;
  padding: 22px 0;
  border-top: 1px solid rgba(20, 17, 15, 0.08);
  border-bottom: 1px solid rgba(20, 17, 15, 0.08);
}

.hero-metrics div {
  padding: 0 14px;
  border-right: 1px solid rgba(20, 17, 15, 0.06);
  text-align: center;
}

.hero-metrics div:last-child {
  border-right: 0;
}

.hero-metrics dt {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}

.hero-metrics dd {
  margin: 10px 0 0;
  color: rgba(20, 17, 15, 0.55);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}

.button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 26px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 0;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms cubic-bezier(.2,.8,.2,1), background 180ms ease;
  cursor: pointer;
}

.button:hover {
  transform: translateY(-1px);
}

.button.primary {
  color: var(--cream);
  background: linear-gradient(180deg, var(--coral) 0%, var(--coral-deep) 100%);
  box-shadow: var(--shadow-cta);
}

.button.primary:hover {
  box-shadow:
    0 32px 80px -10px rgba(244, 93, 72, 0.45),
    0 2px 4px 0 rgba(255, 255, 255, 0.22) inset;
}

.button.ghost {
  color: var(--ink-strong);
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(20, 17, 15, 0.18);
}

.button.ghost:hover {
  background: rgba(255, 252, 249, 0.6);
  box-shadow: inset 0 0 0 1px rgba(20, 17, 15, 0.32);
}

.button.buy {
  gap: 8px;
  color: var(--cream);
  background: linear-gradient(180deg, #1f8a8a 0%, var(--teal) 100%);
  box-shadow:
    0 24px 60px -10px rgba(7, 128, 128, 0.32),
    0 2px 4px 0 rgba(255, 255, 255, 0.18) inset;
}

.button.buy:hover {
  box-shadow:
    0 32px 80px -10px rgba(7, 128, 128, 0.45),
    0 2px 4px 0 rgba(255, 255, 255, 0.22) inset;
}

.button.buy svg {
  flex-shrink: 0;
}

.hero-stage {
  position: relative;
  width: min(1100px, 100%);
  min-height: clamp(420px, 48vw, 580px);
  margin: 0 auto;
  perspective: 1400px;
}

/* warm radial wash behind cards — no visible frame */
.hero-stage::before {
  content: "";
  position: absolute;
  inset: -60px -8% 20%;
  background:
    radial-gradient(ellipse 60% 40% at 50% 40%, rgba(245, 122, 104, 0.16), transparent 70%),
    radial-gradient(ellipse 40% 30% at 18% 55%, rgba(7, 128, 128, 0.10), transparent 70%),
    radial-gradient(ellipse 40% 30% at 82% 55%, rgba(244, 93, 72, 0.10), transparent 70%);
  filter: blur(4px);
  pointer-events: none;
  z-index: 0;
}

.floating-card {
  position: absolute;
  width: min(24vw, 250px);
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 1px 1px rgba(20, 17, 15, 0.03),
    0 8px 14px -6px rgba(20, 17, 15, 0.08),
    0 32px 60px -20px rgba(20, 17, 15, 0.22);
  background: transparent;
  animation: floaty 10s ease-in-out infinite;
  z-index: 1;
}

.floating-card img {
  display: block;
  width: 100%;
}

.card-one {
  left: 4%;
  top: 14%;
  z-index: 2;
  transform: rotate(-7deg);
}

.card-two {
  left: 50%;
  top: 2%;
  z-index: 5;
  width: min(28vw, 296px);
  transform: translateX(-50%) rotate(2deg);
  animation-delay: -3s;
}

.card-three {
  right: 4%;
  top: 18%;
  z-index: 1;
  transform: rotate(8deg);
  animation-delay: -5.5s;
}

@keyframes floaty {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -16px; }
}

.reveal-ready {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  filter: blur(8px);
  transition:
    opacity 700ms cubic-bezier(.2, .8, .2, 1),
    transform 700ms cubic-bezier(.2, .8, .2, 1),
    filter 700ms cubic-bezier(.2, .8, .2, 1);
}

.reveal-ready.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.hero-copy.reveal-ready {
  transition-delay: 70ms;
}

.hero-stage.reveal-ready {
  transition-delay: 180ms;
}

.section {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(82px, 8vw, 116px) 0;
}

.institution-band {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(36px, 4vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(460px, 1.05fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  border: 1px solid rgba(20, 17, 15, 0.06);
  border-radius: 40px;
  background:
    linear-gradient(145deg, rgba(255, 252, 249, 0.94), rgba(243, 239, 235, 0.7)),
    var(--paper-soft);
  box-shadow: 0 1px 0 rgba(20, 17, 15, 0.03), 0 28px 80px -20px rgba(20, 17, 15, 0.12);
}

.institution-copy .eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--teal-soft);
  box-shadow: inset 0 0 0 1px rgba(7, 128, 128, 0.22);
}

.institution-copy h2 {
  max-width: 580px;
  margin: 18px 0 0;
  font-family: var(--font-serif);
  font-weight: var(--fw-h1);
  color: var(--ink-strong);
  line-height: var(--lh-h1);
  letter-spacing: var(--tracking-h1);
}

.institution-copy h2 .line-1 {
  display: block;
  font-size: var(--fs-h1);
  font-weight: var(--fw-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tracking-h1);
}

.institution-copy h2 .line-2 {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: rgba(20, 17, 15, 0.62);
}

.institution-copy p:not(.eyebrow) {
  max-width: 600px;
  margin: 20px 0 0;
  color: rgba(20, 17, 15, 0.62);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.72;
}

.institution-credit {
  max-width: 640px !important;
  margin-top: 26px !important;
  padding-top: 20px;
  border-top: 1px solid rgba(20, 17, 15, 0.08);
  color: rgba(20, 17, 15, 0.5) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
}

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

.proof-item {
  min-height: 160px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(20, 17, 15, 0.06);
  border-radius: 24px;
  background: var(--cream);
  box-shadow: 0 1px 0 rgba(20, 17, 15, 0.02), 0 18px 40px -22px rgba(20, 17, 15, 0.16);
  transition: transform 240ms cubic-bezier(.2,.8,.2,1), box-shadow 240ms ease;
}

.proof-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(20, 17, 15, 0.04), 0 32px 70px -28px rgba(20, 17, 15, 0.24);
}

.proof-buy {
  color: inherit;
  text-decoration: none;
  position: relative;
  background: linear-gradient(180deg, var(--cream) 0%, #fff7f5 100%);
  border-color: rgba(244, 93, 72, 0.2);
}

.proof-buy span { color: var(--coral-deep); }
.proof-buy strong { color: var(--coral-deep); }
.proof-buy::after {
  content: "→";
  position: absolute;
  right: 22px;
  top: 22px;
  color: var(--coral-deep);
  font-size: 18px;
  opacity: 0.7;
  transition: transform 220ms ease;
}
.proof-buy:hover::after { transform: translateX(4px); opacity: 1; }

.proof-item span {
  color: var(--teal);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.proof-item strong {
  display: block;
  margin: 20px 0 10px;
  color: var(--ink-strong);
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: var(--fw-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tracking-h3);
}

.proof-item em {
  color: rgba(20, 17, 15, 0.55);
  font-family: var(--font-sans);
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.55;
}

/* === Section heading === */
.section-heading {
  max-width: 780px;
  margin-bottom: 36px;
}

.section-heading.compact {
  margin-bottom: 22px;
}

.section-heading.centered {
  max-width: 880px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.section-heading .eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--teal-soft);
  box-shadow: inset 0 0 0 1px rgba(7, 128, 128, 0.22);
  margin-bottom: 18px;
}

.section-heading h2 {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-h2);
}

.section-heading p:not(.eyebrow) {
  max-width: 640px;
  margin: 18px 0 0;
  color: rgba(20, 17, 15, 0.6);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
}

.section-heading.centered p:not(.eyebrow) {
  margin-left: auto;
  margin-right: auto;
}

/* === Stack thesis — single centered statement above L0-L5 map === */
.stack-thesis {
  position: relative;
  max-width: 720px;
  margin: 0 auto 36px;
  padding: 28px 36px;
  text-align: center;
}

.stack-thesis::before,
.stack-thesis::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(20, 17, 15, 0.18), transparent);
}

.stack-thesis::before { left: 0; }
.stack-thesis::after  { right: 0; }

.stack-thesis p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--ink-strong);
}

.stack-thesis p strong,
.stack-thesis p em {
  font-style: normal;
  color: var(--coral-deep);
  font-weight: 600;
}

.level-map {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(20, 17, 15, 0.06);
  border-radius: 32px;
  background: rgba(255, 252, 249, 0.5);
  box-shadow: 0 1px 0 rgba(20, 17, 15, 0.03), 0 28px 80px -28px rgba(20, 17, 15, 0.14);
}

.level-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 244px;
  padding: 24px 22px 22px;
  overflow: hidden;
  border: 1px solid rgba(20, 17, 15, 0.05);
  border-radius: 18px;
  background: var(--cream);
  box-shadow: 0 1px 0 rgba(20, 17, 15, 0.02);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  transition: transform 280ms cubic-bezier(.2,.8,.2,1), box-shadow 280ms ease, border-color 280ms ease;
}

.level-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 58%);
  opacity: 0;
  transition: opacity 220ms ease;
}

/* soft accent wash from bottom — replaces the old top stripe */
.level-tile::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 9%, transparent));
  pointer-events: none;
  z-index: 0;
}

.level-tile:hover,
.level-tile:focus-visible {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 28%, rgba(20, 17, 15, 0.06));
  box-shadow: 0 1px 1px rgba(20, 17, 15, 0.04), 0 32px 70px -24px rgba(20, 17, 15, 0.22);
}

.level-tile:hover::before,
.level-tile:focus-visible::before {
  opacity: 1;
}

.level-tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
}

.level-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--cream);
  background: var(--accent);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.level-count {
  padding: 4px 10px;
  border-radius: 999px;
  color: rgba(20, 17, 15, 0.55);
  background: rgba(20, 17, 15, 0.05);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.level-name {
  position: relative;
  z-index: 1;
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
}

.level-desc {
  position: relative;
  z-index: 1;
  margin: 0;
  flex: 1;
  color: rgba(20, 17, 15, 0.6);
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.6;
}

.level-outcome {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 20px;
  padding: 5px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: color-mix(in srgb, var(--accent) 78%, #14110f);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.level-outcome::before {
  content: "→";
  margin-right: 6px;
  font-weight: 500;
  opacity: 0.7;
}

.benefits-section {
  width: min(1240px, calc(100% - 40px));
}

/* === Why journey — 3 sequential steps with connectors === */
.why-journey {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 24px);
  position: relative;
  counter-reset: why;
}

.why-step {
  position: relative;
  padding: 40px 32px 32px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--cream);
  box-shadow: var(--shadow-soft);
  transition: transform 280ms cubic-bezier(.2,.8,.2,1), box-shadow 280ms ease, border-color 280ms ease;
  overflow: hidden;
}

.why-step::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--coral), var(--coral-deep));
}

.why-step:nth-child(2)::before {
  background: linear-gradient(90deg, #d8a45c, #c47a2b);
}

.why-step:nth-child(3)::before {
  background: linear-gradient(90deg, var(--teal), #0a5f5f);
}

.why-step:hover {
  transform: translateY(-4px);
  border-color: rgba(20, 17, 15, 0.12);
  box-shadow: 0 1px 0 rgba(20, 17, 15, 0.04), 0 40px 90px -32px rgba(20, 17, 15, 0.24);
}

/* connector arrows between steps — positioned on .why-journey so they're not clipped by .why-step's overflow:hidden */
.why-connector {
  position: absolute;
  top: 84px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--ink-strong);
  background: var(--surface-strong);
  border: 1px solid rgba(20, 17, 15, 0.08);
  box-shadow: 0 8px 24px -8px rgba(20, 17, 15, 0.18), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
  z-index: 3;
  pointer-events: none;
  transition: transform 280ms cubic-bezier(.2,.8,.2,1);
}

.why-connector svg {
  width: 18px;
  height: 18px;
}

.why-connector-1 {
  left: calc(33.333% - 20px);
  color: #b86d1f;
}
.why-connector-2 {
  left: calc(66.666% - 20px);
  color: var(--teal);
}

.why-journey:hover .why-connector { transform: translateX(2px); }

.why-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.why-num {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--coral-deep);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.why-step:nth-child(2) .why-num { color: #b86d1f; }
.why-step:nth-child(3) .why-num { color: var(--teal); }

.why-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--coral-soft);
  color: var(--coral-deep);
}

.why-step:nth-child(2) .why-icon {
  background: rgba(196, 122, 43, 0.1);
  color: #b86d1f;
}

.why-step:nth-child(3) .why-icon {
  background: var(--teal-soft);
  color: var(--teal);
}

.why-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.6;
}

.why-step h3 {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: var(--fw-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tracking-h3);
  color: var(--ink-strong);
}

.why-step p {
  margin: 0 0 28px;
  flex: 1;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(20, 17, 15, 0.62);
}

.why-anchor {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(20, 17, 15, 0.04);
  color: rgba(20, 17, 15, 0.7);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.why-step:nth-child(1) .why-anchor { background: var(--coral-soft); color: var(--coral-deep); }
.why-step:nth-child(2) .why-anchor { background: rgba(196, 122, 43, 0.1); color: #b86d1f; }
.why-step:nth-child(3) .why-anchor { background: var(--teal-soft); color: var(--teal); }

.why-anchor::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.55;
}

@media (max-width: 980px) {
  .why-journey {
    grid-template-columns: 1fr;
  }
  .why-step:not(:last-child)::after {
    content: "↓";
    right: 50%;
    top: auto;
    bottom: -16px;
    transform: translateX(50%);
  }
}

.filter-bar {
  position: sticky;
  top: 96px;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  margin-bottom: 28px;
  border: 1px solid rgba(20, 17, 15, 0.06);
  border-radius: 999px;
  background: rgba(248, 245, 242, 0.92);
  backdrop-filter: blur(20px) saturate(1.18);
  box-shadow: 0 1px 0 rgba(20, 17, 15, 0.03), 0 14px 38px -10px rgba(20, 17, 15, 0.1);
}

.filter-button {
  border: 0;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  color: rgba(20, 17, 15, 0.66);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.filter-button:hover {
  color: var(--ink-strong);
  background: rgba(255, 252, 249, 0.6);
}

.filter-button.active {
  color: var(--cream);
  background: var(--ink-strong);
  box-shadow: 0 4px 10px -2px rgba(20, 17, 15, 0.25);
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(16px, 2vw, 26px);
  align-items: start;
}

.cards-grid.grouped {
  display: block;
}

.card-level-group {
  content-visibility: auto;
  contain-intrinsic-size: 920px;
  margin-top: 52px;
  scroll-margin-top: 170px;
}

.card-level-group:first-child {
  margin-top: 0;
}

.card-level-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
  padding: 0 2px 18px;
  border-bottom: 1px solid rgba(20, 17, 15, 0.08);
}

.card-level-header h3 {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-serif);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.2;
}

.card-level-header p {
  margin: 8px 0 0;
  max-width: 580px;
  color: rgba(20, 17, 15, 0.6);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
}

.card-level-count {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--accent) 78%, #14110f);
  background: color-mix(in srgb, var(--accent) 8%, var(--cream));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, rgba(20, 17, 15, 0.06));
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.card-level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(16px, 2vw, 26px);
}

/* Card grid item — two flat images (front by default, crossfade to back on hover).
   No 3D rotation, so back image is shown as a normal image, not mirrored. */
.flip-card {
  position: relative;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  display: block;
}

.flip-inner {
  display: block;
  position: relative;
  aspect-ratio: 2520 / 3520;
  border-radius: 10px;
  overflow: hidden;
  background: var(--cream);
  box-shadow:
    0 1px 1px rgba(20, 17, 15, 0.03),
    0 6px 12px -4px rgba(20, 17, 15, 0.06),
    0 20px 36px -16px rgba(20, 17, 15, 0.18);
  transition: transform 320ms cubic-bezier(.2,.8,.2,1), box-shadow 320ms cubic-bezier(.2,.8,.2,1);
}

.flip-card:hover .flip-inner,
.flip-card:focus-visible .flip-inner {
  transform: translateY(-6px);
  box-shadow:
    0 1px 1px rgba(20, 17, 15, 0.04),
    0 8px 18px -4px rgba(20, 17, 15, 0.08),
    0 36px 70px -20px rgba(20, 17, 15, 0.26);
}

.flip-face {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: opacity 380ms cubic-bezier(.2,.8,.2,1);
}

.flip-face.back {
  opacity: 0;
}

.flip-card:hover .flip-face.front,
.flip-card:focus-visible .flip-face.front {
  opacity: 0;
}

.flip-card:hover .flip-face.back,
.flip-card:focus-visible .flip-face.back {
  opacity: 1;
}

.flip-face img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* small "正/反" badge appears on hover */
.flip-card::after {
  content: "正";
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 3;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 252, 249, 0.92);
  color: rgba(20, 17, 15, 0.7);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0;
  transition: opacity 220ms ease;
  backdrop-filter: blur(6px);
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(20, 17, 15, 0.08);
}

.flip-card:hover::after,
.flip-card:focus-visible::after {
  content: "反";
  opacity: 1;
  background: var(--ink-strong);
  color: var(--cream);
}

.card-caption {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  min-height: 46px;
  margin-top: 14px;
  padding: 0 2px;
}

.card-id {
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--cream);
  background: color-mix(in srgb, var(--accent) 86%, #14110f);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.card-title {
  color: rgba(20, 17, 15, 0.85);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

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

.card-page-main {
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto;
  padding: 72px 0 110px;
}

.card-detail-hero {
  display: grid;
  grid-template-columns: minmax(340px, 460px) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
  padding-top: 8px;
}

.card-detail-media {
  position: sticky;
  top: 104px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Two flat images, switched by tabs (click) or hover — no 3D rotation, no mirroring */
.detail-image-frame {
  position: relative;
  border-radius: 22px;
  padding: 0;
  background: transparent;
  overflow: hidden;
  cursor: pointer;
}

/* hover on the image area: swap to back; leaving: swap back. Tab clicks override and lock. */
.detail-image-frame:hover .detail-image-face[data-side="front"],
.detail-image-frame:focus-within .detail-image-face[data-side="front"] {
  opacity: 0;
}
.detail-image-frame:hover .detail-image-face[data-side="back"],
.detail-image-frame:focus-within .detail-image-face[data-side="back"] {
  opacity: 1;
}

/* when a tab is locked, hover behaviour is suppressed */
.detail-image-frame.is-locked-front .detail-image-face[data-side="front"] { opacity: 1 !important; }
.detail-image-frame.is-locked-front .detail-image-face[data-side="back"] { opacity: 0 !important; }
.detail-image-frame.is-locked-back .detail-image-face[data-side="front"] { opacity: 0 !important; }
.detail-image-frame.is-locked-back .detail-image-face[data-side="back"] { opacity: 1 !important; }

.detail-image-stack {
  position: relative;
  aspect-ratio: 2520 / 3520;
  border-radius: 22px;
  overflow: hidden;
  background: var(--cream);
  box-shadow:
    0 1px 1px rgba(20, 17, 15, 0.04),
    0 10px 22px -6px rgba(20, 17, 15, 0.1),
    0 40px 80px -24px rgba(20, 17, 15, 0.26);
}

.detail-image-face {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity 280ms cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}

.detail-image-face.is-active {
  opacity: 1;
  pointer-events: auto;
}

.detail-image-face img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.detail-side-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  align-self: flex-start;
  border-radius: 999px;
  background: rgba(20, 17, 15, 0.06);
}

.detail-side-tab {
  min-height: 32px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(20, 17, 15, 0.6);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

.detail-side-tab:hover {
  color: var(--ink-strong);
}

.detail-side-tab.is-active {
  color: var(--cream);
  background: var(--ink-strong);
}

.detail-hover-note {
  margin: 0;
  color: rgba(20, 17, 15, 0.5);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.card-detail-copy {
  min-width: 0;
  padding-top: 4px;
}

/* Top nav row on detail page: back + prev/next quick switch */
.detail-top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(20, 17, 15, 0.04);
  color: rgba(20, 17, 15, 0.6);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background 180ms ease, color 180ms ease;
}

.back-link::before {
  content: "←";
  font-size: 14px;
  line-height: 1;
}

.back-link:hover {
  background: rgba(20, 17, 15, 0.08);
  color: var(--ink-strong);
}

.quick-nav {
  display: inline-flex;
  gap: 6px;
}

.quick-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--cream);
  border: 1px solid rgba(20, 17, 15, 0.08);
  color: rgba(20, 17, 15, 0.7);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.quick-nav-btn .quick-nav-arrow {
  font-size: 14px;
  line-height: 1;
  color: var(--coral-deep);
}

.quick-nav-btn .quick-nav-label {
  color: rgba(20, 17, 15, 0.48);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.quick-nav-btn .quick-nav-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-strong);
  letter-spacing: 0.02em;
}

.quick-nav-btn:hover {
  background: var(--ink-strong);
  border-color: var(--ink-strong);
  color: var(--cream);
}

.quick-nav-btn:hover .quick-nav-arrow,
.quick-nav-btn:hover .quick-nav-label,
.quick-nav-btn:hover .quick-nav-id {
  color: var(--cream);
}

.quick-nav-btn[aria-disabled="true"] {
  opacity: 0.35;
  pointer-events: none;
}

.card-detail-copy .drawer-kicker {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: var(--coral-soft);
  color: var(--coral-deep);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.card-detail-copy h1 {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  font-weight: var(--fw-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tracking-h1);
  max-width: 720px;
}

.card-detail-copy .english {
  margin: 16px 0 0;
  color: rgba(20, 17, 15, 0.48);
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.6vw, 19px);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.4;
}

.detail-sections {
  display: grid;
  gap: 14px;
  margin-top: 34px;
}

.detail-section-card {
  padding: 22px;
  border: 1px solid rgba(51, 39, 42, 0.08);
  border-radius: 28px;
  background: rgba(255, 252, 249, 0.66);
  box-shadow: 0 18px 48px rgba(51, 39, 42, 0.08);
  backdrop-filter: blur(22px) saturate(1.14);
}

.detail-section-card h2 {
  margin: 0 0 10px;
  font-size: 20px;
}

.detail-section-card p {
  margin: 0;
  color: rgba(51, 39, 42, 0.68);
  line-height: 1.78;
}

.hero-brief {
  margin-top: 36px;
  padding: 28px;
  border: 1px solid rgba(20, 17, 15, 0.06);
  border-radius: 24px;
  background: var(--cream);
  box-shadow: 0 1px 0 rgba(20, 17, 15, 0.02), 0 24px 60px -30px rgba(20, 17, 15, 0.18);
}

.hero-brief-label {
  margin: 0 0 14px;
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.hero-brief p:not(.hero-brief-label) {
  margin: 0;
  color: rgba(20, 17, 15, 0.7);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
}

.hero-brief blockquote {
  margin: 22px 0 0;
  padding: 18px 22px;
  border-left: 3px solid var(--accent);
  border-radius: 4px 14px 14px 4px;
  color: var(--ink-strong);
  background: var(--paper-soft);
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  font-style: italic;
  line-height: 1.5;
  letter-spacing: -0.005em;
}

.quote-stack {
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
}

.quote-stack.compact {
  margin-top: 0;
}

.quote-stack blockquote {
  margin: 0;
  padding: 16px 20px;
  border-left: 3px solid var(--accent);
  border-radius: 2px 14px 14px 2px;
  color: var(--ink-strong);
  background: var(--paper-soft);
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  font-style: italic;
  line-height: 1.5;
  letter-spacing: -0.005em;
}

.clean-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.clean-list li {
  position: relative;
  padding-left: 22px;
  color: rgba(20, 17, 15, 0.72);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
}

.clean-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(200px, 220px) minmax(0, 1fr);
  gap: clamp(36px, 4vw, 64px);
  margin-top: 80px;
}

.article-aside {
  position: sticky;
  top: 104px;
  align-self: start;
}

.article-aside-card {
  padding: 22px;
  border: 1px solid rgba(20, 17, 15, 0.06);
  border-radius: 20px;
  background: var(--cream);
  box-shadow: 0 1px 0 rgba(20, 17, 15, 0.02), 0 18px 40px -22px rgba(20, 17, 15, 0.12);
}

.article-aside-card h2 {
  margin: 0 0 14px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--teal);
}

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

.article-toc a {
  padding: 10px 12px;
  border-radius: 10px;
  color: rgba(20, 17, 15, 0.7);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: color 180ms ease, background 180ms ease;
}

.article-toc a:hover {
  color: var(--ink-strong);
  background: rgba(20, 17, 15, 0.04);
}

.article-body {
  display: grid;
  gap: 24px;
  /* fills the full right column (no max-width).
     long-form text still constrained inside .longform for readability. */
}

.article-block {
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid rgba(20, 17, 15, 0.06);
  border-radius: 24px;
  background: var(--cream);
  box-shadow: 0 1px 0 rgba(20, 17, 15, 0.02), 0 22px 50px -28px rgba(20, 17, 15, 0.14);
  scroll-margin-top: 120px;
}

.article-block h2 {
  margin: 0 0 18px;
  color: var(--ink-strong);
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-h2);
}

.article-block h3 {
  margin: 28px 0 12px;
  color: var(--ink-strong);
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: var(--fw-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tracking-h3);
}

.article-block p {
  margin: 0;
  color: rgba(20, 17, 15, 0.74);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: -0.002em;
}

.article-block p strong,
.longform strong {
  color: var(--ink-strong);
  font-weight: 700;
}

.definition-text strong {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  padding: 1px 6px;
  border-radius: 4px;
}

.article-block p + p {
  margin-top: 16px;
}

.lead-block {
  background: var(--cream);
}

.definition-text {
  color: var(--ink-strong) !important;
  font-family: var(--font-serif) !important;
  font-size: clamp(20px, 2vw, 26px) !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  letter-spacing: var(--tracking-h) !important;
}

.question-block {
  background: color-mix(in srgb, var(--accent) 5%, var(--cream));
}

.manuscript-block {
  padding-top: clamp(34px, 5vw, 56px);
}

.product-block {
  background: var(--cream);
}

.article-kicker {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 11px !important;
  margin: 0 0 16px !important;
  border-radius: 999px !important;
  background: var(--coral-soft) !important;
  color: var(--coral-deep) !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: var(--tracking-eyebrow) !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
}

.longform {
  max-width: 720px;
}

.longform p {
  color: rgba(20, 17, 15, 0.74);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.85;
}

.longform strong {
  color: var(--ink-strong);
  font-weight: 600;
  background: linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--accent) 30%, transparent) 62%);
  padding: 0 1px;
  border-radius: 2px;
}

.longform em {
  color: var(--ink-strong);
  font-style: normal;
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  padding: 1px 6px;
  border-radius: 4px;
  margin: 0 2px;
}

.longform mark {
  color: var(--ink-strong);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  padding: 1px 6px;
  border-radius: 4px;
}

.article-subsection {
  padding-top: 6px;
}

.article-subsection + .article-subsection {
  margin-top: 36px;
  padding-top: 36px;
  border-top: 1px solid rgba(20, 17, 15, 0.08);
}

.article-subsection h3 {
  position: relative;
  margin: 0 0 18px;
  padding: 8px 14px 8px 18px;
  color: var(--ink-strong);
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: var(--fw-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tracking-h3);
  background: color-mix(in srgb, var(--accent) 6%, var(--cream));
  border-left: 4px solid var(--accent);
  border-radius: 2px 10px 10px 2px;
}

.article-subsection h3::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%);
}

.article-subsection h3 > span {
  position: relative;
}

/* === Article collapse / expand === */
.article-collapse {
  margin-top: 28px;
  position: relative;
}

.article-collapse[data-collapsed="true"]::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -64px;
  height: 64px;
  background: linear-gradient(180deg, transparent, var(--cream) 80%);
  pointer-events: none;
}

.article-collapse-content {
  /* Reset top spacing so first revealed subsection still gets the divider treatment */
}

.article-collapse-content .article-subsection:first-child {
  margin-top: 36px;
  padding-top: 36px;
  border-top: 1px solid rgba(20, 17, 15, 0.08);
}

.article-collapse-toggle {
  margin: 28px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink-strong);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.article-collapse-toggle:hover {
  background: var(--paper-soft);
  border-color: rgba(20, 17, 15, 0.16);
  transform: translateY(-1px);
}

.article-collapse-chevron {
  transition: transform 220ms ease;
}

.article-collapse[data-collapsed="false"] .article-collapse-chevron {
  transform: rotate(180deg);
}

.pull-quote {
  max-width: 720px;
  margin: 6px 0 32px;
  padding: 26px 28px;
  border-left: 3px solid var(--accent);
  border-radius: 2px 18px 18px 2px;
  color: var(--ink-strong);
  background: color-mix(in srgb, var(--accent) 5%, var(--cream));
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.1vw, 26px);
  font-weight: 500;
  font-style: italic;
  line-height: 1.45;
  letter-spacing: -0.005em;
}

.reader-guide {
  background: var(--cream);
}

.reader-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-top: 26px;
  padding: 18px 22px;
  border-radius: 14px;
  background: rgba(20, 17, 15, 0.04);
}

.reader-note strong {
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  padding-top: 3px;
}

.reader-note span {
  color: rgba(20, 17, 15, 0.74);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
}

.reflect-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 12px;
}

.reflect-list li {
  position: relative;
  padding: 16px 18px 16px 52px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 5%, var(--cream));
  border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--ink-strong);
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.7;
  counter-increment: reflect-q;
}

.reflect-list {
  counter-reset: reflect-q;
}

.reflect-list li::before {
  content: counter(reflect-q, decimal-leading-zero);
  position: absolute;
  left: 16px;
  top: 16px;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--cream);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 6px;
  padding: 2px 6px;
  line-height: 1.2;
}

.method-action-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 16px;
  margin-top: 20px;
}

.method-action-grid section,
.tool-entry {
  padding: 22px;
  border-radius: 18px;
  background: rgba(20, 17, 15, 0.035);
}

.method-action-grid h3,
.tool-entry h3 {
  margin: 0 0 14px !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: var(--tracking-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--teal) !important;
  line-height: 1.4 !important;
}

.method-action-grid p {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  color: rgba(20, 17, 15, 0.72);
}

.tool-entry {
  margin-top: 18px;
}

.tag-block {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 18px;
}

.content-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  color: rgba(20, 17, 15, 0.66);
  background: var(--cream);
  border: 1px solid rgba(20, 17, 15, 0.08);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
}

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

.article-mini {
  padding: 16px;
  border-radius: 22px;
  background: rgba(51, 39, 42, 0.045);
}

.article-mini strong {
  display: block;
  margin-bottom: 6px;
}

.article-mini span {
  color: rgba(51, 39, 42, 0.62);
  line-height: 1.58;
}

.related-section {
  margin-top: 80px;
}

.related-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(20, 17, 15, 0.08);
}

.related-header h2 {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 500;
  letter-spacing: var(--tracking-h);
  line-height: 1.2;
}

.related-header p {
  margin: 10px 0 0;
  color: rgba(20, 17, 15, 0.6);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
}

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

.related-card {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(20, 17, 15, 0.06);
  border-radius: 20px;
  background: var(--cream);
  box-shadow: 0 1px 0 rgba(20, 17, 15, 0.02), 0 14px 32px -20px rgba(20, 17, 15, 0.12);
  transition: transform 240ms cubic-bezier(.2,.8,.2,1), box-shadow 240ms ease;
}

.related-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(20, 17, 15, 0.04), 0 28px 60px -22px rgba(20, 17, 15, 0.22);
}

.related-card img {
  width: 70px;
  aspect-ratio: 2520 / 3520;
  object-fit: cover;
  object-position: top;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(20, 17, 15, 0.03), 0 8px 14px -4px rgba(20, 17, 15, 0.12);
  grid-row: 1 / 3;
}

.related-card strong {
  display: block;
  grid-column: 2;
  margin-bottom: 8px;
  color: var(--ink-strong);
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.005em;
}

.related-card span {
  display: inline-flex;
  grid-column: 2;
  width: fit-content;
  padding: 3px 8px;
  border-radius: 6px;
  color: var(--cream);
  background: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.post-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 36px;
}

.post-nav-link {
  padding: 22px;
  min-height: 100px;
  border: 1px solid rgba(20, 17, 15, 0.06);
  border-radius: 20px;
  background: var(--cream);
  box-shadow: 0 1px 0 rgba(20, 17, 15, 0.02), 0 14px 32px -20px rgba(20, 17, 15, 0.1);
  transition: transform 240ms cubic-bezier(.2,.8,.2,1), box-shadow 240ms ease;
}

.post-nav-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(20, 17, 15, 0.04), 0 28px 60px -22px rgba(20, 17, 15, 0.2);
}

.post-nav-link.next {
  text-align: right;
}

.post-nav-label {
  display: block;
  margin-bottom: 10px;
  color: rgba(20, 17, 15, 0.5);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.post-nav-title {
  color: var(--ink-strong);
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.tool-item {
  padding: 26px;
  min-height: 196px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(20, 17, 15, 0.06);
  border-radius: 24px;
  background: var(--cream);
  box-shadow: 0 1px 0 rgba(20, 17, 15, 0.02), 0 18px 40px -22px rgba(20, 17, 15, 0.14);
  cursor: pointer;
  transition: transform 240ms cubic-bezier(.2,.8,.2,1), box-shadow 240ms ease, border-color 240ms ease;
}

.tool-item:hover,
.tool-item:focus-visible {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 22%, rgba(20, 17, 15, 0.06));
  box-shadow: 0 1px 0 rgba(20, 17, 15, 0.04), 0 32px 70px -28px rgba(20, 17, 15, 0.22);
}

.tool-item span {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 10px;
  color: color-mix(in srgb, var(--accent) 78%, #14110f);
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 8%, var(--cream));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, rgba(20, 17, 15, 0.06));
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.tool-item h3 {
  margin: 18px 0 10px;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.25;
  color: var(--ink-strong);
}

.tool-item p {
  margin: 0;
  flex: 1;
  color: rgba(20, 17, 15, 0.6);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
}

.detail-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
}

.detail-drawer.open {
  display: block;
}

.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(51, 39, 42, 0.32);
  backdrop-filter: blur(14px);
}

.drawer-panel {
  position: absolute;
  right: 16px;
  top: 16px;
  bottom: 16px;
  width: min(1040px, calc(100% - 32px));
  display: grid;
  grid-template-columns: minmax(300px, 430px) minmax(0, 1fr);
  gap: 26px;
  padding: 22px;
  overflow: auto;
  border: 1px solid rgba(51, 39, 42, 0.08);
  border-radius: 34px;
  background: rgba(255, 252, 249, 0.86);
  box-shadow: 0 34px 110px rgba(51, 39, 42, 0.26);
  backdrop-filter: blur(30px) saturate(1.22);
}

.close-button {
  position: sticky;
  top: 0;
  z-index: 2;
  justify-self: end;
  grid-column: 1 / -1;
  margin-left: auto;
}

.icon-button {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(51, 39, 42, 0.08);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 252, 249, 0.76);
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}

.drawer-media {
  align-self: start;
  position: sticky;
  top: 62px;
}

.media-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: rgba(51, 39, 42, 0.06);
}

.media-tab {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(51, 39, 42, 0.62);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.media-tab.active {
  color: var(--cream);
  background: var(--ink-strong);
}

.drawer-media img {
  width: 100%;
  border-radius: 26px;
  box-shadow: 0 18px 48px rgba(51, 39, 42, 0.2);
}

.drawer-content {
  padding: 6px 8px 34px 0;
}

.drawer-kicker {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
}

.drawer-content h2 {
  margin: 0;
  color: var(--ink-strong);
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.04;
  letter-spacing: 0;
}

.drawer-subtitle {
  margin: 14px 0 0;
  color: rgba(51, 39, 42, 0.56);
  font-size: 18px;
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 26px 0 32px;
}

.meta-pill {
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(20, 17, 15, 0.05);
  color: rgba(20, 17, 15, 0.65);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.drawer-content section {
  padding: 20px 0;
  border-top: 1px solid rgba(51, 39, 42, 0.1);
}

.drawer-content h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.drawer-content p {
  margin: 0;
  color: rgba(51, 39, 42, 0.7);
  line-height: 1.75;
}

/* === Footer === */
.site-footer {
  width: 100%;
  margin-top: 100px;
  padding: 64px 0 28px;
  background: var(--paper-soft);
  border-top: 1px solid rgba(20, 17, 15, 0.06);
}

.footer-inner {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.6fr;
  gap: clamp(32px, 5vw, 80px);
  margin-bottom: 48px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-brand .brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 11px;
}

.footer-brand strong {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink-strong);
}

.footer-brand p {
  margin: 0;
  color: rgba(20, 17, 15, 0.6);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;
  max-width: 280px;
}

.footer-col h4 {
  margin: 0 0 18px;
  color: var(--teal);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.footer-links {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(20, 17, 15, 0.78);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: color 180ms ease, gap 180ms ease;
}

.footer-links a::after {
  content: "↗";
  color: rgba(20, 17, 15, 0.35);
  font-size: 13px;
  transition: color 180ms ease, transform 180ms ease;
}

.footer-links a:hover {
  color: var(--coral-deep);
  gap: 10px;
}

.footer-links a:hover::after {
  color: var(--coral-deep);
  transform: translate(2px, -2px);
}

.footer-credit {
  display: grid;
  gap: 12px;
}

.footer-credit p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(20, 17, 15, 0.66);
}

.footer-credit p strong {
  display: block;
  color: var(--ink-strong);
  font-weight: 600;
  margin-bottom: 4px;
}

.footer-meta {
  padding-top: 26px;
  border-top: 1px solid rgba(20, 17, 15, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.footer-meta p {
  margin: 0;
  color: rgba(20, 17, 15, 0.5);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

@media (max-width: 760px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-meta {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 1040px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-stage {
    min-height: 560px;
  }

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

  .benefit-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .benefit-primary {
    grid-row: auto;
    min-height: 360px;
  }

  .stack-intro {
    grid-template-columns: 1fr;
  }

  .institution-band {
    grid-template-columns: 1fr;
  }

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

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

@media (min-width: 1180px) {
  .card-level-grid,
  .cards-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .site-header {
    height: auto;
    align-items: flex-start;
    border-radius: 30px;
    padding: 14px;
    flex-direction: column;
    gap: 10px;
  }

  .top-nav {
    width: 100%;
    overflow-x: auto;
  }

  .hero {
    width: min(100% - 28px, 1180px);
    padding-top: 48px;
  }

  .hero h1 {
    font-size: clamp(46px, 14vw, 74px);
  }

  .hero-stage {
    display: block;
    min-height: 360px;
  }

  .hero-stage::before {
    border-radius: 32px;
  }

  .hero-stage::after {
    left: 18px;
    right: 18px;
    bottom: 18px;
    height: 60px;
    border-radius: 22px;
  }

  .floating-card {
    width: min(42vw, 180px);
  }

  .card-one {
    left: 5%;
    top: 18%;
  }

  .card-two {
    width: min(46vw, 210px);
    top: 10%;
  }

  .card-three {
    right: 5%;
    top: 26%;
  }

  .level-map,
  .tool-strip,
  .benefit-grid,
  .institution-proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .benefit-primary {
    grid-column: 1 / -1;
  }

  .level-map {
    padding: 8px;
    border-radius: 32px;
  }

  .level-tile {
    min-height: 250px;
    border-radius: 26px;
  }

  .hero-metrics {
    grid-template-columns: 1fr;
  }

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

  .card-level-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .card-detail-hero {
    grid-template-columns: 1fr;
  }

  .card-detail-media {
    position: static;
  }

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

  .article-aside {
    position: static;
  }

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

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

  .filter-bar {
    top: 118px;
    border-radius: 28px;
  }

  .institution-band {
    width: min(100% - 28px, 1240px);
    padding: 22px;
    border-radius: 32px;
  }

  .drawer-panel {
    grid-template-columns: 1fr;
    right: 8px;
    left: 8px;
    top: 8px;
    bottom: 8px;
    width: auto;
    border-radius: 28px;
  }

  .drawer-media {
    position: static;
  }
}

@media (max-width: 500px) {
  .level-map,
  .tool-strip,
  .benefit-grid,
  .institution-proof {
    grid-template-columns: 1fr;
  }

  .stack-intro {
    padding: 18px;
  }

  .card-level-grid,
  .cards-grid {
    grid-template-columns: 1fr;
  }

  .hero-stage {
    min-height: 300px;
  }

  .benefit-primary {
    min-height: 300px;
  }

  .article-grid,
  .post-nav {
    grid-template-columns: 1fr;
  }

  .post-nav-link.next {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  .reveal-ready {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ===== V3 详情页新模块：tags / hero-quote / tool-block / related 分类 / tag 搜索 ===== */

/* 顶部标签 */
.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.85rem 0 0.6rem;
}
.detail-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  padding: 0.32rem 0.78rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: color-mix(in srgb, var(--accent, #6941c6) 10%, transparent);
  color: color-mix(in srgb, var(--accent, #6941c6) 80%, #1a1a1a);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--accent, #6941c6) 18%, transparent);
  transition: all 0.18s ease;
}
.detail-tag:hover {
  background: color-mix(in srgb, var(--accent, #6941c6) 18%, transparent);
  transform: translateY(-1px);
}
.detail-tag .tag-hash {
  font-weight: 700;
  color: color-mix(in srgb, var(--accent, #6941c6) 65%, #555);
}

/* hero 核心金句 */
.hero-quote {
  margin: 0.85rem 0 0;
  font-family: "Noto Serif SC", serif;
  font-size: 1.15rem;
  line-height: 1.7;
  font-weight: 500;
  color: color-mix(in srgb, var(--accent, #6941c6) 88%, #111);
  padding: 0.85rem 1.05rem 0.85rem 1.15rem;
  border-left: 3px solid var(--accent, #6941c6);
  background: color-mix(in srgb, var(--accent, #6941c6) 5%, transparent);
  border-radius: 0 12px 12px 0;
}

/* 工具化区块 */
.article-block.tool-block {
  border: 1px solid color-mix(in srgb, var(--accent, #6941c6) 18%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent, #6941c6) 4%, white) 0%,
    white 100%);
}
.tool-block .tool-body {
  margin-top: 0.6rem;
  font-size: 0.96rem;
  line-height: 1.78;
  color: #2a2a2a;
}
.tool-block .tool-sub {
  margin: 1rem 0 0.35rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--accent, #6941c6) 75%, #1a1a1a);
  letter-spacing: 0.02em;
}
.tool-block .tool-body p {
  margin: 0.35rem 0 0.55rem;
}
.tool-skill {
  margin-top: 1.2rem;
  border-radius: 10px;
  border: 1px dashed color-mix(in srgb, var(--accent, #6941c6) 30%, transparent);
  padding: 0.65rem 0.95rem;
  background: color-mix(in srgb, var(--accent, #6941c6) 3%, white);
}
.tool-skill > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.88rem;
  font-weight: 500;
  color: #2a2a2a;
  user-select: none;
}
.tool-skill > summary::-webkit-details-marker { display: none; }
.tool-skill > summary::before {
  content: "▸";
  display: inline-block;
  width: 12px;
  text-align: center;
  color: var(--accent, #6941c6);
  transition: transform 0.18s ease;
}
.tool-skill[open] > summary::before { transform: rotate(90deg); }
.tool-skill-title { flex: 1; }
.tool-skill-copy {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--accent, #6941c6) 30%, transparent);
  background: white;
  color: var(--accent, #6941c6);
  padding: 0.28rem 0.85rem;
  border-radius: 999px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.18s ease;
}
.tool-skill-copy:hover {
  background: var(--accent, #6941c6);
  color: white;
}
.tool-skill-prompt {
  margin-top: 0.75rem;
  padding: 0.85rem 1rem;
  background: #fafafa;
  border-radius: 8px;
  border: 1px solid #ececec;
  white-space: pre-wrap;
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.7;
  color: #2a2a2a;
  max-height: 360px;
  overflow: auto;
}

/* 关联卡片分类 */
.related-group {
  margin-bottom: 1.6rem;
}
.related-group-title {
  font-size: 1.02rem;
  font-weight: 600;
  margin: 0 0 0.7rem;
  letter-spacing: 0.01em;
  color: #1a1a1a;
}
.related-group-desc {
  font-size: 0.82rem;
  font-weight: 400;
  color: #6c6c6c;
  margin-left: 0.55rem;
}
.related-paths {
  margin-top: 0.9rem;
  padding-top: 1.1rem;
  border-top: 1px dashed color-mix(in srgb, var(--accent, #6941c6) 20%, #ddd);
}
.path-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.path-chip {
  display: inline-flex;
  padding: 0.32rem 0.85rem;
  border-radius: 999px;
  font-size: 0.82rem;
  background: color-mix(in srgb, var(--accent, #6941c6) 8%, #f6f6f6);
  color: color-mix(in srgb, var(--accent, #6941c6) 80%, #2a2a2a);
  font-weight: 500;
}

/* 首页 tag 检索结果 */
.tag-result-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  background: linear-gradient(180deg, #fff7ea 0%, white 100%);
  border: 1px solid #f1d9a8;
  border-radius: 14px;
  margin-bottom: 1.1rem;
}
.tag-result-header h3 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 500;
  color: #2a2a2a;
}
.tag-result-chip {
  display: inline-flex;
  padding: 0.18rem 0.7rem;
  border-radius: 999px;
  font-size: 0.84rem;
  background: #fff;
  border: 1px solid #d5b516;
  color: #b08a00;
  margin: 0 0.35rem;
}
.tag-result-clear {
  font-size: 0.84rem;
  color: #6c6c6c;
  text-decoration: none;
  padding: 0.32rem 0.85rem;
  border-radius: 999px;
  border: 1px solid #ddd;
  transition: background 0.18s;
}
.tag-result-clear:hover { background: #f4f4f4; }

/* 移动端 */
@media (max-width: 768px) {
  .hero-quote {
    font-size: 1.02rem;
  }
  .tool-skill > summary {
    font-size: 0.82rem;
  }
  .tool-skill-prompt {
    font-size: 0.76rem;
    max-height: 280px;
  }
}

/* ===== V3.1 详情页样板（L4-022 标准） ===== */

/* hero 顶部结构化分类 */
.hero-meta-stack {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 0.85rem;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.hero-meta-level {
  color: var(--accent, #6941c6);
  font-weight: 700;
}
.hero-meta-divider {
  color: #c8c8c8;
}
.hero-meta-module,
.hero-meta-type {
  color: #555;
}
.hero-subtitle {
  margin: 0.4rem 0 0.6rem;
  font-family: "Noto Serif SC", serif;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.55;
  color: #2a2a2a;
  letter-spacing: 0.01em;
}
.card-detail-copy h1 {
  margin-bottom: 0.15rem;
}
.meta-row-bottom {
  margin-top: 1.1rem;
  opacity: 0.85;
}

/* TTS 语音条 */
.tts-bar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin: 1rem 0 0.35rem;
  padding: 0.55rem 0.85rem 0.55rem 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #6941c6) 5%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent, #6941c6) 18%, transparent);
}
.tts-play {
  appearance: none;
  border: none;
  background: var(--accent, #6941c6);
  color: white;
  padding: 0.42rem 1.05rem 0.42rem 0.85rem;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tts-play:hover { transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent, #6941c6) 30%, transparent); }
.tts-icon-pause { display: none; }
.tts-bar.is-playing .tts-icon-play { display: none; }
.tts-bar.is-playing .tts-icon-pause { display: inline-block; }
.tts-status {
  font-size: 0.82rem;
  color: #666;
  font-variant-numeric: tabular-nums;
}
.tts-speed {
  appearance: none;
  border: 1px solid #d8d8d8;
  background: white;
  padding: 0.22rem 1.45rem 0.22rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  color: #2a2a2a;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0 L5 6 L10 0 Z' fill='%23999'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
}

/* 文章 V3 sections（编号 + 标题 + 段） */
.article-subsection.v3-section {
  margin-top: 2rem;
  padding-top: 0.8rem;
}
.article-subsection.v3-section:first-of-type {
  margin-top: 0.6rem;
  padding-top: 0;
}
.v3-section-head {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.55rem;
  border-bottom: 2px solid color-mix(in srgb, var(--accent, #6941c6) 28%, transparent);
}
.v3-section-num {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent, #6941c6);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.v3-section-head h3 {
  margin: 0;
  font-family: "Noto Serif SC", serif;
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.5;
  color: #1a1a1a;
}

/* article 内 strong 加强样式（金句加粗 + 浅底色高亮） */
.longform p strong,
.summary-text strong {
  font-weight: 600;
  color: #1a1a1a;
  background: linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--accent, #6941c6) 22%, transparent) 60%);
  padding: 0 1px;
  border-radius: 2px;
}

/* "为什么这张卡值得读" 区的 summary 字号 */
.summary-text {
  font-size: 1.05rem;
  line-height: 1.85;
  color: #2a2a2a;
}

/* 移动端 */
@media (max-width: 768px) {
  .hero-subtitle { font-size: 1.1rem; }
  .v3-section-head h3 { font-size: 1.05rem; }
  .v3-section-num { font-size: 0.95rem; }
  .tts-bar { padding: 0.45rem 0.55rem; }
  .tts-play { padding: 0.36rem 0.85rem 0.36rem 0.7rem; font-size: 0.8rem; }
}

/* ===== V3.2 反馈修复 ===== */

/* 顶部分类条字体改为衬线字（参考卡片印刷字体），更显气质 */
.hero-meta-stack {
  font-family: "Noto Serif SC", "Source Serif 4", serif;
  font-size: 0.96rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #2a2a2a;
  margin-bottom: 0.55rem;
}
.hero-meta-level {
  font-weight: 700;
  letter-spacing: 0.04em;
}
.hero-meta-divider {
  margin: 0 0.18rem;
  color: #bbb;
}
.hero-meta-module,
.hero-meta-type {
  color: #4a4a4a;
}

/* 标签缩小 */
.detail-tags {
  gap: 0.4rem;
  margin: 0.6rem 0 0.4rem;
}
.detail-tag {
  padding: 0.18rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.detail-tag .tag-hash {
  margin-right: 1px;
  font-size: 0.85em;
}

/* tag 检索结果 — 卡片正常尺寸（参照首页 grouped 模式） */
#cardsGrid.tag-result-mode {
  display: block;
}
.tag-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.4rem;
  margin-top: 1.2rem;
}
@media (min-width: 920px) {
  .tag-result-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 1100px;
  }
}
@media (max-width: 768px) {
  .tag-result-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* v3-section 去掉小标题下面的紫色横线，只保留编号视觉 */
.v3-section-head {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 1rem;
  gap: 0.7rem;
}
.v3-section-num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--accent, #6941c6) 70%, #444);
  flex-shrink: 0;
  padding: 0.18rem 0.45rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent, #6941c6) 8%, transparent);
}
.v3-section-head h3 {
  font-size: 1.18rem;
  font-weight: 600;
}

/* 段落清理：去掉可能存在的横线 */
.longform p {
  border: none;
}
.article-subsection {
  border-top: none;
}

/* TTS bar 收紧 + 添加 hint */
.tts-bar {
  margin: 0.85rem 0 0.2rem;
  padding: 0.42rem 0.7rem 0.42rem 0.5rem;
}
.tts-play {
  padding: 0.32rem 0.85rem 0.32rem 0.7rem;
  font-size: 0.8rem;
  gap: 0.35rem;
}
.tts-voice,
.tts-speed {
  font-size: 0.74rem;
  padding: 0.2rem 1.3rem 0.2rem 0.55rem;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tts-hint {
  font-size: 0.7rem;
  color: #999;
  padding-left: 0.4rem;
  border-left: 1px solid #e0e0e0;
}
.tts-status {
  font-size: 0.78rem;
}
@media (max-width: 768px) {
  .tts-bar {
    border-radius: 14px;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .tts-hint { display: none; }
}

/* ===== V3.3 反馈修复 ===== */

/* 小节标题：数字去底色（保留数字），加回下方横线 */
.v3-section-head {
  border-bottom: 1px solid #e8e6e2;
  padding-bottom: 0.55rem;
  margin-bottom: 1.05rem;
}
.v3-section-num {
  background: transparent;
  padding: 0;
  border-radius: 0;
  color: color-mix(in srgb, var(--accent, #6941c6) 70%, #333);
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 0.92rem;
}

/* article 区的 pull-quote 缩小 */
.pull-quote {
  font-size: 1.08rem !important;
  line-height: 1.7 !important;
  padding: 0.85rem 1.1rem !important;
}

/* 段落之间确保无线 */
.article-subsection p,
.longform p {
  border: none !important;
}
.article-subsection + .article-subsection {
  border-top: none !important;
}

/* 左侧 TOC scroll spy active 高亮 */
.article-toc a {
  position: relative;
  transition: color 0.18s ease, background 0.18s ease, padding-left 0.18s ease;
}
.article-toc a.is-active {
  color: var(--accent, #6941c6);
  background: color-mix(in srgb, var(--accent, #6941c6) 8%, transparent);
  padding-left: 0.85rem;
  font-weight: 600;
}
.article-toc a.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 3px;
  background: var(--accent, #6941c6);
  border-radius: 2px;
}

/* TTS 预录模式（小米 MIMO） */
.tts-bar.is-prerecorded .tts-hint {
  color: var(--accent, #6941c6);
  border-left-color: color-mix(in srgb, var(--accent, #6941c6) 30%, transparent);
  font-weight: 500;
}

/* ===== V3.4 反馈：阅读节奏 + 视觉收敛 ===== */

/* v3 小节标题：完全去除底色和左边框（覆盖 .article-subsection h3 的旧样式） */
.article-subsection.v3-section h3 {
  background: transparent !important;
  border-left: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
.article-subsection.v3-section h3::before {
  display: none !important;
}

/* 小节标题下方横线：淡紫色稍粗 */
.v3-section-head {
  border-bottom: 1.5px solid color-mix(in srgb, var(--accent, #6941c6) 22%, transparent);
  padding-bottom: 0.7rem;
  margin-bottom: 1.25rem;
}

/* 正文行间距和段距加宽，提升阅读舒适度 */
.longform p,
.summary-text,
.tool-body p {
  line-height: 2.05;
  font-size: 1rem;
  letter-spacing: 0.012em;
  color: #2c2c2c;
}
.longform p {
  margin: 0 0 1.05rem;
}
.summary-text {
  font-size: 1.04rem;
  line-height: 2.1;
}
/* 文章段落不要分隔条/边框 */
.article-subsection.v3-section + .article-subsection.v3-section {
  margin-top: 2.4rem;
}

/* 左侧 TOC active：浅化（去深紫） */
.article-toc a.is-active {
  color: color-mix(in srgb, var(--accent, #6941c6) 85%, #333);
  background: color-mix(in srgb, var(--accent, #6941c6) 4%, transparent);
  padding-left: 0.85rem;
  font-weight: 600;
}
.article-toc a.is-active::before {
  background: color-mix(in srgb, var(--accent, #6941c6) 55%, transparent);
  width: 2px;
}

/* TTS 进度条 */
.tts-bar {
  flex-wrap: wrap;
}
.tts-progress-wrap {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 1 1 220px;
  min-width: 200px;
  font-size: 0.74rem;
  color: #777;
  font-variant-numeric: tabular-nums;
}
.tts-progress {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #6941c6) 12%, #eee);
  outline: none;
  cursor: pointer;
}
.tts-progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--accent, #6941c6);
  border: 2px solid white;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent, #6941c6) 40%, transparent);
}
.tts-progress::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--accent, #6941c6);
  border: 2px solid white;
}
.tts-progress:hover::-webkit-slider-thumb {
  transform: scale(1.15);
}

/* 隐藏 engine 标签（小米 MIMO 不显示） */
.tts-hint[data-tts-engine-label] {
  display: none;
}

/* ===== V3.5 无障碍修复（WCAG 2.1 AA） ===== */

/* Critical 1: 全局 focus-visible 焦点指示 — 键盘用户必须 */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--accent, #6941c6);
  outline-offset: 2px;
  border-radius: 4px;
  transition: outline-offset 0.1s ease;
}
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent, #6941c6);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, #6941c6) 18%, transparent);
}

/* Critical 2: 标签触摸目标 ≥ 32×32（hashtag 视觉上必须保持紧凑，但点击区扩展） */
.detail-tag {
  min-height: 30px;
  padding: 0.36rem 0.78rem;
  font-size: 0.78rem;
  /* 加深文字对比度满足 4.5:1 */
  color: color-mix(in srgb, var(--accent, #6941c6) 92%, #1a1a1a);
  background: color-mix(in srgb, var(--accent, #6941c6) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent, #6941c6) 22%, transparent);
}
.detail-tag .tag-hash {
  color: color-mix(in srgb, var(--accent, #6941c6) 70%, #555);
}

/* Major: 复制按钮 + 播放按钮 触摸目标 */
.tool-skill-copy {
  min-height: 32px;
  padding: 0.35rem 0.9rem;
}
.tts-play {
  min-height: 36px;
}

/* Major: TTS hint 颜色提到 #666 满足对比 */
.tts-hint {
  color: #666 !important;
}

/* Major: flip-card 键盘聚焦时翻转 + 显示反面 */
.flip-card:focus-visible .flip-inner {
  transform: rotateY(180deg);
}

/* Critical 4: detail-image-frame 键盘聚焦时显示提示 */
.detail-image-frame[tabindex]:focus-visible::after {
  content: "按 空格 或 回车 切换正反面";
  position: absolute;
  bottom: -36px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent, #6941c6);
  color: white;
  padding: 0.32rem 0.85rem;
  border-radius: 999px;
  font-size: 0.72rem;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}

/* Major: TTS 播放按钮 aria-pressed 视觉同步 */
.tts-play[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent, #6941c6) 78%, #000);
}

/* Minor: SR-only 类（用于辅助文字） */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ===== V3.6 顶部栏渐变 + 颗粒 + 滚动收缩（仿 Presensio）===== */

/* 默认状态：宽屏 + 渐变 + 颗粒纹理 */
.site-header {
  /* 覆盖之前的胶囊配置 */
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 14px clamp(20px, 4vw, 56px);
  height: 76px;
  border-radius: 0;
  border: none;
  /* 渐变：从粉到米到桃，柔和层次 */
  background:
    linear-gradient(135deg,
      rgba(255, 232, 220, 0.92) 0%,
      rgba(252, 244, 232, 0.88) 38%,
      rgba(248, 235, 220, 0.85) 72%,
      rgba(255, 224, 213, 0.82) 100%);
  box-shadow: 0 1px 0 rgba(20, 17, 15, 0.04);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  transition:
    width 380ms cubic-bezier(0.4, 0, 0.2, 1),
    max-width 380ms cubic-bezier(0.4, 0, 0.2, 1),
    height 380ms cubic-bezier(0.4, 0, 0.2, 1),
    padding 380ms cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 380ms cubic-bezier(0.4, 0, 0.2, 1),
    margin 380ms cubic-bezier(0.4, 0, 0.2, 1),
    top 380ms cubic-bezier(0.4, 0, 0.2, 1),
    background 380ms ease,
    box-shadow 380ms ease,
    border 380ms ease;
}

/* 颗粒纹理层 — SVG turbulence noise */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.6;
  mix-blend-mode: multiply;
  transition: border-radius 380ms cubic-bezier(0.4, 0, 0.2, 1), opacity 380ms ease;
}

/* 高光层 — 顶部高亮一线 */
.site-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.6) 50%,
    transparent 100%);
  pointer-events: none;
}

/* 滚动后：收缩成胶囊形悬浮 */
.site-header.is-scrolled {
  top: 16px;
  width: min(1140px, calc(100% - 32px));
  margin: 0 auto;
  padding: 8px 8px 8px 22px;
  height: 60px;
  border-radius: 999px;
  border: 1px solid rgba(20, 17, 15, 0.06);
  background: rgba(252, 248, 242, 0.78);
  box-shadow:
    0 2px 8px -2px rgba(20, 17, 15, 0.06),
    0 18px 50px -16px rgba(20, 17, 15, 0.14);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
}

.site-header.is-scrolled::before {
  border-radius: 999px;
  opacity: 0.25;  /* 滚动后颗粒淡化 */
}

.site-header.is-scrolled::after {
  display: none;  /* 胶囊态不要顶部高光线 */
}

/* 滚动后 brand-text em 渐隐（节省横向空间） */
.site-header.is-scrolled .brand-text em {
  display: none;
}

/* nav 在滚动后字号稍小 */
.site-header.is-scrolled .top-nav {
  font-size: 13.5px;
}
.site-header.is-scrolled .top-nav a {
  padding: 8px 12px;
}
.site-header.is-scrolled .top-nav a:last-child {
  padding: 8px 16px;
}

/* 顶部栏内容相对定位，确保在颗粒层之上 */
.site-header .brand,
.site-header .top-nav {
  position: relative;
  z-index: 1;
}

/* 移动端：滚动后稍微收紧 */
@media (max-width: 768px) {
  .site-header { height: 64px; padding: 10px 16px; }
  .site-header.is-scrolled {
    width: calc(100% - 16px);
    padding: 6px 6px 6px 14px;
    height: 52px;
  }
}

/* Footer 辅助链接（设计规范 / Sitemap / llms.txt） */
.footer-aux {
  margin-top: 10px;
  font-size: 0.78rem;
  color: rgba(20, 17, 15, 0.5);
}
.footer-aux a {
  color: rgba(20, 17, 15, 0.6);
  text-decoration: none;
  transition: color 0.15s ease;
}
.footer-aux a:hover {
  color: var(--accent, #6941c6);
  text-decoration: underline;
}
.footer-aux > span {
  margin: 0 0.35rem;
  color: rgba(20, 17, 15, 0.25);
}
@media (min-width: 768px) {
  .footer-meta { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
  .footer-aux { margin-top: 14px; }
}

/* ===== V3.7 修正版顶部栏（仿 Presensio 的正确方向） ===== */

/* 撤回 V3.6 错误的 site-header 全宽渐变（用强覆盖） */
.site-header {
  position: sticky !important;
  top: 14px !important;
  z-index: 100 !important;
  width: min(1180px, calc(100% - 40px)) !important;
  max-width: min(1180px, calc(100% - 40px)) !important;
  margin: 14px auto 0 !important;
  padding: 8px 8px 8px 22px !important;
  height: 60px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(20, 17, 15, 0.06) !important;
  background: rgba(252, 248, 242, 0.62) !important;
  box-shadow: 0 2px 6px -2px rgba(20, 17, 15, 0.04) !important;
  backdrop-filter: blur(18px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.35) !important;
  transition:
    width 380ms cubic-bezier(0.4, 0, 0.2, 1),
    height 380ms cubic-bezier(0.4, 0, 0.2, 1),
    padding 380ms cubic-bezier(0.4, 0, 0.2, 1),
    background 380ms ease,
    box-shadow 380ms ease,
    backdrop-filter 380ms ease !important;
}
.site-header::before { display: none !important; }
.site-header::after { display: none !important; }

/* 滚动后：进一步收紧成更小的 pill，更白底，更强阴影 */
.site-header.is-scrolled {
  width: min(880px, calc(100% - 32px)) !important;
  height: 52px !important;
  padding: 6px 6px 6px 18px !important;
  background: rgba(252, 248, 242, 0.88) !important;
  box-shadow:
    0 2px 8px -2px rgba(20, 17, 15, 0.06),
    0 18px 48px -18px rgba(20, 17, 15, 0.16) !important;
  backdrop-filter: blur(24px) saturate(1.55) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.55) !important;
}

/* Logo 简化：只显示 brand-mark，隐藏文字 */
.brand-text { display: none !important; }
.brand { gap: 0 !important; padding: 0 8px; }
.brand-mark {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px;
  box-shadow: 0 6px 14px -4px rgba(244, 93, 72, 0.32), 0 1px 2px rgba(20, 17, 15, 0.06);
}
.site-header.is-scrolled .brand-mark {
  width: 32px !important;
  height: 32px !important;
}

/* === Page Canvas：渐变 + 颗粒 + 圆角，覆盖整个页面顶部 === */
.page-canvas {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 780px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(244, 93, 72, 0.10) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(255, 232, 220, 0.95) 0%,
      rgba(252, 244, 232, 0.78) 28%,
      rgba(248, 245, 242, 0.40) 55%,
      rgba(248, 245, 242, 0.0) 100%);
  border-radius: 0 0 36px 36px;
  overflow: hidden;
}
.page-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.55;
  mix-blend-mode: multiply;
}

/* 确保 main 内容浮在 canvas 之上 */
body { position: relative; }
body > main, body > header, body > footer { position: relative; z-index: 1; }
body > .ambient { z-index: 0; }

/* 调整 Hero h1 字体比例 — 更克制更精致 */
.hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.4rem) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.02em !important;
  font-weight: 600 !important;
  margin-top: 0.6rem !important;
  margin-bottom: 0.4rem !important;
}
.hero .hero-lede {
  font-size: clamp(0.96rem, 1.4vw, 1.08rem) !important;
  line-height: 1.7 !important;
  color: rgba(20, 17, 15, 0.68);
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
.hero .eyebrow {
  font-size: 0.72rem !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* 把 hero 区往下推一点，避开 header */
.hero {
  padding-top: clamp(30px, 4vw, 50px) !important;
}

@media (max-width: 768px) {
  .site-header {
    width: calc(100% - 20px) !important;
    margin: 10px auto 0 !important;
    height: 54px !important;
  }
  .site-header.is-scrolled {
    width: calc(100% - 16px) !important;
    height: 48px !important;
  }
  .page-canvas { height: 540px; border-radius: 0 0 24px 24px; }
  .hero h1 { font-size: 2rem !important; }
}

/* ===== V3.8 精确仿 Presensio ===== */

/* Header 还原：默认宽 + 中等圆角 + 距顶留白；滚动后适度收窄不缩太小 */
.site-header {
  position: sticky !important;
  top: 18px !important;
  z-index: 100 !important;
  width: calc(100% - 56px) !important;
  max-width: 1400px !important;
  margin: 18px auto 0 !important;
  padding: 8px 8px 8px 22px !important;
  height: 64px !important;
  border-radius: 22px !important;           /* 中等圆角，不是 999px */
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  background: rgba(255, 252, 248, 0.55) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 2px 12px -4px rgba(20, 17, 15, 0.06) !important;
  backdrop-filter: blur(18px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
  transition: all 360ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 滚动后：适度收窄（不要缩太小），背景更白 */
.site-header.is-scrolled {
  width: min(1180px, calc(100% - 56px)) !important;
  height: 58px !important;
  padding: 6px 6px 6px 20px !important;
  border-radius: 20px !important;
  background: rgba(252, 248, 242, 0.92) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 4px 18px -6px rgba(20, 17, 15, 0.08), 0 24px 60px -22px rgba(20, 17, 15, 0.16) !important;
  backdrop-filter: blur(24px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.6) !important;
}

/* Logo：恢复显示「AI 思维与认知」主标题，隐藏副标题 */
.brand-text { display: flex !important; flex-direction: column; line-height: 1.1; gap: 0; }
.brand-text strong {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--ink-strong);
}
.brand-text em { display: none !important; }  /* 隐藏副标题"浙大设计·知识卡片系统" */
.brand { gap: 10px !important; padding: 0 4px 0 0; }
.brand-mark {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px;
  box-shadow: 0 6px 14px -4px rgba(244, 93, 72, 0.32), 0 1px 2px rgba(20, 17, 15, 0.06);
}
.site-header.is-scrolled .brand-mark {
  width: 32px !important;
  height: 32px !important;
}
.site-header.is-scrolled .brand-text strong {
  font-size: 15px;
}

/* === Page Canvas: 渐变 + 颗粒 + 大圆角，绕住整片顶部 === */
.page-canvas {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 760px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 50% at 30% 0%, rgba(255, 198, 175, 0.65) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 80% 5%, rgba(255, 214, 188, 0.6) 0%, transparent 55%),
    radial-gradient(ellipse 60% 45% at 50% 20%, rgba(244, 153, 132, 0.30) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(255, 232, 220, 0.85) 0%,
      rgba(252, 240, 226, 0.55) 35%,
      rgba(248, 245, 242, 0.20) 70%,
      rgba(248, 245, 242, 0.0) 100%);
  border-radius: 0 0 56px 56px;
  overflow: hidden;
}
.page-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 260 260' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.20 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: 0.5;
  mix-blend-mode: multiply;
  pointer-events: none;
}

body { position: relative; }
body > main, body > header, body > footer { position: relative; z-index: 1; }

/* Footer 颜色加深 + 简洁化 */
.site-footer {
  background: #ebe4d6;
  margin-top: 80px;
  padding: 50px 0 24px;
}
.footer-meta {
  border-top: 1px solid rgba(20, 17, 15, 0.08);
  padding-top: 24px;
  margin-top: 36px;
}

/* Hero H1 字体比例精调 */
.hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.2rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.022em !important;
  font-weight: 600 !important;
}
.hero {
  padding-top: clamp(40px, 5vw, 60px) !important;
}

/* 移动端 */
@media (max-width: 768px) {
  .site-header {
    width: calc(100% - 24px) !important;
    top: 12px !important;
    margin: 12px auto 0 !important;
    height: 56px !important;
    border-radius: 18px !important;
    padding: 6px 6px 6px 16px !important;
  }
  .site-header.is-scrolled {
    width: calc(100% - 24px) !important;
    height: 52px !important;
  }
  .brand-text strong { font-size: 14px !important; }
  .brand-mark { width: 30px !important; height: 30px !important; }
  .page-canvas { height: 560px; border-radius: 0 0 28px 28px; }
  .hero h1 { font-size: 1.9rem !important; }
}

/* 性能优化：font-display swap 减少 FOIT，关键 CSS 优先 */
@font-face { font-display: swap; }

/* 卡片图片懒加载触发 reveal 提前一些 */
.flip-card { content-visibility: auto; contain-intrinsic-size: 380px; }

/* ===== V3.9 终版：四周边距 + 圆角包裹整页 ===== */

/* body 不加 padding，让 page-canvas 自己留边 + 圆角四个角 */
body {
  background: var(--cream);
}

/* Page Canvas：四周留 14px 边距，四角圆角 28px */
.page-canvas {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  right: 14px !important;
  height: 760px !important;
  border-radius: 28px !important;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 50% at 30% 0%, rgba(255, 198, 175, 0.68) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 80% 5%, rgba(255, 214, 188, 0.65) 0%, transparent 55%),
    radial-gradient(ellipse 60% 45% at 50% 20%, rgba(244, 153, 132, 0.32) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(255, 232, 220, 0.88) 0%,
      rgba(252, 240, 226, 0.55) 35%,
      rgba(248, 245, 242, 0.20) 70%,
      rgba(248, 245, 242, 0.0) 100%);
  overflow: hidden;
}
.page-canvas::after {
  border-radius: inherit !important;
}

/* Header：默认接近全宽（在 canvas 内有 36px 内边距感），滚动后缩到 1180 居中 */
.site-header {
  position: sticky !important;
  top: 32px !important;
  z-index: 100 !important;
  width: calc(100% - 100px) !important;          /* 14*2 + 36*2 = 100 */
  max-width: 1400px !important;
  margin: 32px auto 0 !important;
  padding: 8px 8px 8px 22px !important;
  height: 64px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  background: rgba(255, 252, 248, 0.62) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 2px 12px -4px rgba(20, 17, 15, 0.05) !important;
  backdrop-filter: blur(18px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
  transition: all 380ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 滚动后：缩到 1180 居中 */
.site-header.is-scrolled {
  width: min(1180px, calc(100% - 64px)) !important;
  height: 58px !important;
  padding: 6px 6px 6px 20px !important;
  border-radius: 20px !important;
  background: rgba(252, 248, 242, 0.93) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 4px 18px -6px rgba(20, 17, 15, 0.08), 0 24px 60px -22px rgba(20, 17, 15, 0.16) !important;
  backdrop-filter: blur(24px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.6) !important;
}

/* Logo：恢复显示「AI 思维与认知」+ 副标题 */
.brand-text { display: flex !important; flex-direction: column; line-height: 1.1; gap: 2px; }
.brand-text strong {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--ink-strong);
}
.brand-text em {
  display: block !important;
  font-style: normal;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(20, 17, 15, 0.5);
  margin-top: 2px;
}
.site-header.is-scrolled .brand-text em { display: none !important; }
.brand { gap: 10px !important; padding: 0 4px 0 0; }
.brand-mark {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px;
}
.site-header.is-scrolled .brand-mark { width: 32px !important; height: 32px !important; }
.site-header.is-scrolled .brand-text strong { font-size: 15px; }

/* 所有 main section 统一对齐 1180 居中 */
.hero,
.institution-band,
.section,
.cards-section {
  width: min(1180px, calc(100% - 64px)) !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 卡片库的 filter-bar 改成跟顶部栏统一风格（暖白圆角 pill，22px 圆角） */
.filter-bar {
  top: 110px !important;
  padding: 8px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  background: rgba(255, 252, 248, 0.85) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 4px 18px -6px rgba(20, 17, 15, 0.08) !important;
  backdrop-filter: blur(18px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
}
.filter-button {
  min-height: 40px !important;
  padding: 0 18px !important;
  border-radius: 18px !important;
  font-size: 13.5px !important;
}
.filter-button.active {
  border-radius: 18px !important;
}

/* 移动端 */
@media (max-width: 768px) {
  .page-canvas {
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    height: 540px !important;
    border-radius: 20px !important;
  }
  .site-header {
    width: calc(100% - 36px) !important;
    top: 22px !important;
    margin: 22px auto 0 !important;
    height: 56px !important;
    border-radius: 18px !important;
    padding: 6px 6px 6px 16px !important;
  }
  .site-header.is-scrolled {
    width: calc(100% - 36px) !important;
    height: 52px !important;
  }
  .brand-text em { display: none !important; }
  .hero, .institution-band, .section, .cards-section {
    width: calc(100% - 36px) !important;
  }
  .filter-bar {
    border-radius: 18px !important;
  }
}

/* ===== V3.10 精确数字 ===== */

/* Page Canvas: 顶 80, 左右 100, 高 1000, 顶部圆角 56 */
.page-canvas {
  top: 80px !important;
  left: 100px !important;
  right: 100px !important;
  height: 1000px !important;
  border-radius: 56px 56px 56px 56px !important;
}

/* Header 默认：比 canvas 小一圈（左右各 120），距顶 100 */
.site-header {
  top: 100px !important;
  width: calc(100% - 240px) !important;
  max-width: 1400px !important;
  margin: 100px auto 0 !important;
  padding: 8px 8px 8px 22px !important;
  height: 64px !important;
  border-radius: 22px !important;
}

/* Header 滚动后：距顶 50，缩到 1180 */
.site-header.is-scrolled {
  top: 50px !important;
  width: min(1180px, calc(100% - 64px)) !important;
  margin: 50px auto 0 !important;
  height: 58px !important;
  border-radius: 20px !important;
}

/* 移动端适配缩放 */
@media (max-width: 768px) {
  .page-canvas {
    top: 40px !important;
    left: 16px !important;
    right: 16px !important;
    height: 600px !important;
    border-radius: 28px !important;
  }
  .site-header {
    top: 56px !important;
    width: calc(100% - 36px) !important;
    margin: 56px auto 0 !important;
  }
  .site-header.is-scrolled {
    top: 18px !important;
    margin: 18px auto 0 !important;
  }
}

/* ===== V3.11 按 Presensio 实测重算 ===== */

/* Canvas: top 16, 左右 16, 高 900, 圆角 48 */
.page-canvas {
  top: 16px !important;
  left: 16px !important;
  right: 16px !important;
  height: 900px !important;
  border-radius: 48px !important;
}

/* Header 默认：比 canvas 各小 24px（也就是离 viewport 边各 40px），距顶 40 */
.site-header {
  top: 40px !important;
  width: calc(100% - 80px) !important;
  max-width: none !important;
  margin: 40px auto 0 !important;
  padding: 8px 8px 8px 22px !important;
  height: 60px !important;
  border-radius: 18px !important;
}

/* Header 滚动后：top 16（跟 canvas 顶对齐），缩到 1180 */
.site-header.is-scrolled {
  top: 16px !important;
  width: min(1180px, calc(100% - 56px)) !important;
  margin: 16px auto 0 !important;
  height: 54px !important;
  border-radius: 16px !important;
}

/* Footer 颜色调浅 */
.site-footer {
  background: #f1ece2 !important;
}

/* 移动端 */
@media (max-width: 768px) {
  .page-canvas {
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    height: 560px !important;
    border-radius: 24px !important;
  }
  .site-header {
    top: 22px !important;
    width: calc(100% - 36px) !important;
    margin: 22px auto 0 !important;
    height: 56px !important;
  }
  .site-header.is-scrolled {
    top: 10px !important;
    margin: 10px auto 0 !important;
    width: calc(100% - 28px) !important;
  }
}

/* ===== V3.12 — Canvas 50/50 ===== */
.page-canvas {
  top: 50px !important;
  left: 50px !important;
  right: 50px !important;
  height: 900px !important;
  border-radius: 48px !important;
}
.site-header {
  top: 74px !important;
  width: calc(100% - 148px) !important;
  margin: 74px auto 0 !important;
  height: 60px !important;
  border-radius: 18px !important;
}
.site-header.is-scrolled {
  top: 16px !important;
  width: min(1180px, calc(100% - 56px)) !important;
  margin: 16px auto 0 !important;
  height: 54px !important;
  border-radius: 16px !important;
}
@media (max-width: 768px) {
  .page-canvas { top: 14px !important; left: 14px !important; right: 14px !important; height: 560px !important; border-radius: 24px !important; }
  .site-header { top: 30px !important; width: calc(100% - 44px) !important; margin: 30px auto 0 !important; height: 56px !important; }
  .site-header.is-scrolled { top: 12px !important; margin: 12px auto 0 !important; width: calc(100% - 28px) !important; }
}

/* ===== V3.13 — Presensio 截图精校 ===== */

/* Canvas 数字校准（按截图比例）：top 20, 左右 50, 圆角 40 */
.page-canvas {
  top: 20px !important;
  left: 50px !important;
  right: 50px !important;
  height: 880px !important;
  border-radius: 40px !important;
  /* 斜对角渐变：左上粉紫 → 中部桃 → 右上橙 → 右下渐隐 */
  background:
    /* 主渐变（斜对角） */
    linear-gradient(118deg,
      rgba(243, 178, 196, 0.78) 0%,
      rgba(245, 168, 152, 0.72) 28%,
      rgba(244, 178, 142, 0.65) 55%,
      rgba(248, 226, 200, 0.45) 78%,
      rgba(248, 245, 242, 0.12) 100%
    ),
    /* 顶部 radial 加强 */
    radial-gradient(ellipse 80% 50% at 30% 0%, rgba(238, 162, 180, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 75% 8%, rgba(245, 180, 145, 0.45) 0%, transparent 65%),
    /* 底部渐隐 */
    linear-gradient(180deg, transparent 60%, rgba(248, 245, 242, 0.95) 100%) !important;
}

/* 颗粒更密更明显 */
.page-canvas::after {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
  background-size: 160px 160px !important;
  opacity: 0.85 !important;
  mix-blend-mode: multiply !important;
}

/* Header 默认：top 50 (canvas top 20 + 内边距 30)，宽度 calc(100% - 150) 即 canvas 内各 25px */
.site-header {
  top: 50px !important;
  width: calc(100% - 150px) !important;
  margin: 50px auto 0 !important;
  height: 60px !important;
  border-radius: 18px !important;
}
.site-header.is-scrolled {
  top: 16px !important;
  width: min(1180px, calc(100% - 56px)) !important;
  margin: 16px auto 0 !important;
  height: 54px !important;
  border-radius: 16px !important;
}

@media (max-width: 768px) {
  .page-canvas { top: 10px !important; left: 14px !important; right: 14px !important; height: 560px !important; border-radius: 24px !important; }
  .site-header { top: 26px !important; width: calc(100% - 40px) !important; margin: 26px auto 0 !important; height: 56px !important; }
  .site-header.is-scrolled { top: 10px !important; margin: 10px auto 0 !important; width: calc(100% - 28px) !important; }
}

/* ===== V3.14 — 直接用 Presensio 渐变 PNG ===== */
.page-canvas {
  background:
    url("./assets/brand/hero-gradient.png") center top / cover no-repeat,
    var(--cream) !important;
}
.page-canvas::after { display: none !important; }

/* ===== V3.15 — CSS 渐变 + 底无圆角 + nav 居中 ===== */

/* Canvas: 高 1200, 只上两角 40px 圆角, CSS 多 radial 模拟 PNG, 底部自然渐隐 */
.page-canvas {
  top: 20px !important;
  left: 50px !important;
  right: 50px !important;
  height: 1200px !important;
  border-radius: 40px 40px 0 0 !important;
  /* 重新用 CSS 渐变（不再依赖 PNG），精确匹配 Presensio 配色 */
  background:
    /* 左上：粉紫 radial */
    radial-gradient(ellipse 45% 35% at 18% 0%, #f4b4c2 0%, transparent 65%),
    /* 中上：桃红 radial */
    radial-gradient(ellipse 35% 28% at 48% -3%, #f29888 0%, transparent 60%),
    /* 右上：橙黄 radial */
    radial-gradient(ellipse 42% 32% at 82% 2%, #f0b896 0%, transparent 62%),
    /* 整体淡米色基底从顶到下渐隐到完全透明 */
    linear-gradient(180deg,
      rgba(252, 232, 218, 0.55) 0%,
      rgba(252, 232, 218, 0.30) 25%,
      rgba(248, 245, 242, 0.15) 50%,
      rgba(248, 245, 242, 0) 75%) !important;
  overflow: hidden;
}

/* 颗粒纹理（更明显） */
.page-canvas::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
  background-size: 180px 180px !important;
  opacity: 0.78 !important;
  mix-blend-mode: multiply !important;
  pointer-events: none;
}

/* Header layout: brand 左 / nav 居中 / CTA 右 */
.site-header {
  display: flex !important;
  align-items: center !important;
  gap: 16px;
}
.brand { flex-shrink: 0; }
.top-nav {
  flex: 1 !important;
  display: flex !important;
  justify-content: center !important;
  gap: 4px !important;
  position: relative;
}
/* 最后一个 a（"工具入口" CTA）推到最右 */
.top-nav a:last-child {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border-radius: 16px !important;      /* CTA 圆角 16px（不是 999px） */
  padding: 10px 18px !important;
}

/* 滚动后 CTA 圆角更小 */
.site-header.is-scrolled .top-nav a:last-child {
  border-radius: 14px !important;
  padding: 8px 16px !important;
}

/* 移动端 nav 仍居中但 CTA 不绝对定位 */
@media (max-width: 768px) {
  .top-nav { gap: 2px !important; font-size: 12px !important; }
  .top-nav a:last-child {
    position: static !important;
    transform: none !important;
  }
}

/* ===== V3.16 — 最终校准（Logo PNG / 横向副标题 / 渐变淡入 / 颗粒收敛 / 修浮动卡）===== */

/* --- Page Canvas：上方多彩 → 下方完全过渡到 cream（与下游 section 同色） --- */
.page-canvas {
  top: 14px !important;
  left: 14px !important;
  right: 14px !important;
  height: 1080px !important;
  border-radius: 40px 40px 0 0 !important;
  background:
    /* 左上：粉紫 */
    radial-gradient(ellipse 55% 42% at 18% -3%, #f4a8bc 0%, transparent 60%),
    /* 中上：桃红 */
    radial-gradient(ellipse 42% 32% at 50% -6%, #f0876f 0%, transparent 55%),
    /* 右上：橙黄 */
    radial-gradient(ellipse 52% 40% at 84% -2%, #f1a878 0%, transparent 60%),
    /* 整体从顶部暖到底部 cream（去灰：直接淡入 var(--cream) 而非半透明白）*/
    linear-gradient(180deg,
      rgba(252, 230, 213, 0.50) 0%,
      rgba(252, 232, 218, 0.30) 18%,
      rgba(248, 245, 242, 0.12) 38%,
      var(--cream) 70%,
      var(--cream) 100%) !important;
  overflow: hidden;
}

/* --- 颗粒：opacity 大降 + 暖色调（去灰）+ soft-light 混合 + 底部渐隐 --- */
.page-canvas::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.42 0 0 0 0 0.36 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
  background-size: 220px 220px !important;
  opacity: 0.32 !important;
  mix-blend-mode: soft-light !important;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 88%) !important;
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 88%) !important;
  pointer-events: none !important;
}

/* --- Header 默认：靠近顶部（top 28）、更宽（左右各离 viewport 30）、稍高 --- */
.site-header {
  top: 28px !important;
  width: calc(100% - 60px) !important;
  max-width: none !important;
  margin: 28px auto 0 !important;
  height: 64px !important;
  padding: 8px 8px 8px 22px !important;
  border-radius: 20px !important;
  background: rgba(255, 252, 248, 0.62) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 2px 14px -6px rgba(20, 17, 15, 0.06) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
}

/* --- Header 滚动后：缩到 pill（min 1180 / 居中），距顶 12 --- */
.site-header.is-scrolled {
  top: 12px !important;
  width: min(1180px, calc(100% - 40px)) !important;
  margin: 12px auto 0 !important;
  height: 54px !important;
  padding: 6px 6px 6px 20px !important;
  border-radius: 16px !important;
  background: rgba(252, 248, 242, 0.92) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 4px 18px -6px rgba(20, 17, 15, 0.08), 0 22px 55px -22px rgba(20, 17, 15, 0.14) !important;
}

/* --- Logo：去掉底色方框（取消 box-shadow / background / border-radius） --- */
.brand-mark {
  width: 42px !important;
  height: 42px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  object-fit: contain !important;
}
.site-header.is-scrolled .brand-mark {
  width: 36px !important;
  height: 36px !important;
}

/* --- Brand 文本：横向排列，副标题在主标题右侧 --- */
.brand {
  gap: 12px !important;
  padding: 0 4px 0 0 !important;
  align-items: center !important;
}
.brand-text {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 10px !important;
  line-height: 1 !important;
}
.brand-text strong {
  font-family: var(--font-serif) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: -0.005em !important;
  color: var(--ink-strong) !important;
}
.brand-text em {
  display: inline-flex !important;
  align-items: center !important;
  font-style: normal !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: rgba(20, 17, 15, 0.55) !important;
  margin: 0 !important;
  padding-left: 10px !important;
  border-left: 1px solid rgba(20, 17, 15, 0.14) !important;
}
.site-header.is-scrolled .brand-text em { display: none !important; }
.site-header.is-scrolled .brand-text strong { font-size: 16px !important; }

/* --- 修：确保 hero / hero-stage 在 page-canvas 之上（z-index 层级）--- */
main { position: relative; z-index: 2; }
.hero,
.hero-copy,
.hero-stage {
  position: relative;
  z-index: 2;
}
.floating-card { z-index: 3 !important; }
.floating-card.card-two { z-index: 5 !important; }
/* 浮动卡片底色容错（避免 img 加载延迟时出现空白）*/
.floating-card { background: rgba(255, 252, 248, 0.4) !important; }

/* --- Footer 颜色更浅（淡米色，跟 cream 接近，避免突兀深色块）--- */
.site-footer {
  background: #f6f1e7 !important;
  border-top: 1px solid rgba(20, 17, 15, 0.04) !important;
}

/* --- Mobile --- */
@media (max-width: 768px) {
  .page-canvas {
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    height: 620px !important;
    border-radius: 24px 24px 0 0 !important;
  }
  .site-header {
    top: 18px !important;
    width: calc(100% - 24px) !important;
    margin: 18px auto 0 !important;
    height: 56px !important;
    border-radius: 16px !important;
  }
  .site-header.is-scrolled {
    top: 10px !important;
    width: calc(100% - 24px) !important;
    margin: 10px auto 0 !important;
    height: 50px !important;
  }
  .brand-mark { width: 34px !important; height: 34px !important; }
  .brand-text {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }
  .brand-text strong { font-size: 15px !important; }
  .brand-text em {
    padding-left: 0 !important;
    border-left: none !important;
    font-size: 10px !important;
  }
}

/* ===== V3.17 — 三点微调（header 下移 / nav 视口居中 / footer 更浅）===== */

/* 1) Header 默认下移：56px，给上方渐变更多呼吸 */
.site-header {
  position: sticky !important;
  top: 56px !important;
  margin: 56px auto 0 !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  grid-template-areas: "brand nav cta" !important;
  align-items: center !important;
  gap: 16px !important;
}

/* 2) Nav 真正视口居中：grid 三列（brand 左 / nav 中 / CTA 右）
      .brand 在 grid 第 1 列、.top-nav 在第 2 列（justify-self: center）。
      由于左右两侧 fr 等宽，第 2 列天然处于 header 几何中心 = 视口中心。
      CTA 用 absolute 钉到 header 右内边距处，脱离文档流避免破坏居中。*/
.brand {
  grid-column: brand;
  justify-self: start !important;
}
.top-nav {
  grid-column: nav;
  position: static !important;
  transform: none !important;
  justify-self: center !important;
  flex: none !important;
  width: auto !important;
  display: inline-flex !important;
  gap: 4px !important;
  align-items: center !important;
}
.top-nav a:last-child {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}

/* 3) Footer 更浅：再向 cream 靠拢 */
.site-footer {
  background: #faf6ee !important;
  border-top: 1px solid rgba(20, 17, 15, 0.035) !important;
}

/* 4) Mobile */
@media (max-width: 768px) {
  .site-header {
    top: 28px !important;
    margin: 28px auto 0 !important;
    grid-template-columns: auto 1fr !important;
    grid-template-areas: "brand nav" !important;
  }
  .top-nav a:last-child {
    position: static !important;
    transform: none !important;
  }
}

/* ===== V3.18 — Canvas 四周间距统一 ~10 ===== */
.page-canvas {
  top: 10px !important;
  left: 10px !important;
  right: 10px !important;
}
@media (max-width: 768px) {
  .page-canvas {
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
  }
}

/* ===== V3.19 — Header 在 Canvas 内浮起（参考 Presensio 比例）=====
   思路：
   - Canvas 四边间距统一 14（小）
   - Header 默认位置：top 88（≈ 画布顶 +74px 呼吸），width 比 Canvas 各内缩 ~70（左右各离视口 84）
   - Header 滚动后：仍然 pill，缩到 1180 居中，顶部 12
*/

/* Canvas：四周 14（小） */
.page-canvas {
  top: 14px !important;
  left: 14px !important;
  right: 14px !important;
}

/* Header 默认：在 Canvas 内部「浮起」 */
.site-header {
  top: 88px !important;
  width: calc(100% - 168px) !important;   /* 各离视口 84px = 离 Canvas 内边 70px */
  max-width: 1320px !important;
  margin: 88px auto 0 !important;
  height: 64px !important;
  padding: 8px 8px 8px 22px !important;
  border-radius: 22px !important;
}

/* Header 滚动：缩到 pill、贴顶 */
.site-header.is-scrolled {
  top: 12px !important;
  width: min(1180px, calc(100% - 56px)) !important;
  margin: 12px auto 0 !important;
  height: 54px !important;
  padding: 6px 6px 6px 20px !important;
  border-radius: 16px !important;
}

/* Mobile：保持紧凑 */
@media (max-width: 768px) {
  .page-canvas {
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
  }
  .site-header {
    top: 44px !important;
    width: calc(100% - 36px) !important;
    margin: 44px auto 0 !important;
    height: 56px !important;
  }
  .site-header.is-scrolled {
    top: 10px !important;
    width: calc(100% - 24px) !important;
    margin: 10px auto 0 !important;
    height: 50px !important;
  }
}

/* ===== V3.20 — 修正 V3.19 过大的 88 margin ===== */
/* 思路：
   - Canvas：四周 14（保持）
   - Header 默认：top/margin 28（仅 14px 渐变带在上方，hero 不再被推下去）
   - Header 滚动：top/margin 14（贴 canvas 顶 pill 化）
   - 宽度：默认接近 canvas 宽度（仅 30 内缩），滚动后变 pill 1180 居中
*/

.site-header {
  top: 28px !important;
  width: calc(100% - 60px) !important;
  max-width: 1400px !important;
  margin: 28px auto 0 !important;
  height: 64px !important;
  padding: 8px 8px 8px 22px !important;
  border-radius: 20px !important;
}

.site-header.is-scrolled {
  top: 14px !important;
  width: min(1180px, calc(100% - 60px)) !important;
  margin: 14px auto 0 !important;
  height: 54px !important;
  padding: 6px 6px 6px 20px !important;
  border-radius: 16px !important;
}

@media (max-width: 768px) {
  .site-header {
    top: 18px !important;
    width: calc(100% - 28px) !important;
    margin: 18px auto 0 !important;
    height: 56px !important;
  }
  .site-header.is-scrolled {
    top: 10px !important;
    width: calc(100% - 24px) !important;
    margin: 10px auto 0 !important;
    height: 50px !important;
  }
}

/* ===== V3.21 — Canvas 顶部顶格 ===== */
.page-canvas {
  top: 0 !important;
  /* 顶部贴视口，去掉上方两个圆角避免与边缘冲突 */
  border-radius: 0 !important;
}
@media (max-width: 768px) {
  .page-canvas {
    top: 0 !important;
    border-radius: 0 !important;
  }
}

/* ===== V3.22 — Canvas top 60 + 恢复上圆角 40 40 0 0 ===== */
.page-canvas {
  top: 60px !important;
  border-radius: 40px 40px 0 0 !important;
}
@media (max-width: 768px) {
  .page-canvas {
    top: 40px !important;
    border-radius: 28px 28px 0 0 !important;
  }
}

/* ===== V3.23 — Canvas top -20（上溢到视口外 20，让顶部贴视口同时保留圆角的下半部分）===== */
.page-canvas {
  top: -20px !important;
}
@media (max-width: 768px) {
  .page-canvas {
    top: -14px !important;
  }
}

/* ===== V3.24 — Canvas top -14 ===== */
.page-canvas {
  top: -14px !important;
}
@media (max-width: 768px) {
  .page-canvas {
    top: -10px !important;
  }
}

/* ===== V3.25 — Canvas top -30 / left right 30 + Header top 58 ===== */
.page-canvas {
  top: -30px !important;
  left: 30px !important;
  right: 30px !important;
}

.site-header {
  top: 58px !important;
  margin: 58px auto 0 !important;
}

@media (max-width: 768px) {
  .page-canvas {
    top: -20px !important;
    left: 16px !important;
    right: 16px !important;
  }
  .site-header {
    top: 36px !important;
    margin: 36px auto 0 !important;
  }
}

/* ===== V3.26 — Header 左右各 30（跟 canvas 左右对齐）===== */
.site-header {
  width: calc(100% - 60px) !important;
  max-width: none !important;
  margin: 58px auto 0 !important;
}
.site-header.is-scrolled {
  /* 滚动后 pill 化，缩到 1180 居中（保持现有逻辑） */
  width: min(1180px, calc(100% - 60px)) !important;
  margin: 14px auto 0 !important;
}
@media (max-width: 768px) {
  .site-header {
    width: calc(100% - 32px) !important;
    margin: 36px auto 0 !important;
  }
  .site-header.is-scrolled {
    width: calc(100% - 32px) !important;
    margin: 10px auto 0 !important;
  }
}

/* ===== V3.27 — Header 左右各 50 ===== */
.site-header {
  width: calc(100% - 100px) !important;
  max-width: none !important;
}
.site-header.is-scrolled {
  width: min(1180px, calc(100% - 100px)) !important;
}
@media (max-width: 768px) {
  .site-header {
    width: calc(100% - 32px) !important;
  }
  .site-header.is-scrolled {
    width: calc(100% - 32px) !important;
  }
}

/* ===== V3.28 — Header 左右各 60 ===== */
.site-header {
  width: calc(100% - 120px) !important;
}
.site-header.is-scrolled {
  width: min(1180px, calc(100% - 120px)) !important;
}

/* ===== V3.29 — Card 详情页 main 限宽 1180 ===== */
main#cardPage.card-page-main,
.card-page-main {
  width: min(1180px, calc(100% - 32px)) !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
}
@media (max-width: 768px) {
  main#cardPage.card-page-main,
  .card-page-main {
    width: calc(100% - 24px) !important;
  }
}

/* ===== V3.30 — 详情页 manuscript-block 四边 56 + 正文字号 17 ===== */
.manuscript-block {
  padding: 56px !important;
}
.article-block p,
.manuscript-block p,
.article-block li,
.manuscript-block li {
  font-size: 17px !important;
  line-height: 1.85 !important;
}
@media (max-width: 768px) {
  .manuscript-block {
    padding: 32px !important;
  }
  .article-block p,
  .manuscript-block p,
  .article-block li,
  .manuscript-block li {
    font-size: 16px !important;
  }
}

/* ===== V3.31 — 详情页排版统一（4边56 / 17号字 / 标题加大加粗 / 内容统一缩进 ===== */

/* 1) 所有 .article-block 衍生块统一 4 边 56 */
.article-block,
.lead-block,
.definition-block,
.question-block,
.manuscript-block,
.product-block,
.article-block.tool-block {
  padding: 56px !important;
}

/* 2) 块内所有内容（标题 + 正文）统一在 56 之外再加 24 横向缩进 —
      达到"作者提醒"般的居中内缩感，标题与正文左右对齐一致 */
.article-block > .article-kicker,
.article-block > h2,
.article-block > h3,
.article-block > h4,
.article-block > p,
.article-block > ul,
.article-block > ol,
.article-block > blockquote,
.article-block > figure,
.article-block > .definition-text,
.article-block > .article-numbered,
.article-block > section {
  padding-left: 24px !important;
  padding-right: 24px !important;
}
/* section 内部递归 */
.article-block > section > h2,
.article-block > section > h3,
.article-block > section > p,
.article-block > section > ul,
.article-block > section > ol {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.article-block > section {
  /* section 已经接收了 24 内缩，内部 child 不再加 */
}

/* 3) 标题加大加粗（视觉冲击力提升一档） */
.article-block h2 {
  font-size: clamp(30px, 3.2vw, 44px) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 0 22px !important;
}
.article-block h3 {
  font-size: clamp(22px, 2.1vw, 30px) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 36px 0 14px !important;
}

/* 4) 17 号正文配套行高 + 段距 */
.article-block p,
.manuscript-block p,
.article-block li,
.manuscript-block li {
  font-size: 17px !important;
  line-height: 1.88 !important;
}
.article-block p + p,
.manuscript-block p + p {
  margin-top: 22px !important;
}
.article-block ul,
.article-block ol,
.manuscript-block ul,
.manuscript-block ol {
  margin-top: 18px !important;
  margin-bottom: 18px !important;
}
.article-block li + li {
  margin-top: 10px !important;
}

/* 5) Mobile：padding 缩到 28，内缩降到 0（小屏不需要再缩进） */
@media (max-width: 768px) {
  .article-block,
  .lead-block,
  .definition-block,
  .question-block,
  .manuscript-block,
  .product-block,
  .article-block.tool-block {
    padding: 28px !important;
  }
  .article-block > .article-kicker,
  .article-block > h2,
  .article-block > h3,
  .article-block > p,
  .article-block > ul,
  .article-block > ol,
  .article-block > section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .article-block h2 { font-size: 26px !important; }
  .article-block h3 { font-size: 20px !important; }
  .article-block p,
  .manuscript-block p {
    font-size: 16px !important;
  }
}

/* ===== V3.32 — 真正统一所有内容缩进（含 .longform / aside）+ h2 略小 ===== */

/* 1) 把之前漏掉的 .longform 和 reader-note 加入 24 内缩 */
.article-block > .longform,
.article-block > aside.reader-note,
.article-block > .summary-text,
.article-block > ul,
.article-block > ol,
.article-block > .reflect-list {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* 2) .longform 内部的 h3 / p / ul / section 不再额外缩进（继承父 24） */
.article-block > .longform > h2,
.article-block > .longform > h3,
.article-block > .longform > h4,
.article-block > .longform > p,
.article-block > .longform > ul,
.article-block > .longform > ol,
.article-block > .longform > blockquote,
.article-block > .longform > section,
.article-block > .longform > section > h2,
.article-block > .longform > section > h3,
.article-block > .longform > section > h4,
.article-block > .longform > section > p,
.article-block > .longform > section > ul,
.article-block > .longform > section > ol {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 3) h2 字号略小一档 */
.article-block h2 {
  font-size: clamp(28px, 2.9vw, 40px) !important;
}

/* 4) Pull-quote：去掉 max-width 让它跟 h2 同宽，保留左侧 border 装饰 */
.article-block > blockquote.pull-quote,
.article-block > .longform > blockquote.pull-quote {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (max-width: 768px) {
  .article-block > .longform,
  .article-block > aside.reader-note,
  .article-block > .summary-text,
  .article-block > ul,
  .article-block > ol,
  .article-block > .reflect-list {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .article-block h2 { font-size: 24px !important; }
}

/* ===== V3.33 — 卡片 hover 只翻面，去掉位移和阴影变化 ===== */
.flip-card:hover .flip-inner,
.flip-card:focus-visible .flip-inner {
  transform: none !important;
  box-shadow:
    0 1px 1px rgba(20, 17, 15, 0.03),
    0 6px 12px -4px rgba(20, 17, 15, 0.06),
    0 20px 36px -16px rgba(20, 17, 15, 0.18) !important;
}

/* ===== V3.34 — 精修 HOW TO USE 三步卡（编辑/杂志感）===== */

/* 1) 去掉顶部 4px 彩条（最招笑的 SaaS 味）*/
.why-step::before {
  display: none !important;
}

/* 2) 卡片本体：去硬边框、加暖色渐变底、更大圆角、纯阴影漂浮 */
.why-step {
  padding: 48px 36px 36px !important;
  border: 1px solid transparent !important;
  border-radius: 28px !important;
  background:
    linear-gradient(180deg, rgba(255, 252, 248, 1) 0%, rgba(252, 245, 236, 0.85) 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 1px 2px rgba(20, 17, 15, 0.03),
    0 20px 50px -22px rgba(20, 17, 15, 0.14),
    0 40px 90px -30px rgba(20, 17, 15, 0.10) !important;
  overflow: visible !important;
}

/* 3) 删掉圆框飘箭头连接器 */
.why-connector {
  display: none !important;
}

/* 4) 步骤头部重排：大数字左、图标右上 */
.why-step-head {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "num icon"
    "label icon" !important;
  align-items: start !important;
  gap: 4px 16px !important;
  margin-bottom: 32px !important;
}

/* 5) 大数字 "01" — 超大衬线，编辑式锚点 */
.why-num {
  grid-area: num;
  font-family: var(--font-serif) !important;
  font-size: 52px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink-strong) !important;
  text-transform: none !important;
  /* 把原本的 "01 · 看地图" 拆成两行：JS 不改，用 CSS first-line trick 太脆，
     这里改为把整行作为大数字 + 副标（副标看下面）*/
}

/* 把 ". 看地图" 部分挪到副标（用属性选择器读不出，改用 ::after 不可行因为有内容）
   简化方案：把整段保留，但用 font-feature 让 "01" 显大、"· 看地图" 显小 — 用 letter-spacing 不够
   最干净的办法是 JS 拆分；这里采用一个 CSS-only 的折中：保留整段文字一行，但缩小到 H4 大小，
   并把大数字作为 ::before 派生（取 attr 不行，文本里没有 data-*）。
   实用方案：先让 .why-num 整体当作小标签（恢复 micro 字号 + accent 色），
   然后另起一个大数字层用 CSS counter ──── 见下 ─── */

/* 取消上面那块超大 .why-num，回归小标签风格（accent 色 + 字母间距）*/
.why-num {
  grid-area: label;
  align-self: end;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
}

/* 用 counter 在卡片上生成超大数字 "01 / 02 / 03"（编辑式锚点）*/
.why-journey { counter-reset: whyc; }
.why-step { counter-increment: whyc; }
.why-step::after {
  content: counter(whyc, decimal-leading-zero);
  grid-area: num;
  position: absolute;
  top: 32px;
  left: 36px;
  font-family: var(--font-serif);
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink-strong);
  pointer-events: none;
}

/* 把 .why-num "01 · 看地图" 这一行视觉上下移到大数字下方 */
.why-step-head {
  padding-top: 60px !important;        /* 给大数字腾位置 */
}
.why-num {
  margin-top: 4px;
}

/* 6) 图标容器：56px 软玻璃 — 双层渐变 + 微内阴影 + 外柔阴影 */
.why-icon {
  grid-area: icon !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 252, 248, 0.45) 100%),
    var(--coral-soft) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 -1px 0 rgba(20, 17, 15, 0.04) inset,
    0 6px 14px -4px rgba(244, 93, 72, 0.18),
    0 1px 2px rgba(20, 17, 15, 0.04) !important;
}
.why-icon svg {
  width: 26px !important;
  height: 26px !important;
  stroke-width: 1.5 !important;
}
.why-step:nth-child(2) .why-icon {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 252, 248, 0.45) 100%),
    rgba(196, 122, 43, 0.12) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 -1px 0 rgba(20, 17, 15, 0.04) inset,
    0 6px 14px -4px rgba(196, 122, 43, 0.20),
    0 1px 2px rgba(20, 17, 15, 0.04) !important;
}
.why-step:nth-child(3) .why-icon {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 252, 248, 0.45) 100%),
    var(--teal-soft) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 -1px 0 rgba(20, 17, 15, 0.04) inset,
    0 6px 14px -4px rgba(7, 128, 128, 0.20),
    0 1px 2px rgba(20, 17, 15, 0.04) !important;
}

/* 7) 标题 + 正文：放大、衬线感更足 */
.why-step h3 {
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 16px !important;
}
.why-step p {
  font-size: 15.5px !important;
  line-height: 1.78 !important;
  color: rgba(20, 17, 15, 0.66) !important;
  margin: 0 0 32px !important;
}

/* 8) 底部 anchor chip：克制版 — 纯文字 + 圆点（不再用大色块）*/
.why-anchor {
  background: transparent !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  gap: 8px !important;
}
.why-anchor::before {
  width: 7px !important;
  height: 7px !important;
  opacity: 1 !important;
}

/* 9) hover：不位移，只柔光晕 + 阴影微深 */
.why-step:hover {
  transform: none !important;
  border-color: transparent !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 2px 4px rgba(20, 17, 15, 0.04),
    0 28px 60px -22px rgba(20, 17, 15, 0.18),
    0 56px 110px -32px rgba(244, 93, 72, 0.10) !important;
}

/* 10) 大数字颜色随卡片 accent 微调 */
.why-step:nth-child(1)::after { color: var(--coral-deep); opacity: 0.85; }
.why-step:nth-child(2)::after { color: #b86d1f; opacity: 0.85; }
.why-step:nth-child(3)::after { color: var(--teal); opacity: 0.85; }

/* 11) Mobile */
@media (max-width: 768px) {
  .why-step {
    padding: 36px 24px 28px !important;
    border-radius: 22px !important;
  }
  .why-step::after {
    font-size: 48px;
    top: 24px;
    left: 24px;
  }
  .why-step-head {
    padding-top: 48px !important;
  }
  .why-icon {
    width: 48px !important;
    height: 48px !important;
  }
}

/* ===== V3.35 — Footer 调整：版权上移 / 去版本号 / Logo 加大 / 加英文副标 ===== */

/* 1) 版权信息：移到 grid 顶部，作为整个 footer 的开篇 */
.footer-copyright {
  margin: 0 0 28px !important;
  padding: 0 0 24px !important;
  border-bottom: 1px solid rgba(20, 17, 15, 0.06) !important;
  color: rgba(20, 17, 15, 0.6) !important;
  font-family: var(--font-sans);
  font-size: 13.5px;
  letter-spacing: 0.01em;
}

/* 2) Footer brand-mark 加大：32 → 56 */
.footer-brand .brand-mark {
  width: 56px !important;
  height: 56px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  margin-bottom: 14px;
  object-fit: contain;
}

/* 3) Footer brand 名字 + 英文副标 排版 */
.footer-brand strong {
  display: block;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--ink-strong);
  margin-bottom: 4px;
}

.footer-brand-en {
  display: block;
  font-style: normal !important;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(20, 17, 15, 0.45);
  margin-bottom: 14px;
}

.footer-brand p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(20, 17, 15, 0.6);
}

/* 4) 底部 aux 链接行更克制 */
.footer-aux-row {
  margin-top: 28px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(20, 17, 15, 0.06) !important;
}
.footer-aux {
  margin: 0 !important;
  font-size: 13px;
  color: rgba(20, 17, 15, 0.55);
}

/* ===== V3.37 — 版权挪到学术指导下方（克制小字） ===== */
.footer-credit .footer-copyright {
  margin: 14px 0 0 !important;
  padding: 0 !important;
  border: none !important;
  font-size: 12px !important;
  color: rgba(20, 17, 15, 0.42) !important;
  letter-spacing: 0.01em !important;
  font-family: var(--font-sans);
}

/* ===== V3.38 — HOW TO USE 编辑式重做（DM Serif Display 主导）===== */

/* 1) 卡片本体：去掉米色渐变，回归纸感（cream + 极淡 hairline）+ 更软阴影 */
.why-step {
  padding: 48px 40px 32px !important;
  border: 1px solid rgba(20, 17, 15, 0.05) !important;
  border-radius: 24px !important;
  background: #fdfaf5 !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 1px 2px rgba(20, 17, 15, 0.02),
    0 24px 56px -28px rgba(20, 17, 15, 0.12) !important;
  overflow: visible !important;
  position: relative;
}

/* 2) 大数字（编辑式）：DM Serif Display Italic / 120px / 强对比 */
.why-step::after {
  content: counter(whyc, decimal-leading-zero) !important;
  position: absolute !important;
  top: 28px !important;
  left: 40px !important;
  font-family: "DM Serif Display", "Source Serif 4", "Noto Serif SC", serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 116px !important;
  line-height: 0.92 !important;
  letter-spacing: -0.04em !important;
  color: var(--ink-strong) !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

/* 数字颜色：随卡片 accent 微调（饱和度收敛，编辑感）*/
.why-step:nth-child(1)::after { color: var(--coral-deep) !important; }
.why-step:nth-child(2)::after { color: #b56b1f !important; }
.why-step:nth-child(3)::after { color: var(--teal) !important; }

/* 3) 顶部留白给大数字让位 */
.why-step-head {
  padding-top: 132px !important;
  display: block !important;       /* 取消 V3.34 的 grid，复杂构图改回线性流 */
  margin-bottom: 0 !important;
}

/* 4) Eyebrow 小标签：极简 — accent 色小字母间距大，单行紧贴大数字下方 */
.why-num {
  display: block !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
  /* 颜色 V3.34 已按 child 分配 */
}

/* 5) 完全隐藏小图标方框 — 数字本身已经是图标 */
.why-icon {
  display: none !important;
}

/* 6) h3：放大、加重，字重对比鲜明 */
.why-step h3 {
  font-family: var(--font-serif) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.012em !important;
  margin: 0 0 18px !important;
  color: var(--ink-strong) !important;
}

/* 7) 正文：略克制 */
.why-step p {
  font-size: 15px !important;
  line-height: 1.78 !important;
  color: rgba(20, 17, 15, 0.62) !important;
  margin: 0 0 36px !important;
}

/* 8) 底部：去除 chip 背景 → 纯文字 + 右上对角箭头 → */
.why-anchor {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: transparent !important;
  padding: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  /* 颜色 V3.34 已分配 */
}
.why-anchor::before {
  display: none !important;
}
.why-anchor::after {
  content: "→" !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  margin-left: 2px !important;
  transition: transform 220ms ease !important;
}
.why-step:hover .why-anchor::after {
  transform: translateX(4px) !important;
}

/* 9) hover：极简 — 不位移，仅 hairline 加深 + 暖色微微 glow */
.why-step:hover {
  transform: none !important;
  border-color: rgba(20, 17, 15, 0.10) !important;
  background: #fcf6ee !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 2px 4px rgba(20, 17, 15, 0.03),
    0 32px 70px -28px rgba(20, 17, 15, 0.16),
    0 64px 110px -40px rgba(244, 93, 72, 0.08) !important;
}

/* 10) 隐藏旧连接器（V3.34 已做，加固）*/
.why-connector { display: none !important; }

/* 11) Mobile */
@media (max-width: 768px) {
  .why-step {
    padding: 36px 28px 24px !important;
    border-radius: 20px !important;
  }
  .why-step::after {
    font-size: 92px !important;
    top: 20px !important;
    left: 28px !important;
  }
  .why-step-head {
    padding-top: 100px !important;
  }
  .why-step h3 {
    font-size: 20px !important;
  }
}

/* ===== V3.39 — Card.html 编辑式精修（与首页 V3.38 同谱系）===== */

/* ──────────────────────────────────────────────────────────────
   P0-A: article-numbered "01 / 02..."
   从「橙小数字 + 横线」改成「DM Serif Display Italic 衬线大数字 + hairline」
   ────────────────────────────────────────────────────────────── */
.longform .article-subsection {
  position: relative;
  padding-top: 32px;
  margin-top: 48px;
  border-top: 1px solid rgba(20, 17, 15, 0.08);
}
.longform .article-subsection:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.longform .article-subsection .article-num,
.longform .article-subsection [data-section-num] {
  display: inline-block !important;
  font-family: "DM Serif Display", "Source Serif 4", serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 36px !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  color: var(--accent, var(--coral-deep)) !important;
  margin-right: 14px !important;
  vertical-align: -2px !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}
.longform .article-subsection h3 {
  display: flex;
  align-items: baseline;
  gap: 0;
  margin-top: 0 !important;
}

/* ──────────────────────────────────────────────────────────────
   P0-B: pull-quote — 编辑式巨型引号
   ────────────────────────────────────────────────────────────── */
.article-block .pull-quote,
.article-block > blockquote.pull-quote,
.article-block > .longform > blockquote.pull-quote,
.pull-quote {
  position: relative !important;
  margin: 28px 0 36px !important;
  padding: 8px 0 8px 64px !important;
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  color: var(--ink-strong) !important;
  letter-spacing: -0.005em !important;
}
.article-block .pull-quote::before,
.pull-quote::before {
  content: "\201C" !important;   /* 左花引号 " */
  position: absolute !important;
  left: 0 !important;
  top: -18px !important;
  font-family: "DM Serif Display", "Source Serif 4", serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 96px !important;
  line-height: 1 !important;
  color: var(--accent, var(--coral-deep)) !important;
  opacity: 0.72 !important;
  pointer-events: none !important;
}

/* ──────────────────────────────────────────────────────────────
   P0-C: detail-tag — 标签从 pill 改成「#标签」极简下划线
   ────────────────────────────────────────────────────────────── */
.detail-tag {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 2px !important;
  padding: 0 !important;
  margin: 0 14px 0 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: rgba(20, 17, 15, 0.6) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  transition: color 180ms ease, opacity 180ms ease !important;
}
.detail-tag .tag-hash {
  color: var(--accent, var(--coral-deep)) !important;
  font-weight: 700 !important;
  margin-right: 1px !important;
  opacity: 0.9 !important;
}
.detail-tag:hover {
  color: var(--ink-strong) !important;
  background: transparent !important;
}
.detail-tag:hover .tag-hash {
  opacity: 1 !important;
}
.detail-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 0 !important;
  margin-top: 18px !important;
}

/* ──────────────────────────────────────────────────────────────
   P1-A: quick-nav (上一张 / 下一张) — 实色按钮 → hairline + 箭头
   ────────────────────────────────────────────────────────────── */
.quick-nav-btn {
  padding: 20px 24px !important;
  background: transparent !important;
  border: 1px solid rgba(20, 17, 15, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  transition: border-color 220ms ease, background 220ms ease, transform 220ms ease !important;
}
.quick-nav-btn .quick-nav-arrow {
  font-family: var(--font-sans) !important;
  font-size: 18px !important;
  color: var(--accent, var(--coral-deep)) !important;
  transition: transform 220ms ease !important;
}
.quick-nav-btn .quick-nav-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(20, 17, 15, 0.5) !important;
}
.quick-nav-btn .quick-nav-id {
  font-family: "DM Serif Display", "Source Serif 4", serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 22px !important;
  letter-spacing: -0.01em !important;
  color: var(--ink-strong) !important;
}
.quick-nav-btn:hover {
  background: rgba(255, 252, 248, 0.85) !important;
  border-color: rgba(20, 17, 15, 0.16) !important;
  transform: none !important;
  box-shadow: 0 8px 28px -12px rgba(20, 17, 15, 0.14) !important;
}
.quick-nav-btn:hover .quick-nav-arrow {
  transform: translateX(4px);
}
.quick-nav-btn[data-direction="prev"]:hover .quick-nav-arrow {
  transform: translateX(-4px);
}

/* ──────────────────────────────────────────────────────────────
   P1-B: hero-meta-stack (level · module · type) — 编辑式 caption
   ────────────────────────────────────────────────────────────── */
.hero-meta-stack {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(20, 17, 15, 0.5) !important;
}
.hero-meta-level {
  color: var(--accent, var(--coral-deep)) !important;
  font-weight: 700 !important;
}
.hero-meta-divider {
  margin: 0 10px !important;
  color: rgba(20, 17, 15, 0.25) !important;
}

/* ──────────────────────────────────────────────────────────────
   P1-C: related-card — hover 跟卡片库统一（不位移、仅边框微变）
   ────────────────────────────────────────────────────────────── */
.related-card {
  transition: border-color 240ms ease, background 240ms ease, box-shadow 240ms ease !important;
}
.related-card:hover {
  transform: none !important;
  border-color: rgba(20, 17, 15, 0.14) !important;
  box-shadow: 0 16px 40px -18px rgba(20, 17, 15, 0.16) !important;
}

/* ──────────────────────────────────────────────────────────────
   P2-A: reader-note — 作者提醒 — 正文改 serif italic 更有文学味
   ────────────────────────────────────────────────────────────── */
.reader-note {
  background: rgba(20, 17, 15, 0.025) !important;
  border-radius: 14px !important;
  padding: 22px 26px !important;
}
.reader-note strong {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--accent, var(--coral-deep)) !important;
}
.reader-note span {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: rgba(20, 17, 15, 0.78) !important;
}

/* ──────────────────────────────────────────────────────────────
   P2-B: path-chip — 学习路径标签微调
   ────────────────────────────────────────────────────────────── */
.path-chip {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

/* ──────────────────────────────────────────────────────────────
   P2-C: article-kicker — 已是 pill，加细化的精致度
   ────────────────────────────────────────────────────────────── */
.article-kicker {
  font-family: var(--font-sans) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
}

/* ──────────────────────────────────────────────────────────────
   P2-D: related-section h2 — 跟首页 section heading 统一
   ────────────────────────────────────────────────────────────── */
.related-section .related-header h2 {
  font-family: var(--font-serif) !important;
  font-size: clamp(28px, 2.6vw, 36px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}
.related-group-title {
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(20, 17, 15, 0.6) !important;
}
.related-group-desc {
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: rgba(20, 17, 15, 0.45) !important;
}

/* Mobile */
@media (max-width: 768px) {
  .pull-quote::before {
    font-size: 72px !important;
    top: -12px !important;
  }
  .pull-quote {
    padding-left: 44px !important;
    font-size: 18px !important;
  }
  .longform .article-subsection .article-num {
    font-size: 28px !important;
  }
  .quick-nav-btn {
    padding: 14px 16px !important;
  }
}

/* ===== V3.40 — 工具库 Skill Library 升级（87 张卡 = 87 个 Skill 槽位） ===== */

/* 1) tool-item: LIVE badge 定位（卡片右上角 accent 色 pill）*/
.tool-item {
  position: relative;
}
.tool-item-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent, var(--coral-deep)) 92%, #ffffff);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px -2px rgba(20, 17, 15, 0.18);
}

/* tool-item-id 调整字号（让位 LIVE badge）*/
.tool-item-id {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent, var(--coral-deep));
  opacity: 0.85;
}

/* 2) tool-library-meta: 工具库进度条卡片 */
.tool-library-meta {
  margin-top: 48px;
  padding: 36px 40px;
  background:
    linear-gradient(180deg, rgba(255, 252, 248, 1) 0%, rgba(252, 245, 236, 0.6) 100%);
  border: 1px solid rgba(20, 17, 15, 0.05);
  border-radius: 24px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 1px 2px rgba(20, 17, 15, 0.02),
    0 24px 56px -28px rgba(20, 17, 15, 0.10);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* 3) tool-progress: 三档统计数字 */
.tool-progress {
  display: flex;
  align-items: center;
  gap: 36px;
}
.tool-progress-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.tool-progress-stat strong {
  font-family: "DM Serif Display", "Source Serif 4", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink-strong);
}
.tool-progress-stat:nth-child(1) strong { color: var(--coral-deep); }
.tool-progress-stat:nth-child(3) strong { color: rgba(20, 17, 15, 0.45); }
.tool-progress-stat:nth-child(5) strong { color: var(--ink-strong); }
.tool-progress-stat span {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(20, 17, 15, 0.5);
}
.tool-progress-divider {
  width: 1px;
  height: 36px;
  background: rgba(20, 17, 15, 0.10);
}

/* 4) tool-library-hint: 底部说明文字 */
.tool-library-hint {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  color: rgba(20, 17, 15, 0.56);
  text-align: center;
}
.tool-library-hint a {
  color: var(--coral-deep);
  font-weight: 600;
  text-decoration: none;
  transition: opacity 180ms ease;
}
.tool-library-hint a:hover {
  opacity: 0.7;
}

@media (max-width: 768px) {
  .tool-library-meta {
    padding: 28px 20px;
    gap: 18px;
  }
  .tool-progress {
    gap: 20px;
  }
  .tool-progress-stat strong {
    font-size: 40px;
  }
  .tool-progress-divider {
    height: 28px;
  }
  .tool-library-hint {
    font-size: 13px;
  }
}

/* ===== V3.41 — 详情页规范化（kicker对齐 / 去bullet / longform限宽 / 上下留白增） ===== */

/* 1) Article-kicker：从 pill chip → 纯文字小标
      去 bg / 去 padding / 字号收小 → 自然跟 h2 左边对齐 */
.article-kicker {
  display: inline-block !important;
  padding: 0 !important;
  margin: 0 0 18px !important;
  background: transparent !important;
  border-radius: 0 !important;
  border: none !important;
  color: var(--accent, var(--coral-deep)) !important;
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
}

/* 2) 去掉所有 ul / ol 的 • · ⚫ 符号 */
.article-block ul,
.article-block ol,
.longform ul,
.longform ol,
.manuscript-block ul,
.manuscript-block ol,
.reflect-list,
.questions-list,
.summary-list,
.article-block .reflect-list,
.article-block ul[class],
.article-block ol[class] {
  list-style: none !important;
  padding-left: 0 !important;
}
.article-block ul li,
.article-block ol li,
.longform ul li,
.longform ol li,
.manuscript-block ul li,
.manuscript-block ol li,
.reflect-list li {
  list-style: none !important;
  padding-left: 0 !important;
}
.article-block ul li::before,
.article-block ol li::before,
.longform ul li::before,
.longform ol li::before,
.manuscript-block ul li::before,
.reflect-list li::before {
  content: none !important;
  display: none !important;
}
/* 列表项左侧 marker 删除后，加一个精致 hairline 缩进感（可选）*/
.article-block ul li,
.longform ul li,
.manuscript-block ul li {
  position: relative;
  padding-left: 18px !important;
}
.article-block ul li::before,
.longform ul li::before,
.manuscript-block ul li::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.85em !important;
  width: 8px !important;
  height: 1px !important;
  background: rgba(20, 17, 15, 0.35) !important;
  border-radius: 0 !important;
}

/* 3) Longform / 块内内容：给一个舒适的「阅读柱」max-width，跟 h2 视觉宽度对齐
      h2 的衬线大标题通常在 600-760px 处自然换行，body 也对齐到 760 */
.article-block > h2,
.article-block > h3,
.article-block > p,
.article-block > .article-kicker,
.article-block > .summary-text,
.article-block > aside.reader-note,
.article-block > blockquote,
.article-block > ul,
.article-block > ol,
.article-block > .longform,
.article-block > .reflect-list {
  max-width: 760px !important;
}
.article-block > .longform > h2,
.article-block > .longform > h3,
.article-block > .longform > p,
.article-block > .longform > ul,
.article-block > .longform > ol,
.article-block > .longform > section,
.article-block > .longform > section > h3,
.article-block > .longform > section > p,
.article-block > .longform > section > ul {
  max-width: 100% !important;     /* longform 内的子元素填满 longform 760 上限 */
}

/* 4) article-block 上下 padding 增大，呼吸感 */
.article-block,
.lead-block,
.definition-block,
.question-block,
.manuscript-block,
.product-block,
.article-block.tool-block {
  padding: 72px 56px !important;
}
/* 标题与正文之间多一点呼吸 */
.article-block h2 {
  margin: 0 0 32px !important;
}

@media (max-width: 768px) {
  .article-kicker {
    font-size: 9.5px !important;
    margin-bottom: 14px !important;
  }
  .article-block,
  .lead-block,
  .manuscript-block,
  .product-block,
  .article-block.tool-block {
    padding: 40px 28px !important;
  }
  .article-block h2 {
    margin-bottom: 22px !important;
  }
  .article-block ul li,
  .longform ul li,
  .manuscript-block ul li {
    padding-left: 14px !important;
  }
}

/* ===== V3.43 — 修复 reader-note「作者提醒」左右非对称 ===== */
.article-block > aside.reader-note,
aside.reader-note,
.reader-note {
  box-sizing: border-box !important;
  /* 显式锁死所有 padding-* 的单独值，强制对称 */
  padding-top: 24px !important;
  padding-right: 28px !important;
  padding-bottom: 24px !important;
  padding-left: 28px !important;
  margin: 28px 0 0 0 !important;
  max-width: 760px !important;
  width: auto !important;
  background: rgba(20, 17, 15, 0.04) !important;
  border-radius: 14px !important;
  /* 保留 grid 布局但确保 align 不破坏对称 */
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
}

@media (max-width: 768px) {
  .article-block > aside.reader-note,
  aside.reader-note,
  .reader-note {
    padding: 20px 22px !important;
    margin-top: 20px !important;
  }
}

/* ===== V3.44 — Reflect 列表 + Tool block 精修 ===== */

/* 1) 清掉 V3.41 hairline 对 reflect-list 的污染（之前匹配到了 .article-block ul li::before） */
.article-block .reflect-list li::before,
.reflect-list li::before {
  /* 完全清空 — 不再用伪元素显示任何 marker（包括灰线、数字 chip） */
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* 2) Reflect-list li 重做：去掉 counter chip 占位，padding 对称，更干净 */
.article-block > .reflect-list,
.reflect-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 24px 0 0 !important;
  display: grid !important;
  gap: 14px !important;
  counter-reset: none !important;     /* 取消 counter，因为我们不再显示 */
}
.article-block .reflect-list li,
.reflect-list li {
  position: relative !important;
  padding: 18px 22px !important;        /* 左右对称，去掉之前的 52 padding-left */
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--accent, var(--coral-deep)) 5%, var(--cream)) !important;
  border: 1px solid color-mix(in srgb, var(--accent, var(--coral-deep)) 14%, transparent) !important;
  color: var(--ink-strong) !important;
  font-family: var(--font-sans) !important;
  font-size: 15.5px !important;
  line-height: 1.7 !important;
  counter-increment: none !important;
  list-style: none !important;
}

/* 3) Tool-block 「复用为 AI Skill 提示词」面板：去虚线 → 细实线 hairline */
.tool-skill {
  margin-top: 28px !important;
  border-radius: 12px !important;
  border: 1px solid color-mix(in srgb, var(--accent, var(--coral-deep)) 18%, transparent) !important;
  padding: 14px 18px !important;
  background: color-mix(in srgb, var(--accent, var(--coral-deep)) 3%, white) !important;
}
.tool-skill > summary {
  list-style: none !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.tool-skill > summary::-webkit-details-marker { display: none !important; }
.tool-skill > summary::marker { content: "" !important; }
.tool-skill-title {
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink-strong) !important;
  letter-spacing: 0.005em !important;
}
.tool-skill-title::before {
  content: "▸ " !important;
  margin-right: 4px !important;
  color: var(--accent, var(--coral-deep)) !important;
  transition: transform 220ms ease !important;
  display: inline-block !important;
}
.tool-skill[open] .tool-skill-title::before {
  content: "▾ " !important;
}
.tool-skill-copy {
  padding: 6px 14px !important;
  border-radius: 8px !important;
  border: 1px solid color-mix(in srgb, var(--accent, var(--coral-deep)) 30%, transparent) !important;
  background: transparent !important;
  color: var(--accent, var(--coral-deep)) !important;
  font-family: var(--font-sans) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease !important;
}
.tool-skill-copy:hover {
  background: color-mix(in srgb, var(--accent, var(--coral-deep)) 8%, transparent) !important;
  border-color: color-mix(in srgb, var(--accent, var(--coral-deep)) 50%, transparent) !important;
}

/* 4) Tool body 的 1./2./3. 文字（来自 <p>）— 保持简洁，无符号、无额外缩进 */
.tool-block .tool-body p {
  margin: 8px 0 !important;
  font-size: 16px !important;
  line-height: 1.85 !important;
}
.tool-block .tool-sub {
  margin: 22px 0 8px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

@media (max-width: 768px) {
  .article-block .reflect-list li,
  .reflect-list li {
    padding: 14px 16px !important;
    font-size: 14.5px !important;
  }
  .tool-skill {
    padding: 12px 14px !important;
  }
}

/* ===== V3.46 — 全面移动端响应式精修 =====
   策略：两档断点
   - 768px：tablet & large phone（横屏）
   - 480px：phone（竖屏）
   ============================================ */

/* ============================================
   档 1 — ≤ 768px：tablet + large phone
   ============================================ */
@media (max-width: 768px) {

  /* —— Header：覆盖 V3.27/28 的桌面值 —— */
  .site-header {
    top: 14px !important;
    width: calc(100% - 20px) !important;
    margin: 14px auto 0 !important;
    height: 56px !important;
    padding: 6px 8px 6px 14px !important;
    border-radius: 16px !important;
    grid-template-columns: auto 1fr !important;
    grid-template-areas: "brand cta" !important;
    gap: 10px !important;
  }
  .site-header.is-scrolled {
    top: 10px !important;
    width: calc(100% - 20px) !important;
    margin: 10px auto 0 !important;
    height: 52px !important;
  }
  /* 隐藏中间 nav 链接（保留 brand + CTA），手机端用底部跳转或 hamburger */
  .top-nav {
    display: none !important;
  }
  /* 把 "工具入口" CTA 单独显示在右侧 */
  .top-nav a:last-child {
    display: inline-flex !important;
    position: static !important;
    transform: none !important;
    grid-column: cta !important;
    justify-self: end !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
  }
  .site-header > .top-nav {
    display: contents !important;
  }
  
  /* —— Brand: 副标题英文隐藏，主标题缩小 —— */
  .brand-mark { width: 32px !important; height: 32px !important; }
  .brand-text strong { font-size: 14.5px !important; }
  .brand-text em { display: none !important; }

  /* —— Page Canvas：四周更紧 —— */
  .page-canvas {
    top: -10px !important;
    left: 8px !important;
    right: 8px !important;
    height: 720px !important;
  }

  /* —— Hero：双栏 → 单列堆叠 —— */
  .hero {
    width: calc(100% - 28px) !important;
    grid-template-columns: 1fr !important;
    padding: 32px 0 24px !important;
    gap: 32px !important;
  }
  .hero-copy h1 {
    font-size: clamp(30px, 8vw, 40px) !important;
    line-height: 1.2 !important;
  }
  .hero-lede {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }
  .hero-actions {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .hero-actions .button {
    flex: 1 1 calc(50% - 5px) !important;
    min-width: 0 !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    text-align: center !important;
    justify-content: center !important;
  }
  .hero-actions .button.buy {
    flex: 1 1 100% !important;
  }
  .hero-metrics {
    gap: 18px !important;
    margin-top: 22px !important;
  }
  .hero-metrics dt { font-size: 32px !important; }
  .hero-metrics dd { font-size: 12px !important; }
  
  /* —— Hero-stage：3 张浮动卡缩小，min-height 显著减小 —— */
  .hero-stage {
    min-height: 320px !important;
    width: 100% !important;
    margin-top: 8px !important;
  }
  .floating-card {
    width: 38vw !important;
  }
  .card-one { left: 2%; top: 6%; }
  .card-two { left: 50%; top: 0; width: 44vw !important; }
  .card-three { right: 2%; top: 10%; }

  /* —— Institution-band：双栏 → 单列 —— */
  .institution-band {
    width: calc(100% - 28px) !important;
    grid-template-columns: 1fr !important;
    padding: 32px 24px !important;
    gap: 24px !important;
  }
  .institution-band h2 { font-size: 24px !important; }
  .institution-band h2 .line-1,
  .institution-band h2 .line-2 { display: inline !important; }
  .institution-proof {
    grid-template-columns: 1fr !important;
  }

  /* —— Section padding 收紧 —— */
  .section {
    width: calc(100% - 28px) !important;
    padding: 56px 0 !important;
  }
  .section-heading h2 {
    font-size: clamp(26px, 7vw, 36px) !important;
    line-height: 1.25 !important;
  }
  .section-heading p:not(.eyebrow) {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  /* —— 五阶模型 level-map：6 卡塌到 2 列 —— */
  .level-map {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  /* —— HOW TO USE 三步卡：3 → 1 列 —— */
  .why-journey {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .why-step {
    padding: 32px 24px 24px !important;
  }
  .why-step::after {
    font-size: 80px !important;
    top: 20px !important;
    left: 24px !important;
  }
  .why-step-head { padding-top: 88px !important; }
  .why-step h3 { font-size: 18px !important; }
  .why-step p { font-size: 14.5px !important; margin-bottom: 24px !important; }

  /* —— 卡片库 cards-grid：auto-fit 已经响应，确保 min 不太宽 —— */
  .cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  /* Filter bar：横向滚动 */
  .filter-bar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding: 6px !important;
    border-radius: 14px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-button {
    flex-shrink: 0 !important;
    font-size: 12.5px !important;
    padding: 0 14px !important;
    min-height: 36px !important;
  }
  
  /* —— 工具库：1 列 + 进度条紧凑 —— */
  .tool-strip {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .tool-library-meta {
    padding: 24px 16px !important;
    gap: 18px !important;
  }
  .tool-progress {
    gap: 16px !important;
  }
  .tool-progress-stat strong { font-size: 36px !important; }
  .tool-progress-stat span { font-size: 10px !important; letter-spacing: 0.14em !important; }
  .tool-progress-divider { height: 28px !important; }

  /* —— Card 详情页 hero：双栏 → 单列，sticky 关闭 —— */
  .card-page-main {
    width: calc(100% - 24px) !important;
    padding-top: 32px !important;
    padding-bottom: 56px !important;
  }
  .card-detail-hero {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding-top: 0 !important;
  }
  .card-detail-media {
    position: static !important;
    max-width: 360px !important;
    margin: 0 auto !important;
  }

  /* —— Detail top nav：返回 + 上一张 / 下一张 → 收紧 —— */
  .detail-top-nav {
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
  }
  
  /* —— Article-toc 在 mobile 隐藏（移动端不需要 sticky 目录）—— */
  .article-toc {
    display: none !important;
  }

  /* —— Article-block padding 进一步缩 —— */
  .article-block,
  .lead-block,
  .definition-block,
  .question-block,
  .manuscript-block,
  .product-block,
  .article-block.tool-block {
    padding: 40px 22px !important;
    border-radius: 18px !important;
  }
  .article-block h2 {
    font-size: 24px !important;
    line-height: 1.3 !important;
    margin: 0 0 18px !important;
  }
  .article-block h3 {
    font-size: 18px !important;
    margin: 28px 0 12px !important;
  }
  .article-block p,
  .article-block li,
  .manuscript-block p,
  .manuscript-block li {
    font-size: 15.5px !important;
    line-height: 1.75 !important;
  }
  /* 块内左右额外内缩在小屏取消 */
  .article-block > h2,
  .article-block > h3,
  .article-block > p,
  .article-block > .article-kicker,
  .article-block > .summary-text,
  .article-block > aside.reader-note,
  .article-block > blockquote,
  .article-block > ul,
  .article-block > ol,
  .article-block > .longform,
  .article-block > .reflect-list,
  .article-block > section {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  /* —— Pull-quote 缩小 —— */
  .pull-quote {
    padding: 6px 0 6px 40px !important;
    font-size: 17px !important;
    line-height: 1.5 !important;
  }
  .pull-quote::before {
    font-size: 64px !important;
    top: -10px !important;
  }

  /* —— Detail-tag 行间距 —— */
  .detail-tags {
    gap: 6px 0 !important;
    margin-top: 12px !important;
  }
  .detail-tag {
    font-size: 12.5px !important;
    margin-right: 10px !important;
  }

  /* —— TTS bar：紧凑布局 —— */
  .tts-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 8px 10px !important;
  }
  .tts-status,
  .tts-hint { display: none !important; }
  .tts-progress-wrap {
    flex: 1 1 100% !important;
    order: 2 !important;
  }
  .tts-time { font-size: 11px !important; }
  .tts-speed { font-size: 12px !important; padding: 4px 8px !important; }

  /* —— Hero-meta-stack 字距收紧 —— */
  .hero-meta-stack {
    font-size: 10px !important;
    letter-spacing: 0.16em !important;
  }
  .hero-meta-divider { margin: 0 6px !important; }

  /* —— Reflect-list 项目 —— */
  .reflect-list li {
    padding: 14px 16px !important;
    font-size: 14.5px !important;
    line-height: 1.65 !important;
  }

  /* —— Tool-skill 详情区 —— */
  .tool-skill {
    padding: 12px 14px !important;
  }
  .tool-skill > summary {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .tool-skill-title { font-size: 13px !important; }
  .tool-skill-copy { padding: 5px 12px !important; font-size: 11.5px !important; }

  /* —— Related cards 关联卡 —— */
  .related-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .related-section .related-header h2 {
    font-size: clamp(22px, 6vw, 28px) !important;
  }

  /* —— Quick-nav 上一张 / 下一张 → 垂直堆叠 —— */
  .quick-nav {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }
  .quick-nav-btn {
    width: 100% !important;
    padding: 14px 18px !important;
  }
  .quick-nav-btn .quick-nav-id {
    font-size: 18px !important;
  }

  /* —— Footer：1 列堆叠 + 紧凑 —— */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    margin-bottom: 28px !important;
  }
  .footer-brand .brand-mark {
    width: 48px !important;
    height: 48px !important;
  }
  .footer-brand strong { font-size: 16px !important; }
  .footer-brand-en { font-size: 11px !important; }
  .footer-brand p { font-size: 13px !important; }
  .footer-credit p,
  .footer-links li { font-size: 13px !important; }

}

/* ============================================
   档 2 — ≤ 480px：phone（竖屏小屏）
   ============================================ */
@media (max-width: 480px) {

  /* —— Hero 按钮单列 —— */
  .hero-actions .button {
    flex: 1 1 100% !important;
  }

  /* —— 五阶模型：进一步降到 1 列 + 缩小卡片 —— */
  .level-map {
    grid-template-columns: 1fr !important;
  }
  
  /* —— 卡片库 cards-grid：保持 2 列但卡片更紧凑 —— */
  .cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  
  /* —— 工具进度：3 个数字会挤，缩小 —— */
  .tool-progress {
    gap: 10px !important;
  }
  .tool-progress-stat strong { font-size: 28px !important; }
  .tool-progress-stat span { font-size: 9.5px !important; }
  .tool-progress-divider { height: 22px !important; }

  /* —— Hero metrics 3 → 紧凑横排 —— */
  .hero-metrics dt { font-size: 26px !important; }
  
  /* —— Footer brand-mark 进一步缩 —— */
  .footer-brand .brand-mark {
    width: 40px !important;
    height: 40px !important;
  }

}

/* ===== V3.47 — 移动端汉堡菜单 + filter-bar 横向滚动修复 ===== */

/* --- 1) 汉堡按钮（桌面隐藏，移动端显示） --- */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(20, 17, 15, 0.1);
  border-radius: 10px;
  width: 40px;
  height: 40px;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  transition: background 200ms ease, border-color 200ms ease;
}
.nav-toggle:hover {
  background: rgba(255, 252, 248, 0.6);
  border-color: rgba(20, 17, 15, 0.18);
}
.nav-toggle-bar {
  display: block;
  width: 18px;
  height: 1.6px;
  background: var(--ink-strong);
  border-radius: 2px;
  transition: transform 240ms ease, opacity 240ms ease;
}

/* 打开态：3 道线变 X */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(5.6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-5.6px) rotate(-45deg);
}

/* --- 2) 移动端 ≤ 768px：汉堡显示 / nav 抽屉化 --- */
@media (max-width: 768px) {

  /* 显示汉堡，覆盖 V3.46 隐藏 nav 的规则 */
  .nav-toggle {
    display: inline-flex !important;
    grid-area: cta !important;
    justify-self: end !important;
  }

  /* 抽屉：默认隐藏，body.nav-open 时滑下 */
  .top-nav {
    display: flex !important;
    position: fixed !important;
    top: 78px !important;
    left: 10px !important;
    right: 10px !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 14px !important;
    background: rgba(252, 248, 242, 0.96) !important;
    border: 1px solid rgba(20, 17, 15, 0.06) !important;
    border-radius: 18px !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
                0 20px 50px -16px rgba(20, 17, 15, 0.18),
                0 40px 90px -28px rgba(20, 17, 15, 0.12) !important;
    backdrop-filter: blur(20px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
    z-index: 99 !important;
    opacity: 0 !important;
    transform: translateY(-12px) scale(0.98) !important;
    pointer-events: none !important;
    transition: opacity 240ms ease, transform 240ms cubic-bezier(.2,.8,.2,1) !important;
    transform-origin: top right !important;
    /* 重置 V3.46 的 grid 影响 */
    position: fixed !important;
    grid-area: unset !important;
    justify-self: unset !important;
  }
  body.nav-open .top-nav {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
  }
  body.nav-open {
    overflow: hidden;  /* 锁住背景滚动 */
  }
  
  /* 抽屉里的链接：垂直列表样式 */
  .top-nav a,
  .top-nav a:last-child {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: var(--ink-strong) !important;
    font-family: var(--font-sans) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
    border: none !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    min-height: 48px !important;
  }
  .top-nav a:hover,
  .top-nav a:active {
    background: rgba(20, 17, 15, 0.05) !important;
  }
  /* "工具库" 这个 CTA 在抽屉中改回普通样式（不要 coral 实色按钮） */
  .top-nav a:last-child {
    margin-top: 4px !important;
    border-top: 1px solid rgba(20, 17, 15, 0.08) !important;
    padding-top: 16px !important;
    color: var(--coral-deep) !important;
    font-weight: 600 !important;
  }
  /* 右侧箭头提示 */
  .top-nav a::after {
    content: "→";
    color: rgba(20, 17, 15, 0.3);
    font-size: 16px;
  }
  
  /* 关键：取消 V3.46 把 top-nav 当作 grid display:contents 的影响 */
  .site-header {
    grid-template-columns: 1fr auto !important;
    grid-template-areas: "brand cta" !important;
  }
  .site-header > .top-nav {
    display: flex !important;  /* override "display: contents" */
  }
  .brand { grid-area: brand !important; }
}

/* --- 3) filter-bar 移动端修复：横向滚动 + 不重叠 --- */
@media (max-width: 768px) {
  .filter-bar {
    position: sticky !important;
    top: 76px !important;            /* 跟上方 header 留点距 */
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
    /* 右侧渐隐提示可滑动 */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }
  .filter-bar::-webkit-scrollbar { display: none !important; }

  .filter-button {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    min-height: 38px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 14px !important;
    letter-spacing: 0 !important;
  }
}

/* ===== V3.48 — PWA 安装提示 ===== */
.pwa-install-prompt {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 12px 18px;
  background: rgba(20, 17, 15, 0.92);
  color: var(--cream);
  border: none;
  border-radius: 999px;
  box-shadow: 0 12px 36px -10px rgba(20, 17, 15, 0.35),
              0 1px 0 rgba(255, 255, 255, 0.06) inset;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease, transform 280ms cubic-bezier(.2,.8,.2,1);
}
.pwa-install-prompt.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.pwa-install-icon {
  display: inline-flex;
  color: var(--coral);
}
.pwa-install-text {
  white-space: nowrap;
}
.pwa-install-close {
  margin-left: 4px;
  padding: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
.pwa-install-close:hover {
  background: rgba(255, 255, 255, 0.18);
  color: var(--cream);
}

@media (max-width: 480px) {
  .pwa-install-prompt {
    bottom: 14px;
    font-size: 12.5px;
    padding: 10px 14px 10px 16px;
  }
}

/* PWA 独立模式：隐藏 install prompt，加 safe-area padding */
@media (display-mode: standalone) {
  .pwa-install-prompt { display: none !important; }
  body { padding-top: env(safe-area-inset-top); }
}