:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --type-display-xl-size: clamp(48px, 7vw, 88px);
  --type-display-xl-line: 1.08;
  --type-display-l-size: clamp(56px, 6vw, 72px);
  --type-display-l-line: 1.08;
  --type-heading-l-size: clamp(34px, 4vw, 54px);
  --type-heading-l-line: 1.18;
  --type-heading-m-size: clamp(28px, 3.5vw, 38px);
  --type-heading-m-line: 1.22;
  --type-heading-s-size: 21px;
  --type-heading-s-line: 30px;
  --type-lead-size: 17px;
  --type-lead-line: 30px;
  --type-body-size: 16px;
  --type-body-line: 28px;
  --type-body-compact-size: 14px;
  --type-body-compact-line: 24px;
  --type-secondary-size: 13px;
  --type-secondary-line: 20px;
  --type-caption-size: 12px;
  --type-caption-line: 18px;
  --type-action-size: 14px;
  --type-action-line: 24px;
  --type-data-size: clamp(28px, 4vw, 48px);
  --type-data-line: 1.08;
}

body {
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--type-body-line);
}

body[data-aiminnotes] .hero h1,
body[data-aiminnotes-portfolio] .portfolio-heading h1,
body[data-aiminnotes-knowledge] .knowledge-hero h1 {
  font-size: var(--type-display-l-size);
  line-height: var(--type-display-l-line);
  font-weight: 700;
  letter-spacing: 0;
}

body[data-aiminnotes] .case-hero h1 {
  font-size: var(--type-display-xl-size);
  line-height: var(--type-display-xl-line);
  font-weight: 700;
  letter-spacing: 0;
}

body[data-aiminnotes-xiaohe] .hero h1 {
  font-size: 68px;
  line-height: var(--type-display-xl-line);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.025em;
}

body[data-aiminnotes-xiaohe] .section-head h2,
body[data-aiminnotes-xiaohe] .reflection-copy h2 {
  font-size: var(--type-heading-l-size);
  line-height: var(--type-heading-l-line);
  font-weight: var(--font-weight-bold);
}

body[data-aiminnotes-xiaohe] :where(.evidence-copy, .ai-copy, .business-copy, .membership-copy, .trust-copy, .gallery-info, .component-copy) h3 {
  font-size: var(--type-heading-m-size);
  line-height: var(--type-heading-m-line);
  font-weight: var(--font-weight-bold);
}

body[data-aiminnotes-xiaohe] :where(.insight-card, .strategy-grid, .map-columns, .context-flow, .system-layers, .value-grid) h3 {
  font-size: var(--type-heading-s-size);
  line-height: var(--type-heading-s-line);
  font-weight: var(--font-weight-bold);
}

body[data-aiminnotes-xiaohe] :where(.hero-lead, .section-head > div:last-child > p, .membership-copy > p) {
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-line);
  font-weight: var(--font-weight-regular);
}

body[data-aiminnotes-xiaohe] :where(.overview-copy > p, .evidence-copy > p, .ai-copy > p, .trust-copy > p, .gallery-info p, .component-copy > p, .reflection-copy > p) {
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  font-weight: var(--font-weight-regular);
}

body[data-aiminnotes-xiaohe] :where(.insight-card p, .strategy-grid p, .map-columns p, .journey-list button p, .screen-note p, .ai-principles p, .context-flow p, .visual-rules p, .system-layers p, .value-grid p, .metric-grid p) {
  font-size: var(--type-body-compact-size);
  line-height: var(--type-body-compact-line);
  font-weight: var(--font-weight-regular);
}

body[data-aiminnotes-xiaohe] :where(.eyebrow, .tag, .mini-label, .section-index span, .hero-facts small, .strip-caption, .gallery-info > span, .system-layers small, .role-card small, .footer-inner > a) {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
}

body[data-aiminnotes-xiaohe] :where(button, .header-action, .footer-inner > a) {
  font-size: var(--type-action-size);
  line-height: var(--type-action-line);
}

body[data-aiminnotes-xiaohe] .metric-grid strong {
  font-size: var(--type-data-size);
  line-height: var(--type-data-line);
  font-weight: var(--font-weight-bold);
}

body[data-aiminnotes-momo-pip] .case-hero h1 {
  line-height: 1.06;
  font-weight: 700;
}

body[data-aiminnotes-momo-pip] .hero-title-en,
body[data-aiminnotes-momo-pip] .hero-title-zh {
  font-size: clamp(44px, 4.8vw, 64px);
}

.hero-title-en {
  letter-spacing: -0.025em;
}

.hero-title-zh {
  letter-spacing: 0;
}

.hero-subtitle,
.portfolio-heading > p,
.knowledge-hero-description,
.hero-lead,
.section-heading > p,
.chapter-summary > p,
.featured-copy p,
.portfolio-detail-heading > p,
.profile-summary-lead,
.approach-copy > p:last-child {
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-line);
  font-weight: 400;
}

.case-section .section-heading h2,
.chapter-heading h2,
.approach-copy h2 {
  font-size: var(--type-heading-l-size);
  line-height: var(--type-heading-l-line);
  font-weight: 700;
}

.closing-panel h2,
.next-panel h2 {
  font-size: var(--type-heading-m-size);
  line-height: var(--type-heading-m-line);
  font-weight: 700;
}

.hero-kicker,
.section-kicker,
.case-kicker,
.portfolio-eyebrow,
.knowledge-category-kicker {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.chapter-kicker,
.featured-label,
.phase-label,
.work-label,
.portfolio-detail-placeholder-label {
  font-size: var(--type-secondary-size);
  line-height: var(--type-secondary-line);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.version-badge {
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 0;
}

.work-item h4,
.portfolio-card h2,
.knowledge-category h2,
.article-title {
  font-size: var(--type-heading-s-size);
  line-height: var(--type-heading-s-line);
  font-weight: 700;
}

.work-item > p:not(.work-label),
.portfolio-card p,
.knowledge-category p,
.article-summary,
.product-card p,
.approach-list p,
.language-list p,
.portfolio-detail-placeholder p:last-child {
  font-size: var(--type-body-compact-size);
  line-height: var(--type-body-compact-line);
  font-weight: 400;
}

.profile-summary-detail {
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
}

.product-card h4 {
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
}

.approach-list h3 {
  font-size: 19px;
  line-height: 28px;
  font-weight: 700;
}

.product-system-link {
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
}

.contact-intro,
.hero-facts li,
.chapter-subtitle,
.featured-meta,
.article-meta,
.site-footer {
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
}

.product-series {
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
}

.portrait-meta,
.hero-art figcaption,
.overview-frame figcaption {
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
}

.chapter-cover::after,
.work-media button::after,
.project-cover-action,
.overview-button::after {
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
}

.portrait-meta strong,
.overview-frame figcaption strong {
  font-weight: 600;
}

.language-list span,
.family-heading span,
.approach-list span {
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
}

.chapter-nav span {
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
}

.case-meta dt {
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
}

.case-meta dd {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

.portfolio-arrow,
.recommendation-badge {
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
}

.zcool-profile-link,
.external-action,
.portfolio-back {
  font-size: 14px;
  line-height: 24px;
  font-weight: 700;
}

@media (max-width: 1219px) {
  body[data-aiminnotes-xiaohe] .hero h1 {
    font-size: clamp(46px, 4vw, 60px);
  }
}

@media (max-width: 720px) {
  body[data-aiminnotes-momo-pip] .hero-title-en,
  body[data-aiminnotes-momo-pip] .hero-title-zh {
    font-size: clamp(40px, 10.5vw, 44px);
  }

  .case-section .section-heading h2,
  .chapter-heading h2,
  .approach-copy h2 {
    font-size: 34px;
  }
}

@media (max-width: 700px) {
  body[data-aiminnotes] .hero h1,
  body[data-aiminnotes-portfolio] .portfolio-heading h1,
  body[data-aiminnotes-knowledge] .knowledge-hero h1 {
    font-size: 46px;
    line-height: 1.08;
  }

  .hero-subtitle,
  .portfolio-heading > p,
  .knowledge-hero-description,
  .hero-lead,
  .section-heading > p,
  .chapter-summary > p,
  .featured-copy p,
  .portfolio-detail-heading > p,
  .profile-summary-lead,
  .approach-copy > p:last-child {
    font-size: 16px;
    line-height: 28px;
  }
}

@media (max-width: 640px) {
  body[data-aiminnotes] .case-hero h1 {
    font-size: clamp(42px, 10vw, 48px);
    line-height: 1.08;
  }
}