@font-face {
  font-family: "YanYanBrand";
  src: url("../fonts/ShiShiRuYi-XiaoYaCiLi-2.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "YanYanHand";
  src: url("../fonts/Slidefu-Regular-2.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "YanYanAlt";
  src: url("../fonts/ShanHaiBanRuoTiW-2.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-brand: "YanYanBrand", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-hand: "YanYanHand", "YanYanBrand", "PingFang SC", "Microsoft YaHei", cursive;
  --font-alt: "YanYanAlt", "YanYanBrand", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-ink: var(--font-alt);
  --font-body: var(--font-brand);
  --font-ui: var(--font-brand);
  --type-page-title: clamp(30px, 2.7vw, 44px);
  --type-section-title: clamp(24px, 2.05vw, 34px);
  --type-card-title: clamp(22px, 1.65vw, 30px);
  --type-body: clamp(16px, 1vw, 18px);
  --type-small: clamp(13px, 0.82vw, 15px);
}

html,
body {
  font-family: var(--font-body) !important;
}

body :where(p, a, button, input, textarea, select, label, li, dt, dd, summary,
.body-copy, .card-copy, .page-copy, .form-copy, .nav-link, .dock-link) {
  font-family: var(--font-body) !important;
  font-weight: 400;
  letter-spacing: 0.015em;
}

body :where(h1, h2, h3, h4, .page-title, .section-title, .card-title,
.node-title, .feature-node__title, .feature-title, .test-card-title,
.activity-card-title, .observation-title, .result-title) {
  font-family: var(--font-brand) !important;
  font-weight: 400 !important;
  color: var(--color-deep-sea, #2A4561);
  letter-spacing: 0.025em;
  line-height: 1.18;
}

body :where(.brand-title, .site-brand-title, .home-brand-title, .logo-wordmark,
.brand-mark, .site-logo-text, .home-logo, .brand-name) {
  font-family: var(--font-hand) !important;
  font-weight: 400 !important;
  letter-spacing: 0.035em;
}

body :where(.tag, .pill, .badge, .chip, .kicker, .eyebrow, .card-label,
.small-label, .activity-type, .test-tag, .meta-label, .nav-dot-label,
.status-pill, .mini-seal) {
  font-family: var(--font-alt) !important;
  font-weight: 400 !important;
  letter-spacing: 0.035em;
}

body :where(.hand-note, .emotion-line, .observation-short,
.observation-card-text, .observation-display-text, .observation-quote,
.daily-card-quote, .reflection-line, .creator-note, .yanyan-hand) {
  font-family: var(--font-hand) !important;
  font-weight: 400 !important;
  line-height: 1.55;
}

body :where(h1, .page-title) {
  font-size: var(--type-page-title) !important;
}

body :where(h2, .section-title) {
  font-size: var(--type-section-title) !important;
}

body :where(h3, .card-title, .test-card-title, .activity-card-title,
.node-title, .feature-node__title) {
  font-size: var(--type-card-title) !important;
}

body :where(p, li, dd, textarea, input, button, label) {
  font-size: var(--type-body);
  line-height: 1.72;
}

body :where(.tag, .pill, .badge, .chip, .kicker, .eyebrow, .small-label,
.meta-label) {
  font-size: var(--type-small) !important;
  line-height: 1.35;
}

body * {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

body :where(p, h1, h2, h3, h4, li, dd, dt, button, a, label, textarea,
input, .card-title, .activity-card-title, .test-card-title) {
  word-break: keep-all;
  overflow-wrap: break-word;
}

body :where(button, .button, .btn, .nav-link, .dock-link, .tag, .pill,
.badge, .chip) {
  white-space: nowrap;
}

.background-motifs,
.motif,
.watermark,
.card-watermark,
svg[aria-hidden="true"] {
  pointer-events: none !important;
  z-index: 0;
}

.content-layer,
.page-content,
.card-content,
.function-node__content,
.test-card__content,
.activity-card__content {
  position: relative;
  z-index: 2;
}

.main-dock,
.floating-dock,
.FloatingFunctionDock,
[data-floating-dock] {
  z-index: 20;
  font-family: var(--font-body) !important;
}

.page-shell,
.function-page,
.tests-page,
.test-page,
.observation-page,
.activities-page,
.activity-page,
.about-page,
.service-page {
  padding-top: clamp(76px, 8vh, 96px);
}

.page-hero,
.page-header,
.function-header {
  margin-bottom: clamp(24px, 3.5vw, 48px);
}

.page-hero :where(.page-title, h1),
.page-header :where(.page-title, h1) {
  margin: 0 0 12px;
}

.test-grid,
.activity-grid,
.cards-grid,
.content-grid {
  align-items: stretch;
}

.test-card,
.activity-card,
.observation-panel,
.echo-panel,
.content-card {
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.test-card,
.activity-card {
  min-height: clamp(420px, 36vw, 560px);
}

.test-card :where(.test-card-title, .card-title),
.activity-card :where(.activity-card-title, .card-title) {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: keep-all;
  text-wrap: balance;
}

.test-card :where(.test-card-title, .card-title) {
  font-size: clamp(24px, 1.9vw, 34px) !important;
}

.test-card :where(.test-card-desc, .description, p),
.activity-card :where(.activity-desc, .description, p) {
  max-width: 62ch;
  line-height: 1.72;
}

.test-card :where(.tags, .card-tags, .meta-row),
.activity-card :where(.tags, .card-tags, .meta-row) {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.test-card :where(.btn, .button, button),
.activity-card :where(.btn, .button, button) {
  align-self: flex-start;
  margin-top: auto;
}

.activity-card :where(dl, .activity-meta, .event-meta) {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 18px;
  row-gap: 12px;
  align-items: start;
}

.activity-card :where(dt, .meta-label) {
  white-space: nowrap;
  color: var(--color-deep-sea, #2A4561);
}

.activity-card :where(dd, .meta-value) {
  min-width: 0;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.activities-page .activity-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 2.2vw, 32px);
}

.observation-page .observation-card,
.observation-page .today-observation-card {
  min-height: clamp(360px, 42vh, 560px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.observation-page :where(.observation-display-text, .observation-card-text,
.daily-card-quote) {
  font-family: var(--font-hand) !important;
  font-size: clamp(24px, 2.25vw, 38px) !important;
  line-height: 1.65 !important;
}

.observation-page :where(.reflectionPrompt, .reflection-line, .tiny-action, p) {
  font-family: var(--font-body) !important;
}

.observation-page :where(.echo-section, .observation-echo, .echo-panel) {
  display: grid;
  gap: clamp(18px, 2vw, 28px);
}

.observation-page :where(textarea) {
  min-height: 180px;
  resize: vertical;
}

.observation-page :where(.echo-form, .observation-echo-form) {
  width: min(760px, 100%);
}

.home-galaxy :where(.feature-node__title, .node-title) {
  font-family: var(--font-brand) !important;
}

@media (max-width: 900px) {
  :root {
    --type-page-title: clamp(28px, 8vw, 38px);
    --type-section-title: clamp(23px, 6vw, 31px);
    --type-card-title: clamp(21px, 5vw, 27px);
    --type-body: 16px;
  }

  .page-shell,
  .function-page,
  .tests-page,
  .observation-page,
  .activities-page {
    padding-top: 82px;
  }

  .test-card,
  .activity-card {
    min-height: auto;
  }

  .activity-card :where(dl, .activity-meta, .event-meta) {
    grid-template-columns: 1fr;
    row-gap: 6px;
  }

  .activity-card :where(dt, .meta-label) {
    margin-top: 8px;
  }
}

/* 2026-06-22: viewport containment lock
   Prevent feature pages, card grids, and the floating dock from spilling outside
   the visible browser width. This is intentionally late in the cascade. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
#app,
main,
.page,
.view,
.content-layer {
  min-width: 0;
  max-width: 100%;
}

:where(.page-shell, .function-page, .tests-page, .test-page, .observation-page,
.activities-page, .activity-page, .service-page, .about-page, .page-content,
.content-shell, .page-container, .section-shell, .section-inner, .main-content) {
  width: min(1180px, calc(100vw - clamp(28px, 5vw, 72px))) !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  min-width: 0 !important;
}

:where(.floating-dock, .main-dock, .function-dock, [data-floating-dock]) {
  max-width: calc(100vw - 28px) !important;
  width: max-content;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

:where(.test-grid, .tests-grid, .activity-grid, .activities-grid,
.cards-grid, .content-grid, .observation-grid, .service-grid) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)) !important;
  gap: clamp(18px, 2.2vw, 30px) !important;
  overflow: visible !important;
}

:where(.test-card, .activity-card, .content-card, .observation-panel,
.echo-panel, .service-card, .diagram-card) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

#app[data-view="library"] .test-card {
  min-width: 0 !important;
  grid-template-rows: minmax(160px, 220px) auto auto auto auto !important;
}

#app[data-view="library"] .test-card h2,
.test-card :where(h2, .test-card-title, .card-title),
.activity-card :where(h2, .activity-card-title, .card-title) {
  max-width: 100% !important;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.28 !important;
}

#app[data-view="library"] .test-card p,
.test-card :where(p, .test-card-desc, .description),
.activity-card :where(p, .activity-desc, .description) {
  max-width: 100% !important;
  overflow-wrap: break-word;
}

#app[data-view="library"] .test-card-actions,
.test-card :where(.test-card-actions, .card-actions),
.activity-card :where(.activity-actions, .card-actions) {
  width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  margin-top: auto !important;
}

#app[data-view="library"] .test-card button,
.test-card :where(button, .btn, .button),
.activity-card :where(button, .btn, .button) {
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  position: relative;
}

.activity-card :where(dl, .activity-meta, .event-meta, .meta-grid) {
  min-width: 0 !important;
  max-width: 100% !important;
}

.activity-card :where(.meta-row, .meta-item, .activity-meta-item) {
  min-width: 0 !important;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
}

.activity-card :where(dd, .meta-value, .activity-meta-value) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

@media (max-width: 980px) {
  :where(.page-shell, .function-page, .tests-page, .test-page, .observation-page,
  .activities-page, .activity-page, .service-page, .about-page, .page-content,
  .content-shell, .page-container, .section-shell, .section-inner, .main-content) {
    width: min(100%, calc(100vw - 28px)) !important;
  }

  :where(.test-grid, .tests-grid, .activity-grid, .activities-grid,
  .cards-grid, .content-grid, .observation-grid, .service-grid) {
    grid-template-columns: 1fr !important;
  }

  #app[data-view="library"] .test-card {
    grid-template-rows: minmax(140px, 190px) auto auto auto auto !important;
  }
}

@media (max-width: 640px) {
  :where(.floating-dock, .main-dock, .function-dock, [data-floating-dock]) {
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    max-width: none !important;
  }

  .test-card,
  .activity-card,
  .content-card {
    padding-inline: clamp(20px, 6vw, 28px) !important;
  }
}

/* 2026-06-22: creator profile uses a simple same-name mark instead of platform logos. */
#app[data-view="creator-profile"] .platform-signature.same-name-signature,
#app[data-view="library"] .platform-signature.same-name-signature {
  display: inline-flex !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 0 !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 14px 22px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(168, 132, 74, 0.24) !important;
  background: rgba(247, 243, 236, 0.76) !important;
  box-shadow: 0 12px 30px rgba(42, 69, 97, 0.06) !important;
}

#app[data-view="creator-profile"] .platform-signature.same-name-signature strong,
#app[data-view="library"] .platform-signature.same-name-signature strong {
  display: inline-block !important;
  font-family: var(--font-brand) !important;
  font-size: clamp(22px, 2.2vw, 30px) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.04em !important;
  color: #2a4561 !important;
  white-space: nowrap !important;
}

#app[data-view="creator-profile"] .platform-logo-row,
#app[data-view="library"] .platform-signature.same-name-signature .platform-logo-row,
#app[data-view="creator-profile"] .platform-logo,
#app[data-view="library"] .platform-signature.same-name-signature .platform-logo {
  display: none !important;
}