/* Final typography contract.
   Load this file last. It is the single source of truth for the live site.

   Final two-font contract:
   - Display / emotional / brand moments: YanYanHand / Slidefu-Regular-2.ttf
   - Reading / buttons / nav / labels / page text: YanYanAlt / ShanHaiBanRuoTiW-2.ttf
   - YanYanBrand / ShiShiRuYi-XiaoYaCiLi-2.ttf is loaded for compatibility only,
     but should not be used by final visible rules because it reads too Song-like.
*/

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

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

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

:root,
html,
body,
#app,
#app[data-view] {
  --font-brand: "YYFinalAlt", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --font-body: var(--font-brand) !important;
  --font-sans: var(--font-brand) !important;
  --font-serif: var(--font-brand) !important;
  --font-display: var(--font-brand) !important;
  --font-title: var(--font-brand) !important;
  --font-brand-title: "YYFinalHand", "YYFinalAlt", "PingFang SC", sans-serif !important;
  --font-brand-body: var(--font-brand) !important;
  --font-brand-soft: var(--font-brand) !important;
  --font-hand: "YYFinalHand", "YYFinalAlt", "PingFang SC", sans-serif !important;
  --font-ink: "YYFinalAlt", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --font-alt: "YYFinalAlt", "PingFang SC", "Microsoft YaHei", sans-serif !important;

  --yy-font-logo: var(--font-hand) !important;
  --yy-font-title: var(--font-brand) !important;
  --yy-font-body: var(--font-brand) !important;
  --yy-font-label: var(--font-alt) !important;
  --yy-font-emotion: var(--font-hand) !important;

  --yy-final-page-title: clamp(21px, 1.2vw, 26px);
  --yy-final-section-title: clamp(18px, 1vw, 22px);
  --yy-final-card-title: clamp(18px, 1vw, 22px);
  --yy-final-body: clamp(13px, 0.72vw, 15px);
  --yy-final-button: clamp(12px, 0.68vw, 14px);
  --yy-final-tag: clamp(10px, 0.54vw, 12px);
  --yy-final-emotion: clamp(22px, 1.35vw, 30px);
}

body,
.site-record-footer,
#app,
#app[data-view],
#app[data-view] * {
  font-family: var(--font-brand) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#app[data-view] :is(
  p,
  li,
  dt,
  dd,
  label,
  input,
  textarea,
  select,
  option,
  small,
  .page-subtitle,
  .section-heading p,
  .test-card p,
  .test-card dd,
  .event-card p,
  .activity-card p,
  .observation-card p,
  .observation-arrived-note,
  .observation-intro-card p,
  .observation-echo-section p,
  .result-section p,
  .profile-section p,
  .listening-progress-card p,
  .form-field
) {
  font-family: var(--font-brand) !important;
  font-size: var(--yy-final-body) !important;
  line-height: 1.58 !important;
  letter-spacing: 0.004em !important;
}

#app[data-view] :is(
  button,
  .button,
  .btn,
  a.button,
  .section-more-button,
  .floating-function-dock button,
  .page-nav button,
  .topbar-links button,
  nav a,
  input::placeholder,
  textarea::placeholder
) {
  font-family: var(--font-brand) !important;
  font-size: var(--yy-final-button) !important;
  line-height: 1.16 !important;
  letter-spacing: 0.012em !important;
}

#app[data-view] :is(
  h1,
  .page-title,
  .view-title,
  .library-title,
  .observation-title,
  .activity-title,
  .creator-title,
  .service-title,
  .result-title,
  .tests-page-title,
  .feature-page-hero h1,
  .activities-hero h1,
  .observations-hero h1,
  .profile-hero h1,
  .listening-hero h1,
  .listening-progress-card h1,
  .observation-card-result h1
) {
  font-family: var(--font-brand) !important;
  font-size: var(--yy-final-page-title) !important;
  line-height: 1.18 !important;
  letter-spacing: 0.018em !important;
}

#app[data-view] :is(
  h2,
  .section-heading h2,
  .profile-section h2,
  .observation-intro-card h2,
  .observation-echo-section h2,
  .daily-reflection h2,
  .result-section h2,
  .admin-section h2
) {
  font-family: var(--font-brand) !important;
  font-size: var(--yy-final-section-title) !important;
  line-height: 1.22 !important;
  letter-spacing: 0.014em !important;
}

#app[data-view] :is(
  h3,
  .feature-node-title,
  .test-card h2,
  .test-card h3,
  .test-card-title,
  .event-card h3,
  .activity-card h3,
  .observation-card h2,
  .observation-card h3,
  .content-card h3,
  .listening-card h3,
  .service-card h3
) {
  font-family: var(--font-brand) !important;
  font-size: var(--yy-final-card-title) !important;
  line-height: 1.22 !important;
  letter-spacing: 0.012em !important;
}

#app[data-view] :is(
  .feature-node strong,
  .home-star-hero .feature-node strong,
  .function-star-map .feature-node strong,
  .home-dispatch .feature-node strong
) {
  font-family: var(--font-hand) !important;
  font-size: clamp(30px, 3.8vw, 54px) !important;
  line-height: 1.05 !important;
  letter-spacing: 0.018em !important;
  color: rgba(42, 69, 97, 0.88) !important;
}

#app[data-view] :is(
  .feature-node em,
  .home-star-hero .feature-node em,
  .function-star-map .feature-node em,
  .home-dispatch .feature-node em,
  .feature-node-copy em
) {
  font-family: var(--font-brand) !important;
  font-size: clamp(16px, 1.55vw, 22px) !important;
  line-height: 1.58 !important;
  letter-spacing: 0.012em !important;
  color: rgba(30, 26, 26, 0.78) !important;
}

#app[data-view] :is(
  .feature-node b,
  .home-star-hero .feature-node b,
  .function-star-map .feature-node b,
  .home-dispatch .feature-node b,
  .feature-node-copy b
) {
  font-family: var(--font-alt) !important;
  font-size: clamp(13px, 1vw, 16px) !important;
  line-height: 1.1 !important;
  letter-spacing: 0.03em !important;
}

#app[data-view] :is(
  .wordmark,
  .site-wordmark,
  .brand-wordmark,
  .home-brand-title,
  .brand-title-main,
  .wordmark-main,
  .hero-brand-title,
  [data-brand-wordmark]
) {
  font-family: var(--font-hand) !important;
  letter-spacing: 0.018em !important;
}

#app[data-view] :is(
  .eyebrow,
  .tag,
  .pill,
  .pill-tag,
  .soft-tag,
  .badge,
  .event-type,
  .activity-type,
  .activity-status,
  .test-card-top,
  .test-card-top span,
  .test-meta-row,
  .test-meta-row span,
  .test-video-chip,
  .observation-type,
  .observation-number,
  .observation-source,
  .same-result-badge,
  .echo-featured,
  .form-hint,
  .platform-pill,
  .seal,
  .small-seal,
  .meta-label,
  .nav-label
) {
  font-family: var(--font-alt) !important;
  font-size: var(--yy-final-tag) !important;
  line-height: 1.22 !important;
  letter-spacing: 0.024em !important;
}

#app[data-view] :is(
  .observation-main-text.original,
  .daily-care-line,
  .emotional-line,
  .hand-note,
  .result-reminder,
  .creator-note,
  .echo-creator-note
) {
  font-family: var(--font-hand) !important;
  font-size: var(--yy-final-emotion) !important;
  line-height: 1.42 !important;
  letter-spacing: 0.016em !important;
}

#app[data-view] .observation-main-text.quote {
  font-family: var(--font-brand) !important;
  font-size: clamp(18px, 1.05vw, 23px) !important;
  line-height: 1.46 !important;
  letter-spacing: 0.012em !important;
}

/* Home galaxy desktop lock: no overlapping planets, no split titles. */
#app[data-view="home"] .feature-node strong {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  text-wrap: nowrap !important;
}

@media (min-width: 961px) {
  body[data-view="home"],
  body[data-view="home"] .app-shell,
  #app[data-view="home"].surface {
    min-height: 100vh !important;
    overflow: hidden !important;
  }

  #app[data-view="home"] .home-star-hero {
    position: relative !important;
    height: 100svh !important;
    min-height: 620px !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  #app[data-view="home"] .function-star-map {
    position: absolute !important;
    inset: clamp(104px, 12vh, 132px) clamp(36px, 4vw, 72px) clamp(66px, 8vh, 92px) !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  #app[data-view="home"] .feature-node,
  #app[data-view="home"] .feature-node.is-main,
  #app[data-view="home"] .feature-node-daily,
  #app[data-view="home"] .feature-node-about,
  #app[data-view="home"] .feature-node-meet {
    position: absolute !important;
    min-height: 0 !important;
    padding: clamp(20px, 2vw, 30px) clamp(28px, 2.8vw, 44px) !important;
    overflow: hidden !important;
  }

  #app[data-view="home"] .feature-node-daily {
    left: 2% !important;
    top: 2% !important;
    width: clamp(330px, 24vw, 455px) !important;
    height: clamp(160px, 13vw, 215px) !important;
    border-radius: 56% 44% 54% 46% / 48% 56% 44% 52% !important;
  }

  #app[data-view="home"] .feature-node.is-main,
  #app[data-view="home"] .feature-node-scene {
    left: 49% !important;
    top: 49% !important;
    width: clamp(390px, 29vw, 560px) !important;
    height: clamp(160px, 13vw, 220px) !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 54% 46% 52% 48% / 48% 55% 45% 52% !important;
  }

  #app[data-view="home"] .feature-node-meet {
    left: 4% !important;
    bottom: 0 !important;
    width: clamp(330px, 24vw, 450px) !important;
    height: clamp(160px, 13vw, 215px) !important;
    border-radius: 46% 54% 50% 50% / 58% 42% 56% 44% !important;
  }

  #app[data-view="home"] .feature-node-about {
    right: 2% !important;
    top: 28% !important;
    width: clamp(335px, 25vw, 465px) !important;
    height: clamp(170px, 14vw, 230px) !important;
    border-radius: 48% 52% 54% 46% / 58% 42% 56% 44% !important;
  }

  #app[data-view="home"] .feature-node-copy {
    max-width: min(72%, 22em) !important;
    gap: clamp(6px, 0.8vw, 10px) !important;
  }

  #app[data-view="home"] .feature-node strong {
    font-size: clamp(26px, 1.7vw, 34px) !important;
    line-height: 1.04 !important;
    letter-spacing: 0.006em !important;
  }

  #app[data-view="home"] .feature-node.is-main strong {
    font-size: clamp(28px, 1.9vw, 38px) !important;
  }

  #app[data-view="home"] .feature-node em {
    font-size: clamp(14px, 0.98vw, 18px) !important;
    line-height: 1.42 !important;
  }

  #app[data-view="home"] .feature-node b {
    font-size: clamp(11px, 0.7vw, 13px) !important;
    min-width: 96px !important;
    padding: 8px 16px !important;
  }

  #app[data-view="home"] .feature-motif {
    left: clamp(18px, 2vw, 28px) !important;
    width: clamp(44px, 4vw, 68px) !important;
    height: clamp(44px, 4vw, 68px) !important;
    opacity: 0.42 !important;
  }

  #app[data-view="home"] .feature-node:hover {
    transform: translateY(-4px) scale(1.006) !important;
  }

  #app[data-view="home"] .feature-node.is-main:hover,
  #app[data-view="home"] .feature-node-scene:hover {
    transform: translate(-50%, -50%) translateY(-4px) scale(1.006) !important;
  }
}

@media (max-width: 760px) {
  :root,
  html,
  body,
  #app,
  #app[data-view] {
    --yy-final-page-title: clamp(20px, 6vw, 27px);
    --yy-final-section-title: clamp(18px, 5vw, 23px);
    --yy-final-card-title: clamp(18px, 5vw, 23px);
    --yy-final-body: 14px;
    --yy-final-button: 13px;
    --yy-final-tag: 11px;
    --yy-final-emotion: clamp(22px, 7vw, 31px);
  }

  #app[data-view] :is(
    .feature-node strong,
    .home-star-hero .feature-node strong,
    .function-star-map .feature-node strong,
    .home-dispatch .feature-node strong
  ) {
    font-size: clamp(28px, 9vw, 42px) !important;
  }

  #app[data-view] :is(
    .feature-node em,
    .home-star-hero .feature-node em,
    .function-star-map .feature-node em,
    .home-dispatch .feature-node em
  ) {
    font-size: clamp(15px, 4.4vw, 18px) !important;
  }
}

/* Home galaxy collision lock.
   At tablet and narrow desktop widths, absolute-positioned planets can overlap.
   Switch them into a vertical orbit flow while keeping the galaxy feeling. */
@media (max-width: 960px) {
  body[data-view="home"],
  body[data-view="home"] .app-shell,
  #app[data-view="home"].surface,
  #app[data-view="home"] .library-view.home-dispatch {
    min-height: 100vh !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  #app[data-view="home"] .home-star-hero {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    padding: clamp(96px, 12vw, 136px) 0 clamp(96px, 12vw, 132px) !important;
  }

  #app[data-view="home"] .function-star-map {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-items: start !important;
    gap: clamp(34px, 6vw, 58px) !important;
    width: min(100%, calc(100vw - 28px)) !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0 0 24px !important;
  }

  #app[data-view="home"] .galaxy-crayon-lines {
    inset: 0 !important;
    height: 100% !important;
    min-height: 100% !important;
    opacity: 0.36 !important;
    transform: rotate(90deg) scale(1.22) !important;
    transform-origin: center !important;
  }

  #app[data-view="home"] .feature-node,
  #app[data-view="home"] .feature-node.is-main,
  #app[data-view="home"] .feature-node-daily,
  #app[data-view="home"] .feature-node-about,
  #app[data-view="home"] .feature-node-meet {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: min(88vw, 610px) !important;
    min-height: clamp(190px, 26vw, 245px) !important;
    margin: 0 !important;
    z-index: 4 !important;
  }

  #app[data-view="home"] .feature-node:hover,
  #app[data-view="home"] .feature-node.is-main:hover {
    transform: translateY(-4px) scale(1.006) !important;
  }

  #app[data-view="home"] .feature-node-daily {
    order: 1 !important;
    justify-self: start !important;
    width: min(82vw, 570px) !important;
    margin-left: clamp(0px, 4vw, 28px) !important;
  }

  #app[data-view="home"] .feature-node-scene,
  #app[data-view="home"] .feature-node.is-main {
    order: 2 !important;
    justify-self: end !important;
    width: min(88vw, 620px) !important;
    margin-right: clamp(0px, 3vw, 24px) !important;
  }

  #app[data-view="home"] .feature-node-about {
    order: 3 !important;
    justify-self: start !important;
    width: min(82vw, 570px) !important;
    margin-left: clamp(0px, 5vw, 34px) !important;
  }

  #app[data-view="home"] .feature-node-meet {
    order: 4 !important;
    justify-self: end !important;
    width: min(82vw, 560px) !important;
    margin-right: clamp(0px, 5vw, 34px) !important;
  }

  #app[data-view="home"] .feature-node-copy {
    max-width: min(82%, 24em) !important;
    gap: 10px !important;
  }

  #app[data-view="home"] .feature-motif {
    left: clamp(18px, 5vw, 36px) !important;
    width: clamp(48px, 10vw, 76px) !important;
    height: clamp(48px, 10vw, 76px) !important;
    opacity: 0.46 !important;
  }
}

@media (max-width: 560px) {
  #app[data-view="home"] .home-star-hero {
    padding-top: 86px !important;
  }

  #app[data-view="home"] .function-star-map {
    gap: 30px !important;
  }

  #app[data-view="home"] .feature-node,
  #app[data-view="home"] .feature-node.is-main,
  #app[data-view="home"] .feature-node-daily,
  #app[data-view="home"] .feature-node-about,
  #app[data-view="home"] .feature-node-meet {
    justify-self: center !important;
    width: min(92vw, 460px) !important;
    min-height: 178px !important;
    margin-inline: 0 !important;
    padding-inline: 24px !important;
  }

  #app[data-view="home"] .feature-node-copy {
    max-width: 78% !important;
  }
}

/* Stable desktop constellation.
   The earlier free-orbit desktop layout was visually interesting but too fragile
   across browser sizes. This keeps the galaxy language while guaranteeing that
   all four function planets are visible. */
@media (min-width: 961px) {
  #app[data-view="home"] .home-star-hero {
    height: 100svh !important;
    min-height: 640px !important;
    padding: clamp(96px, 11vh, 126px) clamp(42px, 5vw, 86px) clamp(74px, 8vh, 94px) !important;
    overflow: hidden !important;
  }

  #app[data-view="home"] .function-star-map {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(340px, 520px)) !important;
    grid-template-rows: repeat(2, minmax(168px, 218px)) !important;
    justify-content: center !important;
    align-content: center !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    gap: clamp(30px, 4.8vh, 54px) clamp(52px, 7vw, 120px) !important;
    width: min(1180px, 100%) !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }

  #app[data-view="home"] .galaxy-crayon-lines {
    position: absolute !important;
    inset: 8% 3% 4% !important;
    width: 94% !important;
    height: 88% !important;
    z-index: 1 !important;
    opacity: 0.34 !important;
    transform: none !important;
  }

  #app[data-view="home"] .feature-node,
  #app[data-view="home"] .feature-node.is-main,
  #app[data-view="home"] .feature-node-daily,
  #app[data-view="home"] .feature-node-about,
  #app[data-view="home"] .feature-node-meet {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: clamp(18px, 1.8vw, 26px) clamp(24px, 2.5vw, 38px) !important;
    z-index: 4 !important;
  }

  #app[data-view="home"] .feature-node:hover,
  #app[data-view="home"] .feature-node.is-main:hover,
  #app[data-view="home"] .feature-node-scene:hover {
    transform: translateY(-4px) scale(1.006) !important;
  }

  #app[data-view="home"] .feature-node-daily {
    order: 1 !important;
    border-radius: 58% 42% 54% 46% / 48% 56% 44% 52% !important;
  }

  #app[data-view="home"] .feature-node-scene,
  #app[data-view="home"] .feature-node.is-main {
    order: 2 !important;
    border-radius: 54% 46% 52% 48% / 48% 55% 45% 52% !important;
  }

  #app[data-view="home"] .feature-node-meet {
    order: 3 !important;
    border-radius: 46% 54% 50% 50% / 58% 42% 56% 44% !important;
  }

  #app[data-view="home"] .feature-node-about {
    order: 4 !important;
    border-radius: 48% 52% 54% 46% / 58% 42% 56% 44% !important;
  }

  #app[data-view="home"] .feature-node-copy {
    max-width: min(78%, 22em) !important;
    gap: 7px !important;
  }

  #app[data-view="home"] .feature-node strong {
    font-size: clamp(24px, 1.45vw, 32px) !important;
    line-height: 1.06 !important;
    white-space: nowrap !important;
  }

  #app[data-view="home"] .feature-node.is-main strong {
    font-size: clamp(25px, 1.55vw, 34px) !important;
  }

  #app[data-view="home"] .feature-node em {
    font-size: clamp(13px, 0.88vw, 17px) !important;
    line-height: 1.42 !important;
  }

  #app[data-view="home"] .feature-node b {
    font-size: clamp(11px, 0.68vw, 13px) !important;
    min-width: 92px !important;
    padding: 7px 15px !important;
  }

  #app[data-view="home"] .feature-motif {
    left: clamp(18px, 1.8vw, 28px) !important;
    width: clamp(42px, 3.6vw, 62px) !important;
    height: clamp(42px, 3.6vw, 62px) !important;
    opacity: 0.4 !important;
  }
}

/* Final desktop constellation: varied planets, stable viewport.
   This replaces the equal 2x2 feel with an uneven star-map composition while
   keeping every function visible inside the first screen. */
@media (min-width: 961px) {
  body[data-view="home"] .app-shell {
    height: 100svh !important;
    min-height: 640px !important;
    padding: clamp(18px, 2vw, 32px) !important;
    overflow: hidden !important;
  }

  #app[data-view="home"].surface {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #app[data-view="home"] .library-view.home-dispatch,
  #app[data-view="home"] .home-star-hero {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #app[data-view="home"] .home-star-hero {
    padding: 0 !important;
  }

  #app[data-view="home"] .function-star-map {
    position: absolute !important;
    inset: clamp(112px, 13vh, 142px) clamp(54px, 5vw, 96px) clamp(58px, 7vh, 82px) !important;
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(6, minmax(0, 1fr)) !important;
    gap: clamp(14px, 1.5vw, 26px) !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  #app[data-view="home"] .galaxy-crayon-lines {
    position: absolute !important;
    inset: 2% 3% 0 !important;
    width: 94% !important;
    height: 98% !important;
    opacity: 0.34 !important;
    transform: rotate(-5deg) scale(1.04) !important;
    z-index: 1 !important;
  }

  #app[data-view="home"] .feature-node,
  #app[data-view="home"] .feature-node.is-main,
  #app[data-view="home"] .feature-node-daily,
  #app[data-view="home"] .feature-node-about,
  #app[data-view="home"] .feature-node-meet {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 4 !important;
    padding: clamp(18px, 1.8vw, 28px) clamp(24px, 2.2vw, 40px) !important;
  }

  #app[data-view="home"] .feature-node-daily {
    grid-column: 1 / 6 !important;
    grid-row: 1 / 3 !important;
    border-radius: 58% 42% 54% 46% / 48% 56% 44% 52% !important;
  }

  #app[data-view="home"] .feature-node-scene,
  #app[data-view="home"] .feature-node.is-main {
    grid-column: 5 / 10 !important;
    grid-row: 3 / 6 !important;
    border-radius: 54% 46% 52% 48% / 48% 55% 45% 52% !important;
  }

  #app[data-view="home"] .feature-node-about {
    grid-column: 8 / 13 !important;
    grid-row: 1 / 3 !important;
    border-radius: 46% 54% 52% 48% / 56% 42% 58% 44% !important;
  }

  #app[data-view="home"] .feature-node-meet {
    grid-column: 1 / 5 !important;
    grid-row: 5 / 7 !important;
    border-radius: 44% 56% 46% 54% / 52% 44% 56% 48% !important;
  }

  #app[data-view="home"] .feature-node:hover,
  #app[data-view="home"] .feature-node.is-main:hover,
  #app[data-view="home"] .feature-node-scene:hover {
    transform: translateY(-4px) scale(1.006) !important;
  }

  #app[data-view="home"] .feature-node-copy {
    max-width: min(78%, 23em) !important;
    gap: clamp(6px, 0.8vw, 10px) !important;
  }

  #app[data-view="home"] .feature-node strong {
    font-size: clamp(24px, 1.55vw, 34px) !important;
    line-height: 1.06 !important;
    white-space: nowrap !important;
  }

  #app[data-view="home"] .feature-node-daily strong {
    font-size: clamp(30px, 2.35vw, 48px) !important;
  }

  #app[data-view="home"] .feature-node-scene strong,
  #app[data-view="home"] .feature-node.is-main strong {
    font-size: clamp(25px, 1.75vw, 38px) !important;
  }

  #app[data-view="home"] .feature-node-meet strong {
    font-size: clamp(28px, 2.1vw, 44px) !important;
  }

  #app[data-view="home"] .feature-node-about strong {
    font-size: clamp(28px, 2vw, 42px) !important;
  }

  #app[data-view="home"] .feature-node em {
    font-size: clamp(13px, 0.92vw, 17px) !important;
    line-height: 1.42 !important;
  }

  #app[data-view="home"] .feature-node-daily em,
  #app[data-view="home"] .feature-node-meet em {
    font-size: clamp(14px, 1vw, 18px) !important;
  }

  #app[data-view="home"] .feature-node b {
    font-size: clamp(11px, 0.68vw, 13px) !important;
    min-width: 92px !important;
    padding: 7px 15px !important;
  }

  #app[data-view="home"] .feature-motif {
    left: clamp(18px, 1.8vw, 30px) !important;
    width: clamp(40px, 3.8vw, 66px) !important;
    height: clamp(40px, 3.8vw, 66px) !important;
    opacity: 0.4 !important;
  }
}

/* v8: Give each planet enough vertical room so text never escapes the border. */
@media (min-width: 961px) {
  #app[data-view="home"] .function-star-map {
    inset: clamp(100px, 11vh, 126px) clamp(54px, 5vw, 96px) clamp(56px, 7vh, 80px) !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(8, minmax(0, 1fr)) !important;
    gap: clamp(14px, 1.6vh, 20px) clamp(48px, 6vw, 110px) !important;
  }

  #app[data-view="home"] .feature-node-daily {
    grid-column: 1 / 6 !important;
    grid-row: 1 / 4 !important;
  }

  #app[data-view="home"] .feature-node-about {
    grid-column: 8 / 13 !important;
    grid-row: 1 / 4 !important;
  }

  #app[data-view="home"] .feature-node-scene,
  #app[data-view="home"] .feature-node.is-main {
    grid-column: 5 / 10 !important;
    grid-row: 4 / 8 !important;
  }

  #app[data-view="home"] .feature-node-meet {
    grid-column: 1 / 5 !important;
    grid-row: 5 / 8 !important;
  }

  #app[data-view="home"] .feature-node,
  #app[data-view="home"] .feature-node.is-main,
  #app[data-view="home"] .feature-node-daily,
  #app[data-view="home"] .feature-node-about,
  #app[data-view="home"] .feature-node-meet {
    padding: clamp(20px, 1.8vw, 30px) clamp(26px, 2.3vw, 42px) !important;
    overflow: hidden !important;
  }

  #app[data-view="home"] .feature-node-copy {
    max-width: min(72%, 22em) !important;
    gap: clamp(6px, 0.75vw, 9px) !important;
  }

  #app[data-view="home"] .feature-node strong {
    font-size: clamp(24px, 1.48vw, 32px) !important;
  }

  #app[data-view="home"] .feature-node-daily strong {
    font-size: clamp(28px, 2.05vw, 42px) !important;
  }

  #app[data-view="home"] .feature-node-meet strong,
  #app[data-view="home"] .feature-node-about strong {
    font-size: clamp(27px, 1.9vw, 38px) !important;
  }

  #app[data-view="home"] .feature-node-about .feature-node-copy {
    max-width: min(70%, 19em) !important;
  }

  #app[data-view="home"] .feature-node-about em {
    max-width: 15em !important;
    font-size: clamp(12px, 0.8vw, 15px) !important;
    line-height: 1.42 !important;
    text-wrap: balance !important;
  }

  #app[data-view="home"] .feature-node em,
  #app[data-view="home"] .feature-node-daily em,
  #app[data-view="home"] .feature-node-meet em {
    font-size: clamp(13px, 0.86vw, 16px) !important;
    line-height: 1.36 !important;
  }

  #app[data-view="home"] .feature-node b {
    margin-top: 2px !important;
  }
}

/* v10: Text-inside-shape lock. The visual border must wrap title, copy, and button. */
@media (min-width: 961px) {
  #app[data-view="home"] .function-star-map {
    inset: clamp(92px, 10vh, 118px) clamp(48px, 5vw, 90px) clamp(62px, 7vh, 84px) !important;
    gap: clamp(18px, 2vh, 28px) clamp(54px, 6vw, 112px) !important;
  }

  #app[data-view="home"] .feature-node,
  #app[data-view="home"] .feature-node.is-main,
  #app[data-view="home"] .feature-node-daily,
  #app[data-view="home"] .feature-node-about,
  #app[data-view="home"] .feature-node-meet {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: clamp(205px, 22vh, 260px) !important;
    padding: clamp(24px, 2.2vw, 34px) clamp(32px, 3vw, 48px) !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 48% 46%, rgba(255, 252, 245, 0.98), rgba(255, 252, 245, 0.82) 62%, rgba(247, 243, 236, 0.62)),
      rgba(247, 243, 236, 0.84) !important;
  }

  #app[data-view="home"] .feature-node-daily {
    border-radius: 44% 56% 48% 52% / 58% 42% 56% 44% !important;
  }

  #app[data-view="home"] .feature-node-scene,
  #app[data-view="home"] .feature-node.is-main {
    border-radius: 50% 50% 45% 55% / 54% 46% 56% 44% !important;
  }

  #app[data-view="home"] .feature-node-meet {
    border-radius: 42% 58% 52% 48% / 56% 44% 58% 42% !important;
  }

  #app[data-view="home"] .feature-node-about {
    border-radius: 46% 54% 48% 52% / 58% 42% 56% 44% !important;
  }

  #app[data-view="home"] .feature-node-copy {
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    max-width: min(68%, 20em) !important;
    gap: clamp(7px, 0.85vw, 11px) !important;
    margin: 0 auto !important;
  }

  #app[data-view="home"] .feature-node em {
    display: block !important;
    max-width: 17em !important;
    margin: 0 auto !important;
    text-align: center !important;
    text-wrap: balance !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }

  #app[data-view="home"] .feature-node-about em {
    max-width: 16em !important;
  }

  #app[data-view="home"] .feature-node strong {
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  #app[data-view="home"] .feature-node b {
    margin-top: clamp(3px, 0.45vw, 7px) !important;
  }
}

/* v11: Clean constellation layout.
   Reset the accumulated home overrides into one stable desktop star map:
   varied planet sizes, no overlapping text, and every copy block stays inside
   its own organic border. */
@media (min-width: 961px) {
  body[data-view="home"],
  body[data-view="home"] .app-shell,
  #app[data-view="home"].surface,
  #app[data-view="home"] .library-view.home-dispatch,
  #app[data-view="home"] .home-star-hero {
    width: 100vw !important;
    height: 100svh !important;
    min-height: 680px !important;
    max-height: 100svh !important;
    overflow: hidden !important;
  }

  body[data-view="home"] .app-shell {
    padding: 0 !important;
  }

  #app[data-view="home"].surface {
    border-radius: 0 !important;
  }

  #app[data-view="home"] .home-star-hero {
    position: relative !important;
    padding: 0 !important;
  }

  #app[data-view="home"] .home-topbar {
    position: absolute !important;
    top: clamp(18px, 2.2vh, 28px) !important;
    left: clamp(22px, 2.8vw, 54px) !important;
    right: auto !important;
    width: auto !important;
    max-width: min(360px, calc(100vw - 44px)) !important;
    z-index: 12 !important;
  }

  #app[data-view="home"] .function-star-map {
    position: absolute !important;
    display: block !important;
    inset: clamp(76px, 9vh, 104px) clamp(48px, 5vw, 104px) clamp(48px, 6vh, 76px) !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    z-index: 3 !important;
  }

  #app[data-view="home"] .galaxy-crayon-lines {
    position: absolute !important;
    left: 7% !important;
    top: 20% !important;
    width: 86% !important;
    height: 68% !important;
    opacity: 0.26 !important;
    transform: rotate(-7deg) scale(1.02) !important;
    transform-origin: center !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  #app[data-view="home"] .feature-node,
  #app[data-view="home"] .feature-node.is-main,
  #app[data-view="home"] .feature-node-daily,
  #app[data-view="home"] .feature-node-about,
  #app[data-view="home"] .feature-node-meet {
    position: absolute !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    z-index: 4 !important;
    border-width: 1.2px !important;
    background:
      radial-gradient(circle at 50% 46%, rgba(255, 252, 245, 0.98), rgba(255, 252, 245, 0.88) 54%, rgba(247, 243, 236, 0.66) 100%),
      rgba(247, 243, 236, 0.86) !important;
  }

  #app[data-view="home"] .feature-node-daily {
    left: 4% !important;
    top: 10% !important;
    width: min(38vw, 650px) !important;
    height: clamp(205px, 23vh, 250px) !important;
    padding: clamp(24px, 2.5vw, 38px) clamp(42px, 4vw, 70px) !important;
    border-radius: 62% 38% 58% 42% / 48% 58% 42% 52% !important;
  }

  #app[data-view="home"] .feature-node-about {
    right: 4% !important;
    top: 14% !important;
    width: min(34vw, 590px) !important;
    height: clamp(210px, 24vh, 265px) !important;
    padding: clamp(24px, 2.5vw, 38px) clamp(42px, 3.8vw, 64px) !important;
    border-radius: 44% 56% 48% 52% / 58% 42% 56% 44% !important;
  }

  #app[data-view="home"] .feature-node-scene,
  #app[data-view="home"] .feature-node.is-main {
    left: 49% !important;
    top: 56% !important;
    width: min(36vw, 620px) !important;
    height: clamp(220px, 25vh, 280px) !important;
    padding: clamp(24px, 2.5vw, 38px) clamp(42px, 4vw, 68px) !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 54% 46% 50% 50% / 46% 56% 44% 54% !important;
  }

  #app[data-view="home"] .feature-node-meet {
    left: 6% !important;
    bottom: 3% !important;
    width: min(29vw, 480px) !important;
    height: clamp(185px, 21vh, 230px) !important;
    padding: clamp(22px, 2.3vw, 34px) clamp(38px, 3.4vw, 56px) !important;
    border-radius: 45% 55% 42% 58% / 55% 45% 58% 42% !important;
  }

  #app[data-view="home"] .feature-node-copy {
    position: relative !important;
    z-index: 5 !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    gap: clamp(9px, 1vw, 14px) !important;
    margin: 0 !important;
    transform: none !important;
  }

  #app[data-view="home"] .feature-node strong {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    color: var(--color-deep-sea, #2A4561) !important;
    font-family: var(--font-brand) !important;
    font-size: clamp(30px, 2.2vw, 45px) !important;
    font-weight: 400 !important;
    line-height: 1.08 !important;
    letter-spacing: 0.02em !important;
    text-align: center !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    text-wrap: nowrap !important;
  }

  #app[data-view="home"] .feature-node-daily strong {
    font-size: clamp(34px, 2.6vw, 54px) !important;
  }

  #app[data-view="home"] .feature-node-meet strong {
    font-size: clamp(33px, 2.45vw, 50px) !important;
  }

  #app[data-view="home"] .feature-node-about strong {
    font-size: clamp(32px, 2.35vw, 48px) !important;
  }

  #app[data-view="home"] .feature-node em {
    display: block !important;
    width: min(100%, 18em) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    color: rgba(30, 26, 26, 0.78) !important;
    font-family: var(--font-brand) !important;
    font-size: clamp(17px, 1.18vw, 23px) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1.42 !important;
    letter-spacing: 0.01em !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    text-wrap: balance !important;
  }

  #app[data-view="home"] .feature-node-about em {
    width: min(100%, 16em) !important;
  }

  #app[data-view="home"] .feature-node b {
    position: relative !important;
    z-index: 6 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: clamp(112px, 8vw, 136px) !important;
    min-height: 38px !important;
    margin: 2px auto 0 !important;
    padding: 9px 18px !important;
    border-radius: 999px !important;
    font-family: var(--font-brand) !important;
    font-size: clamp(13px, 0.88vw, 16px) !important;
    line-height: 1.1 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
  }

  #app[data-view="home"] .feature-motif {
    position: absolute !important;
    left: clamp(24px, 2.1vw, 40px) !important;
    top: 50% !important;
    width: clamp(42px, 4vw, 70px) !important;
    height: clamp(42px, 4vw, 70px) !important;
    opacity: 0.34 !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  #app[data-view="home"] .feature-node:hover {
    transform: translateY(-4px) scale(1.006) !important;
  }

  #app[data-view="home"] .feature-node-scene:hover,
  #app[data-view="home"] .feature-node.is-main:hover {
    transform: translate(-50%, -50%) translateY(-4px) scale(1.006) !important;
  }
}

@media (min-width: 961px) and (max-width: 1280px) {
  #app[data-view="home"] .function-star-map {
    inset: 82px 34px 52px !important;
  }

  #app[data-view="home"] .feature-node-daily {
    left: 2% !important;
    width: 39vw !important;
  }

  #app[data-view="home"] .feature-node-about {
    right: 2% !important;
    width: 34vw !important;
  }

  #app[data-view="home"] .feature-node-scene,
  #app[data-view="home"] .feature-node.is-main {
    width: 37vw !important;
  }

  #app[data-view="home"] .feature-node-meet {
    left: 3% !important;
    width: 30vw !important;
  }

  #app[data-view="home"] .feature-node strong {
    font-size: clamp(26px, 2.15vw, 35px) !important;
  }

  #app[data-view="home"] .feature-node em {
    font-size: clamp(15px, 1.2vw, 19px) !important;
  }
}

/* v12: Remove inherited page spacing that pushed the whole constellation down. */
@media (min-width: 961px) {
  html body[data-view="home"] #app.surface,
  html body[data-view="home"] #app[data-view="home"].surface {
    display: block !important;
    width: 100vw !important;
    height: 100svh !important;
    min-height: 680px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  html body[data-view="home"] #app[data-view="home"] .library-view.home-dispatch {
    display: block !important;
    position: relative !important;
    width: 100vw !important;
    height: 100svh !important;
    min-height: 680px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  html body[data-view="home"] #app[data-view="home"] .home-star-hero {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100svh !important;
    min-height: 680px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  html body[data-view="home"] #app[data-view="home"] .function-star-map {
    inset: clamp(82px, 10vh, 106px) clamp(48px, 5vw, 104px) clamp(46px, 6vh, 72px) !important;
  }

  html body[data-view="home"] #app[data-view="home"] .feature-node-daily {
    top: 6% !important;
  }

  html body[data-view="home"] #app[data-view="home"] .feature-node-about {
    top: 9% !important;
  }

  html body[data-view="home"] #app[data-view="home"] .feature-node-scene,
  html body[data-view="home"] #app[data-view="home"] .feature-node.is-main {
    top: 54% !important;
  }

  html body[data-view="home"] #app[data-view="home"] .feature-node-meet {
    bottom: 1% !important;
  }
}

/* v13: Keep the home topbar floating so it never pushes the star map down. */
@media (min-width: 961px) {
  html body[data-view="home"] #app[data-view="home"] .home-topbar {
    position: absolute !important;
    top: clamp(18px, 2.2vh, 28px) !important;
    left: clamp(22px, 2.8vw, 54px) !important;
    margin: 0 !important;
    z-index: 20 !important;
  }
}

/* v14: Daily observation viewport safety.
   Keep the observation card fully inside the browser window; the number, prompt
   strips, and card content should never be clipped on the right edge. */
body[data-view="daily-observation"],
html body[data-view="daily-observation"] {
  overflow-x: hidden !important;
}

html body[data-view="daily-observation"] #app.surface,
html body[data-view="daily-observation"] #app[data-view="daily-observation"].surface {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow-x: hidden !important;
}

html body[data-view="daily-observation"] .app-shell {
  box-sizing: border-box !important;
  width: min(100%, 1280px) !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] .daily-card-view,
html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-page,
html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-page-stack {
  box-sizing: border-box !important;
  width: min(100%, calc(100vw - clamp(28px, 5vw, 88px))) !important;
  max-width: 1120px !important;
  min-width: 0 !important;
  margin-inline: auto !important;
  overflow-x: hidden !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] .daily-card-view {
  padding: clamp(78px, 9vh, 104px) 0 clamp(48px, 7vh, 72px) !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-card-result {
  box-sizing: border-box !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
  gap: clamp(16px, 2.4vw, 34px) !important;
  padding:
    clamp(36px, 4vw, 58px)
    clamp(34px, 4.4vw, 64px)
    clamp(34px, 4vw, 56px) !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-card-result > .eyebrow {
  position: absolute !important;
  top: clamp(28px, 3.4vw, 46px) !important;
  left: clamp(34px, 4.4vw, 64px) !important;
  z-index: 3 !important;
  max-width: calc(100% - 180px) !important;
  white-space: nowrap !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-number {
  position: absolute !important;
  top: clamp(28px, 3.4vw, 46px) !important;
  right: clamp(34px, 4.4vw, 64px) !important;
  z-index: 3 !important;
  max-width: 150px !important;
  margin: 0 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-arrived-note {
  grid-column: 1 / -1 !important;
  margin-top: clamp(22px, 3vw, 34px) !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-text-card,
html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-projection-card {
  grid-column: 1 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-prompt-strip {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-prompt-strip p,
html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-main-text,
html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-source {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: keep-all !important;
}

@media (max-width: 980px) {
  html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-card-result {
    grid-template-columns: 1fr !important;
  }

  html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-text-card,
  html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-projection-card,
  html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-prompt-strip {
    grid-column: 1 / -1 !important;
  }
}

/* v16: Observation card compactness + hard font lock.
   Older typography sheets use more specific selectors, so the observation text
   needs a direct final lock here. */
html body[data-view="daily-observation"] #app[data-view="daily-observation"] .daily-card-view,
html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-page-stack {
  width: min(1040px, calc(100vw - clamp(32px, 6vw, 112px))) !important;
  max-width: min(1040px, calc(100vw - clamp(32px, 6vw, 112px))) !important;
  margin-inline: auto !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-card-result {
  width: 100% !important;
  max-width: 1040px !important;
  margin-inline: auto !important;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-text-card {
  min-height: clamp(230px, 30vh, 320px) !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-text-card p.observation-main-text.original,
html body[data-view="daily-observation"] #app[data-view="daily-observation"] p.observation-main-text.original,
html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-main-text.original {
  font-family: "YYFinalHand", "YYHandLock", "YYHandFinal", "YanYanHand", "PingFang SC", sans-serif !important;
  font-size: clamp(24px, 1.8vw, 34px) !important;
  line-height: 1.52 !important;
  letter-spacing: 0.02em !important;
  color: rgba(30, 26, 26, 0.76) !important;
  text-align: left !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-text-card p.observation-main-text.quote,
html body[data-view="daily-observation"] #app[data-view="daily-observation"] p.observation-main-text.quote,
html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-main-text.quote {
  font-family: "YYFinalBrand", "YYBrandLock", "YYBrandFinal", "YanYanBrand", "PingFang SC", sans-serif !important;
  font-size: clamp(18px, 1.25vw, 24px) !important;
  line-height: 1.55 !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-prompt-strip p,
html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-prompt-strip span,
html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-number,
html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-card-result > .eyebrow {
  font-family: "YYFinalAlt", "YYAltLock", "YYAltFinal", "YanYanAlt", "PingFang SC", sans-serif !important;
}

@media (max-width: 980px) {
  html body[data-view="daily-observation"] #app[data-view="daily-observation"] .daily-card-view,
  html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-page-stack {
    width: min(100%, calc(100vw - 28px)) !important;
    max-width: min(100%, calc(100vw - 28px)) !important;
  }
}

/* v17: Final daily observation containment.
   The daily observation page must never stretch wider than the readable card
   area, and original observation copy must remain in the hand font even when
   older page-level typography rules are still cached. */
html body[data-view="daily-observation"],
html body[data-view="daily-observation"] body {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

html body[data-view="daily-observation"] .app-shell,
html body[data-view="daily-observation"] #app[data-view="daily-observation"],
html body[data-view="daily-observation"] #app[data-view="daily-observation"] .daily-card-view,
html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-page,
html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-page-stack {
  box-sizing: border-box !important;
  width: min(1120px, calc(100vw - clamp(40px, 8vw, 160px))) !important;
  max-width: min(1120px, calc(100vw - clamp(40px, 8vw, 160px))) !important;
  min-width: 0 !important;
  margin-inline: auto !important;
  overflow-x: clip !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] .daily-card-view {
  padding-top: clamp(70px, 8vh, 92px) !important;
  padding-bottom: clamp(44px, 6vh, 68px) !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] section.observation-card-result {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-inline: auto !important;
  overflow: hidden !important;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr) !important;
  gap: clamp(16px, 2.2vw, 30px) !important;
  padding:
    clamp(34px, 3.5vw, 52px)
    clamp(30px, 3.8vw, 56px)
    clamp(32px, 3.3vw, 50px) !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] section.observation-card-result > .observation-number {
  right: clamp(28px, 3.8vw, 56px) !important;
  max-width: 128px !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] section.observation-card-result > .eyebrow {
  left: clamp(28px, 3.8vw, 56px) !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] section.observation-card-result .observation-text-card,
html body[data-view="daily-observation"] #app[data-view="daily-observation"] section.observation-card-result .observation-projection-card,
html body[data-view="daily-observation"] #app[data-view="daily-observation"] section.observation-card-result .observation-prompt-strip {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] section.observation-card-result .observation-text-card.observation-text-card-original > p.observation-main-text.original,
html body[data-view="daily-observation"] #app[data-view="daily-observation"] section.observation-card-result p.observation-main-text.original,
html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-text-card-original .observation-main-text.original {
  font-family: "YYFinalHand", "YYHandLock", "YYHandFinal", "YanYanHand", "PingFang SC", sans-serif !important;
  font-size: clamp(23px, 1.55vw, 30px) !important;
  line-height: 1.58 !important;
  letter-spacing: 0.02em !important;
  text-align: left !important;
  color: rgba(30, 26, 26, 0.76) !important;
  font-synthesis: none !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] section.observation-card-result .observation-text-card p.observation-main-text.quote,
html body[data-view="daily-observation"] #app[data-view="daily-observation"] section.observation-card-result .observation-source,
html body[data-view="daily-observation"] #app[data-view="daily-observation"] section.observation-card-result .observation-prompt-strip p {
  font-family: "YYFinalBrand", "YYBrandLock", "YYBrandFinal", "YanYanBrand", "PingFang SC", sans-serif !important;
}

@media (max-width: 980px) {
  html body[data-view="daily-observation"] .app-shell,
  html body[data-view="daily-observation"] #app[data-view="daily-observation"],
  html body[data-view="daily-observation"] #app[data-view="daily-observation"] .daily-card-view,
  html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-page,
  html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-page-stack {
    width: min(100%, calc(100vw - 28px)) !important;
    max-width: min(100%, calc(100vw - 28px)) !important;
  }

  html body[data-view="daily-observation"] #app[data-view="daily-observation"] section.observation-card-result {
    grid-template-columns: 1fr !important;
    padding: 56px 22px 28px !important;
  }

  html body[data-view="daily-observation"] #app[data-view="daily-observation"] section.observation-card-result > .observation-number {
    top: 24px !important;
    right: 22px !important;
  }

  html body[data-view="daily-observation"] #app[data-view="daily-observation"] section.observation-card-result > .eyebrow {
    top: 24px !important;
    left: 22px !important;
  }
}

/* v18: Feature page viewport containment.
   Internal feature pages previously inherited oversized section/card widths from
   several older visual passes. Lock every functional page to the viewport so no
   content can be clipped off the left or right edge. */
html,
body,
body:not([data-view="home"]),
body:not([data-view="home"]) .app-shell,
body:not([data-view="home"]) #app[data-view] {
  max-width: 100vw !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

body:not([data-view="home"]) .app-shell {
  box-sizing: border-box !important;
  width: 100% !important;
  padding-inline: 0 !important;
}

html body #app[data-view]:not([data-view="home"]) .feature-page-view,
html body #app[data-view]:not([data-view="home"]) .feature-page-stack,
html body #app[data-view]:not([data-view="home"]) .library-section,
html body #app[data-view]:not([data-view="home"]) .testing-progress-panel,
html body #app[data-view]:not([data-view="home"]) .listening-progress-card,
html body #app[data-view]:not([data-view="home"]) .activities-hero,
html body #app[data-view]:not([data-view="home"]) .observations-hero,
html body #app[data-view]:not([data-view="home"]) .profile-hero {
  box-sizing: border-box !important;
  width: min(1120px, calc(100vw - clamp(28px, 6vw, 96px))) !important;
  max-width: min(1120px, calc(100vw - clamp(28px, 6vw, 96px))) !important;
  min-width: 0 !important;
  margin-inline: auto !important;
  overflow-x: clip !important;
}

html body #app[data-view="library"] .tests-page-view {
  padding-top: clamp(92px, 12vh, 132px) !important;
}

html body #app[data-view="library"] .testing-progress-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.42fr) !important;
  gap: clamp(18px, 3vw, 36px) !important;
  align-items: center !important;
}

html body #app[data-view="library"] .testing-progress-copy,
html body #app[data-view="library"] .testing-progress-action {
  min-width: 0 !important;
  max-width: 100% !important;
}

html body #app[data-view="library"] .recommended-tests .section-heading {
  display: grid !important;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr) !important;
  gap: clamp(18px, 3vw, 44px) !important;
  align-items: end !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
}

html body #app[data-view="library"] .recommended-tests .section-heading :is(h1, h2, h3, p) {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

html body #app[data-view="library"] .library-grid {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(20px, 3vw, 34px) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-inline: 0 !important;
  overflow: visible !important;
}

html body #app[data-view="library"] .test-card {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

html body #app[data-view="library"] .test-card > *,
html body #app[data-view="library"] .test-card :is(h2, h3, p, div, span) {
  max-width: 100% !important;
}

html body #app[data-view="library"] .test-card-visual {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html body #app[data-view] .floating-function-dock {
  box-sizing: border-box !important;
  width: min(680px, calc(100vw - 28px)) !important;
  max-width: calc(100vw - 28px) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  overflow: hidden !important;
}

@media (max-width: 900px) {
  html body #app[data-view]:not([data-view="home"]) .feature-page-view,
  html body #app[data-view]:not([data-view="home"]) .feature-page-stack,
  html body #app[data-view]:not([data-view="home"]) .library-section,
  html body #app[data-view]:not([data-view="home"]) .testing-progress-panel,
  html body #app[data-view]:not([data-view="home"]) .listening-progress-card,
  html body #app[data-view]:not([data-view="home"]) .activities-hero,
  html body #app[data-view]:not([data-view="home"]) .observations-hero,
  html body #app[data-view]:not([data-view="home"]) .profile-hero {
    width: min(100%, calc(100vw - 28px)) !important;
    max-width: min(100%, calc(100vw - 28px)) !important;
  }

  html body #app[data-view="library"] .testing-progress-panel,
  html body #app[data-view="library"] .recommended-tests .section-heading,
  html body #app[data-view="library"] .library-grid {
    grid-template-columns: 1fr !important;
  }
}

/* v19: Two-font final lock.
   Use only Slidefu for emotional/display moments and ShanHaiBanRuo for all
   functional reading. This removes the Song-like ShiShi font from visible UI. */
html,
body,
#app,
#app[data-view],
#app[data-view] * {
  --font-brand: "YYFinalAlt", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --font-body: "YYFinalAlt", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --font-sans: "YYFinalAlt", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --font-serif: "YYFinalAlt", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --font-display: "YYFinalAlt", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --font-title: "YYFinalAlt", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --font-brand-title: "YYFinalHand", "YYFinalAlt", "PingFang SC", sans-serif !important;
  --font-hand: "YYFinalHand", "YYFinalAlt", "PingFang SC", sans-serif !important;
  --font-ink: "YYFinalAlt", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --font-alt: "YYFinalAlt", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --yy-font-logo: "YYFinalHand", "YYFinalAlt", "PingFang SC", sans-serif !important;
  --yy-font-title: "YYFinalAlt", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --yy-font-body: "YYFinalAlt", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --yy-font-label: "YYFinalAlt", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --yy-font-emotion: "YYFinalHand", "YYFinalAlt", "PingFang SC", sans-serif !important;
  font-family: "YYFinalAlt", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-synthesis: none !important;
}

html body #app[data-view] :is(
  .wordmark,
  .site-wordmark,
  .brand-wordmark,
  .home-brand-title,
  .brand-title-main,
  .wordmark-main,
  .hero-brand-title,
  [data-brand-wordmark],
  .home-constellation-title,
  .feature-node-title,
  .feature-node strong,
  .observation-main-text.original,
  .observation-main-text.text-original,
  .daily-observation-original,
  .emotion-line,
  .daily-care-line,
  .hand-note,
  .result-reminder
) {
  font-family: "YYFinalHand", "YYFinalAlt", "PingFang SC", sans-serif !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

html body #app[data-view] :is(
  h1,
  h2,
  h3,
  h4,
  p,
  li,
  dt,
  dd,
  label,
  input,
  textarea,
  select,
  option,
  small,
  button,
  .button,
  .nav-pill,
  .floating-function-dock button,
  .topbar-links button,
  .section-heading p,
  .page-title,
  .section-title,
  .test-card-title,
  .activity-card-title,
  .event-card h3,
  .test-card h2,
  .test-card h3,
  .observation-main-text.quote,
  .observation-source,
  .observation-prompt-strip p,
  .observation-prompt-strip span,
  .test-card-top,
  .test-card-top span,
  .test-card-tags,
  .tag,
  .pill,
  .eyebrow,
  .status-pill
) {
  font-family: "YYFinalAlt", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

html body #app[data-view] .observation-text-card.observation-text-card-original > p.observation-main-text.original,
html body #app[data-view="daily-observation"] section.observation-card-result .observation-text-card.observation-text-card-original > p.observation-main-text.original {
  font-family: "YYFinalHand", "YYFinalAlt", "PingFang SC", sans-serif !important;
}

html body #app[data-view] :is(
  .wordmark,
  .site-wordmark,
  .brand-wordmark,
  .home-brand-title,
  .brand-title-main,
  .wordmark-main,
  .hero-brand-title,
  [data-brand-wordmark],
  .home-constellation-title,
  .feature-node-title,
  .feature-node strong,
  .observation-main-text.original,
  .observation-main-text.text-original,
  .daily-observation-original,
  .emotion-line,
  .daily-care-line,
  .hand-note,
  .result-reminder
) {
  font-family: "YYFinalHand", "YYFinalAlt", "PingFang SC", sans-serif !important;
}

/* v20: Test library anti-cropping lock.
   Older visual rules gave the test-card grid a fixed wide footprint. In medium
   browser windows that pushes the first card off screen, so the library grid
   must follow the parent width and collapse before it can overflow. */
html body #app[data-view="library"] .tests-page-view,
html body #app[data-view="library"] .tests-page-view.feature-page-view,
html body #app[data-view="library"] .tests-page-view > .library-section,
html body #app[data-view="library"] .tests-page-view .recommended-tests {
  box-sizing: border-box !important;
  width: min(1040px, calc(100vw - clamp(28px, 7vw, 120px))) !important;
  max-width: min(1040px, calc(100vw - clamp(28px, 7vw, 120px))) !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: visible !important;
}

html body #app[data-view="library"] .tests-page-view .recommended-tests > .library-grid,
html body #app[data-view="library"] .tests-page-view .library-section.recommended-tests > .library-grid,
html body #app[data-view="library"] .recommended-tests .library-grid,
html body #app[data-view="library"] .library-grid {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  transform: none !important;
  left: auto !important;
  right: auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(18px, 2.5vw, 28px) !important;
}

html body #app[data-view="library"] .tests-page-view .library-grid > .test-card,
html body #app[data-view="library"] .library-grid > .test-card {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

html body #app[data-view="library"] .tests-page-view .test-card :is(h2, h3, p, span, div, button),
html body #app[data-view="library"] .test-card :is(h2, h3, p, span, div, button) {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 1280px) {
  html body #app[data-view="library"] .tests-page-view .recommended-tests > .library-grid,
  html body #app[data-view="library"] .tests-page-view .library-section.recommended-tests > .library-grid,
  html body #app[data-view="library"] .recommended-tests .library-grid,
  html body #app[data-view="library"] .library-grid {
    grid-template-columns: 1fr !important;
  }

  html body #app[data-view="library"] .tests-page-view,
  html body #app[data-view="library"] .tests-page-view.feature-page-view,
  html body #app[data-view="library"] .tests-page-view > .library-section,
  html body #app[data-view="library"] .tests-page-view .recommended-tests {
    width: min(820px, calc(100vw - 32px)) !important;
    max-width: min(820px, calc(100vw - 32px)) !important;
  }
}

/* v21: Readability and full-card display.
   Make test cards single-column on every desktop size, keep all cards fully
   inside the viewport, and restore clear contrast on dark buttons. */
html body #app[data-view="library"] .tests-page-view,
html body #app[data-view="library"] .tests-page-view.feature-page-view,
html body #app[data-view="library"] .tests-page-view .recommended-tests,
html body #app[data-view="library"] .tests-page-view > .library-section {
  width: min(860px, calc(100vw - clamp(32px, 8vw, 160px))) !important;
  max-width: min(860px, calc(100vw - clamp(32px, 8vw, 160px))) !important;
  margin-inline: auto !important;
}

html body #app[data-view="library"] .tests-page-view .library-grid,
html body #app[data-view="library"] .tests-page-view .recommended-tests > .library-grid,
html body #app[data-view="library"] .recommended-tests .library-grid,
html body #app[data-view="library"] .library-grid {
  grid-template-columns: 1fr !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  gap: 28px !important;
}

html body #app[data-view="library"] .test-card,
html body #app[data-view="library"] .library-grid > .test-card {
  width: 100% !important;
  max-width: 100% !important;
  min-height: auto !important;
  padding-bottom: clamp(30px, 4vw, 44px) !important;
}

html body #app[data-view="library"] .test-card-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
}

html body #app[data-view] :is(
  .button:not(.secondary),
  button.button:not(.secondary),
  .test-card .button:not(.secondary),
  .event-card .button:not(.secondary),
  .activity-card .button:not(.secondary),
  .observation-card .button:not(.secondary),
  .echo-form-card .button:not(.secondary),
  .listening-service-view .button:not(.secondary),
  .service-card .button:not(.secondary),
  .form-actions .button:not(.secondary)
) {
  color: #F7F3EC !important;
  -webkit-text-fill-color: #F7F3EC !important;
  text-shadow: 0 1px 0 rgba(30, 26, 26, 0.12) !important;
}

html body #app[data-view] :is(
  .button:not(.secondary) *,
  button.button:not(.secondary) *,
  .test-card .button:not(.secondary) *,
  .event-card .button:not(.secondary) *,
  .activity-card .button:not(.secondary) *,
  .observation-card .button:not(.secondary) *
) {
  color: #F7F3EC !important;
  -webkit-text-fill-color: #F7F3EC !important;
}

html body #app[data-view] :is(.button.secondary, button.button.secondary) {
  color: #2A4561 !important;
  -webkit-text-fill-color: #2A4561 !important;
}

html body #app[data-view="daily-observation"] .observation-arrived-note {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: fit-content !important;
  max-width: 100% !important;
  padding: 12px 20px !important;
  color: rgba(30, 26, 26, 0.78) !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  overflow: visible !important;
}

html body #app[data-view="daily-observation"] .observation-arrived-note::before {
  position: static !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  transform: none !important;
  color: #2A4561 !important;
  opacity: 0.95 !important;
  white-space: nowrap !important;
}

@media (max-width: 900px) {
  html body #app[data-view="library"] .tests-page-view,
  html body #app[data-view="library"] .tests-page-view.feature-page-view,
  html body #app[data-view="library"] .tests-page-view .recommended-tests,
  html body #app[data-view="library"] .tests-page-view > .library-section {
    width: min(100%, calc(100vw - 28px)) !important;
    max-width: min(100%, calc(100vw - 28px)) !important;
  }
}

/* v22: final readability lock for release preview.
   Card buttons can be generated as `.button secondary` while still using a
   deep-blue background, so card-scoped dark buttons must always get paper text.
   The test library is kept single-column to prevent clipped cards in preview
   windows and browser sidebars. */
html body #app[data-view="library"] .tests-page-view,
html body #app[data-view="library"] .tests-page-view.feature-page-view,
html body #app[data-view="library"] .tests-page-view > .library-section,
html body #app[data-view="library"] .tests-page-view .recommended-tests {
  box-sizing: border-box !important;
  width: min(820px, calc(100vw - 40px)) !important;
  max-width: min(820px, calc(100vw - 40px)) !important;
  min-width: 0 !important;
  margin-inline: auto !important;
  overflow: visible !important;
}

html body #app[data-view="library"] .library-grid,
html body #app[data-view="library"] .recommended-tests .library-grid,
html body #app[data-view="library"] .tests-page-view .library-grid,
html body #app[data-view="library"] .tests-page-view .recommended-tests > .library-grid {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  gap: 28px !important;
  transform: none !important;
}

html body #app[data-view="library"] .test-card,
html body #app[data-view="library"] .library-grid > .test-card {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-inline: 0 !important;
  transform: none !important;
}

html body #app[data-view] :is(
  .test-card .button,
  .test-card button,
  .event-card .button,
  .event-card button,
  .activity-card .button,
  .activity-card button,
  .listening-card .button,
  .listening-card button,
  .service-card .button,
  .service-card button,
  .form-card .button,
  .form-card button,
  .comment-form .button,
  .comment-form button,
  .echo-form-card .button,
  .echo-form-card button
) {
  color: #F7F3EC !important;
  -webkit-text-fill-color: #F7F3EC !important;
  text-shadow: 0 1px 0 rgba(30, 26, 26, 0.12) !important;
}

html body #app[data-view] :is(
  .test-card .button *,
  .test-card button *,
  .event-card .button *,
  .event-card button *,
  .activity-card .button *,
  .activity-card button *,
  .listening-card .button *,
  .listening-card button *,
  .service-card .button *,
  .service-card button *
) {
  color: #F7F3EC !important;
  -webkit-text-fill-color: #F7F3EC !important;
}

html body #app[data-view] :is(
  .test-card .button:disabled,
  .test-card button:disabled,
  .event-card .button:disabled,
  .event-card button:disabled,
  .activity-card .button:disabled,
  .activity-card button:disabled
) {
  opacity: 1 !important;
}

html body #app[data-view="daily-observation"] .observation-arrived-note {
  display: inline-grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 10px !important;
  row-gap: 0 !important;
  max-width: min(100%, 520px) !important;
  padding: 12px 20px !important;
  overflow: hidden !important;
}

html body #app[data-view="daily-observation"] .observation-arrived-note::before {
  position: static !important;
  grid-column: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  transform: none !important;
  margin: 0 !important;
}

html body #app[data-view="daily-observation"] .observation-arrived-note > * {
  grid-column: 2 !important;
  min-width: 0 !important;
}

/* v22b: exact override for activity cards generated as dark secondary disabled buttons. */
html body #app[data-view="activities"] .event-card button.button.secondary:disabled,
html body #app[data-view="activities"] .event-card .button.secondary:disabled,
html body #app[data-view="activities"] .activity-card button.button.secondary:disabled,
html body #app[data-view="activities"] .activity-card .button.secondary:disabled,
html body #app[data-view="activities"] .event-card button.button.secondary,
html body #app[data-view="activities"] .event-card .button.secondary,
html body #app[data-view="activities"] .activity-card button.button.secondary,
html body #app[data-view="activities"] .activity-card .button.secondary {
  background: rgba(42, 69, 97, 0.94) !important;
  color: #F7F3EC !important;
  -webkit-text-fill-color: #F7F3EC !important;
  opacity: 1 !important;
}

html body #app[data-view="activities"] .event-card button.button.secondary:disabled *,
html body #app[data-view="activities"] .event-card .button.secondary:disabled *,
html body #app[data-view="activities"] .activity-card button.button.secondary:disabled *,
html body #app[data-view="activities"] .activity-card .button.secondary:disabled * {
  color: #F7F3EC !important;
  -webkit-text-fill-color: #F7F3EC !important;
}

html body #app[data-view="daily-observation"] .observation-prompt-strip {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

html body #app[data-view="daily-observation"] .observation-prompt-strip > span {
  display: inline-flex !important;
  white-space: nowrap !important;
  min-width: max-content !important;
}

html body #app[data-view="daily-observation"] .observation-prompt-strip > p {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

/* v23: Test library directory layout.
   The library should scale to many tests, so cards become compact catalogue
   entries instead of large poster panels. */
html body #app[data-view="library"] .tests-page-view,
html body #app[data-view="library"] .tests-page-view.feature-page-view,
html body #app[data-view="library"] .tests-page-view > .library-section,
html body #app[data-view="library"] .tests-page-view .recommended-tests {
  width: min(1120px, calc(100vw - clamp(40px, 7vw, 120px))) !important;
  max-width: min(1120px, calc(100vw - clamp(40px, 7vw, 120px))) !important;
}

html body #app[data-view="library"] .recommended-tests .section-heading {
  display: grid !important;
  grid-template-columns: minmax(0, 0.8fr) minmax(260px, 1.2fr) !important;
  align-items: end !important;
  gap: 18px !important;
  margin-bottom: 22px !important;
}

html body #app[data-view="library"] .recommended-tests .section-heading :is(h1, h2, h3, p) {
  max-width: 100% !important;
}

html body #app[data-view="library"] .recommended-tests .section-heading p:not(.eyebrow) {
  margin: 0 !important;
}

html body #app[data-view="library"] .library-grid,
html body #app[data-view="library"] .recommended-tests .library-grid,
html body #app[data-view="library"] .tests-page-view .library-grid,
html body #app[data-view="library"] .tests-page-view .recommended-tests > .library-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 22px !important;
}

html body #app[data-view="library"] .test-card,
html body #app[data-view="library"] .library-grid > .test-card {
  display: grid !important;
  grid-template-rows: auto auto auto auto 1fr auto auto !important;
  align-content: start !important;
  gap: 12px !important;
  min-height: 0 !important;
  padding: 20px !important;
  border-radius: 28px !important;
  overflow: hidden !important;
}

html body #app[data-view="library"] .test-card-visual {
  order: 0 !important;
  height: 92px !important;
  min-height: 92px !important;
  max-height: 92px !important;
  margin: -4px -4px 2px !important;
  opacity: 0.72 !important;
}

html body #app[data-view="library"] .test-card-visual svg,
html body #app[data-view="library"] .test-card-visual .test-card-motif {
  max-height: 100% !important;
}

html body #app[data-view="library"] .test-card-visual span {
  position: absolute !important;
  left: 18px !important;
  bottom: 14px !important;
  max-width: calc(100% - 36px) !important;
}

html body #app[data-view="library"] .test-card-top {
  order: 1 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
}

html body #app[data-view="library"] .test-card h2 {
  order: 2 !important;
  margin: 0 !important;
  font-size: clamp(18px, 1.18vw, 22px) !important;
  line-height: 1.22 !important;
  text-wrap: auto !important;
  overflow-wrap: break-word !important;
}

html body #app[data-view="library"] .test-card > p:not(.test-video-chip):not(.test-card-fit) {
  order: 3 !important;
  margin: 0 !important;
  font-size: clamp(12.5px, 0.82vw, 13.5px) !important;
  line-height: 1.55 !important;
}

html body #app[data-view="library"] .test-video-chip,
html body #app[data-view="library"] .test-card-fit {
  order: 4 !important;
  margin: 0 !important;
  font-size: clamp(12px, 0.78vw, 13px) !important;
  line-height: 1.45 !important;
}

html body #app[data-view="library"] .test-meta-row {
  order: 5 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 2px !important;
}

html body #app[data-view="library"] .test-meta-row span {
  white-space: normal !important;
}

html body #app[data-view="library"] .test-card-actions {
  order: 6 !important;
  margin-top: 4px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

html body #app[data-view="library"] .test-card-actions .button,
html body #app[data-view="library"] .test-card-actions button {
  min-height: 36px !important;
  padding: 9px 16px !important;
  border-radius: 999px !important;
}

@media (min-width: 1380px) {
  html body #app[data-view="library"] .tests-page-view,
  html body #app[data-view="library"] .tests-page-view.feature-page-view,
  html body #app[data-view="library"] .tests-page-view > .library-section,
  html body #app[data-view="library"] .tests-page-view .recommended-tests {
    width: min(1220px, calc(100vw - 120px)) !important;
    max-width: min(1220px, calc(100vw - 120px)) !important;
  }
}

@media (max-width: 900px) {
  html body #app[data-view="library"] .recommended-tests .section-heading {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  html body #app[data-view="library"] .library-grid,
  html body #app[data-view="library"] .recommended-tests .library-grid,
  html body #app[data-view="library"] .tests-page-view .library-grid,
  html body #app[data-view="library"] .tests-page-view .recommended-tests > .library-grid {
    grid-template-columns: 1fr !important;
  }
}

/* v24: override the older max-width:1280 single-column safety rule.
   Desktop and laptop test libraries must stay compact because this page will
   eventually contain many tests. */
@media (min-width: 901px) {
  html body #app[data-view="library"] .tests-page-view .recommended-tests > .library-grid,
  html body #app[data-view="library"] .tests-page-view .library-section.recommended-tests > .library-grid,
  html body #app[data-view="library"] .tests-page-view .recommended-tests .library-grid,
  html body #app[data-view="library"] .recommended-tests .library-grid,
  html body #app[data-view="library"] .library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;
  }
}

@media (min-width: 1500px) {
  html body #app[data-view="library"] .tests-page-view .recommended-tests > .library-grid,
  html body #app[data-view="library"] .tests-page-view .library-section.recommended-tests > .library-grid,
  html body #app[data-view="library"] .tests-page-view .recommended-tests .library-grid,
  html body #app[data-view="library"] .recommended-tests .library-grid,
  html body #app[data-view="library"] .library-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* v25: compact card internals. Older card rules used poster-style grid rows;
   switch the test card body to a flexible catalogue layout. */
html body #app[data-view="library"] .tests-page-view .recommended-tests .test-card,
html body #app[data-view="library"] .tests-page-view .library-grid > .test-card,
html body #app[data-view="library"] .recommended-tests .test-card,
html body #app[data-view="library"] .library-grid > .test-card,
html body #app[data-view="library"] .test-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 20px !important;
}

html body #app[data-view="library"] .tests-page-view .test-card-visual,
html body #app[data-view="library"] .recommended-tests .test-card-visual,
html body #app[data-view="library"] .test-card-visual {
  flex: 0 0 82px !important;
  height: 82px !important;
  min-height: 82px !important;
  max-height: 82px !important;
  margin: -2px 0 0 !important;
}

html body #app[data-view="library"] .tests-page-view .test-card :is(h2, p, div),
html body #app[data-view="library"] .recommended-tests .test-card :is(h2, p, div),
html body #app[data-view="library"] .test-card :is(h2, p, div) {
  flex: 0 0 auto !important;
}

html body #app[data-view="library"] .tests-page-view .test-video-chip,
html body #app[data-view="library"] .recommended-tests .test-video-chip,
html body #app[data-view="library"] .test-video-chip {
  margin: 0 !important;
}

html body #app[data-view="library"] .tests-page-view .test-card-fit,
html body #app[data-view="library"] .recommended-tests .test-card-fit,
html body #app[data-view="library"] .test-card-fit {
  display: none !important;
}

html body #app[data-view="library"] .tests-page-view .test-card-actions,
html body #app[data-view="library"] .recommended-tests .test-card-actions,
html body #app[data-view="library"] .test-card-actions {
  margin-top: 2px !important;
}

/* v26: make the test library scalable. A test card should read like a catalogue
   entry, not a poster, because this page will hold many tests. */
@media (min-width: 1180px) {
  html body #app[data-view="library"] .tests-page-view .recommended-tests > .library-grid,
  html body #app[data-view="library"] .tests-page-view .library-section.recommended-tests > .library-grid,
  html body #app[data-view="library"] .tests-page-view .recommended-tests .library-grid,
  html body #app[data-view="library"] .recommended-tests .library-grid,
  html body #app[data-view="library"] .library-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}

html body #app[data-view="library"] .tests-page-view .recommended-tests .test-card,
html body #app[data-view="library"] .tests-page-view .library-grid > .test-card,
html body #app[data-view="library"] .recommended-tests .test-card,
html body #app[data-view="library"] .library-grid > .test-card,
html body #app[data-view="library"] .test-card {
  gap: 8px !important;
  padding: 16px !important;
  border-radius: 22px !important;
}

html body #app[data-view="library"] .tests-page-view .test-card-visual,
html body #app[data-view="library"] .recommended-tests .test-card-visual,
html body #app[data-view="library"] .test-card-visual {
  flex-basis: 58px !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  opacity: 0.55 !important;
}

html body #app[data-view="library"] .test-card-visual span {
  bottom: 8px !important;
  left: 12px !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}

html body #app[data-view="library"] .test-card-top {
  gap: 6px !important;
}

html body #app[data-view="library"] .test-card-top span,
html body #app[data-view="library"] .test-meta-row span {
  padding: 4px 9px !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

html body #app[data-view="library"] .test-card h2 {
  font-size: clamp(16px, 1.05vw, 19px) !important;
  line-height: 1.24 !important;
}

html body #app[data-view="library"] .test-card > p:not(.test-video-chip):not(.test-card-fit),
html body #app[data-view="library"] .test-video-chip {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
}

html body #app[data-view="library"] .test-meta-row {
  gap: 6px !important;
  margin-top: 0 !important;
}

html body #app[data-view="library"] .test-card-actions .button,
html body #app[data-view="library"] .test-card-actions button {
  min-height: 34px !important;
  padding: 7px 14px !important;
  font-size: 12.5px !important;
  color: #F7F3EC !important;
}

/* v27: Daily observation starts with an intentional open action.
   The result itself stays single-mode: one sentence or one image. */
html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-start-panel {
  position: relative !important;
  box-sizing: border-box !important;
  width: min(720px, 100%) !important;
  min-height: clamp(360px, 58vh, 520px) !important;
  margin: clamp(18px, 4vh, 42px) auto 0 !important;
  padding: clamp(34px, 5vw, 64px) clamp(28px, 5vw, 62px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(14px, 2.4vh, 24px) !important;
  text-align: center !important;
  border-radius: 44% 56% 48% 52% / 54% 46% 56% 44% !important;
  border: 1px solid rgba(106, 143, 168, 0.24) !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(231, 211, 109, 0.12), transparent 34%),
    radial-gradient(circle at 18% 72%, rgba(169, 195, 218, 0.12), transparent 28%),
    rgba(247, 243, 236, 0.82) !important;
  box-shadow: 0 18px 50px rgba(42, 69, 97, 0.08) !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-start-panel > *:not(.observation-start-motif) {
  position: relative !important;
  z-index: 2 !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-start-panel .eyebrow {
  margin: 0 !important;
  font-family: "YYFinalAlt", "YYAltLock", "YYAltFinal", "YanYanAlt", "PingFang SC", sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.08em !important;
  color: #A8844A !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-start-panel h1 {
  margin: 0 !important;
  white-space: nowrap !important;
  font-family: "YYFinalBrand", "YYBrandLock", "YYBrandFinal", "YanYanBrand", "PingFang SC", sans-serif !important;
  font-size: clamp(42px, 5.4vw, 68px) !important;
  line-height: 1.08 !important;
  letter-spacing: 0.08em !important;
  color: #2A4561 !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-start-copy {
  max-width: 480px !important;
  margin: 0 !important;
  font-family: "YYFinalBrand", "YYBrandLock", "YYBrandFinal", "YanYanBrand", "PingFang SC", sans-serif !important;
  font-size: clamp(17px, 1.45vw, 21px) !important;
  line-height: 1.7 !important;
  color: rgba(30, 26, 26, 0.72) !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-start-button {
  margin-top: 4px !important;
  min-height: 46px !important;
  padding: 12px 28px !important;
  color: #F7F3EC !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-start-motif {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: 0.72 !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-start-motif .start-ring,
html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-start-motif .start-dot {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  border-radius: 999px !important;
  transform: translate(-50%, -50%) !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-start-motif .ring-one {
  width: 58% !important;
  aspect-ratio: 1 / 1 !important;
  border: 1px solid rgba(106, 143, 168, 0.2) !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-start-motif .ring-two {
  width: 38% !important;
  aspect-ratio: 1 / 1 !important;
  border: 1px solid rgba(168, 132, 74, 0.18) !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-start-motif .start-dot {
  width: 12px !important;
  height: 12px !important;
  background: rgba(168, 132, 74, 0.42) !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-card-result .observation-prompt-strip {
  display: none !important;
}

@media (max-width: 640px) {
  html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-start-panel {
    width: min(100%, calc(100vw - 28px)) !important;
    min-height: 360px !important;
    border-radius: 34px !important;
  }

  html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-start-panel h1 {
    white-space: normal !important;
    font-size: clamp(30px, 10vw, 42px) !important;
  }
}

/* v28: scalable test-library catalogue.
   The test page is a growing library, so cards must be compact, even-height,
   and never clipped horizontally. */
html,
body {
  overflow-x: hidden !important;
}

html body #app[data-view="library"],
html body #app[data-view="library"].surface {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

html body #app[data-view="library"] .tests-page-view,
html body #app[data-view="library"] .tests-page-view.feature-page-view {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100vh !important;
  padding: clamp(74px, 8vh, 92px) clamp(18px, 4vw, 56px) clamp(34px, 5vh, 64px) !important;
  overflow-x: hidden !important;
  display: grid !important;
  gap: clamp(18px, 2.4vw, 30px) !important;
}

html body #app[data-view="library"] .testing-progress-panel {
  width: min(1120px, 100%) !important;
  margin: 0 auto !important;
  padding: clamp(16px, 2vw, 24px) !important;
  border-radius: 26px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.36fr) !important;
  align-items: center !important;
  gap: clamp(16px, 2vw, 28px) !important;
}

html body #app[data-view="library"] .testing-progress-copy {
  min-width: 0 !important;
}

html body #app[data-view="library"] .testing-progress-copy h2 {
  margin: 0 0 6px !important;
  font-family: var(--font-brand) !important;
  font-size: clamp(17px, 1.15vw, 22px) !important;
  line-height: 1.24 !important;
  color: #2A4561 !important;
}

html body #app[data-view="library"] .testing-progress-copy p:not(.eyebrow) {
  max-width: 62ch !important;
  font-size: clamp(12.5px, 0.78vw, 14px) !important;
  line-height: 1.55 !important;
}

html body #app[data-view="library"] .testing-progress-action {
  min-width: 0 !important;
  display: grid !important;
  gap: 12px !important;
}

html body #app[data-view="library"] .recommended-tests {
  width: min(1120px, 100%) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

html body #app[data-view="library"] .recommended-tests .section-heading {
  margin: 0 0 clamp(14px, 2vw, 22px) !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1fr) !important;
  align-items: end !important;
  gap: 18px !important;
}

html body #app[data-view="library"] .recommended-tests .section-heading h2 {
  margin: 0 !important;
  font-size: clamp(22px, 1.8vw, 32px) !important;
  line-height: 1.16 !important;
  color: #2A4561 !important;
  white-space: normal !important;
}

html body #app[data-view="library"] .recommended-tests .section-heading p {
  margin: 0 !important;
  max-width: 58ch !important;
  font-size: clamp(13px, 0.82vw, 15px) !important;
  line-height: 1.6 !important;
  color: rgba(30, 26, 26, 0.68) !important;
}

html body #app[data-view="library"] .recommended-tests .library-grid,
html body #app[data-view="library"] .library-grid {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)) !important;
  gap: clamp(14px, 1.8vw, 22px) !important;
  align-items: stretch !important;
  overflow: visible !important;
}

html body #app[data-view="library"] .test-card,
html body #app[data-view="library"] .library-grid > .test-card {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: clamp(16px, 1.7vw, 22px) !important;
  border-radius: 24px !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto auto 1fr auto !important;
  gap: 10px !important;
  overflow: hidden !important;
  background:
    linear-gradient(135deg, rgba(168, 132, 74, 0.08), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(169, 195, 218, 0.14), transparent 28%),
    rgba(247, 243, 236, 0.82) !important;
  border: 1px solid rgba(168, 132, 74, 0.2) !important;
  box-shadow: 0 14px 34px rgba(42, 69, 97, 0.07) !important;
}

html body #app[data-view="library"] .test-card::before {
  opacity: 0.2 !important;
}

html body #app[data-view="library"] .test-card-visual {
  height: 86px !important;
  min-height: 86px !important;
  max-height: 86px !important;
  flex: none !important;
  margin: 0 !important;
  border-radius: 18px !important;
  opacity: 0.72 !important;
  overflow: hidden !important;
}

html body #app[data-view="library"] .test-card-top {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-width: 0 !important;
}

html body #app[data-view="library"] .test-card-top span,
html body #app[data-view="library"] .test-meta-row span {
  min-height: 24px !important;
  padding: 4px 9px !important;
  font-family: var(--font-alt) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  color: #2A4561 !important;
  background: rgba(169, 195, 218, 0.18) !important;
  border: 1px solid rgba(106, 143, 168, 0.18) !important;
  white-space: nowrap !important;
}

html body #app[data-view="library"] .test-card-top span:last-child {
  color: #8A5B3D !important;
  background: rgba(231, 211, 109, 0.22) !important;
  border-color: rgba(168, 132, 74, 0.18) !important;
}

html body #app[data-view="library"] .test-card h2 {
  margin: 2px 0 0 !important;
  max-width: 100% !important;
  font-family: var(--font-brand) !important;
  font-size: clamp(18px, 1.28vw, 23px) !important;
  line-height: 1.22 !important;
  color: #2A4561 !important;
  letter-spacing: 0.01em !important;
  overflow-wrap: anywhere !important;
  text-wrap: balance !important;
}

html body #app[data-view="library"] .test-card > p:not(.test-video-chip):not(.test-card-fit) {
  margin: 0 !important;
  min-height: 3.05em !important;
  font-family: var(--font-brand) !important;
  font-size: clamp(13px, 0.82vw, 15px) !important;
  line-height: 1.52 !important;
  color: rgba(30, 26, 26, 0.72) !important;
}

html body #app[data-view="library"] .test-video-chip {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 1.55em !important;
  font-size: clamp(11.5px, 0.72vw, 13px) !important;
  line-height: 1.45 !important;
  color: #2A4561 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body #app[data-view="library"] .test-card-fit {
  display: none !important;
}

html body #app[data-view="library"] .test-meta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin: 2px 0 0 !important;
}

html body #app[data-view="library"] .test-card-actions {
  align-self: end !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 8px !important;
}

html body #app[data-view="library"] .test-card-actions .button,
html body #app[data-view="library"] .test-card-actions button,
html body #app[data-view="library"] .button:not(.secondary),
html body #app[data-view="library"] button.button:not(.secondary) {
  min-height: 38px !important;
  padding: 9px 18px !important;
  border-radius: 999px !important;
  color: #F7F3EC !important;
  -webkit-text-fill-color: #F7F3EC !important;
  background: #2A4561 !important;
  border-color: rgba(42, 69, 97, 0.28) !important;
  text-shadow: none !important;
}

html body #app[data-view="library"] .test-card-actions .button.secondary,
html body #app[data-view="library"] .test-card-actions button.secondary {
  color: #2A4561 !important;
  -webkit-text-fill-color: #2A4561 !important;
  background: rgba(247, 243, 236, 0.72) !important;
  border-color: rgba(106, 143, 168, 0.24) !important;
}

html body #app[data-view] :is(.button:not(.secondary), button.button:not(.secondary), .payment-button) {
  color: #F7F3EC !important;
  -webkit-text-fill-color: #F7F3EC !important;
  text-shadow: none !important;
}

/* v29: payment provider selector */
html body #app[data-view] .payment-provider-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 12px;
}

html body #app[data-view] .payment-provider-option {
  appearance: none;
  border: 1px solid rgba(61, 95, 132, 0.18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 20% 18%, rgba(233, 185, 191, 0.16), transparent 32%),
    rgba(247, 243, 236, 0.78);
  color: #2A4561 !important;
  -webkit-text-fill-color: #2A4561 !important;
  cursor: pointer;
  display: grid;
  gap: 6px;
  min-height: 92px;
  padding: 16px 18px;
  text-align: left;
  transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}

html body #app[data-view] .payment-provider-option span {
  color: #243E56 !important;
  -webkit-text-fill-color: #243E56 !important;
  font-family: var(--font-brand) !important;
  font-size: 22px;
  line-height: 1.2;
}

html body #app[data-view] .payment-provider-option small {
  color: rgba(30, 26, 26, 0.72) !important;
  -webkit-text-fill-color: rgba(30, 26, 26, 0.72) !important;
  font-family: var(--font-brand) !important;
  font-size: 14px;
  line-height: 1.45;
}

html body #app[data-view] .payment-provider-option.is-selected {
  border-color: rgba(168, 132, 74, 0.5);
  box-shadow: 0 12px 30px rgba(42, 69, 97, 0.1);
}

html body #app[data-view] .payment-provider-option:hover {
  transform: translateY(-2px);
}

html body #app[data-view] .payment-selected-note {
  color: rgba(42, 69, 97, 0.82) !important;
  -webkit-text-fill-color: rgba(42, 69, 97, 0.82) !important;
  font-family: var(--font-brand) !important;
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 14px;
}

html body #app[data-view] .payment-button,
html body #app[data-view] .payment-button * {
  color: #F7F3EC !important;
  -webkit-text-fill-color: #F7F3EC !important;
}

@media (max-width: 900px) {
  html body #app[data-view="library"] .testing-progress-panel,
  html body #app[data-view="library"] .recommended-tests .section-heading {
    grid-template-columns: 1fr !important;
  }

  html body #app[data-view="library"] .tests-page-view,
  html body #app[data-view="library"] .tests-page-view.feature-page-view {
    padding-inline: 16px !important;
  }
}

@media (max-width: 640px) {
  html body #app[data-view] .payment-provider-options {
    grid-template-columns: 1fr;
  }

  html body #app[data-view="library"] .recommended-tests .library-grid,
  html body #app[data-view="library"] .library-grid {
    grid-template-columns: 1fr !important;
  }

  html body #app[data-view="library"] .test-card {
    padding: 16px !important;
    border-radius: 22px !important;
  }

  html body #app[data-view="library"] .test-card-visual {
    height: 74px !important;
    min-height: 74px !important;
  }
}

/* v30: daily observation arrived note no-overlap lock.
   This pill is plain status text; decorative pseudo text must never sit on top
   of the sentence. */
html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-card-result > .observation-arrived-note,
html body #app[data-view="daily-observation"] .observation-card-result > .observation-arrived-note {
  position: relative !important;
  z-index: 4 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: min(100%, 520px) !important;
  min-height: 46px !important;
  box-sizing: border-box !important;
  padding: 10px 22px !important;
  margin: 6px auto 18px !important;
  overflow: visible !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  font-family: var(--font-brand) !important;
  font-size: clamp(16px, 1.15vw, 19px) !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  letter-spacing: 0.02em !important;
  color: rgba(30, 26, 26, 0.78) !important;
  -webkit-text-fill-color: rgba(30, 26, 26, 0.78) !important;
  text-align: center !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-card-result > .observation-arrived-note::before,
html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-card-result > .observation-arrived-note::after,
html body #app[data-view="daily-observation"] .observation-card-result > .observation-arrived-note::before,
html body #app[data-view="daily-observation"] .observation-card-result > .observation-arrived-note::after {
  content: none !important;
  display: none !important;
}

/* v31: quiz scene visuals use abstract relationship diagrams, not landscape art. */
html body #app[data-view="quiz"] .scene-card {
  border-radius: 28px !important;
  border: 1px solid rgba(61, 95, 132, 0.18) !important;
  background:
    radial-gradient(circle at 18% 20%, rgba(233, 185, 191, 0.13), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(169, 195, 218, 0.16), transparent 32%),
    rgba(247, 243, 236, 0.82) !important;
  box-shadow:
    inset 0 0 38px rgba(255, 255, 255, 0.34),
    0 12px 34px rgba(42, 69, 97, 0.08) !important;
}

html body #app[data-view="quiz"] .scene-visual,
html body #app[data-view="quiz"] .scene-visual:is(.bathroom, .kitchen, .food, .gift, .weekend, .phone, .clock, .money, .photo, .repair, .bedroom, .family, .sofa) {
  background:
    radial-gradient(circle at 50% 48%, rgba(247, 243, 236, 0.9), rgba(247, 243, 236, 0.46) 46%, transparent 68%),
    linear-gradient(120deg, rgba(233, 185, 191, 0.08), rgba(169, 195, 218, 0.1)),
    rgba(247, 243, 236, 0.68) !important;
  box-shadow: inset 0 0 0 1px rgba(61, 95, 132, 0.08) !important;
}

html body #app[data-view="quiz"] .scene-visual::after {
  opacity: 0.2 !important;
  mix-blend-mode: normal !important;
}

html body #app[data-view="quiz"] .relation-scene-art {
  padding: 18px !important;
  animation: sceneDrift 12s ease-in-out infinite alternate !important;
}

html body #app[data-view="quiz"] .relation-scene-art::before {
  opacity: 0.16 !important;
  background-image:
    radial-gradient(circle at 18px 22px, rgba(42, 69, 97, 0.12) 1px, transparent 1.4px),
    radial-gradient(circle at 44px 12px, rgba(168, 132, 74, 0.11) 0.8px, transparent 1.2px) !important;
}

html body #app[data-view="quiz"] .scene-diagram {
  position: relative;
  z-index: 1;
  display: block;
  width: min(94%, 500px);
  height: auto;
  opacity: 0.96;
  overflow: visible;
  pointer-events: none;
}

html body #app[data-view="quiz"] .scene-diagram-thread {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

html body #app[data-view="quiz"] .scene-diagram-thread.thread-main {
  stroke: rgba(61, 95, 132, 0.42);
  stroke-width: 2.1;
  stroke-dasharray: 10 12;
}

html body #app[data-view="quiz"] .scene-diagram-thread.thread-soft {
  stroke: rgba(168, 132, 74, 0.25);
  stroke-width: 1.5;
  stroke-dasharray: 4 13;
}

html body #app[data-view="quiz"] .scene-diagram-zone {
  fill: rgba(247, 243, 236, 0.42);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

html body #app[data-view="quiz"] .scene-diagram-zone.zone-self {
  stroke: rgba(216, 106, 82, 0.28);
  fill: rgba(233, 185, 191, 0.16);
}

html body #app[data-view="quiz"] .scene-diagram-zone.zone-other {
  stroke: rgba(61, 95, 132, 0.32);
  fill: rgba(169, 195, 218, 0.16);
}

html body #app[data-view="quiz"] .scene-diagram-zone.zone-field {
  stroke: rgba(168, 132, 74, 0.24);
  fill: rgba(231, 211, 109, 0.08);
}

html body #app[data-view="quiz"] .scene-diagram-node {
  fill: rgba(168, 132, 74, 0.78);
  stroke: rgba(247, 243, 236, 0.86);
  stroke-width: 4;
}

html body #app[data-view="quiz"] .scene-diagram-node.node-two {
  fill: rgba(61, 95, 132, 0.76);
}

html body #app[data-view="quiz"] .scene-diagram-node.node-three {
  fill: rgba(216, 106, 82, 0.62);
}

html body #app[data-view="quiz"] .scene-diagram-petal {
  fill: rgba(233, 185, 191, 0.18);
  stroke: rgba(168, 132, 74, 0.26);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

html body #app[data-view="quiz"] .scene-diagram-stitches circle {
  fill: rgba(42, 69, 97, 0.22);
}

html body #app[data-view="quiz"] .relation-scene-art .art-caption {
  z-index: 2;
  left: 22px;
  top: 18px;
  right: auto;
  bottom: auto;
  color: rgba(42, 69, 97, 0.84) !important;
  -webkit-text-fill-color: rgba(42, 69, 97, 0.84) !important;
  background: rgba(247, 243, 236, 0.74) !important;
  border: 1px solid rgba(61, 95, 132, 0.12);
  box-shadow: 0 8px 20px rgba(42, 69, 97, 0.06);
}

html body #app[data-view="quiz"] :is(.ink-sun, .ink-mountain, .ink-branch, .ink-floor, .ink-object) {
  display: none !important;
}

@media (max-width: 720px) {
  html body #app[data-view="quiz"] .relation-scene-art {
    padding: 12px !important;
  }

  html body #app[data-view="quiz"] .scene-diagram {
    width: 98%;
  }
}

/* v32: quiz options align to one reading edge. */
html body #app[data-view="quiz"] .choice-stage {
  width: 100% !important;
  justify-items: stretch !important;
}

html body #app[data-view="quiz"] .options {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  justify-items: stretch !important;
}

html body #app[data-view="quiz"] .option {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: start !important;
  justify-items: start !important;
  column-gap: 18px !important;
  width: 100% !important;
  min-height: 72px !important;
  padding: 14px 28px !important;
  text-align: left !important;
}

html body #app[data-view="quiz"] .option-key {
  justify-self: start !important;
  align-self: center !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  margin: 0 !important;
  line-height: 1 !important;
}

html body #app[data-view="quiz"] .option-text {
  justify-self: start !important;
  align-self: center !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-align: left !important;
  line-height: 1.7 !important;
}

@media (max-width: 640px) {
  html body #app[data-view="quiz"] .option {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    min-height: 64px !important;
    padding: 12px 16px !important;
  }

  html body #app[data-view="quiz"] .option-key {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }
}

/* v33: narration lines are scene notes, not chat bubbles. */
html body #app[data-view="quiz"] .dialogue .bubble.narration {
  justify-self: stretch !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 18px 22px !important;
  border: 1px solid rgba(61, 95, 132, 0.16) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 12% 24%, rgba(169, 195, 218, 0.12), transparent 34%),
    rgba(247, 243, 236, 0.82) !important;
  color: rgba(30, 26, 26, 0.78) !important;
  -webkit-text-fill-color: rgba(30, 26, 26, 0.78) !important;
  box-shadow: 0 10px 24px rgba(42, 69, 97, 0.06) !important;
  text-align: left !important;
}

html body #app[data-view="quiz"] .dialogue .bubble.narration .bubble-body {
  display: block !important;
  font-family: var(--font-brand) !important;
  font-size: clamp(17px, 1.2vw, 20px) !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  letter-spacing: 0.02em !important;
}

/* v34: second test uses concrete life-scene illustrations, matching the first test rhythm. */
html body #app[data-view="quiz"] .context-scene-art {
  padding: 0 !important;
  animation: sceneDrift 13s ease-in-out infinite alternate !important;
}

html body #app[data-view="quiz"] .context-scene-art::before {
  opacity: 0.18 !important;
  background-image:
    radial-gradient(circle at 18px 22px, rgba(42, 69, 97, 0.1) 1px, transparent 1.4px),
    radial-gradient(circle at 44px 12px, rgba(168, 132, 74, 0.1) 0.8px, transparent 1.2px) !important;
}

html body #app[data-view="quiz"] .context-scene-svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

html body #app[data-view="quiz"] .context-scene-svg :is(path, rect, circle, ellipse) {
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html body #app[data-view="quiz"] .context-thread {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.52;
}

html body #app[data-view="quiz"] .context-thread-a {
  stroke: rgba(61, 95, 132, 0.38);
  stroke-width: 8;
}

html body #app[data-view="quiz"] .context-thread-b {
  stroke: rgba(168, 132, 74, 0.24);
  stroke-width: 5;
  stroke-dasharray: 16 18;
}

html body #app[data-view="quiz"] :is(.context-table, .context-table-flat, .context-bed, .context-frame, .context-paper-card, .context-phone, .context-map, .context-stage, .context-podium) {
  fill: rgba(247, 243, 236, 0.68);
  stroke: rgba(61, 95, 132, 0.22);
  stroke-width: 2.2;
}

html body #app[data-view="quiz"] .context-table {
  fill: rgba(231, 211, 109, 0.14);
  stroke: rgba(168, 132, 74, 0.32);
}

html body #app[data-view="quiz"] .context-table-flat {
  fill: rgba(168, 132, 74, 0.12);
  stroke: rgba(168, 132, 74, 0.28);
}

html body #app[data-view="quiz"] .context-bed,
html body #app[data-view="quiz"] .context-pillow {
  fill: rgba(169, 195, 218, 0.22);
  stroke: rgba(61, 95, 132, 0.22);
}

html body #app[data-view="quiz"] .context-pillow.alt,
html body #app[data-view="quiz"] .context-blanket {
  fill: rgba(233, 185, 191, 0.18);
  stroke: rgba(168, 132, 74, 0.2);
}

html body #app[data-view="quiz"] :is(.context-plate, .context-chair, .context-person, .context-group-ring, .context-focus-oval) {
  fill: rgba(247, 243, 236, 0.54);
  stroke: rgba(61, 95, 132, 0.26);
  stroke-width: 2.4;
}

html body #app[data-view="quiz"] .context-chair-strong,
html body #app[data-view="quiz"] .context-person.main,
html body #app[data-view="quiz"] .chair-strong {
  fill: rgba(169, 195, 218, 0.28);
  stroke: rgba(61, 95, 132, 0.32);
}

html body #app[data-view="quiz"] .context-person.edge,
html body #app[data-view="quiz"] .chair-soft {
  fill: rgba(233, 185, 191, 0.24);
  stroke: rgba(216, 106, 82, 0.25);
}

html body #app[data-view="quiz"] .chair-empty,
html body #app[data-view="quiz"] .context-group-ring.alt {
  fill: rgba(231, 211, 109, 0.12);
  stroke: rgba(168, 132, 74, 0.24);
}

html body #app[data-view="quiz"] :is(.context-small-line, .context-utensil, .context-key, .context-ribbon, .context-route, .context-crop-mark, .context-arrow, .context-gap-line) {
  fill: none;
  stroke: rgba(42, 69, 97, 0.44);
  stroke-width: 4;
}

html body #app[data-view="quiz"] .context-ticket,
html body #app[data-view="quiz"] .context-gift,
html body #app[data-view="quiz"] .context-speech {
  fill: rgba(247, 243, 236, 0.7);
  stroke: rgba(168, 132, 74, 0.28);
  stroke-width: 2.2;
}

html body #app[data-view="quiz"] .context-ticket.muted,
html body #app[data-view="quiz"] .context-gift.muted {
  fill: rgba(169, 195, 218, 0.16);
  stroke: rgba(61, 95, 132, 0.22);
}

html body #app[data-view="quiz"] .context-gift.alt {
  fill: rgba(233, 185, 191, 0.18);
  stroke: rgba(216, 106, 82, 0.2);
}

html body #app[data-view="quiz"] .context-node-gold {
  fill: rgba(168, 132, 74, 0.78);
  stroke: rgba(247, 243, 236, 0.88);
  stroke-width: 5;
}

html body #app[data-view="quiz"] .context-node-blue {
  fill: rgba(61, 95, 132, 0.7);
  stroke: rgba(247, 243, 236, 0.88);
  stroke-width: 5;
}

html body #app[data-view="quiz"] .context-node-coral {
  fill: rgba(216, 106, 82, 0.68);
  stroke: rgba(247, 243, 236, 0.88);
  stroke-width: 5;
}

html body #app[data-view="quiz"] .context-scene-dots circle {
  fill: rgba(61, 95, 132, 0.2);
}

html body #app[data-view="quiz"] .context-hand,
html body #app[data-view="quiz"] .context-soft-star {
  fill: rgba(233, 185, 191, 0.18);
  stroke: rgba(168, 132, 74, 0.28);
  stroke-width: 3;
}

html body #app[data-view="quiz"] .context-scene-art .art-caption {
  z-index: 2;
  left: 28px;
  top: 26px;
  right: auto;
  bottom: auto;
  color: rgba(42, 69, 97, 0.86) !important;
  -webkit-text-fill-color: rgba(42, 69, 97, 0.86) !important;
  background: rgba(247, 243, 236, 0.78) !important;
  border: 1px solid rgba(61, 95, 132, 0.12);
  box-shadow: 0 10px 24px rgba(42, 69, 97, 0.06);
}

/* v35: Shui-Jin-Mu palette lock.
   The site should lean toward water, metal, and wood:
   deep sea blue, lake blue, pale gold, and quiet green.
   Wine red / coral may remain only as tiny decorative warmth, never as the main action color. */
:root,
html,
body,
#app,
#app[data-view] {
  --yy-water-deep: #2A4561;
  --yy-water-ink: #243E56;
  --yy-water-blue: #5F8FAE;
  --yy-water-light: #DDECF3;
  --yy-metal-gold: #B99145;
  --yy-metal-soft: #E6D3A6;
  --yy-wood-green: #5F866C;
  --yy-wood-soft: #DDE9DE;
  --yy-paper-blue: #F3F8FA;
}

html body {
  background:
    radial-gradient(circle at 16% 12%, rgba(95, 143, 174, 0.16), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(185, 145, 69, 0.12), transparent 28%),
    radial-gradient(circle at 24% 82%, rgba(95, 134, 108, 0.12), transparent 30%),
    linear-gradient(180deg, #F7F3EC 0%, #F3F8FA 100%) !important;
}

html body #app.surface,
html body #app[data-view] {
  --clay: var(--yy-water-blue) !important;
  --clay-dark: var(--yy-water-deep) !important;
  --sage: var(--yy-wood-green) !important;
  --sky: var(--yy-water-light) !important;
  --gold: var(--yy-metal-gold) !important;
  --line: rgba(95, 143, 174, 0.34) !important;
  color: var(--yy-water-ink) !important;
}

html body #app[data-view] :is(h1, h2, h3, .page-title, .section-heading h2, .question-title, .result-title) {
  color: var(--yy-water-deep) !important;
  -webkit-text-fill-color: var(--yy-water-deep) !important;
}

html body #app[data-view] :is(.button:not(.secondary), button.button:not(.secondary), .payment-button, .observation-start-button) {
  background:
    radial-gradient(circle at 24% 18%, rgba(230, 211, 166, 0.18), transparent 34%),
    linear-gradient(135deg, var(--yy-water-deep), #376D8C) !important;
  color: #F7F3EC !important;
  -webkit-text-fill-color: #F7F3EC !important;
  border-color: rgba(95, 143, 174, 0.36) !important;
  box-shadow: 0 14px 32px rgba(42, 69, 97, 0.18) !important;
}

html body #app[data-view] :is(.button:not(.secondary), button.button:not(.secondary), .payment-button, .observation-start-button) * {
  color: #F7F3EC !important;
  -webkit-text-fill-color: #F7F3EC !important;
}

html body #app[data-view] :is(.button.secondary, button.button.secondary, .page-back-button) {
  color: var(--yy-water-deep) !important;
  -webkit-text-fill-color: var(--yy-water-deep) !important;
  border-color: rgba(95, 143, 174, 0.34) !important;
  background:
    radial-gradient(circle at 18% 20%, rgba(230, 211, 166, 0.14), transparent 36%),
    rgba(247, 243, 236, 0.78) !important;
}

html body #app[data-view="quiz"] {
  --clay: var(--yy-water-blue) !important;
  --clay-dark: var(--yy-water-deep) !important;
  --sage: var(--yy-wood-green) !important;
  --gold: var(--yy-metal-gold) !important;
}

html body #app[data-view="quiz"] :is(.question-card, .prompt-card, .choice-stage, .dialogue-panel) {
  border-color: rgba(95, 143, 174, 0.3) !important;
  background:
    radial-gradient(circle at 88% 14%, rgba(230, 211, 166, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(243, 248, 250, 0.9)) !important;
}

html body #app[data-view="quiz"] .progress-fill,
html body #app[data-view="quiz"] .progress-fill::before {
  background: linear-gradient(90deg, var(--yy-water-blue), var(--yy-wood-green), var(--yy-metal-gold)) !important;
}

html body #app[data-view="quiz"] .option {
  border-color: rgba(95, 143, 174, 0.28) !important;
  background:
    radial-gradient(circle at 10% 50%, rgba(95, 143, 174, 0.08), transparent 30%),
    rgba(255, 255, 255, 0.76) !important;
  box-shadow: 0 8px 22px rgba(42, 69, 97, 0.06) !important;
}

html body #app[data-view="quiz"] .option:hover {
  border-color: rgba(185, 145, 69, 0.46) !important;
  background:
    radial-gradient(circle at 10% 50%, rgba(230, 211, 166, 0.16), transparent 32%),
    rgba(255, 255, 255, 0.82) !important;
}

html body #app[data-view="quiz"] .option.selected {
  border-color: rgba(95, 143, 174, 0.7) !important;
  background:
    radial-gradient(circle at 12% 50%, rgba(95, 143, 174, 0.18), transparent 32%),
    linear-gradient(90deg, rgba(221, 236, 243, 0.92), rgba(247, 243, 236, 0.88)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(185, 145, 69, 0.22),
    0 12px 28px rgba(42, 69, 97, 0.12) !important;
}

html body #app[data-view="quiz"] .option-key {
  background: rgba(221, 236, 243, 0.92) !important;
  color: var(--yy-water-deep) !important;
  -webkit-text-fill-color: var(--yy-water-deep) !important;
}

html body #app[data-view="quiz"] .option.selected .option-key {
  background: var(--yy-water-deep) !important;
  color: #F7F3EC !important;
  -webkit-text-fill-color: #F7F3EC !important;
  box-shadow: 0 0 0 5px rgba(230, 211, 166, 0.34) !important;
}

html body #app[data-test-id="group_position_sense_v1"] :is(.button:not(.secondary), button.button:not(.secondary)) {
  background:
    radial-gradient(circle at 24% 18%, rgba(230, 211, 166, 0.18), transparent 34%),
    linear-gradient(135deg, var(--yy-water-deep), #376D8C) !important;
  color: #F7F3EC !important;
  -webkit-text-fill-color: #F7F3EC !important;
}

/* v36: final visible font lock.
   The visible UI now uses only two families:
   - YYFinalHand: brand/emotional moments only.
   - YYFinalAlt: every functional title, reading text, button, nav, tag and form.
   YYFinalBrand remains loaded for compatibility but must not be visible. */
:root,
html,
body,
#app,
#app[data-view],
#app[data-view] * {
  --font-brand: "YYFinalAlt", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --font-body: "YYFinalAlt", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --font-sans: "YYFinalAlt", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --font-serif: "YYFinalAlt", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --font-display: "YYFinalAlt", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --font-title: "YYFinalAlt", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --font-alt: "YYFinalAlt", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --font-ink: "YYFinalAlt", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --font-hand: "YYFinalHand", "YYFinalAlt", "PingFang SC", sans-serif !important;
  --yy-font-title: "YYFinalAlt", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --yy-font-body: "YYFinalAlt", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --yy-font-label: "YYFinalAlt", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --yy-font-emotion: "YYFinalHand", "YYFinalAlt", "PingFang SC", sans-serif !important;
}

html body #app[data-view],
html body #app[data-view] :is(
  h1,
  h2,
  h3,
  h4,
  p,
  li,
  dd,
  dt,
  a,
  span,
  em,
  strong,
  small,
  label,
  input,
  textarea,
  select,
  option,
  button,
  .button,
  .nav-pill,
  .floating-function-dock,
  .floating-function-dock *,
  .page-title,
  .section-title,
  .section-heading,
  .section-heading *,
  .test-card,
  .test-card *,
  .question-card,
  .question-card *,
  .option,
  .option *,
  .activity-card,
  .activity-card *,
  .observation-source,
  .observation-prompt-strip,
  .observation-prompt-strip *,
  .observation-start-copy,
  .observation-number,
  .eyebrow,
  .tag,
  .pill,
  .status-pill,
  .meta-pill
) {
  font-family: "YYFinalAlt", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

html body #app[data-view] :is(
  .wordmark,
  .site-wordmark,
  .brand-wordmark,
  .home-brand-title,
  .brand-title-main,
  .wordmark-main,
  .hero-brand-title,
  [data-brand-wordmark],
  .home-constellation-title,
  .observation-main-text.original,
  .observation-main-text.text-original,
  .daily-observation-original,
  .emotion-line,
  .daily-care-line,
  .hand-note,
  .result-reminder
) {
  font-family: "YYFinalHand", "YYFinalAlt", "PingFang SC", sans-serif !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-start-panel h1 {
  font-family: "YYFinalHand", "YYFinalAlt", "PingFang SC", sans-serif !important;
  font-size: clamp(30px, 3.1vw, 42px) !important;
  line-height: 1.16 !important;
  letter-spacing: 0.025em !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  color: var(--yy-water-deep, #2A4561) !important;
  -webkit-text-fill-color: var(--yy-water-deep, #2A4561) !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-start-copy {
  font-family: "YYFinalAlt", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: clamp(15px, 1.16vw, 18px) !important;
  line-height: 1.78 !important;
  letter-spacing: 0.02em !important;
  color: rgba(30, 26, 26, 0.72) !important;
  -webkit-text-fill-color: rgba(30, 26, 26, 0.72) !important;
}

html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-start-panel .eyebrow {
  display: none !important;
}

html body #app[data-view] :is(.button:not(.secondary), button.button:not(.secondary), .payment-button, .observation-start-button) {
  color: #F7F3EC !important;
  -webkit-text-fill-color: #F7F3EC !important;
  font-family: "YYFinalAlt", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-weight: 400 !important;
}

html body #app[data-view] :is(.button:not(.secondary), button.button:not(.secondary), .payment-button, .observation-start-button) * {
  color: #F7F3EC !important;
  -webkit-text-fill-color: #F7F3EC !important;
}

@media (max-width: 640px) {
  html body[data-view="daily-observation"] #app[data-view="daily-observation"] .observation-start-panel h1 {
    font-size: clamp(25px, 7.2vw, 34px) !important;
    white-space: nowrap !important;
    letter-spacing: 0.02em !important;
  }
}

/* v37: beat older !important title locks such as YYBrandLock. */
html body #app#app[data-view][data-view] :is(
  h1,
  h2,
  h3,
  h4,
  .page-title,
  .section-title,
  .section-heading h1,
  .section-heading h2,
  .section-heading h3,
  .testing-progress-copy h2,
  .test-card h2,
  .test-card h3,
  .activity-card h2,
  .activity-card h3,
  .event-card h2,
  .event-card h3,
  .question-title,
  .result-title,
  .observation-card-result h1,
  .observation-card-result h2,
  .creator-profile h1,
  .creator-profile h2,
  .creator-profile h3
) {
  font-family: "YYFinalAlt", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

html body[data-view="daily-observation"] #app#app[data-view="daily-observation"][data-view] .observation-start-panel h1,
html body #app#app[data-view][data-view] :is(
  .wordmark,
  .site-wordmark,
  .brand-wordmark,
  .home-brand-title,
  .brand-title-main,
  .wordmark-main,
  .hero-brand-title,
  [data-brand-wordmark],
  .home-constellation-title,
  .observation-main-text.original,
  .observation-main-text.text-original,
  .daily-observation-original,
  .emotion-line,
  .daily-care-line,
  .hand-note,
  .result-reminder
) {
  font-family: "YYFinalHand", "YYFinalAlt", "PingFang SC", sans-serif !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

/* v38: payment/order/light application surfaces. */
html body #app[data-view] .test-price-chip,
html body #app[data-view] .activity-checkout-card .eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 6px 12px;
  border: 1px solid rgba(168, 132, 74, 0.24);
  background: rgba(216, 185, 73, 0.14);
  color: #2A4561 !important;
  -webkit-text-fill-color: #2A4561 !important;
  font-family: "YYFinalAlt", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  letter-spacing: 0.03em !important;
}

html body #app[data-view] .activity-checkout-card {
  position: relative;
  overflow: hidden;
  width: min(980px, calc(100vw - 48px));
  margin: clamp(78px, 10vh, 118px) auto 72px;
  padding: clamp(30px, 4vw, 54px);
  border-radius: 32px;
  border: 1px solid rgba(168, 132, 74, 0.24);
  background:
    radial-gradient(circle at 85% 10%, rgba(233, 185, 191, 0.16), transparent 34%),
    radial-gradient(circle at 14% 90%, rgba(169, 195, 218, 0.15), transparent 35%),
    rgba(247, 243, 236, 0.88);
  box-shadow: 0 18px 50px rgba(42, 69, 97, 0.08);
}

html body #app[data-view] .activity-checkout-card h1 {
  margin: 12px 0 12px;
  color: #2A4561 !important;
  -webkit-text-fill-color: #2A4561 !important;
  font-size: clamp(28px, 3.4vw, 46px) !important;
  line-height: 1.22 !important;
}

html body #app[data-view] .activity-checkout-summary,
html body #app[data-view] .activity-checkout-card p {
  color: rgba(30, 26, 26, 0.76) !important;
  -webkit-text-fill-color: rgba(30, 26, 26, 0.76) !important;
  font-size: 17px !important;
  line-height: 1.9 !important;
}

html body #app[data-view] .activity-form {
  display: grid;
  gap: 16px;
  margin: 26px 0;
}

html body #app[data-view] .activity-form label {
  display: grid;
  gap: 8px;
  color: #2A4561 !important;
  -webkit-text-fill-color: #2A4561 !important;
}

html body #app[data-view] .activity-form label > span {
  font-size: 15px !important;
  line-height: 1.45 !important;
}

html body #app[data-view] .activity-form input,
html body #app[data-view] .activity-form textarea {
  box-sizing: border-box;
  width: 100%;
  border-radius: 20px;
  border: 1px solid rgba(106, 143, 168, 0.26);
  background: rgba(247, 243, 236, 0.72);
  padding: 13px 16px;
  color: rgba(30, 26, 26, 0.82) !important;
  -webkit-text-fill-color: rgba(30, 26, 26, 0.82) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  outline: none;
}

html body #app[data-view] .activity-form input:focus,
html body #app[data-view] .activity-form textarea:focus {
  border-color: rgba(42, 69, 97, 0.42);
  box-shadow: 0 0 0 4px rgba(169, 195, 218, 0.14);
}

html body #app[data-view] .boundary-checkbox {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: flex-start;
  gap: 10px !important;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid rgba(168, 132, 74, 0.2);
  background: rgba(237, 229, 216, 0.38);
}

html body #app[data-view] .boundary-checkbox input {
  width: 18px;
  min-width: 18px;
  height: 18px;
  margin-top: 4px;
}

html body #app[data-view] .order-success-card {
  text-align: center;
}

html body #app[data-view] .order-success-card .actions,
html body #app[data-view] .activity-checkout-card .actions {
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  html body #app[data-view] .activity-checkout-card {
    width: min(100% - 28px, 100%);
    margin: 92px auto 48px;
    padding: 24px;
    border-radius: 26px;
  }
}

/* v39: compact creator/social labels and keep feature pages readable. */
html body #app[data-view] :is(
  .feature-page-hero h1,
  .profile-hero h1,
  .activities-hero h1,
  .observations-hero h1,
  .listening-progress-card h1,
  .activity-checkout-card h1,
  .creator-profile-view h1
) {
  font-size: clamp(24px, 2vw, 34px) !important;
  line-height: 1.18 !important;
  letter-spacing: 0.018em !important;
}

html body #app[data-view] :is(
  .profile-section h2,
  .creator-profile-view h2,
  .feature-page-view h2
) {
  font-size: clamp(18px, 1.1vw, 22px) !important;
  line-height: 1.25 !important;
  letter-spacing: 0.014em !important;
}

html body #app[data-view] .platform-signature.same-name-signature {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin-top: 14px !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(168, 132, 74, 0.24) !important;
  background: rgba(247, 243, 236, 0.72) !important;
  box-shadow: none !important;
}

html body #app[data-view] .platform-signature.same-name-signature span,
html body #app[data-view] .platform-signature.same-name-signature strong {
  display: inline !important;
  color: #2A4561 !important;
  -webkit-text-fill-color: #2A4561 !important;
  font-family: "YYFinalAlt", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: clamp(13px, 0.86vw, 15px) !important;
  line-height: 1.35 !important;
  letter-spacing: 0.025em !important;
  font-weight: 400 !important;
}

html body #app[data-view] .platform-signature.same-name-signature strong {
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: rgba(169, 195, 218, 0.18) !important;
  border: 1px solid rgba(106, 143, 168, 0.2) !important;
}