/* Homepage visual system for "阎言有关系". Loaded after styles.css on purpose. */
@font-face {
  font-family: "YanYanBrand";
  src:
    url("/assets/fonts/ShiShiRuYi-XiaoYaCiLi-2.ttf") format("truetype"),
    url("../fonts/ShiShiRuYi-XiaoYaCiLi-2.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: "YanYanInk";
  src:
    url("/assets/fonts/No.246-ShangShouBenMoTi-2.ttf") format("truetype"),
    url("../fonts/No.246-ShangShouBenMoTi-2.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

:root {
  --font-brand: "YanYanBrand", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-hand: "YanYanHand", cursive;
  --font-ink: "YanYanAlt", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-alt: "YanYanAlt", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: var(--font-brand);
}

body[data-view="library"] {
  --color-paper: #f7f3ec;
  --color-paper-warm: #f3eee6;
  --color-linen: #ede5d8;
  --color-mist-pink: #e8dedf;
  --color-soft-rose-gray: #ebd7d6;
  --color-mist-lavender: #d9d2dd;
  --color-soft-pink: #e9b9bf;
  --color-peach-pink: #f0c8c6;
  --color-lavender-gray: #bfafca;
  --color-dusty-lavender: #c7bdd4;
  --color-milk-yellow: #e7d36d;
  --color-soft-orange: #d98a4a;
  --color-apricot: #e8b69e;
  --color-cloud-blue: #a9c3da;
  --color-mineral-blue: #6a8fa8;
  --color-indigo-blue: #3d5f84;
  --color-deep-sea: #2a4561;
  --color-charcoal: #1e1a1a;
  --color-umber: #8a5b3d;
  --color-terracotta: #b45e3c;
  --color-antique-gold: #a8844a;
  --color-gold: #d8b949;
  --color-orange-gold: #e5a63a;
  --color-coral: #d86a52;
  --color-clear-blue: #5c88c8;
  --font-serif: var(--font-brand);
  --font-sans: var(--font-body);
  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 56px;
  --space-2xl: 88px;
  --space-3xl: 128px;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-full: 999px;
  --shadow-soft: 0 18px 50px rgba(42, 69, 97, 0.08);
  --shadow-card: 0 12px 36px rgba(30, 26, 26, 0.07);
  --shadow-hover: 0 22px 60px rgba(42, 69, 97, 0.13);
  --shadow-inner-paper: inset 0 0 40px rgba(255, 255, 255, 0.28);
  --border-light: 1px solid rgba(61, 95, 132, 0.16);
  --border-gold: 1px solid rgba(168, 132, 74, 0.22);
  --border-rose: 1px solid rgba(216, 106, 82, 0.16);
  --border-dark-soft: 1px solid rgba(30, 26, 26, 0.12);
  --motion-slow: 900ms;
  --motion-medium: 520ms;
  --motion-fast: 280ms;
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  background:
    radial-gradient(circle at 18% 8%, rgba(233, 185, 191, 0.2), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(169, 195, 218, 0.18), transparent 32%),
    radial-gradient(circle at 62% 92%, rgba(216, 106, 82, 0.09), transparent 28%),
    linear-gradient(180deg, var(--color-paper) 0%, var(--color-paper-warm) 100%);
  color: var(--color-charcoal);
}

body[data-view="library"]::before {
  content: "";
  position: fixed;
  z-index: 9999;
  inset: 0;
  pointer-events: none;
  opacity: 0.24;
  background-image: radial-gradient(rgba(30, 26, 26, 0.06) 0.6px, transparent 0.6px);
  background-size: 4px 4px;
  mix-blend-mode: multiply;
}

#app.surface[data-view="library"] {
  --home-ink: var(--color-charcoal);
  --home-muted: rgba(30, 26, 26, 0.68);
  --home-paper: var(--color-paper);
  --home-blue: var(--color-mineral-blue);
  --home-red: var(--color-terracotta);
  --home-gold: var(--color-antique-gold);
  --home-black: var(--color-deep-sea);
  --font-brand-title: var(--font-brand);
  --font-brand-body: var(--font-body);
  --font-brand-soft: var(--font-hand);
  max-width: 1180px;
  padding: clamp(22px, 4vw, 48px);
  border: var(--border-light);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 16% 18%, rgba(233, 185, 191, 0.17), transparent 24%),
    radial-gradient(circle at 88% 8%, rgba(169, 195, 218, 0.16), transparent 24%),
    radial-gradient(circle at 72% 72%, rgba(231, 211, 109, 0.10), transparent 21%),
    linear-gradient(180deg, rgba(247, 243, 236, 0.88), rgba(243, 238, 230, 0.92));
  box-shadow: var(--shadow-soft);
}

#app.surface[data-view="library"]::before {
  opacity: 0.15;
  background-image:
    radial-gradient(circle at 18px 18px, rgba(30, 26, 26, 0.12) 0.8px, transparent 1.2px),
    linear-gradient(90deg, rgba(61, 95, 132, 0.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(168, 132, 74, 0.045) 1px, transparent 1px);
  background-size: 52px 52px, 38px 38px, 38px 38px;
}

#app.surface[data-view="library"]::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: clamp(-90px, -8vw, -40px);
  top: 12%;
  width: clamp(260px, 34vw, 460px);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0.16;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 18%, rgba(168, 132, 74, 0.34) 19% 20%, transparent 21% 36%, rgba(61, 95, 132, 0.42) 37% 38%, transparent 39%),
    conic-gradient(from 90deg, rgba(216, 106, 82, 0.2), rgba(231, 211, 109, 0.18), rgba(169, 195, 218, 0.24), rgba(191, 175, 202, 0.2), rgba(216, 106, 82, 0.2));
  animation: gentlePulse 5600ms var(--ease-soft) infinite;
}

#app[data-view="library"] .library-view {
  position: relative;
  z-index: 1;
  gap: clamp(var(--space-xl), 7vw, var(--space-3xl));
  align-content: start;
  font-family: var(--font-sans);
}

#app[data-view="library"] .site-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: var(--border-light);
}

#app[data-view="library"] .wordmark {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--home-ink);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

#app[data-view="library"] .topbar-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#app[data-view="library"] .topbar-links a,
#app[data-view="library"] .topbar-links button {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  border: var(--border-light);
  border-radius: var(--radius-full);
  background: rgba(247, 243, 236, 0.72);
  color: var(--color-deep-sea);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition:
    transform var(--motion-medium) var(--ease-soft),
    background var(--motion-medium) var(--ease-soft),
    border-color var(--motion-medium) var(--ease-soft);
}

#app[data-view="library"] .topbar-links a:hover,
#app[data-view="library"] .topbar-links button:hover {
  transform: translateY(-2px);
  border-color: rgba(168, 132, 74, 0.34);
  background: rgba(233, 185, 191, 0.22);
}

#app[data-view="library"] .library-hero {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(420px, 1fr);
  gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
  align-items: stretch;
  max-width: none;
  min-height: min(74vh, 690px);
  padding: clamp(10px, 3vw, 26px) 0 0;
}

#app[data-view="library"] .hero-copy {
  display: grid;
  gap: var(--space-md);
  align-content: center;
  max-width: 540px;
}

#app[data-view="library"] .eyebrow {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-terracotta);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  opacity: 0.78;
}

#app[data-view="library"] h1 {
  max-width: none;
  color: var(--color-charcoal);
  font-family: var(--font-serif);
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.12;
  text-shadow: 0 12px 34px rgba(30, 26, 26, 0.07);
  white-space: nowrap;
}

#app[data-view="library"] h2,
#app[data-view="library"] h3,
#app[data-view="library"] .daily-card-copy h2,
#app[data-view="library"] .test-card h2,
#app[data-view="library"] .section-heading h2,
#app[data-view="library"] .creator-entry h2,
#app[data-view="library"] .reward-entry h2,
#app[data-view="library"] .profile-section h2 {
  color: var(--home-ink);
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

#app[data-view="library"] .hero-lead {
  max-width: 500px;
  color: var(--color-deep-sea);
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.65;
  white-space: nowrap;
}

#app[data-view="library"] .library-intro,
#app[data-view="library"] .section-heading p:not(.eyebrow),
#app[data-view="library"] .daily-card-copy p,
#app[data-view="library"] .test-card p,
#app[data-view="library"] .creator-entry p,
#app[data-view="library"] .reward-entry p,
#app[data-view="library"] .profile-section p {
  color: var(--home-muted);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.85;
}

#app[data-view="library"] .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-top: var(--space-xs);
}

#app[data-view="library"] .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 13px 24px;
  border: 1px solid rgba(42, 69, 97, 0.30);
  border-radius: var(--radius-full);
  background: var(--color-deep-sea);
  color: var(--color-paper);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(42, 69, 97, 0.16);
  transition:
    transform var(--motion-medium) var(--ease-soft),
    background var(--motion-medium) var(--ease-soft),
    box-shadow var(--motion-medium) var(--ease-soft),
    border-color var(--motion-medium) var(--ease-soft);
}

#app[data-view="library"] .button:hover {
  transform: translateY(-2px);
  background: var(--color-indigo-blue);
  box-shadow: 0 18px 40px rgba(42, 69, 97, 0.22);
}

#app[data-view="library"] .button.secondary {
  border: var(--border-light);
  background: rgba(247, 243, 236, 0.72);
  color: var(--color-deep-sea);
  box-shadow: none;
  backdrop-filter: blur(8px);
}

#app[data-view="library"] .button.secondary:hover {
  border-color: rgba(61, 95, 132, 0.28);
  background: rgba(233, 185, 191, 0.24);
}

#app[data-view="library"] .hilma-orbit {
  position: relative;
  overflow: hidden;
  display: block;
  min-height: 0;
  margin: 0;
  border: var(--border-gold);
  border-radius: var(--radius-xl);
  background: var(--color-paper);
  box-shadow: var(--shadow-soft);
}

#app[data-view="library"] .hilma-orbit::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 5%;
  pointer-events: none;
  border: 1px solid rgba(247, 243, 236, 0.72);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(247, 243, 236, 0.16), var(--shadow-inner-paper);
}

#app[data-view="library"] .hilma-orbit::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  pointer-events: none;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(247, 243, 236, 0.84) 14% 84%, transparent);
}

#app[data-view="library"] .hilma-orbit img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: min(74vh, 690px);
  object-fit: cover;
  object-position: 50% 44%;
}

#app[data-view="library"] .hilma-orbit figcaption {
  position: absolute;
  z-index: 3;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: end;
  color: #fffaf0;
  text-shadow: 0 2px 14px rgba(30, 26, 26, 0.52);
}

#app[data-view="library"] .hilma-orbit figcaption span {
  font-size: 13px;
  letter-spacing: 0.08em;
  opacity: 0.86;
}

#app[data-view="library"] .hilma-orbit figcaption strong {
  max-width: min(72%, 360px);
  text-align: right;
  font-family: var(--font-serif);
  font-size: clamp(23px, 3vw, 34px);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.08;
  white-space: nowrap;
}

#app[data-view="library"] .section-heading {
  gap: 8px;
  max-width: 760px;
}

#app[data-view="library"] .section-heading h2 {
  font-size: clamp(28px, 4vw, 46px);
}

#app[data-view="library"] .section-heading p:not(.eyebrow) {
  max-width: 720px;
}

#app[data-view="library"] .library-section {
  display: grid;
  gap: var(--space-lg);
}

#app[data-view="library"] .entry-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

#app[data-view="library"] .entry-card,
#app[data-view="library"] .observation-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 14px;
  align-content: start;
  min-height: 260px;
  padding: clamp(24px, 3vw, 34px);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 84% 12%, rgba(233, 185, 191, 0.22), transparent 34%),
    radial-gradient(circle at 16% 86%, rgba(169, 195, 218, 0.16), transparent 32%),
    rgba(247, 243, 236, 0.78);
  box-shadow: var(--shadow-card);
  transition:
    transform var(--motion-medium) var(--ease-soft),
    box-shadow var(--motion-medium) var(--ease-soft),
    border-color var(--motion-medium) var(--ease-soft);
}

#app[data-view="library"] .entry-card:hover,
#app[data-view="library"] .observation-card:hover {
  transform: translateY(-5px);
  border-color: rgba(168, 132, 74, 0.34);
  box-shadow: var(--shadow-hover);
}

#app[data-view="library"] .entry-card::after,
#app[data-view="library"] .observation-card::after {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 170px;
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0.14;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 20%, rgba(168, 132, 74, 0.42) 21% 22%, transparent 23% 42%, rgba(61, 95, 132, 0.44) 43% 44%, transparent 45%),
    conic-gradient(rgba(216, 106, 82, 0.18), rgba(231, 211, 109, 0.2), rgba(169, 195, 218, 0.22), rgba(216, 106, 82, 0.18));
}

#app[data-view="library"] .entry-card h3,
#app[data-view="library"] .observation-card h2,
#app[data-view="library"] .daily-reflection h2 {
  color: var(--home-ink);
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: 0.03em;
}

#app[data-view="library"] .entry-card p,
#app[data-view="library"] .observation-card p,
#app[data-view="library"] .observation-meta,
#app[data-view="library"] .daily-reflection p,
#app[data-view="library"] .home-disclaimer p,
#app[data-view="library"] .philosophy-copy p {
  color: var(--home-muted);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: 0.02em;
}

#app[data-view="library"] .entry-card-symbol {
  position: relative;
  width: 78px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(247, 243, 236, 0.72) 0 18%, transparent 19%),
    conic-gradient(from 180deg, rgba(233, 185, 191, 0.62), rgba(231, 211, 109, 0.52), rgba(169, 195, 218, 0.58), rgba(191, 175, 202, 0.56), rgba(233, 185, 191, 0.62));
  box-shadow: inset 0 0 0 1px rgba(168, 132, 74, 0.26);
}

#app[data-view="library"] .entry-card-symbol::before,
#app[data-view="library"] .entry-card-symbol::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(42, 69, 97, 0.36);
  border-radius: 50%;
}

#app[data-view="library"] .entry-card-symbol::after {
  inset: 34%;
  border-color: rgba(216, 106, 82, 0.32);
}

#app[data-view="library"] .philosophy-section {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(220px, 0.36fr) minmax(0, 0.64fr);
  gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
  align-items: center;
  padding: clamp(32px, 5vw, 64px);
  border: var(--border-rose);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 50% 36%, rgba(233, 185, 191, 0.20), transparent 38%),
    radial-gradient(circle at 72% 74%, rgba(169, 195, 218, 0.15), transparent 34%),
    rgba(247, 243, 236, 0.72);
  box-shadow: var(--shadow-soft);
}

#app[data-view="library"] .philosophy-motif {
  position: relative;
  min-height: 260px;
  border-radius: var(--radius-xl);
}

#app[data-view="library"] .philosophy-motif span {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(168, 132, 74, 0.28);
}

#app[data-view="library"] .philosophy-motif span:nth-child(1) {
  inset: 8%;
  background: rgba(233, 185, 191, 0.20);
}

#app[data-view="library"] .philosophy-motif span:nth-child(2) {
  inset: 25% 12% 14% 24%;
  background: rgba(169, 195, 218, 0.18);
}

#app[data-view="library"] .philosophy-motif span:nth-child(3) {
  left: 28%;
  bottom: 8%;
  width: 46%;
  aspect-ratio: 1;
  background:
    linear-gradient(135deg, rgba(216, 106, 82, 0.22), transparent),
    rgba(231, 211, 109, 0.22);
}

#app[data-view="library"] .philosophy-copy {
  display: grid;
  gap: 12px;
}

#app[data-view="library"] .category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#app[data-view="library"] .category-filter button {
  min-height: 34px;
  padding: 6px 13px;
  border: 1px solid rgba(61, 95, 132, 0.14);
  border-radius: var(--radius-full);
  background: rgba(247, 243, 236, 0.66);
  color: var(--color-deep-sea);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.03em;
  transition:
    transform var(--motion-fast) var(--ease-soft),
    background var(--motion-fast) var(--ease-soft),
    border-color var(--motion-fast) var(--ease-soft);
}

#app[data-view="library"] .category-filter button:hover,
#app[data-view="library"] .category-filter button.active {
  transform: translateY(-1px);
  border-color: rgba(168, 132, 74, 0.34);
  background: rgba(169, 195, 218, 0.20);
}

#app[data-view="library"] .library-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}

#app[data-view="library"] .test-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: 260px auto auto auto auto;
  gap: 14px;
  min-height: 0;
  padding: 0 0 26px;
  border: var(--border-light);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 85% 15%, rgba(233, 185, 191, 0.24), transparent 34%),
    radial-gradient(circle at 12% 90%, rgba(169, 195, 218, 0.18), transparent 36%),
    rgba(247, 243, 236, 0.76);
  box-shadow: var(--shadow-card);
  transition:
    transform 460ms var(--ease-soft),
    box-shadow 460ms var(--ease-soft),
    border-color 460ms var(--ease-soft);
}

#app[data-view="library"] .test-card:hover {
  transform: translateY(-5px);
  border-color: rgba(168, 132, 74, 0.34);
  box-shadow: var(--shadow-hover);
}

#app[data-view="library"] .test-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: -36px;
  top: 210px;
  width: 180px;
  height: 180px;
  pointer-events: none;
  opacity: 0.14;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 22%, rgba(168, 132, 74, 0.44) 23% 24%, transparent 25% 42%, rgba(61, 95, 132, 0.46) 43% 44%, transparent 45%),
    conic-gradient(rgba(216, 106, 82, 0.18), rgba(231, 211, 109, 0.2), rgba(169, 195, 218, 0.22), rgba(216, 106, 82, 0.18));
}

#app[data-view="library"] .test-card > *:not(.test-card-visual) {
  position: relative;
  z-index: 2;
  margin-inline: 24px;
}

#app[data-view="library"] .test-card-visual {
  position: relative;
  overflow: hidden;
  height: 260px;
  border-radius: var(--radius-lg) var(--radius-lg) 18px 18px;
  background: var(--color-deep-sea);
}

#app[data-view="library"] .test-card-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, transparent 0 24%, rgba(247, 243, 236, 0.24) 25% 26%, transparent 27%),
    linear-gradient(180deg, transparent 58%, rgba(30, 26, 26, 0.38));
}

#app[data-view="library"] .test-card-visual::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background: rgba(247, 243, 236, 0.70);
}

#app[data-view="library"] .test-card-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform var(--motion-slow) var(--ease-soft);
}

#app[data-view="library"] .test-card:hover .test-card-visual img {
  transform: scale(1.08);
}

#app[data-view="library"] .test-card-visual span {
  position: absolute;
  z-index: 3;
  left: 16px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(61, 95, 132, 0.14);
  border-radius: var(--radius-full);
  background: rgba(247, 243, 236, 0.76);
  color: var(--color-deep-sea);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

#app[data-view="library"] .test-card-visual span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-antique-gold);
  opacity: 0.75;
}

#app[data-view="library"] .test-card h2 {
  font-size: clamp(24px, 2.8vw, 34px);
}

#app[data-view="library"] .test-card.preview-only {
  opacity: 0.84;
}

#app[data-view="library"] .test-card-fit {
  font-size: 14px;
}

#app[data-view="library"] .test-card-top span,
#app[data-view="library"] .test-meta-row span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid rgba(61, 95, 132, 0.14);
  border-radius: var(--radius-full);
  background: rgba(169, 195, 218, 0.16);
  color: var(--color-deep-sea);
  font-size: 13px;
  letter-spacing: 0.03em;
}

#app[data-view="library"] .daily-card-entry {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(220px, 0.38fr) minmax(0, 1fr) auto;
  gap: 20px;
  align-items: stretch;
  min-height: 220px;
  padding: 0;
  border: var(--border-gold);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 50% 38%, rgba(231, 211, 109, 0.20), transparent 28%),
    radial-gradient(circle at 50% 50%, rgba(233, 185, 191, 0.24), transparent 42%),
    rgba(247, 243, 236, 0.82);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}

#app[data-view="library"] .daily-card-entry::before {
  content: "";
  position: absolute;
  right: 7%;
  top: 50%;
  width: min(240px, 36vw);
  aspect-ratio: 1;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0.2;
  transform: translateY(-50%);
  background:
    radial-gradient(circle, rgba(247, 243, 236, 0.2) 0 22%, rgba(168, 132, 74, 0.34) 23% 24%, transparent 25% 48%, rgba(216, 106, 82, 0.22) 49% 50%, transparent 51%),
    conic-gradient(from 180deg, rgba(233, 185, 191, 0.32), rgba(231, 211, 109, 0.26), rgba(169, 195, 218, 0.30), rgba(233, 185, 191, 0.32));
  transition: transform var(--motion-slow) var(--ease-soft), opacity var(--motion-slow) var(--ease-soft);
}

#app[data-view="library"] .daily-card-entry:hover::before {
  opacity: 0.32;
  transform: translateY(-50%) scale(1.04) rotate(3deg);
}

#app[data-view="library"] .daily-card-symbol {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  border-radius: var(--radius-xl) var(--radius-md) var(--radius-md) var(--radius-xl);
  background: var(--color-deep-sea);
}

#app[data-view="library"] .daily-card-symbol img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transform: scale(1.06);
}

#app[data-view="library"] .daily-card-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 8px;
  align-content: center;
  padding: 28px 0;
}

#app[data-view="library"] .daily-card-copy h2 {
  font-size: clamp(26px, 3.2vw, 38px);
}

#app[data-view="library"] .daily-card-entry > .button {
  position: relative;
  z-index: 2;
  align-self: center;
  margin-right: 26px;
}

#app[data-view="library"] .creator-entry,
#app[data-view="library"] .reward-entry,
#app[data-view="library"] .profile-section,
#app[data-view="library"] .daily-card-result {
  overflow: hidden;
  border: var(--border-light);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 86% 14%, rgba(169, 195, 218, 0.16), transparent 34%),
    radial-gradient(circle at 12% 86%, rgba(233, 185, 191, 0.18), transparent 34%),
    rgba(247, 243, 236, 0.76);
  box-shadow: var(--shadow-card);
}

#app[data-view="library"] .creator-entry h2,
#app[data-view="library"] .reward-entry h2,
#app[data-view="library"] .profile-section h2 {
  font-size: clamp(26px, 3.4vw, 42px);
}

#app[data-view="library"] .platform-signature {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  padding: 16px 0;
  border: 0;
  background: transparent;
}

#app[data-view="library"] .platform-signature-copy {
  display: grid;
  gap: 3px;
  min-width: max-content;
}

#app[data-view="library"] .platform-signature-copy strong {
  color: var(--home-ink);
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.03em;
}

#app[data-view="library"] .platform-signature-copy span {
  color: var(--home-muted);
  font-size: 12px;
  font-weight: 600;
}

#app[data-view="library"] .platform-signature:not(.compact) strong {
  font-family: var(--font-serif);
  font-size: clamp(30px, 4.2vw, 48px);
  font-weight: 500;
  line-height: 1.08;
}

#app[data-view="library"] .platform-logo {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(61, 95, 132, 0.12);
  border-radius: 50%;
  box-shadow: 0 8px 18px rgba(30, 26, 26, 0.08);
}

#app[data-view="library"] .daily-card-result {
  display: grid;
  grid-template-columns: minmax(220px, 0.45fr) minmax(0, 1fr);
  gap: clamp(18px, 4vw, 44px);
  align-items: center;
  max-width: 920px;
  padding: clamp(24px, 4vw, 48px);
}

#app[data-view="library"] .daily-reflection {
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  border: var(--border-gold);
  border-radius: var(--radius-md);
  background: rgba(247, 243, 236, 0.62);
}

#app[data-view="library"] .daily-reflection h2 {
  font-size: clamp(20px, 2vw, 26px);
}

#app[data-view="library"] .observations-view,
#app[data-view="library"] .creator-profile-view,
#app[data-view="library"] .daily-card-view {
  gap: clamp(var(--space-xl), 7vw, var(--space-2xl));
}

#app[data-view="library"] .observations-hero,
#app[data-view="library"] .profile-hero {
  display: grid;
  gap: 14px;
  max-width: 760px;
  padding-top: clamp(20px, 5vw, 48px);
}

#app[data-view="library"] .observations-hero p:not(.eyebrow),
#app[data-view="library"] .profile-hero p {
  color: var(--home-muted);
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.75;
}

#app[data-view="library"] .observation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

#app[data-view="library"] .observation-card {
  min-height: 340px;
}

#app[data-view="library"] .observation-symbol {
  width: 70px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(231, 211, 109, 0.36) 0 18%, transparent 19%),
    conic-gradient(from 160deg, rgba(180, 94, 60, 0.46), rgba(169, 195, 218, 0.40), rgba(191, 175, 202, 0.38), rgba(180, 94, 60, 0.46));
  box-shadow: inset 0 0 0 1px rgba(168, 132, 74, 0.24);
}

#app[data-view="library"] .observation-type {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 5px 10px;
  border: 1px solid rgba(61, 95, 132, 0.14);
  border-radius: var(--radius-full);
  background: rgba(169, 195, 218, 0.16);
  color: var(--color-deep-sea);
  font-size: 13px;
}

#app[data-view="library"] .observation-meta {
  display: grid;
  gap: 4px;
  margin-top: auto;
  font-size: 13px;
  opacity: 0.78;
}

#app[data-view="library"] .home-disclaimer {
  display: grid;
  gap: 6px;
  padding: clamp(20px, 3vw, 30px);
  border: var(--border-dark-soft);
  border-radius: var(--radius-lg);
  background: rgba(247, 243, 236, 0.56);
}

#app[data-view="library"] .daily-card-large-symbol {
  grid-row: 1 / 8;
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  background: var(--color-deep-sea);
}

#app[data-view="library"] .daily-card-large-symbol img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

#app[data-view="library"] .observation-page {
  width: min(980px, 100%);
  margin: 0 auto;
}

#app[data-view="library"] .observation-intro-card,
#app[data-view="library"] .observation-empty {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 12px;
  padding: clamp(24px, 4vw, 42px);
  border: var(--border-gold);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 86% 18%, rgba(233, 185, 191, 0.18), transparent 34%),
    radial-gradient(circle at 14% 88%, rgba(169, 195, 218, 0.16), transparent 38%),
    rgba(247, 243, 236, 0.74);
  box-shadow: var(--shadow-soft);
}

#app[data-view="library"] .observation-intro-card::after {
  content: "";
  position: absolute;
  right: clamp(-90px, -9vw, -42px);
  top: clamp(-100px, -8vw, -48px);
  width: clamp(190px, 26vw, 320px);
  aspect-ratio: 1;
  border: 1px solid rgba(168, 132, 74, 0.18);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(247, 243, 236, 0.42) 0 16%, transparent 17%),
    conic-gradient(from 180deg, rgba(233, 185, 191, 0.16), rgba(231, 211, 109, 0.14), rgba(169, 195, 218, 0.16), rgba(191, 175, 202, 0.16), rgba(233, 185, 191, 0.16));
  opacity: 0.8;
  pointer-events: none;
}

#app[data-view="library"] .observation-intro-card h1,
#app[data-view="library"] .observation-empty h1 {
  max-width: 13em;
  color: var(--color-deep-sea);
  font-family: var(--font-brand);
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.18;
  text-wrap: balance;
}

#app[data-view="library"] .observation-intro-card p:not(.eyebrow),
#app[data-view="library"] .observation-empty p {
  max-width: 680px;
  color: var(--home-muted);
  font-family: var(--font-body);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.82;
}

#app[data-view="library"] .observation-card-result {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: clamp(16px, 3vw, 28px);
  align-items: center;
  width: min(820px, 100%);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 52px);
  border: var(--border-gold);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 78% 18%, rgba(231, 211, 109, 0.16), transparent 30%),
    radial-gradient(circle at 10% 88%, rgba(233, 185, 191, 0.18), transparent 34%),
    rgba(247, 243, 236, 0.82);
  box-shadow: var(--shadow-soft);
}

#app[data-view="library"] .observation-number {
  margin: -2px 0 6px;
  color: var(--color-antique-gold);
  font-family: var(--font-ink);
  font-size: 15px;
  letter-spacing: 0.08em;
}

#app[data-view="library"] .observation-arrived-note {
  width: fit-content;
  max-width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(61, 95, 132, 0.16);
  border-radius: var(--radius-full);
  background: rgba(169, 195, 218, 0.12);
  color: var(--color-deep-sea);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
}

#app[data-view="library"] .observation-text-card {
  display: grid;
  gap: 14px;
  max-width: 560px;
}

#app[data-view="library"] .observation-card-image_projection .observation-text-card,
#app[data-view="library"] .observation-card-image_projection .observation-projection-card {
  justify-self: center;
}

#app[data-view="library"] .observation-text-card h1 {
  color: var(--color-deep-sea);
  font-family: var(--font-brand);
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.16;
  text-wrap: balance;
}

#app[data-view="library"] .observation-main-text {
  color: var(--home-ink);
  font-weight: 500;
  text-wrap: pretty;
}

#app[data-view="library"] .observation-main-text.original {
  font-family: var(--font-hand);
  font-size: clamp(26px, 4.4vw, 42px);
  letter-spacing: 0.04em;
  line-height: 1.62;
}

#app[data-view="library"] .observation-main-text.quote {
  font-family: var(--font-brand);
  font-size: clamp(25px, 3.6vw, 38px);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.54;
}

#app[data-view="library"] .observation-source {
  color: var(--color-umber);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
}

#app[data-view="library"] .observation-projection-card {
  display: grid;
  place-items: center;
  width: min(460px, 100%);
  aspect-ratio: 1;
  border: var(--border-gold);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(247, 243, 236, 0.84) 0 34%, rgba(247, 243, 236, 0.42) 58%, transparent 72%),
    conic-gradient(from 180deg, rgba(233, 185, 191, 0.26), rgba(231, 211, 109, 0.22), rgba(169, 195, 218, 0.28), rgba(191, 175, 202, 0.24), rgba(233, 185, 191, 0.26));
  box-shadow: var(--shadow-inner-paper);
}

#app[data-view="library"] .observation-projection {
  --motif-deep: rgba(42, 69, 97, 0.56);
  --motif-soft: rgba(169, 195, 218, 0.42);
  --motif-warm: rgba(168, 132, 74, 0.34);
  --motif-rose: rgba(216, 106, 82, 0.26);
  position: relative;
  width: min(340px, 78vw);
  aspect-ratio: 1;
}

#app[data-view="library"] .observation-projection.watermark {
  width: 86%;
  opacity: 0.42;
  transform: rotate(-8deg);
}

#app[data-view="library"] .observation-projection.tone-red,
#app[data-view="library"] .observation-projection.tone-orange {
  --motif-deep: rgba(180, 94, 60, 0.52);
  --motif-soft: rgba(233, 185, 191, 0.42);
  --motif-warm: rgba(216, 185, 73, 0.34);
}

#app[data-view="library"] .observation-projection.tone-green {
  --motif-deep: rgba(94, 126, 105, 0.52);
  --motif-soft: rgba(169, 195, 218, 0.38);
}

#app[data-view="library"] .observation-projection.tone-violet,
#app[data-view="library"] .observation-projection.tone-indigo {
  --motif-deep: rgba(61, 95, 132, 0.56);
  --motif-soft: rgba(191, 175, 202, 0.42);
  --motif-rose: rgba(233, 185, 191, 0.28);
}

#app[data-view="library"] .observation-projection span {
  position: absolute;
  display: block;
  pointer-events: none;
}

#app[data-view="library"] .projection-circle {
  inset: 12%;
  border: 1.4px solid var(--motif-deep);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(247, 243, 236, 0.34) 0 12%, transparent 13%);
}

#app[data-view="library"] .projection-ring {
  inset: 24%;
  border: 1px solid var(--motif-warm);
  border-radius: 50%;
}

#app[data-view="library"] .projection-ring.ring-b {
  inset: 34%;
  border-color: var(--motif-soft);
}

#app[data-view="library"] .projection-axis {
  top: 4%;
  bottom: 4%;
  left: calc(50% - 0.5px);
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--motif-warm), var(--motif-deep), transparent);
}

#app[data-view="library"] .projection-petal {
  width: 38%;
  height: 64%;
  left: 31%;
  top: 18%;
  border: 1px solid var(--motif-rose);
  border-radius: 50% 50% 46% 46%;
  background: rgba(233, 185, 191, 0.12);
  transform-origin: 50% 50%;
}

#app[data-view="library"] .projection-petal.petal-a {
  transform: rotate(42deg);
}

#app[data-view="library"] .projection-petal.petal-b {
  transform: rotate(-42deg);
}

#app[data-view="library"] .projection-seed {
  width: 28%;
  height: 52%;
  left: 36%;
  top: 24%;
  border: 1.2px solid var(--motif-deep);
  border-radius: 50% 50% 48% 48% / 64% 64% 36% 36%;
  background: rgba(247, 243, 236, 0.22);
}

#app[data-view="library"] .projection-overlap {
  width: 46%;
  height: 58%;
  top: 22%;
  border: 1px solid var(--motif-soft);
  border-radius: 50%;
  background: rgba(169, 195, 218, 0.12);
}

#app[data-view="library"] .projection-overlap.overlap-a {
  left: 19%;
}

#app[data-view="library"] .projection-overlap.overlap-b {
  right: 19%;
  background: rgba(233, 185, 191, 0.12);
}

#app[data-view="library"] .projection-spiral {
  inset: 30%;
  border: 1.2px solid var(--motif-deep);
  border-left-color: transparent;
  border-bottom-color: var(--motif-warm);
  border-radius: 50%;
  transform: rotate(28deg);
}

#app[data-view="library"] .projection-spiral::after {
  content: "";
  position: absolute;
  inset: 24%;
  border: 1px solid var(--motif-soft);
  border-right-color: transparent;
  border-radius: 50%;
}

#app[data-view="library"] .projection-spectrum {
  left: 14%;
  right: 14%;
  bottom: 13%;
  height: 23%;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: conic-gradient(from 240deg, rgba(180, 94, 60, 0.42), rgba(231, 211, 109, 0.42), rgba(169, 195, 218, 0.44), rgba(61, 95, 132, 0.46), rgba(180, 94, 60, 0.42));
  opacity: 0.82;
}

#app[data-view="library"] .projection-triangle {
  left: 36%;
  top: 48%;
  width: 28%;
  height: 30%;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  background: rgba(168, 132, 74, 0.18);
  border: 1px solid rgba(42, 69, 97, 0.22);
}

#app[data-view="library"] .projection-rays {
  inset: 13%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, transparent 0 8deg, rgba(168, 132, 74, 0.18) 9deg 10deg);
  -webkit-mask: radial-gradient(circle, transparent 0 38%, #000 39% 70%, transparent 71%);
  mask: radial-gradient(circle, transparent 0 38%, #000 39% 70%, transparent 71%);
}

#app[data-view="library"] .projection-stitches {
  left: 50%;
  top: 6%;
  width: 1px;
  height: 88%;
  background: repeating-linear-gradient(180deg, var(--motif-deep) 0 3px, transparent 3px 10px);
  transform: translateX(-50%) rotate(8deg);
  opacity: 0.7;
}

#app[data-view="library"] .projection-node {
  width: 10px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--motif-warm);
  box-shadow: 0 0 0 7px rgba(247, 243, 236, 0.52);
}

#app[data-view="library"] .projection-node.node-a {
  left: 48%;
  top: 12%;
}

#app[data-view="library"] .projection-node.node-b {
  right: 20%;
  top: 58%;
}

#app[data-view="library"] .projection-node.node-c {
  left: 22%;
  bottom: 20%;
}

#app[data-view="library"] .observation-prompt {
  max-width: 560px;
  border-color: rgba(168, 132, 74, 0.2);
  background: rgba(247, 243, 236, 0.58);
}

#app[data-view="library"] .observation-prompt h2 {
  color: var(--color-umber);
  font-family: var(--font-ink);
  font-size: 17px;
  letter-spacing: 0.06em;
}

#app[data-view="library"] .observation-echo-section {
  display: grid;
  gap: 20px;
  width: min(920px, 100%);
  margin: 0 auto;
}

#app[data-view="library"] .observation-echo-section .section-heading {
  max-width: 720px;
}

#app[data-view="library"] .echo-form-card,
#app[data-view="library"] .echo-list-card,
#app[data-view="library"] .echo-card {
  position: relative;
  overflow: hidden;
  border: var(--border-light);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 96% 0%, rgba(169, 195, 218, 0.13), transparent 28%),
    rgba(247, 243, 236, 0.72);
  box-shadow: var(--shadow-card);
}

#app[data-view="library"] .echo-form-card,
#app[data-view="library"] .echo-list-card {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 3vw, 32px);
}

#app[data-view="library"] .observation-echo-input {
  width: 100%;
  resize: vertical;
  min-height: 132px;
  padding: 16px 18px;
  border: 1px solid rgba(61, 95, 132, 0.16);
  border-radius: var(--radius-md);
  background: rgba(247, 243, 236, 0.82);
  color: var(--home-ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.75;
  outline: none;
  transition: border-color 260ms ease, box-shadow 260ms ease;
}

#app[data-view="library"] .observation-echo-input:focus {
  border-color: rgba(42, 69, 97, 0.34);
  box-shadow: 0 0 0 4px rgba(169, 195, 218, 0.14);
}

#app[data-view="library"] .echo-public-option {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--home-muted);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
}

#app[data-view="library"] .echo-public-option input {
  margin-top: 5px;
  accent-color: var(--color-deep-sea);
}

#app[data-view="library"] .echo-notice {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(61, 95, 132, 0.16);
  background: rgba(169, 195, 218, 0.14);
  color: var(--color-deep-sea);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
}

#app[data-view="library"] .echo-notice.warning {
  border-color: rgba(180, 94, 60, 0.18);
  background: rgba(233, 185, 191, 0.18);
  color: var(--color-umber);
}

#app[data-view="library"] .echo-list-header,
#app[data-view="library"] .echo-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  color: var(--color-mineral-blue);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

#app[data-view="library"] .echo-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  box-shadow: none;
}

#app[data-view="library"] .echo-card p,
#app[data-view="library"] .echo-empty {
  color: var(--home-muted);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.82;
}

#app[data-view="library"] .echo-featured {
  width: fit-content;
  padding: 5px 10px;
  border: 1px solid rgba(168, 132, 74, 0.24);
  border-radius: var(--radius-full);
  background: rgba(216, 185, 73, 0.14);
  color: var(--color-umber);
  font-family: var(--font-ink);
  font-size: 13px;
  letter-spacing: 0.06em;
}

#app[data-view="library"] .echo-creator-note {
  padding: 12px 14px;
  border-left: 2px solid rgba(168, 132, 74, 0.34);
  border-radius: var(--radius-sm);
  background: rgba(237, 229, 216, 0.52);
  color: var(--home-muted);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.72;
}

@keyframes gentlePulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.16;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.28;
  }
}

@media (max-width: 900px) {
  #app.surface[data-view="library"] {
    border-radius: var(--radius-lg);
  }

  #app[data-view="library"] .library-hero,
  #app[data-view="library"] .library-grid,
  #app[data-view="library"] .entry-card-grid,
  #app[data-view="library"] .philosophy-section,
  #app[data-view="library"] .observation-grid,
  #app[data-view="library"] .daily-card-entry,
  #app[data-view="library"] .creator-entry,
  #app[data-view="library"] .reward-entry,
  #app[data-view="library"] .daily-card-result {
    grid-template-columns: 1fr;
  }

  #app[data-view="library"] .hilma-orbit {
    order: -1;
  }

  #app[data-view="library"] .hilma-orbit img {
    min-height: 360px;
  }

  #app[data-view="library"] .daily-card-symbol {
    border-radius: var(--radius-xl) var(--radius-xl) var(--radius-md) var(--radius-md);
  }

  #app[data-view="library"] .daily-card-entry > .button {
    justify-self: start;
    margin: 0 24px 24px;
  }

  #app[data-view="library"] .daily-card-large-symbol {
    grid-row: auto;
  }
}

/* 2026-06-09: typography lock v20-final
   Scope: all feature pages. Purpose: remove leftover Songti/system serif drift,
   unify title sizes, and keep card copy inside its own paper surface. */
@font-face {
  font-family: "YanYanBrandFinal";
  src: url("../fonts/ShiShiRuYi-XiaoYaCiLi-2.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

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

:root,
body,
#app,
#app[data-view] {
  --font-brand: "YanYanBrandFinal", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-hand: "YanYanHandFinal", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-alt: "YanYanAltFinal", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: var(--font-brand);
  --font-sans: var(--font-brand);
  --font-serif: var(--font-brand);
  --font-display: var(--font-brand);
  --font-brand-title: var(--font-hand);
  --font-brand-body: var(--font-brand);
  --font-brand-soft: var(--font-hand);

  --type-brand-title: clamp(36px, 4.6vw, 64px);
  --type-page-title: clamp(26px, 2.15vw, 38px);
  --type-section-title: clamp(22px, 1.65vw, 30px);
  --type-card-title: clamp(23px, 1.55vw, 30px);
  --type-feature-title: clamp(28px, 2.55vw, 46px);
  --type-body: clamp(14px, 0.98vw, 16px);
  --type-button: clamp(13px, 0.94vw, 15px);
  --type-label: clamp(10.5px, 0.72vw, 12px);
  --type-emotion: clamp(25px, 2.25vw, 38px);
}

body,
#app,
#app[data-view],
#app[data-view] * {
  font-family: var(--font-brand) !important;
  font-weight: 400 !important;
  letter-spacing: 0.018em;
}

#app[data-view] :is(.brand-title, .site-brand-title, .home-brand-title) {
  font-family: var(--font-hand) !important;
  font-size: var(--type-brand-title) !important;
  line-height: 1.08 !important;
  letter-spacing: 0.045em !important;
}

#app[data-view] :is(
  h1,
  .page-title,
  .activities-hero h1,
  .observations-hero h1,
  .profile-hero h1,
  .listening-progress-card h1,
  .observation-empty h1
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-page-title) !important;
  line-height: 1.18 !important;
  letter-spacing: 0.026em !important;
  text-wrap: balance;
}

#app[data-view] :is(
  h2,
  .section-heading h2,
  .profile-section h2,
  .observation-intro-card h2,
  .home-disclaimer h2
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-section-title) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.024em !important;
  text-wrap: balance;
}

#app[data-view] :is(
  .test-card h2,
  .activity-card h3,
  .event-card h3,
  .observation-card h2,
  .feature-page-card h2
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-card-title) !important;
  line-height: 1.22 !important;
  letter-spacing: 0.018em !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: hidden !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  text-wrap: balance;
}

#app[data-view="home"] :is(.feature-node h2, .feature-node-title) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-feature-title) !important;
  line-height: 1.08 !important;
  letter-spacing: 0.018em !important;
}

#app[data-view] :is(
  p,
  li,
  dd,
  dt,
  span,
  input,
  textarea,
  select,
  label,
  .section-heading p,
  .test-card p,
  .activity-card p,
  .event-card p,
  .observation-card p,
  .profile-section p,
  .listening-boundary
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-body) !important;
  line-height: 1.62 !important;
  letter-spacing: 0.012em !important;
}

#app[data-view] :is(
  button,
  .button,
  .floating-function-dock button,
  .nav-link,
  .page-nav span
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-button) !important;
  line-height: 1.12 !important;
  letter-spacing: 0.018em !important;
}

#app[data-view] :is(
  .eyebrow,
  .tag,
  .pill,
  .pill-tag,
  .soft-tag,
  .platform-pill,
  .status-pill,
  .price-pill,
  .activity-type,
  .activity-status,
  .event-type,
  .test-card-tags,
  .test-card .tag,
  .test-card .pill,
  .test-card-top span,
  .test-card-visual span,
  .test-meta-row,
  .test-card-meta,
  .test-video-chip,
  .observation-type,
  .observation-number,
  .observation-source,
  .result-count-badge,
  .same-result-badge,
  .option-key,
  .tiny-label,
  .seal-label
) {
  font-family: var(--font-alt) !important;
  font-size: var(--type-label) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.035em !important;
}

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

#app[data-view] .observation-main-text.quote {
  font-family: var(--font-brand) !important;
  font-size: clamp(20px, 1.45vw, 28px) !important;
  line-height: 1.48 !important;
}

#app[data-view] :is(
  .feature-page-hero,
  .tests-page-view .section-heading,
  .activities-hero,
  .observations-hero,
  .observation-hero,
  .creator-profile-view > section:first-child,
  .listening-progress-card,
  .observation-card-result
) {
  padding-block: clamp(18px, 2.4vw, 34px) !important;
}

#app[data-view="library"] .recommended-tests .section-heading {
  display: grid !important;
  grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 1fr);
  gap: clamp(18px, 3vw, 44px);
  align-items: start;
  margin-bottom: clamp(20px, 3vw, 40px) !important;
}

#app[data-view="library"] .recommended-tests .section-heading h2 {
  font-size: clamp(24px, 2vw, 34px) !important;
}

#app[data-view="library"] .recommended-tests .section-heading p {
  max-width: 42em;
}

#app[data-view="library"] .testing-progress-panel {
  padding: clamp(18px, 2.4vw, 30px) clamp(22px, 3vw, 42px) !important;
}

#app[data-view="library"] .testing-progress-panel h2 {
  font-size: clamp(22px, 1.85vw, 32px) !important;
  line-height: 1.18 !important;
}

#app[data-view="library"] .library-grid {
  align-items: stretch;
}

#app[data-view="library"] .recommended-tests .test-card,
#app[data-view="library"] .test-card {
  display: flex !important;
  flex-direction: column;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: clamp(24px, 3vw, 38px) !important;
}

#app[data-view="library"] .test-card-visual {
  min-height: clamp(118px, 11vw, 170px) !important;
}

#app[data-view="library"] .test-card h2 {
  font-size: clamp(24px, 1.72vw, 32px) !important;
  max-width: calc(100% - 2px) !important;
}

#app[data-view="library"] .test-card p {
  max-width: 100% !important;
}

#app[data-view="library"] .test-card-actions {
  margin-top: auto !important;
}

#app[data-view] :is(.background-motifs, .motif, .abstract-motif, svg[aria-hidden="true"]) {
  pointer-events: none !important;
}

@media (max-width: 900px) {
  :root,
  body,
  #app,
  #app[data-view] {
    --type-brand-title: clamp(32px, 8vw, 44px);
    --type-page-title: clamp(24px, 5.6vw, 32px);
    --type-section-title: clamp(21px, 5vw, 27px);
    --type-card-title: clamp(21px, 5vw, 27px);
    --type-feature-title: clamp(24px, 6vw, 33px);
    --type-body: 14px;
    --type-button: 13px;
    --type-label: 10.5px;
    --type-emotion: clamp(24px, 6.4vw, 32px);
  }

  #app[data-view="library"] .recommended-tests .section-heading {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #app[data-view="library"] .test-card h2 {
    font-size: clamp(23px, 6vw, 30px) !important;
  }
}

/* 2026-06-09: typography lock v19
   Final visible font system: no Songti/system serif in the UI. Keep this last. */
:root,
body,
#app,
#app[data-view] {
  --font-brand: "YanYanBrand", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-hand: "YanYanHand", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-alt: "YanYanAlt", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-ink: var(--font-alt);
  --font-body: var(--font-brand);
  --font-serif: var(--font-brand);
  --font-sans: var(--font-brand);
  --font-brand-title: var(--font-hand);
  --font-brand-body: var(--font-brand);
  --font-brand-soft: var(--font-hand);

  --type-brand-title: clamp(34px, 3.8vw, 52px);
  --type-page-title: clamp(24px, 1.82vw, 32px);
  --type-section-title: clamp(19px, 1.35vw, 25px);
  --type-card-title: clamp(20px, 1.38vw, 26px);
  --type-feature-title: clamp(23px, 1.75vw, 32px);
  --type-body: clamp(13.5px, 0.92vw, 15px);
  --type-small: clamp(11.5px, 0.78vw, 13px);
  --type-button: clamp(12px, 0.82vw, 13.5px);
  --type-label: clamp(10px, 0.72vw, 11.5px);
  --type-emotion: clamp(24px, 1.95vw, 34px);
}

body,
#app,
#app[data-view],
#app[data-view] * {
  font-family: var(--font-brand) !important;
  font-weight: 400 !important;
}

#app[data-view] :is(
  .brand-title,
  .brand-wordmark,
  .home-brand-title,
  .wordmark-main,
  [data-brand-title]
) {
  font-family: var(--font-hand) !important;
  font-size: var(--type-brand-title) !important;
  line-height: 1.06 !important;
  letter-spacing: 0.045em !important;
}

#app[data-view] :is(
  h1,
  .page-title,
  .view-title,
  .feature-page-hero h1,
  .tests-page-view h1,
  .activities-hero h1,
  .observations-hero h1,
  .observation-page h1,
  .observation-card-result h1,
  .listening-progress-card h1,
  .creator-profile-view h1,
  .activity-detail h1
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-page-title) !important;
  line-height: 1.14 !important;
  letter-spacing: 0.034em !important;
  color: var(--color-deep-sea) !important;
  margin-block: 0 10px !important;
  text-wrap: balance;
}

#app[data-view] :is(
  h2,
  .section-title,
  .section-heading h2,
  .library-section > h2,
  .observation-section h2,
  .activity-section h2,
  .listening-section h2,
  .profile-section h2,
  .admin-section h2
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-section-title) !important;
  line-height: 1.18 !important;
  letter-spacing: 0.028em !important;
  color: var(--color-deep-sea) !important;
  margin-block: 0 8px !important;
}

#app[data-view] :is(
  .feature-node strong,
  .feature-node-title,
  .test-card h2,
  .test-card h3,
  .test-card-title,
  .activity-card h2,
  .activity-card h3,
  .event-card h3,
  .observation-card h2,
  .observation-card h3,
  .listening-card h2,
  .listening-card h3
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-card-title) !important;
  line-height: 1.18 !important;
  letter-spacing: 0.028em !important;
  color: var(--color-deep-sea) !important;
  margin-block: 0 10px !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

#app[data-view] :is(
  .home-star-hero .feature-node strong,
  .home-star-hero .feature-node-title
) {
  font-size: var(--type-feature-title) !important;
  line-height: 1.08 !important;
}

#app[data-view] :is(
  p,
  li,
  dd,
  dt,
  em,
  .page-copy,
  .section-copy,
  .feature-node p,
  .feature-node em,
  .section-heading p,
  .feature-page-hero p,
  .test-card p,
  .test-card dd,
  .test-card-fit,
  .question-body,
  .result-copy,
  .activity-card p,
  .activity-card dd,
  .activity-card li,
  .event-card p,
  .event-card dd,
  .observation-card p,
  .observation-arrived-note,
  .listening-progress-card p,
  .listening-boundary,
  .creator-profile-view p,
  .profile-copy
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-body) !important;
  line-height: 1.62 !important;
  letter-spacing: 0.014em !important;
  color: rgba(30, 26, 26, 0.76) !important;
}

#app[data-view] :is(
  button,
  .button,
  .btn,
  .primary-button,
  .secondary-button,
  .feature-node b,
  .feature-node-button,
  .feature-button,
  .test-card .button,
  .activity-card .button,
  .event-card .button,
  .floating-function-dock button,
  .nav-link,
  input,
  textarea,
  select,
  label
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-button) !important;
  line-height: 1.16 !important;
  letter-spacing: 0.018em !important;
  white-space: normal;
}

#app[data-view] :is(
  .eyebrow,
  .tag,
  .pill,
  .pill-tag,
  .soft-tag,
  .platform-pill,
  .status-pill,
  .price-pill,
  .activity-type,
  .activity-status,
  .event-type,
  .test-card-tags,
  .test-card .tag,
  .test-card .pill,
  .test-card-top span,
  .test-card-visual span,
  .test-meta-row,
  .test-card-meta,
  .observation-type,
  .observation-number,
  .observation-source,
  .result-count-badge,
  .same-result-badge,
  .option-key,
  .tiny-label,
  .seal-label
) {
  font-family: var(--font-alt) !important;
  font-size: var(--type-label) !important;
  line-height: 1.22 !important;
  letter-spacing: 0.04em !important;
}

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

#app[data-view] .observation-main-text.quote {
  font-family: var(--font-brand) !important;
  font-size: clamp(20px, 1.42vw, 27px) !important;
  line-height: 1.46 !important;
}

#app[data-view] :is(
  .feature-page-hero,
  .tests-page-view .section-heading,
  .activities-hero,
  .observations-hero,
  .observation-hero,
  .creator-profile-view > section:first-child,
  .listening-progress-card,
  .observation-card-result
) {
  min-height: auto !important;
  padding-block: clamp(20px, 3vw, 38px) !important;
}

#app[data-view] :is(
  .test-card,
  .activity-card,
  .event-card,
  .observation-card,
  .listening-progress-card,
  .observation-card-result,
  .feature-node
) {
  min-width: 0 !important;
  overflow: hidden !important;
}

#app[data-view] :is(
  .test-card *,
  .activity-card *,
  .event-card *,
  .observation-card *,
  .listening-progress-card *,
  .feature-node *
) {
  max-width: 100% !important;
  min-width: 0 !important;
}

#app[data-view="library"] .testing-progress-panel {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 440px) !important;
  align-items: center !important;
  padding: clamp(20px, 2.8vw, 34px) clamp(24px, 3.8vw, 48px) !important;
}

#app[data-view="library"] .testing-progress-panel h2 {
  font-size: var(--type-section-title) !important;
}

#app[data-view="library"] .recommended-tests .test-card,
#app[data-view="library"] .test-card {
  padding: clamp(24px, 3vw, 38px) !important;
}

#app[data-view="library"] .recommended-tests .test-card h2,
#app[data-view="library"] .test-card h2 {
  font-size: clamp(21px, 1.48vw, 27px) !important;
  line-height: 1.18 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

#app[data-view="activities"] .event-card h3,
#app[data-view="activities"] .activity-card h3 {
  font-size: clamp(22px, 1.42vw, 27px) !important;
  line-height: 1.2 !important;
}

#app[data-view] :is(.background-motifs, .motif, .abstract-motif, svg[aria-hidden="true"]) {
  pointer-events: none !important;
}

@media (max-width: 900px) {
  :root,
  body,
  #app,
  #app[data-view] {
    --type-brand-title: clamp(30px, 8vw, 42px);
    --type-page-title: clamp(22px, 5.4vw, 30px);
    --type-section-title: clamp(19px, 4.8vw, 24px);
    --type-card-title: clamp(19px, 4.7vw, 24px);
    --type-feature-title: clamp(22px, 5.2vw, 29px);
    --type-body: 13.5px;
    --type-button: 12px;
    --type-label: 10.5px;
    --type-emotion: clamp(22px, 5.8vw, 30px);
  }

  #app[data-view] :is(
    .feature-page-hero,
    .tests-page-view .section-heading,
    .activities-hero,
    .observations-hero,
    .observation-hero,
    .creator-profile-view > section:first-child,
    .listening-progress-card,
    .observation-card-result
  ) {
    padding-block: 20px !important;
  }

  #app[data-view="library"] .testing-progress-panel {
    grid-template-columns: 1fr !important;
    padding: 20px !important;
  }

  #app[data-view="library"] .recommended-tests .test-card,
  #app[data-view="library"] .test-card {
    padding: 22px !important;
  }
}

/* 2026-06-09: typography lock v21-absolute-end
   This block is intentionally placed at the physical end of the file. */
@font-face {
  font-family: "YanYanBrandFinal";
  src: url("../fonts/ShiShiRuYi-XiaoYaCiLi-2.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

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

:root,
body,
#app,
#app[data-view] {
  --font-brand: "YanYanBrandFinal", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-hand: "YanYanHandFinal", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-alt: "YanYanAltFinal", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-ink: var(--font-alt);
  --font-body: var(--font-brand);
  --font-sans: var(--font-brand);
  --font-serif: var(--font-brand);
  --font-display: var(--font-brand);
  --font-brand-title: var(--font-hand);
  --font-brand-body: var(--font-brand);
  --font-brand-soft: var(--font-hand);

  --type-brand-title: clamp(36px, 4.6vw, 64px);
  --type-page-title: clamp(26px, 2.15vw, 38px);
  --type-section-title: clamp(22px, 1.65vw, 30px);
  --type-card-title: clamp(23px, 1.55vw, 30px);
  --type-feature-title: clamp(28px, 2.55vw, 46px);
  --type-body: clamp(14px, 0.98vw, 16px);
  --type-button: clamp(13px, 0.94vw, 15px);
  --type-label: clamp(10.5px, 0.72vw, 12px);
  --type-emotion: clamp(25px, 2.25vw, 38px);
}

body,
#app,
#app[data-view],
#app[data-view] * {
  font-family: var(--font-brand) !important;
  font-weight: 400 !important;
  letter-spacing: 0.018em;
}

#app[data-view] :is(.brand-title, .site-brand-title, .home-brand-title) {
  font-family: var(--font-hand) !important;
  font-size: var(--type-brand-title) !important;
  line-height: 1.08 !important;
  letter-spacing: 0.045em !important;
}

#app[data-view] :is(
  h1,
  .page-title,
  .activities-hero h1,
  .observations-hero h1,
  .profile-hero h1,
  .listening-progress-card h1,
  .observation-empty h1
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-page-title) !important;
  line-height: 1.18 !important;
  letter-spacing: 0.026em !important;
  text-wrap: balance;
}

#app[data-view] :is(
  h2,
  .section-heading h2,
  .profile-section h2,
  .observation-intro-card h2,
  .home-disclaimer h2
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-section-title) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.024em !important;
  text-wrap: balance;
}

#app[data-view] :is(
  .test-card h2,
  .activity-card h3,
  .event-card h3,
  .observation-card h2,
  .feature-page-card h2
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-card-title) !important;
  line-height: 1.22 !important;
  letter-spacing: 0.018em !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: hidden !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  text-wrap: balance;
}

#app[data-view="home"] :is(.feature-node h2, .feature-node-title) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-feature-title) !important;
  line-height: 1.08 !important;
  letter-spacing: 0.018em !important;
}

#app[data-view] :is(
  p,
  li,
  dd,
  dt,
  span,
  input,
  textarea,
  select,
  label,
  .section-heading p,
  .test-card p,
  .activity-card p,
  .event-card p,
  .observation-card p,
  .profile-section p,
  .listening-boundary
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-body) !important;
  line-height: 1.62 !important;
  letter-spacing: 0.012em !important;
}

#app[data-view] :is(
  button,
  .button,
  .floating-function-dock button,
  .nav-link,
  .page-nav span
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-button) !important;
  line-height: 1.12 !important;
  letter-spacing: 0.018em !important;
}

#app[data-view] :is(
  .eyebrow,
  .tag,
  .pill,
  .pill-tag,
  .soft-tag,
  .platform-pill,
  .status-pill,
  .price-pill,
  .activity-type,
  .activity-status,
  .event-type,
  .test-card-tags,
  .test-card .tag,
  .test-card .pill,
  .test-card-top span,
  .test-card-visual span,
  .test-meta-row,
  .test-card-meta,
  .test-video-chip,
  .observation-type,
  .observation-number,
  .observation-source,
  .result-count-badge,
  .same-result-badge,
  .option-key,
  .tiny-label,
  .seal-label
) {
  font-family: var(--font-alt) !important;
  font-size: var(--type-label) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.035em !important;
}

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

#app[data-view] .observation-main-text.quote {
  font-family: var(--font-brand) !important;
  font-size: clamp(20px, 1.45vw, 28px) !important;
  line-height: 1.48 !important;
}

#app[data-view] :is(
  .feature-page-hero,
  .tests-page-view .section-heading,
  .activities-hero,
  .observations-hero,
  .observation-hero,
  .creator-profile-view > section:first-child,
  .listening-progress-card,
  .observation-card-result
) {
  padding-block: clamp(18px, 2.4vw, 34px) !important;
}

#app[data-view="library"] .recommended-tests .section-heading {
  display: grid !important;
  grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 1fr);
  gap: clamp(18px, 3vw, 44px);
  align-items: start;
  margin-bottom: clamp(20px, 3vw, 40px) !important;
}

#app[data-view="library"] .recommended-tests .section-heading h2 {
  font-size: clamp(24px, 2vw, 34px) !important;
}

#app[data-view="library"] .recommended-tests .section-heading p {
  max-width: 42em;
}

#app[data-view="library"] .testing-progress-panel {
  padding: clamp(18px, 2.4vw, 30px) clamp(22px, 3vw, 42px) !important;
}

#app[data-view="library"] .testing-progress-panel h2 {
  font-size: clamp(22px, 1.85vw, 32px) !important;
  line-height: 1.18 !important;
}

#app[data-view="library"] .library-grid {
  align-items: stretch;
}

#app[data-view="library"] .recommended-tests .test-card,
#app[data-view="library"] .test-card {
  display: flex !important;
  flex-direction: column;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: clamp(24px, 3vw, 38px) !important;
}

#app[data-view="library"] .test-card-visual {
  min-height: clamp(118px, 11vw, 170px) !important;
}

#app[data-view="library"] .test-card h2 {
  font-size: clamp(24px, 1.72vw, 32px) !important;
  max-width: calc(100% - 2px) !important;
}

#app[data-view="library"] .test-card p {
  max-width: 100% !important;
}

#app[data-view="library"] .test-card-actions {
  margin-top: auto !important;
}

#app[data-view] :is(.background-motifs, .motif, .abstract-motif, svg[aria-hidden="true"]) {
  pointer-events: none !important;
}

@media (max-width: 900px) {
  :root,
  body,
  #app,
  #app[data-view] {
    --type-brand-title: clamp(32px, 8vw, 44px);
    --type-page-title: clamp(24px, 5.6vw, 32px);
    --type-section-title: clamp(21px, 5vw, 27px);
    --type-card-title: clamp(21px, 5vw, 27px);
    --type-feature-title: clamp(24px, 6vw, 33px);
    --type-body: 14px;
    --type-button: 13px;
    --type-label: 10.5px;
    --type-emotion: clamp(24px, 6.4vw, 32px);
  }

  #app[data-view="library"] .recommended-tests .section-heading {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #app[data-view="library"] .test-card h2 {
    font-size: clamp(23px, 6vw, 30px) !important;
  }
}

/* 2026-06-09: typography lock v18
   One readable system across every feature page:
   default UI = YanYanBrand; brand/emotional lines = YanYanHand; tiny seals only = YanYanAlt. */
:root,
body,
#app,
body[data-view],
#app[data-view] {
  --font-brand: "YanYanBrand", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-hand: "YanYanHand", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-alt: "YanYanAlt", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-ink: var(--font-alt);
  --font-body: var(--font-brand);
  --font-sans: var(--font-brand);
  --font-serif: var(--font-brand);

  --type-brand-title: clamp(34px, 4vw, 52px);
  --type-page-title: clamp(22px, 1.75vw, 29px);
  --type-section-title: clamp(19px, 1.28vw, 24px);
  --type-card-title: clamp(19px, 1.18vw, 23px);
  --type-feature-title: clamp(22px, 1.62vw, 29px);
  --type-question-title: clamp(19px, 1.28vw, 24px);
  --type-result-title: clamp(21px, 1.5vw, 27px);
  --type-emotion: clamp(23px, 1.8vw, 30px);
  --type-body: clamp(13px, 0.86vw, 14.5px);
  --type-body-small: clamp(11.5px, 0.76vw, 13px);
  --type-button: clamp(12px, 0.78vw, 13px);
  --type-label: clamp(10px, 0.68vw, 11px);
}

body[data-view] #app,
body[data-view] #app *,
#app[data-view],
#app[data-view] * {
  font-family: var(--font-brand) !important;
  font-weight: 400 !important;
  letter-spacing: 0.018em;
}

body[data-view] #app :is(
  h1, h2, h3, h4,
  .page-title, .section-title, .section-heading h2,
  .feature-node strong, .feature-node-title,
  .test-card h2, .test-card h3, .test-card-title,
  .activity-card h2, .activity-card h3, .event-card h3,
  .observation-card h2, .observation-card h3,
  .listening-progress-card h1, .listening-progress-card h2,
  .result-name, .result-title, .question-title,
  .profile-hero h1, .profile-section h2,
  .creator-profile-view h1, .creator-profile-view h2
),
#app[data-view] :is(
  h1, h2, h3, h4,
  .page-title, .section-title, .section-heading h2,
  .feature-node strong, .feature-node-title,
  .test-card h2, .test-card h3, .test-card-title,
  .activity-card h2, .activity-card h3, .event-card h3,
  .observation-card h2, .observation-card h3,
  .listening-progress-card h1, .listening-progress-card h2,
  .result-name, .result-title, .question-title,
  .profile-hero h1, .profile-section h2,
  .creator-profile-view h1, .creator-profile-view h2
) {
  font-family: var(--font-brand) !important;
  color: var(--color-deep-sea) !important;
  line-height: 1.16 !important;
  letter-spacing: 0.028em !important;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

body[data-view] #app :is(.brand-title, .brand-wordmark, .home-brand-title, .site-title, .wordmark-main, .creator-brand-title),
#app[data-view] :is(.brand-title, .brand-wordmark, .home-brand-title, .site-title, .wordmark-main, .creator-brand-title) {
  font-family: var(--font-hand) !important;
  font-size: var(--type-brand-title) !important;
  line-height: 1.05 !important;
  letter-spacing: 0.05em !important;
}

body[data-view] #app :is(
  .page-title, .feature-page-hero h1,
  .activities-hero h1, .observations-hero h1,
  .observation-card-result h1, .observation-text-card h1,
  .listening-progress-card h1, .profile-hero h1,
  .creator-profile-view h1
),
#app[data-view] :is(
  .page-title, .feature-page-hero h1,
  .activities-hero h1, .observations-hero h1,
  .observation-card-result h1, .observation-text-card h1,
  .listening-progress-card h1, .profile-hero h1,
  .creator-profile-view h1
) {
  font-size: var(--type-page-title) !important;
  margin: 0 0 8px !important;
}

body[data-view] #app :is(.section-heading h2, .section-title, .feature-page-hero h2, .profile-section h2),
#app[data-view] :is(.section-heading h2, .section-title, .feature-page-hero h2, .profile-section h2) {
  font-size: var(--type-section-title) !important;
  margin: 0 0 8px !important;
}

body[data-view] #app :is(.feature-node strong, .feature-node-title),
#app[data-view] :is(.feature-node strong, .feature-node-title) {
  font-size: var(--type-feature-title) !important;
  line-height: 1.08 !important;
}

body[data-view] #app :is(.test-card h2, .test-card h3, .test-card-title, .activity-card h2, .activity-card h3, .event-card h3, .observation-card h2, .observation-card h3),
#app[data-view] :is(.test-card h2, .test-card h3, .test-card-title, .activity-card h2, .activity-card h3, .event-card h3, .observation-card h2, .observation-card h3) {
  font-size: var(--type-card-title) !important;
  line-height: 1.18 !important;
  margin: 0 0 10px !important;
}

body[data-view] #app :is(.question-title, .quiz-question h1, .quiz-question h2),
#app[data-view] :is(.question-title, .quiz-question h1, .quiz-question h2) {
  font-size: var(--type-question-title) !important;
}

body[data-view] #app :is(
  p, li, dd, dt, em, span, a, label,
  .feature-node p, .feature-node em,
  .section-heading p, .feature-page-hero p,
  .test-card p, .test-card dd, .test-card-fit,
  .activity-card p, .activity-card dd, .activity-card dt, .activity-card li,
  .event-card p, .event-card dd, .event-card dt, .event-card li,
  .observation-card p, .observation-arrived-note,
  .listening-progress-card p, .listening-boundary,
  .profile-section p, .creator-profile-view p
),
#app[data-view] :is(
  p, li, dd, dt, em, span, a, label,
  .feature-node p, .feature-node em,
  .section-heading p, .feature-page-hero p,
  .test-card p, .test-card dd, .test-card-fit,
  .activity-card p, .activity-card dd, .activity-card dt, .activity-card li,
  .event-card p, .event-card dd, .event-card dt, .event-card li,
  .observation-card p, .observation-arrived-note,
  .listening-progress-card p, .listening-boundary,
  .profile-section p, .creator-profile-view p
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-body) !important;
  line-height: 1.58 !important;
  color: rgba(30, 26, 26, 0.76) !important;
}

body[data-view] #app :is(button, .button, .btn, .primary-button, .secondary-button, .feature-node b, input, textarea, select, .floating-function-dock button, .nav-link),
#app[data-view] :is(button, .button, .btn, .primary-button, .secondary-button, .feature-node b, input, textarea, select, .floating-function-dock button, .nav-link) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-button) !important;
  line-height: 1.12 !important;
  letter-spacing: 0.024em !important;
}

body[data-view] #app :is(
  .eyebrow, .tag, .pill-tag, .soft-tag,
  .platform-pill, .status-pill, .price-pill,
  .activity-type, .activity-status, .event-type,
  .test-card-tags, .test-card .tag, .test-card .pill,
  .test-card-top span, .test-card-visual span,
  .test-meta-row span, .observation-type, .observation-number,
  .result-count-badge, .same-result-badge, .option-key, .tiny-label, .seal-label
),
#app[data-view] :is(
  .eyebrow, .tag, .pill-tag, .soft-tag,
  .platform-pill, .status-pill, .price-pill,
  .activity-type, .activity-status, .event-type,
  .test-card-tags, .test-card .tag, .test-card .pill,
  .test-card-top span, .test-card-visual span,
  .test-meta-row span, .observation-type, .observation-number,
  .result-count-badge, .same-result-badge, .option-key, .tiny-label, .seal-label
) {
  font-family: var(--font-alt) !important;
  font-size: var(--type-label) !important;
  line-height: 1.18 !important;
  letter-spacing: 0.035em !important;
  color: var(--color-deep-sea) !important;
}

body[data-view] #app :is(.observation-source),
#app[data-view] :is(.observation-source) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-body-small) !important;
}

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

body[data-view] #app :is(.observation-main-text.quote),
#app[data-view] :is(.observation-main-text.quote) {
  font-family: var(--font-brand) !important;
  font-size: clamp(19px, 1.35vw, 25px) !important;
  line-height: 1.5 !important;
}

body[data-view] #app :is(.feature-page-hero, .tests-page-view .section-heading, .activities-hero, .observations-hero, .profile-hero, .creator-profile-view > section:first-child, .listening-progress-card, .observation-card-result),
#app[data-view] :is(.feature-page-hero, .tests-page-view .section-heading, .activities-hero, .observations-hero, .profile-hero, .creator-profile-view > section:first-child, .listening-progress-card, .observation-card-result) {
  min-height: auto !important;
  padding-block: clamp(18px, 2.6vw, 34px) !important;
}

body[data-view="library"] #app .testing-progress-panel,
#app[data-view="library"] .testing-progress-panel {
  grid-template-columns: minmax(0, 1fr) minmax(250px, 420px) !important;
  padding: clamp(18px, 2.6vw, 32px) clamp(22px, 3.2vw, 42px) !important;
}

body[data-view="library"] #app .testing-progress-panel h2,
#app[data-view="library"] .testing-progress-panel h2 {
  font-size: var(--type-section-title) !important;
}

body[data-view="library"] #app :is(.recommended-tests .test-card, .test-card, .activity-card, .event-card, .observation-card),
#app[data-view="library"] :is(.recommended-tests .test-card, .test-card, .activity-card, .event-card, .observation-card) {
  padding: clamp(22px, 2.8vw, 34px) !important;
}

body[data-view="library"] #app :is(.test-card h2, .recommended-tests .test-card h2),
#app[data-view="library"] :is(.test-card h2, .recommended-tests .test-card h2) {
  font-size: clamp(20px, 1.28vw, 24px) !important;
  max-inline-size: 100% !important;
  white-space: normal !important;
  word-break: normal;
  overflow-wrap: anywhere;
}

body[data-view] #app :is(.test-card, .activity-card, .event-card, .observation-card, .listening-progress-card, .observation-card-result, .feature-node),
#app[data-view] :is(.test-card, .activity-card, .event-card, .observation-card, .listening-progress-card, .observation-card-result, .feature-node) {
  min-width: 0 !important;
  overflow: hidden !important;
}

body[data-view] #app :is(.test-card *, .activity-card *, .event-card *, .observation-card *, .listening-progress-card *, .feature-node *),
#app[data-view] :is(.test-card *, .activity-card *, .event-card *, .observation-card *, .listening-progress-card *, .feature-node *) {
  max-width: 100% !important;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  :root,
  body,
  #app {
    --type-brand-title: clamp(29px, 7.6vw, 40px);
    --type-page-title: clamp(21px, 5vw, 27px);
    --type-section-title: clamp(18px, 4.4vw, 23px);
    --type-card-title: clamp(18px, 4.2vw, 22px);
    --type-feature-title: clamp(21px, 5vw, 27px);
    --type-body: 13px;
    --type-body-small: 12px;
    --type-button: 12px;
    --type-label: 10px;
    --type-emotion: clamp(21px, 5.4vw, 28px);
  }

  body[data-view] #app :is(.feature-page-hero, .tests-page-view .section-heading, .activities-hero, .observations-hero, .profile-hero, .creator-profile-view > section:first-child, .listening-progress-card, .observation-card-result),
  #app[data-view] :is(.feature-page-hero, .tests-page-view .section-heading, .activities-hero, .observations-hero, .profile-hero, .creator-profile-view > section:first-child, .listening-progress-card, .observation-card-result) {
    padding-block: 18px !important;
  }

  body[data-view="library"] #app .testing-progress-panel,
  #app[data-view="library"] .testing-progress-panel {
    grid-template-columns: 1fr !important;
    padding: 20px !important;
  }
}

@media (max-width: 640px) {
  #app.surface[data-view="library"] {
    padding: 18px;
    border-radius: 24px;
  }

  #app[data-view="library"] .site-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  #app[data-view="library"] h1 {
    font-size: clamp(31px, 8.6vw, 40px);
    line-height: 1.1;
  }

  #app[data-view="library"] .hero-lead {
    white-space: normal;
  }

  #app[data-view="library"] .hilma-orbit img {
    min-height: 300px;
    object-position: 50% 38%;
  }

  #app[data-view="library"] .hilma-orbit figcaption strong {
    font-size: clamp(20px, 6vw, 28px);
  }

  #app[data-view="library"] .test-card {
    grid-template-rows: 210px auto auto auto auto;
  }

  #app[data-view="library"] .test-card-visual {
    height: 210px;
  }

  #app[data-view="library"] .daily-card-symbol {
    min-height: 170px;
  }
}

/* Typography rule: avoid sparse second lines and orphan single-character lines. */
#app[data-view="library"] h1,
#app[data-view="library"] h2,
#app[data-view="library"] h3,
#app[data-view="library"] .hero-lead,
#app[data-view="library"] .button,
#app[data-view="library"] .topbar-links a,
#app[data-view="library"] .topbar-links button,
#app[data-view="library"] .test-card-top span,
#app[data-view="library"] .test-meta-row span,
#app[data-view="library"] .test-card-visual span,
#app[data-view="library"] .hilma-orbit figcaption strong,
#app[data-view="library"] .platform-signature,
#app[data-view="library"] .platform-signature-copy,
#app[data-view="library"] .creator-banner-note,
#app[data-view="library"] .page-back-button {
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: pretty;
}

#app[data-view="library"] h1,
#app[data-view="library"] .wordmark,
#app[data-view="library"] .hilma-orbit figcaption strong,
#app[data-view="library"] .platform-signature-copy strong,
#app[data-view="library"] .platform-signature-copy span {
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  #app[data-view="library"] *,
  body[data-view="library"] * {
    animation: none !important;
    transition: none !important;
  }
}

/* Font system v1: YanYanBrand / YanYanHand / YanYanInk / readable body. */
#app[data-view="library"] {
  --font-serif: var(--font-brand);
  --font-sans: var(--font-body);
  --font-brand-title: var(--font-brand);
  --font-brand-body: var(--font-body);
  --font-brand-soft: var(--font-hand);
  font-family: var(--font-body);
}

#app[data-view="library"] .wordmark,
#app[data-view="library"] h1,
#app[data-view="library"] .daily-card-result h1,
#app[data-view="library"] .profile-hero h1,
#app[data-view="library"] .observations-hero h1 {
  color: var(--color-deep-sea);
  font-family: var(--font-brand);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.15;
}

#app[data-view="library"] h1 {
  max-width: 760px;
  font-size: clamp(48px, 7vw, 86px);
}

#app[data-view="library"] .daily-card-result h1,
#app[data-view="library"] .profile-hero h1,
#app[data-view="library"] .observations-hero h1 {
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.2;
}

#app[data-view="library"] .wordmark {
  font-size: clamp(22px, 3vw, 34px);
  white-space: nowrap;
}

#app[data-view="library"] .hero-copy > .eyebrow {
  color: var(--color-deep-sea);
  font-family: var(--font-brand);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 400;
  letter-spacing: 0.12em;
}

#app[data-view="library"] .section-heading h2,
#app[data-view="library"] .daily-card-copy h2,
#app[data-view="library"] .creator-entry h2,
#app[data-view="library"] .reward-entry h2,
#app[data-view="library"] .profile-section h2,
#app[data-view="library"] .observation-card h2,
#app[data-view="library"] .test-card h2 {
  color: var(--color-indigo-blue);
  font-family: var(--font-brand);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.25;
}

#app[data-view="library"] .section-heading h2,
#app[data-view="library"] .creator-entry h2,
#app[data-view="library"] .reward-entry h2,
#app[data-view="library"] .profile-section h2 {
  font-size: clamp(28px, 4vw, 46px);
}

#app[data-view="library"] .test-card h2 {
  font-size: clamp(24px, 2.8vw, 34px);
}

#app[data-view="library"] .entry-card h3,
#app[data-view="library"] .daily-reflection h2,
#app[data-view="library"] .test-card-visual span,
#app[data-view="library"] .test-card-top span,
#app[data-view="library"] .test-meta-row span,
#app[data-view="library"] .observation-type,
#app[data-view="library"] .platform-logo {
  font-family: var(--font-ink);
  font-weight: 400;
  letter-spacing: 0.04em;
}

#app[data-view="library"] .entry-card h3 {
  font-size: 26px;
}

#app[data-view="library"] .daily-card-result > p:not(.eyebrow) {
  color: var(--color-deep-sea);
  font-family: var(--font-hand);
  font-size: clamp(24px, 4vw, 42px);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.65;
}

#app[data-view="library"] .daily-reflection p,
#app[data-view="library"] .hero-lead,
#app[data-view="library"] .library-intro,
#app[data-view="library"] .section-heading p:not(.eyebrow),
#app[data-view="library"] .daily-card-copy p,
#app[data-view="library"] .test-card p,
#app[data-view="library"] .creator-entry p,
#app[data-view="library"] .reward-entry p,
#app[data-view="library"] .profile-section p,
#app[data-view="library"] .observation-card p,
#app[data-view="library"] .home-disclaimer p,
#app[data-view="library"] .philosophy-copy p {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.9;
}

#app[data-view="library"] .button,
#app[data-view="library"] .topbar-links a,
#app[data-view="library"] .topbar-links button,
#app[data-view="library"] .page-back-button {
  font-family: var(--font-body);
  font-weight: 600;
}

#app[data-view="library"] .platform-signature-copy strong,
#app[data-view="library"] .platform-signature:not(.compact) strong {
  font-family: var(--font-brand);
  font-weight: 400;
  letter-spacing: 0.06em;
}

#app[data-view="library"] .platform-signature-copy span {
  font-family: var(--font-body);
  font-weight: 400;
}

@media (max-width: 640px) {
  #app[data-view="library"] h1 {
    font-size: clamp(40px, 12vw, 56px);
  }

  #app[data-view="library"] .section-heading h2,
  #app[data-view="library"] .creator-entry h2,
  #app[data-view="library"] .reward-entry h2,
  #app[data-view="library"] .profile-section h2 {
    font-size: clamp(28px, 9vw, 42px);
  }
}

/* Home IA rebuild v1: function-first homepage and extracted abstract motifs. */
#app[data-view="library"] .home-dispatch {
  gap: clamp(56px, 7vw, 96px);
}

#app[data-view="library"] .home-hero-dispatch {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(300px, 0.86fr) minmax(360px, 1.14fr);
  gap: clamp(22px, 4vw, 56px);
  align-items: center;
  min-height: min(620px, calc(100vh - 132px));
  padding: clamp(26px, 5vw, 64px);
  border: var(--border-light);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 16% 24%, rgba(233, 185, 191, 0.22), transparent 26%),
    radial-gradient(circle at 84% 18%, rgba(169, 195, 218, 0.18), transparent 24%),
    linear-gradient(135deg, rgba(247, 243, 236, 0.84), rgba(243, 238, 230, 0.72));
  box-shadow: var(--shadow-soft);
}

#app[data-view="library"] .home-hero-dispatch::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image:
    linear-gradient(90deg, rgba(61, 95, 132, 0.18) 1px, transparent 1px),
    linear-gradient(180deg, rgba(168, 132, 74, 0.14) 1px, transparent 1px);
  background-size: 42px 42px;
}

#app[data-view="library"] .home-hero-dispatch > * {
  position: relative;
  z-index: 1;
}

#app[data-view="library"] .home-hero-dispatch .hero-copy {
  max-width: 580px;
  gap: 14px;
  align-content: center;
}

#app[data-view="library"] .home-hero-dispatch h1 {
  max-width: none;
  color: var(--color-deep-sea);
  font-size: clamp(48px, 6.8vw, 82px);
  line-height: 1.12;
}

#app[data-view="library"] .home-hero-dispatch .hero-lead {
  max-width: 520px;
  color: var(--color-indigo-blue);
  font-family: var(--font-brand);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 400;
  line-height: 1.42;
  white-space: normal;
}

#app[data-view="library"] .hero-brief {
  max-width: 520px;
  color: var(--home-muted);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.86;
  letter-spacing: 0.02em;
}

#app[data-view="library"] .text-link {
  justify-self: start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-umber);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

#app[data-view="library"] .text-link:hover {
  color: var(--color-terracotta);
}

#app[data-view="library"] .hero-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

#app[data-view="library"] .home-action-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 20px;
  min-height: 300px;
  padding: clamp(22px, 2.5vw, 30px);
  border: var(--border-light);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 78% 18%, rgba(231, 211, 109, 0.18), transparent 24%),
    rgba(247, 243, 236, 0.70);
  box-shadow: var(--shadow-card);
  transition:
    transform var(--motion-medium) var(--ease-soft),
    box-shadow var(--motion-medium) var(--ease-soft),
    border-color var(--motion-medium) var(--ease-soft);
}

#app[data-view="library"] .home-action-card:hover {
  transform: translateY(-4px);
  border-color: rgba(168, 132, 74, 0.32);
  box-shadow: var(--shadow-hover);
}

#app[data-view="library"] .home-action-card h2 {
  color: var(--color-deep-sea);
  font-family: var(--font-brand);
  font-size: clamp(26px, 2.7vw, 34px);
  font-weight: 400;
  letter-spacing: 0.035em;
  line-height: 1.18;
  white-space: nowrap;
}

#app[data-view="library"] .home-action-card p {
  max-width: 280px;
  color: var(--home-muted);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.82;
}

#app[data-view="library"] .home-action-card .button {
  justify-self: start;
  align-self: end;
}

#app[data-view="library"] .abstract-motif {
  position: absolute;
  pointer-events: none;
  color: var(--color-deep-sea);
}

#app[data-view="library"] .abstract-motif span {
  position: absolute;
  display: block;
}

#app[data-view="library"] .hero-orbit {
  z-index: 0;
  right: -90px;
  bottom: -120px;
  width: min(56vw, 560px);
  aspect-ratio: 1;
  opacity: 0.18;
}

#app[data-view="library"] .action-card-motif {
  right: -46px;
  top: -46px;
  width: 190px;
  aspect-ratio: 1;
  opacity: 0.22;
}

#app[data-view="library"] .test-card-motif {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.82;
}

#app[data-view="library"] .daily-result-motif {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.92;
}

#app[data-view="library"] .motif-circle {
  inset: 14%;
  border: 1px solid rgba(42, 69, 97, 0.28);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(247, 243, 236, 0.42) 0 12%, transparent 13%),
    conic-gradient(from 150deg, rgba(233, 185, 191, 0.36), rgba(231, 211, 109, 0.24), rgba(169, 195, 218, 0.34), rgba(191, 175, 202, 0.28), rgba(233, 185, 191, 0.36));
}

#app[data-view="library"] .motif-orbit {
  inset: 26%;
  border: 11px solid rgba(169, 195, 218, 0.44);
  border-left-color: rgba(30, 26, 26, 0.36);
  border-bottom-color: rgba(216, 106, 82, 0.34);
  border-radius: 50%;
}

#app[data-view="library"] .motif-petal {
  width: 38%;
  height: 25%;
  border: 1px solid rgba(168, 132, 74, 0.30);
  border-radius: 56% 44% 52% 48% / 50% 42% 58% 50%;
  background: rgba(233, 185, 191, 0.26);
}

#app[data-view="library"] .petal-a {
  left: 8%;
  top: 39%;
  transform: rotate(-18deg);
}

#app[data-view="library"] .petal-b {
  right: 8%;
  top: 39%;
  transform: rotate(18deg);
  background: rgba(169, 195, 218, 0.24);
}

#app[data-view="library"] .motif-axis {
  left: 50%;
  top: 3%;
  width: 1px;
  height: 94%;
  transform: translateX(-50%);
  background:
    repeating-linear-gradient(180deg, rgba(168, 132, 74, 0.42) 0 6px, transparent 6px 13px);
}

#app[data-view="library"] .motif-wedge {
  left: 50%;
  bottom: 5%;
  width: 42%;
  height: 34%;
  transform: translateX(-50%);
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  background:
    linear-gradient(90deg, rgba(180, 94, 60, 0.32), rgba(231, 211, 109, 0.26) 33%, rgba(247, 243, 236, 0.34) 49%, rgba(169, 195, 218, 0.34) 68%, rgba(42, 69, 97, 0.30));
}

#app[data-view="library"] .motif-node {
  width: 10px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-antique-gold);
  box-shadow: 0 0 0 7px rgba(247, 243, 236, 0.42);
}

#app[data-view="library"] .node-a {
  left: 24%;
  top: 22%;
}

#app[data-view="library"] .node-b {
  right: 22%;
  bottom: 28%;
  background: var(--color-mineral-blue);
}

#app[data-view="library"] .motif-thread {
  left: 12%;
  right: 12%;
  top: 50%;
  height: 42%;
  border-top: 2px solid rgba(216, 106, 82, 0.22);
  border-radius: 50%;
  transform: rotate(-18deg);
}

#app[data-view="library"] .motif-daily .motif-circle,
#app[data-view="library"] .motif-care .motif-circle {
  background:
    radial-gradient(circle at 50% 50%, rgba(231, 211, 109, 0.34) 0 11%, transparent 12%),
    conic-gradient(from 180deg, rgba(233, 185, 191, 0.50), rgba(247, 243, 236, 0.52), rgba(169, 195, 218, 0.34), rgba(233, 185, 191, 0.50));
}

#app[data-view="library"] .motif-position .motif-wedge,
#app[data-view="library"] .motif-seen .motif-wedge {
  height: 50%;
  bottom: 0;
}

#app[data-view="library"] .motif-silence .motif-orbit {
  border-left-color: rgba(42, 69, 97, 0.52);
  border-right-color: rgba(233, 185, 191, 0.52);
}

#app[data-view="library"] .motif-event .motif-circle {
  background:
    radial-gradient(circle at 50% 50%, rgba(216, 185, 73, 0.20) 0 12%, transparent 13%),
    conic-gradient(from 210deg, rgba(168, 132, 74, 0.22), rgba(247, 243, 236, 0.42), rgba(169, 195, 218, 0.26), rgba(233, 185, 191, 0.22));
}

#app[data-view="library"] .motif-event .motif-axis {
  background:
    repeating-linear-gradient(180deg, rgba(42, 69, 97, 0.24) 0 4px, transparent 4px 12px);
}

#app[data-view="library"] .recommended-tests .section-heading {
  max-width: 720px;
}

#app[data-view="library"] .recommended-tests .section-heading p:not(.eyebrow) {
  max-width: 660px;
}

#app[data-view="library"] .recommended-tests .library-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}

#app[data-view="library"] .recommended-tests .test-card {
  grid-template-rows: 138px auto auto auto auto;
  min-height: 430px;
  padding-bottom: 22px;
}

#app[data-view="library"] .recommended-tests .test-card-visual {
  height: 138px;
  border-radius: var(--radius-lg) var(--radius-lg) 16px 16px;
  background:
    radial-gradient(circle at 80% 12%, rgba(233, 185, 191, 0.26), transparent 24%),
    linear-gradient(135deg, rgba(247, 243, 236, 0.80), rgba(237, 229, 216, 0.78));
}

#app[data-view="library"] .recommended-tests .test-card-visual::before,
#app[data-view="library"] .recommended-tests .test-card-visual::after {
  display: none;
}

#app[data-view="library"] .recommended-tests .test-card-visual img {
  display: none;
}

#app[data-view="library"] .recommended-tests .test-card-visual span {
  left: 14px;
  bottom: 12px;
  background: rgba(247, 243, 236, 0.78);
}

#app[data-view="library"] .recommended-tests .test-card::after {
  display: none;
}

#app[data-view="library"] .recommended-tests .test-card h2 {
  font-size: clamp(21px, 2.2vw, 28px);
  line-height: 1.28;
}

#app[data-view="library"] .recommended-tests .test-card p {
  font-size: 15px;
  line-height: 1.75;
}

#app[data-view="library"] .recommended-tests .test-card-fit {
  display: none;
}

#app[data-view="library"] .observation-preview-section .observation-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#app[data-view="library"] .section-more-button {
  justify-self: start;
}

#app[data-view="library"] .recent-meetups-section .section-heading {
  max-width: 760px;
}

#app[data-view="library"] .event-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

#app[data-view="library"] .event-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 16px;
  padding: clamp(24px, 3vw, 34px);
  border: var(--border-gold);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 88% 10%, rgba(216, 185, 73, 0.14), transparent 30%),
    linear-gradient(150deg, rgba(247, 243, 236, 0.84), rgba(237, 229, 216, 0.58));
  box-shadow: var(--shadow-card);
}

#app[data-view="library"] .event-card > *:not(.event-card-motif) {
  position: relative;
  z-index: 1;
}

#app[data-view="library"] .event-card-motif {
  right: -64px;
  top: -72px;
  width: 220px;
  aspect-ratio: 1;
  opacity: 0.16;
}

#app[data-view="library"] .event-type {
  width: fit-content;
  padding: 6px 12px;
  border: 1px solid rgba(168, 132, 74, 0.24);
  border-radius: var(--radius-full);
  background: rgba(247, 243, 236, 0.66);
  color: var(--color-umber);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

#app[data-view="library"] .event-card h3 {
  color: var(--color-deep-sea);
  font-family: var(--font-brand);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.22;
}

#app[data-view="library"] .event-card dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

#app[data-view="library"] .event-card dl div {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

#app[data-view="library"] .event-card dt {
  color: var(--color-mineral-blue);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
}

#app[data-view="library"] .event-card dd {
  margin: 0;
  color: rgba(30, 26, 26, 0.78);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
}

#app[data-view="library"] .event-card p {
  color: var(--home-muted);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.82;
}

#app[data-view="library"] .event-card .button {
  justify-self: start;
}

#app[data-view="library"] .event-card .button:disabled,
#app[data-view="library"] .recommended-tests .test-card .button:disabled {
  cursor: not-allowed;
  opacity: 0.64;
  transform: none;
}

#app[data-view="library"] .creator-entry {
  grid-template-columns: minmax(0, 0.72fr) minmax(280px, 0.48fr);
  min-height: 0;
  cursor: pointer;
}

#app[data-view="library"] .platform-signature {
  border: var(--border-light);
  border-radius: var(--radius-lg);
  background: rgba(247, 243, 236, 0.46);
}

#app[data-view="library"] .platform-logo.xiaohongshu,
#app[data-view="library"] .platform-logo.shipinhao,
#app[data-view="library"] .platform-logo.wechat,
#app[data-view="library"] .platform-logo.douyin,
#app[data-view="library"] .platform-logo.bilibili,
#app[data-view="library"] .platform-logo {
  background: rgba(169, 195, 218, 0.18);
  color: var(--color-deep-sea);
  border-color: rgba(61, 95, 132, 0.18);
  box-shadow: none;
}

#app[data-view="library"] .platform-logo:nth-child(2n) {
  background: rgba(233, 185, 191, 0.18);
  color: var(--color-umber);
}

#app[data-view="library"] .platform-logo:nth-child(3n) {
  background: rgba(216, 185, 73, 0.16);
  color: var(--color-deep-sea);
}

#app[data-view="library"] .daily-card-large-symbol {
  overflow: hidden;
  display: grid;
  place-items: center;
}

#app[data-view="library"] .daily-card-large-symbol > .abstract-motif {
  position: relative;
}

@media (max-width: 1080px) {
  #app[data-view="library"] .recommended-tests .library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  #app[data-view="library"] .home-hero-dispatch,
  #app[data-view="library"] .hero-action-grid,
  #app[data-view="library"] .observation-preview-section .observation-grid.compact,
  #app[data-view="library"] .event-card-grid {
    grid-template-columns: 1fr;
  }

  #app[data-view="library"] .home-hero-dispatch {
    min-height: 0;
  }

  #app[data-view="library"] .home-action-card {
    min-height: 230px;
  }
}

@media (max-width: 640px) {
  #app.surface[data-view="library"] {
    padding: 14px;
  }

  #app[data-view="library"] .site-topbar {
    padding-bottom: 10px;
  }

  #app[data-view="library"] .topbar-links {
    display: none;
  }

  #app[data-view="library"] .home-dispatch {
    gap: 48px;
  }

  #app[data-view="library"] .home-hero-dispatch {
    gap: 16px;
    padding: 18px;
  }

  #app[data-view="library"] .home-hero-dispatch h1 {
    font-size: clamp(38px, 11vw, 46px);
  }

  #app[data-view="library"] .home-hero-dispatch .hero-copy {
    gap: 10px;
  }

  #app[data-view="library"] .home-hero-dispatch .hero-lead {
    font-size: 17px;
    line-height: 1.38;
  }

  #app[data-view="library"] .hero-brief {
    font-size: 14px;
    line-height: 1.65;
  }

  #app[data-view="library"] .text-link {
    font-size: 13px;
  }

  #app[data-view="library"] .hero-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  #app[data-view="library"] .home-action-card {
    min-height: 198px;
    gap: 10px;
    padding: 14px;
    border-radius: var(--radius-md);
  }

  #app[data-view="library"] .home-action-card h2 {
    font-size: clamp(20px, 6vw, 23px);
    letter-spacing: 0.015em;
  }

  #app[data-view="library"] .home-action-card p {
    font-size: 13px;
    line-height: 1.58;
  }

  #app[data-view="library"] .home-action-card .button {
    width: 100%;
    min-height: 42px;
    justify-content: center;
    padding: 0 10px;
    font-size: 13px;
  }

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

  #app[data-view="library"] .recommended-tests .test-card {
    min-height: 0;
  }
}

/* Highest-priority interaction pass: function star map + global dock. */
:root {
  --font-brand-title: var(--font-brand);
  --font-brand-body: var(--font-body);
  --font-brand-soft: var(--font-hand);
}

body[data-view="library"] {
  background:
    radial-gradient(circle at 14% 10%, rgba(233, 185, 191, 0.15), transparent 30%),
    radial-gradient(circle at 84% 18%, rgba(169, 195, 218, 0.14), transparent 32%),
    radial-gradient(circle at 50% 96%, rgba(231, 211, 109, 0.08), transparent 28%),
    linear-gradient(180deg, #f7f3ec 0%, #f3eee6 100%);
}

#app.surface[data-view="library"] {
  --font-serif: var(--font-brand);
  --font-sans: var(--font-body);
  --font-brand-title: var(--font-brand);
  --font-brand-body: var(--font-body);
  --font-brand-soft: var(--font-hand);
  --home-ink: #1e1a1a;
  --home-muted: rgba(30, 26, 26, 0.68);
  --home-blue: #2a4561;
  --home-mineral: #6a8fa8;
  --home-gold: #a8844a;
  --home-rose: #e8dedf;
  width: min(100%, 1180px);
  padding: clamp(16px, 2.4vw, 30px);
  border-radius: 32px;
  border: 1px solid rgba(61, 95, 132, 0.14);
  background:
    radial-gradient(circle at 10% 14%, rgba(233, 185, 191, 0.13), transparent 26%),
    radial-gradient(circle at 91% 10%, rgba(169, 195, 218, 0.13), transparent 24%),
    linear-gradient(180deg, rgba(247, 243, 236, 0.93), rgba(243, 238, 230, 0.96));
  box-shadow: 0 18px 50px rgba(42, 69, 97, 0.08);
}

#app[data-view="library"] .background-motifs,
#app[data-view="library"] .abstract-motif,
#app[data-view="library"] .feature-motif,
#app[data-view="library"] .test-card-motif,
#app[data-view="library"] .action-card-motif,
#app[data-view="library"] .listening-service-motif {
  pointer-events: none;
}

#app[data-view="library"] .background-motifs {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

#app[data-view="library"] .content-layer {
  position: relative;
  z-index: 2;
}

#app[data-view="library"] h1,
#app[data-view="library"] h2,
#app[data-view="library"] h3,
#app[data-view="library"] .feature-node strong,
#app[data-view="library"] .test-card h2,
#app[data-view="library"] .event-card h3,
#app[data-view="library"] .result-name,
#app[data-view="library"] .observation-text-card h1,
#app[data-view="library"] .profile-hero h1,
#app[data-view="library"] .section-heading h2 {
  font-family: var(--font-brand);
  font-weight: 400;
}

#app[data-view="library"] .site-topbar {
  position: relative;
  z-index: 12;
  padding-bottom: 10px;
  border-bottom-color: rgba(61, 95, 132, 0.12);
}

#app[data-view="library"] .wordmark {
  font-family: var(--font-brand);
  font-size: 19px;
  font-weight: 400;
  color: var(--home-blue);
}

#app[data-view="library"] .topbar-links a,
#app[data-view="library"] .topbar-links button {
  background: rgba(247, 243, 236, 0.68);
  color: var(--home-blue);
  border-color: rgba(61, 95, 132, 0.15);
}

#app[data-view="library"] .library-view.home-dispatch {
  gap: clamp(56px, 8vw, 96px);
}

#app[data-view="library"] .home-star-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(545px, calc(100vh - 126px), 690px);
  height: clamp(545px, calc(100vh - 126px), 690px);
  overflow: hidden;
  border: 1px solid rgba(168, 132, 74, 0.16);
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 50%, rgba(247, 243, 236, 0.64), transparent 44%),
    radial-gradient(circle at 18% 88%, rgba(233, 185, 191, 0.14), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(169, 195, 218, 0.16), transparent 32%),
    rgba(247, 243, 236, 0.72);
  box-shadow: inset 0 0 46px rgba(255, 255, 255, 0.3);
}

#app[data-view="library"] .home-star-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.2;
  background-image:
    radial-gradient(rgba(30, 26, 26, 0.07) 0.7px, transparent 0.7px),
    linear-gradient(90deg, rgba(61, 95, 132, 0.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(168, 132, 74, 0.045) 1px, transparent 1px);
  background-size: 4px 4px, 42px 42px, 42px 42px;
}

#app[data-view="library"] .home-star-hero .star-map-orbit {
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(52vw, 540px);
  height: min(52vw, 540px);
  transform: translate(-50%, -50%);
  opacity: 0.1;
}

#app[data-view="library"] .home-star-hero .star-map-thread {
  position: absolute;
  right: -70px;
  top: -88px;
  width: 320px;
  height: 320px;
  opacity: 0.1;
  transform: rotate(14deg);
}

#app[data-view="library"] .home-star-hero .star-map-petal {
  position: absolute;
  left: -70px;
  bottom: -86px;
  width: 330px;
  height: 330px;
  opacity: 0.1;
  transform: rotate(-10deg);
}

#app[data-view="library"] .home-star-copy {
  position: absolute;
  left: clamp(22px, 4vw, 54px);
  top: clamp(22px, 4vw, 50px);
  display: grid;
  max-width: 430px;
  gap: 9px;
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid rgba(61, 95, 132, 0.12);
  border-radius: 26px;
  background: rgba(247, 243, 236, 0.74);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 44px rgba(42, 69, 97, 0.06);
}

#app[data-view="library"] .home-star-copy .eyebrow {
  color: rgba(42, 69, 97, 0.78);
  font-family: var(--font-brand);
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 400;
  letter-spacing: 0.07em;
}

#app[data-view="library"] .home-star-copy h1 {
  margin: 0;
  color: var(--home-blue);
  font-size: clamp(54px, 6.4vw, 82px);
  letter-spacing: 0.08em;
  line-height: 1.05;
  white-space: nowrap;
  text-shadow: none;
}

#app[data-view="library"] .home-star-copy .hero-lead {
  margin: 0;
  max-width: 360px;
  color: rgba(30, 26, 26, 0.74);
  font-family: var(--font-body);
  font-size: clamp(15px, 1.35vw, 18px);
  font-weight: 400;
  line-height: 1.82;
  letter-spacing: 0.02em;
  white-space: normal;
}

#app[data-view="library"] .function-star-map {
  position: absolute;
  inset: 118px 28px 28px;
  z-index: 2;
}

#app[data-view="library"] .function-star-map::before,
#app[data-view="library"] .function-star-map::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: -1;
  width: min(52vw, 540px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}

#app[data-view="library"] .function-star-map::before {
  border: 1px dashed rgba(168, 132, 74, 0.2);
}

#app[data-view="library"] .function-star-map::after {
  width: min(36vw, 380px);
  border: 1px solid rgba(61, 95, 132, 0.1);
}

#app[data-view="library"] .feature-node {
  position: absolute;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  width: min(315px, 27vw);
  min-height: 132px;
  padding: 16px;
  border: 1px solid rgba(61, 95, 132, 0.15);
  border-radius: 28px;
  background:
    radial-gradient(circle at 90% 14%, rgba(247, 243, 236, 0.82), transparent 32%),
    rgba(247, 243, 236, 0.8);
  box-shadow: 0 14px 38px rgba(30, 26, 26, 0.065);
  color: var(--home-blue);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  backdrop-filter: blur(10px);
  transition:
    translate 420ms var(--ease-soft),
    box-shadow 420ms var(--ease-soft),
    border-color 420ms var(--ease-soft),
    background 420ms var(--ease-soft);
}

#app[data-view="library"] .feature-node:hover,
#app[data-view="library"] .feature-node:focus-visible {
  translate: 0 -5px;
  border-color: rgba(168, 132, 74, 0.34);
  background:
    radial-gradient(circle at 90% 14%, rgba(233, 185, 191, 0.18), transparent 34%),
    rgba(247, 243, 236, 0.9);
  box-shadow: 0 22px 54px rgba(42, 69, 97, 0.12);
  outline: none;
}

#app[data-view="library"] .feature-node-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 6px;
  min-width: 0;
}

#app[data-view="library"] .feature-node strong {
  display: block;
  color: var(--home-blue);
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.16;
  letter-spacing: 0.04em;
}

#app[data-view="library"] .feature-node em {
  display: block;
  color: rgba(30, 26, 26, 0.7);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-style: normal;
  line-height: 1.58;
  letter-spacing: 0.02em;
}

#app[data-view="library"] .feature-node b {
  display: inline-flex;
  width: fit-content;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--home-blue);
  color: #f7f3ec;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  box-shadow: 0 10px 24px rgba(42, 69, 97, 0.16);
}

#app[data-view="library"] .feature-node-scene {
  left: 50%;
  top: 50%;
  width: min(360px, 31vw);
  min-height: 152px;
  transform: translate(-50%, -50%);
  border-color: rgba(42, 69, 97, 0.2);
  background:
    radial-gradient(circle at 14% 84%, rgba(169, 195, 218, 0.19), transparent 30%),
    rgba(247, 243, 236, 0.9);
}

#app[data-view="library"] .feature-node-daily {
  left: 4%;
  top: 6%;
}

#app[data-view="library"] .feature-node-observe {
  right: 4%;
  top: 8%;
}

#app[data-view="library"] .feature-node-meet {
  left: 9%;
  bottom: 4%;
}

#app[data-view="library"] .feature-node-listen {
  right: 7%;
  bottom: 5%;
}

#app[data-view="library"] .feature-motif {
  position: relative;
  z-index: 1;
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: rgba(237, 229, 216, 0.54);
  overflow: hidden;
}

#app[data-view="library"] .feature-motif i {
  position: absolute;
  display: block;
  pointer-events: none;
}

#app[data-view="library"] .feature-motif-scene i:nth-child(1),
#app[data-view="library"] .feature-motif-scene i:nth-child(2) {
  top: 18px;
  width: 42px;
  height: 34px;
  border: 2px solid rgba(61, 95, 132, 0.48);
  border-radius: 50%;
}

#app[data-view="library"] .feature-motif-scene i:nth-child(1) {
  left: 10px;
  transform: rotate(-18deg);
  background: rgba(169, 195, 218, 0.22);
}

#app[data-view="library"] .feature-motif-scene i:nth-child(2) {
  right: 8px;
  transform: rotate(18deg);
  background: rgba(233, 185, 191, 0.22);
}

#app[data-view="library"] .feature-motif-scene i:nth-child(3) {
  left: 14px;
  bottom: 13px;
  width: 44px;
  border-top: 2px dotted rgba(168, 132, 74, 0.48);
}

#app[data-view="library"] .feature-motif-scene i:nth-child(4) {
  right: 12px;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a8844a;
}

#app[data-view="library"] .feature-motif-daily {
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(231, 211, 109, 0.26), transparent 24%),
    rgba(247, 243, 236, 0.7);
}

#app[data-view="library"] .feature-motif-daily i:nth-child(1),
#app[data-view="library"] .feature-motif-daily i:nth-child(2) {
  inset: 12px;
  border: 2px solid rgba(61, 95, 132, 0.42);
  border-radius: 50%;
}

#app[data-view="library"] .feature-motif-daily i:nth-child(2) {
  inset: 23px;
  border-color: rgba(168, 132, 74, 0.46);
}

#app[data-view="library"] .feature-motif-daily i:nth-child(3) {
  left: 19px;
  top: 32px;
  width: 34px;
  height: 18px;
  border: 2px solid rgba(216, 106, 82, 0.3);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: rotate(-28deg);
}

#app[data-view="library"] .feature-motif-observe i:nth-child(1) {
  left: 13px;
  bottom: 12px;
  width: 46px;
  height: 46px;
  border-radius: 50% 50% 8px 8px;
  background: conic-gradient(from 200deg, rgba(216, 106, 82, 0.42), rgba(231, 211, 109, 0.4), rgba(169, 195, 218, 0.44), transparent 76%);
}

#app[data-view="library"] .feature-motif-observe i:nth-child(2) {
  left: 35px;
  top: 9px;
  height: 54px;
  border-left: 2px solid rgba(42, 69, 97, 0.44);
}

#app[data-view="library"] .feature-motif-observe i:nth-child(3),
#app[data-view="library"] .feature-motif-observe i:nth-child(4) {
  left: 18px;
  top: 26px;
  width: 38px;
  border-top: 1px solid rgba(168, 132, 74, 0.42);
}

#app[data-view="library"] .feature-motif-observe i:nth-child(3) {
  transform: rotate(28deg);
}

#app[data-view="library"] .feature-motif-observe i:nth-child(4) {
  transform: rotate(-28deg);
}

#app[data-view="library"] .feature-motif-meet i:nth-child(1),
#app[data-view="library"] .feature-motif-meet i:nth-child(2),
#app[data-view="library"] .feature-motif-meet i:nth-child(3),
#app[data-view="library"] .feature-motif-meet i:nth-child(4) {
  left: 31px;
  top: 11px;
  width: 16px;
  height: 46px;
  border-radius: 999px 999px 8px 8px;
  background: rgba(233, 185, 191, 0.36);
  transform-origin: 50% 76%;
}

#app[data-view="library"] .feature-motif-meet i:nth-child(2) {
  transform: rotate(58deg);
  background: rgba(169, 195, 218, 0.32);
}

#app[data-view="library"] .feature-motif-meet i:nth-child(3) {
  transform: rotate(116deg);
  background: rgba(231, 211, 109, 0.28);
}

#app[data-view="library"] .feature-motif-meet i:nth-child(4) {
  transform: rotate(174deg);
  background: rgba(216, 106, 82, 0.22);
}

#app[data-view="library"] .feature-motif-listen i:nth-child(1),
#app[data-view="library"] .feature-motif-listen i:nth-child(2) {
  top: 18px;
  width: 38px;
  height: 38px;
  border: 2px solid rgba(42, 69, 97, 0.42);
  border-radius: 50%;
  background: rgba(169, 195, 218, 0.16);
}

#app[data-view="library"] .feature-motif-listen i:nth-child(1) {
  left: 10px;
}

#app[data-view="library"] .feature-motif-listen i:nth-child(2) {
  right: 9px;
  border-color: rgba(168, 132, 74, 0.42);
  background: rgba(233, 185, 191, 0.16);
}

#app[data-view="library"] .feature-motif-listen i:nth-child(3) {
  left: 14px;
  top: 36px;
  width: 44px;
  height: 16px;
  border-top: 2px dotted rgba(42, 69, 97, 0.42);
  transform: rotate(-8deg);
}

#app[data-view="library"] .feature-node-daily b {
  background: #6a8fa8;
}

#app[data-view="library"] .feature-node-observe b {
  background: #a8844a;
}

#app[data-view="library"] .feature-node-meet b {
  background: #8a5b3d;
}

#app[data-view="library"] .feature-node-listen b {
  background: #3d5f84;
}

.floating-function-dock {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 20;
  display: flex;
  gap: 8px;
  align-items: center;
  max-width: calc(100vw - 28px);
  padding: 8px;
  border: 1px solid rgba(61, 95, 132, 0.14);
  border-radius: 999px;
  background: rgba(247, 243, 236, 0.84);
  box-shadow: 0 16px 46px rgba(42, 69, 97, 0.12);
  backdrop-filter: blur(14px);
  transform: translateX(-50%);
}

.floating-function-dock button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #2a4561;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition:
    background 280ms ease,
    border-color 280ms ease,
    transform 280ms ease;
}

.floating-function-dock button:hover,
.floating-function-dock button:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(168, 132, 74, 0.24);
  background: rgba(233, 185, 191, 0.22);
  outline: none;
}

.dock-dot {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  opacity: 0.82;
}

.dock-scene {
  border-radius: 45% 55% 48% 52%;
  color: #6a8fa8;
  box-shadow: 7px 0 0 -3px rgba(233, 185, 191, 0.72);
}

.dock-daily {
  color: #a8844a;
  box-shadow: inset 0 0 0 4px rgba(231, 211, 109, 0.3);
}

.dock-observe {
  color: #b45e3c;
  border-radius: 50% 50% 6px 6px;
}

.dock-meet {
  color: #6a8fa8;
  border-radius: 50% 50% 40% 40%;
  box-shadow: 0 -5px 0 -3px rgba(168, 132, 74, 0.8);
}

.dock-listen {
  color: #2a4561;
  box-shadow: 8px 0 0 -4px rgba(168, 132, 74, 0.65);
}

#app[data-view="library"] .feature-page-hero,
#app[data-view="library"] .observations-hero,
#app[data-view="library"] .profile-hero,
#app[data-view="library"] .observation-intro-card,
#app[data-view="library"] .result-head,
#app[data-view="library"] .listening-progress-card {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid rgba(61, 95, 132, 0.14);
  border-radius: 30px;
  background: rgba(247, 243, 236, 0.78);
  box-shadow: 0 14px 38px rgba(30, 26, 26, 0.06);
}

#app[data-view="library"] .feature-page-hero h1,
#app[data-view="library"] .observations-hero h1,
#app[data-view="library"] .profile-hero h1,
#app[data-view="library"] .observation-intro-card h1,
#app[data-view="library"] .listening-progress-card h1 {
  margin: 0;
  color: #2a4561;
  font-size: clamp(36px, 5vw, 62px);
  letter-spacing: 0.06em;
  line-height: 1.18;
  white-space: normal;
}

#app[data-view="library"] .feature-page-hero p,
#app[data-view="library"] .observations-hero p,
#app[data-view="library"] .profile-hero p,
#app[data-view="library"] .observation-intro-card p,
#app[data-view="library"] .listening-progress-card p {
  max-width: 720px;
  color: rgba(30, 26, 26, 0.72);
  line-height: 1.82;
}

#app[data-view="library"] .activities-view,
#app[data-view="library"] .listening-service-view,
#app[data-view="library"] .observations-view,
#app[data-view="library"] .creator-profile-view,
#app[data-view="library"] .daily-card-view {
  padding-bottom: 74px;
}

#app[data-view="library"] .listening-progress-card .abstract-motif {
  position: absolute;
  right: -42px;
  top: -40px;
  z-index: 0;
  width: 250px;
  height: 250px;
  opacity: 0.08;
}

#app[data-view="library"] .listening-progress-card > :not(.abstract-motif) {
  position: relative;
  z-index: 2;
}

#app[data-view="library"] .listening-progress-bar {
  position: relative;
  width: min(420px, 100%);
  height: 12px;
  margin: 22px 0 18px;
  overflow: hidden;
  border: 1px solid rgba(61, 95, 132, 0.16);
  border-radius: 999px;
  background: rgba(237, 229, 216, 0.72);
}

#app[data-view="library"] .listening-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6a8fa8, #a8844a);
}

#app[data-view="library"] .platform-logo {
  background: rgba(169, 195, 218, 0.18) !important;
  color: #2a4561 !important;
  border-color: rgba(61, 95, 132, 0.18) !important;
}

@media (min-width: 1101px) {
  .floating-function-dock {
    top: 18px;
    right: 22px;
    bottom: auto;
    left: auto;
    transform: none;
  }
}

@media (max-width: 1100px) {
  #app[data-view="library"] .home-star-hero {
    height: auto;
    min-height: 0;
    padding: 22px;
  }

  #app[data-view="library"] .home-star-copy,
  #app[data-view="library"] .function-star-map {
    position: relative;
    inset: auto;
  }

  #app[data-view="library"] .home-star-copy {
    left: auto;
    top: auto;
    max-width: none;
    margin-bottom: 18px;
  }

  #app[data-view="library"] .function-star-map {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  #app[data-view="library"] .function-star-map::before,
  #app[data-view="library"] .function-star-map::after {
    display: none;
  }

  #app[data-view="library"] .feature-node,
  #app[data-view="library"] .feature-node-scene,
  #app[data-view="library"] .feature-node-daily,
  #app[data-view="library"] .feature-node-observe,
  #app[data-view="library"] .feature-node-meet,
  #app[data-view="library"] .feature-node-listen {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    min-height: 128px;
    transform: none;
  }

  #app[data-view="library"] .feature-node-scene {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .floating-function-dock {
    bottom: 10px;
    width: calc(100vw - 20px);
    justify-content: space-between;
    gap: 3px;
    padding: 7px;
  }

  .floating-function-dock button {
    flex: 1;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 0 4px;
    font-size: 12px;
  }

  .dock-dot {
    width: 13px;
    height: 13px;
  }

  #app.surface[data-view="library"] {
    padding: 12px;
    border-radius: 24px;
  }

  #app[data-view="library"] .home-star-hero {
    padding: 14px;
    border-radius: 24px;
  }

  #app[data-view="library"] .home-star-copy {
    padding: 18px;
    border-radius: 22px;
  }

  #app[data-view="library"] .home-star-copy h1 {
    font-size: clamp(42px, 13vw, 58px);
    white-space: normal;
  }

  #app[data-view="library"] .home-star-copy .hero-lead {
    font-size: 14px;
  }

  #app[data-view="library"] .function-star-map {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  #app[data-view="library"] .feature-node {
    grid-template-columns: 56px minmax(0, 1fr);
    min-height: 116px;
    padding: 14px;
    border-radius: 22px;
  }

  #app[data-view="library"] .feature-motif {
    width: 56px;
    height: 56px;
    border-radius: 18px;
  }

  #app[data-view="library"] .feature-node strong {
    font-size: clamp(22px, 7vw, 28px);
  }

  #app[data-view="library"] .feature-node em {
    font-size: 13px;
    line-height: 1.5;
  }

  #app[data-view="library"] .feature-node b {
    min-height: 30px;
    padding: 0 12px;
    font-size: 12px;
  }

  #app[data-view="library"] .feature-page-hero,
  #app[data-view="library"] .observations-hero,
  #app[data-view="library"] .profile-hero,
  #app[data-view="library"] .observation-intro-card,
  #app[data-view="library"] .result-head,
  #app[data-view="library"] .listening-progress-card {
    padding: 22px;
    border-radius: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app[data-view="library"] *,
  .floating-function-dock,
  .floating-function-dock * {
    animation: none !important;
    transition: none !important;
  }
}

/* Highest-priority desktop readability pass: keep the brand panel clean and
   move the floating function map below it so no node covers title text. */
@media (min-width: 1101px) {
  #app[data-view="library"] .home-star-copy {
    left: 50%;
    top: clamp(20px, 3vh, 34px);
    width: min(660px, calc(100% - 96px));
    max-width: none;
    justify-items: center;
    text-align: center;
    transform: translateX(-50%);
  }

  #app[data-view="library"] .home-star-copy h1 {
    font-size: clamp(52px, 5.4vw, 72px);
    line-height: 1.04;
  }

  #app[data-view="library"] .home-star-copy .hero-lead {
    max-width: 520px;
  }

  #app[data-view="library"] .function-star-map {
    inset: clamp(242px, 30vh, 280px) 34px 34px;
  }

  #app[data-view="library"] .home-star-hero .star-map-orbit {
    top: 62%;
    opacity: 0.075;
  }

  #app[data-view="library"] .function-star-map::before,
  #app[data-view="library"] .function-star-map::after {
    top: 53%;
    opacity: 0.72;
  }

  #app[data-view="library"] .feature-node {
    min-height: 124px;
    padding: 14px;
  }

  #app[data-view="library"] .feature-node-scene {
    top: 52%;
    min-height: 138px;
  }

  #app[data-view="library"] .feature-node-daily,
  #app[data-view="library"] .feature-node-observe {
    top: 0;
  }

  #app[data-view="library"] .feature-node-meet,
  #app[data-view="library"] .feature-node-listen {
    bottom: 0;
  }

  #app[data-view="library"] .feature-node strong {
    font-size: clamp(23px, 2.1vw, 31px);
  }

  #app[data-view="library"] .feature-node em {
    font-size: 13px;
    line-height: 1.52;
  }
}

/* 2026-05-28: Homepage becomes a single-screen function galaxy.
   The home surface has one light brand strip and five distinct geometric nodes;
   internal pages keep the floating function dock. */
#app.surface[data-view="library"] {
  --font-brand-title: var(--font-brand);
  --font-brand-body: var(--font-body);
  --font-brand-soft: var(--font-hand);
}

#app[data-view="library"] :is(h1, h2, h3, .wordmark, .feature-node strong, .section-heading h2, .page-nav > span, .test-card h2, .activity-card h2, .result-name) {
  font-family: var(--font-brand) !important;
  font-weight: 400 !important;
}

#app[data-view="library"] :is(p, em, button, a, input, textarea, label, .feature-node b, .feature-node em) {
  font-family: var(--font-body);
}

#app[data-view="library"] .eyebrow,
#app[data-view="library"] .topbar-links button,
#app[data-view="library"] .topbar-links a {
  font-family: var(--font-ink);
  font-weight: 400;
}

#app[data-view="library"] .home-dispatch {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
}

#app[data-view="library"] .home-topbar {
  min-height: 42px;
  padding: 8px 16px;
  border-radius: 999px;
  justify-content: space-between;
  background: rgba(247, 243, 236, 0.7);
  border: 1px solid rgba(168, 132, 74, 0.18);
  box-shadow: none;
}

#app[data-view="library"] .home-topbar .wordmark {
  padding: 0;
  color: var(--color-deep-sea, #2a4561);
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: 19px;
  letter-spacing: 0.08em;
}

#app[data-view="library"] .home-topbar > span {
  color: rgba(42, 69, 97, 0.66);
  font-family: var(--font-ink);
  font-size: 13px;
  letter-spacing: 0.12em;
}

@media (min-width: 900px) {
  body[data-view="library"] {
    overflow: auto;
  }

  #app.surface[data-view="library"]:has(.home-dispatch) {
    height: calc(100vh - 88px);
    min-height: 650px;
    max-height: 940px;
    padding: clamp(14px, 1.5vw, 22px);
    overflow: hidden;
  }

  #app[data-view="library"] .home-star-hero {
    position: relative;
    min-height: 0;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 32px;
    background:
      radial-gradient(circle at 50% 50%, rgba(247, 243, 236, 0.88) 0 13%, transparent 14%),
      radial-gradient(circle at 48% 55%, rgba(169, 195, 218, 0.12), transparent 36%),
      radial-gradient(circle at 68% 24%, rgba(232, 215, 216, 0.18), transparent 28%),
      rgba(247, 243, 236, 0.42);
    box-shadow: inset 0 0 0 1px rgba(168, 132, 74, 0.14);
  }

  #app[data-view="library"] .home-star-hero::before {
    opacity: 0.18;
  }

  #app[data-view="library"] .home-star-copy {
    top: clamp(12px, 2.4vh, 24px);
    left: 50%;
    width: min(520px, 42vw);
    min-height: 0;
    padding: clamp(12px, 1.6vw, 18px) clamp(18px, 2.4vw, 30px);
    transform: translateX(-50%);
    text-align: center;
    border: 0;
    border-radius: 999px;
    background: rgba(247, 243, 236, 0.74);
    box-shadow: 0 12px 34px rgba(42, 69, 97, 0.07);
    backdrop-filter: blur(8px);
  }

  #app[data-view="library"] .home-star-copy .eyebrow {
    margin: 0 0 3px;
    font-size: clamp(13px, 1.2vw, 18px);
    letter-spacing: 0.12em;
    color: rgba(42, 69, 97, 0.62);
  }

  #app[data-view="library"] .home-star-copy h1 {
    margin: 0;
    font-size: clamp(44px, 5vw, 72px);
    line-height: 1.08;
    letter-spacing: 0.06em;
    color: var(--color-deep-sea, #2a4561);
    white-space: nowrap;
  }

  #app[data-view="library"] .home-star-copy .hero-lead {
    margin: 5px auto 0;
    max-width: 420px;
    color: rgba(30, 26, 26, 0.72);
    font-size: clamp(13px, 1.15vw, 16px);
    line-height: 1.45;
  }

  #app[data-view="library"] .function-star-map {
    position: absolute;
    inset: clamp(120px, 19vh, 168px) clamp(20px, 3vw, 48px) clamp(18px, 3vh, 34px);
    display: block;
    pointer-events: none;
  }

  #app[data-view="library"] .function-star-map::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(78vw, 900px);
    height: min(42vh, 390px);
    border: 1px dashed rgba(168, 132, 74, 0.22);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(-4deg);
    pointer-events: none;
  }

  #app[data-view="library"] .function-star-map::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(106, 143, 168, 0.34), rgba(168, 132, 74, 0.2), transparent);
    transform: rotate(-7deg);
    pointer-events: none;
  }

  #app[data-view="library"] .feature-node {
    position: absolute;
    display: grid;
    place-items: center;
    gap: 8px;
    width: clamp(168px, 17vw, 230px);
    min-height: clamp(154px, 18vh, 205px);
    padding: clamp(18px, 2vw, 24px);
    color: var(--color-deep-sea, #2a4561);
    background:
      radial-gradient(circle at 78% 14%, rgba(255, 255, 255, 0.7), transparent 30%),
      rgba(247, 243, 236, 0.82);
    border: 1px solid rgba(106, 143, 168, 0.22);
    box-shadow: 0 18px 44px rgba(42, 69, 97, 0.08);
    pointer-events: auto;
    overflow: visible;
    transform: translate(-50%, -50%);
    transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 520ms ease, border-color 520ms ease;
  }

  #app[data-view="library"] .feature-node::before,
  #app[data-view="library"] .feature-node::after {
    content: "";
    position: absolute;
    pointer-events: none;
    opacity: 0.45;
  }

  #app[data-view="library"] .feature-node:hover,
  #app[data-view="library"] .feature-node:focus-visible {
    transform: translate(-50%, calc(-50% - 6px));
    border-color: rgba(168, 132, 74, 0.36);
    box-shadow: 0 24px 58px rgba(42, 69, 97, 0.13);
  }

  #app[data-view="library"] .feature-node-copy {
    display: grid;
    justify-items: center;
    gap: 6px;
    max-width: 100%;
    text-align: center;
    position: relative;
    z-index: 2;
  }

  #app[data-view="library"] .feature-node strong {
    display: block;
    color: var(--color-deep-sea, #2a4561);
    font-size: clamp(26px, 2.6vw, 40px);
    line-height: 1.08;
    letter-spacing: 0.04em;
    text-wrap: balance;
  }

  #app[data-view="library"] .feature-node em {
    display: block;
    max-width: 14em;
    color: rgba(30, 26, 26, 0.72);
    font-size: clamp(12px, 1vw, 14px);
    font-style: normal;
    line-height: 1.48;
    text-wrap: pretty;
  }

  #app[data-view="library"] .feature-node b {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    margin-top: 2px;
    padding: 0 14px;
    color: #f7f3ec;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    border-radius: 999px;
    background: var(--color-deep-sea, #2a4561);
    box-shadow: 0 10px 22px rgba(42, 69, 97, 0.16);
  }

  #app[data-view="library"] .feature-motif {
    width: clamp(46px, 5vw, 70px);
    height: clamp(46px, 5vw, 70px);
    margin-bottom: 2px;
    border: 0;
    background: transparent;
    box-shadow: none;
    position: relative;
    z-index: 2;
  }

  #app[data-view="library"] .feature-node-scene {
    left: 50%;
    top: 50%;
    width: clamp(230px, 19vw, 285px);
    min-height: clamp(145px, 18vh, 176px);
    border-radius: 48% 52% 48% 52% / 60% 42% 58% 40%;
    background:
      radial-gradient(ellipse at 48% 18%, rgba(169, 195, 218, 0.18), transparent 42%),
      rgba(247, 243, 236, 0.88);
    z-index: 3;
  }

  #app[data-view="library"] .feature-node-scene::before {
    inset: 13px 20px;
    border: 1px solid rgba(106, 143, 168, 0.26);
    border-radius: 50%;
  }

  #app[data-view="library"] .feature-node-scene::after {
    width: 7px;
    height: 7px;
    right: 26px;
    top: 30px;
    border-radius: 50%;
    background: var(--color-antique-gold, #a8844a);
  }

  #app[data-view="library"] .feature-node-daily {
    left: 20%;
    top: 26%;
    border-radius: 50%;
    background:
      radial-gradient(circle, rgba(231, 211, 109, 0.22), transparent 38%),
      rgba(247, 243, 236, 0.9);
  }

  #app[data-view="library"] .feature-node-daily::before {
    inset: 18px;
    border: 2px solid rgba(168, 132, 74, 0.22);
    border-radius: 50%;
  }

  #app[data-view="library"] .feature-node-observe {
    left: 80%;
    top: 26%;
    border-radius: 32% 68% 40% 60% / 46% 42% 58% 54%;
    background:
      conic-gradient(from 210deg at 18% 92%, rgba(216, 106, 82, 0.24), rgba(231, 211, 109, 0.18), rgba(169, 195, 218, 0.22), transparent 44%),
      rgba(247, 243, 236, 0.9);
  }

  #app[data-view="library"] .feature-node-observe::before {
    left: 30px;
    top: 18px;
    bottom: 20px;
    border-left: 1px solid rgba(106, 143, 168, 0.36);
  }

  #app[data-view="library"] .feature-node-meet {
    left: 21%;
    top: 82%;
    width: clamp(176px, 18vw, 250px);
    border-radius: 62% 38% 58% 42% / 42% 54% 46% 58%;
    background:
      radial-gradient(ellipse at 38% 25%, rgba(233, 185, 191, 0.2), transparent 36%),
      rgba(247, 243, 236, 0.9);
  }

  #app[data-view="library"] .feature-node-meet::before {
    width: 76px;
    height: 76px;
    left: -10px;
    bottom: -10px;
    border-radius: 63% 37% 58% 42%;
    border: 1px solid rgba(168, 132, 74, 0.24);
  }

  #app[data-view="library"] .feature-node-listen {
    left: 79%;
    top: 82%;
    width: clamp(190px, 18vw, 260px);
    border-radius: 999px 48% 999px 48% / 48% 999px 48% 999px;
    background:
      radial-gradient(circle at 34% 44%, rgba(169, 195, 218, 0.2) 0 18%, transparent 19%),
      radial-gradient(circle at 62% 44%, rgba(168, 132, 74, 0.16) 0 18%, transparent 19%),
      rgba(247, 243, 236, 0.9);
  }

  #app[data-view="library"] .feature-node-listen::before {
    width: 76px;
    height: 48px;
    left: 24px;
    top: 22px;
    border: 1px solid rgba(106, 143, 168, 0.3);
    border-radius: 50%;
    box-shadow: 48px 0 0 -1px rgba(247, 243, 236, 0.05), 48px 0 0 0 rgba(168, 132, 74, 0.22);
  }
}

@media (max-width: 899px) {
  #app[data-view="library"] .home-dispatch {
    height: auto;
  }

  #app[data-view="library"] .home-topbar {
    display: flex;
  }

  #app[data-view="library"] .home-star-hero {
    min-height: 0;
  }
}

/* 2026-05-28: Crayon galaxy connections and collision-safe nodes. */
#app[data-view="library"] .galaxy-crayon-lines {
  position: absolute;
  inset: 2% 2% 1%;
  z-index: 1;
  width: 96%;
  height: 97%;
  overflow: visible;
  pointer-events: none;
}

#app[data-view="library"] .crayon-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-width: 7;
  opacity: 0.4;
  stroke-dasharray: 22 8 5 10;
  filter: drop-shadow(0 1px 0 rgba(247, 243, 236, 0.66));
}

#app[data-view="library"] .crayon-line-blue {
  stroke: rgba(106, 143, 168, 0.64);
}

#app[data-view="library"] .crayon-line-gold {
  stroke: rgba(168, 132, 74, 0.58);
}

#app[data-view="library"] .crayon-line-rose {
  stroke: rgba(216, 106, 82, 0.36);
}

#app[data-view="library"] .crayon-line-umber {
  stroke: rgba(138, 91, 61, 0.34);
}

#app[data-view="library"] .crayon-line-orbit {
  stroke: rgba(168, 132, 74, 0.28);
  stroke-width: 5;
  stroke-dasharray: 12 10 4 8;
}

#app[data-view="library"] .crayon-line-thread {
  stroke: rgba(61, 95, 132, 0.24);
  stroke-width: 4;
  stroke-dasharray: 8 11;
}

#app[data-view="library"] .crayon-line-thread-soft {
  stroke: rgba(168, 132, 74, 0.22);
  stroke-dasharray: 18 14 3 10;
}

#app[data-view="library"] .crayon-node {
  fill: rgba(168, 132, 74, 0.72);
  stroke: rgba(247, 243, 236, 0.92);
  stroke-width: 3;
}

#app[data-view="library"] .feature-node,
#app[data-view="library"] .feature-node-copy,
#app[data-view="library"] .feature-motif {
  z-index: 3;
}

#app[data-view="library"] .feature-node b {
  white-space: nowrap;
  word-break: keep-all;
}

@media (min-width: 900px) {
  #app[data-view="library"] .function-star-map::before,
  #app[data-view="library"] .function-star-map::after {
    z-index: 0;
  }

  #app[data-view="library"] .feature-node {
    width: clamp(156px, 15vw, 218px);
    min-height: clamp(130px, 15.5vh, 176px);
    padding: clamp(14px, 1.55vw, 21px);
  }

  #app[data-view="library"] .feature-node strong {
    font-size: clamp(24px, 2.25vw, 35px);
    line-height: 1.1;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  #app[data-view="library"] .feature-node em {
    max-width: 13em;
    font-size: clamp(11px, 0.92vw, 13px);
    line-height: 1.42;
  }

  #app[data-view="library"] .feature-node b {
    min-height: 28px;
    padding: 0 13px;
    font-size: 11px;
  }

  #app[data-view="library"] .feature-node-scene {
    left: 50%;
    top: 51%;
    width: clamp(214px, 17vw, 270px);
    min-height: clamp(132px, 15vh, 160px);
  }

  #app[data-view="library"] .feature-node-daily {
    left: clamp(136px, 16%, 240px);
    top: 20%;
  }

  #app[data-view="library"] .feature-node-observe {
    left: calc(100% - clamp(136px, 16%, 240px));
    top: 20%;
  }

  #app[data-view="library"] .feature-node-meet {
    left: clamp(146px, 17%, 260px);
    top: 86%;
    width: clamp(164px, 16vw, 232px);
  }

  #app[data-view="library"] .feature-node-listen {
    left: calc(100% - clamp(146px, 17%, 260px));
    top: 86%;
    width: clamp(176px, 16.5vw, 244px);
  }
}

@media (min-width: 900px) and (max-height: 760px) {
  #app.surface[data-view="library"]:has(.home-dispatch) {
    min-height: 610px;
    padding: 12px;
  }

  #app[data-view="library"] .home-dispatch {
    gap: 6px;
  }

  #app[data-view="library"] .home-topbar {
    min-height: 34px;
    padding: 5px 13px;
  }

  #app[data-view="library"] .home-star-copy {
    top: 8px;
    width: min(470px, 40vw);
    padding: 9px 22px 11px;
  }

  #app[data-view="library"] .home-star-copy .eyebrow {
    font-size: 13px;
  }

  #app[data-view="library"] .home-star-copy h1 {
    font-size: clamp(40px, 4.2vw, 60px);
  }

  #app[data-view="library"] .home-star-copy .hero-lead {
    font-size: 12px;
    margin-top: 3px;
  }

  #app[data-view="library"] .function-star-map {
    inset: 96px 26px 18px;
  }

  #app[data-view="library"] .feature-node {
    width: clamp(146px, 14vw, 196px);
    min-height: 122px;
    padding: 13px 15px;
    gap: 5px;
  }

  #app[data-view="library"] .feature-motif {
    width: 46px;
    height: 46px;
  }

  #app[data-view="library"] .feature-node strong {
    font-size: clamp(22px, 2vw, 30px);
  }

  #app[data-view="library"] .feature-node em {
    font-size: 11px;
    line-height: 1.35;
  }

  #app[data-view="library"] .feature-node-scene {
    width: clamp(196px, 16vw, 240px);
    min-height: 118px;
  }

  #app[data-view="library"] .feature-node-daily,
  #app[data-view="library"] .feature-node-observe {
    top: 19%;
  }

  #app[data-view="library"] .feature-node-meet,
  #app[data-view="library"] .feature-node-listen {
    top: 88%;
  }
}

@media (max-width: 899px) {
  body[data-view="library"] {
    overflow: auto;
  }

  #app.surface[data-view="library"]:has(.home-dispatch) {
    height: auto;
    min-height: calc(100vh - 24px);
    max-height: none;
    padding: 12px;
    overflow: visible;
  }

  #app[data-view="library"] .home-dispatch {
    height: auto;
    display: grid;
    grid-template-rows: auto auto;
    gap: 10px;
  }

  #app[data-view="library"] .home-topbar {
    min-height: 38px;
    padding: 7px 12px;
  }

  #app[data-view="library"] .home-topbar .wordmark {
    font-size: 17px;
  }

  #app[data-view="library"] .home-topbar > span {
    font-size: 12px;
  }

  #app[data-view="library"] .home-star-hero {
    min-height: 0;
    height: auto;
    padding: 14px 12px 22px;
    border-radius: 28px;
    overflow: hidden;
  }

  #app[data-view="library"] .background-motifs {
    opacity: 0.55;
  }

  #app[data-view="library"] .home-star-copy {
    position: relative;
    left: auto;
    top: auto;
    width: min(100%, 520px);
    min-height: 0;
    margin: 0 auto 22px;
    padding: 17px 16px 18px;
    transform: none;
    text-align: center;
    border: 1px solid rgba(106, 143, 168, 0.16);
    border-radius: 30px;
    background: rgba(247, 243, 236, 0.84);
    box-shadow: 0 14px 32px rgba(42, 69, 97, 0.08);
    backdrop-filter: blur(8px);
  }

  #app[data-view="library"] .home-star-copy .eyebrow {
    margin-bottom: 4px;
    font-size: 13px;
    letter-spacing: 0.12em;
  }

  #app[data-view="library"] .home-star-copy h1 {
    margin: 0;
    font-size: clamp(38px, 14vw, 58px);
    line-height: 1.1;
    letter-spacing: 0.06em;
    white-space: normal;
    word-break: keep-all;
  }

  #app[data-view="library"] .home-star-copy .hero-lead {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.55;
  }

  #app[data-view="library"] .function-star-map {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 8px 10px 12px;
    pointer-events: auto;
  }

  #app[data-view="library"] .galaxy-crayon-lines {
    display: none;
  }

  #app[data-view="library"] .function-star-map::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 22px;
    bottom: 24px;
    width: 12px;
    border-radius: 999px;
    background:
      linear-gradient(180deg, rgba(106, 143, 168, 0.14), rgba(168, 132, 74, 0.22), rgba(216, 106, 82, 0.12)),
      repeating-linear-gradient(180deg, rgba(42, 69, 97, 0.12) 0 7px, transparent 7px 15px);
    transform: translateX(-50%) rotate(-2deg);
    pointer-events: none;
    z-index: 0;
  }

  #app[data-view="library"] .function-star-map::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 38px;
    bottom: 38px;
    border-left: 2px dashed rgba(168, 132, 74, 0.26);
    transform: translateX(-50%) rotate(2deg);
    pointer-events: none;
    z-index: 0;
  }

  #app[data-view="library"] .feature-node,
  #app[data-view="library"] .feature-node-scene,
  #app[data-view="library"] .feature-node-daily,
  #app[data-view="library"] .feature-node-observe,
  #app[data-view="library"] .feature-node-meet,
  #app[data-view="library"] .feature-node-listen {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    place-items: center stretch;
    align-items: center;
    justify-items: stretch;
    gap: 14px;
    width: min(100%, 430px) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 18px 18px 20px !important;
    transform: none !important;
    overflow: hidden;
    z-index: 2;
  }

  #app[data-view="library"] .feature-node:hover,
  #app[data-view="library"] .feature-node:focus-visible {
    transform: translateY(-3px) !important;
  }

  #app[data-view="library"] .feature-node-copy {
    justify-items: start;
    gap: 6px;
    text-align: left;
  }

  #app[data-view="library"] .feature-node strong {
    font-size: clamp(25px, 8.5vw, 36px);
    line-height: 1.12;
    letter-spacing: 0.04em;
    word-break: keep-all;
    overflow-wrap: normal;
    text-wrap: balance;
  }

  #app[data-view="library"] .feature-node em {
    max-width: 100%;
    font-size: 13px;
    line-height: 1.45;
    text-wrap: pretty;
  }

  #app[data-view="library"] .feature-node b {
    min-height: 30px;
    margin-top: 1px;
    padding: 0 13px;
    font-size: 12px;
    white-space: nowrap;
  }

  #app[data-view="library"] .feature-motif {
    width: 58px;
    height: 58px;
    margin: 0;
  }

  #app[data-view="library"] .feature-node-scene {
    border-radius: 48% 52% 43% 57% / 55% 43% 57% 45%;
  }

  #app[data-view="library"] .feature-node-daily {
    border-radius: 999px;
  }

  #app[data-view="library"] .feature-node-observe {
    border-radius: 34% 66% 44% 56% / 46% 42% 58% 54%;
  }

  #app[data-view="library"] .feature-node-meet {
    border-radius: 62% 38% 58% 42% / 42% 54% 46% 58%;
  }

  #app[data-view="library"] .feature-node-listen {
    border-radius: 999px 46% 999px 46% / 46% 999px 46% 999px;
  }

  #app[data-view="library"] .feature-node::before,
  #app[data-view="library"] .feature-node::after {
    opacity: 0.25;
  }
}

/* Narrow screens still use a one-screen galaxy, not a scrolling list. */
@media (max-width: 899px) {
  html:has(body[data-view="library"] .home-dispatch),
  body[data-view="library"] {
    height: 100dvh;
    overflow: hidden;
  }

  #app.surface[data-view="library"]:has(.home-dispatch) {
    height: 100dvh;
    min-height: 640px;
    max-height: none;
    padding: 10px;
    overflow: hidden;
  }

  #app[data-view="library"] .home-dispatch {
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
  }

  #app[data-view="library"] .home-topbar {
    min-height: 34px;
    padding: 5px 12px;
  }

  #app[data-view="library"] .home-topbar .wordmark {
    font-size: 16px;
  }

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

  #app[data-view="library"] .home-star-copy {
    position: absolute;
    left: 50%;
    top: 12px;
    width: min(340px, calc(100% - 36px));
    margin: 0;
    padding: 10px 14px 12px;
    transform: translateX(-50%);
    border-radius: 28px;
    z-index: 4;
  }

  #app[data-view="library"] .home-star-copy .eyebrow {
    margin: 0 0 2px;
    font-size: 11px;
  }

  #app[data-view="library"] .home-star-copy h1 {
    font-size: clamp(34px, 11vw, 48px);
    line-height: 1.08;
    white-space: nowrap;
  }

  #app[data-view="library"] .home-star-copy .hero-lead {
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.36;
  }

  #app[data-view="library"] .function-star-map {
    position: absolute;
    inset: 112px 10px 12px;
    display: block;
    padding: 0;
    pointer-events: none;
  }

  #app[data-view="library"] .galaxy-crayon-lines {
    display: block;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.72;
  }

  #app[data-view="library"] .crayon-line {
    stroke-width: 6;
    opacity: 0.42;
  }

  #app[data-view="library"] .crayon-line-orbit,
  #app[data-view="library"] .crayon-line-thread {
    stroke-width: 3;
  }

  #app[data-view="library"] .function-star-map::before {
    left: 50%;
    top: 50%;
    width: min(92vw, 430px);
    height: min(52vh, 360px);
    border: 1px dashed rgba(168, 132, 74, 0.22);
    border-radius: 50%;
    background: transparent;
    transform: translate(-50%, -50%) rotate(-7deg);
  }

  #app[data-view="library"] .function-star-map::after {
    left: 8%;
    right: 8%;
    top: 50%;
    bottom: auto;
    height: 1px;
    border-left: 0;
    background: linear-gradient(90deg, transparent, rgba(106, 143, 168, 0.28), rgba(168, 132, 74, 0.2), transparent);
    transform: rotate(-9deg);
  }

  #app[data-view="library"] .feature-node,
  #app[data-view="library"] .feature-node-scene,
  #app[data-view="library"] .feature-node-daily,
  #app[data-view="library"] .feature-node-observe,
  #app[data-view="library"] .feature-node-meet,
  #app[data-view="library"] .feature-node-listen {
    position: absolute !important;
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    align-items: center;
    justify-items: center;
    width: clamp(142px, 38vw, 174px) !important;
    min-height: 106px !important;
    margin: 0 !important;
    padding: 11px 12px !important;
    overflow: hidden;
    transform: translate(-50%, -50%) !important;
    pointer-events: auto;
  }

  #app[data-view="library"] .feature-node:hover,
  #app[data-view="library"] .feature-node:focus-visible {
    transform: translate(-50%, calc(-50% - 3px)) !important;
  }

  #app[data-view="library"] .feature-motif {
    position: absolute;
    left: 12px;
    top: 50%;
    width: 46px;
    height: 46px;
    opacity: 0.38;
    transform: translateY(-50%);
  }

  #app[data-view="library"] .feature-node-copy {
    width: 100%;
    gap: 3px;
    text-align: center;
    justify-items: center;
  }

  #app[data-view="library"] .feature-node strong {
    width: 100%;
    font-size: clamp(21px, 5.4vw, 27px);
    line-height: 1.03;
    letter-spacing: 0.03em;
  }

  #app[data-view="library"] .feature-node em {
    font-size: 10.5px;
    line-height: 1.28;
    max-width: 12.5em;
  }

  #app[data-view="library"] .feature-node b {
    min-height: 25px;
    padding: 0 10px;
    font-size: 10.5px;
    line-height: 1;
  }

  #app[data-view="library"] .feature-node-scene {
    left: 50% !important;
    top: 50% !important;
    width: clamp(168px, 43vw, 205px) !important;
    min-height: 112px !important;
  }

  #app[data-view="library"] .feature-node-scene strong {
    font-size: clamp(24px, 6vw, 30px);
  }

  #app[data-view="library"] .feature-node-daily {
    left: 24% !important;
    top: 20% !important;
  }

  #app[data-view="library"] .feature-node-observe {
    left: 76% !important;
    top: 20% !important;
  }

  #app[data-view="library"] .feature-node-meet {
    left: 24% !important;
    top: 84% !important;
  }

  #app[data-view="library"] .feature-node-listen {
    left: 76% !important;
    top: 84% !important;
  }
}

@media (max-width: 420px) {
  #app.surface[data-view="library"]:has(.home-dispatch) {
    min-height: 610px;
    padding: 8px;
  }

  #app[data-view="library"] .home-star-copy {
    width: calc(100% - 24px);
    top: 9px;
    padding: 9px 12px 10px;
  }

  #app[data-view="library"] .home-star-copy h1 {
    font-size: clamp(30px, 10.5vw, 40px);
  }

  #app[data-view="library"] .function-star-map {
    inset: 102px 8px 10px;
  }

  #app[data-view="library"] .feature-node,
  #app[data-view="library"] .feature-node-daily,
  #app[data-view="library"] .feature-node-observe,
  #app[data-view="library"] .feature-node-meet,
  #app[data-view="library"] .feature-node-listen {
    width: 140px !important;
    min-height: 98px !important;
    padding: 9px 10px !important;
    grid-template-columns: 1fr;
    gap: 4px;
  }

  #app[data-view="library"] .feature-node-scene {
    width: 158px !important;
    min-height: 102px !important;
  }

  #app[data-view="library"] .feature-motif {
    left: 9px;
    width: 36px;
    height: 36px;
  }

  #app[data-view="library"] .feature-node strong {
    font-size: 20px;
  }

  #app[data-view="library"] .feature-node em {
    display: none;
  }
}

/* v8: four-node galaxy map. Relationship observation is part of tests; listening lives in test progress. */
#app[data-view="library"] .function-star-map {
  inset: clamp(14px, 2.5vh, 30px) clamp(28px, 4vw, 92px) clamp(20px, 3vh, 40px) !important;
}

#app[data-view="library"] .galaxy-crayon-lines {
  opacity: 0.82 !important;
}

#app[data-view="library"] .crayon-line {
  stroke-dasharray: 18 18 !important;
  stroke-linecap: round !important;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.38)) !important;
}

#app[data-view="library"] .crayon-line-blue,
#app[data-view="library"] .crayon-line-gold {
  stroke-width: clamp(6px, 0.72vw, 12px) !important;
  opacity: 0.34 !important;
}

#app[data-view="library"] .crayon-line-rose {
  stroke-width: clamp(5px, 0.62vw, 10px) !important;
  opacity: 0.26 !important;
}

#app[data-view="library"] .crayon-line-orbit {
  stroke-width: clamp(4px, 0.48vw, 8px) !important;
  opacity: 0.34 !important;
}

#app[data-view="library"] .crayon-line-thread,
#app[data-view="library"] .crayon-line-thread-soft {
  stroke-width: clamp(3px, 0.42vw, 7px) !important;
  opacity: 0.24 !important;
}

#app[data-view="library"] .feature-node,
#app[data-view="library"] .feature-node-daily,
#app[data-view="library"] .feature-node-meet,
#app[data-view="library"] .feature-node-about {
  width: clamp(250px, 18vw, 365px) !important;
  min-height: clamp(154px, 19vh, 220px) !important;
  padding: clamp(18px, 1.9vw, 30px) clamp(22px, 2.1vw, 36px) !important;
}

#app[data-view="library"] .feature-node-scene {
  left: 50% !important;
  top: 51% !important;
  width: clamp(282px, 22vw, 430px) !important;
  min-height: clamp(168px, 22vh, 250px) !important;
  border-radius: 50% / 43% !important;
}

#app[data-view="library"] .feature-node-daily {
  left: 22% !important;
  top: 25% !important;
  border-radius: 55% 45% 50% 50% / 46% 58% 42% 54% !important;
}

#app[data-view="library"] .feature-node-meet {
  left: 25% !important;
  top: 77% !important;
  border-radius: 42% 58% 48% 52% / 54% 46% 54% 46% !important;
}

#app[data-view="library"] .feature-node-about {
  left: 78% !important;
  top: 50% !important;
  border-radius: 50% 50% 46% 54% / 34% 66% 34% 66% !important;
}

#app[data-view="library"] .feature-node-observe,
#app[data-view="library"] .feature-node-listen {
  display: none !important;
}

#app[data-view="library"] .feature-node-copy {
  width: min(100%, 16em) !important;
  gap: clamp(5px, 0.7vh, 9px) !important;
}

#app[data-view="library"] .feature-node strong {
  font-size: clamp(31px, 2.55vw, 48px) !important;
  line-height: 1.08 !important;
  white-space: nowrap !important;
}

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

#app[data-view="library"] .feature-node em {
  max-width: 14.5em !important;
  font-size: clamp(13px, 0.95vw, 16px) !important;
  line-height: 1.42 !important;
}

#app[data-view="library"] .feature-node b {
  min-height: clamp(32px, 4vh, 42px) !important;
  padding: 0 clamp(16px, 1.4vw, 24px) !important;
  font-size: clamp(12px, 0.9vw, 14px) !important;
}

#app[data-view="library"] .feature-motif {
  width: clamp(132px, 12vw, 220px) !important;
  height: clamp(132px, 12vw, 220px) !important;
  opacity: 0.14 !important;
}

#app[data-view="library"] .feature-node-scene .feature-motif {
  width: clamp(156px, 14vw, 260px) !important;
  height: clamp(156px, 14vw, 260px) !important;
}

#app[data-view="library"] .feature-motif-about i {
  position: absolute;
  border-radius: 999px;
  border: 2px solid rgba(42, 69, 97, 0.46);
}

#app[data-view="library"] .feature-motif-about i:nth-child(1) {
  inset: 16% 18% 24% 18%;
}

#app[data-view="library"] .feature-motif-about i:nth-child(2) {
  left: 30%;
  top: 17%;
  width: 35%;
  height: 66%;
  border-color: rgba(168, 132, 74, 0.42);
  transform: rotate(28deg);
}

#app[data-view="library"] .feature-motif-about i:nth-child(3) {
  left: 18%;
  top: 42%;
  width: 64%;
  height: 22%;
  border-color: rgba(216, 106, 82, 0.30);
}

#app[data-view="library"] .feature-motif-about i:nth-child(4) {
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  background: rgba(168, 132, 74, 0.62);
  border: 0;
  transform: translate(-50%, -50%);
}

#app[data-view="library"] .feature-node-about b {
  background: #a8844a !important;
}

.dock-about {
  color: #a8844a;
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 4px rgba(169, 195, 218, 0.22),
    7px 0 0 -4px rgba(216, 106, 82, 0.62);
}

#app[data-view="library"] .testing-progress-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  overflow: hidden;
  padding: clamp(18px, 2.1vw, 28px);
  border: 1px solid rgba(168, 132, 74, 0.22);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 30%, rgba(169, 195, 218, 0.14), transparent 32%),
    radial-gradient(circle at 88% 20%, rgba(233, 185, 191, 0.13), transparent 32%),
    rgba(247, 243, 236, 0.82);
  box-shadow: 0 12px 34px rgba(30, 26, 26, 0.06);
}

#app[data-view="library"] .testing-progress-panel > div,
#app[data-view="library"] .testing-progress-panel > button {
  position: relative;
  z-index: 2;
}

#app[data-view="library"] .testing-progress-panel h2 {
  margin-top: 2px;
  color: #2a4561;
  font-family: var(--font-brand) !important;
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 400;
  line-height: 1.16;
}

#app[data-view="library"] .testing-progress-panel p:not(.eyebrow) {
  max-width: 680px;
  margin-top: 8px;
  color: rgba(30, 26, 26, 0.72);
  line-height: 1.7;
}

#app[data-view="library"] .testing-progress-motif {
  position: absolute;
  right: clamp(18px, 4vw, 72px);
  top: 50%;
  width: clamp(170px, 18vw, 280px);
  height: clamp(130px, 14vw, 220px);
  opacity: 0.10;
  transform: translateY(-50%);
}

@media (min-width: 900px) and (max-height: 760px) {
  #app[data-view="library"] .function-star-map {
    inset: 8px 42px 12px !important;
  }

  #app[data-view="library"] .feature-node,
  #app[data-view="library"] .feature-node-daily,
  #app[data-view="library"] .feature-node-meet,
  #app[data-view="library"] .feature-node-about {
    width: clamp(220px, 16vw, 320px) !important;
    min-height: 132px !important;
    padding: 14px 20px !important;
  }

  #app[data-view="library"] .feature-node-scene {
    width: clamp(250px, 19vw, 370px) !important;
    min-height: 146px !important;
  }

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

  #app[data-view="library"] .feature-node-scene strong {
    font-size: clamp(30px, 2.45vw, 46px) !important;
  }

  #app[data-view="library"] .feature-node em {
    font-size: 12px !important;
    line-height: 1.32 !important;
  }

  #app[data-view="library"] .feature-node-daily {
    left: 21% !important;
    top: 24% !important;
  }

  #app[data-view="library"] .feature-node-meet {
    left: 25% !important;
    top: 76% !important;
  }
}

@media (max-width: 899px) {
  #app[data-view="library"] .feature-node-observe,
  #app[data-view="library"] .feature-node-listen {
    display: none !important;
  }

  #app[data-view="library"] .feature-node-scene {
    left: 50% !important;
    top: 50% !important;
  }

  #app[data-view="library"] .feature-node-daily {
    left: 27% !important;
    top: 18% !important;
  }

  #app[data-view="library"] .feature-node-about {
    left: 73% !important;
    top: 18% !important;
  }

  #app[data-view="library"] .feature-node-meet {
    left: 50% !important;
    top: 82% !important;
  }

  #app[data-view="library"] .feature-node,
  #app[data-view="library"] .feature-node-daily,
  #app[data-view="library"] .feature-node-meet,
  #app[data-view="library"] .feature-node-about {
    width: clamp(136px, 38vw, 178px) !important;
    min-height: 100px !important;
    padding: 10px 12px !important;
  }

  #app[data-view="library"] .feature-node-scene {
    width: clamp(166px, 45vw, 212px) !important;
    min-height: 112px !important;
  }

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

  #app[data-view="library"] .feature-node em {
    font-size: 10px !important;
    line-height: 1.22 !important;
  }

  #app[data-view="library"] .feature-node b {
    min-height: 24px !important;
    font-size: 10px !important;
  }

  #app[data-view="library"] .testing-progress-panel {
    grid-template-columns: 1fr;
  }
}

/* 2026-05-28: Open galaxy stage. The brand lives in the top strip only;
   the center of the page belongs to the connected function constellation. */
#app[data-view="library"] .home-star-copy {
  display: none !important;
}

@media (min-width: 900px) {
  #app[data-view="library"] .home-topbar {
    min-height: 40px;
    padding: 7px 18px;
  }

  #app[data-view="library"] .home-topbar .wordmark {
    font-size: clamp(20px, 1.55vw, 28px);
  }

  #app[data-view="library"] .home-star-hero {
    background:
      radial-gradient(circle at 50% 50%, rgba(247, 243, 236, 0.82) 0 16%, transparent 17%),
      radial-gradient(circle at 48% 52%, rgba(169, 195, 218, 0.13), transparent 38%),
      radial-gradient(circle at 70% 22%, rgba(232, 215, 216, 0.18), transparent 30%),
      rgba(247, 243, 236, 0.42);
  }

  #app[data-view="library"] .function-star-map {
    inset: clamp(14px, 2vh, 24px) clamp(24px, 3.6vw, 74px) clamp(20px, 3vh, 44px);
  }

  #app[data-view="library"] .galaxy-crayon-lines {
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.78;
  }

  #app[data-view="library"] .crayon-line {
    stroke-width: 8;
    opacity: 0.44;
  }

  #app[data-view="library"] .crayon-line-orbit {
    stroke-width: 6;
    opacity: 0.34;
  }

  #app[data-view="library"] .crayon-line-thread {
    stroke-width: 5;
    opacity: 0.34;
  }

  #app[data-view="library"] .feature-node {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 7px;
    width: clamp(230px, 18vw, 390px);
    min-height: clamp(170px, 22vh, 270px);
    padding: clamp(22px, 2.6vw, 36px) clamp(24px, 3vw, 44px);
    overflow: hidden;
  }

  #app[data-view="library"] .feature-node-copy {
    width: min(100%, 17em);
    justify-items: center;
    text-align: center;
    gap: 7px;
  }

  #app[data-view="library"] .feature-motif {
    position: absolute;
    left: clamp(18px, 2vw, 34px);
    top: 50%;
    width: clamp(88px, 8vw, 150px);
    height: clamp(88px, 8vw, 150px);
    margin: 0;
    opacity: 0.28;
    transform: translateY(-50%);
    z-index: 1;
  }

  #app[data-view="library"] .feature-node strong {
    width: 100%;
    font-size: clamp(34px, 3.25vw, 58px);
    line-height: 1.06;
  }

  #app[data-view="library"] .feature-node em {
    max-width: 16em;
    font-size: clamp(13px, 1.12vw, 18px);
    line-height: 1.5;
  }

  #app[data-view="library"] .feature-node b {
    min-height: 36px;
    margin-top: 4px;
    padding: 0 18px;
    font-size: clamp(12px, 0.95vw, 15px);
  }

  #app[data-view="library"] .feature-node-scene {
    left: 50%;
    top: 50%;
    width: clamp(270px, 20vw, 440px);
    min-height: clamp(178px, 23vh, 292px);
  }

  #app[data-view="library"] .feature-node-scene .feature-motif {
    left: clamp(22px, 2.2vw, 42px);
    width: clamp(100px, 9vw, 165px);
    height: clamp(100px, 9vw, 165px);
    opacity: 0.26;
  }

  #app[data-view="library"] .feature-node-scene strong {
    font-size: clamp(38px, 3.4vw, 64px);
  }

  #app[data-view="library"] .feature-node-daily {
    left: clamp(170px, 18%, 350px);
    top: 27%;
  }

  #app[data-view="library"] .feature-node-observe {
    left: calc(100% - clamp(170px, 18%, 350px));
    top: 27%;
  }

  #app[data-view="library"] .feature-node-meet {
    left: clamp(180px, 20%, 390px);
    top: 76%;
    width: clamp(240px, 18vw, 390px);
  }

  #app[data-view="library"] .feature-node-listen {
    left: calc(100% - clamp(180px, 20%, 390px));
    top: 76%;
    width: clamp(250px, 18.5vw, 410px);
  }
}

@media (min-width: 900px) and (max-height: 760px) {
  #app[data-view="library"] .function-star-map {
    inset: 10px 34px 18px;
  }

  #app[data-view="library"] .feature-node {
    width: clamp(196px, 16vw, 310px);
    min-height: 142px;
    padding: 18px 22px;
  }

  #app[data-view="library"] .feature-node strong {
    font-size: clamp(29px, 2.6vw, 44px);
  }

  #app[data-view="library"] .feature-node em {
    font-size: clamp(12px, 1vw, 15px);
    line-height: 1.38;
  }

  #app[data-view="library"] .feature-motif {
    width: clamp(72px, 7vw, 112px);
    height: clamp(72px, 7vw, 112px);
  }

  #app[data-view="library"] .feature-node-scene {
    width: clamp(230px, 18vw, 350px);
    min-height: 152px;
  }

  #app[data-view="library"] .feature-node-scene strong {
    font-size: clamp(32px, 2.8vw, 48px);
  }

  #app[data-view="library"] .feature-node-daily,
  #app[data-view="library"] .feature-node-observe {
    top: 26%;
  }

  #app[data-view="library"] .feature-node-meet,
  #app[data-view="library"] .feature-node-listen {
    top: 77%;
  }
}

@media (max-width: 899px) {
  #app[data-view="library"] .function-star-map {
    inset: 12px 8px 10px;
  }

  #app[data-view="library"] .feature-node,
  #app[data-view="library"] .feature-node-scene,
  #app[data-view="library"] .feature-node-daily,
  #app[data-view="library"] .feature-node-observe,
  #app[data-view="library"] .feature-node-meet,
  #app[data-view="library"] .feature-node-listen {
    width: clamp(158px, 39vw, 196px) !important;
    min-height: 120px !important;
    padding: 13px 14px !important;
  }

  #app[data-view="library"] .feature-node strong {
    font-size: clamp(23px, 6vw, 31px);
  }

  #app[data-view="library"] .feature-node em {
    font-size: 11px;
  }

  #app[data-view="library"] .feature-motif {
    width: 58px;
    height: 58px;
    opacity: 0.22;
  }

  #app[data-view="library"] .feature-node-scene {
    width: clamp(180px, 45vw, 230px) !important;
    min-height: 128px !important;
  }

  #app[data-view="library"] .feature-node-daily {
    left: 24% !important;
    top: 17% !important;
  }

  #app[data-view="library"] .feature-node-observe {
    left: 76% !important;
    top: 17% !important;
  }

  #app[data-view="library"] .feature-node-scene {
    left: 50% !important;
    top: 50% !important;
  }

  #app[data-view="library"] .feature-node-meet {
    left: 24% !important;
    top: 83% !important;
  }

  #app[data-view="library"] .feature-node-listen {
    left: 76% !important;
    top: 83% !important;
  }
}

@media (max-width: 420px) {
  #app[data-view="library"] .feature-node,
  #app[data-view="library"] .feature-node-daily,
  #app[data-view="library"] .feature-node-observe,
  #app[data-view="library"] .feature-node-meet,
  #app[data-view="library"] .feature-node-listen {
    width: 146px !important;
    min-height: 104px !important;
    padding: 10px 11px !important;
  }

  #app[data-view="library"] .feature-node-scene {
    width: 164px !important;
    min-height: 110px !important;
  }

  #app[data-view="library"] .feature-node strong {
    font-size: 21px;
  }

  #app[data-view="library"] .feature-node em {
    display: none;
  }
}

/* 2026-05-28 v7: Single-screen open galaxy.
   Remove the central brand plaque and let the five functions become the page. */
html:has(body[data-view="library"] .home-dispatch),
body[data-view="library"]:has(.home-dispatch) {
  height: 100dvh !important;
  overflow: hidden !important;
}

#app.surface[data-view="library"]:has(.home-dispatch) {
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
  padding: clamp(8px, 1.2vw, 18px) !important;
  overflow: hidden !important;
}

#app[data-view="library"] .home-dispatch {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: clamp(7px, 1vh, 12px) !important;
  overflow: hidden !important;
}

#app[data-view="library"] .home-star-copy {
  display: none !important;
}

#app[data-view="library"] .home-topbar {
  min-height: clamp(34px, 4.8vh, 48px) !important;
  padding: 6px clamp(12px, 1.6vw, 22px) !important;
  border-radius: 999px !important;
}

#app[data-view="library"] .home-topbar .wordmark {
  font-family: var(--font-brand) !important;
  font-size: clamp(18px, 1.55vw, 28px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
}

#app[data-view="library"] .home-topbar > span {
  font-family: var(--font-body) !important;
  font-size: clamp(11px, 0.85vw, 13px) !important;
}

#app[data-view="library"] .home-star-hero {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: clamp(24px, 2.4vw, 36px) !important;
}

#app[data-view="library"] .function-star-map {
  position: absolute !important;
  inset: clamp(12px, 2vh, 28px) clamp(18px, 3.2vw, 70px) clamp(16px, 2.8vh, 34px) !important;
  display: block !important;
  padding: 0 !important;
  pointer-events: none !important;
}

#app[data-view="library"] .galaxy-crayon-lines,
#app[data-view="library"] .function-star-map::before,
#app[data-view="library"] .function-star-map::after {
  pointer-events: none !important;
}

#app[data-view="library"] .galaxy-crayon-lines {
  display: block !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0.76 !important;
  z-index: 0 !important;
}

#app[data-view="library"] .crayon-line {
  stroke-linecap: round !important;
  stroke-width: clamp(5px, 0.55vw, 10px) !important;
  opacity: 0.38 !important;
}

#app[data-view="library"] .crayon-line-orbit {
  stroke-width: clamp(3px, 0.35vw, 6px) !important;
  opacity: 0.28 !important;
}

#app[data-view="library"] .crayon-line-thread {
  stroke-width: clamp(3px, 0.35vw, 5px) !important;
  opacity: 0.28 !important;
}

#app[data-view="library"] .function-star-map::before {
  left: 50% !important;
  top: 50% !important;
  width: min(78vw, 1120px) !important;
  height: min(66vh, 620px) !important;
  border: 1px dashed rgba(168, 132, 74, 0.20) !important;
  border-radius: 50% !important;
  background: transparent !important;
  transform: translate(-50%, -50%) rotate(-4deg) !important;
}

#app[data-view="library"] .function-star-map::after {
  left: 50% !important;
  top: 50% !important;
  width: min(48vw, 700px) !important;
  height: min(40vh, 410px) !important;
  border: 1px solid rgba(106, 143, 168, 0.12) !important;
  border-radius: 50% !important;
  background: transparent !important;
  transform: translate(-50%, -50%) rotate(7deg) !important;
}

#app[data-view="library"] .feature-node,
#app[data-view="library"] .feature-node-scene,
#app[data-view="library"] .feature-node-daily,
#app[data-view="library"] .feature-node-observe,
#app[data-view="library"] .feature-node-meet,
#app[data-view="library"] .feature-node-listen {
  position: absolute !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: center !important;
  justify-items: center !important;
  gap: clamp(5px, 0.8vh, 9px) !important;
  width: clamp(220px, 15vw, 320px) !important;
  min-height: clamp(138px, 17vh, 190px) !important;
  margin: 0 !important;
  padding: clamp(16px, 1.7vw, 28px) clamp(18px, 1.9vw, 32px) !important;
  overflow: hidden !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: auto !important;
  text-align: center !important;
  z-index: 2 !important;
}

#app[data-view="library"] .feature-node:hover,
#app[data-view="library"] .feature-node:focus-visible {
  transform: translate(-50%, calc(-50% - 5px)) !important;
}

#app[data-view="library"] .feature-node-copy {
  width: min(100%, 15em) !important;
  display: grid !important;
  justify-items: center !important;
  gap: clamp(4px, 0.7vh, 8px) !important;
  text-align: center !important;
  z-index: 3 !important;
}

#app[data-view="library"] .feature-motif {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: clamp(96px, 9vw, 170px) !important;
  height: clamp(96px, 9vw, 170px) !important;
  margin: 0 !important;
  opacity: 0.18 !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

#app[data-view="library"] .feature-node strong {
  width: 100% !important;
  color: var(--home-blue) !important;
  font-family: var(--font-brand) !important;
  font-size: clamp(28px, 2.35vw, 44px) !important;
  font-weight: 400 !important;
  line-height: 1.06 !important;
  letter-spacing: 0.045em !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
}

#app[data-view="library"] .feature-node em {
  width: min(100%, 15em) !important;
  color: rgba(30, 26, 26, 0.72) !important;
  font-family: var(--font-body) !important;
  font-size: clamp(12px, 0.9vw, 15px) !important;
  font-style: normal !important;
  line-height: 1.48 !important;
  letter-spacing: 0.02em !important;
  text-wrap: balance !important;
}

#app[data-view="library"] .feature-node b {
  min-width: 0 !important;
  min-height: clamp(29px, 3.6vh, 36px) !important;
  max-width: 100% !important;
  margin-top: clamp(2px, 0.5vh, 5px) !important;
  padding: 0 clamp(13px, 1.2vw, 18px) !important;
  font-family: var(--font-body) !important;
  font-size: clamp(11px, 0.82vw, 13px) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#app[data-view="library"] .feature-node-scene {
  left: 50% !important;
  top: 50% !important;
  width: clamp(245px, 17vw, 355px) !important;
  min-height: clamp(145px, 18vh, 205px) !important;
  border-radius: 50% / 42% !important;
}

#app[data-view="library"] .feature-node-scene .feature-motif {
  width: clamp(112px, 10vw, 185px) !important;
  height: clamp(112px, 10vw, 185px) !important;
  opacity: 0.20 !important;
}

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

#app[data-view="library"] .feature-node-daily {
  left: 20% !important;
  top: 29% !important;
  border-radius: 52% 48% 54% 46% / 46% 56% 44% 54% !important;
}

#app[data-view="library"] .feature-node-observe {
  left: 80% !important;
  top: 29% !important;
  border-radius: 36% 64% 42% 58% / 54% 42% 58% 46% !important;
}

#app[data-view="library"] .feature-node-meet {
  left: 22% !important;
  top: 75% !important;
  border-radius: 58% 42% 46% 54% / 44% 50% 50% 56% !important;
}

#app[data-view="library"] .feature-node-listen {
  left: 78% !important;
  top: 75% !important;
  border-radius: 18% 82% 22% 78% / 28% 38% 62% 72% !important;
}

@media (min-width: 900px) and (max-height: 760px) {
  #app[data-view="library"] .function-star-map {
    inset: 8px 34px 16px !important;
  }

  #app[data-view="library"] .feature-node,
  #app[data-view="library"] .feature-node-daily,
  #app[data-view="library"] .feature-node-observe,
  #app[data-view="library"] .feature-node-meet,
  #app[data-view="library"] .feature-node-listen {
    width: clamp(190px, 14.5vw, 280px) !important;
    min-height: 122px !important;
    padding: 14px 18px !important;
  }

  #app[data-view="library"] .feature-node-scene {
    width: clamp(220px, 16vw, 310px) !important;
    min-height: 132px !important;
  }

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

  #app[data-view="library"] .feature-node em {
    font-size: clamp(11px, 0.82vw, 13px) !important;
    line-height: 1.34 !important;
  }

  #app[data-view="library"] .feature-node b {
    min-height: 27px !important;
    font-size: 11px !important;
  }

  #app[data-view="library"] .feature-node-daily,
  #app[data-view="library"] .feature-node-observe {
    top: 27% !important;
  }

  #app[data-view="library"] .feature-node-meet,
  #app[data-view="library"] .feature-node-listen {
    top: 74% !important;
  }
}

@media (max-width: 899px) {
  #app[data-view="library"] .function-star-map {
    inset: 6px 8px 8px !important;
  }

  #app[data-view="library"] .feature-node,
  #app[data-view="library"] .feature-node-daily,
  #app[data-view="library"] .feature-node-observe,
  #app[data-view="library"] .feature-node-meet,
  #app[data-view="library"] .feature-node-listen {
    width: clamp(132px, 35vw, 168px) !important;
    min-height: 98px !important;
    padding: 10px 11px !important;
  }

  #app[data-view="library"] .feature-node-scene {
    width: clamp(158px, 41vw, 198px) !important;
    min-height: 108px !important;
  }

  #app[data-view="library"] .feature-motif {
    width: 74px !important;
    height: 74px !important;
    opacity: 0.16 !important;
  }

  #app[data-view="library"] .feature-node strong {
    font-size: clamp(19px, 5vw, 26px) !important;
    letter-spacing: 0.035em !important;
  }

  #app[data-view="library"] .feature-node em {
    font-size: 10px !important;
    line-height: 1.22 !important;
    max-width: 11em !important;
  }

  #app[data-view="library"] .feature-node b {
    min-height: 24px !important;
    padding: 0 9px !important;
    font-size: 10px !important;
  }

  #app[data-view="library"] .feature-node-daily {
    left: 24% !important;
    top: 18% !important;
  }

  #app[data-view="library"] .feature-node-observe {
    left: 76% !important;
    top: 18% !important;
  }

  #app[data-view="library"] .feature-node-scene {
    left: 50% !important;
    top: 50% !important;
  }

  #app[data-view="library"] .feature-node-meet {
    left: 24% !important;
    top: 82% !important;
  }

  #app[data-view="library"] .feature-node-listen {
    left: 76% !important;
    top: 82% !important;
  }
}

@media (max-width: 420px) {
  #app[data-view="library"] .feature-node,
  #app[data-view="library"] .feature-node-daily,
  #app[data-view="library"] .feature-node-observe,
  #app[data-view="library"] .feature-node-meet,
  #app[data-view="library"] .feature-node-listen {
    width: 126px !important;
    min-height: 86px !important;
    padding: 8px 9px !important;
  }

  #app[data-view="library"] .feature-node-scene {
    width: 148px !important;
    min-height: 94px !important;
  }

  #app[data-view="library"] .feature-node strong {
    font-size: 18px !important;
  }

  #app[data-view="library"] .feature-node em {
    display: none !important;
  }

  #app[data-view="library"] .feature-node b {
    min-height: 22px !important;
    font-size: 9.5px !important;
  }
}

/* v9: turn the home page into a connected function galaxy.
   Four function planets, orbit-like crayon paths, no duplicate observe/listen nodes. */
#app.surface[data-view="library"] {
  --font-brand-title: var(--font-brand) !important;
  --font-brand-body: var(--font-body) !important;
  --font-brand-soft: var(--font-hand) !important;
}

#app[data-view="library"] .home-dispatch .page-nav,
#app[data-view="library"] .home-dispatch .floating-function-dock,
#app[data-view="library"] .home-dispatch .site-topbar:not(.home-topbar) {
  display: none !important;
}

#app[data-view="library"] .home-dispatch {
  grid-template-rows: auto minmax(0, 1fr) !important;
}

#app[data-view="library"] .home-topbar {
  width: fit-content !important;
  max-width: min(92vw, 620px) !important;
  justify-self: start !important;
  align-self: start !important;
  margin-left: clamp(6px, 1vw, 16px) !important;
  background: rgba(247, 243, 236, 0.74) !important;
  border: 1px solid rgba(168, 132, 74, 0.16) !important;
  box-shadow: 0 10px 32px rgba(42, 69, 97, 0.06) !important;
}

#app[data-view="library"] .home-topbar .wordmark,
#app[data-view="library"] :is(.feature-node strong, .page-nav > span, .section-heading h2, .test-card h2, .activity-card h2) {
  font-family: var(--font-brand) !important;
  font-weight: 400 !important;
}

#app[data-view="library"] .function-star-map {
  inset: clamp(4px, 1.2vh, 16px) clamp(26px, 4.6vw, 96px) clamp(8px, 2.1vh, 26px) !important;
  isolation: isolate !important;
}

#app[data-view="library"] .function-star-map::before {
  width: min(78vw, 1180px) !important;
  height: min(60vh, 560px) !important;
  border: 2px dashed rgba(168, 132, 74, 0.16) !important;
  border-radius: 50% !important;
  transform: translate(-50%, -50%) rotate(-9deg) !important;
}

#app[data-view="library"] .function-star-map::after {
  width: min(58vw, 860px) !important;
  height: min(40vh, 390px) !important;
  border: 1.5px solid rgba(106, 143, 168, 0.14) !important;
  border-radius: 50% !important;
  transform: translate(-50%, -50%) rotate(18deg) !important;
}

#app[data-view="library"] .galaxy-crayon-lines {
  opacity: 0.78 !important;
  filter: blur(0.15px) !important;
}

#app[data-view="library"] .crayon-orbit,
#app[data-view="library"] .crayon-line {
  fill: none !important;
  vector-effect: non-scaling-stroke !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  pointer-events: none !important;
}

#app[data-view="library"] .crayon-orbit {
  stroke-dasharray: 12 18 !important;
  stroke-width: clamp(3px, 0.36vw, 7px) !important;
  opacity: 0.28 !important;
  transform-origin: 500px 286px !important;
}

#app[data-view="library"] .crayon-orbit-gold {
  stroke: rgba(168, 132, 74, 0.34) !important;
  transform: rotate(-8deg) !important;
}

#app[data-view="library"] .crayon-orbit-blue {
  stroke: rgba(106, 143, 168, 0.30) !important;
  transform: rotate(16deg) !important;
}

#app[data-view="library"] .crayon-orbit-rose {
  stroke: rgba(216, 106, 82, 0.18) !important;
  transform: rotate(4deg) !important;
}

#app[data-view="library"] .crayon-loop {
  stroke-dasharray: 16 20 !important;
  stroke-width: clamp(4px, 0.48vw, 9px) !important;
  opacity: 0.34 !important;
}

#app[data-view="library"] .crayon-loop-one {
  stroke: rgba(168, 132, 74, 0.30) !important;
}

#app[data-view="library"] .crayon-loop-two {
  stroke: rgba(106, 143, 168, 0.34) !important;
}

#app[data-view="library"] .crayon-loop-three {
  stroke: rgba(216, 106, 82, 0.20) !important;
}

#app[data-view="library"] .crayon-loop-four {
  stroke: rgba(42, 69, 97, 0.16) !important;
  stroke-width: clamp(3px, 0.34vw, 6px) !important;
}

#app[data-view="library"] .crayon-node {
  fill: rgba(168, 132, 74, 0.62) !important;
}

#app[data-view="library"] .home-dispatch .feature-node,
#app[data-view="library"] .home-dispatch .feature-node-daily,
#app[data-view="library"] .home-dispatch .feature-node-meet,
#app[data-view="library"] .home-dispatch .feature-node-about {
  width: clamp(280px, 19vw, 390px) !important;
  min-height: clamp(174px, 23vh, 242px) !important;
  padding: clamp(20px, 2vw, 34px) clamp(22px, 2.2vw, 38px) !important;
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.74), transparent 30%),
    radial-gradient(circle at 78% 82%, rgba(169, 195, 218, 0.13), transparent 38%),
    rgba(247, 243, 236, 0.72) !important;
  border: 1px solid rgba(106, 143, 168, 0.18) !important;
  box-shadow:
    inset 0 0 44px rgba(255, 255, 255, 0.38),
    0 18px 48px rgba(42, 69, 97, 0.08) !important;
  backdrop-filter: blur(5px) !important;
}

#app[data-view="library"] .home-dispatch .feature-node::before,
#app[data-view="library"] .home-dispatch .feature-node::after {
  opacity: 0.12 !important;
  pointer-events: none !important;
}

#app[data-view="library"] .home-dispatch .feature-node-copy {
  width: min(100%, 16.5em) !important;
  gap: clamp(5px, 0.8vh, 9px) !important;
  padding: clamp(4px, 0.4vw, 8px) !important;
  border-radius: 26px !important;
  background: rgba(247, 243, 236, 0.30) !important;
}

#app[data-view="library"] .home-dispatch .feature-node strong {
  font-family: var(--font-brand) !important;
  font-size: clamp(34px, 2.85vw, 56px) !important;
  line-height: 1.02 !important;
  letter-spacing: 0.05em !important;
  white-space: nowrap !important;
}

#app[data-view="library"] .home-dispatch .feature-node em {
  font-size: clamp(13px, 0.98vw, 16px) !important;
  line-height: 1.55 !important;
  max-width: 15em !important;
}

#app[data-view="library"] .home-dispatch .feature-node b {
  min-height: clamp(34px, 4.2vh, 42px) !important;
  padding: 0 clamp(17px, 1.5vw, 24px) !important;
  border-radius: 999px !important;
  font-size: clamp(12px, 0.9vw, 14px) !important;
  box-shadow: 0 10px 24px rgba(42, 69, 97, 0.13) !important;
}

#app[data-view="library"] .home-dispatch .feature-motif {
  width: clamp(132px, 12vw, 230px) !important;
  height: clamp(132px, 12vw, 230px) !important;
  opacity: 0.16 !important;
}

#app[data-view="library"] .home-dispatch .feature-node-scene {
  left: 51% !important;
  top: 53% !important;
  width: clamp(330px, 24vw, 500px) !important;
  min-height: clamp(202px, 27vh, 286px) !important;
  border-radius: 58% 42% 54% 46% / 50% 44% 56% 50% !important;
  border-color: rgba(106, 143, 168, 0.24) !important;
  background:
    radial-gradient(circle at 43% 42%, rgba(169, 195, 218, 0.18), transparent 38%),
    radial-gradient(circle at 68% 70%, rgba(231, 211, 109, 0.14), transparent 28%),
    rgba(247, 243, 236, 0.78) !important;
}

#app[data-view="library"] .home-dispatch .feature-node-scene strong {
  font-size: clamp(38px, 3.2vw, 62px) !important;
}

#app[data-view="library"] .home-dispatch .feature-node-daily {
  left: 19% !important;
  top: 29% !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 0.78 !important;
}

#app[data-view="library"] .home-dispatch .feature-node-about {
  left: 81% !important;
  top: 38% !important;
  border-radius: 62% 38% 50% 50% / 42% 58% 44% 56% !important;
  background:
    radial-gradient(circle at 30% 30%, rgba(233, 185, 191, 0.18), transparent 34%),
    radial-gradient(circle at 78% 76%, rgba(231, 211, 109, 0.12), transparent 32%),
    rgba(247, 243, 236, 0.74) !important;
}

#app[data-view="library"] .home-dispatch .feature-node-meet {
  left: 27% !important;
  top: 78% !important;
  width: clamp(300px, 21vw, 430px) !important;
  border-radius: 44% 56% 40% 60% / 58% 42% 58% 42% !important;
  background:
    radial-gradient(circle at 22% 32%, rgba(233, 185, 191, 0.16), transparent 36%),
    radial-gradient(circle at 72% 68%, rgba(168, 132, 74, 0.11), transparent 34%),
    rgba(247, 243, 236, 0.74) !important;
}

#app[data-view="library"] .home-dispatch .feature-node-observe,
#app[data-view="library"] .home-dispatch .feature-node-listen {
  display: none !important;
}

@media (min-width: 900px) and (max-height: 760px) {
  #app[data-view="library"] .home-dispatch .feature-node,
  #app[data-view="library"] .home-dispatch .feature-node-daily,
  #app[data-view="library"] .home-dispatch .feature-node-meet,
  #app[data-view="library"] .home-dispatch .feature-node-about {
    width: clamp(244px, 17vw, 330px) !important;
    min-height: 142px !important;
    padding: 15px 20px !important;
  }

  #app[data-view="library"] .home-dispatch .feature-node-scene {
    width: clamp(300px, 23vw, 410px) !important;
    min-height: 160px !important;
  }

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

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

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

  #app[data-view="library"] .home-dispatch .feature-node-daily {
    left: 18% !important;
    top: 28% !important;
  }

  #app[data-view="library"] .home-dispatch .feature-node-about {
    left: 82% !important;
    top: 38% !important;
  }

  #app[data-view="library"] .home-dispatch .feature-node-meet {
    left: 26% !important;
    top: 78% !important;
  }
}

@media (max-width: 899px) {
  #app[data-view="library"] .home-dispatch .feature-node,
  #app[data-view="library"] .home-dispatch .feature-node-daily,
  #app[data-view="library"] .home-dispatch .feature-node-meet,
  #app[data-view="library"] .home-dispatch .feature-node-about {
    width: clamp(142px, 38vw, 186px) !important;
    min-height: 104px !important;
    padding: 10px 12px !important;
  }

  #app[data-view="library"] .home-dispatch .feature-node-scene {
    width: clamp(174px, 45vw, 228px) !important;
    min-height: 118px !important;
  }

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

  #app[data-view="library"] .home-dispatch .feature-node em {
    font-size: 10px !important;
    line-height: 1.24 !important;
  }

  #app[data-view="library"] .home-dispatch .feature-node-daily {
    left: 25% !important;
    top: 18% !important;
  }

  #app[data-view="library"] .home-dispatch .feature-node-about {
    left: 75% !important;
    top: 24% !important;
  }

  #app[data-view="library"] .home-dispatch .feature-node-scene {
    left: 50% !important;
    top: 51% !important;
  }

  #app[data-view="library"] .home-dispatch .feature-node-meet {
    left: 50% !important;
    top: 83% !important;
  }
}

/* 2026-06-01: unify Home with the function dock on inner pages. */
.floating-function-dock {
  gap: clamp(6px, 0.75vw, 12px) !important;
}

.floating-function-dock button {
  min-width: clamp(62px, 5.6vw, 92px) !important;
}

.dock-home {
  color: #2a4561;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 5px rgba(247, 243, 236, 0.82),
    7px 0 0 -4px rgba(168, 132, 74, 0.72);
}

#app[data-view="library"] .feature-page-view .page-nav,
#app[data-view="test"] .page-nav,
#app[data-view="result"] .page-nav {
  justify-content: center !important;
  min-height: 38px !important;
  margin: clamp(58px, 7vh, 82px) 0 clamp(10px, 1.6vh, 18px) !important;
  text-align: center !important;
}

#app[data-view="library"] .feature-page-view .page-nav > span,
#app[data-view="test"] .page-nav > span,
#app[data-view="result"] .page-nav > span {
  font-family: var(--font-brand) !important;
  font-size: clamp(22px, 2.1vw, 34px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  color: rgba(30, 26, 26, 0.62) !important;
}

#app[data-view="library"] .page-back-button,
#app[data-view="test"] .page-back-button,
#app[data-view="result"] .page-back-button {
  display: none !important;
}

@media (min-width: 1101px) {
  .floating-function-dock {
    left: 50% !important;
    right: auto !important;
    top: 18px !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
  }
}

@media (max-width: 720px) {
  .floating-function-dock button {
    min-width: 0 !important;
    padding-inline: 3px !important;
  }

  #app[data-view="library"] .feature-page-view .page-nav,
  #app[data-view="test"] .page-nav,
  #app[data-view="result"] .page-nav {
    margin-top: 64px !important;
  }
}

/* 2026-06-01: make the test progress module a compact paper strip, not an empty banner. */
#app[data-view="library"] .tests-page-view .testing-progress-panel {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px) !important;
  align-items: center !important;
  gap: clamp(18px, 3vw, 42px) !important;
  width: min(1120px, calc(100vw - 48px)) !important;
  min-height: 0 !important;
  margin: clamp(18px, 3vh, 30px) auto clamp(16px, 2.4vh, 26px) !important;
  padding: clamp(18px, 2.2vw, 28px) !important;
  overflow: hidden !important;
  border: 1px solid rgba(168, 132, 74, 0.24) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 12% 50%, rgba(169, 195, 218, 0.13), transparent 30%),
    radial-gradient(circle at 90% 18%, rgba(233, 185, 191, 0.12), transparent 34%),
    rgba(247, 243, 236, 0.88) !important;
  box-shadow: 0 10px 30px rgba(30, 26, 26, 0.055) !important;
}

#app[data-view="library"] .tests-page-view .testing-progress-copy,
#app[data-view="library"] .tests-page-view .testing-progress-action {
  position: relative !important;
  z-index: 2 !important;
}

#app[data-view="library"] .tests-page-view .testing-progress-copy {
  display: grid !important;
  align-content: center !important;
  min-width: 0 !important;
  padding-left: clamp(82px, 9vw, 118px) !important;
}

#app[data-view="library"] .tests-page-view .testing-progress-action {
  display: grid !important;
  justify-items: stretch !important;
  gap: 12px !important;
}

#app[data-view="library"] .tests-page-view .testing-progress-motif {
  position: absolute !important;
  left: clamp(16px, 2.6vw, 28px) !important;
  top: 50% !important;
  z-index: 0 !important;
  width: clamp(58px, 6vw, 84px) !important;
  height: clamp(58px, 6vw, 84px) !important;
  opacity: 0.16 !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
}

#app[data-view="library"] .tests-page-view .testing-progress-panel .eyebrow {
  margin: 0 0 4px !important;
  color: rgba(180, 94, 60, 0.78) !important;
  font-family: var(--font-ink) !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
}

#app[data-view="library"] .tests-page-view .testing-progress-panel h2 {
  margin: 0 !important;
  color: #2a4561 !important;
  font-family: var(--font-brand) !important;
  font-size: clamp(25px, 2.6vw, 38px) !important;
  font-weight: 400 !important;
  line-height: 1.18 !important;
  letter-spacing: 0.045em !important;
}

#app[data-view="library"] .tests-page-view .testing-progress-panel p:not(.eyebrow) {
  max-width: 640px !important;
  margin: 8px 0 0 !important;
  color: rgba(30, 26, 26, 0.72) !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  line-height: 1.72 !important;
}

#app[data-view="library"] .tests-page-view .testing-progress-panel .listening-progress-bar {
  width: 100% !important;
  height: 10px !important;
  margin: 0 !important;
  background: rgba(237, 229, 216, 0.8) !important;
}

#app[data-view="library"] .tests-page-view .testing-progress-panel .button {
  width: 100% !important;
  min-height: 42px !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  #app[data-view="library"] .tests-page-view .testing-progress-panel {
    grid-template-columns: 1fr !important;
    width: min(100% - 28px, 100%) !important;
    gap: 14px !important;
    padding: 18px !important;
  }

  #app[data-view="library"] .tests-page-view .testing-progress-copy {
    padding-left: 68px !important;
  }

  #app[data-view="library"] .tests-page-view .testing-progress-motif {
    width: 52px !important;
    height: 52px !important;
    opacity: 0.13 !important;
  }
}

/* 2026-06-01: the tests page no longer needs a separate intro hero above the test list. */
#app[data-view="library"] .tests-page-view .recommended-tests {
  width: min(1120px, calc(100vw - 48px)) !important;
  margin: 0 auto clamp(56px, 8vh, 90px) !important;
  padding-top: clamp(8px, 1.2vh, 16px) !important;
}

#app[data-view="library"] .tests-page-view .recommended-tests .section-heading {
  max-width: 860px !important;
}

#app[data-view="library"] .tests-page-view .recommended-tests .section-heading h2 {
  margin-top: 4px !important;
}

/* 2026-06-01: show only launched tests as roomy cards, and keep all text inside the card. */
#app[data-view="library"] .tests-page-view .recommended-tests .library-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(20px, 3vw, 34px) !important;
  align-items: stretch !important;
}

#app[data-view="library"] .tests-page-view .recommended-tests .test-card {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  grid-template-rows: 128px auto auto auto auto !important;
  padding: clamp(24px, 2.6vw, 34px) !important;
}

#app[data-view="library"] .tests-page-view .recommended-tests .test-card > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

#app[data-view="library"] .tests-page-view .recommended-tests .test-card h2 {
  max-width: 100% !important;
  margin: 0 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: auto !important;
  font-size: clamp(25px, 2.2vw, 34px) !important;
  line-height: 1.28 !important;
}

#app[data-view="library"] .tests-page-view .recommended-tests .test-card p,
#app[data-view="library"] .tests-page-view .recommended-tests .test-card-fit,
#app[data-view="library"] .tests-page-view .recommended-tests .test-card .test-video-chip {
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

#app[data-view="library"] .tests-page-view .recommended-tests .test-card-meta,
#app[data-view="library"] .tests-page-view .recommended-tests .test-card-tags {
  max-width: 100% !important;
  flex-wrap: wrap !important;
}

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

/* 2026-06-01: compact functional page headers so the first screen shows the action/content. */
#app[data-view="library"] :is(
  .feature-page-hero,
  .observations-hero,
  .activities-hero,
  .profile-hero,
  .observation-intro-card,
  .observation-card-result,
  .listening-progress-card
) {
  margin-top: clamp(12px, 2vh, 22px) !important;
  margin-bottom: clamp(14px, 2.4vh, 28px) !important;
  padding: clamp(22px, 3vw, 38px) !important;
}

#app[data-view="library"] :is(
  .feature-page-hero h1,
  .observations-hero h1,
  .activities-hero h1,
  .profile-hero h1,
  .observation-intro-card h1,
  .listening-progress-card h1
) {
  margin: 4px 0 8px !important;
  max-width: 920px !important;
  font-family: var(--font-brand) !important;
  font-size: clamp(28px, 2.6vw, 42px) !important;
  font-weight: 400 !important;
  line-height: 1.18 !important;
  letter-spacing: 0.045em !important;
  text-wrap: balance !important;
}

#app[data-view="library"] .daily-card-result h1,
#app[data-view="library"] .observation-text-card h1 {
  margin: 6px 0 12px !important;
  font-family: var(--font-brand) !important;
  font-size: clamp(30px, 3vw, 46px) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.045em !important;
  text-wrap: balance !important;
}

#app[data-view="library"] .observation-card-result .observation-main-text {
  font-size: clamp(22px, 2.3vw, 34px) !important;
  line-height: 1.6 !important;
}

#app[data-view="library"] :is(
  .feature-page-hero p:not(.eyebrow),
  .observations-hero p:not(.eyebrow),
  .activities-hero p:not(.eyebrow),
  .profile-hero p:not(.eyebrow),
  .observation-intro-card p:not(.eyebrow),
  .listening-progress-card p:not(.eyebrow)
) {
  max-width: 760px !important;
  margin-top: 8px !important;
  font-size: clamp(14px, 1.2vw, 17px) !important;
  line-height: 1.72 !important;
}

#app[data-view="library"] .section-heading {
  margin-bottom: clamp(16px, 2.4vw, 28px) !important;
}

#app[data-view="library"] .section-heading h2 {
  margin: 4px 0 8px !important;
  font-size: clamp(26px, 2.4vw, 38px) !important;
  line-height: 1.2 !important;
  text-wrap: balance !important;
}

#app[data-view="library"] .section-heading p:not(.eyebrow) {
  max-width: 760px !important;
  font-size: clamp(14px, 1.15vw, 17px) !important;
  line-height: 1.72 !important;
}

#app[data-view="library"] .feature-page-grid,
#app[data-view="library"] .observation-grid,
#app[data-view="library"] .event-card-grid {
  margin-top: clamp(14px, 2vh, 24px) !important;
}

@media (min-width: 900px) {
  #app[data-view="library"] :is(.observations-view, .activities-view, .daily-card-view, .listening-service-view, .creator-profile-view, .tests-page-view) {
    padding-top: 78px !important;
  }
}

@media (max-width: 720px) {
  #app[data-view="library"] :is(
    .feature-page-hero h1,
    .observations-hero h1,
    .activities-hero h1,
    .profile-hero h1,
    .observation-intro-card h1,
    .listening-progress-card h1,
    .daily-card-result h1,
    .observation-text-card h1
  ) {
    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: 1.22 !important;
  }

  #app[data-view="library"] .observation-card-result .observation-main-text {
    font-size: clamp(20px, 6vw, 28px) !important;
  }
}

/* 2026-06-01: functional pages should open on the real content, not a title stack. */
#app[data-view="library"] :is(.tests-page-view, .observations-view, .activities-view, .daily-card-view, .listening-service-view, .creator-profile-view) .page-nav {
  display: none !important;
}

@media (min-width: 900px) {
  #app[data-view="library"] :is(.tests-page-view, .observations-view, .activities-view, .daily-card-view, .listening-service-view, .creator-profile-view) {
    padding-top: 86px !important;
  }
}

#app[data-view="library"] .tests-page-view .testing-progress-panel {
  grid-template-columns: minmax(0, 1fr) minmax(230px, 310px) !important;
  gap: clamp(14px, 2vw, 26px) !important;
  margin: 0 auto clamp(14px, 2vh, 22px) !important;
  padding: 14px 18px !important;
  border-radius: 22px !important;
}

#app[data-view="library"] .tests-page-view .testing-progress-copy {
  padding-left: 54px !important;
}

#app[data-view="library"] .tests-page-view .testing-progress-motif {
  left: 14px !important;
  width: 42px !important;
  height: 42px !important;
  opacity: 0.12 !important;
}

#app[data-view="library"] .tests-page-view .testing-progress-panel .eyebrow {
  display: none !important;
}

#app[data-view="library"] .tests-page-view .testing-progress-panel h2 {
  font-size: clamp(21px, 1.65vw, 28px) !important;
  line-height: 1.16 !important;
}

#app[data-view="library"] .tests-page-view .testing-progress-panel p:not(.eyebrow) {
  margin-top: 4px !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

#app[data-view="library"] .tests-page-view .testing-progress-panel .button {
  min-height: 38px !important;
  padding: 9px 16px !important;
}

#app[data-view="library"] .tests-page-view .recommended-tests {
  padding-top: 0 !important;
}

#app[data-view="library"] .tests-page-view .recommended-tests .section-heading {
  display: grid !important;
  grid-template-columns: minmax(260px, 0.7fr) minmax(360px, 1fr) !important;
  align-items: end !important;
  gap: 20px !important;
  max-width: none !important;
  margin-bottom: clamp(14px, 2vh, 22px) !important;
}

#app[data-view="library"] .tests-page-view .recommended-tests .section-heading .eyebrow {
  display: none !important;
}

#app[data-view="library"] .tests-page-view .recommended-tests .section-heading h2 {
  margin: 0 !important;
  font-size: clamp(24px, 2vw, 32px) !important;
  line-height: 1.16 !important;
}

#app[data-view="library"] .tests-page-view .recommended-tests .section-heading p:not(.eyebrow) {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

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

  #app[data-view="library"] .tests-page-view .testing-progress-copy {
    padding-left: 50px !important;
  }
}

/* 2026-06-01: hard-lock the provided local font system.
   The app had font-family variables, but the actual @font-face chain was too fragile. */
body[data-view="library"],
#app[data-view="library"] {
  font-family: var(--font-body) !important;
  font-synthesis: none;
}

#app[data-view="library"] :is(
  .feature-node strong,
  .page-nav > span,
  .section-heading h2,
  .tests-page-view .testing-progress-panel h2,
  .test-card h2,
  .activity-card h2,
  .observation-card h2,
  .observations-hero h1,
  .activities-hero h1,
  .profile-hero h1,
  .listening-progress-card h1,
  .observation-intro-card h1,
  .daily-card-result h1,
  .result-title,
  .poster-title,
  .question-card h1,
  .question-card h2
) {
  font-family: "YanYanBrand", "Songti SC", "STSong", serif !important;
  font-weight: 400 !important;
}

#app[data-view="library"] :is(.wordmark, .home-topbar .wordmark) {
  font-family: "YanYanHand", "KaiTi", "STKaiti", cursive !important;
  font-weight: 400 !important;
}

#app[data-view="library"] :is(
  .eyebrow,
  .pill-tag,
  .test-card-top span,
  .test-card-visual span,
  .test-meta-row span,
  .observation-type,
  .activity-type,
  .dock-dot + span,
  .platform-logo
) {
  font-family: "YanYanAlt", "Songti SC", serif !important;
  font-weight: 400 !important;
}

#app[data-view="library"] :is(
  .daily-card-result > p:not(.eyebrow),
  .observation-main-text,
  .daily-reflection blockquote,
  .result-reminder,
  .soft-note
) {
  font-family: "YanYanHand", "KaiTi", "STKaiti", cursive !important;
  font-weight: 400 !important;
}

#app[data-view="library"] :is(
  p,
  li,
  input,
  textarea,
  button,
  .button,
  .feature-node em,
  .test-card p,
  .activity-card p,
  .observation-card p,
  .floating-function-dock button
) {
  font-synthesis: none;
}

/* 2026-06-07: keep galaxy node titles on the brand font.
   Ink is reserved for short labels so the homepage does not feel heavy. */
#app[data-view="library"] .home-dispatch .feature-node strong,
#app[data-view="library"] .function-star-map .feature-node strong {
  font-family: "YanYanBrand", "Songti SC", "STSong", serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.055em !important;
  font-synthesis: none !important;
}

#app[data-view="library"] .home-dispatch .feature-node-scene strong,
#app[data-view="library"] .function-star-map .feature-node-scene strong {
  font-family: "YanYanBrand", "Songti SC", "STSong", serif !important;
}

#app[data-view="library"] .home-dispatch .feature-node b,
#app[data-view="library"] .function-star-map .feature-node b {
  font-family: var(--font-body) !important;
  letter-spacing: 0.05em !important;
  font-synthesis: none !important;
}

#app[data-view="library"] .home-dispatch .feature-node em,
#app[data-view="library"] .function-star-map .feature-node em {
  font-family: var(--font-body) !important;
  font-synthesis: none !important;
}

/* 2026-06-07 taxonomy v4 final end cap.
   This block must remain the last font rule in this file. */
:root,
body[data-view="library"],
#app[data-view="library"] {
  --font-brand: "YanYanBrand", serif;
  --font-hand: "YanYanHand", cursive;
  --font-alt: "YanYanAlt", serif;
  --font-ink: "YanYanInk", serif;
  --font-body: "Songti SC", "STSong", "SimSun", serif;
}

#app[data-view="library"] :is(.wordmark, .brand-title, .home-brand-title, .site-title, .hero-title) {
  font-family: "YanYanHand", cursive !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] :is(
  h1,
  h2,
  h3,
  .page-title,
  .section-heading h2,
  .feature-node strong,
  .test-card h2,
  .test-card-title,
  .test-detail-title,
  .question-title,
  .question-card h1,
  .question-card h2,
  .result-title,
  .result-name,
  .observation-text-card h1,
  .observation-card h2,
  .observation-intro-card h1,
  .activity-card h2,
  .activity-title,
  .activities-hero h1,
  .observations-hero h1,
  .profile-hero h1,
  .listening-hero h1,
  .admin-panel h1,
  .admin-panel h2,
  .admin-panel h3
) {
  font-family: "YanYanBrand", serif !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] :is(
  button,
  .button,
  .page-back-button,
  .topbar-links a,
  .topbar-links button,
  .floating-function-dock button,
  .feature-node b,
  .feature-node em,
  .home-dispatch .feature-node b,
  .home-dispatch .feature-node em,
  .function-star-map .feature-node b,
  .function-star-map .feature-node em,
  .eyebrow,
  .pill-tag,
  .tag,
  .soft-tag,
  .test-card-top span,
  .test-card-visual span,
  .test-meta-row span,
  .test-card-tags,
  .test-card-actions,
  .choice-label,
  .result-count-badge,
  .observation-type,
  .observation-number,
  .observation-source,
  .observation-arrived-note,
  .observation-prompt h2,
  .observation-echo-section .section-heading,
  .observation-echo-section .eyebrow,
  .activity-type,
  .activity-status,
  .platform-logo,
  .tip,
  .form-hint,
  label,
  small,
  nav a,
  nav button
) {
  font-family: "YanYanAlt", serif !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] :is(
  .observation-main-text,
  .observation-main-text.original,
  .observation-main-text.quote,
  .daily-reflection blockquote,
  .result-reminder,
  .creator-note,
  .soft-note,
  .one-liner,
  .hand-note,
  .handwritten-note
) {
  font-family: "YanYanHand", cursive !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

/* 2026-06-07 final taxonomy v3.
   Only reading copy uses Songti. Everything functional or title-like uses the
   custom local fonts the user selected. Keep this block at the very end. */
:root,
body[data-view="library"],
#app[data-view="library"] {
  --font-brand: "YanYanBrand", serif;
  --font-hand: "YanYanHand", cursive;
  --font-alt: "YanYanAlt", serif;
  --font-ink: "YanYanInk", serif;
  --font-body: "Songti SC", "STSong", "SimSun", serif;
  --font-serif: var(--font-brand);
  --font-sans: var(--font-body);
  --font-brand-title: var(--font-hand);
  --font-brand-body: var(--font-body);
  --font-brand-soft: var(--font-hand);
}

#app[data-view="library"] :is(
  .wordmark,
  .brand-title,
  .home-brand-title,
  .site-title,
  .hero-title
) {
  font-family: "YanYanHand", cursive !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] :is(
  h1,
  h2,
  h3,
  .page-title,
  .section-heading h2,
  .feature-node strong,
  .test-card h2,
  .test-card-title,
  .test-detail-title,
  .question-title,
  .question-card h1,
  .question-card h2,
  .result-title,
  .result-name,
  .observation-text-card h1,
  .observation-card h2,
  .observation-intro-card h1,
  .activity-card h2,
  .activity-title,
  .activities-hero h1,
  .observations-hero h1,
  .profile-hero h1,
  .listening-hero h1,
  .admin-panel h1,
  .admin-panel h2,
  .admin-panel h3
) {
  font-family: "YanYanBrand", serif !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] :is(
  button,
  .button,
  .page-back-button,
  .topbar-links a,
  .topbar-links button,
  .floating-function-dock button,
  .feature-node b,
  .feature-node em,
  .home-dispatch .feature-node b,
  .home-dispatch .feature-node em,
  .function-star-map .feature-node b,
  .function-star-map .feature-node em,
  .eyebrow,
  .pill-tag,
  .tag,
  .soft-tag,
  .test-card-top span,
  .test-card-visual span,
  .test-meta-row span,
  .test-card-tags,
  .test-card-actions,
  .choice-label,
  .result-count-badge,
  .observation-type,
  .observation-number,
  .observation-source,
  .observation-arrived-note,
  .observation-prompt h2,
  .observation-echo-section .section-heading,
  .activity-type,
  .activity-status,
  .platform-logo,
  .tip,
  .form-hint,
  label,
  small,
  nav a,
  nav button
) {
  font-family: "YanYanAlt", serif !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] :is(
  .observation-main-text,
  .observation-main-text.original,
  .observation-main-text.quote,
  .daily-reflection blockquote,
  .result-reminder,
  .creator-note,
  .soft-note,
  .one-liner,
  .hand-note,
  .handwritten-note
) {
  font-family: "YanYanHand", cursive !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] :is(
  p,
  li,
  input,
  textarea,
  blockquote,
  .reading-copy,
  .test-card p,
  .activity-card p,
  .observation-card p,
  .observation-intro-card p:not(.eyebrow),
  .observations-hero p:not(.eyebrow),
  .activities-hero p:not(.eyebrow),
  .profile-hero p:not(.eyebrow),
  .listening-boundary,
  .disclaimer
) {
  font-family: "Songti SC", "STSong", "SimSun", serif !important;
  font-synthesis: none !important;
}

#app[data-view="library"] :is(
  .feature-node em,
  .feature-node b,
  button,
  .button,
  .floating-function-dock button,
  .eyebrow,
  .tag,
  .pill-tag,
  .soft-tag,
  .observation-arrived-note,
  .observation-source,
  .observation-number
) {
  font-family: "YanYanAlt", serif !important;
}

/* 2026-06-07 taxonomy v3 late pass: these elements are technically <p>,
   but they are UI labels or emotional short lines, not reading copy. */
#app[data-view="library"] :is(
  .observation-number,
  .observation-source,
  .observation-arrived-note,
  .observation-echo-section .eyebrow,
  .result-count-badge,
  .test-meta-row span,
  .test-card-tags,
  .pill-tag,
  .soft-tag,
  .tag,
  .eyebrow
) {
  font-family: "YanYanAlt", serif !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] :is(
  .observation-main-text,
  .observation-main-text.original,
  .observation-main-text.quote,
  .result-reminder,
  .creator-note,
  .soft-note,
  .one-liner,
  .hand-note,
  .handwritten-note
) {
  font-family: "YanYanHand", cursive !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] :is(.question-text, .scene-title, .option-text, .bubble) {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

/* 2026-06-07: user-selected font role map.
   Keep this at the end so old homepage iterations cannot override it. */
:root {
  --font-body: "Songti SC", "STSong", "SimSun", serif;
  --font-sans: var(--font-body);
  --font-brand-title: var(--font-hand);
}

body[data-view="library"],
#app[data-view="library"] {
  font-family: var(--font-body) !important;
}

#app[data-view="library"] :is(.wordmark, .home-topbar .wordmark) {
  font-family: "YanYanHand", "KaiTi", "STKaiti", cursive !important;
  font-weight: 400 !important;
}

#app[data-view="library"] :is(
  .feature-node strong,
  .section-heading h2,
  .tests-page-view .testing-progress-panel h2,
  .test-card h2,
  .activity-card h2,
  .observation-card h2,
  .observations-hero h1,
  .activities-hero h1,
  .profile-hero h1,
  .listening-progress-card h1,
  .observation-intro-card h1,
  .daily-card-result h1,
  .result-title,
  .poster-title,
  .question-card h1,
  .question-card h2,
  .intro h1,
  .result-head h1,
  .result-name
) {
  font-family: "YanYanBrand", "Songti SC", "STSong", serif !important;
  font-weight: 400 !important;
}

#app[data-view="library"] :is(
  .eyebrow,
  .pill-tag,
  .test-card-top span,
  .test-card-visual span,
  .test-meta-row span,
  .observation-type,
  .activity-type,
  .dock-dot + span,
  .platform-logo,
  .choice-label,
  .tip
) {
  font-family: "YanYanAlt", "Songti SC", serif !important;
  font-weight: 400 !important;
}

#app[data-view="library"] :is(
  p,
  li,
  input,
  textarea,
  button,
  .button,
  .feature-node b,
  .feature-node em,
  .question-text,
  .scene-title,
  .option-text,
  .bubble,
  .test-card p,
  .activity-card p,
  .observation-card p,
  .floating-function-dock button
) {
  font-family: var(--font-body) !important;
}

#app[data-view="library"] :is(
  .daily-card-result > p:not(.eyebrow),
  .observation-main-text,
  .daily-reflection blockquote,
  .result-reminder,
  .soft-note,
  .one-liner
) {
  font-family: "YanYanHand", "KaiTi", "STKaiti", cursive !important;
  font-weight: 400 !important;
}

/* 2026-06-07: Hilma-style extracted element system.
   Uses the provided redraw SVG elements as motifs, not source-image crops. */
:root {
  --yy-paper: #F3EBDD;
  --yy-warm-white: #FBF6EA;
  --yy-shell-pink: #E9B8C5;
  --yy-ochre: #B99643;
  --yy-soft-blue: #86A9C7;
  --yy-indigo: #17315A;
  --yy-charcoal: #383733;
}

#app.surface[data-view="library"]:has(.home-dispatch) {
  background:
    radial-gradient(circle at 18% 10%, rgba(233, 184, 197, 0.16), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(134, 169, 199, 0.16), transparent 34%),
    linear-gradient(180deg, var(--yy-paper) 0%, #f7f0e4 100%) !important;
}

#app[data-view="library"] .home-star-hero {
  background:
    radial-gradient(circle at 51% 49%, rgba(251, 246, 234, 0.82), transparent 35%),
    linear-gradient(180deg, rgba(251, 246, 234, 0.54), rgba(243, 235, 221, 0.28)) !important;
  border-color: rgba(185, 150, 67, 0.18) !important;
}

#app[data-view="library"] .function-star-map {
  isolation: isolate !important;
}

#app[data-view="library"] .function-star-map::before,
#app[data-view="library"] .function-star-map::after {
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
  border: 0 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  mix-blend-mode: multiply !important;
  z-index: 0 !important;
}

#app[data-view="library"] .function-star-map::before {
  left: 50% !important;
  top: 52% !important;
  width: min(86vw, 1240px) !important;
  height: min(70vh, 640px) !important;
  background-image: url("../hilma-elements/20_vine_line_with_beads.svg") !important;
  opacity: 0.26 !important;
  transform: translate(-50%, -50%) rotate(-8deg) scaleX(1.18) !important;
}

#app[data-view="library"] .function-star-map::after {
  left: 50% !important;
  top: 51% !important;
  width: min(72vw, 1040px) !important;
  height: min(58vh, 540px) !important;
  background-image: url("../hilma-elements/08_loop_script_floral_line.svg") !important;
  opacity: 0.22 !important;
  transform: translate(-50%, -50%) rotate(10deg) scale(1.08) !important;
}

#app[data-view="library"] .galaxy-crayon-lines {
  opacity: 0.42 !important;
  mix-blend-mode: multiply !important;
}

#app[data-view="library"] .crayon-orbit,
#app[data-view="library"] .crayon-line {
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-dasharray: 16 15 !important;
  filter: blur(0.25px) !important;
}

#app[data-view="library"] .crayon-line {
  stroke-width: clamp(4px, 0.45vw, 7px) !important;
  opacity: 0.24 !important;
}

#app[data-view="library"] .feature-node,
#app[data-view="library"] .feature-node-scene,
#app[data-view="library"] .feature-node-daily,
#app[data-view="library"] .feature-node-meet,
#app[data-view="library"] .feature-node-about {
  background:
    radial-gradient(circle at 52% 42%, rgba(251, 246, 234, 0.94), rgba(251, 246, 234, 0.74) 62%, rgba(251, 246, 234, 0.54)) !important;
  border: 1px solid rgba(134, 169, 199, 0.34) !important;
  box-shadow:
    0 18px 52px rgba(23, 49, 90, 0.08),
    inset 0 0 30px rgba(255, 255, 255, 0.22) !important;
  min-height: clamp(144px, 18vh, 208px) !important;
  overflow: visible !important;
}

#app[data-view="library"] .feature-node::before {
  content: "" !important;
  position: absolute !important;
  inset: clamp(8px, 0.8vw, 14px) !important;
  border: 1px solid rgba(185, 150, 67, 0.13) !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

#app[data-view="library"] .feature-node-copy {
  position: relative !important;
  z-index: 4 !important;
  width: min(100%, 13.8em) !important;
  padding: clamp(4px, 0.5vw, 8px) !important;
  border-radius: 24px !important;
  background: radial-gradient(circle, rgba(251, 246, 234, 0.58), rgba(251, 246, 234, 0.24) 68%, transparent) !important;
}

#app[data-view="library"] .feature-motif {
  display: block !important;
  opacity: 1 !important;
  z-index: 2 !important;
  mix-blend-mode: multiply !important;
}

#app[data-view="library"] .feature-motif > i {
  display: none !important;
}

#app[data-view="library"] .feature-svg {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transform: translate(-50%, -50%) !important;
  opacity: 0.46 !important;
  pointer-events: none !important;
  user-select: none !important;
}

#app[data-view="library"] .feature-node-scene {
  left: 51% !important;
  top: 50% !important;
  width: clamp(285px, 20vw, 390px) !important;
  min-height: clamp(158px, 19vh, 220px) !important;
  border-radius: 50% / 39% !important;
}

#app[data-view="library"] .feature-node-daily {
  left: 19% !important;
  top: 27% !important;
  width: clamp(250px, 17.5vw, 340px) !important;
  border-radius: 55% 45% 53% 47% / 45% 60% 40% 55% !important;
}

#app[data-view="library"] .feature-node-about {
  left: 79.5% !important;
  top: 31% !important;
  width: clamp(260px, 18vw, 350px) !important;
  border-radius: 43% 57% 41% 59% / 54% 44% 56% 46% !important;
}

#app[data-view="library"] .feature-node-meet {
  left: 25% !important;
  top: 76% !important;
  width: clamp(265px, 18vw, 355px) !important;
  border-radius: 62% 38% 48% 52% / 44% 54% 46% 56% !important;
}

#app[data-view="library"] .feature-node-scene .feature-motif {
  width: clamp(150px, 14vw, 245px) !important;
  height: clamp(150px, 14vw, 245px) !important;
  left: 28% !important;
  top: 47% !important;
  transform: translate(-50%, -50%) rotate(-5deg) !important;
}

#app[data-view="library"] .feature-node-daily .feature-motif {
  width: clamp(142px, 13vw, 230px) !important;
  height: clamp(142px, 13vw, 230px) !important;
  left: 34% !important;
  top: 52% !important;
}

#app[data-view="library"] .feature-node-about .feature-motif {
  width: clamp(150px, 13vw, 230px) !important;
  height: clamp(150px, 13vw, 230px) !important;
  left: 34% !important;
  top: 52% !important;
  transform: translate(-50%, -50%) rotate(8deg) !important;
}

#app[data-view="library"] .feature-node-meet .feature-motif {
  width: clamp(140px, 12vw, 218px) !important;
  height: clamp(140px, 12vw, 218px) !important;
  left: 33% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) rotate(-13deg) !important;
}

#app[data-view="library"] .feature-node-scene .feature-svg {
  opacity: 0.34 !important;
}

#app[data-view="library"] .feature-node-daily .feature-svg {
  opacity: 0.54 !important;
}

#app[data-view="library"] .feature-node-about .feature-svg {
  opacity: 0.44 !important;
}

#app[data-view="library"] .feature-node-meet .feature-svg {
  opacity: 0.40 !important;
}

#app[data-view="library"] .feature-node strong {
  font-family: "YanYanBrand", "Songti SC", "STSong", serif !important;
  color: var(--yy-indigo) !important;
  font-size: clamp(29px, 2.2vw, 42px) !important;
  line-height: 1.08 !important;
  letter-spacing: 0.05em !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  text-wrap: balance !important;
}

#app[data-view="library"] .feature-node-scene strong {
  font-size: clamp(33px, 2.55vw, 52px) !important;
}

#app[data-view="library"] .feature-node em {
  color: rgba(56, 55, 51, 0.78) !important;
  font-size: clamp(13px, 0.92vw, 15px) !important;
  line-height: 1.42 !important;
  max-width: 14.5em !important;
  text-wrap: balance !important;
}

#app[data-view="library"] .feature-node b {
  color: var(--yy-warm-white) !important;
  background: var(--yy-indigo) !important;
  border-color: rgba(23, 49, 90, 0.20) !important;
  box-shadow: 0 10px 22px rgba(23, 49, 90, 0.16) !important;
}

#app[data-view="library"] .feature-node-about b,
#app[data-view="library"] .feature-node-meet b {
  background: var(--yy-ochre) !important;
  border-color: rgba(185, 150, 67, 0.22) !important;
  box-shadow: 0 10px 22px rgba(185, 150, 67, 0.16) !important;
}

@media (min-width: 900px) and (max-height: 760px) {
  #app[data-view="library"] .feature-node,
  #app[data-view="library"] .feature-node-daily,
  #app[data-view="library"] .feature-node-meet,
  #app[data-view="library"] .feature-node-about {
    width: clamp(218px, 16vw, 302px) !important;
    min-height: 128px !important;
    padding: 14px 18px !important;
  }

  #app[data-view="library"] .feature-node-scene {
    width: clamp(246px, 18vw, 330px) !important;
    min-height: 136px !important;
  }

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

  #app[data-view="library"] .feature-node-scene strong {
    font-size: clamp(28px, 2.25vw, 40px) !important;
  }

  #app[data-view="library"] .feature-node em {
    font-size: 12px !important;
    line-height: 1.32 !important;
  }

  #app[data-view="library"] .feature-node-daily {
    top: 26% !important;
  }

  #app[data-view="library"] .feature-node-about {
    top: 30% !important;
  }
}

@media (max-width: 899px) {
  #app[data-view="library"] .function-star-map::before,
  #app[data-view="library"] .function-star-map::after {
    opacity: 0.14 !important;
  }

  #app[data-view="library"] .feature-node strong {
    font-size: clamp(20px, 5vw, 27px) !important;
  }

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

  #app[data-view="library"] .feature-svg {
    opacity: 0.28 !important;
  }
}

/* 2026-06-07: make extracted motifs visible without lowering text readability. */
#app[data-view="library"] .home-dispatch .feature-motif {
  opacity: 0.78 !important;
}

#app[data-view="library"] .feature-node-copy {
  background:
    radial-gradient(circle at 50% 50%, rgba(251, 246, 234, 0.86), rgba(251, 246, 234, 0.58) 58%, rgba(251, 246, 234, 0.22) 100%) !important;
  box-shadow: 0 0 24px rgba(251, 246, 234, 0.42) !important;
}

#app[data-view="library"] .feature-node-daily .feature-svg {
  opacity: 0.58 !important;
}

#app[data-view="library"] .feature-node-scene .feature-svg {
  opacity: 0.46 !important;
}

#app[data-view="library"] .feature-node-meet .feature-svg,
#app[data-view="library"] .feature-node-about .feature-svg {
  opacity: 0.50 !important;
}

#app[data-view="library"] .function-star-map::before {
  opacity: 0.24 !important;
}

#app[data-view="library"] .function-star-map::after {
  opacity: 0.19 !important;
}

/* 2026-06-07: strict typography taxonomy.
   Songti is reserved for reading copy only; UI text must not inherit it. */
:root {
  --font-brand: "YanYanBrand", "Songti SC", "STSong", serif;
  --font-hand: "YanYanHand", "KaiTi", "STKaiti", cursive;
  --font-ink: "YanYanInk", "Songti SC", serif;
  --font-alt: "YanYanAlt", "Songti SC", serif;
  --font-body: "Songti SC", "STSong", "SimSun", serif;
  --font-sans: var(--font-body);
  --font-brand-title: var(--font-hand);
  --font-brand-body: var(--font-body);
}

body[data-view="library"],
#app[data-view="library"] {
  font-family: var(--font-body) !important;
  font-synthesis: none !important;
}

#app[data-view="library"] :is(
  .wordmark,
  .home-topbar .wordmark,
  .brand-wordmark
) {
  font-family: var(--font-hand) !important;
  font-weight: 400 !important;
}

#app[data-view="library"] :is(
  h1,
  h2,
  h3,
  .feature-node strong,
  .section-heading h2,
  .tests-page-view .testing-progress-panel h2,
  .test-card h2,
  .activity-card h2,
  .observation-card h2,
  .observations-hero h1,
  .activities-hero h1,
  .profile-hero h1,
  .listening-progress-card h1,
  .observation-intro-card h1,
  .observation-text-card h1,
  .daily-card-result h1,
  .result-title,
  .result-name,
  .poster-title,
  .question-card h1,
  .question-card h2,
  .intro h1,
  .result-head h1
) {
  font-family: var(--font-brand) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] :is(
  button,
  .button,
  .page-back-button,
  .topbar-links a,
  .topbar-links button,
  .floating-function-dock button,
  .feature-node b,
  .feature-node em,
  .eyebrow,
  .pill-tag,
  .tag,
  .soft-tag,
  .test-card-top span,
  .test-card-visual span,
  .test-meta-row span,
  .test-card-tags,
  .test-card-actions,
  .observation-type,
  .observation-number,
  .observation-source,
  .observation-arrived-note,
  .observation-prompt h2,
  .observation-echo-section .section-heading,
  .activity-type,
  .activity-status,
  .platform-logo,
  .choice-label,
  .tip,
  .form-hint,
  label,
  small
) {
  font-family: var(--font-alt) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] :is(
  .observation-main-text,
  .observation-main-text.original,
  .observation-main-text.quote,
  .daily-reflection blockquote,
  .result-reminder,
  .creator-note,
  .soft-note,
  .one-liner,
  .hand-note
) {
  font-family: var(--font-hand) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] :is(
  p,
  li,
  input,
  textarea,
  blockquote,
  .reading-copy,
  .test-card p,
  .activity-card p,
  .observation-card p,
  .observation-intro-card p:not(.eyebrow),
  .observations-hero p:not(.eyebrow),
  .activities-hero p:not(.eyebrow),
  .profile-hero p:not(.eyebrow),
  .listening-boundary,
  .disclaimer
) {
  font-family: var(--font-body) !important;
  font-synthesis: none !important;
}

/* 2026-06-07: font taxonomy end cap.
   Only actual reading copy uses Songti; UI, labels, titles and emotional lines use custom fonts. */
:root,
body[data-view="library"],
#app[data-view="library"] {
  --font-brand: "YanYanBrand", serif;
  --font-hand: "YanYanHand", cursive;
  --font-alt: "YanYanAlt", serif;
  --font-ink: "YanYanInk", serif;
  --font-body: "Songti SC", "STSong", "SimSun", serif;
  --font-serif: var(--font-brand);
  --font-sans: var(--font-body);
  --font-brand-title: var(--font-hand);
  --font-brand-body: var(--font-body);
  --font-brand-soft: var(--font-hand);
}

#app[data-view="library"] :is(
  .wordmark,
  .brand-title,
  .home-brand-title,
  .site-title,
  .hero-title
) {
  font-family: "YanYanHand", cursive !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] :is(
  h1,
  h2,
  h3,
  .page-title,
  .section-heading h2,
  .feature-node strong,
  .test-card h2,
  .test-card-title,
  .test-detail-title,
  .question-title,
  .question-card h1,
  .question-card h2,
  .result-title,
  .result-name,
  .observation-text-card h1,
  .observation-card h2,
  .observation-intro-card h1,
  .activity-card h2,
  .activity-title,
  .activities-hero h1,
  .observations-hero h1,
  .profile-hero h1,
  .listening-hero h1,
  .admin-panel h1,
  .admin-panel h2,
  .admin-panel h3
) {
  font-family: "YanYanBrand", serif !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] :is(
  button,
  .button,
  .page-back-button,
  .topbar-links a,
  .topbar-links button,
  .floating-function-dock button,
  .feature-node b,
  .feature-node em,
  .home-dispatch .feature-node b,
  .home-dispatch .feature-node em,
  .function-star-map .feature-node b,
  .function-star-map .feature-node em,
  .eyebrow,
  .pill-tag,
  .tag,
  .soft-tag,
  .test-card-top span,
  .test-card-visual span,
  .test-meta-row span,
  .test-card-tags,
  .test-card-actions,
  .choice-label,
  .result-count-badge,
  .observation-type,
  .observation-number,
  .observation-source,
  .observation-arrived-note,
  .observation-prompt h2,
  .observation-echo-section .section-heading,
  .observation-echo-section .eyebrow,
  .activity-type,
  .activity-status,
  .platform-logo,
  .tip,
  .form-hint,
  label,
  small,
  nav a,
  nav button
) {
  font-family: "YanYanAlt", serif !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] :is(
  .observation-main-text,
  .observation-main-text.original,
  .observation-main-text.quote,
  .daily-reflection blockquote,
  .result-reminder,
  .creator-note,
  .soft-note,
  .one-liner,
  .hand-note,
  .handwritten-note
) {
  font-family: "YanYanHand", cursive !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

/* 2026-06-07 taxonomy v4 final end cap.
   This block must remain the last font rule in this file. */
:root,
body[data-view="library"],
#app[data-view="library"] {
  --font-brand: "YanYanBrand", serif;
  --font-hand: "YanYanHand", cursive;
  --font-alt: "YanYanAlt", serif;
  --font-ink: "YanYanInk", serif;
  --font-body: "Songti SC", "STSong", "SimSun", serif;
}

#app[data-view="library"] :is(
  .wordmark,
  .brand-title,
  .home-brand-title,
  .site-title,
  .hero-title
) {
  font-family: "YanYanHand", cursive !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] :is(
  h1,
  h2,
  h3,
  .page-title,
  .section-heading h2,
  .feature-node strong,
  .test-card h2,
  .test-card-title,
  .test-detail-title,
  .question-title,
  .question-card h1,
  .question-card h2,
  .result-title,
  .result-name,
  .observation-text-card h1,
  .observation-card h2,
  .observation-intro-card h1,
  .activity-card h2,
  .activity-title,
  .activities-hero h1,
  .observations-hero h1,
  .profile-hero h1,
  .listening-hero h1,
  .admin-panel h1,
  .admin-panel h2,
  .admin-panel h3
) {
  font-family: "YanYanBrand", serif !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] :is(
  button,
  .button,
  .page-back-button,
  .topbar-links a,
  .topbar-links button,
  .floating-function-dock button,
  .feature-node b,
  .feature-node em,
  .home-dispatch .feature-node b,
  .home-dispatch .feature-node em,
  .function-star-map .feature-node b,
  .function-star-map .feature-node em,
  .eyebrow,
  .pill-tag,
  .tag,
  .soft-tag,
  .test-card-top span,
  .test-card-visual span,
  .test-meta-row span,
  .test-card-tags,
  .test-card-actions,
  .choice-label,
  .result-count-badge,
  .observation-type,
  .observation-number,
  .observation-source,
  .observation-arrived-note,
  .observation-prompt h2,
  .observation-echo-section .section-heading,
  .observation-echo-section .eyebrow,
  .activity-type,
  .activity-status,
  .platform-logo,
  .tip,
  .form-hint,
  label,
  small,
  nav a,
  nav button
) {
  font-family: "YanYanAlt", serif !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] :is(
  .observation-main-text,
  .observation-main-text.original,
  .observation-main-text.quote,
  .daily-reflection blockquote,
  .result-reminder,
  .creator-note,
  .soft-note,
  .one-liner,
  .hand-note,
  .handwritten-note
) {
  font-family: "YanYanHand", cursive !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] :is(
  .feature-node em,
  .feature-node b,
  .observation-arrived-note,
  .observation-source,
  .floating-function-dock button,
  .button,
  button
) {
  font-family: var(--font-alt) !important;
}

#app[data-view="library"] :is(
  .observation-main-text,
  .daily-reflection blockquote,
  .result-reminder,
  .soft-note,
  .one-liner
) {
  font-family: var(--font-hand) !important;
}

/* 2026-06-07: direct overrides for UI text that must never fall back to Songti. */
#app[data-view="library"] button,
#app[data-view="library"] .button,
#app[data-view="library"] .page-back-button,
#app[data-view="library"] .topbar-links a,
#app[data-view="library"] .topbar-links button,
#app[data-view="library"] .floating-function-dock button,
#app[data-view="library"] .feature-node b,
#app[data-view="library"] .feature-node em,
#app[data-view="library"] .eyebrow,
#app[data-view="library"] .pill-tag,
#app[data-view="library"] .tag,
#app[data-view="library"] .soft-tag,
#app[data-view="library"] .test-card-top span,
#app[data-view="library"] .test-card-visual span,
#app[data-view="library"] .test-meta-row span,
#app[data-view="library"] .test-card-tags,
#app[data-view="library"] .observation-type,
#app[data-view="library"] .observation-number,
#app[data-view="library"] .observation-source,
#app[data-view="library"] .observation-arrived-note,
#app[data-view="library"] .observation-prompt h2,
#app[data-view="library"] .activity-type,
#app[data-view="library"] .activity-status,
#app[data-view="library"] .platform-logo,
#app[data-view="library"] .choice-label,
#app[data-view="library"] .tip,
#app[data-view="library"] .form-hint,
#app[data-view="library"] label,
#app[data-view="library"] small {
  font-family: "YanYanAlt", "Songti SC", "STSong", serif !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] .observation-main-text,
#app[data-view="library"] .observation-main-text.original,
#app[data-view="library"] .observation-main-text.quote,
#app[data-view="library"] .daily-reflection blockquote,
#app[data-view="library"] .result-reminder,
#app[data-view="library"] .creator-note,
#app[data-view="library"] .soft-note,
#app[data-view="library"] .one-liner,
#app[data-view="library"] .hand-note {
  font-family: "YanYanHand", "KaiTi", "STKaiti", cursive !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] .feature-node strong,
#app[data-view="library"] .test-card h2,
#app[data-view="library"] .activity-card h2,
#app[data-view="library"] .observation-card h2,
#app[data-view="library"] .observation-text-card h1,
#app[data-view="library"] .question-card h1,
#app[data-view="library"] .question-card h2,
#app[data-view="library"] .result-title,
#app[data-view="library"] .result-name {
  font-family: "YanYanBrand", "Songti SC", "STSong", serif !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

/* 2026-06-07: final font lock.
   Only long reading copy uses Songti. UI labels, buttons and titles use the custom type system. */
#app[data-view="library"] {
  --font-brand: "YanYanBrand", serif;
  --font-hand: "YanYanHand", cursive;
  --font-ink: "YanYanInk", serif;
  --font-alt: "YanYanAlt", serif;
  --font-body: "Songti SC", "STSong", "SimSun", serif;
}

#app[data-view="library"] .wordmark,
#app[data-view="library"] .brand-title,
#app[data-view="library"] .home-brand-title {
  font-family: var(--font-hand) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] :is(
  h1,
  h2,
  h3,
  .page-title,
  .section-heading h2,
  .feature-node strong,
  .test-card h2,
  .test-card-title,
  .event-card h3,
  .activity-card h2,
  .activity-title,
  .observation-card h2,
  .observations-hero h1,
  .activities-hero h1,
  .profile-hero h1,
  .listening-hero h1,
  .observation-intro-card h1,
  .observation-text-card h1,
  .question-card h1,
  .question-card h2,
  .result-title,
  .result-name
) {
  font-family: var(--font-brand) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] :is(
  button,
  .button,
  .page-back-button,
  .topbar-links a,
  .topbar-links button,
  .floating-function-dock button,
  .home-dispatch .feature-node b,
  .home-dispatch .feature-node em,
  .function-star-map .feature-node b,
  .function-star-map .feature-node em,
  .feature-node b,
  .feature-node em,
  .eyebrow,
  .pill-tag,
  .tag,
  .soft-tag,
  .event-type,
  .event-card dt,
  .test-card-top span,
  .test-card-visual span,
  .test-meta-row span,
  .test-card-tags,
  .test-card-actions,
  .observation-type,
  .observation-number,
  .observation-source,
  .observation-arrived-note,
  .observation-prompt h2,
  .observation-echo-section .section-heading,
  .activity-type,
  .activity-status,
  .platform-logo,
  .choice-label,
  .tip,
  .form-hint,
  label,
  small
) {
  font-family: var(--font-alt) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] :is(
  .observation-main-text,
  .observation-main-text.original,
  .observation-main-text.quote,
  .daily-reflection blockquote,
  .result-reminder,
  .creator-note,
  .soft-note,
  .one-liner,
  .hand-note
) {
  font-family: var(--font-hand) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] :is(
  p,
  li,
  input,
  textarea,
  blockquote,
  .reading-copy,
  .test-card p,
  .activity-card p,
  .observation-card p,
  .observation-intro-card p:not(.eyebrow),
  .observations-hero p:not(.eyebrow),
  .activities-hero p:not(.eyebrow),
  .profile-hero p:not(.eyebrow),
  .listening-boundary,
  .disclaimer
) {
  font-family: var(--font-body) !important;
  font-synthesis: none !important;
}

/* 2026-06-07: font taxonomy end cap.
   This must stay after the broad p/li reading-copy rule above. */
:root,
body[data-view="library"],
#app[data-view="library"] {
  --font-brand: "YanYanBrand", serif;
  --font-hand: "YanYanHand", cursive;
  --font-alt: "YanYanAlt", serif;
  --font-ink: "YanYanInk", serif;
  --font-body: "Songti SC", "STSong", "SimSun", serif;
  --font-serif: var(--font-brand);
  --font-sans: var(--font-body);
  --font-brand-title: var(--font-hand);
  --font-brand-body: var(--font-body);
  --font-brand-soft: var(--font-hand);
}

#app[data-view="library"] :is(
  .wordmark,
  .brand-title,
  .home-brand-title,
  .site-title,
  .hero-title
) {
  font-family: "YanYanHand", cursive !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] :is(
  h1,
  h2,
  h3,
  .page-title,
  .section-heading h2,
  .feature-node strong,
  .test-card h2,
  .test-card-title,
  .test-detail-title,
  .question-title,
  .question-card h1,
  .question-card h2,
  .result-title,
  .result-name,
  .observation-text-card h1,
  .observation-card h2,
  .observation-intro-card h1,
  .activity-card h2,
  .activity-title,
  .activities-hero h1,
  .observations-hero h1,
  .profile-hero h1,
  .listening-hero h1,
  .admin-panel h1,
  .admin-panel h2,
  .admin-panel h3
) {
  font-family: "YanYanBrand", serif !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] :is(
  button,
  .button,
  .page-back-button,
  .topbar-links a,
  .topbar-links button,
  .floating-function-dock button,
  .feature-node b,
  .feature-node em,
  .home-dispatch .feature-node b,
  .home-dispatch .feature-node em,
  .function-star-map .feature-node b,
  .function-star-map .feature-node em,
  .eyebrow,
  .pill-tag,
  .tag,
  .soft-tag,
  .test-card-top span,
  .test-card-visual span,
  .test-meta-row span,
  .test-card-tags,
  .test-card-actions,
  .choice-label,
  .result-count-badge,
  .observation-type,
  .observation-number,
  .observation-source,
  .observation-arrived-note,
  .observation-prompt h2,
  .observation-echo-section .section-heading,
  .observation-echo-section .eyebrow,
  .activity-type,
  .activity-status,
  .platform-logo,
  .tip,
  .form-hint,
  label,
  small,
  nav a,
  nav button
) {
  font-family: "YanYanAlt", serif !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] :is(
  .observation-main-text,
  .observation-main-text.original,
  .observation-main-text.quote,
  .daily-reflection blockquote,
  .result-reminder,
  .creator-note,
  .soft-note,
  .one-liner,
  .hand-note,
  .handwritten-note
) {
  font-family: "YanYanHand", cursive !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] .observation-text-card p.observation-main-text,
#app[data-view="library"] .observation-text-card p.observation-main-text.original,
#app[data-view="library"] .observation-text-card p.observation-main-text.quote,
#app[data-view="library"] .daily-card-result p.observation-main-text,
#app[data-view="library"] .result-card p.result-reminder,
#app[data-view="library"] .result-card p.creator-note {
  font-family: "YanYanHand", cursive !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

/* 2026-06-09: activity page font lock.
   Keep this at the very end so activity labels cannot fall back to reading Songti. */
#app[data-view="library"] .activities-hero .eyebrow,
#app[data-view="library"] .event-card .event-type,
#app[data-view="library"] .event-card dt,
#app[data-view="library"] .event-card .button {
  font-family: "YanYanAlt", serif !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] .activities-hero h1,
#app[data-view="library"] .event-card h3 {
  font-family: "YanYanBrand", serif !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] .activities-hero p:not(.eyebrow),
#app[data-view="library"] .event-card dd,
#app[data-view="library"] .event-card p {
  font-family: "Songti SC", "STSong", "SimSun", serif !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

/* 2026-06-09: final font scheme from the user.
   No Songti for body/UI. Use YanYanBrand as the calm default across reading,
   buttons, navigation and forms; reserve YanYanHand for brand/emotion and
   YanYanAlt only for small seals/tags. Keep this block last. */
:root {
  --font-brand: "YanYanBrand", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-hand: "YanYanHand", "KaiTi", "STKaiti", cursive;
  --font-alt: "YanYanAlt", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-ink: "YanYanAlt", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: var(--font-brand);
  --font-sans: var(--font-brand);
  --font-serif: var(--font-brand);
  --font-brand-title: var(--font-hand);
  --font-brand-body: var(--font-brand);
  --font-brand-soft: var(--font-hand);
}

body,
#app,
.view,
p,
li,
dd,
dt,
blockquote,
button,
.button,
a,
label,
input,
textarea,
select,
option,
small,
.topbar-links a,
.topbar-links button,
.floating-function-dock a,
.floating-function-dock button,
.page-back-button,
.feature-node p,
.feature-node .feature-button,
.test-card p,
.test-card button,
.test-card .button,
.test-meta-row span,
.question-card p,
.question-card button,
.answer-option,
.result-section p,
.observation-card p,
.observation-card button,
.activity-card p,
.event-card p,
.event-card dd,
.event-card button,
.profile-section p,
.listening-card p,
.form-card p {
  font-family: var(--font-brand) !important;
  font-weight: 400;
  font-synthesis: none !important;
}

.wordmark,
.brand-title,
.home-brand-title,
.site-title,
.home-galaxy-brand,
.hero-title,
.main-brand-title {
  font-family: var(--font-hand) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

h1,
h2,
h3,
h4,
.page-title,
.section-heading,
.section-heading h2,
.feature-node strong,
.feature-node-title,
.test-card h2,
.test-card h3,
.test-card-title,
.test-detail-title,
.question-title,
.question-card h1,
.question-card h2,
.result-title,
.result-name,
.observation-intro-card h1,
.observation-text-card h1,
.observation-card h2,
.activities-hero h1,
.activity-card h2,
.activity-title,
.event-card h3,
.observations-hero h1,
.profile-hero h1,
.listening-hero h1,
.admin-panel h1,
.admin-panel h2,
.admin-panel h3 {
  font-family: var(--font-brand) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

.tag,
.pill-tag,
.soft-tag,
.eyebrow,
.event-type,
.activity-status,
.test-card-tags,
.test-card .tag,
.test-card .pill,
.result-count-badge,
.comment-result-tag,
.platform-pill,
.observation-type,
.observation-number,
.observation-source,
.form-hint,
.tiny-label,
.seal-label {
  font-family: var(--font-alt) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

.hand-note,
.handwritten-note,
.soft-note,
.one-liner,
.creator-note,
.result-reminder,
.observation-main-text,
.observation-text,
.observation-quote,
.observation-arrived-note,
.daily-care-line,
.emotional-line {
  font-family: var(--font-hand) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

/* Final specificity lock: override old page-scoped patches. */
#app[data-view] .wordmark,
#app[data-view] .brand-title,
#app[data-view] .home-brand-title,
#app[data-view] .site-title,
#app[data-view] .home-galaxy-brand,
#app[data-view] .hero-title,
#app[data-view] .main-brand-title {
  font-family: var(--font-hand) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] body,
#app[data-view],
#app[data-view] .view,
#app[data-view] p,
#app[data-view] li,
#app[data-view] dd,
#app[data-view] dt,
#app[data-view] blockquote,
#app[data-view] button,
#app[data-view] .button,
#app[data-view] a,
#app[data-view] label,
#app[data-view] input,
#app[data-view] textarea,
#app[data-view] select,
#app[data-view] option,
#app[data-view] small,
#app[data-view] .feature-node,
#app[data-view] .feature-node p,
#app[data-view] .feature-node .feature-button,
#app[data-view] .page-back-button,
#app[data-view] .topbar-links a,
#app[data-view] .topbar-links button,
#app[data-view] .floating-function-dock a,
#app[data-view] .floating-function-dock button,
#app[data-view] .test-card p,
#app[data-view] .test-card button,
#app[data-view] .test-card .button,
#app[data-view] .test-meta-row span,
#app[data-view] .question-card p,
#app[data-view] .question-card button,
#app[data-view] .answer-option,
#app[data-view] .result-section p,
#app[data-view] .observation-card p,
#app[data-view] .observation-card button,
#app[data-view] .event-card p,
#app[data-view] .event-card dd,
#app[data-view] .event-card button,
#app[data-view] .event-card .button,
#app[data-view] .activities-hero p:not(.eyebrow),
#app[data-view] .profile-section p,
#app[data-view] .listening-card p,
#app[data-view] .form-card p {
  font-family: var(--font-brand) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] h1,
#app[data-view] h2,
#app[data-view] h3,
#app[data-view] h4,
#app[data-view] .page-title,
#app[data-view] .section-heading,
#app[data-view] .section-heading h2,
#app[data-view] .feature-node strong,
#app[data-view] .feature-node-title,
#app[data-view] .test-card h2,
#app[data-view] .test-card h3,
#app[data-view] .test-card-title,
#app[data-view] .test-detail-title,
#app[data-view] .question-title,
#app[data-view] .question-card h1,
#app[data-view] .question-card h2,
#app[data-view] .result-title,
#app[data-view] .result-name,
#app[data-view] .observation-intro-card h1,
#app[data-view] .observation-text-card h1,
#app[data-view] .observation-card h2,
#app[data-view] .activities-hero h1,
#app[data-view] .activity-card h2,
#app[data-view] .activity-title,
#app[data-view] .event-card h3,
#app[data-view] .observations-hero h1,
#app[data-view] .profile-hero h1,
#app[data-view] .listening-hero h1,
#app[data-view] .admin-panel h1,
#app[data-view] .admin-panel h2,
#app[data-view] .admin-panel h3 {
  font-family: var(--font-brand) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] .tag,
#app[data-view] .pill-tag,
#app[data-view] .soft-tag,
#app[data-view] .eyebrow,
#app[data-view] .event-type,
#app[data-view] .activity-type,
#app[data-view] .activity-status,
#app[data-view] .test-card-tags,
#app[data-view] .test-card .tag,
#app[data-view] .test-card .pill,
#app[data-view] .result-count-badge,
#app[data-view] .comment-result-tag,
#app[data-view] .platform-pill,
#app[data-view] .observation-type,
#app[data-view] .observation-number,
#app[data-view] .observation-source,
#app[data-view] .form-hint,
#app[data-view] .tiny-label,
#app[data-view] .seal-label {
  font-family: var(--font-alt) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] .hand-note,
#app[data-view] .handwritten-note,
#app[data-view] .soft-note,
#app[data-view] .one-liner,
#app[data-view] .creator-note,
#app[data-view] .result-reminder,
#app[data-view] .observation-main-text,
#app[data-view] .observation-text,
#app[data-view] .observation-quote,
#app[data-view] .observation-arrived-note,
#app[data-view] .daily-care-line,
#app[data-view] .emotional-line {
  font-family: var(--font-hand) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

/* 2026-06-09: EOF type lock.
   This is intentionally the last stylesheet layer: page titles, copy and all
   action buttons use YanYanBrand; only seal-like labels use YanYanAlt. */
#app[data-view] :is(
  .activities-hero p:not(:first-child),
  .activity-card p,
  .activity-card dd,
  .event-card p,
  .event-card dd,
  .event-card li,
  .event-copy,
  .activity-copy,
  .listening-card p,
  .service-card p,
  .test-card p,
  .test-card dd,
  .observation-card p,
  .observation-card dd,
  .result-section p,
  .comment-card p,
  .video-context-card p,
  .profile-section p
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-body) !important;
  line-height: 1.68 !important;
  letter-spacing: 0.02em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] :is(
  .event-card button,
  .event-card .button,
  .activity-card button,
  .activity-card .button,
  .listening-card button,
  .listening-card .button,
  .service-card button,
  .service-card .button,
  .test-card button,
  .test-card .button,
  .observation-card button,
  .observation-card .button,
  .question-card button,
  .question-card .button,
  .form-card button,
  .form-card .button,
  .comment-form button,
  .comment-form .button,
  .floating-function-dock button,
  .topbar-links button,
  .topbar-links a,
  .page-back-button
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-button) !important;
  line-height: 1.28 !important;
  letter-spacing: 0.03em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] :is(
  .event-card h3,
  .activity-card h2,
  .activity-card h3,
  .service-card h2,
  .service-card h3,
  .listening-card h2,
  .listening-card h3,
  .test-card h2,
  .test-card h3,
  .observation-card h2,
  .observation-card h3,
  .feature-node strong
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-card-title) !important;
  line-height: 1.18 !important;
  letter-spacing: 0.04em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] :is(
  .event-type,
  .activity-type,
  .activity-status,
  .event-card dt,
  .activity-card dt,
  .test-card-tags,
  .test-card .tag,
  .test-card .pill,
  .status-pill,
  .price-pill,
  .tiny-label,
  .seal-label
) {
  font-family: var(--font-alt) !important;
  font-size: var(--type-label) !important;
  line-height: 1.35 !important;
  letter-spacing: 0.04em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

/* 2026-06-09: final compact type rhythm.
   Page titles should guide, not dominate. Function pages now share one calmer
   scale so the main content is visible at first glance. */
:root,
body,
#app {
  --type-page-title: clamp(28px, 2.55vw, 38px);
  --type-section-title: clamp(22px, 1.9vw, 29px);
  --type-card-title: clamp(20px, 1.55vw, 26px);
  --type-feature-title: clamp(24px, 1.9vw, 32px);
  --type-feature-title-main: clamp(27px, 2.15vw, 38px);
  --type-question-title: clamp(22px, 2vw, 31px);
  --type-result-title: clamp(25px, 2.25vw, 36px);
  --type-emotion: clamp(24px, 2.7vw, 36px);
  --type-body: clamp(14.5px, 0.92vw, 16px);
  --type-body-small: clamp(12.5px, 0.78vw, 14px);
  --type-button: clamp(13px, 0.82vw, 14.5px);
  --type-label: clamp(11.5px, 0.72vw, 12.5px);
}

#app[data-view] :is(
  .page-title,
  .activities-hero h1,
  .observations-hero h1,
  .profile-hero h1,
  .listening-hero h1,
  .observation-intro-card h1,
  .observation-text-card h1,
  .admin-panel h1
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-page-title) !important;
  line-height: 1.16 !important;
  letter-spacing: 0.035em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] :is(
  .section-heading,
  .section-heading h2,
  .section-title,
  .admin-panel h2,
  .admin-panel h3
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-section-title) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.035em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] :is(
  .feature-node strong,
  .feature-node-title,
  .test-card h2,
  .test-card h3,
  .test-card-title,
  .activity-card h2,
  .activity-card h3,
  .activity-title,
  .event-card h3,
  .observation-card h2,
  .observation-card h3,
  .service-card h2,
  .service-card h3,
  .listening-card h2,
  .listening-card h3
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-card-title) !important;
  line-height: 1.18 !important;
  letter-spacing: 0.035em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  text-wrap: balance;
}

#app[data-view] :is(
  p,
  li,
  dd,
  dt,
  blockquote,
  a,
  .feature-node p,
  .feature-node em,
  .test-card p,
  .test-card dd,
  .activity-card p,
  .activity-card dd,
  .event-card p,
  .event-card dd,
  .event-card li,
  .observation-card p,
  .observation-card dd,
  .profile-section p,
  .listening-card p,
  .service-card p,
  .result-section p,
  .question-card p,
  .answer-option,
  .video-context-card p,
  .comment-card p
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-body) !important;
  line-height: 1.58 !important;
  letter-spacing: 0.018em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] :is(
  button,
  .button,
  .page-back-button,
  .feature-node b,
  .feature-node .feature-button,
  .topbar-links a,
  .topbar-links button,
  .floating-function-dock a,
  .floating-function-dock button,
  input,
  textarea,
  select,
  option,
  label
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-button) !important;
  line-height: 1.24 !important;
  letter-spacing: 0.025em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] :is(
  .tag,
  .pill-tag,
  .soft-tag,
  .eyebrow,
  .event-type,
  .activity-type,
  .activity-status,
  .event-card dt,
  .activity-card dt,
  .test-card-tags,
  .test-card .tag,
  .test-card .pill,
  .result-count-badge,
  .comment-result-tag,
  .platform-pill,
  .observation-type,
  .observation-number,
  .observation-source,
  .form-hint,
  .tiny-label,
  .seal-label
) {
  font-family: var(--font-alt) !important;
  font-size: var(--type-label) !important;
  line-height: 1.3 !important;
  letter-spacing: 0.04em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] :is(
  .observation-main-text,
  .observation-main-text.original,
  .observation-main-text.quote,
  .observation-text,
  .observation-quote,
  .daily-care-line,
  .emotional-line,
  .result-reminder,
  .creator-note
) {
  font-family: var(--font-hand) !important;
  font-size: var(--type-emotion) !important;
  line-height: 1.42 !important;
  letter-spacing: 0.035em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

@media (max-width: 900px) {
  :root,
  body,
  #app {
    --type-page-title: clamp(25px, 6.2vw, 34px);
    --type-section-title: clamp(21px, 5vw, 28px);
    --type-card-title: clamp(19px, 4.9vw, 25px);
    --type-feature-title: clamp(21px, 5vw, 28px);
    --type-feature-title-main: clamp(23px, 5.6vw, 32px);
    --type-question-title: clamp(21px, 5.3vw, 30px);
    --type-result-title: clamp(23px, 5.8vw, 32px);
    --type-emotion: clamp(23px, 6.2vw, 32px);
    --type-body: 14.5px;
    --type-body-small: 12.5px;
    --type-button: 13px;
    --type-label: 11.5px;
  }
}

/* 2026-06-09: definitive typography lock v14.
   Keep this at true EOF: it is the final authority for all public pages.
   Brand wordmark uses YanYanHand; titles, copy, buttons, navigation and forms
   use YanYanBrand; only small seals/tags use YanYanAlt. No visible Songti. */
:root,
body,
#app {
  --font-brand: "YanYanBrand", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-hand: "YanYanHand", "KaiTi", "STKaiti", cursive;
  --font-alt: "YanYanAlt", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-ink: var(--font-alt);
  --font-body: var(--font-brand);
  --font-sans: var(--font-brand);
  --font-serif: var(--font-brand);

  --type-page-title: clamp(25px, 2vw, 32px);
  --type-section-title: clamp(21px, 1.45vw, 25px);
  --type-card-title: clamp(20px, 1.42vw, 25px);
  --type-feature-title: clamp(22px, 1.58vw, 28px);
  --type-feature-title-main: clamp(24px, 1.75vw, 31px);
  --type-question-title: clamp(21px, 1.62vw, 28px);
  --type-result-title: clamp(23px, 1.82vw, 31px);
  --type-emotion: clamp(23px, 2.05vw, 31px);
  --type-body: clamp(14px, 0.84vw, 15px);
  --type-body-small: clamp(12px, 0.72vw, 13px);
  --type-button: clamp(12.5px, 0.76vw, 13.5px);
  --type-label: clamp(10.5px, 0.64vw, 11.5px);
}

#app[data-view] {
  font-family: var(--font-brand) !important;
  font-synthesis: none !important;
}

#app[data-view] :is(
  .wordmark,
  .brand-title,
  .site-title
) {
  font-family: var(--font-hand) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] :is(
  .page-title,
  .activities-hero h1,
  .observations-hero h1,
  .profile-hero h1,
  .listening-hero h1,
  .listening-progress-card h1,
  .observation-intro-card h1,
  .observation-text-card h1,
  .intro h1,
  .center-view h1,
  .admin-panel h1
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-page-title) !important;
  line-height: 1.15 !important;
  letter-spacing: 0.035em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  text-wrap: balance;
}

#app[data-view] :is(
  .section-heading,
  .section-heading h2,
  .section-title,
  .result-section h2,
  .result-section-title-row h2,
  .radar-copy h2,
  .poster-guide h2,
  .feedback-panel h2,
  .admin-panel h2,
  .admin-panel h3
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-section-title) !important;
  line-height: 1.18 !important;
  letter-spacing: 0.035em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  text-wrap: balance;
}

#app[data-view] :is(
  .feature-node strong,
  .feature-node-title,
  .test-card h2,
  .test-card h3,
  .test-card-title,
  .event-card h3,
  .activity-card h2,
  .activity-card h3,
  .activity-title,
  .observation-card h2,
  .observation-card h3,
  .service-card h2,
  .service-card h3,
  .listening-card h2,
  .listening-card h3,
  .video-context-title,
  .payment-title,
  .scene-title
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-card-title) !important;
  line-height: 1.22 !important;
  letter-spacing: 0.032em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  text-wrap: balance;
}

#app[data-view="library"] .feature-node strong {
  font-size: var(--type-feature-title) !important;
}

#app[data-view="library"] .feature-node-scene strong {
  font-size: var(--type-feature-title-main) !important;
}

#app[data-view] :is(
  .question-text,
  .prompt-card
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-question-title) !important;
  line-height: 1.25 !important;
  letter-spacing: 0.028em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] .result-name {
  font-family: var(--font-brand) !important;
  font-size: var(--type-result-title) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.032em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] :is(
  p,
  li,
  dd,
  dt,
  blockquote,
  a,
  .one-liner,
  .tip,
  .disclaimer,
  .intro-copy,
  .feature-node p,
  .feature-node em,
  .test-card p,
  .test-card dd,
  .test-card-fit,
  .test-video-chip,
  .event-card p,
  .event-card dd,
  .event-card li,
  .activity-card p,
  .activity-card dd,
  .activity-card li,
  .observation-card p,
  .observation-card dd,
  .profile-section p,
  .listening-card p,
  .listening-boundary,
  .service-card p,
  .result-section p,
  .question-card p,
  .answer-option,
  .option-text,
  .video-context-card p,
  .video-context-note p,
  .comment-card p,
  .test-comment-card p,
  .echo-card p,
  .form-hint
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-body) !important;
  line-height: 1.54 !important;
  letter-spacing: 0.016em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] :is(
  button,
  .button,
  .page-back-button,
  .feature-node b,
  .feature-node .feature-button,
  .topbar-links a,
  .topbar-links button,
  .floating-function-dock a,
  .floating-function-dock button,
  input,
  textarea,
  select,
  option,
  label,
  .voice-button,
  .rating-button,
  .choice-button
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-button) !important;
  line-height: 1.22 !important;
  letter-spacing: 0.022em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] :is(
  .eyebrow,
  .tag,
  .pill-tag,
  .soft-tag,
  .event-type,
  .activity-type,
  .activity-status,
  .event-card dt,
  .activity-card dt,
  .test-card-tags,
  .test-card .tag,
  .test-card .pill,
  .test-card-top span,
  .test-card-visual span,
  .result-count-badge,
  .same-result-badge,
  .comment-result-tag,
  .platform-pill,
  .observation-type,
  .observation-number,
  .observation-source,
  .tiny-label,
  .seal-label,
  .status-pill,
  .price-pill,
  .option-key,
  .scene-kicker,
  .poster-role-stamp,
  .grit-recap-index
) {
  font-family: var(--font-alt) !important;
  font-size: var(--type-label) !important;
  line-height: 1.3 !important;
  letter-spacing: 0.04em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] :is(
  .observation-main-text,
  .observation-main-text.original,
  .observation-main-text.quote,
  .observation-text,
  .observation-quote,
  .daily-care-line,
  .emotional-line,
  .result-reminder,
  .creator-note
) {
  font-family: var(--font-hand) !important;
  font-size: var(--type-emotion) !important;
  line-height: 1.38 !important;
  letter-spacing: 0.035em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

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

#app[data-view="library"] .testing-progress-panel h2 {
  font-family: var(--font-brand) !important;
  font-size: clamp(21px, 1.5vw, 26px) !important;
  line-height: 1.18 !important;
  letter-spacing: 0.03em !important;
}

#app[data-view="library"] .testing-progress-panel p:not(.eyebrow) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-body) !important;
  line-height: 1.5 !important;
}

#app[data-view="library"] .test-card {
  overflow: hidden !important;
}

#app[data-view="library"] .test-card h2 {
  font-size: clamp(20px, 1.38vw, 24px) !important;
  line-height: 1.24 !important;
  max-width: 100% !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

#app[data-view="library"] .test-card p,
#app[data-view="library"] .test-card dd {
  max-width: 100% !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

#app[data-view="library"] .test-card-tags,
#app[data-view="library"] .test-meta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

#app[data-view="library"] .test-card .button {
  white-space: nowrap !important;
}

@media (max-width: 900px) {
  :root,
  body,
  #app {
    --type-page-title: clamp(23px, 5.4vw, 30px);
    --type-section-title: clamp(20px, 4.6vw, 25px);
    --type-card-title: clamp(19px, 4.5vw, 24px);
    --type-feature-title: clamp(20px, 4.8vw, 26px);
    --type-feature-title-main: clamp(22px, 5.3vw, 29px);
    --type-question-title: clamp(20px, 5vw, 27px);
    --type-result-title: clamp(22px, 5.4vw, 29px);
    --type-emotion: clamp(22px, 5.8vw, 30px);
    --type-body: 14px;
    --type-body-small: 12px;
    --type-button: 12.5px;
    --type-label: 10.5px;
  }

  #app[data-view="library"] .testing-progress-panel {
    grid-template-columns: 1fr !important;
  }

  #app[data-view="library"] .test-card h2 {
    font-size: clamp(19px, 4.8vw, 24px) !important;
  }
}

/* 2026-06-09: TRUE FINAL typography lock.
   Keep every feature page on one quiet scale. Only emotional short lines use
   YanYanHand; only small seals/tags use YanYanAlt. */
:root,
body,
#app {
  --font-brand: "YanYanBrand", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-hand: "YanYanHand", "KaiTi", "STKaiti", cursive;
  --font-alt: "YanYanAlt", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-ink: var(--font-alt);
  --font-body: var(--font-brand);
  --font-serif: var(--font-brand);
  --font-sans: var(--font-brand);
  --font-brand-title: var(--font-hand);
  --font-brand-body: var(--font-brand);
  --font-brand-soft: var(--font-hand);

  --type-page-title: clamp(26px, 2.25vw, 34px);
  --type-section-title: clamp(22px, 1.7vw, 28px);
  --type-card-title: clamp(21px, 1.45vw, 26px);
  --type-card-title-large: clamp(23px, 1.7vw, 30px);
  --type-question-title: clamp(22px, 1.85vw, 30px);
  --type-result-title: clamp(24px, 2vw, 34px);
  --type-body: clamp(14px, 0.9vw, 15.5px);
  --type-body-small: clamp(12.5px, 0.78vw, 13.5px);
  --type-button: clamp(12.5px, 0.78vw, 14px);
  --type-label: clamp(11px, 0.68vw, 12px);
  --type-emotion: clamp(23px, 2.35vw, 34px);
}

body,
#app,
#app[data-view] {
  font-family: var(--font-brand) !important;
  font-synthesis: none !important;
}

.wordmark,
.brand-title,
.home-brand-title {
  font-family: var(--font-hand) !important;
  font-weight: 400 !important;
  letter-spacing: 0.045em !important;
}

#app[data-view] :is(
  h1,
  .page-title,
  .activities-hero h1,
  .observations-hero h1,
  .profile-hero h1,
  .listening-hero h1,
  .listening-progress-card h1,
  .observation-intro-card h1,
  .observation-card-result h1,
  .observation-text-card h1,
  .admin-panel h1,
  .result-name
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-page-title) !important;
  line-height: 1.18 !important;
  letter-spacing: 0.035em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  text-wrap: balance;
}

#app[data-view] :is(
  h2,
  .section-heading h2,
  .section-title,
  .testing-progress-panel h2,
  .result-section h2,
  .radar-copy h2,
  .admin-panel h2
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-section-title) !important;
  line-height: 1.22 !important;
  letter-spacing: 0.032em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  text-wrap: balance;
}

#app[data-view] :is(
  h3,
  .feature-node strong,
  .feature-node-title,
  .test-card h2,
  .test-card h3,
  .test-card-title,
  .activity-card h2,
  .activity-card h3,
  .event-card h3,
  .observation-card h2,
  .observation-card h3,
  .service-card h2,
  .service-card h3,
  .listening-card h2,
  .listening-card h3,
  .video-context-title
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-card-title) !important;
  line-height: 1.22 !important;
  letter-spacing: 0.03em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  max-width: 100%;
  overflow-wrap: break-word;
  text-wrap: balance;
}

#app[data-view="library"] .test-card h2,
#app[data-view="library"] .test-card h3,
#app[data-view="library"] .test-card-title {
  font-size: clamp(22px, 1.55vw, 27px) !important;
  line-height: 1.24 !important;
  letter-spacing: 0.025em !important;
}

#app[data-view] :is(
  .question-text,
  .scene-title,
  .prompt-card
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-question-title) !important;
  line-height: 1.25 !important;
  letter-spacing: 0.028em !important;
  font-weight: 400 !important;
}

#app[data-view] :is(
  p,
  li,
  dd,
  dt,
  blockquote,
  a,
  .feature-node p,
  .feature-node em,
  .section-heading p,
  .test-card p,
  .test-card dd,
  .test-card-fit,
  .test-video-chip,
  .activity-card p,
  .activity-card dd,
  .event-card p,
  .event-card dd,
  .event-card li,
  .observation-card p,
  .observation-card dd,
  .profile-section p,
  .listening-card p,
  .listening-progress-card p,
  .testing-progress-panel p,
  .service-card p,
  .result-section p,
  .question-card p,
  .answer-option,
  .option-text,
  .video-context-card p,
  .comment-card p,
  .test-comment-card p,
  .echo-card p,
  .one-liner,
  .disclaimer,
  .tip
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-body) !important;
  line-height: 1.56 !important;
  letter-spacing: 0.016em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] :is(
  button,
  .button,
  .page-back-button,
  .feature-node b,
  .feature-node .feature-button,
  .topbar-links a,
  .topbar-links button,
  .floating-function-dock a,
  .floating-function-dock button,
  input,
  textarea,
  select,
  option,
  label,
  .option-key
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-button) !important;
  line-height: 1.24 !important;
  letter-spacing: 0.02em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] :is(
  .tag,
  .pill-tag,
  .soft-tag,
  .eyebrow,
  .event-type,
  .activity-type,
  .activity-status,
  .event-card dt,
  .activity-card dt,
  .test-card-tags,
  .test-card .tag,
  .test-card .pill,
  .test-card-top span,
  .test-card-visual span,
  .test-meta-row span,
  .playtest-strip span,
  .result-count-badge,
  .same-result-badge,
  .comment-result-tag,
  .platform-pill,
  .observation-type,
  .observation-number,
  .observation-source,
  .form-hint,
  .tiny-label,
  .seal-label
) {
  font-family: var(--font-alt) !important;
  font-size: var(--type-label) !important;
  line-height: 1.32 !important;
  letter-spacing: 0.04em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] :is(
  .observation-main-text,
  .observation-main-text.original,
  .observation-main-text.quote,
  .observation-text,
  .observation-quote,
  .daily-care-line,
  .emotional-line,
  .result-reminder,
  .creator-note
) {
  font-family: var(--font-hand) !important;
  font-size: var(--type-emotion) !important;
  line-height: 1.42 !important;
  letter-spacing: 0.035em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] .testing-progress-panel {
  min-height: 0 !important;
}

#app[data-view="library"] .testing-progress-panel h2 {
  font-size: clamp(22px, 1.55vw, 28px) !important;
}

#app[data-view="library"] .test-card {
  overflow: hidden;
}

#app[data-view="library"] .test-card :is(h2, h3, p, span, button) {
  max-width: 100%;
}

@media (max-width: 900px) {
  :root,
  body,
  #app {
    --type-page-title: clamp(24px, 5.4vw, 31px);
    --type-section-title: clamp(21px, 4.8vw, 27px);
    --type-card-title: clamp(19px, 4.6vw, 24px);
    --type-card-title-large: clamp(21px, 5vw, 27px);
    --type-question-title: clamp(20px, 5vw, 28px);
    --type-result-title: clamp(22px, 5.3vw, 31px);
    --type-body: 14px;
    --type-body-small: 12.5px;
    --type-button: 12.5px;
    --type-label: 11px;
    --type-emotion: clamp(22px, 6vw, 31px);
  }
}

/* 2026-06-09: galaxy entry type specificity fix.
   Older star-map rules target individual nodes very strongly; this keeps the
   home entries on the same compact rhythm as the function pages. */
#app[data-view="library"] .feature-node strong,
#app[data-view="home"] .feature-node strong,
#app[data-view="library"] .feature-node-title,
#app[data-view="home"] .feature-node-title {
  font-family: var(--font-brand) !important;
  font-size: var(--type-card-title) !important;
  line-height: 1.16 !important;
  letter-spacing: 0.035em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  text-wrap: balance;
}

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

#app[data-view="library"] .feature-node :is(p, em),
#app[data-view="home"] .feature-node :is(p, em) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-body) !important;
  line-height: 1.46 !important;
  letter-spacing: 0.018em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] .feature-node :is(b, button, .feature-button),
#app[data-view="home"] .feature-node :is(b, button, .feature-button) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-button) !important;
  line-height: 1.22 !important;
  letter-spacing: 0.025em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

@media (max-width: 900px) {
  #app[data-view="library"] .feature-node-scene strong,
  #app[data-view="home"] .feature-node-scene strong {
    font-size: clamp(22px, 5.2vw, 30px) !important;
  }
}

/* 2026-06-09: final type leak plugs.
   Some older page-specific rules used Songti for activity copy and YanYanAlt for
   action buttons. Keep this block at the very end so page modules share one
   stable type scale. */
#app[data-view] :is(
  .activities-hero p:not(:first-child),
  .activity-card p,
  .activity-card dd,
  .event-card p,
  .event-card dd,
  .event-card li,
  .event-copy,
  .activity-copy,
  .listening-card p,
  .service-card p,
  .test-card p,
  .test-card dd,
  .observation-card p,
  .observation-card dd,
  .result-section p,
  .comment-card p,
  .video-context-card p,
  .profile-section p
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-body) !important;
  line-height: 1.68 !important;
  letter-spacing: 0.02em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] :is(
  .event-card button,
  .event-card .button,
  .activity-card button,
  .activity-card .button,
  .listening-card button,
  .listening-card .button,
  .service-card button,
  .service-card .button,
  .test-card button,
  .test-card .button,
  .observation-card button,
  .observation-card .button,
  .question-card button,
  .question-card .button,
  .form-card button,
  .form-card .button,
  .comment-form button,
  .comment-form .button
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-button) !important;
  line-height: 1.28 !important;
  letter-spacing: 0.03em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] :is(
  .event-card h3,
  .activity-card h2,
  .activity-card h3,
  .service-card h2,
  .service-card h3,
  .listening-card h2,
  .listening-card h3,
  .test-card h2,
  .test-card h3,
  .observation-card h2,
  .observation-card h3
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-card-title) !important;
  line-height: 1.18 !important;
  letter-spacing: 0.04em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] :is(
  .event-type,
  .activity-type,
  .activity-status,
  .event-card dt,
  .activity-card dt,
  .test-card-tags,
  .test-card .tag,
  .test-card .pill,
  .status-pill,
  .price-pill,
  .tiny-label,
  .seal-label
) {
  font-family: var(--font-alt) !important;
  font-size: var(--type-label) !important;
  line-height: 1.35 !important;
  letter-spacing: 0.04em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

/* 2026-06-09: unified type scale.
   One final size ladder for all function pages, so titles no longer jump
   between oversized poster text and tiny utility labels. */
:root,
body,
#app {
  --type-brand-nav: clamp(18px, 1.2vw, 22px);
  --type-page-title: clamp(30px, 3.1vw, 46px);
  --type-section-title: clamp(24px, 2.35vw, 34px);
  --type-card-title: clamp(22px, 2.05vw, 30px);
  --type-feature-title: clamp(27px, 2.35vw, 40px);
  --type-feature-title-main: clamp(31px, 2.75vw, 48px);
  --type-body: clamp(15px, 1.05vw, 18px);
  --type-body-small: clamp(13px, 0.9vw, 15px);
  --type-button: clamp(13px, 0.92vw, 15px);
  --type-label: clamp(12px, 0.82vw, 13.5px);
  --type-emotion: clamp(26px, 3.4vw, 40px);
  --type-question-title: clamp(23px, 2.45vw, 36px);
  --type-result-title: clamp(28px, 2.8vw, 42px);
}

#app[data-view] :is(
  h1,
  h2,
  h3,
  h4,
  .page-title,
  .section-heading,
  .section-heading h2,
  .feature-node strong,
  .test-card h2,
  .test-card-title,
  .activity-card h2,
  .activity-title,
  .event-card h3,
  .observation-card h2,
  .observation-intro-card h1,
  .observation-text-card h1,
  .observations-hero h1,
  .profile-hero h1,
  .listening-hero h1,
  .result-title,
  .result-name,
  .question-title
) {
  letter-spacing: 0.035em !important;
  line-height: 1.18 !important;
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: normal;
}

#app[data-view] :is(
  .page-title,
  .activities-hero h1,
  .observations-hero h1,
  .profile-hero h1,
  .listening-hero h1,
  .observation-intro-card h1
) {
  font-size: var(--type-page-title) !important;
}

#app[data-view] :is(
  .section-heading,
  .section-heading h2,
  .section-title,
  .admin-panel h2
) {
  font-size: var(--type-section-title) !important;
}

#app[data-view] :is(
  .test-card h2,
  .test-card h3,
  .test-card-title,
  .activity-card h2,
  .activity-title,
  .event-card h3,
  .observation-card h2
) {
  font-size: var(--type-card-title) !important;
}

#app[data-view] :is(
  .question-title,
  .question-card h1,
  .question-card h2
) {
  font-size: var(--type-question-title) !important;
}

#app[data-view] :is(
  .result-title,
  .result-name
) {
  font-size: var(--type-result-title) !important;
}

#app[data-view] :is(
  p,
  li,
  dd,
  dt,
  blockquote,
  .test-card p,
  .activity-card p,
  .event-card p,
  .event-card dd,
  .observation-card p,
  .observation-intro-card p:not(.eyebrow),
  .observations-hero p:not(.eyebrow),
  .profile-section p,
  .listening-card p,
  .result-section p,
  .question-card p,
  .answer-option
) {
  font-size: var(--type-body) !important;
  line-height: 1.68 !important;
  letter-spacing: 0.018em !important;
}

#app[data-view] :is(
  .feature-node em,
  .feature-node p,
  .home-dispatch .feature-node em,
  .function-star-map .feature-node em,
  small,
  .form-hint,
  .muted-copy,
  .test-meta-row,
  .observation-source,
  .observation-arrived-note
) {
  font-size: var(--type-body-small) !important;
  line-height: 1.5 !important;
  letter-spacing: 0.018em !important;
}

#app[data-view] :is(
  button,
  .button,
  .page-back-button,
  .feature-node b,
  .feature-node .feature-button,
  .home-dispatch .feature-node b,
  .function-star-map .feature-node b,
  .topbar-links a,
  .topbar-links button,
  .floating-function-dock a,
  .floating-function-dock button,
  input,
  textarea,
  select,
  label
) {
  font-size: var(--type-button) !important;
  line-height: 1.28 !important;
  letter-spacing: 0.02em !important;
}

#app[data-view] :is(
  .tag,
  .pill-tag,
  .soft-tag,
  .eyebrow,
  .event-type,
  .activity-type,
  .activity-status,
  .test-card-tags,
  .test-card .tag,
  .test-card .pill,
  .test-card-top span,
  .test-card-visual span,
  .result-count-badge,
  .comment-result-tag,
  .platform-pill,
  .observation-type,
  .observation-number,
  .form-hint,
  .tiny-label,
  .seal-label
) {
  font-size: var(--type-label) !important;
  line-height: 1.22 !important;
  letter-spacing: 0.04em !important;
}

#app[data-view] :is(
  .observation-main-text,
  .observation-main-text.original,
  .observation-main-text.quote,
  .observation-text,
  .observation-quote,
  .daily-care-line,
  .emotional-line,
  .result-reminder
) {
  font-size: var(--type-emotion) !important;
  line-height: 1.42 !important;
  letter-spacing: 0.035em !important;
}

#app[data-view] .observation-arrived-note,
#app[data-view] .observation-source {
  font-family: var(--font-brand) !important;
}

#app[data-view] .wordmark {
  font-size: var(--type-brand-nav) !important;
  line-height: 1.08 !important;
}

#app[data-view="library"] .feature-node strong {
  font-size: var(--type-feature-title) !important;
}

#app[data-view="library"] .feature-node-scene strong {
  font-size: var(--type-feature-title-main) !important;
}

@media (max-width: 900px) {
  :root,
  body,
  #app {
    --type-page-title: clamp(28px, 7vw, 40px);
    --type-section-title: clamp(23px, 5.6vw, 32px);
    --type-card-title: clamp(21px, 5.3vw, 29px);
    --type-feature-title: clamp(22px, 5.4vw, 30px);
    --type-feature-title-main: clamp(24px, 6vw, 34px);
    --type-body: 15px;
    --type-body-small: 13px;
    --type-button: 13px;
    --type-label: 12px;
    --type-emotion: clamp(24px, 7vw, 34px);
  }
}

@media (max-width: 560px) {
  #app[data-view] :is(
    h1,
    h2,
    h3,
    .page-title,
    .feature-node strong,
    .test-card h2,
    .activity-card h2,
    .observation-card h2
  ) {
    line-height: 1.16 !important;
    letter-spacing: 0.025em !important;
  }
}

/* Absolute final page-scoped lock: older patches used high-specificity :is(button)
   selectors, so these rules must be last and equally specific. */
#app[data-view="library"] .site-topbar.home-topbar .wordmark,
#app[data-view="library"] .site-topbar .wordmark.wordmark,
#app[data-view="library"] .wordmark.wordmark {
  font-family: var(--font-hand) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] :is(
  button,
  .button,
  .page-back-button,
  .topbar-links a,
  .topbar-links button,
  .floating-function-dock a,
  .floating-function-dock button,
  .feature-node .feature-button,
  .test-card button,
  .test-card .button,
  .question-card button,
  .observation-card button,
  .event-card button,
  .event-card .button,
  .form-card button,
  input,
  textarea,
  select,
  label
) {
  font-family: var(--font-brand) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] :is(
  .eyebrow,
  .tag,
  .pill-tag,
  .soft-tag,
  .event-type,
  .activity-type,
  .activity-status,
  .test-card-tags,
  .test-card .tag,
  .test-card .pill,
  .result-count-badge,
  .comment-result-tag,
  .platform-pill,
  .observation-type,
  .observation-number,
  .observation-source,
  .form-hint,
  .tiny-label,
  .seal-label
) {
  font-family: var(--font-alt) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view="library"] :is(
  .feature-node b,
  .feature-node em,
  .home-dispatch .feature-node b,
  .home-dispatch .feature-node em,
  .function-star-map .feature-node b,
  .function-star-map .feature-node em
) {
  font-family: var(--font-brand) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

/* 2026-06-09: user-confirmed final type system.
   - Brand wordmark: YanYanHand.
   - Titles, reading copy, buttons, navigation and forms: YanYanBrand.
   - Small seals/tags only: YanYanAlt.
   - Emotional observation lines: YanYanHand.
   This intentionally avoids Songti as a visible site font. */
:root,
body,
#app {
  --font-brand: "YanYanBrand", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-hand: "YanYanHand", "KaiTi", "STKaiti", cursive;
  --font-alt: "YanYanAlt", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-ink: var(--font-alt);
  --font-body: var(--font-brand);
  --font-sans: var(--font-brand);
  --font-serif: var(--font-brand);
  --font-brand-title: var(--font-hand);
  --font-brand-body: var(--font-brand);
  --font-brand-soft: var(--font-hand);
}

body,
#app,
#app[data-view],
#app[data-view] .view,
#app[data-view] p,
#app[data-view] li,
#app[data-view] dd,
#app[data-view] dt,
#app[data-view] blockquote,
#app[data-view] a,
#app[data-view] button,
#app[data-view] .button,
#app[data-view] label,
#app[data-view] input,
#app[data-view] textarea,
#app[data-view] select,
#app[data-view] option,
#app[data-view] small,
#app[data-view] .topbar-links,
#app[data-view] .topbar-links *,
#app[data-view] .floating-function-dock,
#app[data-view] .floating-function-dock *,
#app[data-view] .page-back-button,
#app[data-view] .feature-node,
#app[data-view] .feature-node p,
#app[data-view] .feature-node .feature-button,
#app[data-view] .test-card p,
#app[data-view] .test-card button,
#app[data-view] .test-card .button,
#app[data-view] .test-meta-row,
#app[data-view] .test-meta-row *,
#app[data-view] .question-card p,
#app[data-view] .question-card button,
#app[data-view] .answer-option,
#app[data-view] .result-section p,
#app[data-view] .observation-card p,
#app[data-view] .observation-card button,
#app[data-view] .activity-card p,
#app[data-view] .event-card p,
#app[data-view] .event-card dd,
#app[data-view] .event-card button,
#app[data-view] .event-card .button,
#app[data-view] .profile-section p,
#app[data-view] .listening-card p,
#app[data-view] .form-card p {
  font-family: var(--font-brand) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] .wordmark,
#app[data-view] .brand-title,
#app[data-view] .home-brand-title,
#app[data-view] .site-title,
#app[data-view] .home-galaxy-brand,
#app[data-view] .main-brand-title,
#app[data-view="home"] .wordmark {
  font-family: var(--font-hand) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] h1,
#app[data-view] h2,
#app[data-view] h3,
#app[data-view] h4,
#app[data-view] .page-title,
#app[data-view] .section-heading,
#app[data-view] .section-heading h2,
#app[data-view] .feature-node strong,
#app[data-view] .feature-node-title,
#app[data-view] .test-card h2,
#app[data-view] .test-card h3,
#app[data-view] .test-card-title,
#app[data-view] .test-detail-title,
#app[data-view] .question-title,
#app[data-view] .question-card h1,
#app[data-view] .question-card h2,
#app[data-view] .result-title,
#app[data-view] .result-name,
#app[data-view] .observation-intro-card h1,
#app[data-view] .observation-text-card h1,
#app[data-view] .observation-card h2,
#app[data-view] .activities-hero h1,
#app[data-view] .activity-card h2,
#app[data-view] .activity-title,
#app[data-view] .event-card h3,
#app[data-view] .observations-hero h1,
#app[data-view] .profile-hero h1,
#app[data-view] .listening-hero h1,
#app[data-view] .admin-panel h1,
#app[data-view] .admin-panel h2,
#app[data-view] .admin-panel h3 {
  font-family: var(--font-brand) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] .tag,
#app[data-view] .pill-tag,
#app[data-view] .soft-tag,
#app[data-view] .eyebrow,
#app[data-view] .event-type,
#app[data-view] .activity-type,
#app[data-view] .activity-status,
#app[data-view] .test-card-tags,
#app[data-view] .test-card .tag,
#app[data-view] .test-card .pill,
#app[data-view] .result-count-badge,
#app[data-view] .comment-result-tag,
#app[data-view] .platform-pill,
#app[data-view] .observation-type,
#app[data-view] .observation-number,
#app[data-view] .observation-source,
#app[data-view] .form-hint,
#app[data-view] .tiny-label,
#app[data-view] .seal-label {
  font-family: var(--font-alt) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] .hand-note,
#app[data-view] .handwritten-note,
#app[data-view] .soft-note,
#app[data-view] .one-liner,
#app[data-view] .creator-note,
#app[data-view] .result-reminder,
#app[data-view] .observation-main-text,
#app[data-view] .observation-text,
#app[data-view] .observation-quote,
#app[data-view] .observation-arrived-note,
#app[data-view] .daily-care-line,
#app[data-view] .emotional-line {
  font-family: var(--font-hand) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

/* 2026-06-09: true EOF type lock.
   Keep this after the user-confirmed final system. */
#app[data-view] :is(
  .activities-hero p:not(:first-child),
  .activity-card p,
  .activity-card dd,
  .event-card p,
  .event-card dd,
  .event-card li,
  .event-copy,
  .activity-copy,
  .listening-card p,
  .service-card p,
  .test-card p,
  .test-card dd,
  .observation-card p,
  .observation-card dd,
  .result-section p,
  .comment-card p,
  .video-context-card p,
  .profile-section p
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-body) !important;
  line-height: 1.68 !important;
  letter-spacing: 0.02em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] :is(
  .event-card button,
  .event-card .button,
  .activity-card button,
  .activity-card .button,
  .listening-card button,
  .listening-card .button,
  .service-card button,
  .service-card .button,
  .test-card button,
  .test-card .button,
  .observation-card button,
  .observation-card .button,
  .question-card button,
  .question-card .button,
  .form-card button,
  .form-card .button,
  .comment-form button,
  .comment-form .button,
  .floating-function-dock button,
  .topbar-links button,
  .topbar-links a,
  .page-back-button
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-button) !important;
  line-height: 1.28 !important;
  letter-spacing: 0.03em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] :is(
  .event-card h3,
  .activity-card h2,
  .activity-card h3,
  .service-card h2,
  .service-card h3,
  .listening-card h2,
  .listening-card h3,
  .test-card h2,
  .test-card h3,
  .observation-card h2,
  .observation-card h3,
  .feature-node strong
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-card-title) !important;
  line-height: 1.18 !important;
  letter-spacing: 0.04em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] :is(
  .event-type,
  .activity-type,
  .activity-status,
  .event-card dt,
  .activity-card dt,
  .test-card-tags,
  .test-card .tag,
  .test-card .pill,
  .status-pill,
  .price-pill,
  .tiny-label,
  .seal-label
) {
  font-family: var(--font-alt) !important;
  font-size: var(--type-label) !important;
  line-height: 1.35 !important;
  letter-spacing: 0.04em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

/* 2026-06-09: final compact type rhythm.
   This block is intentionally after every older type lock. It keeps all
   function pages on one calm size ladder. */
:root,
body,
#app {
  --type-page-title: clamp(28px, 2.55vw, 38px);
  --type-section-title: clamp(22px, 1.9vw, 29px);
  --type-card-title: clamp(20px, 1.55vw, 26px);
  --type-feature-title: clamp(24px, 1.9vw, 32px);
  --type-feature-title-main: clamp(27px, 2.15vw, 38px);
  --type-question-title: clamp(22px, 2vw, 31px);
  --type-result-title: clamp(25px, 2.25vw, 36px);
  --type-emotion: clamp(24px, 2.7vw, 36px);
  --type-body: clamp(14.5px, 0.92vw, 16px);
  --type-body-small: clamp(12.5px, 0.78vw, 14px);
  --type-button: clamp(13px, 0.82vw, 14.5px);
  --type-label: clamp(11.5px, 0.72vw, 12.5px);
}

#app[data-view] :is(
  .page-title,
  .activities-hero h1,
  .observations-hero h1,
  .profile-hero h1,
  .listening-hero h1,
  .observation-intro-card h1,
  .observation-text-card h1,
  .admin-panel h1
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-page-title) !important;
  line-height: 1.16 !important;
  letter-spacing: 0.035em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] :is(
  .section-heading,
  .section-heading h2,
  .section-title,
  .admin-panel h2,
  .admin-panel h3
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-section-title) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.035em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] :is(
  .feature-node strong,
  .feature-node-title,
  .test-card h2,
  .test-card h3,
  .test-card-title,
  .activity-card h2,
  .activity-card h3,
  .activity-title,
  .event-card h3,
  .observation-card h2,
  .observation-card h3,
  .service-card h2,
  .service-card h3,
  .listening-card h2,
  .listening-card h3
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-card-title) !important;
  line-height: 1.18 !important;
  letter-spacing: 0.035em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  text-wrap: balance;
}

#app[data-view] :is(
  p,
  li,
  dd,
  dt,
  blockquote,
  a,
  .feature-node p,
  .feature-node em,
  .test-card p,
  .test-card dd,
  .activity-card p,
  .activity-card dd,
  .event-card p,
  .event-card dd,
  .event-card li,
  .observation-card p,
  .observation-card dd,
  .profile-section p,
  .listening-card p,
  .service-card p,
  .result-section p,
  .question-card p,
  .answer-option,
  .video-context-card p,
  .comment-card p
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-body) !important;
  line-height: 1.58 !important;
  letter-spacing: 0.018em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] :is(
  button,
  .button,
  .page-back-button,
  .feature-node b,
  .feature-node .feature-button,
  .topbar-links a,
  .topbar-links button,
  .floating-function-dock a,
  .floating-function-dock button,
  input,
  textarea,
  select,
  option,
  label
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-button) !important;
  line-height: 1.24 !important;
  letter-spacing: 0.025em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] :is(
  .tag,
  .pill-tag,
  .soft-tag,
  .eyebrow,
  .event-type,
  .activity-type,
  .activity-status,
  .event-card dt,
  .activity-card dt,
  .test-card-tags,
  .test-card .tag,
  .test-card .pill,
  .result-count-badge,
  .comment-result-tag,
  .platform-pill,
  .observation-type,
  .observation-number,
  .observation-source,
  .form-hint,
  .tiny-label,
  .seal-label
) {
  font-family: var(--font-alt) !important;
  font-size: var(--type-label) !important;
  line-height: 1.3 !important;
  letter-spacing: 0.04em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] :is(
  .observation-main-text,
  .observation-main-text.original,
  .observation-main-text.quote,
  .observation-text,
  .observation-quote,
  .daily-care-line,
  .emotional-line,
  .result-reminder,
  .creator-note
) {
  font-family: var(--font-hand) !important;
  font-size: var(--type-emotion) !important;
  line-height: 1.42 !important;
  letter-spacing: 0.035em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

@media (max-width: 900px) {
  :root,
  body,
  #app {
    --type-page-title: clamp(25px, 6.2vw, 34px);
    --type-section-title: clamp(21px, 5vw, 28px);
    --type-card-title: clamp(19px, 4.9vw, 25px);
    --type-feature-title: clamp(21px, 5vw, 28px);
    --type-feature-title-main: clamp(23px, 5.6vw, 32px);
    --type-question-title: clamp(21px, 5.3vw, 30px);
    --type-result-title: clamp(23px, 5.8vw, 32px);
    --type-emotion: clamp(23px, 6.2vw, 32px);
    --type-body: 14.5px;
    --type-body-small: 12.5px;
    --type-button: 13px;
    --type-label: 11.5px;
  }
}

/* 2026-06-09: REAL EOF typography lock v15.
   This is the final live typography map for every public page.
   - Brand wordmark: YanYanHand.
   - Page/function/test/card titles: YanYanBrand.
   - Reading copy, buttons, navigation and forms: YanYanBrand.
   - Small seals/tags only: YanYanAlt.
   - Emotional observation lines: YanYanHand.
   No visible Songti/system serif in the site UI. */
:root,
body,
#app {
  --font-brand: "YanYanBrand", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-hand: "YanYanHand", "KaiTi", "STKaiti", cursive;
  --font-alt: "YanYanAlt", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-ink: var(--font-alt);
  --font-body: var(--font-brand);
  --font-serif: var(--font-brand);
  --font-sans: var(--font-brand);

  --type-page-title: clamp(24px, 1.9vw, 31px);
  --type-section-title: clamp(20px, 1.35vw, 24px);
  --type-card-title: clamp(19px, 1.3vw, 24px);
  --type-feature-title: clamp(21px, 1.48vw, 27px);
  --type-feature-title-main: clamp(23px, 1.65vw, 30px);
  --type-question-title: clamp(20px, 1.52vw, 27px);
  --type-result-title: clamp(22px, 1.7vw, 30px);
  --type-emotion: clamp(22px, 1.95vw, 30px);
  --type-body: clamp(13.5px, 0.82vw, 14.5px);
  --type-body-small: clamp(12px, 0.7vw, 13px);
  --type-button: clamp(12px, 0.72vw, 13px);
  --type-label: clamp(10.5px, 0.62vw, 11.5px);
}

#app,
#app[data-view],
#app[data-view] :is(p, li, dd, dt, blockquote, a, button, input, textarea, select, option, label) {
  font-family: var(--font-brand) !important;
  font-synthesis: none !important;
}

#app[data-view] :is(.wordmark, .brand-title, .home-brand-title, .site-title) {
  font-family: var(--font-hand) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] :is(
  .page-title,
  .activities-hero h1,
  .observations-hero h1,
  .profile-hero h1,
  .listening-hero h1,
  .listening-progress-card h1,
  .observation-intro-card h1,
  .observation-text-card h1,
  .intro h1,
  .center-view h1,
  .admin-panel h1
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-page-title) !important;
  line-height: 1.15 !important;
  letter-spacing: 0.032em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  text-wrap: balance;
}

#app[data-view] :is(
  .section-heading,
  .section-heading h2,
  .section-title,
  .result-section h2,
  .result-section-title-row h2,
  .radar-copy h2,
  .poster-guide h2,
  .feedback-panel h2,
  .admin-panel h2,
  .admin-panel h3
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-section-title) !important;
  line-height: 1.18 !important;
  letter-spacing: 0.032em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  text-wrap: balance;
}

#app[data-view] :is(
  .feature-node strong,
  .feature-node-title,
  .test-card h2,
  .test-card h3,
  .test-card-title,
  .event-card h3,
  .activity-card h2,
  .activity-card h3,
  .activity-title,
  .observation-card h2,
  .observation-card h3,
  .service-card h2,
  .service-card h3,
  .listening-card h2,
  .listening-card h3,
  .video-context-title,
  .payment-title,
  .scene-title
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-card-title) !important;
  line-height: 1.22 !important;
  letter-spacing: 0.03em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  text-wrap: balance;
}

#app[data-view="library"] .feature-node strong { font-size: var(--type-feature-title) !important; }
#app[data-view="library"] .feature-node-scene strong { font-size: var(--type-feature-title-main) !important; }

#app[data-view] :is(.question-text, .prompt-card) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-question-title) !important;
  line-height: 1.25 !important;
  letter-spacing: 0.028em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] .result-name {
  font-family: var(--font-brand) !important;
  font-size: var(--type-result-title) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.032em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] :is(
  p,
  li,
  dd,
  dt,
  blockquote,
  a,
  .one-liner,
  .tip,
  .disclaimer,
  .intro-copy,
  .feature-node p,
  .feature-node em,
  .test-card p,
  .test-card dd,
  .test-card-fit,
  .test-video-chip,
  .event-card p,
  .event-card dd,
  .event-card li,
  .activity-card p,
  .activity-card dd,
  .activity-card li,
  .observation-card p,
  .observation-card dd,
  .profile-section p,
  .listening-card p,
  .listening-boundary,
  .service-card p,
  .result-section p,
  .question-card p,
  .answer-option,
  .option-text,
  .video-context-card p,
  .video-context-note p,
  .comment-card p,
  .test-comment-card p,
  .echo-card p,
  .form-hint
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-body) !important;
  line-height: 1.54 !important;
  letter-spacing: 0.015em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] :is(
  button,
  .button,
  .page-back-button,
  .feature-node b,
  .feature-node .feature-button,
  .topbar-links a,
  .topbar-links button,
  .floating-function-dock a,
  .floating-function-dock button,
  input,
  textarea,
  select,
  option,
  label,
  .voice-button,
  .rating-button,
  .choice-button
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-button) !important;
  line-height: 1.22 !important;
  letter-spacing: 0.02em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] :is(
  .eyebrow,
  .tag,
  .pill-tag,
  .soft-tag,
  .event-type,
  .activity-type,
  .activity-status,
  .event-card dt,
  .activity-card dt,
  .test-card-tags,
  .test-card .tag,
  .test-card .pill,
  .test-card-top span,
  .test-card-visual span,
  .result-count-badge,
  .same-result-badge,
  .comment-result-tag,
  .platform-pill,
  .observation-type,
  .observation-number,
  .observation-source,
  .tiny-label,
  .seal-label,
  .status-pill,
  .price-pill,
  .option-key,
  .scene-kicker,
  .poster-role-stamp,
  .grit-recap-index
) {
  font-family: var(--font-alt) !important;
  font-size: var(--type-label) !important;
  line-height: 1.3 !important;
  letter-spacing: 0.04em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

#app[data-view] :is(
  .observation-main-text,
  .observation-main-text.original,
  .observation-main-text.quote,
  .observation-text,
  .observation-quote,
  .daily-care-line,
  .emotional-line,
  .result-reminder,
  .creator-note
) {
  font-family: var(--font-hand) !important;
  font-size: var(--type-emotion) !important;
  line-height: 1.38 !important;
  letter-spacing: 0.035em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

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

#app[data-view="library"] .testing-progress-panel h2 {
  font-family: var(--font-brand) !important;
  font-size: clamp(20px, 1.42vw, 25px) !important;
  line-height: 1.18 !important;
  letter-spacing: 0.03em !important;
}

#app[data-view="library"] .testing-progress-panel p:not(.eyebrow) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-body) !important;
  line-height: 1.5 !important;
}

#app[data-view="library"] .test-card { overflow: hidden !important; }

#app[data-view="library"] .test-card h2 {
  font-size: clamp(19px, 1.26vw, 23px) !important;
  line-height: 1.24 !important;
  max-width: 100% !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

#app[data-view="library"] .test-card p,
#app[data-view="library"] .test-card dd {
  max-width: 100% !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

#app[data-view="library"] .test-card-tags,
#app[data-view="library"] .test-meta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

#app[data-view="library"] .test-card .button { white-space: nowrap !important; }

@media (max-width: 900px) {
  :root,
  body,
  #app {
    --type-page-title: clamp(22px, 5.2vw, 29px);
    --type-section-title: clamp(19px, 4.4vw, 24px);
    --type-card-title: clamp(18px, 4.3vw, 23px);
    --type-feature-title: clamp(19px, 4.6vw, 25px);
    --type-feature-title-main: clamp(21px, 5vw, 28px);
    --type-question-title: clamp(19px, 4.8vw, 26px);
    --type-result-title: clamp(21px, 5.1vw, 28px);
    --type-emotion: clamp(21px, 5.5vw, 29px);
    --type-body: 13.5px;
    --type-body-small: 12px;
    --type-button: 12px;
    --type-label: 10.5px;
  }

  #app[data-view="library"] .testing-progress-panel { grid-template-columns: 1fr !important; }
  #app[data-view="library"] .test-card h2 { font-size: clamp(18px, 4.5vw, 23px) !important; }
}

/* 2026-06-09: site-wide typography normalization v16.
   The active view is written on both body and #app, so this lock targets both.
   Keep it last: no visible Songti/system serif, stable sizes across feature pages. */
:root,
body,
#app,
body[data-view] #app,
#app[data-view] {
  --font-brand: "YanYanBrand", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-hand: "YanYanHand", "KaiTi", "STKaiti", cursive;
  --font-ink: "YanYanAlt", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-alt: "YanYanAlt", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: var(--font-brand);
  --font-sans: var(--font-brand);
  --font-serif: var(--font-brand);
  --type-brand-title: clamp(34px, 4.6vw, 58px);
  --type-page-title: clamp(25px, 2.35vw, 36px);
  --type-section-title: clamp(21px, 1.8vw, 28px);
  --type-card-title: clamp(20px, 1.42vw, 25px);
  --type-feature-title: clamp(22px, 2vw, 31px);
  --type-question-title: clamp(21px, 1.8vw, 29px);
  --type-result-title: clamp(23px, 2vw, 32px);
  --type-emotion: clamp(23px, 2.2vw, 34px);
  --type-body: clamp(13.5px, 0.96vw, 15px);
  --type-body-small: clamp(12px, 0.82vw, 13px);
  --type-button: clamp(12px, 0.86vw, 13.5px);
  --type-label: clamp(10.5px, 0.76vw, 11.5px);
}

body[data-view],
body[data-view] .app-shell,
body[data-view] #app,
body[data-view] #app .view,
#app[data-view],
#app[data-view] .view {
  font-family: var(--font-brand) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

body[data-view] #app :is(
  .feature-node,
  .feature-node-copy,
  .feature-node em,
  .feature-node .feature-node-body,
  .feature-node .feature-node-button
),
#app[data-view] :is(
  .feature-node,
  .feature-node-copy,
  .feature-node em,
  .feature-node .feature-node-body,
  .feature-node .feature-node-button
) {
  font-family: var(--font-brand) !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

body[data-view] #app .feature-node em,
#app[data-view] .feature-node em {
  font-size: var(--type-body) !important;
  line-height: 1.45 !important;
  letter-spacing: 0.015em !important;
  font-style: normal !important;
}

body[data-view] #app .feature-node .feature-node-button,
#app[data-view] .feature-node .feature-node-button {
  font-size: var(--type-button) !important;
  line-height: 1.15 !important;
  letter-spacing: 0.02em !important;
}

body[data-view] #app :is(
  p, li, dd, dt, blockquote, figcaption,
  a, button, input, textarea, select, option, label,
  .body-copy, .card-copy, .page-copy, .intro-copy,
  .hero-copy, .feature-copy, .test-description,
  .observation-card p, .activity-card p, .event-card p,
  .test-card p, .test-card dd, .question-body,
  .result-copy, .comment-copy, .form-field
),
#app[data-view] :is(
  p, li, dd, dt, blockquote, figcaption,
  a, button, input, textarea, select, option, label,
  .body-copy, .card-copy, .page-copy, .intro-copy,
  .hero-copy, .feature-copy, .test-description,
  .observation-card p, .activity-card p, .event-card p,
  .test-card p, .test-card dd, .question-body,
  .result-copy, .comment-copy, .form-field
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-body) !important;
  line-height: 1.62 !important;
  letter-spacing: 0.018em !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
}

body[data-view] #app :is(
  .brand-title,
  .site-brand-title,
  .home-brand-title,
  .creator-brand-title
),
#app[data-view] :is(
  .brand-title,
  .site-brand-title,
  .home-brand-title,
  .creator-brand-title
) {
  font-family: var(--font-hand) !important;
  font-size: var(--type-brand-title) !important;
  line-height: 1.04 !important;
  letter-spacing: 0.04em !important;
  font-weight: 400 !important;
}

body[data-view] #app :is(
  h1, .page-title, .view-title,
  .feature-page-hero h1,
  .activities-hero h1,
  .listening-page h1,
  .observation-page h1,
  .tests-page-view h1,
  .result-page h1,
  .creator-profile h1
),
#app[data-view] :is(
  h1, .page-title, .view-title,
  .feature-page-hero h1,
  .activities-hero h1,
  .listening-page h1,
  .observation-page h1,
  .tests-page-view h1,
  .result-page h1,
  .creator-profile h1
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-page-title) !important;
  line-height: 1.18 !important;
  letter-spacing: 0.035em !important;
  font-weight: 400 !important;
  text-wrap: balance;
}

body[data-view] #app :is(
  h2, .section-title, .section-heading h2,
  .tests-page-view .section-heading h2,
  .library-section > h2,
  .observation-section h2,
  .activity-section h2,
  .listening-section h2,
  .admin-section h2
),
#app[data-view] :is(
  h2, .section-title, .section-heading h2,
  .tests-page-view .section-heading h2,
  .library-section > h2,
  .observation-section h2,
  .activity-section h2,
  .listening-section h2,
  .admin-section h2
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-section-title) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.03em !important;
  font-weight: 400 !important;
  text-wrap: balance;
}

body[data-view] #app :is(
  h3, .card-title, .feature-node-title,
  .feature-title, .test-card h2, .test-card-title,
  .event-card h3, .activity-card h3,
  .observation-card h3, .listening-card h3,
  .admin-card h3
),
#app[data-view] :is(
  h3, .card-title, .feature-node-title,
  .feature-title, .test-card h2, .test-card-title,
  .event-card h3, .activity-card h3,
  .observation-card h3, .listening-card h3,
  .admin-card h3
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-card-title) !important;
  line-height: 1.23 !important;
  letter-spacing: 0.028em !important;
  font-weight: 400 !important;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

body[data-view] #app :is(
  .home-star-hero .feature-node-title,
  .home-star-hero .feature-node-main .feature-node-title
),
#app[data-view] :is(
  .home-star-hero .feature-node-title,
  .home-star-hero .feature-node-main .feature-node-title
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-feature-title) !important;
  line-height: 1.08 !important;
}

body[data-view] #app :is(
  .button, .btn, .primary-button, .secondary-button,
  .nav-link, .topbar-link, .dock-link,
  .feature-node-button, .test-card .button,
  .choice-button, .rating-button, .voice-button,
  .form-submit, .admin-button
),
#app[data-view] :is(
  .button, .btn, .primary-button, .secondary-button,
  .nav-link, .topbar-link, .dock-link,
  .feature-node-button, .test-card .button,
  .choice-button, .rating-button, .voice-button,
  .form-submit, .admin-button
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-button) !important;
  line-height: 1.18 !important;
  letter-spacing: 0.02em !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
  text-wrap: nowrap;
}

body[data-view] #app :is(
  .eyebrow, .tag, .pill-tag, .soft-tag,
  .event-type, .activity-type, .activity-status,
  .test-card-tags, .test-card .tag, .test-card .pill,
  .test-card-top span, .test-card-visual span,
  .result-count-badge, .same-result-badge,
  .comment-result-tag, .platform-pill,
  .observation-type, .observation-number, .observation-source,
  .tiny-label, .seal-label, .status-pill, .price-pill,
  .option-key, .scene-kicker, .poster-role-stamp,
  .grit-recap-index
),
#app[data-view] :is(
  .eyebrow, .tag, .pill-tag, .soft-tag,
  .event-type, .activity-type, .activity-status,
  .test-card-tags, .test-card .tag, .test-card .pill,
  .test-card-top span, .test-card-visual span,
  .result-count-badge, .same-result-badge,
  .comment-result-tag, .platform-pill,
  .observation-type, .observation-number, .observation-source,
  .tiny-label, .seal-label, .status-pill, .price-pill,
  .option-key, .scene-kicker, .poster-role-stamp,
  .grit-recap-index
) {
  font-family: var(--font-alt) !important;
  font-size: var(--type-label) !important;
  line-height: 1.28 !important;
  letter-spacing: 0.035em !important;
  font-weight: 400 !important;
}

body[data-view] #app :is(
  .observation-main-text,
  .observation-main-text.original,
  .daily-care-line,
  .emotional-line,
  .result-reminder,
  .creator-note
),
#app[data-view] :is(
  .observation-main-text,
  .observation-main-text.original,
  .daily-care-line,
  .emotional-line,
  .result-reminder,
  .creator-note
) {
  font-family: var(--font-hand) !important;
  font-size: var(--type-emotion) !important;
  line-height: 1.36 !important;
  letter-spacing: 0.03em !important;
  font-weight: 400 !important;
}

body[data-view] #app :is(.topbar, .floating-function-dock, .function-dock, .page-top-actions),
#app[data-view] :is(.topbar, .floating-function-dock, .function-dock, .page-top-actions) {
  font-family: var(--font-brand) !important;
}

body[data-view] #app :is(.feature-page-hero, .tests-page-view .section-heading, .activities-hero, .observation-hero, .listening-hero),
#app[data-view] :is(.feature-page-hero, .tests-page-view .section-heading, .activities-hero, .observation-hero, .listening-hero) {
  min-height: auto !important;
  padding-block: clamp(24px, 4vw, 54px) !important;
}

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

body[data-view="library"] #app .testing-progress-panel h2,
#app[data-view="library"] .testing-progress-panel h2 {
  font-family: var(--font-brand) !important;
  font-size: clamp(20px, 1.35vw, 25px) !important;
  line-height: 1.18 !important;
}

body[data-view="library"] #app :is(.test-card, .activity-card, .event-card),
#app[data-view="library"] :is(.test-card, .activity-card, .event-card) {
  overflow: hidden !important;
  padding: clamp(26px, 3vw, 42px) !important;
}

body[data-view="library"] #app .test-card h2,
#app[data-view="library"] .test-card h2 {
  max-width: 100% !important;
  font-size: clamp(20px, 1.35vw, 25px) !important;
  line-height: 1.24 !important;
  overflow-wrap: anywhere !important;
}

body[data-view="library"] #app .test-card p,
body[data-view="library"] #app .test-card dd,
#app[data-view="library"] .test-card p,
#app[data-view="library"] .test-card dd {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

body[data-view="library"] #app :is(.test-card-tags, .test-meta-row, .test-card-meta),
#app[data-view="library"] :is(.test-card-tags, .test-meta-row, .test-card-meta) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  max-width: 100% !important;
}

body[data-view] #app .background-motifs,
body[data-view] #app .motif,
body[data-view] #app svg[aria-hidden="true"],
#app[data-view] .background-motifs,
#app[data-view] .motif,
#app[data-view] svg[aria-hidden="true"] {
  pointer-events: none !important;
}

@media (max-width: 900px) {
  :root,
  body,
  #app {
    --type-brand-title: clamp(30px, 9vw, 44px);
    --type-page-title: clamp(23px, 6vw, 31px);
    --type-section-title: clamp(20px, 5vw, 26px);
    --type-card-title: clamp(19px, 4.8vw, 24px);
    --type-feature-title: clamp(21px, 5.4vw, 28px);
    --type-question-title: clamp(20px, 5.2vw, 27px);
    --type-result-title: clamp(22px, 5.5vw, 30px);
    --type-emotion: clamp(22px, 6vw, 31px);
    --type-body: 13.5px;
    --type-body-small: 12px;
    --type-button: 12px;
    --type-label: 10.5px;
  }

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

  body[data-view="library"] #app :is(.test-card, .activity-card, .event-card),
  #app[data-view="library"] :is(.test-card, .activity-card, .event-card) {
    padding: 24px !important;
  }
}

/* 2026-06-09: typography lock v17
   Final pass before launch: every feature page uses the same font roles and size scale. */
:root,
body,
#app {
  --font-brand: "YanYanBrand", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-hand: "YanYanHand", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-alt: "YanYanAlt", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-ink: var(--font-alt);
  --font-body: var(--font-brand);
  --font-sans: var(--font-brand);
  --font-serif: var(--font-brand);

  --type-brand-title: clamp(34px, 4.4vw, 56px);
  --type-page-title: clamp(24px, 2.15vw, 34px);
  --type-section-title: clamp(20px, 1.55vw, 26px);
  --type-card-title: clamp(20px, 1.32vw, 24px);
  --type-feature-title: clamp(23px, 1.75vw, 30px);
  --type-question-title: clamp(20px, 1.45vw, 26px);
  --type-result-title: clamp(22px, 1.75vw, 30px);
  --type-emotion: clamp(24px, 2.1vw, 32px);
  --type-body: clamp(13.5px, 0.92vw, 15px);
  --type-body-small: clamp(12px, 0.82vw, 13.5px);
  --type-button: clamp(12px, 0.82vw, 13px);
  --type-label: clamp(10px, 0.72vw, 11.5px);
}

html,
body,
#app,
#app[data-view],
#app[data-view] :is(
  p, li, dd, dt, em, span, a, button, input, textarea, select, label,
  .body-copy, .section-copy, .page-copy, .feature-node-copy,
  .test-card-fit, .question-body, .result-copy, .listening-boundary,
  .activity-description, .creator-copy, .admin-table
) {
  font-family: var(--font-brand) !important;
  font-weight: 400 !important;
}

#app[data-view] :is(
  h1, h2, h3, h4,
  .page-title, .section-title, .section-heading h2,
  .feature-node strong, .feature-node-title,
  .test-card h2, .test-card h3, .test-card-title,
  .activity-card h2, .activity-card h3,
  .observation-card h2, .observation-card h3,
  .listening-progress-card h1, .listening-progress-card h2,
  .result-name, .result-title, .question-title,
  .creator-profile-view h1, .creator-profile-view h2
) {
  font-family: var(--font-brand) !important;
  font-weight: 400 !important;
  letter-spacing: 0.035em !important;
  color: var(--color-deep-sea) !important;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

#app[data-view] :is(
  .brand-title, .brand-wordmark, .site-title,
  .home-brand-title, .wordmark-main
) {
  font-family: var(--font-hand) !important;
  font-size: var(--type-brand-title) !important;
  line-height: 1.05 !important;
  letter-spacing: 0.055em !important;
  font-weight: 400 !important;
}

#app[data-view] :is(
  .page-title, .feature-page-hero h1,
  .activities-hero h1, .observations-hero h1,
  .observation-card-result h1,
  .listening-progress-card h1,
  .creator-profile-view h1
) {
  font-size: var(--type-page-title) !important;
  line-height: 1.14 !important;
  margin-block: 0 10px !important;
}

#app[data-view] :is(.section-heading h2, .section-title, .feature-page-hero h2) {
  font-size: var(--type-section-title) !important;
  line-height: 1.18 !important;
  margin-block: 0 8px !important;
}

#app[data-view] :is(
  .feature-node strong, .feature-node-title,
  .test-card h2, .test-card h3, .test-card-title,
  .activity-card h2, .activity-card h3,
  .observation-card h3, .event-card h3
) {
  font-size: var(--type-card-title) !important;
  line-height: 1.2 !important;
  margin-block: 0 10px !important;
}

#app[data-view] :is(.home-star-hero .feature-node strong, .home-star-hero .feature-node-title) {
  font-size: var(--type-feature-title) !important;
  line-height: 1.08 !important;
}

#app[data-view] :is(
  p, li, dd, dt,
  .feature-node p, .feature-node em,
  .section-heading p, .feature-page-hero p,
  .test-card p, .test-card dd, .test-card-fit,
  .activity-card p, .activity-card dd, .activity-card li,
  .observation-card p, .observation-arrived-note,
  .listening-progress-card p, .creator-profile-view p
) {
  font-size: var(--type-body) !important;
  line-height: 1.62 !important;
  letter-spacing: 0.018em !important;
  color: rgba(30, 26, 26, 0.76) !important;
}

#app[data-view] :is(
  button, .button, .btn, .primary-button, .secondary-button,
  .feature-node b, .feature-node-button, .feature-button,
  .test-card .button, .activity-card .button,
  .floating-function-dock button, .nav-link,
  input, textarea, select
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-button) !important;
  line-height: 1.16 !important;
  letter-spacing: 0.025em !important;
  font-weight: 400 !important;
}

#app[data-view] :is(
  .eyebrow, .tag, .pill-tag, .soft-tag,
  .platform-pill, .status-pill, .price-pill,
  .activity-type, .activity-status, .event-type,
  .test-card-tags, .test-card .tag, .test-card .pill,
  .test-card-top span, .test-card-visual span,
  .observation-type, .observation-number, .observation-source,
  .result-count-badge, .same-result-badge,
  .option-key, .tiny-label, .seal-label
) {
  font-family: var(--font-alt) !important;
  font-size: var(--type-label) !important;
  line-height: 1.24 !important;
  letter-spacing: 0.04em !important;
  font-weight: 400 !important;
}

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

#app[data-view] :is(
  .feature-page-hero,
  .tests-page-view .section-heading,
  .activities-hero,
  .observations-hero,
  .creator-profile-view > section:first-child,
  .listening-progress-card,
  .observation-card-result
) {
  min-height: auto !important;
  padding-block: clamp(22px, 3.4vw, 46px) !important;
}

#app[data-view] :is(
  .test-card, .activity-card, .event-card,
  .observation-card, .listening-progress-card,
  .observation-card-result, .feature-node
) {
  min-width: 0 !important;
  overflow: hidden !important;
}

#app[data-view] :is(
  .test-card *, .activity-card *, .event-card *,
  .observation-card *, .listening-progress-card *,
  .feature-node *
) {
  max-width: 100% !important;
  overflow-wrap: anywhere;
}

#app[data-view="library"] .testing-progress-panel {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 460px) !important;
  padding: clamp(22px, 3vw, 38px) clamp(26px, 4vw, 52px) !important;
}

#app[data-view="library"] .testing-progress-panel h2 {
  font-size: var(--type-section-title) !important;
}

#app[data-view="library"] .recommended-tests .test-card,
#app[data-view="library"] .test-card {
  padding: clamp(26px, 3.2vw, 40px) !important;
}

#app[data-view="library"] .recommended-tests .test-card h2,
#app[data-view="library"] .test-card h2 {
  font-size: clamp(21px, 1.5vw, 27px) !important;
  line-height: 1.2 !important;
}

#app[data-view] :is(.background-motifs, .motif, .abstract-motif, svg[aria-hidden="true"]) {
  pointer-events: none !important;
}

@media (max-width: 900px) {
  :root,
  body,
  #app {
    --type-brand-title: clamp(30px, 8vw, 42px);
    --type-page-title: clamp(22px, 5.5vw, 30px);
    --type-section-title: clamp(19px, 4.8vw, 25px);
    --type-card-title: clamp(19px, 4.5vw, 24px);
    --type-feature-title: clamp(22px, 5.4vw, 29px);
    --type-body: 13.5px;
    --type-button: 12px;
    --type-label: 10.5px;
    --type-emotion: clamp(22px, 5.8vw, 30px);
  }

  #app[data-view] :is(
    .feature-page-hero,
    .tests-page-view .section-heading,
    .activities-hero,
    .observations-hero,
    .creator-profile-view > section:first-child,
    .listening-progress-card,
    .observation-card-result
  ) {
    padding-block: 22px !important;
  }

  #app[data-view="library"] .testing-progress-panel {
    grid-template-columns: 1fr !important;
    padding: 22px !important;
  }

  #app[data-view="library"] .recommended-tests .test-card,
  #app[data-view="library"] .test-card {
    padding: 24px !important;
  }
}

/* 2026-06-09: typography lock v19-final
   This block must stay at the physical end of the file. No visible Songti/system serif. */
:root,
body,
#app,
#app[data-view] {
  --font-brand: "YanYanBrand", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-hand: "YanYanHand", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-alt: "YanYanAlt", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-ink: var(--font-alt);
  --font-body: var(--font-brand);
  --font-serif: var(--font-brand);
  --font-sans: var(--font-brand);
  --font-brand-title: var(--font-hand);
  --font-brand-body: var(--font-brand);
  --font-brand-soft: var(--font-hand);

  --type-brand-title: clamp(34px, 3.8vw, 52px);
  --type-page-title: clamp(24px, 1.82vw, 32px);
  --type-section-title: clamp(19px, 1.35vw, 25px);
  --type-card-title: clamp(20px, 1.38vw, 26px);
  --type-feature-title: clamp(23px, 1.75vw, 32px);
  --type-body: clamp(13.5px, 0.92vw, 15px);
  --type-small: clamp(11.5px, 0.78vw, 13px);
  --type-button: clamp(12px, 0.82vw, 13.5px);
  --type-label: clamp(10px, 0.72vw, 11.5px);
  --type-emotion: clamp(24px, 1.95vw, 34px);
}

body,
#app,
#app[data-view],
#app[data-view] * {
  font-family: var(--font-brand) !important;
  font-weight: 400 !important;
}

#app[data-view] :is(
  .brand-title,
  .brand-wordmark,
  .home-brand-title,
  .wordmark-main,
  [data-brand-title]
) {
  font-family: var(--font-hand) !important;
  font-size: var(--type-brand-title) !important;
  line-height: 1.06 !important;
  letter-spacing: 0.045em !important;
}

#app[data-view] :is(
  h1,
  .page-title,
  .view-title,
  .feature-page-hero h1,
  .tests-page-view h1,
  .activities-hero h1,
  .observations-hero h1,
  .observation-page h1,
  .observation-card-result h1,
  .listening-progress-card h1,
  .creator-profile-view h1,
  .activity-detail h1
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-page-title) !important;
  line-height: 1.14 !important;
  letter-spacing: 0.034em !important;
  color: var(--color-deep-sea) !important;
  margin-block: 0 10px !important;
  text-wrap: balance;
}

#app[data-view] :is(
  h2,
  .section-title,
  .section-heading h2,
  .library-section > h2,
  .observation-section h2,
  .activity-section h2,
  .listening-section h2,
  .profile-section h2,
  .admin-section h2
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-section-title) !important;
  line-height: 1.18 !important;
  letter-spacing: 0.028em !important;
  color: var(--color-deep-sea) !important;
  margin-block: 0 8px !important;
}

#app[data-view] :is(
  .feature-node strong,
  .feature-node-title,
  .test-card h2,
  .test-card h3,
  .test-card-title,
  .activity-card h2,
  .activity-card h3,
  .event-card h3,
  .observation-card h2,
  .observation-card h3,
  .listening-card h2,
  .listening-card h3
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-card-title) !important;
  line-height: 1.18 !important;
  letter-spacing: 0.028em !important;
  color: var(--color-deep-sea) !important;
  margin-block: 0 10px !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

#app[data-view] :is(
  .home-star-hero .feature-node strong,
  .home-star-hero .feature-node-title
) {
  font-size: var(--type-feature-title) !important;
  line-height: 1.08 !important;
}

#app[data-view] :is(
  p,
  li,
  dd,
  dt,
  em,
  .page-copy,
  .section-copy,
  .feature-node p,
  .feature-node em,
  .section-heading p,
  .feature-page-hero p,
  .test-card p,
  .test-card dd,
  .test-card-fit,
  .question-body,
  .result-copy,
  .activity-card p,
  .activity-card dd,
  .activity-card li,
  .event-card p,
  .event-card dd,
  .observation-card p,
  .observation-arrived-note,
  .listening-progress-card p,
  .listening-boundary,
  .creator-profile-view p,
  .profile-copy
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-body) !important;
  line-height: 1.62 !important;
  letter-spacing: 0.014em !important;
  color: rgba(30, 26, 26, 0.76) !important;
}

#app[data-view] :is(
  button,
  .button,
  .btn,
  .primary-button,
  .secondary-button,
  .feature-node b,
  .feature-node-button,
  .feature-button,
  .test-card .button,
  .activity-card .button,
  .event-card .button,
  .floating-function-dock button,
  .nav-link,
  input,
  textarea,
  select,
  label
) {
  font-family: var(--font-brand) !important;
  font-size: var(--type-button) !important;
  line-height: 1.16 !important;
  letter-spacing: 0.018em !important;
  white-space: normal;
}

#app[data-view] :is(
  .eyebrow,
  .tag,
  .pill,
  .pill-tag,
  .soft-tag,
  .platform-pill,
  .status-pill,
  .price-pill,
  .activity-type,
  .activity-status,
  .event-type,
  .test-card-tags,
  .test-card .tag,
  .test-card .pill,
  .test-card-top span,
  .test-card-visual span,
  .test-meta-row,
  .test-card-meta,
  .observation-type,
  .observation-number,
  .observation-source,
  .result-count-badge,
  .same-result-badge,
  .option-key,
  .tiny-label,
  .seal-label
) {
  font-family: var(--font-alt) !important;
  font-size: var(--type-label) !important;
  line-height: 1.22 !important;
  letter-spacing: 0.04em !important;
}

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

#app[data-view] .observation-main-text.quote {
  font-family: var(--font-brand) !important;
  font-size: clamp(20px, 1.42vw, 27px) !important;
  line-height: 1.46 !important;
}

#app[data-view] :is(
  .feature-page-hero,
  .tests-page-view .section-heading,
  .activities-hero,
  .observations-hero,
  .observation-hero,
  .creator-profile-view > section:first-child,
  .listening-progress-card,
  .observation-card-result
) {
  min-height: auto !important;
  padding-block: clamp(20px, 3vw, 38px) !important;
}

#app[data-view] :is(
  .test-card,
  .activity-card,
  .event-card,
  .observation-card,
  .listening-progress-card,
  .observation-card-result,
  .feature-node
) {
  min-width: 0 !important;
  overflow: hidden !important;
}

#app[data-view] :is(
  .test-card *,
  .activity-card *,
  .event-card *,
  .observation-card *,
  .listening-progress-card *,
  .feature-node *
) {
  max-width: 100% !important;
  min-width: 0 !important;
}

#app[data-view="library"] .testing-progress-panel {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 440px) !important;
  align-items: center !important;
  padding: clamp(20px, 2.8vw, 34px) clamp(24px, 3.8vw, 48px) !important;
}

#app[data-view="library"] .testing-progress-panel h2 {
  font-size: var(--type-section-title) !important;
}

#app[data-view="library"] .recommended-tests .test-card,
#app[data-view="library"] .test-card {
  padding: clamp(24px, 3vw, 38px) !important;
}

#app[data-view="library"] .recommended-tests .test-card h2,
#app[data-view="library"] .test-card h2 {
  font-size: clamp(21px, 1.48vw, 27px) !important;
  line-height: 1.18 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

#app[data-view="activities"] .event-card h3,
#app[data-view="activities"] .activity-card h3 {
  font-size: clamp(22px, 1.42vw, 27px) !important;
  line-height: 1.2 !important;
}

#app[data-view] :is(.background-motifs, .motif, .abstract-motif, svg[aria-hidden="true"]) {
  pointer-events: none !important;
}

@media (max-width: 900px) {
  :root,
  body,
  #app,
  #app[data-view] {
    --type-brand-title: clamp(30px, 8vw, 42px);
    --type-page-title: clamp(22px, 5.4vw, 30px);
    --type-section-title: clamp(19px, 4.8vw, 24px);
    --type-card-title: clamp(19px, 4.7vw, 24px);
    --type-feature-title: clamp(22px, 5.2vw, 29px);
    --type-body: 13.5px;
    --type-button: 12px;
    --type-label: 10.5px;
    --type-emotion: clamp(22px, 5.8vw, 30px);
  }

  #app[data-view] :is(
    .feature-page-hero,
    .tests-page-view .section-heading,
    .activities-hero,
    .observations-hero,
    .observation-hero,
    .creator-profile-view > section:first-child,
    .listening-progress-card,
    .observation-card-result
  ) {
    padding-block: 20px !important;
  }

  #app[data-view="library"] .testing-progress-panel {
    grid-template-columns: 1fr !important;
    padding: 20px !important;
  }

  #app[data-view="library"] .recommended-tests .test-card,
  #app[data-view="library"] .test-card {
    padding: 22px !important;
  }
}