.container {
  width: min(100% - 2rem, var(--page-width));
  margin-inline: auto;
}

.narrow {
  width: min(100%, var(--reading-width));
  margin-inline: auto;
}

.stack > * {
  margin-block: 0;
}

.stack > * + * {
  margin-block-start: var(--space-6);
}

.stack--small > * + * {
  margin-block-start: var(--space-3);
}

.stack--large > * + * {
  margin-block-start: var(--space-10);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.cluster--between {
  justify-content: space-between;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-5);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  z-index: 100;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  translate: 0 -160%;
  border-radius: var(--radius-sm);
  background: var(--color-brand-strong);
  color: var(--color-surface);
  padding: var(--space-3) var(--space-4);
}

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

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
  border-block-end: 1px solid var(--color-line);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  box-shadow: var(--shadow-header);
  backdrop-filter: blur(18px);
}

.site-header > .container {
  min-height: 4.5rem;
  padding-block: var(--space-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-ink);
  font-size: 1.05rem;
  font-weight: 850;
  text-decoration: none;
}

.brand__mark {
  display: block;
  flex: 0 0 auto;
  width: 2.625rem;
  height: 2.625rem;
}

.brand__name {
  letter-spacing: -0.035em;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  scrollbar-width: none;
}

.site-nav::-webkit-scrollbar,
.profile-chapter-nav::-webkit-scrollbar {
  display: none;
}

.site-nav__link {
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  padding: 0.5rem 0.8rem;
  font-size: var(--font-size-small);
  font-weight: 700;
  text-decoration: none;
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
}

.site-nav__item {
  position: relative;
}

.site-nav__primary {
  position: relative;
  display: flex;
  align-items: center;
}

.site-nav__item--has-menu .site-nav__primary::before {
  position: absolute;
  inset-block-start: 100%;
  inset-inline: 0;
  height: 1.35rem;
  content: "";
}

.site-nav__item--has-menu .site-nav__primary::after {
  position: absolute;
  z-index: 31;
  inset-block-start: calc(100% + 0.72rem);
  inset-inline-start: 50%;
  width: 0.8rem;
  height: 0.8rem;
  visibility: hidden;
  border-block-start: 1px solid var(--color-line);
  border-inline-start: 1px solid var(--color-line);
  background: #fff;
  content: "";
  opacity: 0;
  pointer-events: none;
  rotate: 45deg;
  translate: -50% 0.35rem;
  transition: opacity 160ms ease, translate 160ms ease, visibility 160ms ease;
}

.site-nav__toggle {
  display: grid;
  width: 1.6rem;
  height: 2.4rem;
  place-items: center;
  margin-inline-start: -0.7rem;
  border: 0;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
}

.site-nav__toggle:focus-visible {
  border-radius: var(--radius-sm);
  outline: 3px solid var(--color-focus);
  outline-offset: 1px;
}

.site-nav__chevron {
  width: 0.45rem;
  height: 0.45rem;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  rotate: 45deg;
  translate: 0 -0.12rem;
  transition: rotate var(--transition), translate var(--transition);
}

.site-nav__item.is-open .site-nav__chevron {
  rotate: 225deg;
  translate: 0 0.1rem;
}

.site-nav__panel {
  position: absolute;
  z-index: 30;
  inset-block-start: calc(100% - 0.15rem);
  inset-inline-start: 50%;
  inset-inline-end: auto;
  width: min(52rem, calc(100vw - 2rem));
  max-height: min(46rem, calc(100vh - 7rem));
  overflow-y: auto;
  visibility: hidden;
  border: 1px solid color-mix(in srgb, var(--color-line) 82%, #fff);
  border-radius: 0.65rem;
  background: rgb(255 255 255 / 98%);
  padding: clamp(1.15rem, 2vw, 1.8rem);
  box-shadow: 0 1.35rem 3rem rgb(54 37 52 / 17%);
  opacity: 0;
  pointer-events: none;
  translate: -50% 0.5rem;
  transition: opacity 160ms ease, translate 160ms ease, visibility 160ms ease;
}

.site-nav__panel::before {
  display: none;
}

.site-nav__item--has-menu::after {
  content: none;
}

.site-nav__item.is-open > .site-nav__panel {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  translate: -50% 0;
}

.site-nav__item.is-open .site-nav__primary::after {
  visibility: visible;
  opacity: 1;
  translate: -50% 0;
}

.site-nav__panel--zodiac {
  width: min(42rem, calc(100vw - 2rem));
}

.site-nav__panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-block-end: 1px solid var(--color-line);
  padding-block-end: 0.9rem;
}

.site-nav__panel-heading > strong {
  color: var(--color-ink);
  font-size: 1.05rem;
}

.site-nav__all {
  color: var(--color-brand-strong);
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: none;
}

.site-nav__menu-groups {
  display: grid;
  gap: 1.15rem;
  padding-block-start: 1.15rem;
}

.site-nav__menu-groups--zodiac {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-nav__group {
  --nav-group-color: var(--color-brand);
  --nav-group-soft: var(--color-brand-soft);
  display: grid;
  gap: 0.65rem;
}

.site-nav__group--analysts { --nav-group-color: #76527f; --nav-group-soft: #f1eaf3; }
.site-nav__group--diplomats { --nav-group-color: #4f8468; --nav-group-soft: #e9f3ed; }
.site-nav__group--sentinels { --nav-group-color: #477f9a; --nav-group-soft: #e9f2f6; }
.site-nav__group--explorers { --nav-group-color: #a87926; --nav-group-soft: #f8f0da; }
.site-nav__group--fire { --nav-group-color: #b9604e; --nav-group-soft: #faebe5; }
.site-nav__group--earth { --nav-group-color: #7b684c; --nav-group-soft: #f3efe5; }
.site-nav__group--air { --nav-group-color: #4f7c91; --nav-group-soft: #eaf3f5; }
.site-nav__group--water { --nav-group-color: #4f8290; --nav-group-soft: #e6f1f0; }

.site-nav__group-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  border-inline-start: 3px solid var(--nav-group-color);
  padding-inline-start: 0.65rem;
}

.site-nav__group-heading strong,
.site-nav__group-title {
  color: var(--color-ink);
}

.site-nav__group-title {
  font-weight: 800;
  text-decoration-color: color-mix(in srgb, var(--nav-group-color) 42%, transparent);
  text-underline-offset: 0.22em;
}

.site-nav__group-title:hover,
.site-nav__group-title:focus-visible {
  color: var(--nav-group-color);
  text-decoration-color: currentColor;
}

.site-nav__group-heading small {
  color: var(--color-muted);
  font-size: 0.72rem;
}

.site-nav__options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}

.site-nav__menu-groups--zodiac .site-nav__options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.site-nav__option {
  display: grid;
  min-width: 0;
  gap: 0.08rem;
  border: 1px solid color-mix(in srgb, var(--nav-group-color) 14%, #fff);
  border-radius: 0.38rem;
  background: var(--nav-group-soft);
  color: var(--color-ink);
  padding: 0.62rem 0.7rem;
  text-align: center;
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition), translate var(--transition);
}

.site-nav__option:hover,
.site-nav__option:focus-visible {
  border-color: var(--nav-group-color);
  background: color-mix(in srgb, var(--nav-group-soft) 64%, #fff);
  outline: 0;
  translate: 0 -1px;
}

.site-nav__option span {
  overflow: hidden;
  font-size: 0.8rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-nav__option small {
  color: var(--nav-group-color);
  font-size: 0.68rem;
  font-weight: 850;
}

.page-main {
  min-height: 65vh;
  padding-block: clamp(2rem, 5vw, 4.5rem) var(--space-16);
}

.page-heading {
  max-width: 52rem;
}

.page-heading h1,
.hero h1 {
  margin-block-end: var(--space-3);
}

.page-heading p,
.hero__copy {
  color: var(--color-muted);
  font-size: var(--font-size-lead);
}

.hero {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-line) 70%, transparent);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 12% 0%, rgb(255 224 195 / 72%), transparent 35%),
    radial-gradient(circle at 92% 16%, rgb(229 211 233 / 78%), transparent 38%),
    linear-gradient(135deg, #fffaf2, #f8f0f5);
  padding: clamp(1.6rem, 5vw, 4.5rem);
  box-shadow: var(--shadow-card);
}

.hero__content {
  max-width: 47rem;
}

.hero--split {
  display: grid;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

.hero--personality {
  background:
    radial-gradient(circle at 12% 0%, rgb(255 219 187 / 72%), transparent 35%),
    radial-gradient(circle at 86% 30%, rgb(219 205 231 / 82%), transparent 42%),
    #fffaf3;
}

.personality-index-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(34rem, 55vw, 43rem);
  grid-template-columns: minmax(0, 1.02fr) minmax(23rem, 0.98fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgb(92 68 94 / 16%);
  border-radius: clamp(1.75rem, 4vw, 2.8rem);
  background:
    radial-gradient(circle at 8% 5%, rgb(255 232 198 / 86%), transparent 31%),
    radial-gradient(circle at 89% 19%, rgb(201 224 209 / 72%), transparent 33%),
    linear-gradient(135deg, #fff8eb 0%, #f3eaf2 52%, #e4efe6 100%);
  box-shadow: 0 30px 74px rgb(56 38 52 / 17%);
}

.personality-index-hero::before {
  position: absolute;
  z-index: -1;
  inset: auto -7% -36% 39%;
  height: 85%;
  background:
    linear-gradient(135deg, transparent 0 38%, rgb(255 255 255 / 42%) 38.5% 58%, transparent 58.5%),
    linear-gradient(35deg, rgb(91 64 100 / 7%) 0 44%, transparent 44.5%);
  clip-path: polygon(13% 0, 100% 8%, 89% 100%, 0 75%);
  content: "";
}

.personality-index-hero__copy {
  position: relative;
  z-index: 5;
  align-self: center;
  max-width: 48rem;
  padding: clamp(2rem, 6vw, 5.25rem) clamp(1.5rem, 5vw, 4.75rem);
}

.personality-index-hero__copy h1 {
  max-width: 12em;
  color: #3f3045;
  font-size: clamp(2.7rem, 6.7vw, 5.6rem);
  letter-spacing: -0.075em;
  line-height: 1.06;
  text-wrap: balance;
}

.personality-index-hero__copy .hero__copy {
  max-width: 39rem;
  color: #655967;
  line-height: 1.85;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.personality-index-hero__art {
  position: relative;
  min-height: 34rem;
  overflow: hidden;
}

.personality-index-hero__art::after {
  position: absolute;
  inset: 12% 6% 7%;
  border: 1px solid rgb(255 255 255 / 58%);
  background: rgb(255 255 255 / 12%);
  clip-path: polygon(50% 0, 100% 25%, 86% 84%, 46% 100%, 0 71%, 9% 17%);
  content: "";
  backdrop-filter: blur(2px);
}

.personality-index-hero__figure {
  position: absolute;
  z-index: 2;
  inset-block-end: -8%;
  width: min(58%, 24rem);
  aspect-ratio: 2 / 3;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: var(--portrait-detail-sheet, var(--portrait-sheet));
  background-position: center bottom;
  background-size: contain;
  filter: drop-shadow(0 25px 25px rgb(54 37 52 / 22%));
  box-shadow: none;
}

.personality-index-hero__figure--back {
  z-index: 1;
  inset-inline-start: -5%;
  width: min(52%, 21rem);
  opacity: 0.92;
}

.personality-index-hero__figure--front {
  z-index: 3;
  inset-inline-start: 23%;
  width: min(61%, 25rem);
}

.personality-index-hero__figure--side {
  inset-inline-end: -13%;
  width: min(51%, 20rem);
  opacity: 0.95;
}

.personality-index-hero__caption {
  position: absolute;
  z-index: 6;
  inset-inline-end: clamp(1rem, 3vw, 2rem);
  inset-block-end: clamp(1rem, 3vw, 2rem);
  max-width: 15rem;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: var(--radius-pill);
  background: rgb(255 252 247 / 84%);
  color: #514453;
  padding: 0.6rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
  backdrop-filter: blur(14px);
}

.eyebrow {
  color: var(--color-accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.section-heading {
  max-width: 48rem;
}

.section-heading p {
  color: var(--color-muted);
}

.panel,
.card,
.question {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.panel {
  padding: clamp(1.25rem, 4vw, 2rem);
}

details.panel > summary {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  cursor: pointer;
}

details.panel > summary::marker {
  color: var(--color-brand);
}

details.panel[open] > summary {
  border-block-end: 1px solid var(--color-line);
  padding-block-end: var(--space-4);
}

.card {
  position: relative;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  gap: var(--space-4);
  overflow: hidden;
  padding: var(--space-6);
  transition: border-color var(--transition), box-shadow var(--transition), translate var(--transition);
}

.card:hover {
  border-color: var(--color-line-strong);
  box-shadow: var(--shadow-card-hover);
  translate: 0 -4px;
}

.card h3,
.card p {
  margin: 0;
}

.card p {
  color: var(--color-muted);
}

.card .button {
  align-self: flex-start;
  margin-block-start: auto;
}

.content-card {
  min-width: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: clamp(1rem, 3vw, 1.5rem);
}

.content-card--warm {
  background: var(--color-surface-warm);
}

.content-card h3,
.content-card h4,
.content-card p,
.content-card ul {
  margin-block-end: 0;
}

.content-card h3,
.content-card h4 {
  color: var(--color-brand-strong);
}

.content-card ul {
  display: grid;
  gap: var(--space-2);
  padding-inline-start: 1.2rem;
}

.card__icon {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 1px solid rgb(113 80 113 / 12%);
  border-radius: 42% 58% 48% 52%;
  background: linear-gradient(145deg, var(--color-accent-soft), var(--color-brand-soft));
  color: var(--color-brand-strong);
  font-size: 1.05rem;
  font-weight: 850;
}

.tag {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
  padding: 0.28rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 750;
}

.button {
  display: inline-flex;
  width: fit-content;
  min-height: 2.8rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-sm);
  background: var(--color-brand);
  color: #fff;
  padding: 0.72rem 1.2rem;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), translate var(--transition);
}

.button__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  margin-inline-end: 0.4rem;
}

.button:hover {
  border-color: var(--color-brand-strong);
  background: var(--color-brand-strong);
  translate: 0 -1px;
}

.button--secondary {
  border-color: var(--color-line-strong);
  background: var(--color-surface);
  color: var(--color-brand-strong);
}

.button--secondary:hover {
  border-color: var(--color-brand-strong);
  background: var(--color-brand-strong);
  color: #fff;
}

.button--quiet {
  border-color: transparent;
  background: transparent;
  color: var(--color-muted);
}

.button--quiet:hover {
  border-color: var(--color-line);
  background: var(--color-surface-soft);
  color: var(--color-ink);
}

.button--danger {
  border-color: var(--color-danger);
  background: var(--color-danger);
}

.button--danger:hover {
  border-color: color-mix(in srgb, var(--color-danger) 82%, #000);
  background: color-mix(in srgb, var(--color-danger) 82%, #000);
}

.site-dialog {
  width: min(calc(100% - 2rem), 31rem);
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  padding: 0;
  color: var(--color-ink);
}

.site-dialog::backdrop {
  background: rgb(38 26 36 / 48%);
  backdrop-filter: blur(5px);
}

.site-dialog__surface {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: clamp(1.4rem, 5vw, 2.1rem);
  box-shadow: 0 28px 80px rgb(48 28 43 / 28%);
}

.site-dialog__mark {
  display: grid;
  width: 2.75rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: 1.2rem;
  font-weight: 900;
}

.site-dialog__surface h2,
.site-dialog__surface p {
  margin: 0;
}

.site-dialog__surface p {
  color: var(--color-muted);
}

.site-dialog__actions {
  justify-content: flex-end;
  margin-block-start: var(--space-5);
}

.text-link {
  font-weight: 700;
}

.text-arrow {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: auto;
  color: var(--color-brand-strong);
  font-weight: 800;
  text-decoration: none;
}

.text-arrow span[aria-hidden] {
  transition: translate var(--transition);
}

.text-arrow:hover span[aria-hidden] {
  translate: 0.25rem 0;
}

.text-muted,
.field-help,
.meta-row {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.notice {
  border: 1px solid #f2d7c2;
  border-inline-start: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-surface-warm);
  padding: var(--space-4);
}

.notice p:last-child {
  margin-block-end: 0;
}

.notice--info {
  border-inline-start-color: var(--color-info);
  background: var(--color-info-soft);
}

.notice--danger {
  border-inline-start-color: var(--color-danger);
  background: var(--color-danger-soft);
}

.tool-layout {
  display: grid;
  align-items: start;
  gap: var(--space-6);
}

.question-list {
  display: grid;
  gap: var(--space-4);
}

.quiz-shell {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: clamp(1rem, 4vw, 2.25rem);
  box-shadow: var(--shadow-card);
}

.quiz-toolbar {
  display: grid;
  grid-template-columns: auto minmax(8rem, 1fr);
  align-items: center;
  gap: var(--space-5);
  border-block-end: 1px solid var(--color-line);
  padding-block-end: var(--space-4);
}

.quiz-toolbar > div {
  display: grid;
  min-width: 5rem;
}

.quiz-toolbar progress {
  width: 100%;
  height: 0.7rem;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-surface-soft);
  accent-color: var(--color-brand);
}

.quiz-toolbar progress::-webkit-progress-bar {
  border-radius: var(--radius-pill);
  background: var(--color-surface-soft);
}

.quiz-toolbar progress::-webkit-progress-value {
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-accent), var(--color-brand));
}

.quiz-page {
  scroll-margin-block-start: 6rem;
}

.quiz-page__heading {
  max-width: 42rem;
}

.quiz-page__heading h2,
.quiz-page__heading p {
  margin-block-end: var(--space-2);
}

.quiz-page__heading > p:last-child {
  color: var(--color-muted);
}

.question {
  margin: 0;
  padding: var(--space-5);
}

.question--statement {
  border: 0;
  border-block-end: 1px solid var(--color-line);
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-6) var(--space-2);
}

.question--statement legend {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
}

.question__number {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
  font-size: 0.78rem;
  font-weight: 850;
}

.question legend {
  width: 100%;
  margin-block-end: var(--space-3);
  padding: 0;
}

.question__hint {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.field {
  display: grid;
  gap: var(--space-2);
}

.field > label,
.field-label {
  font-weight: 750;
}

.field-help {
  margin: 0;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--space-3);
}

.choice-card,
.check-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.choice-card {
  min-height: 3.2rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  padding: var(--space-3);
}

.choice-card:has(input:checked) {
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
}

.likert {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: clamp(0.3rem, 2vw, 1.2rem);
  max-width: 40rem;
  margin-inline: auto;
}

.likert__choice {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  color: var(--color-muted);
  font-size: 0.75rem;
  text-align: center;
}

.likert__choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.likert__dot {
  display: block;
  width: clamp(2rem, 5vw, 3rem);
  aspect-ratio: 1;
  border: 2px solid var(--color-line-strong);
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: inset 0 0 0 0.3rem var(--color-surface);
  transition: background var(--transition), border-color var(--transition), scale var(--transition);
}

.likert__choice:nth-child(-n + 2) .likert__dot {
  border-color: color-mix(in srgb, var(--color-teal) 65%, var(--color-line));
}

.likert__choice:nth-last-child(-n + 2) .likert__dot {
  border-color: color-mix(in srgb, var(--color-brand) 72%, var(--color-line));
}

.likert__choice:hover .likert__dot {
  scale: 1.08;
}

.likert__choice input:focus-visible + .likert__dot {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.likert__choice input:checked + .likert__dot {
  border-color: var(--color-brand);
  background: var(--color-brand);
  scale: 1.08;
}

.likert__choice:nth-child(-n + 2) input:checked + .likert__dot {
  border-color: var(--color-teal);
  background: var(--color-teal);
}

.likert__choice input:checked ~ .likert__label {
  color: var(--color-ink);
  font-weight: 800;
}

.quiz-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

.quiz-actions .button--quiet:first-child {
  margin-inline-end: auto;
}

.check-row {
  width: fit-content;
}

.input-prefix {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-soft);
}

.input-prefix > span {
  padding-inline: var(--space-4);
  color: var(--color-muted);
  font-weight: 700;
}

.input-prefix input {
  border: 0;
  border-inline-start: 1px solid var(--color-line-strong);
  border-radius: 0;
}

/* Shared input with an inline trailing action (for example SMS code retrieval). */
.input-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.25rem;
  align-items: center;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.input-action:focus-within {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.input-action input {
  min-width: 0;
  border: 0;
  background: transparent;
}

.input-action input:focus-visible { outline: none; }

.input-action__button {
  min-width: 0;
  min-height: 2.75rem;
  margin-block: 0.2rem;
  border: 0;
  border-inline-start: 1px solid var(--color-line-strong);
  border-radius: 0;
  background: transparent;
  padding: 0.45rem 0.65rem;
  color: var(--color-brand);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.input-action__button:hover:not(:disabled) { background: var(--color-brand-soft); }
.input-action__button:disabled { color: var(--color-muted); opacity: 1; }

.auth-account__phone {
  color: var(--color-ink);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

.site-nav__link[data-authenticated="true"] { color: var(--color-brand); }

.result {
  scroll-margin-block-start: 6rem;
  border: 2px solid var(--color-brand);
  border-radius: var(--radius-md);
  background: var(--color-brand-soft);
  padding: clamp(1.25rem, 4vw, 2rem);
}

.result--personality {
  border: 1px solid rgb(91 62 88 / 16%);
  border-radius: clamp(1.5rem, 4vw, 2.4rem);
  background:
    radial-gradient(circle at 95% 4%, rgb(232 189 160 / 18%), transparent 24rem),
    var(--color-surface);
  box-shadow: 0 30px 80px rgb(69 43 61 / 15%);
}

.result--personality > h2 {
  margin-block-end: var(--space-5);
  color: var(--color-muted);
  font-size: clamp(1rem, 2vw, 1.25rem);
  letter-spacing: 0.08em;
}

.result--personality [data-result-body] {
  gap: var(--space-6);
}

.result--personality [data-result-body] > .metric {
  position: relative;
  z-index: 5;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: -3.4rem clamp(0.5rem, 3vw, 1.5rem) 0;
}

.result--personality [data-result-body] > .metric li {
  border: 1px solid rgb(255 255 255 / 76%);
  background: rgb(255 252 247 / 92%);
  box-shadow: 0 14px 32px rgb(52 35 50 / 12%);
  backdrop-filter: blur(14px);
}

.result-identity {
  display: grid;
  grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 4vw, 2.5rem);
}

.result-identity h3,
.result-identity p {
  margin: 0;
}

.result-identity h3 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}

.result-identity__code {
  color: var(--color-accent);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.character-card {
  --card-deep: #4b3157;
  --card-middle: #76536f;
  --card-glow: #e5b49b;
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: clamp(25rem, 44vw, 32rem);
  align-items: center;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 54%);
  border-radius: clamp(1.6rem, 4vw, 2.35rem);
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--card-glow) 58%, transparent), transparent 28%),
    radial-gradient(circle at 84% 78%, rgb(255 242 223 / 20%), transparent 34%),
    linear-gradient(135deg, var(--card-deep), var(--card-middle) 48%, #e4c9bc 120%);
  padding: 0;
  box-shadow:
    0 28px 65px rgb(45 28 45 / 24%),
    inset 0 1px rgb(255 255 255 / 38%);
}

.character-card--intj,
.character-card--intp,
.character-card--entj,
.character-card--entp {
  --card-deep: #36243f;
  --card-middle: #6d496b;
  --card-glow: #dda88f;
}

.character-card--infj,
.character-card--infp,
.character-card--enfj,
.character-card--enfp {
  --card-deep: #26463d;
  --card-middle: #527463;
  --card-glow: #d7b46c;
}

.character-card--istj,
.character-card--isfj,
.character-card--estj,
.character-card--esfj {
  --card-deep: #283d59;
  --card-middle: #58718c;
  --card-glow: #e6b951;
}

.character-card--istp,
.character-card--isfp,
.character-card--estp,
.character-card--esfp {
  --card-deep: #63342f;
  --card-middle: #a45e4f;
  --card-glow: #f2bd72;
}

.character-card::before {
  position: absolute;
  z-index: 4;
  inset: 0.7rem;
  border: 1px solid rgb(255 255 255 / 34%);
  border-radius: calc(clamp(1.6rem, 4vw, 2.35rem) - 0.45rem);
  content: "";
  pointer-events: none;
}

.character-card::after {
  position: absolute;
  z-index: 5;
  inset-block-start: clamp(1.6rem, 4vw, 2.4rem);
  inset-inline-start: clamp(1.6rem, 4vw, 2.8rem);
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: var(--radius-pill);
  background: rgb(36 25 38 / 34%);
  color: rgb(255 253 247 / 90%);
  padding: 0.38rem 0.72rem;
  content: "人格档案  /  " attr(data-card-code);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.13em;
  backdrop-filter: blur(8px);
}

.character-card > .character-card__art {
  position: absolute;
  z-index: 1;
  inset-block-start: 50%;
  inset-inline-end: -4%;
  width: min(66%, 42rem);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: saturate(0.96) contrast(1.03);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 24%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 24%, #000 100%);
  transform:
    translate(var(--portrait-shift-x, 0), calc(-50% + var(--portrait-shift-y, 0px)))
    rotate(var(--portrait-rotate, 0deg))
    scale(1.04);
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 260ms ease;
}

.character-card .character-card__copy {
  position: relative;
  z-index: 3;
  width: min(58%, 35rem);
  margin: 5.5rem 0 4.8rem clamp(1.8rem, 5vw, 3.6rem);
  border: 1px solid rgb(255 255 255 / 65%);
  border-radius: clamp(1.1rem, 3vw, 1.7rem);
  background: rgb(255 252 247 / 88%);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: 0 22px 55px rgb(34 22 36 / 19%);
  backdrop-filter: blur(18px) saturate(1.08);
}

.character-card .character-card__copy .eyebrow {
  color: var(--card-middle);
}

.character-card .character-card__copy h1,
.character-card .character-card__copy h3 {
  color: var(--card-deep);
  font-size: clamp(2.15rem, 5.5vw, 4.5rem);
  letter-spacing: -0.06em;
  text-shadow: 0 1px rgb(255 255 255 / 80%);
}

.character-card .result-identity__code {
  width: fit-content;
  border: 1px solid color-mix(in srgb, var(--card-middle) 24%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--card-glow) 18%, white);
  color: var(--card-deep);
  padding: 0.3rem 0.68rem;
}

.character-card .hero__copy,
.character-card .character-card__copy > p:last-child {
  color: color-mix(in srgb, var(--card-deep) 84%, #30262d);
  font-size: clamp(1rem, 2vw, 1.14rem);
  line-height: 1.8;
}

.type-avatar {
  --portrait-sheet: url("../img/personality-analysts-v1.png");
  --portrait-position: 0 0;
  --portrait-surface: #f0e8f4;
  --portrait-surface-deep: #d8c8e1;
  --portrait-accent: #72527f;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid rgb(80 52 79 / 12%);
  border-radius: var(--radius-lg);
  background-color: var(--portrait-surface);
  background-image:
    var(--portrait-sheet),
    linear-gradient(145deg, transparent 0 51%, color-mix(in srgb, var(--portrait-accent) 11%, transparent) 51.4% 66%, transparent 66.4%),
    radial-gradient(circle at 68% 30%, rgb(255 255 255 / 76%), transparent 31%),
    linear-gradient(145deg, var(--portrait-surface), var(--portrait-surface-deep));
  background-position: var(--portrait-position), center, center, center;
  background-repeat: no-repeat;
  background-size: 200% 200%, 100% 100%, 100% 100%, 100% 100%;
  box-shadow: 0 12px 30px rgb(67 46 58 / 13%);
  transform-origin: 50% 82%;
  transition: scale 420ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 420ms ease;
}

.type-avatar--intj,
.type-avatar--intp,
.type-avatar--entj,
.type-avatar--entp {
  --portrait-sheet: url("../img/personality-analysts-v2.png");
  --portrait-surface: #f1eaf4;
  --portrait-surface-deep: #d7c8df;
  --portrait-accent: #72527f;
}

.type-avatar--infj,
.type-avatar--infp,
.type-avatar--enfj,
.type-avatar--enfp {
  --portrait-sheet: url("../img/personality-diplomats-v1.png");
  --portrait-surface: #e9f3eb;
  --portrait-surface-deep: #c9dfcf;
  --portrait-accent: #4f7c61;
}

.type-avatar--istj,
.type-avatar--isfj,
.type-avatar--estj,
.type-avatar--esfj {
  --portrait-sheet: url("../img/personality-sentinels-v1.png");
  --portrait-surface: #e8f2f6;
  --portrait-surface-deep: #c8dde5;
  --portrait-accent: #487489;
}

.type-avatar--istp,
.type-avatar--isfp,
.type-avatar--estp,
.type-avatar--esfp {
  --portrait-sheet: url("../img/personality-explorers-v1.png");
  --portrait-surface: #fff3dc;
  --portrait-surface-deep: #f0d5a4;
  --portrait-accent: #a9732e;
}

.type-avatar--intj,
.type-avatar--infj,
.type-avatar--istj,
.type-avatar--istp { --portrait-position: 0 0; }

.type-avatar--intp,
.type-avatar--infp,
.type-avatar--isfj,
.type-avatar--isfp { --portrait-position: 100% 0; }

.type-avatar--entj,
.type-avatar--enfj,
.type-avatar--estj,
.type-avatar--estp { --portrait-position: 0 100%; }

.type-avatar--entp,
.type-avatar--enfp,
.type-avatar--esfj,
.type-avatar--esfp { --portrait-position: 100% 100%; }

.type-avatar--intj { --portrait-detail-sheet: url("../img/personality-intj-v11.png"); }
.type-avatar--intp { --portrait-detail-sheet: url("../img/personality-intp-v11.png"); }
.type-avatar--entj { --portrait-detail-sheet: url("../img/personality-entj-v11.png"); }
.type-avatar--entp { --portrait-detail-sheet: url("../img/personality-entp-v11.png"); }
.type-avatar--infj { --portrait-detail-sheet: url("../img/personality-infj-v11.png"); }
.type-avatar--infp { --portrait-detail-sheet: url("../img/personality-infp-v11.png"); }
.type-avatar--enfj { --portrait-detail-sheet: url("../img/personality-enfj-v11.png"); }
.type-avatar--enfp { --portrait-detail-sheet: url("../img/personality-enfp-v11.png"); }
.type-avatar--istj { --portrait-detail-sheet: url("../img/personality-istj-v11.png"); }
.type-avatar--isfj { --portrait-detail-sheet: url("../img/personality-isfj-v11.png"); }
.type-avatar--estj { --portrait-detail-sheet: url("../img/personality-estj-v11.png"); }
.type-avatar--esfj { --portrait-detail-sheet: url("../img/personality-esfj-v11.png"); }
.type-avatar--istp { --portrait-detail-sheet: url("../img/personality-istp-v11.png"); }
.type-avatar--isfp { --portrait-detail-sheet: url("../img/personality-isfp-v11.png"); }
.type-avatar--estp { --portrait-detail-sheet: url("../img/personality-estp-v11.png"); }
.type-avatar--esfp { --portrait-detail-sheet: url("../img/personality-esfp-v11.png"); }

.character-card > .type-avatar.character-card__art {
  background-color: transparent;
  background-image: var(--portrait-detail-sheet, var(--portrait-sheet));
  background-position: center;
  background-size: contain;
}

.personality-index-hero .personality-index-hero__figure {
  aspect-ratio: 2 / 3;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: var(--portrait-detail-sheet, var(--portrait-sheet));
  background-position: center bottom;
  background-size: contain;
  box-shadow: none;
}

.profile-hero--personality > .type-avatar.character-card__art {
  inset-inline-end: 1%;
  width: min(56%, 34rem);
}

.profile-hero--personality {
  border-color: color-mix(in srgb, var(--card-middle) 22%, white);
  background:
    radial-gradient(circle at 12% 16%, color-mix(in srgb, var(--card-glow) 35%, transparent), transparent 25%),
    linear-gradient(128deg, color-mix(in srgb, var(--card-middle) 13%, #fffdf8), color-mix(in srgb, var(--card-middle) 32%, #fff8ef));
  box-shadow: 0 28px 70px color-mix(in srgb, var(--card-deep) 18%, transparent);
}

.profile-hero--personality::before {
  inset: 0;
  border: 0;
  border-radius: inherit;
  background:
    linear-gradient(142deg, transparent 0 56%, color-mix(in srgb, var(--card-middle) 10%, transparent) 56.2% 69%, transparent 69.2%),
    linear-gradient(38deg, transparent 0 68%, rgb(255 255 255 / 32%) 68.2% 77%, transparent 77.2%);
  clip-path: polygon(43% 0, 100% 0, 100% 100%, 28% 100%);
}

.profile-hero--personality::after {
  border-color: color-mix(in srgb, var(--card-middle) 24%, transparent);
  background: rgb(255 253 249 / 72%);
  color: var(--card-deep);
}

.profile-hero--personality .character-card__copy {
  border-color: rgb(255 255 255 / 78%);
  background: rgb(255 253 249 / 78%);
  box-shadow: 0 22px 52px color-mix(in srgb, var(--card-deep) 13%, transparent);
}

.zodiac-avatar {
  --zodiac-frame-rest: none;
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgb(80 52 79 / 12%);
  border-radius: var(--radius-lg);
  background-color: var(--color-art-surface);
  background-image: var(--zodiac-frame-rest);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: 0 12px 30px rgb(67 46 58 / 13%);
}

.zodiac-avatar--aries { --zodiac-frame-rest: url("../img/zodiac-aries-v5.png"); }
.zodiac-avatar--taurus { --zodiac-frame-rest: url("../img/zodiac-taurus-v5.png"); }
.zodiac-avatar--gemini { --zodiac-frame-rest: url("../img/zodiac-gemini-v5.png"); }
.zodiac-avatar--cancer { --zodiac-frame-rest: url("../img/zodiac-cancer-v5.png"); }
.zodiac-avatar--leo { --zodiac-frame-rest: url("../img/zodiac-leo-v5.png"); }
.zodiac-avatar--virgo { --zodiac-frame-rest: url("../img/zodiac-virgo-v5.png"); }
.zodiac-avatar--libra { --zodiac-frame-rest: url("../img/zodiac-libra-v5.png"); }
.zodiac-avatar--scorpio { --zodiac-frame-rest: url("../img/zodiac-scorpio-v5.png"); }
.zodiac-avatar--sagittarius { --zodiac-frame-rest: url("../img/zodiac-sagittarius-v5.png"); }
.zodiac-avatar--capricorn { --zodiac-frame-rest: url("../img/zodiac-capricorn-v5.png"); }
.zodiac-avatar--aquarius { --zodiac-frame-rest: url("../img/zodiac-aquarius-v5.png"); }
.zodiac-avatar--pisces { --zodiac-frame-rest: url("../img/zodiac-pisces-v5.png"); }

.zodiac-symbol {
  font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif;
  font-variant-emoji: text;
}

.zodiac-avatar::before,
.zodiac-avatar::after {
  display: none;
  content: none;
}

.page-tone--zodiac [data-zodiac-art] .zodiac-avatar {
  background-image: var(--zodiac-frame-rest);
}

.page-tone--zodiac [data-zodiac-art].profile-card[href]:hover,
.page-tone--zodiac [data-zodiac-art].sign-card:hover {
  translate: 0 0;
}

.element-avatar {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid rgb(80 52 79 / 12%);
  border-radius: var(--radius-md);
  background-color: var(--color-art-surface);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: 0 12px 30px rgb(67 46 58 / 11%);
}

.element-avatar--fire { background-image: url("../img/element-fire-v4.png"); }
.element-avatar--earth { background-image: url("../img/element-earth-v5.png"); }
.element-avatar--air { background-image: url("../img/element-air-v4.png"); }
.element-avatar--water { background-image: url("../img/element-water-v4.png"); }

.sign-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--space-3);
}

.sign-card {
  position: relative;
  display: grid;
  gap: var(--space-2);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  padding: var(--space-2);
  color: var(--color-ink);
  font-size: var(--font-size-small);
  font-weight: 800;
  text-align: center;
  transition: border-color var(--transition), background var(--transition), translate var(--transition);
}

.sign-card:hover {
  background: var(--color-brand-soft);
  translate: 0 -2px;
}

.sign-card:has(input:checked) {
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
}

.sign-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.sign-card small {
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.sign-card input:focus-visible + .zodiac-avatar {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.profile-chapter-nav {
  z-index: 8;
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: rgb(255 253 249 / 90%);
  padding: var(--space-2);
  box-shadow: 0 12px 30px rgb(67 46 58 / 9%);
  scrollbar-width: thin;
  backdrop-filter: blur(16px);
}

.profile-chapter-nav a {
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  padding: 0.46rem 0.72rem;
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.profile-chapter-nav a:hover,
.profile-chapter-nav a:focus-visible {
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
}

.profile-chapter {
  scroll-margin-block-start: 10rem;
}

.profile-reading-layout {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  min-width: 0;
}

.profile-reading-content {
  min-width: 0;
}

.personality-index-nav {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

.profile-prose {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.6rem);
  border-block: 1px solid var(--color-line);
  padding-block: clamp(2.5rem, 7vw, 5.5rem);
}

.profile-prose--accent {
  border: 1px solid color-mix(in srgb, var(--profile-middle) 22%, var(--color-line));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 95% 0, color-mix(in srgb, var(--profile-glow) 55%, transparent), transparent 18rem),
    linear-gradient(145deg, var(--color-surface), color-mix(in srgb, var(--profile-soft) 72%, white));
  padding: clamp(1.5rem, 5vw, 3.5rem);
}

.profile-prose__heading,
.profile-prose__body,
.profile-prose > .reflection-quote {
  width: min(100%, 54rem);
  margin-inline: auto;
}

.profile-prose__heading h2 {
  max-width: 18em;
  font-size: clamp(2rem, 5vw, 3.6rem);
  letter-spacing: -0.055em;
  line-height: 1.15;
  text-wrap: balance;
}

.profile-lede {
  color: color-mix(in srgb, var(--color-ink) 86%, var(--color-muted));
  font-size: clamp(1.08rem, 2.5vw, 1.32rem);
  line-height: 1.85;
}

.profile-prose__body {
  color: color-mix(in srgb, var(--color-ink) 88%, var(--color-muted));
  font-size: clamp(1rem, 2vw, 1.08rem);
  line-height: 1.95;
}

.profile-prose__body h3 {
  margin-block: clamp(1.8rem, 4vw, 2.8rem) var(--space-3);
  color: var(--profile-deep, var(--color-brand-strong));
  font-size: clamp(1.35rem, 3vw, 1.8rem);
}

.profile-prose__body h3:first-child {
  margin-block-start: 0;
}

.profile-prose__body p:last-child {
  margin-block-end: 0;
}

.preference-pair-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  width: min(100%, 62rem);
  margin-inline: auto;
}

.preference-pair-card {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: clamp(1.1rem, 3vw, 1.65rem);
  box-shadow: var(--shadow-card);
}

.preference-pair-card > span {
  color: var(--color-accent);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.preference-pair-card h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-block: var(--space-3);
  color: var(--color-brand-strong);
  font-size: clamp(1rem, 2vw, 1.22rem);
}

.preference-pair-card h3 i {
  color: var(--color-accent);
  font-style: normal;
}

.preference-pair-card p {
  margin: 0;
  color: var(--color-muted);
}

.section-heading--center {
  margin-inline: auto;
  text-align: center;
}

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

.profile-grid--reading .content-card {
  min-height: 100%;
}

.profile-grid--reading .content-card p {
  margin: 0;
}

.profile-feature-list {
  padding: clamp(1.4rem, 4vw, 2.5rem);
}

.profile-identity-label {
  color: var(--card-middle);
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  line-height: 1.55;
}

.identity-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.identity-switcher a {
  border: 1px solid color-mix(in srgb, var(--profile-middle) 28%, var(--color-line));
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--profile-deep);
  padding: 0.58rem 0.85rem;
  font-size: var(--font-size-small);
  font-weight: 800;
  text-decoration: none;
}

.identity-switcher a:hover,
.identity-switcher a:focus-visible,
.identity-switcher a[aria-current="page"] {
  border-color: var(--profile-middle);
  background: var(--profile-deep);
  color: white;
}

.identity-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.identity-card {
  border: 1px solid color-mix(in srgb, var(--profile-middle) 20%, var(--color-line));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--profile-glow) 55%, transparent), transparent 14rem),
    color-mix(in srgb, var(--profile-soft) 48%, var(--color-surface));
  padding: clamp(1.25rem, 4vw, 2.25rem);
  box-shadow: 0 18px 45px color-mix(in srgb, var(--profile-deep) 10%, transparent);
}

.identity-card--current {
  border-color: var(--profile-middle);
  box-shadow: 0 22px 54px color-mix(in srgb, var(--profile-deep) 17%, transparent);
}

.identity-card__code,
.profile-role-card > span {
  color: var(--profile-middle);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.09em;
}

.identity-card h3,
.profile-role-card h3 {
  margin-block: var(--space-2);
  color: var(--profile-deep);
}

.identity-card p,
.profile-role-card p,
.profile-practice p {
  color: color-mix(in srgb, var(--color-ink) 82%, var(--color-muted));
}

.identity-card a {
  display: inline-flex;
  margin-block-start: var(--space-2);
  color: var(--profile-deep);
  font-weight: 800;
  text-underline-offset: 0.22em;
}

.profile-essay {
  display: grid;
  gap: clamp(1.25rem, 4vw, 2rem);
  width: min(100%, 70rem);
  margin-inline: auto;
}

.profile-essay__lead {
  margin: 0;
  color: color-mix(in srgb, var(--color-ink) 90%, var(--profile-deep));
  font-size: clamp(1.06rem, 2.4vw, 1.26rem);
  line-height: 1.85;
}

.profile-topic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.profile-topic-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profile-topic-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.profile-role-card {
  border-block-start: 0.24rem solid var(--profile-middle);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--color-surface);
  padding: clamp(1.1rem, 3vw, 1.6rem);
  box-shadow: var(--shadow-card);
}

.profile-role-card p {
  margin: 0;
  line-height: 1.8;
}

.profile-practice {
  display: grid;
  grid-template-columns: minmax(8rem, 0.3fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--profile-middle) 22%, var(--color-line));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--profile-soft) 60%, var(--color-surface));
  padding: clamp(1rem, 3vw, 1.5rem);
}

.profile-practice strong {
  color: var(--profile-deep);
}

.profile-practice p {
  margin: 0;
}

.profile-detail {
  --profile-deep: var(--color-brand-strong);
  --profile-middle: var(--color-brand);
  --profile-soft: var(--color-brand-soft);
  --profile-glow: var(--color-accent-soft);
}

.profile-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-block-start: var(--space-2);
}

.profile-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-pill);
  background: rgb(255 253 249 / 72%);
  color: color-mix(in srgb, var(--profile-deep) 78%, var(--color-muted));
  padding: 0.3rem 0.65rem;
  font-size: 0.74rem;
  font-weight: 780;
  backdrop-filter: blur(10px);
}

.profile-hero__meta span + span::before {
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 50%;
  background: var(--profile-middle);
  content: "";
}

.profile-summary {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: calc(100% - clamp(1.4rem, 6vw, 5.5rem));
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 78%);
  border-radius: clamp(1rem, 3vw, 1.5rem);
  background: rgb(255 253 249 / 94%);
  box-shadow: 0 18px 48px rgb(54 35 49 / 14%);
  backdrop-filter: blur(18px);
}

.profile-detail > .profile-summary,
.zodiac-profile > .profile-summary {
  margin-block-start: clamp(-4.8rem, -5vw, -3.4rem);
}

.profile-summary > div {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 0.28rem;
  padding: clamp(0.85rem, 2.5vw, 1.25rem);
}

.profile-summary > div + div {
  border-inline-start: 1px solid var(--color-line);
}

.profile-summary strong {
  overflow-wrap: anywhere;
  color: var(--profile-deep);
  font-size: clamp(0.95rem, 2vw, 1.18rem);
  line-height: 1.35;
}

.profile-summary span {
  color: var(--color-muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.profile-hero--zodiac {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(27rem, 48vw, 34rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(19rem, 0.95fr);
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--profile-middle) 24%, white);
  border-radius: clamp(1.6rem, 4vw, 2.35rem);
  background:
    radial-gradient(circle at 14% 12%, color-mix(in srgb, var(--profile-glow) 76%, transparent), transparent 28%),
    linear-gradient(135deg, var(--profile-soft), color-mix(in srgb, var(--profile-middle) 20%, #fffaf3));
  padding: clamp(1.5rem, 5vw, 4rem);
  box-shadow: 0 28px 65px rgb(45 28 45 / 16%);
}

.profile-hero--zodiac::before {
  position: absolute;
  z-index: -1;
  inset: -18% -6% auto 48%;
  height: 86%;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--profile-middle) 15%, transparent) 0 48%, transparent 48.5%),
    linear-gradient(35deg, transparent 0 44%, rgb(255 255 255 / 48%) 44.5% 58%, transparent 58.5%);
  clip-path: polygon(20% 0, 100% 6%, 88% 100%, 0 76%);
  content: "";
}

.profile-hero--zodiac h1,
.profile-hero--zodiac p {
  margin: 0;
}

.profile-hero--zodiac h1 {
  color: var(--profile-deep);
  font-size: clamp(2.8rem, 7vw, 5.6rem);
  letter-spacing: -0.065em;
}

.profile-hero--zodiac .result-identity__code {
  color: var(--profile-middle);
}

.profile-hero--zodiac .tag {
  background: rgb(255 253 249 / 72%);
  color: var(--profile-deep);
  backdrop-filter: blur(10px);
}

.profile-hero__copy {
  position: relative;
  z-index: 3;
}

.profile-hero__art {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 22rem;
  place-items: center;
}

.profile-hero__art > .zodiac-avatar {
  width: min(100%, 20rem);
  border: 0;
  background-color: transparent;
  filter: drop-shadow(0 28px 34px color-mix(in srgb, var(--profile-deep) 22%, transparent));
  box-shadow: none;
  scale: 1.03;
}

.profile-hero__seal {
  position: absolute;
  z-index: -1;
  inset-inline-end: 0;
  inset-block-end: -12%;
  color: color-mix(in srgb, var(--profile-middle) 13%, transparent);
  font-size: clamp(11rem, 28vw, 22rem);
  font-weight: 800;
  line-height: 1;
}

.profile-theme--fire {
  --profile-deep: #71392f;
  --profile-middle: #b65f42;
  --profile-soft: #fff0e4;
  --profile-glow: #ffd1ad;
}

.profile-theme--earth {
  --profile-deep: #405542;
  --profile-middle: #6e8060;
  --profile-soft: #eef2e5;
  --profile-glow: #dbe5b9;
}

.profile-theme--air {
  --profile-deep: #3b5369;
  --profile-middle: #66859d;
  --profile-soft: #edf4f5;
  --profile-glow: #d5e6e7;
}

.profile-theme--water {
  --profile-deep: #3d496f;
  --profile-middle: #6377a4;
  --profile-soft: #eef0fa;
  --profile-glow: #dcdcf3;
}

.profile-theme--analysts {
  --profile-deep: #4b3157;
  --profile-middle: #76536f;
  --profile-soft: #f2ecf5;
  --profile-glow: #ead5e8;
}

.profile-theme--diplomats {
  --profile-deep: #2f5546;
  --profile-middle: #5f806e;
  --profile-soft: #edf6ef;
  --profile-glow: #d9ead9;
}

.profile-theme--sentinels {
  --profile-deep: #304f64;
  --profile-middle: #5e8194;
  --profile-soft: #edf6f9;
  --profile-glow: #d8e9ef;
}

.profile-theme--explorers {
  --profile-deep: #704b24;
  --profile-middle: #a67436;
  --profile-soft: #fff7e8;
  --profile-glow: #f5dfb5;
}

.panel--feature {
  border-color: color-mix(in srgb, var(--profile-middle) 24%, var(--color-line));
  background:
    radial-gradient(circle at 96% 0, color-mix(in srgb, var(--profile-glow) 62%, transparent), transparent 20rem),
    linear-gradient(145deg, var(--color-surface), var(--profile-soft));
}

.action-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  padding: 0;
  counter-reset: profile-step;
  list-style: none;
}

.action-steps li {
  position: relative;
  min-height: 9rem;
  border: 1px solid color-mix(in srgb, var(--profile-middle) 20%, var(--color-line));
  border-radius: var(--radius-md);
  background: rgb(255 253 249 / 78%);
  padding: 3.2rem var(--space-4) var(--space-4);
  counter-increment: profile-step;
}

.action-steps li::before {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-start: var(--space-4);
  color: var(--profile-middle);
  content: "0" counter(profile-step);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.profile-faq {
  display: grid;
  gap: var(--space-3);
}

.profile-faq details {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 0 var(--space-5);
}

.profile-faq summary {
  padding-block: var(--space-5);
  color: var(--profile-deep);
  cursor: pointer;
  font-weight: 800;
}

.profile-faq details[open] summary {
  border-block-end: 1px solid var(--color-line);
}

.profile-faq p {
  color: var(--color-muted);
  padding-block: var(--space-4) var(--space-5);
}

.reflection-quote {
  margin: 0;
  border-inline-start: 0.3rem solid var(--profile-middle);
  color: var(--profile-deep);
  padding: var(--space-3) 0 var(--space-3) clamp(1rem, 3vw, 1.8rem);
  font-size: clamp(1.35rem, 3.5vw, 2.15rem);
  font-weight: 750;
  line-height: 1.55;
  text-wrap: balance;
}

.profile-chapter > .grid > .content-card {
  height: 100%;
}

.profile-detail__hero {
  border: 1px solid color-mix(in srgb, var(--color-brand) 38%, var(--color-line));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 92% 8%, rgb(255 216 184 / 58%), transparent 28%),
    linear-gradient(145deg, #fffdf9, var(--color-brand-soft));
  padding: clamp(1.1rem, 4vw, 2.4rem);
}

.profile-detail__hero h1,
.profile-detail__hero h3,
.profile-detail__hero p {
  margin: 0;
}

.profile-detail__hero h1 {
  font-size: clamp(2rem, 6vw, 4rem);
}

.profile-detail__hero h1 small,
.profile-detail__hero h3 small {
  color: var(--color-muted);
  font-size: 0.48em;
  font-weight: 750;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-3);
}

.profile-grid--letters {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.personality-groups {
  display: grid;
  gap: clamp(1.4rem, 4vw, 2.8rem);
}

.personality-group {
  --group-ink: #5e416b;
  --group-line: #d4c3dc;
  --group-surface: #f3edf6;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--group-line);
  border-radius: clamp(1.4rem, 3vw, 2.1rem);
  background:
    linear-gradient(150deg, rgb(255 255 255 / 76%), transparent 48%),
    var(--group-surface);
  padding: clamp(1.2rem, 4vw, 2.5rem);
}

.personality-group::before {
  position: absolute;
  z-index: -1;
  inset: -12% -5% auto 52%;
  height: 78%;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--group-ink) 10%, transparent) 0 45%, transparent 45%),
    linear-gradient(35deg, transparent 0 42%, rgb(255 255 255 / 48%) 42% 58%, transparent 58%);
  clip-path: polygon(22% 0, 100% 8%, 86% 100%, 0 78%);
  content: "";
  pointer-events: none;
}

.personality-group--analysts {
  --group-ink: #674574;
  --group-line: #d4c3dc;
  --group-surface: #f2ecf5;
}

.personality-group--diplomats {
  --group-ink: #49745a;
  --group-line: #c4dac9;
  --group-surface: #edf6ef;
}

.personality-group--sentinels {
  --group-ink: #3f6b7f;
  --group-line: #bed5df;
  --group-surface: #edf6f9;
}

.personality-group--explorers {
  --group-ink: #946426;
  --group-line: #ead3a7;
  --group-surface: #fff7e8;
}

.personality-group__heading {
  position: relative;
  z-index: 1;
  max-width: 42rem;
  margin-block-end: clamp(1rem, 3vw, 1.8rem);
}

.personality-group__heading h3 {
  margin-block-end: var(--space-2);
  color: var(--group-ink);
  font-size: clamp(1.65rem, 4vw, 2.4rem);
}

.personality-group__heading p:last-child {
  margin-block-end: 0;
  color: color-mix(in srgb, var(--group-ink) 78%, var(--color-muted));
}

.personality-group__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.65rem, 2vw, 1.1rem);
}

.personality-group .profile-card--personality {
  border-color: color-mix(in srgb, var(--group-line) 80%, white);
  background: rgb(255 253 249 / 82%);
  padding: 0.36rem;
  box-shadow: 0 14px 35px color-mix(in srgb, var(--group-ink) 12%, transparent);
  backdrop-filter: blur(10px);
}

.personality-group .profile-card--personality:hover {
  border-color: var(--group-ink);
  box-shadow: 0 20px 42px color-mix(in srgb, var(--group-ink) 18%, transparent);
}

.personality-group .profile-card__body strong {
  color: var(--group-ink);
}

.profile-card--personality[href]:hover .type-avatar {
  filter: saturate(1.06) contrast(1.02);
  scale: 1.035;
}

.profile-card--personality .type-avatar {
  transform:
    translate(var(--portrait-shift-x, 0), var(--portrait-shift-y, 0))
    rotate(var(--portrait-rotate, 0deg));
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), scale 420ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 420ms ease;
}

.profile-card--personality.is-character-active .type-avatar,
.profile-hero--personality.is-character-active > .character-card__art {
  filter: saturate(1.06) contrast(1.025) drop-shadow(0 1.2rem 1.4rem color-mix(in srgb, var(--card-deep, var(--group-ink)) 18%, transparent));
  animation: personality-greet 820ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.personality-motion-ready [data-personality-reveal] {
  opacity: 0;
  translate: 0 1.35rem;
  transition: opacity 620ms ease, translate 720ms cubic-bezier(0.16, 1, 0.3, 1);
}

.personality-motion-ready [data-profile-reveal] {
  opacity: 0;
  translate: 0 1.35rem;
  transition: opacity 620ms ease, translate 720ms cubic-bezier(0.16, 1, 0.3, 1);
}

.personality-motion-ready [data-personality-reveal].is-visible {
  opacity: 1;
  translate: 0 0;
}

.personality-motion-ready [data-profile-reveal].is-visible {
  opacity: 1;
  translate: 0 0;
}

.personality-motion-ready .personality-group[data-personality-reveal] .profile-card,
.personality-motion-ready .profile-grid[data-personality-reveal] .profile-card,
.personality-motion-ready .character-wall[data-personality-reveal] figure {
  opacity: 0;
  translate: 0 1rem;
  transition: opacity 520ms ease, translate 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.personality-motion-ready .personality-group.is-visible .profile-card,
.personality-motion-ready .profile-grid.is-visible .profile-card,
.personality-motion-ready .character-wall.is-visible figure {
  opacity: 1;
  translate: 0 0;
}

.personality-motion-ready .is-visible :is(.profile-card, figure):nth-child(2) { transition-delay: 80ms; }
.personality-motion-ready .is-visible :is(.profile-card, figure):nth-child(3) { transition-delay: 160ms; }
.personality-motion-ready .is-visible :is(.profile-card, figure):nth-child(4) { transition-delay: 240ms; }

.character-wall.is-visible .type-avatar,
.character-card.is-visible > .type-avatar.character-card__art {
  animation: personality-float 6s ease-in-out infinite;
}

.profile-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-2);
  color: var(--color-ink);
  text-decoration: none;
  box-shadow: 0 8px 24px rgb(67 46 58 / 7%);
  transition: border-color var(--transition), box-shadow var(--transition), translate var(--transition);
}

.profile-card[href]:hover {
  border-color: var(--color-brand);
  box-shadow: 0 14px 30px rgb(67 46 58 / 12%);
  translate: 0 -2px;
}

.profile-card[href]:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.profile-card--current {
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
}

.profile-card--plain {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  overflow: visible;
  padding: var(--space-3);
  box-shadow: none;
}

.profile-card__visual {
  width: 100%;
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.profile-card__body {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-3) var(--space-2) var(--space-2);
}

.profile-card__body strong {
  color: var(--color-brand-strong);
  font-size: 1rem;
  line-height: 1.35;
}

.profile-card__body small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-muted);
  font-size: 0.78rem;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.profile-card__body .profile-card__variant {
  display: block;
  overflow: visible;
  color: var(--group-ink, var(--profile-middle, var(--color-accent)));
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  -webkit-line-clamp: initial;
}

.profile-card__code {
  display: grid;
  place-items: center;
  width: 2.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
  font-size: 1.2rem;
}

.profile-card h3,
.profile-card p {
  margin: 0;
}

.profile-card h3 {
  font-size: 1rem;
}

.element-card .profile-card__body strong {
  font-size: 1.15rem;
}

.element-card {
  position: relative;
  isolation: isolate;
}

.element-card .element-avatar {
  position: relative;
  overflow: visible;
  transform-origin: 50% 78%;
  transition: filter 260ms ease;
  will-change: filter, scale, translate, rotate;
}

.element-card .element-avatar--air {
  overflow: hidden;
  background-image: url("../img/element-air-wind-v4.png");
}

/* All moving ornaments share the complete artwork's canvas and exact scale. */
.element-card .element-avatar--fire { background-image: url("../img/element-fire-core-v4.png"); }
.element-card .element-avatar--earth { background-image: url("../img/element-earth-ground-v5.png"); }
.element-card .element-avatar--water { background-image: url("../img/element-water-wave-v4.png"); }

.element-air-gust {
  position: absolute;
  inset: 0;
  background-image: url("../img/element-air-wind-v4.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  clip-path: polygon(67% 38%, 92% 37%, 93% 58%, 72% 63%, 66% 53%);
  content: "";
  opacity: 0;
  pointer-events: none;
  will-change: opacity, translate;
}

.element-card .element-avatar::before,
.element-card .element-avatar::after {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  opacity: 1;
  pointer-events: none;
  transform-origin: 50% 78%;
  will-change: opacity, scale, translate, rotate;
}

.element-card.is-element-active .element-avatar--fire {
  transform-origin: 50% 88%;
  animation: element-fire-burn 820ms ease-in-out infinite;
}

.element-avatar--fire::before {
  background-image: url("../img/element-fire-flames-left-v4.png");
}

.element-card.is-element-active .element-avatar--fire::before {
  animation: element-fire-flames-left 720ms ease-in-out infinite;
}

.element-avatar--fire::after {
  background-image: url("../img/element-fire-flames-right-v4.png");
}

.element-card.is-element-active .element-avatar--fire::after {
  animation: element-fire-flames-right 910ms ease-in-out infinite;
}

.element-card .element-avatar--earth::before {
  background-image: url("../img/element-earth-sprout-v5.png");
  transform-origin: 48.7% 32.8%;
}

.element-avatar--earth::after {
  content: none;
}

.element-card.is-element-active .element-avatar--earth::before {
  animation: element-earth-sprout-cycle 4.2s cubic-bezier(0.22, 0.72, 0.24, 1) infinite;
}

.element-card.is-element-active .element-air-gust {
  animation: element-air-wisp 4.4s ease-in-out infinite;
}

.element-avatar--air::before {
  background-image: url("../img/element-air-leaves-a-v4.png");
}

.element-card.is-element-active .element-avatar--air::before {
  animation: element-air-leaves-a-cycle 4.4s linear infinite;
}

.element-avatar--air::after {
  background-image: url("../img/element-air-leaves-b-v4.png");
}

.element-card.is-element-active .element-avatar--air::after {
  animation: element-air-leaves-b-cycle 4.4s linear infinite;
}

.element-card.is-element-active .element-avatar--water {
  transform-origin: 38% 84%;
  animation: element-water-curl 2.4s ease-in-out infinite;
}

.element-avatar--water::before {
  background-image: url("../img/element-water-drops-a-v4.png");
}

.element-card.is-element-active .element-avatar--water::before {
  animation: element-water-drops-a-cycle 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.element-avatar--water::after {
  background-image: url("../img/element-water-drops-b-v4.png");
}

.element-card.is-element-active .element-avatar--water::after {
  animation: element-water-drops-b-cycle 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes element-fire-burn {
  0%, 100% { scale: 1 1; rotate: 0deg; filter: saturate(1) brightness(1); }
  30% { scale: 0.986 1.026; rotate: -0.35deg; filter: saturate(1.08) brightness(1.055); }
  64% { scale: 1.009 0.995; rotate: 0.28deg; filter: saturate(1.035) brightness(1.018); }
}

@keyframes element-fire-flames-left {
  0%, 100% { translate: 0 0; rotate: 0deg; scale: 1; }
  38% { translate: 0.16rem -0.46rem; rotate: -1.2deg; scale: 0.98 1.045; }
  72% { translate: -0.08rem -0.18rem; rotate: 0.7deg; scale: 1.012 1.02; }
}

@keyframes element-fire-flames-right {
  0%, 100% { translate: 0 0; rotate: 0deg; scale: 1; }
  30% { translate: -0.08rem -0.24rem; rotate: 0.9deg; scale: 1.01 1.026; }
  66% { translate: 0.15rem -0.52rem; rotate: -1deg; scale: 0.98 1.05; }
}

@keyframes element-earth-sprout-cycle {
  0% { translate: 0 0.28rem; scale: 0.2 0.14; opacity: 0; }
  7% { translate: 0 0.27rem; scale: 0.24 0.18; opacity: 0.72; }
  30% { translate: 0 0.18rem; scale: 0.48 0.42; opacity: 1; }
  56% { translate: 0 0.08rem; scale: 0.76 0.72; opacity: 1; }
  74%, 91% { translate: 0 0; scale: 1; opacity: 1; }
  97% { translate: 0 0; scale: 1; opacity: 0; }
  100% { translate: 0 0.28rem; scale: 0.2 0.14; opacity: 0; }
}

@keyframes element-air-wisp {
  0%, 100% { translate: -1.2% 0.2%; opacity: 0; }
  18% { translate: 0 0; opacity: 0.1; }
  52% { translate: 3% -0.25%; opacity: 0.2; }
  82% { translate: 5.5% -0.6%; opacity: 0; }
}

@keyframes element-air-leaves-a-cycle {
  0% { translate: 0 0; rotate: 0deg; opacity: 1; }
  26% { translate: 58% -8%; rotate: 20deg; opacity: 1; }
  34% { translate: 86% -13%; rotate: 34deg; opacity: 0; }
  35%, 58% { translate: -92% 10%; rotate: -28deg; opacity: 0; }
  68% { translate: -70% 7%; rotate: -18deg; opacity: 1; }
  88%, 100% { translate: 0 0; rotate: 0deg; opacity: 1; }
}

@keyframes element-air-leaves-b-cycle {
  0%, 16% { translate: 0 0; rotate: 0deg; opacity: 1; }
  42% { translate: 60% -6%; rotate: 24deg; opacity: 1; }
  50% { translate: 88% -11%; rotate: 38deg; opacity: 0; }
  51%, 72% { translate: -94% 12%; rotate: -30deg; opacity: 0; }
  81% { translate: -72% 8%; rotate: -19deg; opacity: 1; }
  100% { translate: 0 0; rotate: 0deg; opacity: 1; }
}

@keyframes element-water-curl {
  0%, 100% { translate: 0 0; rotate: 0deg; scale: 1; filter: saturate(1); }
  52% { translate: 0.08rem -0.06rem; rotate: -0.18deg; scale: 1.006 1.008; filter: saturate(1.045) brightness(1.014); }
}

@keyframes element-water-drops-a-cycle {
  0% { translate: 0 0; scale: 1; opacity: 1; }
  28% { translate: -2% 10%; scale: 0.92; opacity: 1; }
  44% { translate: -4% 19%; scale: 0.16; opacity: 0; }
  45%, 61% { translate: 1% -16%; scale: 0.3; opacity: 0; }
  70% { translate: 1% -13%; scale: 0.62; opacity: 1; }
  88% { translate: 0 -5%; scale: 0.9; opacity: 1; }
  100% { translate: 0 0; scale: 1; opacity: 1; }
}

@keyframes element-water-drops-b-cycle {
  0%, 14% { translate: 0 0; scale: 1; opacity: 1; }
  40% { translate: -2% 9%; scale: 0.92; opacity: 1; }
  55% { translate: -4% 18%; scale: 0.18; opacity: 0; }
  56%, 72% { translate: 2% -15%; scale: 0.32; opacity: 0; }
  81% { translate: 1% -12%; scale: 0.64; opacity: 1; }
  92% { translate: 0 -4%; scale: 0.92; opacity: 1; }
  100% { translate: 0 0; scale: 1; opacity: 1; }
}

.element-relation-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.element-relation-card {
  --relation-a: #bc6045;
  --relation-b: #6d7f9c;
  position: relative;
  min-height: 15rem;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--relation-a) 24%, var(--color-line));
  background:
    radial-gradient(circle at 92% 6%, color-mix(in srgb, var(--relation-b) 25%, transparent), transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--relation-a) 10%, var(--color-surface)), color-mix(in srgb, var(--relation-b) 11%, var(--color-surface)));
  box-shadow: 0 15px 34px color-mix(in srgb, var(--relation-a) 10%, transparent);
}

.element-relation-card > :not(.element-relation-card__art) {
  position: relative;
  z-index: 1;
}

.element-relation-card h3 {
  width: fit-content;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-surface) 84%, transparent);
  padding: 0.35rem 0.75rem;
  color: color-mix(in srgb, var(--relation-a) 76%, var(--color-ink));
  backdrop-filter: blur(8px);
}

.element-relation-card__art {
  position: absolute;
  inset-block-start: -1.5rem;
  inset-inline-end: -1.2rem;
  display: grid;
  width: 13rem;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  rotate: 7deg;
  opacity: 0.2;
}

.element-relation-card__art .element-avatar {
  border: 0;
  background-color: transparent;
  box-shadow: none;
}

.element-relation-card--a-fire { --relation-a: #cb5a3d; }
.element-relation-card--a-earth { --relation-a: #87704b; }
.element-relation-card--a-air { --relation-a: #5b7f9c; }
.element-relation-card--a-water { --relation-a: #477d92; }
.element-relation-card--b-fire { --relation-b: #cb5a3d; }
.element-relation-card--b-earth { --relation-b: #87704b; }
.element-relation-card--b-air { --relation-b: #5b7f9c; }
.element-relation-card--b-water { --relation-b: #477d92; }

.character-wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  min-width: 0;
}

.character-wall figure {
  position: relative;
  margin: 0;
}

.character-wall figcaption {
  position: absolute;
  inset-inline: var(--space-2);
  inset-block-end: var(--space-2);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: var(--radius-pill);
  background: rgb(255 253 249 / 86%);
  color: var(--color-ink);
  padding: 0.25rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 800;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

.character-tile--large {
  grid-row: span 2;
  align-self: center;
}

.character-wall--compact {
  grid-template-columns: repeat(2, minmax(6.5rem, 1fr));
}

.disclosure > div {
  padding-block-start: var(--space-4);
}

.result:focus {
  outline: none;
}

.result h2,
.result h3 {
  color: var(--color-brand-strong);
}

.result--zodiac {
  border-color: color-mix(in srgb, var(--color-accent) 60%, var(--color-brand));
  background:
    radial-gradient(circle at 92% 2%, rgb(255 222 190 / 58%), transparent 23rem),
    linear-gradient(145deg, #fffaf3, var(--color-brand-soft));
}

.result--zodiac .result-identity h3 small {
  color: var(--color-muted);
  font-size: 0.52em;
  font-weight: 700;
}

.result--zodiac .metric li {
  border: 1px solid color-mix(in srgb, var(--color-line) 75%, transparent);
}

.result--zodiac .metric strong {
  font-size: clamp(1rem, 2vw, 1.2rem);
}

.result ul,
.result ol {
  padding-inline-start: 1.25rem;
}

.status-message {
  border-radius: var(--radius-sm);
  background: var(--color-surface-soft);
  padding: var(--space-3) var(--space-4);
}

.status-message[data-status="error"] {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.status-message[data-status="success"] {
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
}

.status-message[data-status="pending"],
[data-visitor-status][data-status="pending"] {
  color: var(--color-info);
}

.progress-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  align-items: center;
  border-block: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  border-radius: 0;
  background: transparent;
  padding: 1rem 0;
}

.status-message.progress-status,
.status-message.progress-status[data-status="success"],
.status-message.progress-status[data-status="error"] {
  border-radius: 0;
  background: transparent;
}

.progress-status[hidden] {
  display: none;
}

.progress-status:not([data-status="pending"]) {
  grid-template-columns: minmax(0, 1fr);
}

.progress-status__indicator {
  display: none;
  width: 1.7rem;
  aspect-ratio: 1;
  border: 0.16rem solid color-mix(in srgb, currentColor 20%, transparent);
  border-block-start-color: currentColor;
  border-inline-end-color: currentColor;
  border-radius: 50%;
}

.progress-status[data-status="pending"] .progress-status__indicator {
  display: block;
  animation: progress-status-spin 0.9s linear infinite;
}

.progress-status__copy {
  display: grid;
  gap: 0.2rem;
  line-height: 1.55;
}

.progress-status__copy strong {
  color: currentColor;
  font-size: 1rem;
}

.progress-status__copy > span {
  color: var(--color-muted);
}

.progress-status--analysis { gap: 1.25rem; padding-block: 1.5rem; }
.progress-status--analysis .progress-status__indicator { width: 3rem; border-width: .2rem; }
.progress-status__message { display: grid; gap: .4rem; }
.progress-status--analysis .progress-status__copy { gap: .65rem; }
.progress-status--analysis .progress-status__copy strong { font-size: 1.15rem; color: var(--color-text); }
.progress-status__copy .progress-status__elapsed { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem; font-size: .875rem; }
.progress-status__elapsed time { font-size: 1.2rem; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--color-text); white-space: nowrap; }
.progress-status__estimate { font-size: .875rem; }
.progress-status__copy [hidden] { display: none; }
@media (max-width: 36rem) {
  .progress-status--analysis { gap: .8rem; align-items: start; }
  .progress-status--analysis .progress-status__indicator { width: 2.3rem; margin-top: .15rem; }
}

@keyframes progress-status-spin {
  to { transform: rotate(1turn); }
}

@media (prefers-reduced-motion: reduce) {
  .progress-status[data-status="pending"] .progress-status__indicator {
    animation: none;
  }
}

[data-visitor-status][data-status="error"] {
  color: var(--color-danger);
}

[data-visitor-status][data-status="success"] {
  color: var(--color-brand-strong);
}

.signal {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: var(--space-3);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  padding: var(--space-2) var(--space-4);
}

.signal__dot {
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: currentColor;
}

.signal--positive {
  color: var(--color-brand-strong);
}

.signal--caution {
  color: var(--color-accent);
}

.signal--neutral {
  color: var(--color-info);
}

.signal--green {
  color: var(--color-signal-green);
}

.signal--yellow {
  color: var(--color-signal-yellow);
}

.signal--orange {
  color: var(--color-signal-orange);
}

.metric {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--space-3);
  padding: 0;
  list-style: none;
}

.metric li {
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  padding: var(--space-3);
}

.metric strong {
  display: block;
  color: var(--color-brand-strong);
  font-size: 1.35rem;
}

.timer {
  display: grid;
  min-height: 10rem;
  place-items: center;
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  padding: var(--space-6);
  text-align: center;
}

.timer__value {
  display: block;
  color: var(--color-brand-strong);
  font-size: clamp(2.2rem, 10vw, 4.5rem);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1;
}

.plain-list {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  list-style: none;
}

.plain-list > li {
  border-block-end: 1px solid var(--color-line);
  padding-block-end: var(--space-3);
}

.definition-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.definition-list > div {
  display: grid;
  grid-template-columns: minmax(7rem, 0.35fr) minmax(0, 1fr);
  gap: var(--space-4);
  border-block-end: 1px solid var(--color-line);
  padding-block: var(--space-3);
}

.definition-list dt {
  color: var(--color-muted);
  font-weight: 750;
}

.definition-list dd {
  margin: 0;
}

.definition-list--cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.definition-list--cards > div {
  display: block;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--profile-soft) 48%, var(--color-surface));
  padding: var(--space-4);
}

.definition-list--cards dt {
  margin-block-end: var(--space-2);
  color: var(--profile-middle);
}

.document-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-block-start: var(--space-4);
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.document-layout {
  display: grid;
  align-items: start;
  gap: var(--space-6);
}

.document-nav {
  padding: var(--space-4);
}

.document-nav nav,
.site-footer__nav {
  display: grid;
  gap: var(--space-2);
}

.document-nav a {
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem;
  color: var(--color-muted);
  font-size: var(--font-size-small);
  font-weight: 700;
  text-decoration: none;
}

.document-nav a:hover,
.document-nav a[aria-current="page"] {
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
}

.document-content {
  max-width: 52rem;
}

.document-section + .document-section {
  margin-block-start: var(--space-8);
  border-block-start: 1px solid var(--color-line);
  padding-block-start: var(--space-8);
}

.document-section h2 {
  font-size: clamp(1.35rem, 3vw, 1.8rem);
}

.document-section p,
.document-section li {
  color: color-mix(in srgb, var(--color-ink) 86%, var(--color-muted));
}

.document-section ul {
  display: grid;
  gap: var(--space-2);
  padding-inline-start: 1.25rem;
}

.site-footer {
  border-block-start: 1px solid var(--color-line);
  background: var(--color-surface);
  padding-block: var(--space-8);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-8) var(--space-6);
}

.site-footer__brand {
  grid-column: 1 / -1;
  max-width: none;
}

.site-footer__brand p,
.site-footer__bottom p {
  margin-block-end: 0;
}

.site-footer__nav strong {
  margin-block-end: var(--space-2);
}

.site-footer__nav a {
  width: fit-content;
  color: var(--color-muted);
  font-size: var(--font-size-small);
  font-weight: 650;
  text-decoration: none;
}

.site-footer__nav a:hover {
  color: var(--color-brand-strong);
  text-decoration: underline;
}

.site-footer__help {
  min-width: 0;
}

.site-footer__help-copy {
  max-width: none;
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
  line-height: 1.8;
}

.site-footer__help-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.site-footer__help-contacts a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  color: var(--color-brand-strong);
  text-decoration: none;
}

.site-footer__help-contacts svg { flex: 0 0 auto; }

.site-footer__help-contacts a span {
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}

.site-footer__help-contacts a:hover {
  color: var(--color-brand-strong);
  text-decoration: underline;
}

.site-footer__help-contacts a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.site-footer__bottom {
  align-items: baseline;
  border-block-start: 1px solid var(--color-line);
  padding-block-start: var(--space-4);
}

.site-footer__filings {
  justify-content: flex-end;
  margin-inline-start: auto;
  max-width: 100%;
  text-align: end;
}

.site-footer__filings a {
  color: #747779;
  font-size: var(--font-size-small);
  font-weight: 400;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.site-footer__filings a:hover,
.site-footer__filings a:focus-visible {
  color: #626568;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (min-width: 48rem) {
  .site-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 72rem) {
  .site-footer__grid { grid-template-columns: minmax(17rem, 1.7fr) repeat(3, minmax(8rem, 1fr)) minmax(14rem, 1.3fr); }
  .site-footer__brand { grid-column: auto; }
}

.noscript {
  margin: var(--space-4) auto;
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-sm);
  background: var(--color-danger-soft);
  padding: var(--space-4);
}

@media (min-width: 52rem) {
  .hero--split {
    grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr);
  }

  .tool-layout {
    grid-template-columns: minmax(0, 1fr) 18rem;
  }

  .tool-layout > aside {
    position: sticky;
    inset-block-start: var(--space-6);
  }

  .document-layout {
    grid-template-columns: 15rem minmax(0, 1fr);
  }

  .document-nav {
    position: sticky;
    inset-block-start: 6rem;
  }

  .profile-chapter-nav {
    position: sticky;
    inset-block-start: 5.25rem;
  }
}

@media (min-width: 64rem) {
  .profile-reading-layout {
    grid-template-columns: minmax(12rem, 14rem) minmax(0, 1fr);
    align-items: start;
  }

  .profile-reading-layout > .profile-chapter-nav {
    position: sticky;
    inset-block-start: 5.25rem;
    display: grid;
    overflow: visible;
    border-radius: var(--radius-lg);
    background: rgb(255 253 249 / 94%);
    padding: var(--space-3);
  }

  .profile-reading-layout > .profile-chapter-nav a {
    width: 100%;
    padding: 0.62rem 0.75rem;
  }
}

@media (max-width: 64rem) {
  .profile-topic-grid--three,
  .profile-topic-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 40rem) {
  .site-header > .container {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-nav {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-block-end: var(--space-1);
  }

  .site-nav__link {
    white-space: nowrap;
  }

  .site-header {
    backdrop-filter: none;
  }

  .site-nav {
    overflow: visible;
    flex-wrap: wrap;
  }

  .site-nav__item {
    position: static;
  }

  .site-nav__panel {
    inset-block-start: 100%;
    inset-inline-start: 50%;
    inset-inline-end: auto;
    width: calc(100% - 1rem);
    max-height: calc(100vh - 9rem);
    border-radius: 0.65rem;
  }

  .site-nav__panel::before {
    display: none;
  }

  .site-nav__options,
  .site-nav__menu-groups--zodiac .site-nav__options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-nav__menu-groups--zodiac {
    grid-template-columns: 1fr;
  }

  .button {
    width: 100%;
  }

  .personality-index-hero {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .personality-index-hero__copy {
    padding: 2rem 1.35rem 0;
  }

  .personality-index-hero__copy h1 {
    font-size: clamp(2.45rem, 13vw, 3.8rem);
  }

  .personality-index-hero__art {
    min-height: 27rem;
  }

  .personality-index-hero__figure--back {
    inset-inline-start: -9%;
    width: 51%;
  }

  .personality-index-hero__figure--front {
    inset-inline-start: 22%;
    width: 59%;
  }

  .personality-index-hero__figure--side {
    inset-inline-end: -15%;
    width: 49%;
  }

  .personality-index-hero__caption {
    inset-inline: 1rem;
    max-width: none;
  }

  .preference-pair-grid,
  .profile-grid--reading,
  .identity-comparison,
  .profile-topic-grid,
  .profile-topic-grid--three,
  .profile-topic-grid--four,
  .profile-practice {
    grid-template-columns: 1fr;
  }

  .profile-prose {
    padding-block: 2.5rem;
  }

  .hero--split {
    padding: 1.4rem;
  }

  .character-wall--compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .character-wall figcaption {
    display: none;
  }

  .quiz-toolbar {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .question--statement {
    padding-inline: 0;
  }

  .likert {
    gap: 0.18rem;
  }

  .likert__label {
    font-size: 0.68rem;
  }

  .quiz-actions {
    flex-direction: column-reverse;
  }

  .result-identity {
    grid-template-columns: 7.5rem minmax(0, 1fr);
  }

  .profile-detail__hero {
    grid-template-columns: 1fr;
  }

  .profile-hero--zodiac {
    min-height: auto;
    grid-template-columns: 1fr;
    padding: 1.4rem 1.4rem 3rem;
  }

  .profile-hero__art {
    min-height: 17rem;
  }

  .profile-hero__art > .zodiac-avatar {
    width: min(19rem, 82vw);
  }

  .profile-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: calc(100% - 1.5rem);
  }

  .zodiac-profile > .profile-summary {
    margin-block-start: -3.4rem;
  }

  .profile-detail > .profile-summary {
    margin-block-start: var(--space-3);
  }

  .profile-summary > div:nth-child(2n + 1) {
    border-inline-start: 0;
  }

  .profile-summary > div:nth-child(n + 3) {
    border-block-start: 1px solid var(--color-line);
  }

  .action-steps,
  .definition-list--cards {
    grid-template-columns: 1fr;
  }

  .action-steps li {
    min-height: 0;
  }

  .profile-detail__hero > .type-avatar,
  .profile-detail__hero > .zodiac-avatar {
    width: min(9rem, 48vw);
  }

  .character-card {
    display: block;
    min-height: 39rem;
    border-radius: 1.65rem;
  }

  .profile-detail__hero > .character-card__art,
  .character-card__art {
    inset-block-start: -2.8rem;
    inset-inline-end: -8%;
    width: 116%;
    -webkit-mask-image: linear-gradient(to bottom, #000 54%, transparent 91%);
    mask-image: linear-gradient(to bottom, #000 54%, transparent 91%);
    transform: none;
  }

  .character-card > .type-avatar.character-card__art {
    inset-block-start: 0;
    inset-inline-end: -5%;
    width: 110%;
    background-position: center top;
  }

  .character-card .character-card__copy {
    position: absolute;
    inset-inline: var(--space-4);
    inset-block-end: var(--space-4);
    width: auto;
    margin: 0;
    padding: var(--space-5);
  }

  .character-card .character-card__copy h1,
  .character-card .character-card__copy h3 {
    font-size: clamp(2.15rem, 12vw, 3.25rem);
  }

  .character-card::after {
    inset-block-start: 1.35rem;
    inset-inline-start: 1.35rem;
  }

  .result--personality {
    padding: var(--space-4);
  }

  .result--personality [data-result-body] > .metric {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: -2.15rem 0 0;
  }

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

  .profile-grid--gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .personality-group {
    padding: var(--space-4);
  }

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

  .personality-group .profile-card__body small {
    -webkit-line-clamp: 3;
  }

  .profile-card--plain {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }

  .result {
    scroll-margin-block-start: 9rem;
  }

  .definition-list > div {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

}

.choice-grid--compact {
  max-width: 34rem;
}

.date-fields,
.reference-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

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

/* 人格详情：宽幅编辑式阅读布局。只作用于 /16/{type}，不改变测试和星座页面。 */
.profile-page-shell {
  width: min(calc(100% - clamp(2rem, 4vw, 4rem)), 94rem);
}

.profile-detail {
  gap: 0;
}

.profile-detail.stack--large > * + * {
  margin-block-start: 0;
}

.profile-detail .profile-hero--personality {
  min-height: clamp(30rem, 34vw, 36rem);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(108deg, color-mix(in srgb, var(--profile-soft) 88%, #fffdf9) 0 54%, transparent 76%),
    linear-gradient(155deg, #fbfaf8 0 58%, color-mix(in srgb, var(--profile-middle) 16%, #f5f4f1) 58% 100%);
  padding: 0;
  box-shadow: none;
}

.profile-detail .profile-hero--personality::before {
  z-index: 0;
  inset: auto -4% -22% 42%;
  width: 66%;
  height: 76%;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(145deg, transparent 0 28%, color-mix(in srgb, var(--profile-middle) 7%, transparent) 28.2% 54%, transparent 54.2%),
    linear-gradient(35deg, transparent 0 48%, rgb(255 255 255 / 40%) 48.2% 68%, transparent 68.2%);
  clip-path: polygon(14% 0, 100% 14%, 88% 100%, 0 82%);
}

.profile-detail .profile-hero--personality::after {
  display: none;
}

.profile-detail .profile-hero--personality .character-card__copy {
  width: min(50%, 41rem);
  margin: clamp(5rem, 8vw, 7.5rem) 0 clamp(4rem, 7vw, 6rem) clamp(2rem, 5vw, 5.5rem);
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.profile-detail .profile-hero--personality .character-card__copy h1 {
  max-width: 9em;
  font-size: clamp(3.4rem, 5.1vw, 5.35rem);
  letter-spacing: -0.07em;
  line-height: 1.02;
  text-shadow: none;
}

.profile-detail .profile-hero--personality .result-identity__code {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  font-size: 1rem;
  letter-spacing: 0.18em;
}

.profile-detail .profile-hero--personality .hero__copy {
  max-width: 35rem;
  font-size: clamp(1.08rem, 1.35vw, 1.28rem);
  line-height: 1.85;
}

.profile-detail .profile-hero--personality > .type-avatar.character-card__art {
  inset-block-start: 50%;
  inset-inline-end: clamp(-2rem, -1vw, 0rem);
  width: min(52%, 45rem);
  max-height: 104%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 18%, #000 100%);
}

.profile-detail .profile-hero__meta {
  gap: 0;
  padding-block-start: var(--space-3);
}

.profile-detail .profile-hero__meta span {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  font-size: 0.78rem;
  backdrop-filter: none;
}

.profile-detail .profile-hero__meta span + span {
  margin-inline-start: 0.8rem;
  border-inline-start: 1px solid color-mix(in srgb, var(--profile-middle) 38%, transparent);
  padding-inline-start: 0.8rem;
}

.profile-detail .profile-hero__meta span + span::before {
  display: none;
}

.profile-detail > .profile-summary {
  z-index: auto;
  width: 100%;
  margin: 0;
  overflow: visible;
  border: 0;
  border-block: 1px solid color-mix(in srgb, var(--profile-middle) 20%, var(--color-line));
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.profile-hero--zodiac {
  width: 100vw;
  min-height: clamp(34rem, 45vw, 43rem);
  margin-inline: calc(50% - 50vw);
  border: 0;
  border-radius: 0;
  padding-inline: max(clamp(2rem, 5vw, 6rem), calc((100vw - var(--page-width)) / 2));
  box-shadow: none;
}

.zodiac-profile > .profile-summary {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  border: 0;
  border-block: 1px solid var(--color-line);
  border-radius: 0;
  background: #fff;
  padding-inline: max(clamp(2rem, 5vw, 6rem), calc((100vw - var(--page-width)) / 2));
  box-shadow: none;
  backdrop-filter: none;
}

.profile-detail > .profile-summary > div {
  gap: 0.4rem;
  padding: clamp(1.15rem, 2vw, 1.75rem) clamp(0.8rem, 2vw, 1.5rem);
}

.profile-detail > .profile-summary > div:first-child {
  padding-inline-start: 0;
}

.profile-detail > .profile-summary > div:last-child {
  padding-inline-end: 0;
}

.profile-detail > .profile-summary > div + div {
  border-inline-start-color: color-mix(in srgb, var(--profile-middle) 18%, var(--color-line));
}

.profile-detail > .profile-summary strong {
  font-size: clamp(0.96rem, 1.25vw, 1.12rem);
}

.profile-detail .profile-reading-layout {
  gap: clamp(3rem, 5vw, 5.5rem);
  padding-block-start: clamp(3.5rem, 6vw, 6rem);
}

.profile-detail .profile-reading-content {
  max-width: 64rem;
}

.profile-detail .profile-reading-content.stack--large > * + * {
  margin-block-start: 0;
}

.profile-detail .profile-chapter-nav__title {
  display: block;
  margin-block-end: var(--space-3);
  border-block-end: 1px solid color-mix(in srgb, var(--profile-middle) 22%, var(--color-line));
  color: var(--profile-deep);
  padding: 0 0 var(--space-4) var(--space-3);
  font-size: 1.14rem;
}

.profile-detail .profile-chapter-nav a {
  position: relative;
  border-block-end: 1px solid var(--color-line);
  border-radius: 0;
  padding: 0.78rem var(--space-3);
  font-size: 0.86rem;
  font-weight: 720;
}

.profile-detail .profile-chapter-nav a::before {
  position: absolute;
  inset-block: 0.62rem;
  inset-inline-start: 0;
  width: 2px;
  background: transparent;
  content: "";
}

.profile-detail .profile-chapter-nav a:hover,
.profile-detail .profile-chapter-nav a:focus-visible {
  background: color-mix(in srgb, var(--profile-soft) 62%, transparent);
  color: var(--profile-deep);
}

.profile-detail .profile-chapter-nav a:hover::before,
.profile-detail .profile-chapter-nav a:focus-visible::before {
  background: var(--profile-middle);
}

.profile-detail .profile-chapter {
  border: 0;
  border-block-end: 1px solid color-mix(in srgb, var(--profile-middle) 15%, var(--color-line));
  border-radius: 0;
  background: transparent;
  padding: 0 0 clamp(4.5rem, 7vw, 7rem);
  box-shadow: none;
}

.profile-detail .profile-chapter + .profile-chapter {
  padding-block-start: clamp(4.5rem, 7vw, 7rem);
}

.profile-detail .profile-prose {
  gap: clamp(1.5rem, 3vw, 2.4rem);
}

.profile-detail .profile-prose__heading,
.profile-detail .profile-prose__body,
.profile-detail .profile-prose > .reflection-quote,
.profile-detail .profile-essay {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.profile-detail .profile-prose__heading,
.profile-detail .section-heading {
  max-width: 58rem;
}

.profile-detail .profile-prose__heading h2,
.profile-detail .section-heading h2 {
  max-width: 18em;
  color: var(--profile-deep);
  font-size: clamp(2.25rem, 3.6vw, 3.75rem);
  letter-spacing: -0.055em;
  line-height: 1.12;
  text-wrap: balance;
}

.profile-detail .section-heading > p:last-child,
.profile-detail .profile-lede {
  max-width: 52rem;
  font-size: clamp(1rem, 1.15vw, 1.14rem);
  line-height: 1.9;
}

.profile-detail .reflection-quote {
  max-width: 50rem;
  border-inline-start-width: 0.22rem;
  font-size: clamp(1.45rem, 2.4vw, 2.25rem);
}

.profile-detail .profile-grid--letters {
  gap: 0;
  border-block: 1px solid var(--color-line);
}

.profile-detail .profile-grid--letters .profile-card--plain {
  gap: var(--space-4);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  box-shadow: none;
}

.profile-detail .profile-grid--letters .profile-card--plain + .profile-card--plain {
  border-inline-start: 1px solid var(--color-line);
}

.profile-detail .profile-card--plain .profile-card__code {
  color: var(--profile-middle);
  font-size: 1.5rem;
}

.profile-detail .identity-switcher {
  gap: 0;
  border-block-end: 1px solid var(--color-line);
}

.profile-detail .identity-switcher a {
  border: 0;
  border-block-end: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  padding: 0.75rem 1rem;
}

.profile-detail .identity-switcher a:first-child {
  padding-inline-start: 0;
}

.profile-detail .identity-switcher a:hover,
.profile-detail .identity-switcher a:focus-visible,
.profile-detail .identity-switcher a[aria-current="page"] {
  border-color: var(--profile-middle);
  background: transparent;
  color: var(--profile-deep);
}

.profile-detail .identity-comparison {
  gap: clamp(2rem, 4vw, 4rem);
}

.profile-detail .identity-card {
  border: 0;
  border-inline-start: 3px solid color-mix(in srgb, var(--profile-middle) 45%, var(--color-line));
  border-radius: 0;
  background: transparent;
  padding: 0.35rem 0 0.35rem clamp(1.25rem, 2.5vw, 2rem);
  box-shadow: none;
}

.profile-detail .identity-card--current {
  border-inline-start-color: var(--profile-middle);
  background: linear-gradient(90deg, color-mix(in srgb, var(--profile-soft) 75%, transparent), transparent 68%);
  box-shadow: none;
}

.profile-detail .profile-topic-grid,
.profile-detail .profile-topic-grid--three,
.profile-detail .profile-topic-grid--four {
  gap: clamp(1.5rem, 3vw, 3rem);
}

.profile-detail .profile-role-card {
  border: 0;
  border-block-start: 2px solid color-mix(in srgb, var(--profile-middle) 62%, var(--color-line));
  border-radius: 0;
  background: transparent;
  padding: 1.25rem 0 0;
  box-shadow: none;
}

.profile-detail .profile-role-card h3 {
  margin-block: 0.55rem 0.75rem;
  font-size: clamp(1.1rem, 1.4vw, 1.32rem);
}

.profile-detail .profile-role-card p,
.profile-detail .profile-prose__body p,
.profile-detail .profile-essay p {
  line-height: 1.9;
}

.profile-detail .profile-practice {
  border: 0;
  border-inline-start: 3px solid var(--profile-middle);
  border-radius: 0;
  background: color-mix(in srgb, var(--profile-soft) 55%, transparent);
  padding: clamp(1.15rem, 2.5vw, 1.8rem);
}

.profile-detail .profile-chapter > .grid {
  gap: clamp(2rem, 5vw, 5rem);
}

.profile-detail .profile-chapter > .grid > .content-card {
  border: 0;
  border-block-start: 0.22rem solid var(--profile-middle);
  border-radius: 0;
  background: transparent;
  padding: clamp(1.25rem, 2vw, 1.75rem) 0 0;
  box-shadow: none;
}

.profile-detail .profile-chapter > .grid > .content-card--warm {
  border-block-start-color: var(--color-accent);
}

.profile-detail .profile-prose--accent,
.profile-detail .panel--feature {
  margin-inline: clamp(-2rem, -3vw, -3rem);
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--profile-soft) 92%, #fffdf9), color-mix(in srgb, var(--profile-soft) 48%, #fffdf9));
  padding: clamp(2.25rem, 4vw, 4rem) clamp(2rem, 3vw, 3rem);
  box-shadow: none;
}

.profile-detail .action-steps {
  gap: clamp(1.5rem, 3vw, 3rem);
}

.profile-detail .action-steps li {
  min-height: 0;
  border: 0;
  border-block-start: 1px solid color-mix(in srgb, var(--profile-middle) 35%, var(--color-line));
  border-radius: 0;
  background: transparent;
  padding: 3.2rem 0 0;
}

.profile-detail .action-steps li::before {
  inset-inline-start: 0;
}

.profile-detail .profile-faq {
  gap: 0;
  border-block-start: 1px solid var(--color-line);
}

.profile-detail .profile-faq details {
  border: 0;
  border-block-end: 1px solid var(--color-line);
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.profile-detail .profile-faq details[open] summary {
  border-block-end: 0;
}

.profile-detail .profile-faq summary {
  padding-block: 1.35rem;
  font-size: 1.04rem;
}

.profile-detail .profile-faq p {
  max-width: 50rem;
  padding: 0 0 1.5rem;
  line-height: 1.85;
}

.profile-detail > .notice {
  margin-block: clamp(3rem, 5vw, 5rem);
  border: 0;
  border-inline-start: 3px solid var(--profile-middle);
  border-radius: 0;
  background: color-mix(in srgb, var(--profile-soft) 52%, transparent);
  padding: clamp(1.25rem, 2vw, 1.75rem);
}

.profile-detail > section:last-child {
  padding-block-end: clamp(2rem, 5vw, 5rem);
}

.profile-detail .profile-grid--gallery {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.2rem, 2vw, 2rem);
  border-block-start: 1px solid var(--color-line);
  padding-block-start: var(--space-5);
}

.profile-detail .profile-grid--gallery .profile-card {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.profile-detail .profile-grid--gallery .profile-card__visual {
  border-radius: 0;
  background-color: color-mix(in srgb, var(--profile-soft) 48%, #fbfaf7);
}

@media (min-width: 64rem) {
  .profile-detail .profile-reading-layout {
    grid-template-columns: minmax(13.5rem, 15rem) minmax(0, 1fr);
  }

  .profile-detail .profile-reading-layout > .profile-chapter-nav {
    display: grid;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
    backdrop-filter: none;
  }
}

@media (max-width: 63.999rem) {
  .profile-page-shell {
    width: min(100% - 2rem, var(--page-width));
  }

  .profile-detail .profile-reading-layout {
    padding-block-start: var(--space-8);
  }

  .profile-detail .profile-chapter-nav__title {
    display: none;
  }

  .profile-detail .profile-chapter-nav {
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    display: flex;
    overflow-x: auto;
    border: 0;
    border-block: 1px solid var(--color-line);
    border-radius: 0;
    background: rgb(255 253 249 / 94%);
    padding: var(--space-2) 0;
    box-shadow: none;
    backdrop-filter: blur(12px);
  }

  .profile-detail .profile-chapter-nav a {
    border: 0;
    padding: 0.55rem 0.72rem;
  }
}

@media (max-width: 48rem) {
  .profile-detail .profile-hero--personality {
    min-height: 42rem;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--profile-soft) 88%, #fffdf9), color-mix(in srgb, var(--profile-middle) 14%, #f8f6f2));
  }

  .profile-detail .profile-hero--personality .character-card__copy {
    position: relative;
    inset: auto;
    z-index: 3;
    width: auto;
    margin: 0;
    padding: 2.2rem 1.4rem 0;
  }

  .profile-detail .profile-hero--personality .character-card__copy h1 {
    font-size: clamp(2.8rem, 12vw, 4rem);
  }

  .profile-detail .profile-hero--personality > .type-avatar.character-card__art {
    inset-block: auto -2.5rem;
    inset-inline: 0;
    width: 100%;
    max-height: 63%;
    background-position: center bottom;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
    transform: none;
  }

  .profile-detail > .profile-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-detail > .profile-summary > div:first-child,
  .profile-detail > .profile-summary > div:last-child {
    padding-inline: clamp(0.8rem, 2vw, 1.5rem);
  }

  .profile-detail > .profile-summary > div:nth-child(2n + 1) {
    border-inline-start: 0;
  }

  .profile-detail > .profile-summary > div:nth-child(n + 3) {
    border-block-start: 1px solid var(--color-line);
  }

  .profile-detail .profile-grid--letters,
  .profile-detail .identity-comparison,
  .profile-detail .profile-topic-grid,
  .profile-detail .profile-topic-grid--three,
  .profile-detail .profile-topic-grid--four,
  .profile-detail .action-steps {
    grid-template-columns: 1fr;
  }

  .profile-detail .profile-grid--letters .profile-card--plain + .profile-card--plain {
    border-block-start: 1px solid var(--color-line);
    border-inline-start: 0;
  }

  .profile-detail .profile-prose--accent,
  .profile-detail .panel--feature {
    margin-inline: -0.4rem;
    padding-inline: 1.4rem;
  }

  .profile-detail .profile-practice {
    grid-template-columns: 1fr;
  }

  .profile-detail .profile-grid--gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 人格测试结果页：独立于旧 character-card 的开放式章节布局。 */
.personality-index-shell > .result--personality {
  width: min(100%, 84rem);
  padding-block: clamp(3.5rem, 6vw, 6rem);
}

.result-personality__heading {
  width: min(100%, 58rem);
  margin-block-end: clamp(2.5rem, 5vw, 4.5rem);
}

.result-personality__heading h2 {
  font-size: clamp(2.65rem, 4.6vw, 4.5rem);
  text-wrap: balance;
}

.result-personality__heading > p:last-child {
  max-width: 48rem;
  font-size: clamp(1rem, 1.25vw, 1.12rem);
}

.personality-result-hero {
  position: relative;
  isolation: isolate;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  background-color: color-mix(in srgb, var(--card-middle) 8%, #fffdf9);
  background-image:
    linear-gradient(
      90deg,
      rgb(255 253 249 / 98%) 0%,
      rgb(255 253 249 / 94%) 31%,
      rgb(255 253 249 / 76%) 46%,
      rgb(255 253 249 / 24%) 68%,
      transparent 82%
    ),
    var(--personality-hero-background);
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: cover;
}

.personality-result-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(24rem, 0.94fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
  width: min(calc(100% - clamp(3rem, 9vw, 9rem)), 92rem);
  min-height: clamp(32rem, 37vw, 39rem);
  margin-inline: auto;
}

.personality-result-hero__copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1rem;
  width: min(100%, 43rem);
  padding-block: clamp(3rem, 5vw, 5rem);
}

.personality-result-hero__meta {
  margin: 0;
  color: var(--card-middle);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.personality-result-hero__title {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1rem;
  align-items: center;
}

.personality-result-hero__title h3 {
  margin: 0;
  color: var(--card-deep);
  font-size: clamp(2.9rem, 4.7vw, 4.65rem);
  letter-spacing: -0.065em;
  line-height: 1.02;
  text-wrap: balance;
}

.personality-result-hero__title span {
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--card-middle) 30%, transparent);
  border-radius: var(--radius-pill);
  background: rgb(255 253 249 / 72%);
  color: var(--card-deep);
  padding: 0.42rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 820;
}

.personality-result-hero__summary {
  max-width: 39rem;
  margin: 0;
  color: color-mix(in srgb, var(--card-deep) 73%, #514a51);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.8;
}

.personality-result-hero .result-identity__tags {
  margin-block: 0.15rem 0.25rem;
}

.personality-result-hero__portrait {
  position: relative;
  z-index: 1;
  align-self: end;
  width: min(100%, 34rem);
  height: clamp(31rem, 37vw, 39rem);
  justify-self: center;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: var(--portrait-detail-sheet);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: none;
  filter: saturate(0.97) contrast(1.01);
  transform: translate(var(--portrait-shift-x, 0), var(--portrait-shift-y, 0)) rotate(var(--portrait-rotate, 0deg));
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 300ms ease;
}

.personality-result-hero.is-character-active .personality-result-hero__portrait {
  filter: saturate(1.04) contrast(1.02) drop-shadow(0 1.25rem 1.5rem color-mix(in srgb, var(--card-middle) 17%, transparent));
}

.personality-result-hero .result-score-stage {
  grid-template-columns: 7rem minmax(0, 1fr);
  width: min(100%, 34rem);
  margin-block-start: 0.5rem;
}

.personality-result-hero .result-score-ring {
  width: 7rem;
  background: transparent;
}

.personality-result-hero .result-score-ring::before {
  content: none;
}

.result-score-ring__graphic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  rotate: -90deg;
}

.result-score-ring__track,
.result-score-ring__value {
  fill: none;
  stroke-width: 7;
}

.result-score-ring__track {
  stroke: color-mix(in srgb, var(--card-middle) 14%, white);
}

.result-score-ring__value {
  stroke: var(--card-middle);
  stroke-linecap: round;
  filter: drop-shadow(0 0.2rem 0.3rem color-mix(in srgb, var(--card-middle) 22%, transparent));
}

.result-attributes__heading {
  display: block;
  max-width: 55rem;
  margin-block-end: clamp(2.25rem, 4.5vw, 4rem);
}

.result-attributes__heading h3 {
  margin-block: 0.45rem 0.75rem;
}

.result-attributes__heading p {
  max-width: 48rem;
}

.result-attributes__layout {
  grid-template-columns: minmax(19rem, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.personality-radar {
  display: grid;
  gap: 0.8rem;
  width: min(100%, 25rem);
  aspect-ratio: auto;
  margin: 0 auto;
}

.personality-radar__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.personality-radar__grid polygon {
  fill: none;
  stroke: color-mix(in srgb, var(--color-brand) 24%, var(--color-line));
  stroke-width: 0.65;
}

.personality-radar__axes line {
  stroke: color-mix(in srgb, var(--color-brand) 22%, var(--color-line));
  stroke-width: 0.55;
}

.personality-radar__area {
  fill: color-mix(in srgb, var(--color-brand) 34%, transparent);
  stroke: var(--color-brand-strong);
  stroke-linejoin: round;
  stroke-width: 1.25;
  filter: drop-shadow(0 0.35rem 0.5rem color-mix(in srgb, var(--color-brand) 16%, transparent));
}

.personality-radar__points circle {
  fill: var(--color-brand-strong);
  stroke: var(--color-surface);
  stroke-width: 1.2;
}

.personality-radar__labels text {
  fill: var(--color-ink);
  font-family: inherit;
  font-size: 5px;
  font-weight: 760;
}

.personality-radar__labels--compact {
  display: none;
}

.personality-radar figcaption {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.78rem;
  line-height: 1.6;
  text-align: center;
}

.result-dimension {
  gap: 0.7rem;
  padding-block: clamp(1.05rem, 2vw, 1.4rem);
}

.result-dimension__meter {
  display: block;
  width: 100%;
  height: 1rem;
  overflow: visible;
}

.result-dimension__meter-bg {
  stroke: color-mix(in srgb, var(--color-line) 70%, white);
  stroke-linecap: round;
  stroke-width: 8;
}

.result-dimension__meter-left {
  stroke: color-mix(in srgb, var(--color-teal) 82%, white);
  stroke-linecap: round;
  stroke-width: 8;
}

.result-dimension__meter-right {
  stroke: color-mix(in srgb, var(--color-brand) 74%, white);
  stroke-linecap: round;
  stroke-width: 8;
}

.result-dimension__meter-marker {
  stroke: var(--color-ink);
  stroke-linecap: round;
  stroke-width: 3;
  filter:
    drop-shadow(1px 0 0 var(--color-surface))
    drop-shadow(-1px 0 0 var(--color-surface));
}

.result-personality__actions {
  flex-wrap: wrap;
}

@media (max-width: 63.999rem) {
  .personality-result-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.78fr);
    width: min(calc(100% - 3rem), 74rem);
  }

  .personality-result-hero__portrait {
    height: 32rem;
  }

  .result-attributes__layout {
    grid-template-columns: 1fr;
  }

  .personality-radar {
    width: min(100%, 23rem);
  }
}

@media (max-width: 48rem) {
  .result-personality__heading {
    width: 100%;
    text-align: start;
  }

  .personality-result-hero {
    background-image:
      linear-gradient(
        105deg,
        rgb(255 253 249 / 97%) 0%,
        rgb(255 253 249 / 90%) 48%,
        rgb(255 253 249 / 60%) 100%
      ),
      var(--personality-hero-background);
    background-position: center, 62% center;
  }

  .personality-result-hero__inner {
    position: relative;
    display: block;
    width: min(calc(100% - 2rem), 36rem);
    min-height: 0;
  }

  .personality-result-hero__copy {
    gap: 0.85rem;
    width: 100%;
    padding-block: 1.75rem 2rem;
    text-shadow: 0 1px 8px rgb(255 253 249 / 80%);
  }

  .personality-result-hero__title h3 {
    font-size: clamp(2rem, 9vw, 3rem);
    line-height: 1.1;
  }

  .personality-result-hero__summary {
    font-size: 0.95rem;
    line-height: 1.75;
  }

  .personality-result-hero__portrait {
    position: absolute;
    inset: 0 -12% 0 auto;
    width: 76%;
    height: 100%;
    aspect-ratio: auto;
    background-position: center;
    background-size: contain;
    opacity: 0.24;
    pointer-events: none;
    transform: none;
  }

  .personality-result-hero .result-score-stage {
    grid-template-columns: 5.25rem minmax(0, 1fr);
    gap: 1rem;
  }

  .personality-result-hero .result-score-ring {
    width: 5.25rem;
  }

  .result-attributes {
    padding-block: 2.75rem;
  }

  .personality-radar {
    width: min(100%, 21rem);
  }

  .result-dimension__heading {
    align-items: end;
  }

  .result-dimension__labels {
    gap: 0.75rem;
  }

  .result-personality__actions {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .personality-result-hero__portrait {
    animation: none !important;
    scale: 1 !important;
    translate: 0 0 !important;
    transition: none;
  }
}

/* 星座本月运程：保持详情页的开放式排版，用分隔与留白代替卡片堆叠。 */
.page-tone--zodiac .zodiac-profile > .zodiac-monthly {
  position: relative;
  isolation: isolate;
  border-block-end-color: color-mix(in srgb, var(--profile-middle) 24%, var(--color-line));
}

.page-tone--zodiac .zodiac-profile > .zodiac-monthly::before {
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - 50vw);
  background:
    radial-gradient(circle at 8% 18%, color-mix(in srgb, var(--profile-middle) 10%, transparent) 0 0.35rem, transparent 0.4rem),
    radial-gradient(circle at 92% 78%, color-mix(in srgb, var(--profile-middle) 9%, transparent) 0 0.5rem, transparent 0.55rem),
    linear-gradient(115deg, color-mix(in srgb, var(--profile-soft) 72%, #fff), color-mix(in srgb, var(--profile-soft) 28%, #fff));
  content: "";
}

.zodiac-monthly__heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.zodiac-monthly__heading h2 {
  margin-block-end: 0;
  font-size: clamp(2.15rem, 4vw, 4.25rem);
  letter-spacing: -0.045em;
}

.zodiac-monthly__period {
  flex: 0 0 auto;
  border-block: 1px solid color-mix(in srgb, var(--profile-middle) 34%, var(--color-line));
  padding: 0.7rem 0;
  color: var(--profile-deep);
  font-size: var(--font-size-small);
  font-weight: 800;
  white-space: nowrap;
}

.zodiac-monthly__lead {
  display: grid;
  grid-template-columns: minmax(10rem, 0.42fr) minmax(0, 1.58fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  margin-block-start: clamp(2.5rem, 5vw, 4.5rem);
  border-block: 1px solid color-mix(in srgb, var(--profile-middle) 24%, var(--color-line));
  padding-block: clamp(2rem, 4vw, 3.25rem);
}

.zodiac-monthly__lead h3,
.zodiac-monthly__lead p,
.zodiac-monthly__topics dd,
.zodiac-monthly__advice p {
  margin: 0;
}

.zodiac-monthly__lead h3 {
  color: var(--profile-deep);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
}

.zodiac-monthly__lead p {
  color: var(--color-ink);
  font-size: clamp(1.08rem, 1.6vw, 1.3rem);
  line-height: 1.95;
}

.zodiac-monthly__topics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.zodiac-monthly__topics > div {
  min-width: 0;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 5vw, 4.5rem);
}

.zodiac-monthly__topics > div:nth-child(odd) {
  padding-inline-start: 0;
}

.zodiac-monthly__topics > div:nth-child(even) {
  border-inline-start: 1px solid color-mix(in srgb, var(--profile-middle) 20%, var(--color-line));
  padding-inline-end: 0;
}

.zodiac-monthly__topics > div:nth-child(n + 3) {
  border-block-start: 1px solid color-mix(in srgb, var(--profile-middle) 20%, var(--color-line));
}

.zodiac-monthly__topics dt {
  margin-block-end: 0.75rem;
  color: var(--profile-middle);
  font-size: var(--font-size-small);
  font-weight: 850;
  letter-spacing: 0.08em;
}

.zodiac-monthly__topics dd {
  color: var(--color-ink);
  line-height: 1.85;
}

.zodiac-monthly__advice {
  display: grid;
  grid-template-columns: minmax(10rem, 0.42fr) minmax(0, 1.58fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: baseline;
  border-block-start: 1px solid color-mix(in srgb, var(--profile-middle) 24%, var(--color-line));
  padding-block-start: clamp(2rem, 4vw, 3rem);
}

.zodiac-monthly__advice span {
  color: var(--profile-middle);
  font-size: var(--font-size-small);
  font-weight: 850;
}

.zodiac-monthly__advice p {
  color: var(--profile-deep);
  font-family: var(--font-family-display);
  font-size: clamp(1.5rem, 2.8vw, 2.35rem);
  font-weight: 750;
  line-height: 1.45;
  text-wrap: balance;
}

.zodiac-monthly__boundary {
  margin-block: clamp(1.75rem, 3vw, 2.5rem) 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

@media (max-width: 48rem) {
  .zodiac-monthly__heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }

  .zodiac-monthly__lead,
  .zodiac-monthly__advice,
  .zodiac-monthly__topics {
    grid-template-columns: 1fr;
  }

  .zodiac-monthly__lead,
  .zodiac-monthly__advice {
    gap: 1rem;
  }

  .zodiac-monthly__topics > div,
  .zodiac-monthly__topics > div:nth-child(odd),
  .zodiac-monthly__topics > div:nth-child(even) {
    border-block-start: 1px solid color-mix(in srgb, var(--profile-middle) 20%, var(--color-line));
    border-inline-start: 0;
    padding: 1.75rem 0;
  }

  .zodiac-monthly__topics > div:first-child {
    border-block-start: 0;
  }
}

.chart-summary {
  overflow: hidden;
  position: relative;
  border: 1px solid color-mix(in srgb, var(--color-brand) 22%, var(--color-line));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--color-brand) 20%, transparent), transparent 38%),
    linear-gradient(135deg, var(--color-surface), var(--color-brand-soft));
  padding: clamp(var(--space-5), 5vw, var(--space-7));
}

.chart-summary::after {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(60deg, transparent 45%, color-mix(in srgb, var(--color-brand) 10%, transparent) 46% 47%, transparent 48%),
    linear-gradient(-60deg, transparent 52%, color-mix(in srgb, var(--color-teal) 8%, transparent) 53% 54%, transparent 55%);
  background-size: 4.5rem 4.5rem;
  content: "";
  pointer-events: none;
}

.chart-summary > * {
  position: relative;
  z-index: 1;
}

.chart-summary h3 {
  font-size: clamp(1.8rem, 6vw, 3.25rem);
  letter-spacing: 0.12em;
}

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.pillar-card {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-5) var(--space-3);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.pillar-card__label,
.pillar-card__meta {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.pillar-card__name {
  color: var(--color-brand-strong);
  font-family: var(--font-family-display);
  font-size: clamp(2rem, 7vw, 3.4rem);
  line-height: 1;
  letter-spacing: 0.08em;
}

.element-meter {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.element-meter li {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.element-meter li strong {
  color: var(--color-ink);
}

.element-meter__track {
  grid-column: 1 / -1;
  overflow: hidden;
  height: 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-strong);
}

.element-meter__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--color-brand);
}

.element-meter__fill--wood { background: #5f936f; }
.element-meter__fill--fire { background: #d76a4c; }
.element-meter__fill--earth { background: #b88747; }
.element-meter__fill--metal { background: #81909a; }
.element-meter__fill--water { background: #4d83a6; }
.element-meter__fill--count-1 { width: 12.5%; }
.element-meter__fill--count-2 { width: 25%; }
.element-meter__fill--count-3 { width: 37.5%; }
.element-meter__fill--count-4 { width: 50%; }
.element-meter__fill--count-5 { width: 62.5%; }
.element-meter__fill--count-6 { width: 75%; }
.element-meter__fill--count-7 { width: 87.5%; }
.element-meter__fill--count-8 { width: 100%; }

.table-scroll {
  overflow-x: auto;
  border-block: 1px solid var(--color-line);
}

.data-table {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
  font-size: var(--font-size-small);
}

.data-table th,
.data-table td {
  padding: var(--space-3) var(--space-4);
  border-block-end: 1px solid var(--color-line);
  text-align: start;
  vertical-align: top;
}

.data-table th {
  background: var(--color-surface-soft);
  color: var(--color-muted);
  font-weight: 800;
  white-space: nowrap;
}

.data-table tr.is-current td {
  background: color-mix(in srgb, var(--color-brand-soft) 70%, var(--color-surface));
}

.section-band {
  border-block: 1px solid var(--color-line);
  padding-block: clamp(var(--space-5), 4vw, var(--space-7));
}

.section-band--soft {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-brand-soft) 52%, transparent), transparent 72%);
  padding-inline: clamp(var(--space-4), 4vw, var(--space-6));
}

.reading-copy {
  border-inline-start: 0.3rem solid var(--color-brand);
  background: var(--color-surface);
  padding: var(--space-5);
}

.reading-copy [data-bazi-ai-text] {
  line-height: 1.9;
  white-space: pre-wrap;
}

@media (max-width: 44rem) {
  .date-fields,
  .reference-columns {
    grid-template-columns: 1fr;
  }

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

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

@keyframes personality-float {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -0.38rem;
  }
}

@keyframes personality-greet {
  0%,
  100% {
    translate: 0 0;
  }

  42% {
    translate: 0 -0.55rem;
  }

  68% {
    translate: 0.12rem -0.16rem;
  }
}

.chat-hero {
  overflow: hidden;
  position: relative;
  border: 1px solid color-mix(in srgb, var(--color-brand) 22%, var(--color-line));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 88% 20%, rgb(255 255 255 / 76%) 0 7rem, transparent 7.1rem),
    radial-gradient(circle at 83% 26%, color-mix(in srgb, var(--color-brand) 18%, transparent), transparent 18rem),
    linear-gradient(135deg, var(--color-surface-warm), var(--color-brand-soft));
  padding: clamp(var(--space-6), 6vw, var(--space-12));
  box-shadow: var(--shadow-card);
}

.chat-hero h1 {
  margin-block-end: var(--space-3);
}

.chat-hero > p {
  max-width: 48rem;
  margin-block-end: 0;
  font-size: var(--font-size-lead);
}

.chat-ai-label {
  border: 1px solid color-mix(in srgb, var(--color-brand) 32%, var(--color-line));
  border-radius: var(--radius-pill);
  background: rgb(255 253 249 / 80%);
  padding: var(--space-2) var(--space-4);
  color: var(--color-brand-strong);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.chat-layout[hidden] {
  display: none;
}

.chat-layout {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  height: clamp(36rem, calc(100dvh - 15rem), 52rem);
  gap: 0;
  border-block: 1px solid var(--color-line);
  align-items: stretch;
}

.chat-sidebar,
.chat-room {
  min-width: 0;
  min-height: 0;
  padding: 0;
}

.chat-sidebar {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border-inline-end: 1px solid var(--color-line);
  background: color-mix(in srgb, var(--color-brand-soft) 28%, var(--color-canvas));
}

.chat-sidebar__header {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-3) var(--space-2);
}

.chat-sidebar [data-chat-new] {
  width: 100%;
}

.chat-sidebar__header p {
  margin: 0;
  padding-inline: calc(var(--space-3) + 1px);
  font-size: var(--font-size-small);
  font-weight: 700;
  line-height: 1.5;
}

.chat-thread-list {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  min-height: 0;
  margin: 0;
  padding: 0.4rem 0.75rem 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.chat-thread-list > .text-muted {
  padding: var(--space-3);
}

.chat-thread {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 0.4rem;
  border: 1px solid transparent;
  border-radius: 0.65rem;
  background: transparent;
  padding: var(--space-3);
  text-align: start;
  transition: background var(--transition), border-color var(--transition);
}

.chat-thread strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.92rem;
}

.chat-thread-list li { min-width: 0; }

.chat-thread:hover,
.chat-thread[aria-current="true"] {
  border-color: var(--color-line);
  background: var(--color-brand-soft);
}

.chat-thread span {
  color: var(--color-muted);
  font-size: 0.78rem;
}

.chat-room {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: var(--color-canvas);
}

.chat-toolbar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem 1rem;
  border-block-end: 1px solid var(--color-line);
  padding: 1.15rem clamp(1.25rem, 2.5vw, 2.5rem);
}

.chat-toolbar__title { min-width: 0; }
.chat-toolbar__actions { justify-self: end; flex-wrap: nowrap; gap: var(--space-2); }
.chat-toolbar__utilities { flex-wrap: nowrap; gap: var(--space-2); }
.chat-toolbar__actions .button { white-space: nowrap; }
.chat-toolbar__activity { min-width: 5rem; min-height: 1.4rem; text-align: center; }
.chat-run-status { color: var(--color-muted); font-size: 0.75rem; line-height: 1.6; white-space: nowrap; }

.chat-toolbar h2,
.chat-toolbar p {
  max-width: none;
  margin: 0;
}

.chat-toolbar h2 {
  font-size: 1.12rem;
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-toolbar p { font-size: 0.8rem; }

.chat-toolbar .button {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-small);
}

.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  overflow-anchor: none;
  background: var(--color-canvas);
  padding: 1.75rem clamp(1.25rem, 3vw, 3rem);
  scroll-behavior: auto;
}

.chat-empty {
  width: 100%;
  max-width: 36rem;
  margin: auto;
  color: var(--color-muted);
  text-align: center;
}

.chat-empty h3 { color: var(--color-ink); font-size: clamp(1.3rem, 2vw, 1.65rem); }
.chat-starters { justify-content: center; padding-block-start: var(--space-4); }
.chat-starters .button { min-height: 2.75rem; padding: 0.65rem 1rem; font-size: var(--font-size-small); }
.chat-empty .field-help { font-size: 0.8rem; }

.chat-pause-dialog .site-dialog__surface {
  max-height: calc(100dvh - 3rem);
  overflow-y: auto;
  background: var(--color-canvas);
  text-align: start;
}
.chat-pause-dialog::backdrop { background: rgb(39 57 46 / 30%); }
.chat-pause-dialog .site-dialog__surface > * + * { margin-block-start: var(--space-5); }
.chat-pause-dialog h2 { color: var(--color-brand-strong); }
.chat-pause-list { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.chat-pause-list li { border-inline-start: 2px solid var(--color-line-strong); padding-inline-start: var(--space-4); }
.chat-pause-list p { margin-block: var(--space-1) 0; }
.chat-pause-dialog .field-help { margin: 0; }

.chat-avatar {
  display: inline-block;
  flex: 0 0 auto;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: var(--color-surface-warm) url('../img/chat-avatar-v1.png') center / cover no-repeat;
}

.chat-empty .chat-avatar {
  display: block;
  width: 5rem;
  height: 5rem;
  margin-inline: auto;
}

.chat-avatar--user {
  background-image: url('../img/chat-user-avatar-v1.png');
  background-color: var(--color-canvas);
}

.chat-empty h3,
.chat-empty p {
  margin-block-end: 0;
}

.chat-message {
  --chat-avatar-size: 3.5rem;
  --chat-message-gap: 0.9rem;
  display: flex;
  align-items: flex-start;
  gap: var(--chat-message-gap);
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.chat-message--user {
  flex-direction: row-reverse;
}

.chat-message > .chat-avatar {
  width: var(--chat-avatar-size);
  height: var(--chat-avatar-size);
  border-radius: 0.65rem;
}

.chat-message__body {
  min-width: 0;
  width: fit-content;
  max-width: min(46rem, calc(100% - var(--chat-avatar-size) - var(--chat-message-gap)));
}

.chat-message__bubble {
  --chat-bubble-color: var(--color-surface);
  position: relative;
  min-height: var(--chat-avatar-size);
  border-radius: 0.65rem;
  background: var(--chat-bubble-color);
  padding: 0.8rem 1.05rem;
}

.chat-message__bubble::before {
  content: '';
  position: absolute;
  inset-block-start: 1.1rem;
  inset-inline-start: -0.3rem;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--chat-bubble-color);
  transform: rotate(45deg);
}

.chat-message--user .chat-message__bubble {
  --chat-bubble-color: var(--color-brand-soft);
}

.chat-message--user .chat-message__bubble::before {
  inset-inline-start: auto;
  inset-inline-end: -0.3rem;
}

.chat-message--notice .chat-message__body {
  margin-inline-start: calc(var(--chat-avatar-size) + var(--chat-message-gap));
}

.chat-message--notice .chat-message__bubble::before { display: none; }

.chat-message--crisis .chat-message__bubble {
  --chat-bubble-color: var(--color-danger-soft);
  border-inline-start: 3px solid var(--color-danger);
}

.chat-message__meta {
  margin-block-start: 0.35rem;
  padding-inline: 0.2rem;
  color: var(--color-muted);
  font-size: 0.73rem;
  line-height: 1.5;
}

.chat-message__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.55rem;
  margin-block-start: 0.4rem;
}
.chat-message--user .chat-message__actions { justify-content: flex-end; }
.chat-message__actions .chat-voice { margin-block-start: 0; min-width: 0; max-width: 100%; }
.chat-copy { display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%; }
.chat-copy__button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
}
.chat-copy__button:hover,
.chat-copy__button[data-state="copied"] { color: var(--color-brand); background: var(--color-brand-soft); }
.chat-copy__button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.chat-copy__icon { display: block; width: 20px; height: 20px; margin: 0; }
.chat-copy__icon [data-copy-mark="copied"],
.chat-copy__button[data-state="copied"] [data-copy-mark="copy"] { display: none; }
.chat-copy__button[data-state="copied"] [data-copy-mark="copied"] { display: inline; }
.chat-copy__feedback { color: var(--color-muted); font-size: 0.75rem; overflow-wrap: anywhere; }
@media (pointer: coarse) { .chat-copy__button { width: 2.75rem; height: 2.75rem; } }

.chat-timestamp {
  flex: 0 0 auto;
  align-self: center;
  margin-block: 0.25rem;
  color: var(--color-muted);
  font-size: 0.75rem;
  line-height: 1.5;
  white-space: nowrap;
}

.chat-voice-mode {
  white-space: nowrap;
  background: var(--color-brand-soft);
  border-color: var(--color-line);
  color: var(--color-brand);
}
.chat-voice-mode[aria-pressed="false"] [data-voice-on],
.chat-voice-mode[aria-pressed="true"] [data-voice-off] { display: none; }

/* Quiet voice bubbles share the chat palette; only the active clip animates. */
.speech-word[data-speaking="true"] { font-weight: 750; }

.chat-voice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.7rem;
  margin-block-start: 0.45rem;
}

.chat-voice__player {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 0.65rem;
  background: var(--color-brand-soft);
  color: var(--color-brand);
}

.chat-voice__button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.75rem;
  max-width: 100%;
  padding: 0.5rem 0.85rem;
  border: 0;
  border-radius: 0.65rem;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.83rem;
  cursor: pointer;
}

.chat-voice__player:has(.chat-voice__button:hover),
.chat-voice__player:has(.chat-voice__button[data-state="playing"]),
.chat-voice-mode[aria-pressed="true"] {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #fff;
}

.chat-voice__button:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
}

.chat-voice:has(.chat-voice__timeline:not([hidden])) { width: 22rem; max-width: 100%; }
.chat-voice__player:has(.chat-voice__timeline:not([hidden])) { width: 100%; }
.chat-voice__timeline { display: flex; align-items: center; gap: 0.4rem; flex: 1 1 0; min-width: 0; padding-inline-end: 0.75rem; }
.chat-voice__timeline .chat-voice__seek {
  display: block;
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  accent-color: currentColor;
  cursor: pointer;
}
.chat-voice__seek:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.chat-voice__remaining {
  flex: 0 0 auto;
  min-width: 3.5em;
  text-align: right;
  white-space: nowrap;
  color: inherit;
  font-size: 0.75rem;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.chat-voice__note { color: var(--color-muted); font-size: 0.76rem; }
.chat-voice__note:empty { display: none; }
.chat-voice__wave { display: inline-flex; align-items: center; gap: 3px; height: 1.1rem; }
.chat-voice__wave i { width: 3px; height: 5px; border-radius: 3px; background: currentColor; }
.chat-voice__wave i:nth-child(2) { height: 10px; }
.chat-voice__wave i:nth-child(3) { height: 16px; }
.chat-voice__button[data-state="playing"] .chat-voice__wave i { animation: chat-voice-wave 0.9s ease-in-out infinite alternate; }
.chat-voice__button[data-state="playing"] .chat-voice__wave i:nth-child(2) { animation-delay: -0.3s; }
.chat-voice__button[data-state="playing"] .chat-voice__wave i:nth-child(3) { animation-delay: -0.6s; }
.chat-voice__button[data-state="loading"] .chat-voice__wave { animation: chat-voice-wait 1.5s ease-in-out infinite; }
@keyframes chat-voice-wave { to { transform: scaleY(0.4); } }
@keyframes chat-voice-wait { 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) {
  .chat-voice__button[data-state] .chat-voice__wave,
  .chat-voice__button[data-state] .chat-voice__wave i { animation: none; }
}

.chat-message__meta strong {
  font-weight: 400;
  color: inherit;
}

.chat-message__bubble {
  font-size: 1.02rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.chat-message--user .chat-message__bubble { white-space: pre-wrap; }

.chat-message__bubble :where(p) {
  max-width: none;
  margin: 0;
  font: inherit;
  white-space: pre-wrap;
}

.chat-message__bubble :where(p, ul, ol, blockquote, pre, h3, h4, h5, h6, hr) {
  max-width: 100%;
  margin: 0;
}
.chat-message__bubble :where(p, ul, ol, blockquote, pre, h3, h4, h5, h6, hr) + :where(p, ul, ol, blockquote, pre, h3, h4, h5, h6, hr) { margin-block-start: 0.75em; }
.chat-message__bubble :where(ul, ol) { padding-inline-start: 1.4em; }
.chat-message__bubble ul { list-style: disc; }
.chat-message__bubble ol { list-style: decimal; }
.chat-message__bubble li { margin: 0; padding: 0; }
.chat-message__bubble li + li { margin-block-start: 0.45em; }
.chat-message__bubble li::marker { color: var(--color-brand); }
.chat-message__bubble :where(h3, h4, h5, h6) { font-size: 1.06em; line-height: 1.5; font-weight: 700; letter-spacing: normal; }
.chat-message__bubble strong { font-weight: 700; }
.chat-message__bubble blockquote { padding: 0.1em 0 0.1em 0.9em; border-inline-start: 3px solid var(--color-line-strong); color: var(--color-muted); }
.chat-message__bubble a { color: var(--color-brand); text-decoration: underline; text-underline-offset: 0.18em; }
.chat-message__bubble a:hover { text-decoration-thickness: 2px; }
.chat-message__bubble code { padding: 0.1em 0.25em; border-radius: 0.2em; background: var(--color-brand-soft); font-size: 0.9em; }
.chat-message__bubble pre { padding: 0.7em 0.85em; border-radius: 0.35rem; background: var(--color-brand-soft); white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-message__bubble pre code { padding: 0; background: none; }
.chat-message__bubble hr { border: 0; border-block-start: 1px solid var(--color-line); }
.chat-message__bubble .speech-word[data-speaking="true"] { background: var(--color-brand-soft); }

.chat-message--waiting .chat-message__bubble {
  color: var(--color-muted);
  font-size: 0.88rem;
}

.chat-typing-dots {
  display: inline-block;
  width: 1.3em;
  margin-inline-start: 0.2em;
  letter-spacing: 0.12em;
  animation: chat-typing-dots 1.8s steps(1, end) infinite;
}

@keyframes chat-typing-dots {
  0% { clip-path: inset(0 100% 0 0); }
  25% { clip-path: inset(0 66% 0 0); }
  50% { clip-path: inset(0 33% 0 0); }
  75%, 100% { clip-path: inset(0); }
}

@media (prefers-reduced-motion: reduce) {
  .chat-typing-dots { animation: none; }
}

.chat-composer {
  position: relative;
  min-width: 0;
  background: var(--color-canvas);
  padding: 0.75rem clamp(1.25rem, 2.5vw, 2.5rem) 1.25rem;
}

.chat-jump-latest {
  position: absolute;
  z-index: 1;
  inset-inline-end: clamp(1rem, 2.5vw, 2.5rem);
  inset-block-end: calc(100% + 0.5rem);
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  font-size: var(--font-size-small);
  box-shadow: 0 3px 12px rgb(51 62 57 / 10%);
}

.chat-composer__box {
  border: 1px solid var(--color-line-strong);
  border-radius: 1.25rem;
  background: var(--color-surface);
  padding: 0.8rem 1rem;
  box-shadow: 0 4px 20px rgb(87 60 69 / 5%);
}

.chat-composer__box:focus-within {
  border-color: var(--color-brand);
  outline: 2px solid var(--color-brand-soft);
}

.chat-composer textarea {
  display: block;
  field-sizing: content;
  min-height: 4rem;
  max-height: 9rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0.25rem 0.2rem 0.75rem;
  line-height: 1.7;
  resize: vertical;
  box-shadow: none;
}

.chat-composer textarea:focus-visible {
  outline: none;
}

.chat-composer__tools { gap: 0.5rem 1rem; }
.chat-composer__tools .button { min-height: 2.6rem; padding: 0.5rem 1.25rem; }
.chat-toolbar .status-message {
  grid-column: 1 / -1;
  margin: 0;
  border: 0;
  background: transparent;
  padding: 0.1rem 0.25rem;
  color: var(--color-muted);
  font-size: 0.85rem;
  line-height: 1.6;
}
.chat-toolbar .status-message[data-status="error"] { color: var(--color-danger); }

.chat-settings { position: relative; flex: 0 0 auto; }
.chat-settings > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
}
.chat-settings > summary::marker { content: ''; }
.chat-settings > summary::-webkit-details-marker { display: none; }
.chat-settings > summary::after {
  content: '';
  flex: 0 0 auto;
  width: 0.45rem;
  height: 0.45rem;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: translateY(-0.12rem) rotate(45deg);
}
.chat-settings[open] > summary::after { transform: translateY(0.12rem) rotate(225deg); }
.chat-settings__menu {
  position: absolute;
  z-index: 5;
  inset: calc(100% + 0.5rem) 0 auto auto;
  display: grid;
  width: 13rem;
  padding: 0.5rem;
  border: 1px solid var(--color-line);
  border-radius: 0.75rem;
  background: var(--color-surface);
  box-shadow: 0 10px 30px rgb(60 40 60 / 12%);
}
.chat-settings__menu .button { justify-content: flex-start; }
.chat-settings__menu [data-chat-delete] { color: var(--color-danger); }

.chat-composer .field-help {
  margin-block-end: 0;
}

@media (max-width: 68rem) {
  .chat-toolbar__title { grid-column: 1 / -1; }
  .chat-toolbar__actions { display: contents; }
  .chat-toolbar__activity { grid-column: 2; grid-row: 2; }
  .chat-toolbar__actions > .chat-voice-mode { grid-column: 1; grid-row: 2; justify-self: start; }
  .chat-toolbar__utilities { grid-column: 3; grid-row: 2; justify-self: end; }
}

@media (max-width: 52rem) {
  .chat-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    height: max(38rem, calc(100dvh - 8rem));
  }

  .chat-sidebar {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto;
    border-inline-end: 0;
    border-block-end: 1px solid var(--color-line);
  }

  .chat-sidebar__header { padding: var(--space-3); gap: 0; }
  .chat-sidebar__header p { display: none; }
  .chat-sidebar [data-chat-new] { padding-inline: 1rem; }

  .chat-thread-list {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    overflow-y: hidden;
    overflow-x: auto;
  }

  .chat-thread-list li {
    flex: 0 0 12rem;
  }

}

@media (max-width: 36rem) {
  .chat-toolbar {
    gap: 0.4rem;
    padding: 0.8rem;
  }

  .chat-toolbar__activity { min-width: 3.2rem; }
  .chat-toolbar__utilities { gap: 0.2rem; }
  .chat-toolbar .button { padding-inline: 0.3rem; font-size: 0.75rem; }
  .chat-messages { padding: 1.2rem 0.8rem; gap: 1.35rem; }
  .chat-message { --chat-avatar-size: 3rem; --chat-message-gap: 0.65rem; }
  .chat-message__bubble { padding: 0.65rem 0.8rem; }
  .chat-message__bubble { font-size: 1rem; }
  .chat-composer { padding: 0.65rem 0.5rem max(0.75rem, env(safe-area-inset-bottom)); }
  .chat-composer__box { padding: 0.65rem 0.75rem; border-radius: 1rem; }
  .chat-keyboard-hint { display: none; }
  .chat-composer .field-help { font-size: 0.75rem; }
}

@media (max-width: 24rem) {
  .chat-settings__label-prefix { display: none; }
}

/* 全站开放式视觉系统：宽屏、轻边界、独立人物层与纸张几何点缀。 */
body::before,
body::after {
  position: fixed;
  z-index: 0;
  content: "";
  pointer-events: none;
}

body::before {
  inset-block-start: 7rem;
  inset-inline-end: 1.5rem;
  width: 11rem;
  height: 9rem;
  background: radial-gradient(circle, rgb(113 80 113 / 18%) 0 1.6px, transparent 1.9px) 0 0 / 1.15rem 1.15rem;
  opacity: 0.72;
  -webkit-mask-image: linear-gradient(135deg, #000, transparent 78%);
  mask-image: linear-gradient(135deg, #000, transparent 78%);
}

body::after {
  inset-inline-start: -6rem;
  inset-block-end: 2rem;
  width: 24rem;
  height: 18rem;
  background:
    linear-gradient(142deg, rgb(224 198 179 / 22%), rgb(113 80 113 / 8%)),
    var(--color-surface);
  clip-path: polygon(0 34%, 61% 0, 100% 74%, 36% 100%);
  opacity: 0.55;
}

.site-header,
.page-main,
.site-footer {
  position: relative;
  z-index: 1;
}

.container {
  width: min(calc(100% - clamp(2rem, 5vw, 6rem)), var(--page-width));
}

.site-header {
  border-block-end-color: rgb(70 53 68 / 10%);
  background: rgb(255 255 255 / 94%);
  box-shadow: none;
}

.site-header > .container {
  min-height: 5.25rem;
  padding-block: var(--space-4);
}

.site-nav {
  gap: clamp(0.15rem, 1vw, 1rem);
}

.site-nav__link {
  position: relative;
  border-radius: 0;
  background: transparent;
  padding: 0.65rem 0.75rem;
}

.site-nav__link::after {
  position: absolute;
  inset-inline: 0.75rem;
  inset-block-end: 0.2rem;
  height: 2px;
  scale: 0 1;
  background: var(--color-brand);
  content: "";
  transform-origin: center;
  transition: scale var(--transition);
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  background: transparent;
}

.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after {
  scale: 1 1;
}

.page-main {
  padding-block: clamp(2.75rem, 5vw, 5.5rem) clamp(5rem, 8vw, 8rem);
}

.page-heading {
  max-width: 68rem;
}

.page-heading h1 {
  max-width: 14em;
  font-size: clamp(2.8rem, 5vw, 5rem);
  line-height: 1.08;
}

.section-heading {
  max-width: 62rem;
}

.section-heading h2 {
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  letter-spacing: -0.045em;
}

.page-main > .container.stack--large > * + * {
  margin-block-start: clamp(4rem, 7vw, 7rem);
}

.hero,
.personality-index-hero,
.chat-hero {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.hero {
  min-height: clamp(30rem, 42vw, 39rem);
  background:
    linear-gradient(122deg, rgb(255 255 255 / 94%) 0 50%, transparent 72%),
    linear-gradient(145deg, #f8f3ed, #eee8f2);
  padding: clamp(2.5rem, 6vw, 6rem);
}

.hero__content {
  max-width: 52rem;
}

.hero h1 {
  max-width: 12em;
  font-size: clamp(3rem, 5.2vw, 5.25rem);
  line-height: 1.08;
}

.page-main .grid {
  gap: clamp(2rem, 4vw, 4rem);
}

.page-main .card {
  overflow: visible;
  border: 0;
  border-block-start: 2px solid color-mix(in srgb, var(--color-brand) 42%, var(--color-line));
  border-radius: 0;
  background: transparent;
  padding: clamp(1.25rem, 2vw, 1.8rem) 0 0;
  box-shadow: none;
}

.page-main .card:hover {
  border-color: var(--color-brand);
  box-shadow: none;
  translate: 0 -2px;
}

.page-main .card__icon {
  border: 0;
  border-radius: 0.65rem;
  box-shadow: none;
}

.page-main .panel,
.page-main .quiz-shell,
.page-main .question,
.page-main .result {
  border-color: color-mix(in srgb, var(--color-line) 78%, #d5d0cd);
  border-radius: 0.65rem;
  box-shadow: none;
}

.tool-layout {
  gap: clamp(2.5rem, 5vw, 5rem);
}

.document-layout {
  gap: clamp(3rem, 6vw, 6rem);
}

.document-nav.panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.document-nav a {
  border-block-end: 1px solid var(--color-line);
  border-radius: 0;
  padding: 0.75rem 0;
}

.document-nav a:hover,
.document-nav a[aria-current="page"] {
  background: transparent;
  color: var(--color-brand-strong);
}

.document-content.panel {
  max-width: 64rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.site-footer {
  background: rgb(255 255 255 / 88%);
  padding-block: clamp(3rem, 6vw, 5.5rem);
}

.personality-index-hero {
  min-height: clamp(36rem, 48vw, 44rem);
  background:
    linear-gradient(112deg, #fff 0 44%, transparent 70%),
    linear-gradient(142deg, #faf6ef 0%, #eee8f4 58%, #e8f1ec 100%);
}

.personality-index-hero::before {
  inset: auto -5% -29% 36%;
  height: 78%;
  background:
    linear-gradient(135deg, transparent 0 34%, rgb(255 255 255 / 58%) 34.3% 55%, transparent 55.3%),
    linear-gradient(35deg, rgb(91 64 100 / 6%) 0 42%, transparent 42.4%);
}

.personality-index-hero__art::after {
  border: 0;
  background:
    radial-gradient(circle, rgb(113 80 113 / 16%) 0 1.5px, transparent 1.8px) 100% 0 / 1.2rem 1.2rem,
    linear-gradient(140deg, rgb(255 255 255 / 16%), transparent);
  clip-path: polygon(50% 0, 100% 25%, 86% 84%, 46% 100%, 0 71%, 9% 17%);
  backdrop-filter: none;
}

.personality-index-hero__caption {
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
}

.personality-group {
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--group-surface) 88%, #fff) 0 72%, #fff 100%);
  padding: clamp(2.25rem, 4vw, 4.25rem);
}

.personality-group::before {
  inset: auto -4% -22% 55%;
  height: 72%;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--group-ink) 8%, transparent) 0 43%, transparent 43.3%),
    linear-gradient(35deg, transparent 0 46%, rgb(255 255 255 / 64%) 46.3% 62%, transparent 62.3%);
  clip-path: polygon(16% 0, 100% 12%, 87% 100%, 0 77%);
}

.personality-group__heading {
  max-width: 58rem;
  margin-block-end: clamp(2rem, 4vw, 3.25rem);
}

.personality-group__grid {
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}

.personality-group .profile-card--personality {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--group-line) 65%, white);
  border-radius: 0.75rem;
  background: rgb(255 255 255 / 52%);
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.personality-group .profile-card--personality::before {
  position: absolute;
  z-index: -1;
  inset: 2% -18% auto 34%;
  height: 58%;
  background: color-mix(in srgb, var(--group-ink) 8%, transparent);
  clip-path: polygon(48% 0, 100% 32%, 80% 100%, 3% 72%, 0 22%);
  content: "";
}

.personality-group .profile-card--personality:hover {
  border-color: color-mix(in srgb, var(--group-ink) 38%, var(--group-line));
  box-shadow: none;
  translate: 0 -3px;
}

.profile-card--personality .type-avatar {
  aspect-ratio: 4 / 5;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: var(--portrait-detail-sheet, var(--portrait-sheet));
  background-position: center bottom;
  background-size: contain;
  box-shadow: none;
}

.personality-group .profile-card__body {
  min-height: 8.7rem;
  align-content: start;
  padding: 1rem 1rem 1.25rem;
  text-align: center;
}

.personality-group .profile-card__body strong {
  font-size: 1.08rem;
}

.character-card--intj { --card-deep: #3f2d55; --card-middle: #76588d; --card-soft: #f0e9f5; --card-glow: #d8bedf; }
.character-card--intp { --card-deep: #3d3760; --card-middle: #726a9b; --card-soft: #eeedf7; --card-glow: #d3cff0; }
.character-card--entj { --card-deep: #553046; --card-middle: #8b5774; --card-soft: #f5e9ef; --card-glow: #e3c2d1; }
.character-card--entp { --card-deep: #4c3564; --card-middle: #805f9e; --card-soft: #f1ebf7; --card-glow: #d9c6ea; }
.character-card--infj { --card-deep: #294e43; --card-middle: #56816e; --card-soft: #e9f3ed; --card-glow: #c7e0d2; }
.character-card--infp { --card-deep: #355a43; --card-middle: #6f946f; --card-soft: #edf5e9; --card-glow: #d1e5c8; }
.character-card--enfj { --card-deep: #245346; --card-middle: #4d8a72; --card-soft: #e7f3ed; --card-glow: #bfe0cf; }
.character-card--enfp { --card-deep: #416037; --card-middle: #7f9c62; --card-soft: #f0f5e9; --card-glow: #d7e4be; }
.character-card--istj { --card-deep: #2d4a5c; --card-middle: #587e95; --card-soft: #eaf2f6; --card-glow: #c9dfe8; }
.character-card--isfj { --card-deep: #315164; --card-middle: #6690a3; --card-soft: #eaf4f7; --card-glow: #cbe4e9; }
.character-card--estj { --card-deep: #28455d; --card-middle: #537a98; --card-soft: #e9f1f6; --card-glow: #c5dce8; }
.character-card--esfj { --card-deep: #315565; --card-middle: #65909b; --card-soft: #eaf4f4; --card-glow: #c9e3e2; }
.character-card--istp { --card-deep: #65431f; --card-middle: #a97835; --card-soft: #faf1df; --card-glow: #ecd6a8; }
.character-card--isfp { --card-deep: #674a28; --card-middle: #a9844e; --card-soft: #faf3e4; --card-glow: #ead9b8; }
.character-card--estp { --card-deep: #704221; --card-middle: #b17038; --card-soft: #fbefdf; --card-glow: #efcea2; }
.character-card--esfp { --card-deep: #743e2d; --card-middle: #b76c4d; --card-soft: #fbece4; --card-glow: #efc8b6; }

.profile-detail .profile-hero--personality {
  min-height: clamp(33rem, 38vw, 40rem);
  background:
    linear-gradient(108deg, color-mix(in srgb, var(--card-soft, var(--profile-soft)) 93%, #fff) 0 54%, transparent 76%),
    linear-gradient(152deg, #fff 0 48%, color-mix(in srgb, var(--card-middle) 16%, #f7f5f1) 48% 100%);
}

.profile-detail .profile-hero--personality::before {
  inset: auto -4% -20% 40%;
  width: 69%;
  height: 82%;
  background:
    linear-gradient(145deg, transparent 0 27%, color-mix(in srgb, var(--card-middle) 8%, transparent) 27.3% 55%, transparent 55.3%),
    linear-gradient(35deg, transparent 0 47%, rgb(255 255 255 / 58%) 47.3% 68%, transparent 68.3%);
}

.profile-detail .profile-hero--personality::after {
  display: block;
  z-index: 0;
  inset: 7% 2.5% auto auto;
  width: 9rem;
  height: 7rem;
  border: 0;
  border-radius: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--card-middle) 25%, transparent) 0 1.5px, transparent 1.8px) 0 0 / 1.1rem 1.1rem;
  padding: 0;
  content: "";
  backdrop-filter: none;
  -webkit-mask-image: linear-gradient(135deg, #000, transparent 80%);
  mask-image: linear-gradient(135deg, #000, transparent 80%);
}

.profile-detail .profile-hero--personality .character-card__copy .eyebrow,
.profile-detail .profile-hero--personality .result-identity__code,
.profile-detail .profile-identity-label {
  color: var(--card-middle);
}

.profile-detail .profile-hero--personality .character-card__copy h1 {
  color: var(--card-deep);
}

.profile-hero--zodiac {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.chart-summary,
.chat-hero {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.hero--split .character-wall {
  position: relative;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 0;
  min-height: 28rem;
}

.hero--split .character-wall figure,
.hero--split .character-wall .character-tile--large {
  grid-row: auto;
  align-self: end;
}

.hero--split .character-wall .type-avatar {
  aspect-ratio: 2 / 3;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: var(--portrait-detail-sheet, var(--portrait-sheet));
  background-position: center bottom;
  background-size: contain;
  box-shadow: none;
  transform:
    translate(var(--portrait-shift-x, 0), var(--portrait-shift-y, 0))
    rotate(var(--portrait-rotate, 0deg));
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 420ms ease;
}

.hero--split .character-wall figure:nth-child(2) {
  margin-inline: -18% -12%;
}

.hero--split .character-wall figcaption {
  position: static;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  backdrop-filter: none;
}

.character-wall figure.is-character-active .type-avatar,
.personality-index-hero__figure.is-character-active {
  filter: saturate(1.05) contrast(1.02) drop-shadow(0 1rem 1.2rem rgb(58 42 57 / 15%));
  animation: personality-greet 780ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.personality-group--analysts .profile-card--personality.is-character-active .type-avatar,
.profile-theme--analysts .profile-hero--personality.is-character-active > .type-avatar {
  animation: personality-consider 840ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.personality-group--diplomats .profile-card--personality.is-character-active .type-avatar,
.profile-theme--diplomats .profile-hero--personality.is-character-active > .type-avatar {
  animation: personality-welcome 880ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.personality-group--sentinels .profile-card--personality.is-character-active .type-avatar,
.profile-theme--sentinels .profile-hero--personality.is-character-active > .type-avatar {
  animation: personality-nod 760ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.personality-group--explorers .profile-card--personality.is-character-active .type-avatar,
.profile-theme--explorers .profile-hero--personality.is-character-active > .type-avatar {
  animation: personality-spring 720ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes personality-consider {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  48% { translate: 0 -0.35rem; rotate: -0.65deg; }
  72% { translate: -0.08rem -0.12rem; rotate: 0.22deg; }
}

@keyframes personality-welcome {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  42% { translate: 0.12rem -0.55rem; rotate: 0.75deg; }
  70% { translate: -0.08rem -0.2rem; rotate: -0.25deg; }
}

@keyframes personality-nod {
  0%, 100% { translate: 0 0; scale: 1; }
  45% { translate: 0 -0.3rem; scale: 1.012; }
  68% { translate: 0 0.06rem; scale: 0.998; }
}

@keyframes personality-spring {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  38% { translate: 0 -0.72rem; rotate: 1deg; }
  62% { translate: 0.12rem -0.18rem; rotate: -0.4deg; }
}

@media (min-width: 52rem) {
  .tool-layout {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 21rem);
  }

  .document-layout {
    grid-template-columns: minmax(13rem, 15rem) minmax(0, 64rem);
  }
}

@media (max-width: 64rem) {
  .container {
    width: min(100% - 2rem, var(--page-width));
  }

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

@media (max-width: 48rem) {
  body::before,
  body::after {
    display: none;
  }

  .page-main > .container.stack--large > * + * {
    margin-block-start: var(--space-12);
  }

  .hero,
  .personality-index-hero {
    min-height: auto;
  }

  .hero {
    padding: 2.2rem 1.4rem;
  }

  .hero h1,
  .page-heading h1 {
    font-size: clamp(2.55rem, 12vw, 3.8rem);
  }

  .hero--split .character-wall {
    min-height: 22rem;
  }

  .personality-group {
    padding: 1.5rem 1rem;
  }

  .personality-group__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .personality-group .profile-card__body {
    min-height: 7.8rem;
    padding: 0.8rem;
  }
}

/* 参考稿视觉校准：开放留白、完整人物、浅色几何层，不复制第三方页面或素材。 */
.site-header > .container {
  min-height: 4.75rem;
}

.site-header {
  position: sticky;
  inset-block-start: 0;
}

.page-main {
  padding-block-start: clamp(1.5rem, 3vw, 3rem);
}

.hero,
.personality-index-hero,
.profile-hero--personality,
.profile-hero--zodiac {
  border-radius: 0.75rem;
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(34rem, 42vw, 41rem);
  overflow: hidden;
  background:
    linear-gradient(112deg, #fff 0 45%, rgb(255 255 255 / 76%) 61%, transparent 72%),
    linear-gradient(148deg, #fffaf3 0%, #f4edf7 58%, #edf5f2 100%);
  padding: clamp(2.5rem, 5vw, 5.5rem);
}

.hero::before {
  position: absolute;
  z-index: -1;
  inset: auto -7% -35% 46%;
  height: 78%;
  background:
    linear-gradient(138deg, transparent 0 32%, rgb(255 255 255 / 66%) 32.3% 54%, transparent 54.3%),
    linear-gradient(34deg, color-mix(in srgb, var(--color-brand) 7%, transparent) 0 43%, transparent 43.3%);
  clip-path: polygon(13% 0, 100% 7%, 88% 100%, 0 76%);
  content: "";
}

.hero__content {
  position: relative;
  z-index: 4;
  max-width: 44rem;
}

.hero h1 {
  max-width: 10.5em;
  font-size: clamp(3rem, 4.7vw, 4.65rem);
  letter-spacing: -0.06em;
}

.hero__copy {
  max-width: 38rem;
  line-height: 1.85;
}

.hero--split .character-wall {
  position: relative;
  display: block;
  min-height: 33rem;
}

.hero--split .character-wall figure,
.hero--split .character-wall .character-tile--large {
  position: absolute;
  inset-block-end: -3%;
  width: 52%;
  height: 96%;
  margin: 0;
}

.hero--split .character-wall figure:nth-child(1) {
  z-index: 2;
  inset-inline-start: -7%;
  height: 104%;
}

.hero--split .character-wall figure:nth-child(2) {
  z-index: 3;
  inset-inline-start: 25%;
  height: 96%;
}

.hero--split .character-wall figure:nth-child(3) {
  z-index: 1;
  inset-inline-end: -8%;
  height: 94%;
}

.hero--split .character-wall .type-avatar {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  background-position: center bottom;
}

.hero--split .character-wall figcaption {
  position: absolute;
  inset: auto 0 0;
  opacity: 0;
  translate: 0 0.35rem;
  transition: opacity var(--transition), translate var(--transition);
}

.hero--split .character-wall figure:hover figcaption,
.hero--split .character-wall figure:focus-within figcaption {
  opacity: 1;
  translate: 0;
}

.personality-index-hero {
  display: block;
  min-height: 0;
  background: transparent;
  padding: clamp(2.5rem, 5vw, 4.5rem) 1rem clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
}

.personality-index-hero::before {
  display: none;
}

.personality-index-hero__copy {
  max-width: 54rem;
  margin-inline: auto;
  padding: 0;
}

.personality-index-hero__copy h1 {
  max-width: none;
  font-size: clamp(2.75rem, 4.3vw, 4.25rem);
  letter-spacing: -0.055em;
}

.personality-index-hero__copy .hero__copy {
  max-width: 46rem;
  margin-inline: auto;
}

.personality-index-hero .button-row,
.personality-index-hero .meta-row {
  justify-content: center;
}

.personality-index-hero__figure {
  inset-block-end: -4%;
}

.personality-index-hero__figure--back {
  inset-inline-start: -1%;
  width: min(46%, 22rem);
}

.personality-index-hero__figure--front {
  inset-inline-start: 29%;
  width: min(53%, 25rem);
}

.personality-index-hero__figure--side {
  inset-inline-end: -7%;
  width: min(46%, 21rem);
}

.personality-index-hero__caption {
  display: none;
}

.personality-index-shell > * + * {
  margin-block-start: clamp(2.5rem, 4vw, 4rem) !important;
}

.personality-index-shell > .personality-index-hero + .personality-group-tabs {
  margin-block-start: 0 !important;
}

.personality-group-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(100%, 62rem);
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: 0.85rem;
  background: var(--color-surface);
}

.personality-group-tabs a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3.75rem;
  color: var(--color-ink);
  font-weight: 800;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}

.personality-group-tabs a + a {
  border-inline-start: 1px solid var(--color-line);
}

.personality-group-tabs a:hover {
  background: var(--color-surface-soft);
}

.personality-group-tabs__analysts span { color: #76588d; }
.personality-group-tabs__diplomats span { color: #56816e; }
.personality-group-tabs__sentinels span { color: #587e95; }
.personality-group-tabs__explorers span { color: #a97835; }

.personality-index-shell #personality-types > .section-heading {
  max-width: 52rem;
  margin-inline: auto;
}

.personality-index-shell .personality-groups {
  gap: clamp(2rem, 4vw, 3.5rem);
}

.personality-index-shell .personality-group {
  background: transparent;
  padding: 0;
}

.personality-index-shell .personality-group::before {
  display: none;
}

.personality-index-shell .personality-group__heading {
  display: grid;
  max-width: none;
  grid-template-columns: minmax(10rem, 0.28fr) minmax(0, 1fr);
  align-items: end;
  gap: 0.25rem clamp(1rem, 3vw, 2.5rem);
  margin-block-end: 1rem;
  border-block-end: 1px solid var(--group-line);
  padding-block-end: 0.85rem;
}

.personality-index-shell .personality-group__heading .eyebrow {
  grid-column: 1;
}

.personality-index-shell .personality-group__heading h3 {
  grid-column: 1;
  margin: 0;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
}

.personality-index-shell .personality-group__heading p:last-child {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  margin: 0;
}

.personality-index-shell .personality-group__grid {
  gap: clamp(0.75rem, 1.7vw, 1.25rem);
}

.personality-index-shell .personality-group .profile-card--personality {
  border-color: color-mix(in srgb, var(--group-line) 72%, white);
  border-radius: 0.9rem;
  background: color-mix(in srgb, var(--group-surface) 58%, white);
}

.personality-index-shell .profile-card--personality .type-avatar {
  aspect-ratio: 13 / 10;
  background-position: center bottom;
}

.personality-index-shell .personality-group .profile-card__body {
  min-height: 7rem;
  padding: 0.85rem 0.9rem 1rem;
}

.personality-index-shell .personality-group .profile-card__body strong {
  font-size: 1rem;
}

.tool-layout--single {
  grid-template-columns: minmax(0, 1fr);
}

.tool-layout--single > * {
  width: min(100%, 64rem);
  margin-inline: auto;
}

.profile-detail .profile-hero--personality {
  display: grid;
  min-height: clamp(34rem, 38vw, 39rem);
  grid-template-columns: minmax(0, 1.04fr) minmax(24rem, 0.86fr);
  align-items: stretch;
  overflow: hidden;
  padding: clamp(2.5rem, 5vw, 5rem);
}

.profile-detail .profile-hero--personality::before {
  inset: auto -3% -24% 40%;
  width: 68%;
  height: 88%;
  border-radius: 0;
}

.profile-detail .profile-hero--personality::after,
.profile-detail .profile-hero--personality.character-card::after {
  display: block;
  z-index: 0;
  inset: 8% 3% auto auto;
  width: 8rem;
  height: 6rem;
  border: 0;
  border-radius: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--card-middle) 22%, transparent) 0 1.4px, transparent 1.8px) 0 0 / 1.05rem 1.05rem;
  padding: 0;
  content: "";
  -webkit-mask-image: linear-gradient(135deg, #000, transparent 82%);
  mask-image: linear-gradient(135deg, #000, transparent 82%);
}

.profile-detail .profile-hero--personality.character-card::before {
  border: 0;
  border-radius: 0;
}

.profile-detail .profile-hero--personality > .type-avatar.character-card__art {
  position: absolute;
  z-index: 2;
  inset-block: 0;
  inset-inline: auto 1.5%;
  grid-column: auto;
  grid-row: auto;
  width: 49%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  background-position: center bottom;
  background-size: contain;
  filter: saturate(0.98) contrast(1.015) drop-shadow(0 1.25rem 1.15rem color-mix(in srgb, var(--card-deep) 15%, transparent));
  -webkit-mask-image: none;
  mask-image: none;
  transform: translate(var(--portrait-shift-x, 0), var(--portrait-shift-y, 0)) rotate(var(--portrait-rotate, 0deg));
}

.profile-detail .profile-hero--personality .character-card__copy {
  position: relative;
  z-index: 3;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  width: auto;
  max-width: 41rem;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.profile-detail .profile-hero--personality .result-identity__code {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
}

.profile-detail .profile-hero--personality .character-card__copy h1 {
  font-size: clamp(3.35rem, 5vw, 5.1rem);
  text-shadow: none;
}

.profile-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.profile-hero__tags span {
  border-radius: 0.35rem;
  background: var(--card-middle);
  color: white;
  padding: 0.38rem 0.72rem;
  font-size: 0.78rem;
  font-weight: 800;
}

.profile-detail .profile-hero--personality .profile-hero__meta span {
  border-radius: 0;
  background: transparent;
  padding-inline: 0;
  backdrop-filter: none;
}

.profile-detail > .profile-summary,
.zodiac-profile > .profile-summary {
  width: 100%;
  margin-block-start: 0;
  border: 0;
  border-block: 1px solid var(--color-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.profile-reading-layout > .profile-chapter-nav {
  border-inline-start: 2px solid color-mix(in srgb, var(--profile-middle) 34%, var(--color-line));
  border-radius: 0;
  background: transparent;
  padding: 0 0 0 1.15rem;
}

.profile-reading-layout > .profile-chapter-nav a {
  border-radius: 0;
  background: transparent;
}

.profile-detail :is(.content-card, .identity-card, .profile-role-card) {
  border: 0;
  border-block-start: 2px solid color-mix(in srgb, var(--profile-middle) 42%, var(--color-line));
  border-radius: 0;
  background: transparent;
  padding: 1.35rem 0 0;
  box-shadow: none;
}

.profile-detail .profile-practice {
  border: 0;
  border-inline-start: 0.3rem solid var(--profile-middle);
  border-radius: 0;
  background: color-mix(in srgb, var(--profile-soft) 68%, white);
  padding: clamp(1.25rem, 3vw, 2rem);
}

.profile-detail .action-steps li {
  border: 0;
  border-block-start: 2px solid color-mix(in srgb, var(--profile-middle) 42%, var(--color-line));
  border-radius: 0;
  background: transparent;
}

.profile-detail .profile-faq details {
  border: 0;
  border-block-end: 1px solid var(--color-line);
  border-radius: 0;
  background: transparent;
}

.profile-hero--zodiac {
  box-shadow: none;
}

@media (min-width: 64rem) {
  .profile-reading-layout {
    grid-template-columns: minmax(13.5rem, 15rem) minmax(0, 64rem);
    gap: clamp(3rem, 6vw, 6.5rem);
  }

  .profile-reading-layout > .profile-chapter-nav {
    background: transparent;
    padding: 0 0 0 1.15rem;
  }
}

@media (max-width: 48rem) {
  .site-header > .container {
    min-height: 0;
  }

  .personality-group-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .personality-group-tabs a:nth-child(3) {
    border-inline-start: 0;
  }

  .personality-group-tabs a:nth-child(n + 3) {
    border-block-start: 1px solid var(--color-line);
  }

  .personality-index-shell .personality-group__heading {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .personality-index-shell .personality-group__heading .eyebrow,
  .personality-index-shell .personality-group__heading h3,
  .personality-index-shell .personality-group__heading p:last-child {
    grid-column: 1;
    grid-row: auto;
  }

  .personality-index-shell .profile-card--personality .type-avatar {
    aspect-ratio: 1;
  }

  .hero--split .character-wall {
    min-height: 24rem;
  }

  .hero--split .character-wall figure,
  .hero--split .character-wall .character-tile--large {
    width: 56%;
    height: 96%;
  }

  .hero--split .character-wall figure:nth-child(1) {
    inset-inline-start: -10%;
  }

  .hero--split .character-wall figure:nth-child(2) {
    inset-inline-start: 24%;
  }

  .hero--split .character-wall figure:nth-child(3) {
    inset-inline-end: -12%;
  }

  .profile-detail .profile-hero--personality {
    min-height: auto;
    grid-template-columns: 1fr;
    padding: 2.2rem 1.35rem 0;
  }

  .profile-detail .profile-hero--personality .character-card__copy {
    grid-column: 1;
    grid-row: 1;
    padding-block-end: 0.5rem;
  }

  .profile-detail .profile-hero--personality > .type-avatar.character-card__art {
    position: relative;
    inset-block: auto;
    inset-inline: auto;
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    height: 29rem;
    min-height: 0;
    background-position: center bottom;
    transform: translate(var(--portrait-shift-x, 0), var(--portrait-shift-y, 0)) rotate(var(--portrait-rotate, 0deg));
  }

  .profile-detail .profile-hero--personality .character-card__copy h1 {
    font-size: clamp(3rem, 15vw, 4.2rem);
  }

  .profile-reading-layout > .profile-chapter-nav {
    border-inline-start: 0;
    border-block-end: 1px solid var(--color-line);
    padding: 0 0 0.75rem;
  }
}

@media (forced-colors: active) {
  .brand__mark,
  .tag,
  .button,
  .notice,
  .result,
  .choice-card:has(input:checked) {
    border: 1px solid CanvasText;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .type-avatar:not(.personality-result-hero__portrait),
  [data-personality-reveal],
  [data-profile-reveal],
  [data-personality-reveal] .profile-card,
  [data-personality-reveal] figure {
    animation: none !important;
    opacity: 1 !important;
    scale: 1 !important;
    translate: 0 0 !important;
    transition: none;
  }

  .element-card .element-avatar {
    animation: none !important;
    filter: none !important;
    scale: 1 !important;
    translate: 0 0 !important;
    rotate: 0deg !important;
    transition: none !important;
  }

  .element-card .element-avatar::before,
  .element-card .element-avatar::after {
    animation: none !important;
    opacity: 1 !important;
    scale: 1 !important;
    translate: 0 0 !important;
    rotate: 0deg !important;
    transition: none !important;
  }

  .element-card .element-air-gust {
    animation: none !important;
    opacity: 0 !important;
    translate: 0 0 !important;
    transition: none !important;
  }

}

/* 2026-09-04 视觉基准：开放留白、完整人物与轻量几何场景。 */
body {
  background:
    radial-gradient(circle at 8% 5%, rgb(245 225 207 / 22%), transparent 24rem),
    radial-gradient(circle at 94% 28%, rgb(226 216 235 / 24%), transparent 28rem),
    #fbfaf8;
}

.site-header {
  z-index: 100;
  border-block-end-color: rgb(77 58 76 / 10%);
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 1px 0 rgb(73 52 69 / 5%);
}

.site-header > .container {
  min-height: 4.6rem;
}

.site-nav__link {
  padding-inline: 0.9rem;
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  background: transparent;
  color: var(--color-brand-strong);
}

.page-main {
  padding-block-start: clamp(1.2rem, 2vw, 2rem);
}

.home-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(36rem, 43vw, 42rem);
  grid-template-columns: minmax(0, 0.92fr) minmax(27rem, 1.08fr);
  gap: 0;
  overflow: hidden;
  border: 0;
  border-radius: 1rem;
  background:
    linear-gradient(92deg, #fffdf9 0 42%, rgb(255 253 249 / 86%) 53%, transparent 69%),
    linear-gradient(145deg, #fff8ed 0%, #f3ecf7 58%, #edf5f1 100%);
  padding: clamp(2.5rem, 5vw, 5rem);
  box-shadow: none;
}

.home-hero::before {
  position: absolute;
  z-index: -1;
  inset: auto -8% -17% 26%;
  height: 56%;
  background:
    linear-gradient(145deg, transparent 0 21%, rgb(255 255 255 / 70%) 21.2% 36%, transparent 36.2%),
    linear-gradient(38deg, #8aa995 0 9%, #d4e1d5 9.2% 17%, transparent 17.2%),
    linear-gradient(145deg, transparent 0 54%, #c9b8d4 54.2% 67%, transparent 67.2%);
  clip-path: polygon(0 66%, 11% 45%, 20% 59%, 33% 24%, 46% 52%, 61% 14%, 71% 49%, 84% 28%, 100% 65%, 100% 100%, 0 100%);
  content: "";
  opacity: 0.72;
}

.home-hero::after {
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: 9rem;
  background: linear-gradient(180deg, transparent, rgb(255 253 249 / 92%));
  content: "";
}

.home-hero .hero__content {
  z-index: 3;
  align-self: center;
  max-width: 43rem;
}

.home-hero h1 {
  max-width: 9em;
  color: #20243b;
  font-size: clamp(3rem, 4.6vw, 4.65rem);
  letter-spacing: -0.065em;
  line-height: 1.12;
}

.home-hero .hero__copy {
  max-width: 35rem;
  color: #5f5b68;
  font-size: clamp(1.05rem, 1.4vw, 1.23rem);
  line-height: 1.9;
}

.home-hero .button {
  min-height: 3.25rem;
  padding-inline: 1.45rem;
}

.home-hero .character-wall--single {
  position: relative;
  z-index: 2;
  min-height: 32rem;
}

.home-hero .character-wall--single::before {
  position: absolute;
  z-index: -1;
  inset: 8% -8% 7% 6%;
  border: 1px solid rgb(255 255 255 / 58%);
  background:
    linear-gradient(145deg, rgb(125 91 141 / 12%) 0 28%, transparent 28.2% 51%, rgb(255 255 255 / 38%) 51.2% 67%, transparent 67.2%),
    linear-gradient(35deg, transparent 0 54%, rgb(91 123 105 / 10%) 54.2% 72%, transparent 72.2%);
  clip-path: polygon(44% 0, 91% 15%, 100% 62%, 72% 100%, 17% 92%, 0 48%);
  content: "";
}

.home-hero .character-wall--single::after {
  position: absolute;
  inset: 8% -1% auto auto;
  width: 8rem;
  height: 7rem;
  background: radial-gradient(circle, rgb(100 70 111 / 22%) 0 1.4px, transparent 1.8px) 0 0 / 1rem 1rem;
  content: "";
  mask-image: linear-gradient(135deg, #000, transparent 84%);
}

.home-hero .character-wall--single figure,
.home-hero .character-wall--single .character-tile--large,
.home-hero .character-wall--single figure:nth-child(1) {
  position: absolute;
  z-index: 2;
  inset: -2% 2% -6% auto;
  width: 82%;
  height: 108%;
  margin: 0;
}

.home-hero .character-wall--single .type-avatar {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: var(--portrait-detail-sheet);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 1.4rem 1.3rem rgb(65 44 65 / 17%));
  box-shadow: none;
}

.home-hero .character-wall--single figcaption {
  inset: auto 5% 6% auto;
  width: fit-content;
  border: 1px solid rgb(255 255 255 / 78%);
  border-radius: 999px;
  background: rgb(255 255 255 / 82%);
  color: var(--color-brand-strong);
  padding: 0.48rem 0.78rem;
  font-size: 0.76rem;
  font-weight: 800;
  opacity: 0;
  backdrop-filter: blur(12px);
}

.home-personality {
  padding-block: clamp(2rem, 4vw, 4rem);
}

.home-personality > .section-heading {
  max-width: 52rem;
}

.home-personality > .section-heading h2 {
  color: #24283e;
  font-size: clamp(2.15rem, 3.2vw, 3.25rem);
  letter-spacing: -0.045em;
}

.personality-family-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.personality-family {
  --family-ink: #60426f;
  --family-surface: #f3edf6;
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 18rem;
  grid-template-columns: minmax(0, 1fr) minmax(11rem, 0.82fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--family-ink) 16%, white);
  border-radius: 0.85rem;
  background:
    linear-gradient(120deg, rgb(255 255 255 / 84%), transparent 60%),
    var(--family-surface);
  color: var(--family-ink);
  text-decoration: none;
  transition: border-color var(--transition), translate var(--transition), box-shadow var(--transition);
}

.personality-family::before {
  position: absolute;
  z-index: -1;
  inset: auto -10% -36% 38%;
  height: 86%;
  background: linear-gradient(145deg, color-mix(in srgb, var(--family-ink) 8%, transparent) 0 48%, transparent 48.4%);
  clip-path: polygon(16% 0, 100% 16%, 83% 100%, 0 75%);
  content: "";
}

.personality-family:hover {
  border-color: color-mix(in srgb, var(--family-ink) 35%, white);
  box-shadow: 0 18px 42px color-mix(in srgb, var(--family-ink) 10%, transparent);
  translate: 0 -0.2rem;
}

.personality-family--diplomats {
  --family-ink: #3f7357;
  --family-surface: #edf7ef;
}

.personality-family--sentinels {
  --family-ink: #3f6f83;
  --family-surface: #edf7fa;
}

.personality-family--explorers {
  --family-ink: #936323;
  --family-surface: #fff7e8;
}

.personality-family__copy {
  z-index: 2;
  display: flex;
  align-self: center;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  padding: clamp(1.4rem, 3vw, 2.4rem);
}

.personality-family__copy small {
  font-weight: 800;
  letter-spacing: 0.08em;
}

.personality-family__copy strong {
  font-size: clamp(1.75rem, 3vw, 2.55rem);
  line-height: 1.05;
}

.personality-family__copy > span {
  max-width: 22rem;
  color: color-mix(in srgb, var(--family-ink) 72%, #4f4b54);
  line-height: 1.75;
}

.personality-family__copy b {
  margin-block-start: 0.35rem;
  font-size: 0.86rem;
}

.personality-family > .type-avatar {
  align-self: end;
  width: 118%;
  height: 108%;
  margin-inline-start: -18%;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: var(--portrait-detail-sheet);
  background-position: center bottom;
  background-size: contain;
  filter: drop-shadow(0 1rem 1rem color-mix(in srgb, var(--family-ink) 15%, transparent));
  box-shadow: none;
  transform: translate(var(--portrait-shift-x, 0), var(--portrait-shift-y, 0)) rotate(var(--portrait-rotate, 0deg));
}

.home-personality + section > .section-heading {
  max-width: 52rem;
}

.home-personality + section > .grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}

.home-personality + section .card {
  border: 0;
  border-block-start: 2px solid var(--color-line-strong);
  border-radius: 0;
  background: transparent;
  padding: 1.35rem 0 0;
  box-shadow: none;
}

.home-personality + section .card:hover {
  border-color: var(--color-brand);
  box-shadow: none;
}

.personality-index-shell {
  width: min(calc(100% - clamp(2rem, 5vw, 5rem)), 78rem);
}

.personality-index-shell > * + * {
  margin-block-start: clamp(2rem, 3vw, 3rem) !important;
}

.personality-index-hero {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: clamp(4rem, 7vw, 7rem) 0 clamp(1rem, 2vw, 2rem);
  box-shadow: none;
}

.personality-index-hero__copy {
  max-width: 49rem;
}

.personality-index-hero__copy h1 {
  color: #20243b;
  font-size: clamp(3rem, 5vw, 4.75rem);
  letter-spacing: -0.065em;
}

.personality-index-hero__copy .hero__copy {
  max-width: 43rem;
  color: #65616c;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
}

.personality-group-tabs {
  width: min(100%, 66rem);
  border: 0;
  border-radius: 0.7rem;
  background: transparent;
  gap: 0.7rem;
}

.personality-group-tabs a {
  min-height: 3.65rem;
  border: 1px solid var(--color-line) !important;
  border-radius: 0.65rem;
  background: #fff;
  box-shadow: 0 8px 20px rgb(61 47 61 / 5%);
}

.personality-group-tabs a:hover,
.personality-group-tabs a:focus-visible {
  border-color: currentColor !important;
  background: #fff;
  translate: 0 -0.1rem;
}

.personality-group-tabs__analysts { color: #6d4f7c !important; }
.personality-group-tabs__diplomats { color: #47775b !important; }
.personality-group-tabs__sentinels { color: #467387 !important; }
.personality-group-tabs__explorers { color: #986824 !important; }

.personality-index-shell #personality-types > .section-heading {
  margin: 0;
}

.personality-index-shell .personality-groups {
  gap: clamp(0.9rem, 2vw, 1.35rem);
}

.personality-index-shell .personality-group {
  scroll-margin-block-start: 6rem;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.personality-index-shell .personality-group::before {
  display: none;
}

.personality-index-shell .personality-group__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.1rem);
}

.personality-index-shell .personality-group .profile-card--personality {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--group-line) 70%, white);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--group-surface) 52%, white);
  padding: 0;
  box-shadow: 0 9px 24px color-mix(in srgb, var(--group-ink) 8%, transparent);
}

.personality-index-shell .personality-group .profile-card--personality:hover {
  border-color: color-mix(in srgb, var(--group-ink) 55%, white);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--group-ink) 13%, transparent);
  translate: 0 -0.25rem;
}

.personality-index-shell .profile-card--personality .type-avatar {
  aspect-ratio: 1.08 / 1;
  border: 0;
  border-block-end: 1px solid color-mix(in srgb, var(--group-line) 55%, white);
  border-radius: 0;
  background-color: var(--group-surface);
  background-image:
    var(--portrait-sheet),
    linear-gradient(145deg, transparent 0 55%, rgb(255 255 255 / 40%) 55.3% 70%, transparent 70.3%);
  background-position: var(--portrait-position), center;
  background-repeat: no-repeat;
  background-size: 200% 200%, 100% 100%;
  box-shadow: none;
}

.personality-index-shell .personality-group .profile-card__body {
  display: grid;
  min-height: 8.3rem;
  align-content: start;
  gap: 0.18rem;
  padding: 0.9rem 0.9rem 1rem;
  text-align: center;
}

.personality-index-shell .personality-group .profile-card__body strong {
  color: var(--group-ink);
  font-size: 1.06rem;
  letter-spacing: 0.035em;
}

.personality-index-shell .personality-group .profile-card__body b {
  color: color-mix(in srgb, var(--group-ink) 88%, #28252c);
  font-size: 0.92rem;
}

.personality-index-shell .personality-group .profile-card__body small {
  display: -webkit-box;
  margin-block-start: 0.35rem;
  overflow: hidden;
  color: var(--color-muted);
  font-size: 0.76rem;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.profile-page-shell {
  width: min(calc(100% - clamp(2rem, 4vw, 4rem)), 94rem);
}

.profile-detail .profile-hero--personality {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(35rem, 39vw, 40rem);
  grid-template-columns: minmax(0, 0.94fr) minmax(28rem, 1.06fr);
  align-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 1rem;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--profile-soft) 84%, #fffdf9) 0 44%, rgb(255 253 249 / 72%) 58%, transparent 71%),
    linear-gradient(145deg, #fffdf9 0 53%, color-mix(in srgb, var(--profile-middle) 18%, #f6f4f1) 53% 100%);
  padding: clamp(3rem, 5vw, 5rem);
  box-shadow: none;
}

.profile-detail .profile-hero--personality::before,
.profile-detail .profile-hero--personality.character-card::before {
  position: absolute;
  z-index: 0;
  inset: 4% -7% -19% 43%;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(145deg, transparent 0 22%, color-mix(in srgb, var(--profile-middle) 10%, transparent) 22.3% 42%, transparent 42.3%),
    linear-gradient(35deg, transparent 0 50%, rgb(255 255 255 / 48%) 50.3% 66%, transparent 66.3%),
    linear-gradient(145deg, color-mix(in srgb, var(--profile-middle) 7%, transparent), transparent 70%);
  clip-path: polygon(39% 0, 91% 14%, 100% 57%, 79% 100%, 18% 91%, 0 47%);
  content: "";
}

.profile-detail .profile-hero--personality::after,
.profile-detail .profile-hero--personality.character-card::after {
  position: absolute;
  z-index: 1;
  inset: 7% 3% auto auto;
  display: block;
  width: 8.5rem;
  height: 7rem;
  border: 0;
  border-radius: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--profile-middle) 27%, transparent) 0 1.4px, transparent 1.8px) 0 0 / 1rem 1rem;
  padding: 0;
  content: "";
  mask-image: linear-gradient(135deg, #000, transparent 84%);
}

.profile-detail .profile-hero--personality .character-card__copy {
  position: relative;
  z-index: 3;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  width: auto;
  max-width: 40rem;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.profile-detail .profile-hero--personality .character-card__copy > .eyebrow {
  color: var(--profile-middle);
}

.profile-detail .profile-hero--personality .character-card__copy h1 {
  max-width: 8em;
  color: #22263c;
  font-size: clamp(3.6rem, 5vw, 5.35rem);
  letter-spacing: -0.07em;
  line-height: 1.04;
  text-shadow: none;
}

.profile-detail .profile-hero--personality .result-identity__code {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--profile-deep);
  padding: 0;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  letter-spacing: 0.08em;
}

.profile-detail .profile-hero--personality .hero__copy {
  max-width: 34rem;
  color: color-mix(in srgb, var(--profile-deep) 66%, #4f4b54);
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.85;
}

.profile-detail .profile-hero--personality > .type-avatar.character-card__art {
  position: absolute;
  z-index: 2;
  inset-block: 0 -3%;
  inset-inline: auto 0;
  width: 53%;
  height: 103%;
  max-height: none;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: var(--portrait-detail-sheet);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  filter: saturate(0.98) contrast(1.015) drop-shadow(0 1.35rem 1.3rem color-mix(in srgb, var(--profile-deep) 17%, transparent));
  mask-image: none;
  box-shadow: none;
  transform: translate(var(--portrait-shift-x, 0), var(--portrait-shift-y, 0)) rotate(var(--portrait-rotate, 0deg));
}

.profile-detail .profile-hero__tags {
  gap: 0.5rem;
}

.profile-detail .profile-hero__tags span {
  border-radius: 0.3rem;
  background: var(--profile-middle);
  padding: 0.36rem 0.72rem;
  font-size: 0.76rem;
  letter-spacing: 0.03em;
}

.profile-detail .profile-hero__meta {
  gap: 0;
  padding-block-start: 0.5rem;
}

.profile-detail .profile-hero__meta span {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  backdrop-filter: none;
}

.profile-detail .profile-hero__meta span + span {
  margin-inline-start: 0.8rem;
  border-inline-start: 1px solid color-mix(in srgb, var(--profile-middle) 38%, transparent);
  padding-inline-start: 0.8rem;
}

.profile-detail > .profile-summary {
  z-index: 5;
  width: calc(100% - clamp(2rem, 5vw, 5rem));
  margin: -1.4rem auto 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 82%);
  border-radius: 0.8rem;
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 15px 36px rgb(54 38 54 / 10%);
  backdrop-filter: blur(14px);
}

.profile-detail > .profile-summary > div {
  padding: clamp(1rem, 2vw, 1.35rem);
}

.profile-detail > .profile-summary > div:first-child,
.profile-detail > .profile-summary > div:last-child {
  padding-inline: clamp(1rem, 2vw, 1.35rem);
}

.profile-detail .profile-reading-layout {
  gap: clamp(3rem, 5vw, 5.5rem);
  padding-block-start: clamp(4rem, 6vw, 6.5rem);
}

.profile-detail .profile-reading-content {
  max-width: 65rem;
}

.profile-detail .profile-chapter-nav__title {
  color: var(--profile-deep);
}

.profile-detail .profile-prose__heading h2,
.profile-detail .section-heading h2 {
  color: #262a40;
}

.personality-family.is-character-active > .type-avatar {
  animation: personality-greet 820ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  filter: saturate(1.04) contrast(1.02) drop-shadow(0 1.25rem 1.3rem color-mix(in srgb, var(--family-ink) 18%, transparent));
}

@media (max-width: 72rem) {
  .home-hero {
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.9fr);
    padding-inline: clamp(2rem, 4vw, 3.5rem);
  }

  .personality-family {
    grid-template-columns: minmax(0, 1fr) minmax(9rem, 0.72fr);
  }

  .home-personality + section > .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 63.999rem) {
  .profile-page-shell {
    width: min(100% - 2rem, var(--page-width));
  }

  .profile-detail .profile-reading-layout {
    padding-block-start: 3.5rem;
  }
}

@media (max-width: 48rem) {
  .home-hero {
    min-height: auto;
    grid-template-columns: 1fr;
    padding: 2.4rem 1.35rem 0;
  }

  .home-hero h1 {
    font-size: clamp(2.65rem, 12vw, 4rem);
  }

  .home-hero .hero__content {
    padding-block-end: 0.5rem;
  }

  .home-hero .character-wall--single {
    min-height: 29rem;
  }

  .home-hero .character-wall--single figure,
  .home-hero .character-wall--single .character-tile--large,
  .home-hero .character-wall--single figure:nth-child(1) {
    inset: 0 -7% -5% auto;
    width: 102%;
    height: 105%;
  }

  .home-hero .character-wall--single::before {
    inset: 5% -15% 4% 2%;
  }

  .personality-family-grid,
  .home-personality + section > .grid {
    grid-template-columns: 1fr;
  }

  .personality-family {
    min-height: 16rem;
    grid-template-columns: minmax(0, 1.2fr) minmax(9rem, 0.8fr);
  }

  .personality-family__copy {
    padding: 1.35rem;
  }

  .personality-index-shell {
    width: min(100% - 1.5rem, 78rem);
  }

  .personality-index-hero {
    padding-block: 3.2rem 0.5rem;
  }

  .personality-group-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .personality-group-tabs a:nth-child(3) {
    border-inline-start: 1px solid var(--color-line);
  }

  .personality-index-shell .personality-group__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .personality-index-shell .personality-group .profile-card__body {
    min-height: 8.8rem;
    padding-inline: 0.7rem;
  }

  .profile-detail .profile-hero--personality {
    min-height: auto;
    grid-template-columns: 1fr;
    padding: 2.5rem 1.35rem 0;
  }

  .profile-detail .profile-hero--personality .character-card__copy {
    grid-column: 1;
    grid-row: 1;
    padding-block-end: 0.5rem;
  }

  .profile-detail .profile-hero--personality .character-card__copy h1 {
    font-size: clamp(3rem, 15vw, 4.2rem);
  }

  .profile-detail .profile-hero--personality > .type-avatar.character-card__art {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    height: 31rem;
    background-position: center bottom;
  }

  .profile-detail > .profile-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: calc(100% - 1.2rem);
    margin-block-start: -0.6rem;
  }

  .profile-detail > .profile-summary > div:nth-child(2n + 1) {
    border-inline-start: 0;
  }

  .profile-detail > .profile-summary > div:nth-child(n + 3) {
    border-block-start: 1px solid var(--color-line);
  }
}

@media (max-width: 28rem) {
  .personality-family {
    min-height: 25rem;
    grid-template-columns: 1fr;
  }

  .personality-family > .type-avatar {
    position: absolute;
    inset: auto -10% -8% auto;
    width: 72%;
    height: 80%;
  }

  .personality-family__copy {
    align-self: start;
    padding-block-end: 12rem;
  }

  .personality-index-shell .personality-group__grid {
    grid-template-columns: 1fr;
  }

  .personality-index-shell .profile-card--personality .type-avatar {
    aspect-ratio: 1.35 / 1;
  }
}

/* 2026-09-04 开放式整站布局：以通栏分区、留白和分隔线替代卡片堆叠。 */
html,
body {
  overflow-x: clip;
}

body {
  background: #fff;
}

body::before,
body::after {
  display: none;
}

.site-header {
  background: #fff;
  box-shadow: none;
}

.site-header > .container {
  min-height: 4.85rem;
}

.button {
  min-height: 3.05rem;
  border-radius: var(--radius-pill);
  padding-inline: 1.45rem;
}

.button--secondary {
  background: transparent;
}

.page-main {
  padding-block: 0 clamp(5rem, 8vw, 8rem);
}

.page-main > .container.stack--large > * + * {
  margin-block-start: clamp(4.5rem, 8vw, 8rem);
}

.page-heading {
  max-width: 74rem;
  border-block-end: 1px solid var(--color-line);
  padding-block: clamp(4rem, 8vw, 7.5rem) clamp(2.5rem, 5vw, 4.5rem);
}

.page-heading > p:last-child {
  max-width: 58rem;
  color: var(--color-muted);
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  line-height: 1.9;
}

.section-heading h2 {
  color: #24283e;
}

.page-main .card,
.page-main .panel,
.page-main .content-card,
.page-main .profile-card,
.page-main .preference-pair-card,
.page-main .profile-role-card,
.page-main .identity-card,
.page-main .element-relation-card,
.page-main .pillar-card,
.page-main .result,
.page-main .quiz-shell {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.page-main .card,
.page-main .content-card,
.page-main .preference-pair-card,
.page-main .profile-role-card,
.page-main .identity-card,
.page-main .element-relation-card,
.page-main .pillar-card {
  overflow: visible;
  border: 0;
  border-block-start: 2px solid color-mix(in srgb, var(--color-brand) 32%, var(--color-line));
  padding: clamp(1.25rem, 2.5vw, 2rem) 0 0;
}

.page-main .card:hover,
.page-main .profile-card[href]:hover,
.page-main .personality-family:hover {
  border-color: currentColor;
  box-shadow: none;
  translate: 0;
}

.page-main .panel {
  border: 0;
  border-block-start: 1px solid var(--color-line);
  padding: clamp(2rem, 4vw, 3.5rem) 0 0;
}

.page-main form.panel,
.page-main .quiz-shell,
.page-main .result {
  border: 0;
  border-block: 1px solid var(--color-line);
  padding: clamp(2rem, 5vw, 4rem) 0;
}

.page-main .notice {
  border: 0;
  border-inline-start: 3px solid var(--color-accent);
  border-radius: 0;
  box-shadow: none;
}

.page-main .notice--info {
  border-inline-start-color: var(--color-info);
}

.page-main .notice--danger {
  border-inline-start-color: var(--color-danger);
}

.home-hero,
.hero,
.profile-hero {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.home-hero,
.hero {
  padding-inline: max(clamp(2rem, 5vw, 6rem), calc((100vw - var(--page-width)) / 2));
}

.home-hero {
  min-height: clamp(39rem, 48vw, 47rem);
  background:
    linear-gradient(94deg, #fff 0 43%, rgb(255 255 255 / 88%) 53%, transparent 69%),
    linear-gradient(145deg, #fbf7f1 0%, #eee7f2 57%, #e9f1ec 100%);
}

.home-hero h1 {
  font-size: clamp(3.3rem, 5.35vw, 5.55rem);
}

.home-hero .character-wall--single figure,
.home-hero .character-wall--single .character-tile--large,
.home-hero .character-wall--single figure:nth-child(1) {
  inset-block-end: -3%;
  width: min(88%, 39rem);
}

.home-personality {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: clamp(4rem, 7vw, 7rem) 0;
}

.home-personality > .section-heading {
  width: min(calc(100% - clamp(2rem, 10vw, 12rem)), 62rem);
  margin-inline: auto;
  padding-block-end: clamp(3rem, 5vw, 5rem);
}

.personality-family-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.personality-family {
  display: grid;
  min-height: clamp(23rem, 34vw, 31rem);
  grid-template-columns: minmax(0, 1fr) minmax(21rem, 0.85fr);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--family-surface);
  padding-inline: max(clamp(2rem, 5vw, 6rem), calc((100vw - var(--page-width)) / 2));
  box-shadow: none;
}

.personality-family::before {
  inset: -18% -5% -32% 42%;
  height: auto;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--family-ink) 8%, transparent) 0 42%, transparent 42.3%),
    linear-gradient(38deg, transparent 0 56%, rgb(255 255 255 / 38%) 56.3% 69%, transparent 69.3%);
  opacity: 0.9;
}

.personality-family__copy {
  grid-column: 1;
  grid-row: 1;
  max-width: 41rem;
  padding: clamp(3rem, 7vw, 6rem) 0;
}

.personality-family__copy strong {
  font-size: clamp(2.75rem, 5vw, 5.4rem);
  letter-spacing: -0.055em;
}

.personality-family__copy > span {
  max-width: 32rem;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
}

.personality-family > .type-avatar {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: min(112%, 39rem);
  height: 108%;
  margin: 0;
}

.personality-family:nth-child(even) .personality-family__copy {
  grid-column: 2;
  padding-inline-start: clamp(2rem, 5vw, 5rem);
}

.personality-family:nth-child(even) > .type-avatar {
  grid-column: 1;
}

.home-personality + section > .grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
}

.home-personality + section .card {
  border-block-start-width: 1px;
}

.personality-index-shell {
  width: min(calc(100% - clamp(2rem, 5vw, 6rem)), var(--page-width));
}

.personality-index-shell > * + * {
  margin-block-start: 0 !important;
}

.personality-index-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(27rem, 0.78fr);
  align-items: center;
  width: 100vw;
  min-height: clamp(35rem, 43vw, 42rem);
  margin-inline: calc(50% - 50vw);
  gap: clamp(3rem, 7vw, 8rem);
  padding: clamp(4rem, 8vw, 7rem) max(clamp(2rem, 5vw, 6rem), calc((100vw - var(--page-width)) / 2));
  background:
    radial-gradient(circle at 86% 18%, rgb(118 82 127 / 12%), transparent 25rem),
    linear-gradient(118deg, #fbf7f1 0%, #f2eaf4 58%, #edf3f0 100%);
  text-align: start;
}

.personality-index-hero::before {
  display: none;
}

.personality-index-hero__copy {
  align-items: flex-start;
  container-type: inline-size;
  width: 100%;
  min-width: 0;
  max-width: 44rem;
  padding: 0;
}

.personality-index-hero__copy h1 {
  max-width: none;
  white-space: nowrap;
  font-size: min(clamp(3.5rem, 6vw, 6.4rem), 14cqi);
  line-height: 1.02;
}

.personality-index-hero__copy .hero__copy {
  max-width: 39rem;
  font-size: clamp(1.04rem, 1.35vw, 1.2rem);
  line-height: 1.85;
}

.personality-start-list {
  --quick-route-accent: var(--page-tone-accent);

  width: 100%;
}

.personality-group-tabs {
  position: static;
  inset: auto;
  z-index: auto;
  display: flex;
  width: 100%;
  justify-content: center;
  gap: clamp(1.25rem, 4vw, 4rem);
  border-block: 1px solid var(--color-line);
  border-radius: 0;
  padding-block: 1.25rem;
}

.personality-group-tabs a,
.personality-group-tabs a + a {
  min-height: auto;
  border: 0 !important;
  border-radius: 0;
  background: transparent;
  padding: 0.45rem 0;
  box-shadow: none;
}

.personality-group-tabs a:hover,
.personality-group-tabs a:focus-visible {
  border-block-end: 2px solid currentColor !important;
  background: transparent;
  translate: 0;
}

.personality-index-shell #personality-types {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.personality-index-shell .personality-groups {
  gap: 0;
}

.personality-index-shell .personality-group {
  --group-bridge: var(--color-background);

  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: clamp(34rem, 48vw, 44rem);
  overflow: hidden;
  background: var(--group-bridge);
  padding: clamp(6.5rem, 10vw, 9rem) max(clamp(2rem, 5vw, 6rem), calc((100vw - var(--page-width)) / 2)) clamp(4.5rem, 7vw, 6rem);
}

.personality-index-shell .personality-group + .personality-group {
  margin-block-start: -1px;
}

.personality-index-shell .personality-group--analysts {
  --group-edge: polygon(0 5%, 18% 10%, 39% 6.5%, 61% 11%, 82% 7%, 100% 9%, 100% 100%, 0 100%);
  --group-edge-mobile: polygon(0 3%, 34% 6%, 70% 3.5%, 100% 5%, 100% 100%, 0 100%);
}

.personality-index-shell .personality-group--diplomats {
  --group-bridge: #f2ecf5;
  --group-edge: polygon(0 8%, 17% 12%, 35% 9%, 54% 5%, 74% 10%, 100% 6%, 100% 100%, 0 100%);
  --group-edge-mobile: polygon(0 5%, 28% 3%, 60% 6%, 100% 3.5%, 100% 100%, 0 100%);
}

.personality-index-shell .personality-group--sentinels {
  --group-bridge: #edf6ef;
  --group-edge: polygon(0 6%, 24% 9%, 46% 13%, 66% 8%, 85% 11%, 100% 7%, 100% 100%, 0 100%);
  --group-edge-mobile: polygon(0 3.5%, 30% 6%, 58% 4%, 82% 6%, 100% 3%, 100% 100%, 0 100%);
}

.personality-index-shell .personality-group--explorers {
  --group-bridge: #edf6f9;
  --group-edge: polygon(0 11%, 19% 7%, 38% 10%, 60% 6%, 79% 12%, 100% 8%, 100% 100%, 0 100%);
  --group-edge-mobile: polygon(0 6%, 25% 3.5%, 52% 5.5%, 77% 3%, 100% 5%, 100% 100%, 0 100%);
}

.personality-index-shell .personality-group::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  display: block;
  height: auto;
  background: var(--group-surface);
  clip-path: var(--group-edge);
  content: "";
}

.personality-index-shell .personality-group__heading {
  position: relative;
  display: block;
  max-width: 44rem;
  margin-block-end: clamp(2.5rem, 5vw, 4.5rem);
  padding: 0;
}

.personality-index-shell .personality-group__heading > * {
  grid-column: auto;
  width: auto;
}

.personality-index-shell .personality-group__heading h2 {
  margin-block: 0.25rem 0.65rem;
  color: var(--group-ink);
  font-size: clamp(3rem, 6vw, 5.6rem);
  letter-spacing: -0.065em;
}

.personality-index-shell .personality-group__heading > p:last-child {
  max-width: 38rem;
  color: color-mix(in srgb, var(--group-ink) 72%, #4c4a50);
  font-size: clamp(1rem, 1.25vw, 1.14rem);
  line-height: 1.8;
}

.personality-index-shell .personality-group__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3.5rem);
}

.personality-index-shell .personality-group .profile-card--personality {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.personality-index-shell .personality-group .profile-card--personality::before {
  display: none;
}

.personality-index-shell .profile-card--personality .type-avatar {
  aspect-ratio: 3 / 4;
  border: 0;
  background-color: transparent;
  background-image: var(--portrait-detail-sheet, var(--portrait-sheet));
  background-position: center bottom;
  background-size: contain;
  filter: drop-shadow(0 1.3rem 1.2rem color-mix(in srgb, var(--group-ink) 16%, transparent));
}

.personality-index-shell .personality-group .profile-card__body {
  min-height: 0;
  border-block-start: 0;
  padding: 1rem 0 0;
  text-align: start;
}

.personality-index-shell .personality-group .profile-card__body strong {
  font-size: 1.2rem;
}

.personality-index-shell .personality-group .profile-card__body b {
  font-size: 1rem;
}

.personality-index-shell .personality-group .profile-card__body small {
  -webkit-line-clamp: 3;
}

.personality-index-shell #understand-personality {
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
  gap: clamp(3rem, 6vw, 5.5rem);
  border-block: 0;
  padding: clamp(5rem, 8vw, 8rem) max(clamp(2rem, 5vw, 6rem), calc((100vw - var(--page-width)) / 2));
}

.personality-index-shell #understand-personality .profile-prose__heading {
  display: grid;
  grid-template-columns: minmax(12rem, 0.3fr) minmax(0, 1fr);
  column-gap: clamp(3rem, 7vw, 8rem);
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.personality-index-shell #understand-personality .profile-prose__heading > .eyebrow {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin-block-start: 0.65rem;
}

.personality-index-shell #understand-personality .profile-prose__heading h2,
.personality-index-shell #understand-personality .profile-prose__heading .profile-lede {
  grid-column: 2;
  max-width: none;
}

.personality-index-shell #understand-personality .profile-prose__heading h2 {
  margin: 0;
  font-size: clamp(3rem, 5.3vw, 5.5rem);
  line-height: 1.04;
}

.personality-index-shell #understand-personality .profile-prose__heading .profile-lede {
  width: min(100%, 72rem);
  margin-block: 1.4rem 0;
}

.personality-index-shell #understand-personality .preference-pair-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.personality-index-shell #understand-personality .preference-pair-card {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1.4rem, 2.8vw, 3rem);
  box-shadow: none;
}

.personality-index-shell #understand-personality .preference-pair-card:first-child {
  padding-inline-start: 0;
}

.personality-index-shell #understand-personality .preference-pair-card:last-child {
  padding-inline-end: 0;
}

.personality-index-shell #understand-personality .preference-pair-card + .preference-pair-card {
  border-inline-start: 1px solid var(--color-line);
}

.personality-index-shell #understand-personality .preference-pair-card h3 {
  margin-block: 0.75rem 1rem;
  line-height: 1.45;
}

.personality-index-shell #understand-personality .preference-pair-card p {
  line-height: 1.8;
}

.personality-index-shell #understand-personality .profile-prose__body {
  display: grid;
  grid-template-columns: minmax(14rem, 0.3fr) minmax(0, 1fr);
  column-gap: clamp(3rem, 7vw, 8rem);
  row-gap: 1rem;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  border-block-start: 1px solid var(--color-line);
  padding-block-start: clamp(2.5rem, 5vw, 4.5rem);
}

.personality-index-shell #understand-personality .profile-prose__body h3 {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin: 0;
}

.personality-index-shell #understand-personality .profile-prose__body p {
  grid-column: 2;
  width: min(100%, 72rem);
  margin: 0;
}

.profile-page-shell {
  width: min(calc(100% - clamp(2rem, 5vw, 6rem)), var(--page-width));
}

.profile-detail .profile-hero--personality {
  width: 100vw;
  min-height: clamp(38rem, 48vw, 47rem);
  margin-inline: calc(50% - 50vw);
  border-radius: 0;
  padding-inline: max(clamp(2rem, 5vw, 6rem), calc((100vw - var(--page-width)) / 2));
}

.profile-detail .profile-hero--personality .character-card__copy {
  max-width: 43rem;
}

.profile-detail .profile-hero--personality > .type-avatar.character-card__art {
  inset-inline-end: max(0rem, calc((100vw - var(--page-width)) / 2));
  width: min(49vw, 47rem);
}

.profile-detail > .profile-summary {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  border: 0;
  border-block: 1px solid var(--color-line);
  border-radius: 0;
  background: #fff;
  padding-inline: max(clamp(2rem, 5vw, 6rem), calc((100vw - var(--page-width)) / 2));
  box-shadow: none;
  backdrop-filter: none;
}

.profile-detail .profile-prose--accent,
.profile-detail .panel--feature {
  margin-inline: 0;
  border: 0;
  border-inline-start: 4px solid var(--profile-middle);
  background: color-mix(in srgb, var(--profile-soft) 66%, #fff);
  padding: clamp(2rem, 4vw, 4rem);
}

.profile-detail .profile-grid--gallery .profile-card,
.profile-grid--gallery .profile-card {
  border: 0;
  background: transparent;
}

.profile-detail .profile-grid--gallery .profile-card__visual,
.profile-grid--gallery .profile-card__visual {
  border-radius: 0;
}

.definition-list--cards > div {
  border: 0;
  border-block-start: 1px solid var(--color-line);
  border-radius: 0;
  background: transparent;
  padding-inline: 0;
  box-shadow: none;
}

.zodiac-avatar,
.element-avatar,
.profile-grid .zodiac-avatar,
.profile-grid .element-avatar,
.sign-card .zodiac-avatar {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

.element-relation-card h3 {
  border-radius: 0;
  background: transparent;
  padding: 0;
  backdrop-filter: none;
}

.page-main .metric li {
  border: 0;
  border-block-start: 1px solid var(--color-line);
  border-radius: 0;
  background: transparent;
}

.sign-card,
.choice-card {
  border: 0;
  border-block-end: 1px solid var(--color-line-strong);
  border-radius: 0;
  background: transparent;
}

.sign-card:hover,
.sign-card:has(input:checked),
.choice-card:has(input:checked) {
  border-color: var(--color-brand);
  background: color-mix(in srgb, var(--color-brand-soft) 45%, transparent);
}

.document-nav.panel,
.document-content.panel {
  border: 0;
  padding: 0;
}

.site-footer {
  border-block-start: 1px solid var(--color-line);
  background: #f8f7f5;
  box-shadow: none;
}

@media (max-width: 72rem) {
  .personality-family,
  .personality-family:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.82fr);
  }

  .personality-index-shell .personality-group__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .personality-index-shell #understand-personality .profile-prose__heading {
    grid-template-columns: 1fr;
    row-gap: 1rem;
  }

  .personality-index-shell #understand-personality .profile-prose__heading > .eyebrow,
  .personality-index-shell #understand-personality .profile-prose__heading h2,
  .personality-index-shell #understand-personality .profile-prose__heading .profile-lede {
    grid-column: 1;
    grid-row: auto;
  }

  .personality-index-shell #understand-personality .profile-prose__heading > .eyebrow,
  .personality-index-shell #understand-personality .profile-prose__heading .profile-lede {
    margin-block: 0;
  }

  .personality-index-shell #understand-personality .preference-pair-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .personality-index-shell #understand-personality .preference-pair-card:nth-child(3) {
    border-inline-start: 0;
  }

  .personality-index-shell #understand-personality .preference-pair-card:nth-child(n + 3) {
    border-block-start: 1px solid var(--color-line);
  }

  .personality-index-shell #understand-personality .preference-pair-card:nth-child(odd) {
    padding-inline-start: 0;
  }

  .personality-index-shell #understand-personality .preference-pair-card:nth-child(even) {
    padding-inline-end: 0;
  }
}

@media (max-width: 48rem) {
  .page-main > .container.stack--large > * + * {
    margin-block-start: 4rem;
  }

  .home-hero,
  .hero {
    padding-inline: 1.25rem;
  }

  .home-hero {
    min-height: auto;
    padding-block-start: 3rem;
  }

  .home-hero .character-wall--single {
    min-height: 31rem;
  }

  .home-personality > .section-heading {
    width: calc(100% - 2.5rem);
  }

  .personality-family,
  .personality-family:nth-child(even) {
    min-height: 37rem;
    grid-template-columns: 1fr;
    padding-inline: 1.25rem;
  }

  .personality-family__copy,
  .personality-family:nth-child(even) .personality-family__copy {
    z-index: 3;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    padding: 3rem 0 19rem;
  }

  .personality-family > .type-avatar,
  .personality-family:nth-child(even) > .type-avatar {
    position: absolute;
    inset: auto 0 -4% auto;
    width: 100%;
    height: 66%;
  }

  .home-personality + section > .grid {
    grid-template-columns: 1fr;
  }

  .personality-index-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 2.5rem;
    padding: 3.75rem 1.25rem;
  }

  .personality-group-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }

  .personality-group-tabs a,
  .personality-group-tabs a + a,
  .personality-group-tabs a:nth-child(3) {
    border: 0 !important;
    padding: 0.75rem;
    text-align: center;
  }

  .personality-index-shell .personality-group {
    min-height: 0;
    padding: 7rem 1.25rem 4.5rem;
  }

  .personality-index-shell .personality-group::before {
    clip-path: var(--group-edge-mobile);
  }

  .personality-index-shell .personality-group__heading h2 {
    font-size: clamp(3.3rem, 18vw, 5rem);
  }

  .personality-index-shell .personality-group__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1rem;
  }

  .personality-index-shell .profile-card--personality .type-avatar {
    aspect-ratio: 3 / 4;
  }

  .personality-index-shell #understand-personality {
    gap: 2.75rem;
    padding: 3.75rem 1.25rem;
  }

  .personality-index-shell #understand-personality .profile-prose__heading h2 {
    font-size: clamp(2.6rem, 13vw, 4.2rem);
  }

  .personality-index-shell #understand-personality .preference-pair-grid,
  .personality-index-shell #understand-personality .profile-prose__body {
    grid-template-columns: 1fr;
  }

  .personality-index-shell #understand-personality .preference-pair-card,
  .personality-index-shell #understand-personality .preference-pair-card:first-child,
  .personality-index-shell #understand-personality .preference-pair-card:last-child {
    border-inline-start: 0;
    padding: 1.5rem 0;
  }

  .personality-index-shell #understand-personality .preference-pair-card + .preference-pair-card {
    border-block-start: 1px solid var(--color-line);
  }

  .personality-index-shell #understand-personality .profile-prose__body {
    gap: 1rem;
  }

  .personality-index-shell #understand-personality .profile-prose__body h3,
  .personality-index-shell #understand-personality .profile-prose__body p {
    grid-column: 1;
    grid-row: auto;
  }

  .profile-detail .profile-hero--personality {
    width: 100vw;
    min-height: auto;
    padding: 2.75rem 1.25rem 0;
  }

  .profile-detail .profile-hero--personality > .type-avatar.character-card__art {
    width: 100%;
  }

  .profile-detail > .profile-summary {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: 0.6rem;
  }

  .profile-hero--zodiac {
    min-height: auto;
    grid-template-columns: 1fr;
    padding: 2.75rem 1.25rem;
  }

  .zodiac-profile > .profile-summary {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: 0.6rem;
  }

  .profile-detail .profile-prose--accent,
  .profile-detail .panel--feature {
    margin-inline: 0;
    padding: 1.5rem;
  }

}

/* 十二星座心意卡：沿用公共版心、表单、按钮和星座图层，仅为单张互动牌保留必要边界。 */
.water-draw-page {
  --draw-gold: #ad7c32;
  --draw-gold-light: #ead2a0;
  --draw-ink: #594739;
  --draw-width: 29rem;
}

.water-draw-hero {
  --hero-art-wash: #f1e9f8;
}

.water-draw-intro {
  display: grid;
  grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1fr);
  gap: clamp(2rem, 7vw, 8rem);
  align-items: end;
  padding-block: clamp(2rem, 4vw, 4rem);
  border-block: 1px solid var(--color-line);
}

.water-draw-intro h2 {
  max-width: 15ch;
  margin: 0.35rem 0 0;
  font-size: clamp(2rem, 4vw, 3.7rem);
  line-height: 1.12;
}

.water-draw-intro > p {
  max-width: 52rem;
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-lead);
}

.water-draw-stage {
  --draw-stage-top: 0.75rem;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(3rem, 6vw, 7rem);
  align-items: start;
  min-height: 0;
  padding-block: clamp(2.5rem, 4vw, 4rem);
  border-block-end: 1px solid var(--color-line);
  scroll-margin-block-start: 6rem;
}

.water-draw-stage__controls {
  width: 100%;
  max-width: 46rem;
  padding-block-start: var(--draw-stage-top);
}

.water-draw-stage__controls h2 {
  max-width: none;
  font-size: clamp(2rem, 3.2vw, 3.3rem);
  line-height: 1.2;
}

.water-draw-stage__controls > .stack--small > p:last-child {
  max-width: 40rem;
  color: var(--color-muted);
  font-size: var(--font-size-lead);
  line-height: 1.75;
}

.water-draw-form {
  display: grid;
  gap: 1.25rem;
  margin-block-start: clamp(2rem, 4vw, 3.25rem);
  padding-block: 1.6rem 0;
  border-block-start: 1px solid var(--color-line-strong);
}

.water-draw-form > .grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.water-draw-form .field-help {
  max-width: 39rem;
  margin: 0;
  line-height: 1.65;
}

.water-draw-submit {
  justify-self: start;
  min-width: 12rem;
}

.water-draw-table {
  position: relative;
  display: grid;
  width: min(100%, var(--draw-width));
  min-height: 0;
  justify-self: center;
  justify-items: center;
  align-content: start;
  padding-block: var(--draw-stage-top) 1rem;
  isolation: isolate;
}

.water-draw-table::before,
.water-draw-table::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.water-draw-table::before {
  inset: 0 -10% 8%;
  background: linear-gradient(140deg, rgb(238 223 230 / 28%), rgb(242 234 218 / 18%) 48%, rgb(221 234 231 / 28%));
  clip-path: polygon(25% 5%, 72% 1%, 95% 22%, 87% 77%, 63% 98%, 18% 88%, 3% 45%);
}

.water-draw-table::after {
  inset: -1% -15% 5%;
  background: url("../img/draw-stage-scene.svg") center / 100% 100% no-repeat;
}

.water-draw-card {
  width: min(100%, var(--draw-width));
  min-width: 0;
  perspective: 80rem;
  transform-style: preserve-3d;
}

.water-draw-card__inner {
  position: relative;
  display: grid;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 720ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.water-draw-card.is-revealed .water-draw-card__inner {
  transform: rotateY(180deg);
}

.water-draw-card.is-shuffling {
  animation: water-card-shuffle 580ms ease both;
}

.water-draw-card__face {
  position: relative;
  grid-area: 1 / 1;
  min-width: 0;
  backface-visibility: hidden;
}

.water-draw-card__back {
  display: grid;
  place-items: center;
  min-height: 42rem;
  color: var(--draw-ink);
}

.water-draw-card__back-design {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
}

.water-draw-card__back-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1.5rem 1.5rem rgb(120 76 50 / 12%));
}

.water-draw-card__back-label {
  position: absolute;
  inset: 80% 12% auto;
  display: grid;
  gap: 0.35rem;
  text-align: center;
}

.water-draw-card__back-label strong {
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  letter-spacing: 0.13em;
}

.water-draw-card__back-label small {
  color: #87694c;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
}

.water-draw-card__front {
  --draw-card-accent: #547f90;
  --draw-card-wash: #e9f2ef;
  display: grid;
  align-content: start;
  gap: 0.8rem;
  min-height: 42rem;
  padding: 3.5rem 3.5rem 4rem;
  border: 1px solid transparent;
  border-image-source: url("../img/draw-card-front-v2.png");
  border-image-slice: 300 fill;
  border-image-width: 6rem;
  border-image-repeat: stretch;
  border-radius: 1.35rem;
  box-shadow: 0 1.5rem 3rem rgb(112 77 51 / 14%);
  color: var(--draw-ink);
  background:
    radial-gradient(ellipse at 50% 18%, var(--draw-card-wash), transparent 45%),
    linear-gradient(145deg, #fffdf7, #fcf4e5);
  transform: rotateY(180deg);
}

.water-draw-card:is([data-sign="aries"], [data-sign="leo"], [data-sign="sagittarius"]) .water-draw-card__front {
  --draw-card-accent: #a85142;
  --draw-card-wash: #f8e4da;
}

.water-draw-card:is([data-sign="taurus"], [data-sign="virgo"], [data-sign="capricorn"]) .water-draw-card__front {
  --draw-card-accent: #806c3f;
  --draw-card-wash: #ecebd5;
}

.water-draw-card:is([data-sign="gemini"], [data-sign="libra"], [data-sign="aquarius"]) .water-draw-card__front {
  --draw-card-accent: #665c8d;
  --draw-card-wash: #eee5f4;
}

.water-draw-card:is([data-sign="cancer"], [data-sign="scorpio"], [data-sign="pisces"]) .water-draw-card__front {
  --draw-card-accent: #497b86;
  --draw-card-wash: #dfefec;
}

.water-draw-card__topline,
.water-draw-card__front > * {
  position: relative;
  z-index: 1;
}

.water-draw-card__topline {
  color: #876b42;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.water-draw-card__topline > :last-child {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--draw-gold-light);
  border-radius: 50%;
  color: var(--draw-card-accent);
  background: #fffbf1;
  font-size: 1.1rem;
}

.water-draw-card__illustration {
  display: grid;
  place-items: center;
  width: 12rem;
  max-width: 100%;
  aspect-ratio: 1;
  justify-self: center;
  margin: -1rem 0 -0.5rem;
}

.water-draw-card__avatar {
  width: 100%;
  margin: 0;
  filter: drop-shadow(0 0.65rem 0.5rem rgb(112 77 51 / 12%));
}

.water-draw-card__front .eyebrow {
  margin: 0;
  color: var(--draw-card-accent);
  text-align: center;
}

.water-draw-card__front h2 {
  max-width: none;
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.35;
  text-align: center;
}

.water-draw-card__message {
  margin: 0;
  color: #67574b;
  font-size: 0.97rem;
  line-height: 1.7;
}

.water-draw-card__prompt {
  padding-block-start: 0.85rem;
  border-block-start: 1px solid var(--draw-gold-light);
}

.water-draw-card__prompt strong,
.water-draw-card__action strong {
  color: var(--draw-card-accent);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.water-draw-card__prompt p,
.water-draw-card__action {
  margin: 0.3rem 0 0;
  font-size: 0.9rem;
  line-height: 1.62;
}

.water-draw-hint {
  width: min(100%, var(--draw-width));
  min-height: 1.75rem;
  margin: 1.2rem 0 0;
  color: var(--color-muted);
  line-height: 1.5;
  text-align: center;
}

.water-draw-result-links {
  display: grid;
  width: min(100%, var(--draw-width));
  grid-template-columns: minmax(0, 1.35fr) minmax(7.5rem, 0.65fr);
  gap: 0.65rem;
  margin: 0.85rem auto 0;
}

.water-draw-result-links[hidden] {
  display: none;
}

.water-draw-result-links .button {
  width: 100%;
  min-height: 3.15rem;
  gap: 0.45rem;
  padding-inline: 1rem;
  font-size: 0.92rem;
}

.water-draw-result-links .button:last-child {
  box-shadow: 0 0.7rem 1.5rem color-mix(in srgb, var(--page-tone-accent) 22%, transparent);
}

.water-draw-notes {
  padding-block: clamp(3rem, 7vw, 7rem);
  border-block-start: 1px solid var(--color-line);
}

.water-draw-invite {
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.5rem, 5vw, 5rem);
  background: linear-gradient(115deg, #e1f0ee, #f6f1e8 72%);
}

.water-draw-invite > .element-avatar {
  width: 100%;
}

.water-draw-invite h2 {
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: 1.1;
}

.water-draw-notes__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-block-start: clamp(2rem, 4vw, 4rem);
}

.water-draw-notes__list > div {
  padding: 0 clamp(1.5rem, 3vw, 3rem);
  border-inline-start: 1px solid var(--color-line);
}

.water-draw-notes__list > div:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.water-draw-notes__list p {
  margin: 0.6rem 0 0;
  color: var(--color-muted);
}

@keyframes water-card-shuffle {
  0% { transform: perspective(80rem) translateX(0) rotate(0); }
  28% { transform: perspective(80rem) translateX(-1.7rem) rotate(-4deg); }
  58% { transform: perspective(80rem) translateX(1.5rem) rotate(3deg); }
  100% { transform: perspective(80rem) translateX(0) rotate(0); }
}

@media (max-width: 64rem) {
  .water-draw-stage {
    --draw-stage-top: 1rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
  }

  .water-draw-stage__controls {
    padding-block-start: 1rem;
  }

}

@media (max-width: 48rem) {
  .water-draw-intro,
  .water-draw-stage,
  .water-draw-invite {
    grid-template-columns: 1fr;
  }

  .water-draw-invite > .element-avatar {
    width: min(13rem, 48vw);
  }

  .water-draw-intro {
    gap: 1.25rem;
  }

  .water-draw-stage {
    --draw-stage-top: 0;
    gap: 2.5rem;
    min-height: 0;
    padding-block: 3rem;
    border-block-start: 1px solid var(--color-line);
    scroll-margin-block-start: 12rem;
  }

  .water-draw-stage__controls {
    max-width: none;
    padding-block-start: 0;
  }

  .water-draw-stage__controls h2 {
    font-size: clamp(2rem, 7vw, 2.75rem);
  }

  .water-draw-form > .grid {
    grid-template-columns: 1fr;
  }

  .water-draw-table {
    width: min(100%, var(--draw-width));
    min-height: 0;
  }

  .water-draw-result-links {
    width: min(100%, var(--draw-width));
  }

  .water-draw-card__front,
  .water-draw-card__back {
    min-height: 38rem;
  }

  .water-draw-card__illustration {
    width: 10rem;
  }

  .water-draw-card__front {
    border-image-width: 4.5rem;
    padding: 3rem 2.25rem 3.5rem;
  }

  .water-draw-submit {
    width: 100%;
  }

  .water-draw-notes__list {
    grid-template-columns: 1fr;
  }

  .water-draw-notes__list > div,
  .water-draw-notes__list > div:first-child {
    padding: 1.5rem 0;
    border-inline-start: 0;
    border-block-start: 1px solid var(--color-line);
  }
}

@media (max-width: 28rem) {
  .water-draw-result-links {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .water-draw-card,
  .water-draw-card__inner {
    transition: none;
  }

  .water-draw-card.is-shuffling {
    animation: none;
  }
}

/* 首页保留完整工具入口；内页通过同一套公共情境色变量表达不同内容。 */
.page-tone {
  --page-tone-ink: var(--color-brand-strong);
  --page-tone-accent: var(--color-brand);
  --page-tone-soft: #f3edf4;
  --page-tone-wash: rgb(122 82 126 / 9%);
}

.page-tone--personality {
  --page-tone-ink: #5f4169;
  --page-tone-accent: #76527f;
  --page-tone-soft: #f0e9f2;
  --page-tone-wash: rgb(118 82 127 / 10%);
}

.page-tone--zodiac {
  --page-tone-ink: #755432;
  --page-tone-accent: #a26f3a;
  --page-tone-soft: #f7eedf;
  --page-tone-wash: rgb(184 132 70 / 11%);
}

.page-tone--bazi {
  --page-tone-ink: #5e513f;
  --page-tone-accent: #7b684c;
  --page-tone-soft: #f3efe5;
  --page-tone-wash: rgb(123 104 76 / 10%);
}

.page-tone--screening {
  --page-tone-ink: #375e72;
  --page-tone-accent: #517b8d;
  --page-tone-soft: #eaf3f5;
  --page-tone-wash: rgb(81 123 141 / 10%);
}

.page-tone--companion {
  --color-canvas: #faf9f5;
  --color-surface: #fffefa;
  --color-surface-soft: #f3f4ee;
  --color-surface-warm: #f6eee5;
  --color-ink: #333e39;
  --color-muted: #5e6b63;
  --color-line: #dce2d8;
  --color-line-strong: #bdcbbf;
  --color-brand: #4d7163;
  --color-brand-strong: #365448;
  --color-brand-soft: #e8efe6;
  --color-focus: #4d7163;
  --page-tone-ink: #365448;
  --page-tone-accent: #4d7163;
  --page-tone-soft: #edf2e9;
  --page-tone-wash: rgb(77 113 99 / 8%);
  color: var(--color-ink);
}

.page-tone--relationship {
  --page-tone-ink: #704d69;
  --page-tone-accent: #8a637f;
  --page-tone-soft: #f4eaf1;
  --page-tone-wash: rgb(138 99 127 / 10%);
}

.page-tone--water {
  --page-tone-ink: #356878;
  --page-tone-accent: #4f8290;
  --page-tone-soft: #e6f1f0;
  --page-tone-wash: rgb(79 130 144 / 11%);
}

.page-tone--wellbeing {
  --page-tone-ink: #416557;
  --page-tone-accent: #5c7f70;
  --page-tone-soft: #eaf1eb;
  --page-tone-wash: rgb(92 127 112 / 10%);
}

.page-tone:not(.page-tone--home) .page-main {
  background:
    linear-gradient(180deg, var(--page-tone-soft) 0, rgb(255 255 255 / 0%) 32rem),
    var(--color-background);
}

.page-tone:not(.page-tone--home) .page-heading {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(2.5rem, 5vw, 4.5rem);
}

.page-tone:not(.page-tone--home) .page-heading::before {
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - 50vw);
  border-block-end: 1px solid color-mix(in srgb, var(--page-tone-accent) 18%, var(--color-line));
  background:
    radial-gradient(circle at 84% 22%, var(--page-tone-wash) 0 0.28rem, transparent 0.34rem) 0 0 / 2.1rem 2.1rem,
    linear-gradient(118deg, color-mix(in srgb, var(--page-tone-soft) 78%, #fff), rgb(255 255 255 / 72%));
  content: "";
}

.page-tone.page-tone--bazi .page-heading::before {
  background:
    linear-gradient(90deg, transparent 49.65%, rgb(123 104 76 / 7%) 49.8% 50.2%, transparent 50.35%) 0 0 / 4.5rem 4.5rem,
    linear-gradient(0deg, transparent 49.65%, rgb(123 104 76 / 7%) 49.8% 50.2%, transparent 50.35%) 0 0 / 4.5rem 4.5rem,
    linear-gradient(118deg, #f5f0e5, rgb(255 255 255 / 84%));
}

.page-tone.page-tone--zodiac .page-heading::before {
  background:
    radial-gradient(circle at 87% 24%, rgb(171 121 62 / 18%) 0 0.14rem, transparent 0.2rem) 0 0 / 1.8rem 1.8rem,
    radial-gradient(circle at 78% 65%, rgb(171 121 62 / 11%) 0 0.1rem, transparent 0.16rem) 0 0 / 2.7rem 2.7rem,
    linear-gradient(118deg, #fbf0df, rgb(255 255 255 / 82%));
}

.page-tone.page-tone--screening .page-heading::before {
  background:
    radial-gradient(circle at 84% 38%, rgb(81 123 141 / 15%), transparent 18rem),
    linear-gradient(118deg, #e9f4f6, rgb(255 255 255 / 85%));
}

.page-tone.page-tone--companion .page-heading::before,
.page-tone.page-tone--relationship .page-heading::before {
  background:
    radial-gradient(ellipse at 84% 40%, var(--page-tone-wash), transparent 20rem),
    linear-gradient(118deg, var(--page-tone-soft), rgb(255 255 255 / 86%));
}

.page-tone:not(.page-tone--home) .page-heading .eyebrow,
.page-tone:not(.page-tone--home) .section-heading .eyebrow,
.page-tone:not(.page-tone--home) fieldset > legend {
  color: var(--page-tone-accent);
}

.page-tone:not(.page-tone--home) .tag {
  color: var(--page-tone-ink);
  background: color-mix(in srgb, var(--page-tone-soft) 76%, #fff);
}

.page-tone:not(.page-tone--home) .button:not(.button--secondary):not(.button--quiet):not(.button--danger) {
  border-color: var(--page-tone-accent);
  background: var(--page-tone-accent);
}

.page-tone:not(.page-tone--home) .button--secondary:hover {
  border-color: var(--page-tone-accent);
  background: var(--page-tone-accent);
  color: #fff;
}

.page-tone:not(.page-tone--home) .result,
.page-tone:not(.page-tone--home) .quiz-shell {
  border-block-start-color: color-mix(in srgb, var(--page-tone-accent) 55%, var(--color-line));
}

.page-tone--home .page-main {
  background:
    radial-gradient(circle at 82% 8%, rgb(137 100 143 / 8%), transparent 28rem),
    var(--color-background);
}

.page-tone--home .home-hero {
  grid-template-columns: minmax(0, 0.9fr) minmax(28rem, 0.82fr);
  gap: clamp(3rem, 7vw, 8rem);
  min-height: clamp(36rem, 44vw, 43rem);
  background:
    radial-gradient(circle at 84% 22%, rgb(116 83 126 / 10%), transparent 25rem),
    linear-gradient(118deg, #fbf7f1 0%, #f6f0f3 56%, #edf4f0 100%);
}

.page-tone--home .home-hero h1 {
  max-width: 11ch;
  font-size: clamp(3rem, 4.8vw, 5.1rem);
}

.quick-route-list {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-self: center;
  min-height: 0;
  border-block-start: 1px solid rgb(92 72 96 / 22%);
  scroll-margin-block-start: 6rem;
}

.quick-route-list a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.32rem 1.25rem;
  align-content: center;
  min-height: 7.2rem;
  padding: 1.25rem 0.75rem 1.25rem 1.25rem;
  border-block-end: 1px solid rgb(92 72 96 / 22%);
  color: var(--color-ink);
  text-decoration: none;
  transition: background-color 180ms ease, padding-inline 180ms ease;
}

.quick-route-list a::before {
  position: absolute;
  inset: 1.05rem auto 1.05rem 0;
  width: 0.2rem;
  background: var(--quick-route-accent, var(--color-brand));
  content: "";
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 180ms ease;
}

.quick-route-list a::after {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  color: var(--quick-route-accent, var(--color-brand));
  content: "↗";
  font-size: 1.2rem;
  font-weight: 800;
  transition: transform 180ms ease;
}

.quick-route-list a:hover,
.quick-route-list a:focus-visible {
  padding-inline: 1.55rem 0.45rem;
  background: linear-gradient(90deg, rgb(255 255 255 / 58%), rgb(255 255 255 / 12%));
}

.quick-route-list a:hover::before,
.quick-route-list a:focus-visible::before {
  transform: scaleY(1);
}

.quick-route-list a:hover::after,
.quick-route-list a:focus-visible::after {
  transform: translate(0.18rem, -0.18rem);
}

.quick-route-list a > span {
  grid-column: 1;
  color: var(--quick-route-accent, var(--color-brand));
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.quick-route-list a > strong {
  grid-column: 1;
  font-family: var(--font-family-display);
  font-size: clamp(1.2rem, 2vw, 1.65rem);
}

.quick-route-list a > small {
  grid-column: 1;
  color: var(--color-muted);
  line-height: 1.55;
}

.tool-hub {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  border-block: 1px solid var(--color-line);
  background: rgb(255 255 255 / 78%);
  padding: clamp(4.5rem, 8vw, 8rem) max(clamp(1.5rem, 5vw, 6rem), calc((100vw - var(--page-width)) / 2));
}

.tool-hub > .section-heading {
  width: min(100%, 56rem);
  margin-inline: auto;
}

.tool-hub__jump {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-block: clamp(2rem, 5vw, 4.5rem) clamp(3rem, 6vw, 6rem);
  border-block: 1px solid var(--color-line);
}

.tool-hub__jump a {
  display: grid;
  min-height: 6.2rem;
  align-content: center;
  gap: 0.35rem;
  padding: 1rem clamp(0.85rem, 2vw, 1.5rem);
  border-inline-start: 1px solid var(--color-line);
  color: var(--color-ink);
  font-weight: 750;
  line-height: 1.45;
  text-decoration: none;
}

.tool-hub__jump a:first-child {
  border-inline-start: 0;
}

.tool-hub__jump a:hover {
  background: var(--color-surface-soft);
}

.tool-hub__jump span {
  color: var(--color-muted);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

.tool-groups {
  --tool-entry-height: 17rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 3vw, 3rem);
}

.tool-group {
  --tool-group-accent: #77547e;
  scroll-margin-block-start: 6rem;
}

.tool-group:nth-child(2) { --tool-group-accent: #a35f65; }
.tool-group:nth-child(3) { --tool-group-accent: #4f7969; }
.tool-group:nth-child(4) { --tool-group-accent: #477587; }

.tool-group__heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.1rem;
  min-height: 9.5rem;
  padding-block: 1.4rem 1.8rem;
  border-block-start: 0.22rem solid var(--tool-group-accent);
}

.tool-group__heading > span {
  color: var(--tool-group-accent);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.tool-group__heading h3 {
  margin: 0;
  font-size: clamp(1.65rem, 2.7vw, 2.35rem);
  line-height: 1.15;
}

.tool-group__heading p {
  max-width: 39rem;
  margin: 0.65rem 0 0;
  color: var(--color-muted);
  line-height: 1.7;
}

.tool-group__list {
  display: grid;
  gap: 1rem;
}

.tool-entry {
  --tool-icon-accent: var(--tool-group-accent);
  --tool-surface: #f5f0f7;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(9rem, 12vw, 13rem);
  grid-template-rows: 1fr auto;
  gap: 0.9rem 1rem;
  min-width: 0;
  block-size: var(--tool-entry-height);
  min-height: 0;
  padding: clamp(1.2rem, 2vw, 1.7rem);
  background: linear-gradient(110deg, color-mix(in srgb, var(--tool-surface) 50%, #fff), var(--tool-surface));
}

.tool-entry__scene {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--tool-icon-accent);
  opacity: 0.18;
  pointer-events: none;
}

.tool-entry__art {
  position: relative;
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  min-width: 0;
  aspect-ratio: 1;
  pointer-events: none;
}

.tool-entry__art img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tool-entry[data-tool-icon="personality"] { --tool-icon-accent: #77547e; --tool-surface: #f1eaf5; }
.tool-entry[data-tool-icon="zodiac"] { --tool-icon-accent: #755432; --tool-surface: #f7eedf; }
.tool-entry[data-tool-icon="bazi"] { --tool-icon-accent: #89533e; --tool-surface: #f3eadd; }
.tool-entry[data-tool-icon="phq9"] { --tool-icon-accent: #526d90; --tool-surface: #edf1f8; }
.tool-entry[data-tool-icon="gad7"] { --tool-icon-accent: #477282; --tool-surface: #eaf4f4; }
.tool-entry[data-tool-icon="mood"] { --tool-icon-accent: #945568; --tool-surface: #faecee; }
.tool-entry[data-tool-icon="stress"] { --tool-icon-accent: #7d6651; --tool-surface: #f2eee5; }
.tool-entry[data-tool-icon="sleep"] { --tool-icon-accent: #5b6294; --tool-surface: #eeedf8; }
.tool-entry[data-tool-icon="self-help"] { --tool-icon-accent: #467260; --tool-surface: #edf4e9; }
.tool-entry[data-tool-icon="action"] { --tool-icon-accent: #846627; --tool-surface: #f8f1db; }
.tool-entry[data-tool-icon="companion"] { --tool-icon-accent: #98516f; --tool-surface: #f8eaf0; }
.tool-entry[data-tool-icon="match"] { --tool-icon-accent: #416e7d; --tool-surface: #eaf1f3; }
.tool-entry[data-tool-icon="draw"] { --tool-icon-accent: #796096; --tool-surface: #f3edf8; }

.tool-entry__body {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.tool-entry__body .tag {
  padding: 0;
  border: 0;
  color: var(--tool-icon-accent);
  background: none;
  font-size: 0.72rem;
}

.tool-entry__body h4 {
  margin: 0.55rem 0 0.45rem;
  font-size: clamp(1.2rem, 1.5vw, 1.45rem);
  line-height: 1.4;
}

.tool-entry__body p {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.68;
}

.tool-entry__link {
  display: flex;
  grid-column: 1;
  grid-row: 2;
  gap: 0.45rem;
  align-items: center;
  align-self: end;
  justify-self: start;
  min-height: 2.75rem;
  color: var(--tool-icon-accent);
  font-weight: 800;
  text-decoration: none;
}

.tool-entry__link::after {
  position: absolute;
  inset: 0;
  content: "";
}

.tool-entry:focus-within {
  outline: 2px solid var(--tool-icon-accent);
  outline-offset: 4px;
}

.tool-entry:hover .tool-entry__link,
.tool-entry__link:focus-visible {
  color: var(--tool-icon-accent);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.tool-entry__link:hover span[aria-hidden="true"] {
  transform: translate(0.15rem, -0.15rem);
}

.tool-entry__link span[aria-hidden="true"] {
  transition: transform 160ms ease;
}

@media (max-width: 64rem) {
  .page-tone--home .home-hero {
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.85fr);
    gap: 3rem;
  }

  .tool-groups {
    --tool-entry-height: 22rem;
    grid-template-columns: 1fr;
    gap: 4.5rem;
  }

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

  .tool-entry {
    grid-template-columns: minmax(0, 1fr) 8rem;
    padding: 1.25rem;
  }
}

@media (max-width: 48rem) {
  .page-tone--home .home-hero {
    grid-template-columns: 1fr;
    padding-block-end: 3rem;
    background: linear-gradient(155deg, #fbf7f1, #eee7f2 58%, #e8f1ed);
  }

  .page-tone--home .home-hero h1 {
    font-size: clamp(2.75rem, 13vw, 4.2rem);
  }

  .quick-route-list {
    min-height: 0;
  }

  .quick-route-list a {
    min-height: 0;
    padding: 1.1rem 0.4rem 1.1rem 1rem;
  }

  .quick-route-list a:hover,
  .quick-route-list a:focus-visible {
    padding-inline: 1.2rem 0.2rem;
  }

  .tool-hub__jump,
  .tool-groups {
    grid-template-columns: 1fr;
  }

  .tool-hub__jump a,
  .tool-hub__jump a:first-child {
    min-height: 0;
    border-inline-start: 0;
    border-block-start: 1px solid var(--color-line);
    padding-block: 0.85rem;
  }

  .tool-hub__jump a:first-child {
    border-block-start: 0;
  }

  .tool-groups {
    --tool-entry-height: 20rem;
    gap: 4.5rem;
  }

  .tool-group__heading {
    min-height: 0;
  }

  .tool-group,
  .page-tone--home #tools-title {
    scroll-margin-block-start: 12rem;
  }

  .tool-group__list {
    grid-template-columns: 1fr;
  }

  .tool-entry {
    grid-template-columns: minmax(0, 1fr) clamp(8rem, 29vw, 12rem);
  }

  .page-tone:not(.page-tone--home) .page-heading {
    padding-block: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tool-entry__link span[aria-hidden="true"] {
    transition: none;
  }

  .tool-entry__link:hover span[aria-hidden="true"] {
    transform: none;
  }
}

@media (max-width: 30rem) {
  .tool-groups {
    --tool-entry-height: 21rem;
  }

  .tool-entry {
    grid-template-columns: minmax(0, 1fr) 7.5rem;
    grid-template-rows: auto auto 1fr auto;
    gap: 0.5rem 0.75rem;
    min-height: 0;
    padding: 1.15rem;
  }

  .tool-entry__body {
    display: contents;
  }

  .tool-entry__body .tag { grid-column: 1; grid-row: 1; align-self: end; }
  .tool-entry__body h4 { grid-column: 1; grid-row: 2; margin-block: 0; }
  .tool-entry__body p { grid-column: 1 / -1; grid-row: 3; margin-block-start: 0.35rem; }
  .tool-entry__art { grid-column: 2; grid-row: 1 / 3; }
  .tool-entry__link { grid-column: 2; grid-row: 4; justify-self: end; }
}

@media (max-width: 22.5rem) {
  .tool-groups {
    --tool-entry-height: 23rem;
  }

  .tool-entry {
    grid-template-columns: minmax(0, 1fr) 6rem;
  }
}

/* 星座详情：开放章节、通栏目录和不受窄阅读栏限制的正文。 */
.page-tone--zodiac .zodiac-profile.stack--large > * + * {
  margin-block-start: 0;
}

.page-tone--zodiac .zodiac-profile > .profile-summary {
  grid-template-columns: minmax(14rem, 1.35fr) repeat(3, minmax(0, 1fr));
}

.page-tone--zodiac .zodiac-profile > .profile-summary > div:first-child strong {
  overflow-wrap: normal;
  white-space: nowrap;
}

.page-tone--zodiac .zodiac-profile > .profile-chapter-nav {
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
  justify-content: center;
  gap: 0;
  overflow-x: auto;
  border: 0;
  border-block: 1px solid color-mix(in srgb, var(--profile-middle) 22%, var(--color-line));
  border-radius: 0;
  background: color-mix(in srgb, var(--profile-soft) 34%, #fff);
  padding: 0 max(clamp(1.5rem, 5vw, 6rem), calc((100vw - var(--page-width)) / 2));
  box-shadow: none;
  backdrop-filter: none;
}

.page-tone--zodiac .zodiac-profile > .profile-chapter-nav a {
  border: 0;
  border-block-end: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  padding: 1rem clamp(0.7rem, 1.4vw, 1.15rem) calc(1rem - 2px);
  color: color-mix(in srgb, var(--profile-deep) 72%, var(--color-muted));
  font-size: clamp(0.78rem, 1vw, 0.9rem);
}

.page-tone--zodiac .zodiac-profile > .profile-chapter-nav a::before {
  display: none;
  content: none;
}

.page-tone--zodiac .zodiac-profile > .profile-chapter-nav a:hover,
.page-tone--zodiac .zodiac-profile > .profile-chapter-nav a:focus-visible {
  border-block-end-color: var(--profile-middle);
  background: transparent;
  color: var(--profile-deep);
}

.page-tone--zodiac .zodiac-profile > .profile-chapter {
  width: 100%;
  max-width: none;
  border: 0;
  border-block-end: 1px solid color-mix(in srgb, var(--profile-middle) 16%, var(--color-line));
  border-radius: 0;
  background: transparent;
  padding: clamp(4rem, 7vw, 7rem) 0;
  box-shadow: none;
}

.page-tone--zodiac .zodiac-profile > .profile-chapter + .profile-chapter {
  padding-block-start: clamp(4rem, 7vw, 7rem);
}

.page-tone--zodiac .zodiac-profile > .profile-chapter .section-heading,
.page-tone--zodiac .zodiac-profile > .profile-chapter .section-heading h2,
.page-tone--zodiac .zodiac-profile > .profile-chapter .section-heading > p:last-child,
.page-tone--zodiac .zodiac-profile > .profile-chapter .reflection-quote {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.page-tone--zodiac .zodiac-profile > .profile-chapter > .grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 6vw, 6rem);
}

.page-tone--zodiac .zodiac-profile > .profile-chapter > .grid > * {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.page-tone--zodiac .zodiac-profile > .profile-chapter > .grid > * + * {
  border-inline-start: 1px solid color-mix(in srgb, var(--profile-middle) 20%, var(--color-line));
  padding-inline-start: clamp(2.5rem, 6vw, 6rem);
}

.page-tone--zodiac .zodiac-profile > .profile-chapter .definition-list {
  grid-template-columns: 1fr;
  gap: 0;
}

.page-tone--zodiac .zodiac-profile > .profile-chapter .definition-list > div {
  display: grid;
  grid-template-columns: minmax(9rem, 0.28fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  border: 0;
  border-block-end: 1px solid var(--color-line);
  border-radius: 0;
  background: transparent;
  padding: 1.2rem 0;
}

.page-tone--zodiac .zodiac-profile > .profile-chapter .definition-list dt {
  margin: 0;
  color: var(--profile-middle);
}

.page-tone--zodiac .zodiac-profile > #pairing .section-heading > p:last-child {
  max-width: none;
}

.page-tone--zodiac .zodiac-profile > #reflection {
  display: grid;
  grid-template-columns: minmax(13rem, 0.7fr) minmax(0, 1.5fr);
  gap: 1.5rem clamp(3rem, 7vw, 7rem);
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  border: 0;
  background: linear-gradient(110deg, color-mix(in srgb, var(--profile-soft) 88%, #fff), color-mix(in srgb, var(--profile-soft) 44%, #fff));
  padding: clamp(4rem, 7vw, 7rem) max(clamp(1.5rem, 5vw, 6rem), calc((100vw - var(--page-width)) / 2));
}

.page-tone--zodiac .zodiac-profile > #reflection > div {
  grid-row: 1 / span 2;
}

.page-tone--zodiac .zodiac-profile > #reflection > .reflection-quote,
.page-tone--zodiac .zodiac-profile > #reflection > .text-muted {
  grid-column: 2;
}

@media (min-width: 64rem) {
  .page-tone--zodiac .zodiac-profile > #pairing .section-heading > p:last-child {
    font-size: clamp(0.94rem, 1.05vw, 1.05rem);
    white-space: nowrap;
  }
}

@media (max-width: 63.999rem) {
  .page-tone--zodiac .zodiac-profile > .profile-chapter-nav {
    position: static;
    justify-content: flex-start;
  }

  .page-tone--zodiac .zodiac-profile > .profile-chapter > .grid {
    gap: 2.5rem;
  }

  .page-tone--zodiac .zodiac-profile > .profile-chapter > .grid > * + * {
    padding-inline-start: 2.5rem;
  }
}

@media (max-width: 48rem) {
  .page-tone--zodiac .zodiac-profile > .profile-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-tone--zodiac .zodiac-profile > .profile-chapter > .grid,
  .page-tone--zodiac .zodiac-profile > #reflection {
    grid-template-columns: 1fr;
  }

  .page-tone--zodiac .zodiac-profile > .profile-chapter > .grid > * + * {
    border-block-start: 1px solid color-mix(in srgb, var(--profile-middle) 20%, var(--color-line));
    border-inline-start: 0;
    padding-block-start: 2.5rem;
    padding-inline-start: 0;
  }

  .page-tone--zodiac .zodiac-profile > .profile-chapter .definition-list > div {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .page-tone--zodiac .zodiac-profile > #reflection > div,
  .page-tone--zodiac .zodiac-profile > #reflection > .reflection-quote,
  .page-tone--zodiac .zodiac-profile > #reflection > .text-muted {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 36rem) {
  .page-tone--zodiac .zodiac-profile > .profile-summary {
    grid-template-columns: 1fr;
  }

  .page-tone--zodiac .zodiac-profile > .profile-summary > div + div {
    border-block-start: 1px solid var(--color-line);
    border-inline-start: 0;
  }
}

/* 四象详情沿用星座详情的开放章节结构，主视觉使用现有独立元素图层。 */
.page-tone--zodiac .element-profile-hero__art > .element-avatar {
  position: relative;
  width: min(100%, 29rem);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  filter: drop-shadow(0 2rem 2.4rem color-mix(in srgb, var(--profile-deep) 18%, transparent));
  box-shadow: none;
}

.page-tone--zodiac .element-profile-hero__art > .element-avatar--air {
  overflow: hidden;
}

.page-tone--zodiac .element-profile > #hobbies > .element-hobby-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2.5rem, 6vw, 6rem);
}

.page-tone--zodiac .element-profile > #hobbies > .element-hobby-grid > section {
  padding-block: 1.6rem;
}

.page-tone--zodiac .element-profile > #hobbies > .element-hobby-grid > section:nth-child(odd) {
  border-inline-start: 0;
  padding-inline-start: 0;
}

.page-tone--zodiac .element-profile > #hobbies > .element-hobby-grid > section:nth-child(n + 3) {
  border-block-start: 1px solid color-mix(in srgb, var(--profile-middle) 18%, var(--color-line));
}

.page-tone--zodiac .element-profile > #work > .element-rhythm-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-block-start: clamp(1.5rem, 3vw, 2.5rem);
  border-block: 1px solid color-mix(in srgb, var(--profile-middle) 18%, var(--color-line));
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

.page-tone--zodiac .element-profile .element-member-list a,
.page-tone--zodiac .element-profile .element-sources a {
  color: var(--profile-deep);
  font-weight: 800;
  text-underline-offset: 0.2em;
}

.page-tone--zodiac .element-profile .element-member-list a:hover,
.page-tone--zodiac .element-profile .element-member-list a:focus-visible,
.page-tone--zodiac .element-profile .element-sources a:hover,
.page-tone--zodiac .element-profile .element-sources a:focus-visible {
  color: var(--profile-middle);
}

.page-tone--zodiac .element-card .text-arrow {
  display: inline-block;
  margin-block-start: 0.45rem;
  color: var(--profile-middle, var(--page-tone-ink));
  font-weight: 800;
}

@media (max-width: 48rem) {
  .page-tone--zodiac .element-profile > #hobbies > .element-hobby-grid,
  .page-tone--zodiac .element-profile > #work > .element-rhythm-grid {
    grid-template-columns: 1fr;
  }

  .page-tone--zodiac .element-profile > #hobbies > .element-hobby-grid > section + section,
  .page-tone--zodiac .element-profile > #work > .element-rhythm-grid > section + section {
    border-block-start: 1px solid color-mix(in srgb, var(--profile-middle) 18%, var(--color-line));
    border-inline-start: 0;
    padding-block-start: 1.6rem;
    padding-inline-start: 0;
  }
}

/* 星座目录：宽幅目录、连续的四象阅读区与双历查询。 */
.page-tone--zodiac .zodiac-directory > .zodiac-directory__heading {
  display: flex;
  width: 100%;
  max-width: none;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 4rem);
}

.page-tone--zodiac .zodiac-directory__heading > div {
  max-width: 58rem;
}

.page-tone--zodiac .zodiac-directory__heading > .button {
  flex: 0 0 auto;
  margin-block-end: 0.2rem;
}

.page-tone--zodiac .zodiac-directory > .profile-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.6vw, 2.5rem);
}

.page-tone--zodiac .zodiac-directory .profile-card__body small {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  overflow: visible;
  font-size: clamp(0.72rem, 0.9vw, 0.84rem);
  line-height: 1.45;
  white-space: nowrap;
  -webkit-line-clamp: initial;
}

.page-tone--zodiac .zodiac-elements-flow {
  gap: clamp(4rem, 7vw, 7rem);
}

.page-tone--zodiac .zodiac-directory .profile-card__body small + small {
  display: block;
  white-space: normal;
}

.page-tone--zodiac .zodiac-directory + .zodiac-elements-flow {
  margin-block-start: clamp(2.25rem, 4vw, 4rem);
  border-block-start: 1px solid var(--color-line);
  padding-block-start: clamp(2.25rem, 4vw, 4rem);
}

.page-tone--zodiac .zodiac-elements-flow > section,
.page-tone--zodiac .zodiac-elements-flow > section > .section-heading {
  width: 100%;
  max-width: none;
}

.page-tone--zodiac .zodiac-elements-flow > section + section {
  border-block-start: 1px solid var(--color-line);
  padding-block-start: clamp(4rem, 7vw, 7rem);
}

.page-tone--zodiac .zodiac-elements-flow .element-relation-card {
  border-block-start: 0;
}

.page-tone--zodiac .zodiac-mode-guide {
  border-block: 1px solid var(--color-line);
  padding-block: clamp(3rem, 6vw, 5.5rem);
}

.page-tone--zodiac .zodiac-mode-guide > .section-heading {
  max-width: none;
}

.page-tone--zodiac .zodiac-mode-guide > .grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.page-tone--zodiac .zodiac-mode-guide > .grid > div {
  padding-inline: clamp(1.5rem, 3vw, 3rem);
}

.page-tone--zodiac .zodiac-mode-guide > .grid > div:first-child {
  padding-inline-start: 0;
}

.page-tone--zodiac .zodiac-mode-guide > .grid > div + div {
  border-inline-start: 1px solid var(--color-line);
}

.zodiac-calendar-dialog {
  width: min(calc(100% - 2rem), 48rem);
}

.zodiac-calendar-dialog .site-dialog__surface {
  max-height: min(90vh, 50rem);
  overflow-y: auto;
}

.zodiac-calendar-dialog form > fieldset {
  border-block-start: 1px solid var(--color-line);
  padding-block-start: var(--space-5);
}

.zodiac-calendar-mode {
  gap: var(--space-2);
}

.zodiac-calendar-mode .check-row {
  align-items: center;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  padding: 0.65rem 0.95rem;
}

.zodiac-calendar-mode .check-row:has(input:checked) {
  border-color: var(--page-tone-accent);
  background: var(--page-tone-soft);
  color: var(--page-tone-ink);
}

.zodiac-calendar-result {
  display: grid;
  gap: var(--space-2);
}

.zodiac-calendar-result[hidden] {
  display: none;
}

.zodiac-calendar-result .text-arrow {
  margin-block-start: var(--space-1);
}

@media (min-width: 86rem) {
  .page-tone--zodiac .zodiac-directory > .profile-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .page-tone--zodiac #element-guide-title {
    max-width: none;
    white-space: nowrap;
  }
}

@media (max-width: 56rem) {
  .page-tone--zodiac .zodiac-directory > .profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 48rem) {
  .page-tone--zodiac .zodiac-directory > .zodiac-directory__heading {
    align-items: stretch;
    flex-direction: column;
  }

  .page-tone--zodiac .zodiac-directory__heading > .button {
    align-self: flex-start;
  }

  .page-tone--zodiac .zodiac-mode-guide > .grid {
    grid-template-columns: 1fr;
  }

  .page-tone--zodiac .zodiac-mode-guide > .grid > div,
  .page-tone--zodiac .zodiac-mode-guide > .grid > div:first-child {
    padding: 1.5rem 0;
  }

  .page-tone--zodiac .zodiac-mode-guide > .grid > div + div {
    border-block-start: 1px solid var(--color-line);
    border-inline-start: 0;
  }

  .zodiac-calendar-dialog .date-fields {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 36rem) {
  .page-tone--zodiac .zodiac-directory > .profile-grid {
    grid-template-columns: 1fr;
  }

  .page-tone--zodiac .zodiac-directory .profile-card__body small {
    font-size: 0.74rem;
  }

  .page-tone--zodiac .zodiac-directory__heading > .button {
    width: 100%;
  }
}

/* 16 型测试：参考经典人格量表的纵向题流，题干在上、量尺在下。 */
.personality-index-shell > #personality-quiz-heading {
  width: min(100%, 68rem);
  max-width: 68rem;
  margin-inline: auto;
  padding-block: clamp(4rem, 7vw, 6.5rem) clamp(2.25rem, 4vw, 3.5rem);
  text-align: center;
}

.personality-index-shell > #personality-quiz-heading > h2,
.personality-index-shell > #personality-quiz-heading > p:last-child {
  width: min(100%, 52rem);
  margin-inline: auto;
}

.personality-index-shell > #personality-quiz-heading > h2 {
  margin-block: 0.35rem 0;
  font-size: clamp(2.65rem, 4.4vw, 4.5rem);
  line-height: 1.08;
}

.personality-index-shell > #personality-quiz-heading > p:last-child {
  margin-block: 1.15rem 0 0;
  font-size: clamp(1rem, 1.25vw, 1.14rem);
  line-height: 1.75;
}

.personality-index-shell > #personality-quiz.tool-layout--single,
.personality-index-shell > #personality-quiz.tool-layout--single > * {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.personality-index-shell #personality-quiz .quiz-shell {
  border: 0;
  border-block: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 0 clamp(3rem, 6vw, 5rem);
  box-shadow: none;
}

.personality-index-shell #personality-quiz .quiz-toolbar {
  position: sticky;
  z-index: 8;
  inset-block-start: var(--site-header-height, 4.5rem);
  grid-template-columns: auto minmax(14rem, 1fr);
  width: min(100%, 68rem);
  margin-inline: auto;
  border-block: 1px solid var(--color-line);
  background: color-mix(in srgb, var(--color-background) 92%, transparent);
  padding-block: 1rem;
  backdrop-filter: blur(1rem);
}

.personality-index-shell #personality-quiz .quiz-toolbar progress {
  height: 0.45rem;
}

.personality-index-shell #personality-quiz .quiz-page__heading {
  width: min(100%, 68rem);
  max-width: 68rem;
  margin-inline: auto;
  padding-block: clamp(3rem, 5vw, 4.75rem) clamp(1.6rem, 3vw, 2.5rem);
  text-align: center;
}

.personality-index-shell #personality-quiz .quiz-page__heading > h2,
.personality-index-shell #personality-quiz .quiz-page__heading > p:last-child {
  width: min(100%, 48rem);
  margin-inline: auto;
}

.personality-index-shell #personality-quiz .quiz-page__heading > h2 {
  margin-block: 0.3rem 0;
  font-size: clamp(2.2rem, 3.2vw, 3.25rem);
}

.personality-index-shell #personality-quiz .quiz-page__heading > p:last-child {
  margin-block: 0.75rem 0 0;
  font-size: 1.02rem;
}

.personality-index-shell #personality-quiz .question--statement {
  display: block;
  width: min(100%, 68rem);
  min-height: 10.5rem;
  margin-inline: auto;
  padding: clamp(1.7rem, 2.2vw, 2rem) 0 clamp(1.85rem, 2.4vw, 2.15rem);
}

.personality-index-shell #personality-quiz .question--statement > .question__prompt {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  margin: 0 auto clamp(1.25rem, 2vw, 1.65rem);
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  font-weight: 700;
  line-height: 1.55;
}

.personality-index-shell #personality-quiz .question__number {
  display: none;
}

.personality-index-shell #personality-quiz .question--statement > .likert {
  grid-template-columns: auto repeat(5, minmax(4rem, 1fr)) auto;
  align-items: center;
  gap: clamp(0.6rem, 1.3vw, 1.15rem);
  width: min(100%, 48rem);
  max-width: 48rem;
  margin-inline: auto;
}

.personality-index-shell #personality-quiz .likert__edge {
  color: var(--color-muted);
  font-size: 0.94rem;
  font-weight: 750;
  white-space: nowrap;
}

.personality-index-shell #personality-quiz .likert__edge--agree {
  color: color-mix(in srgb, var(--color-teal) 80%, var(--color-ink));
}

.personality-index-shell #personality-quiz .likert__edge--disagree {
  color: color-mix(in srgb, var(--color-brand) 72%, var(--color-ink));
}

.personality-index-shell #personality-quiz .likert__choice {
  align-self: center;
  gap: 0;
}

.personality-index-shell #personality-quiz .likert__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.personality-index-shell #personality-quiz .likert__dot {
  width: 2.15rem;
  border-width: 3px;
  box-shadow: inset 0 0 0 0.32rem var(--color-surface);
}

.personality-index-shell #personality-quiz .likert__choice--level-1 .likert__dot {
  width: 2.65rem;
}

.personality-index-shell #personality-quiz .likert__choice--level-2 .likert__dot {
  width: 3.35rem;
}

.personality-index-shell #personality-quiz .likert__choice--agree .likert__dot {
  border-color: color-mix(in srgb, var(--color-teal) 76%, var(--color-line));
}

.personality-index-shell #personality-quiz .likert__choice--neutral .likert__dot {
  border-color: color-mix(in srgb, #bcae9f 72%, var(--color-line));
}

.personality-index-shell #personality-quiz .likert__choice--disagree .likert__dot {
  border-color: color-mix(in srgb, var(--color-brand) 72%, var(--color-line));
}

.personality-index-shell #personality-quiz .likert__choice--agree input:checked + .likert__dot {
  border-color: var(--color-teal);
  background: var(--color-teal);
}

.personality-index-shell #personality-quiz .likert__choice--neutral input:checked + .likert__dot {
  border-color: #ad9a87;
  background: #ad9a87;
}

.personality-index-shell #personality-quiz .likert__choice--disagree input:checked + .likert__dot {
  border-color: var(--color-brand);
  background: var(--color-brand);
}

.personality-index-shell #personality-quiz .quiz-actions {
  width: min(100%, 68rem);
  margin-inline: auto;
  padding-block-start: clamp(1.5rem, 3vw, 2.5rem);
}

@media (max-width: 63.999rem) {
  .personality-index-shell #personality-quiz .question--statement,
  .personality-index-shell #personality-quiz .quiz-toolbar,
  .personality-index-shell #personality-quiz .quiz-page__heading,
  .personality-index-shell #personality-quiz .quiz-actions {
    width: min(100%, 44rem);
  }
}

@media (max-width: 48rem) {
  .personality-index-shell > #personality-quiz-heading {
    padding-block: 3.75rem 2.5rem;
  }

  .personality-index-shell > #personality-quiz-heading > h2 {
    font-size: clamp(2.6rem, 13vw, 4.2rem);
  }

  .personality-index-shell #personality-quiz .quiz-shell {
    padding-block-end: 2.5rem;
  }

  .personality-index-shell #personality-quiz .quiz-toolbar {
    position: static;
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .personality-index-shell #personality-quiz .question--statement {
    min-height: 0;
    padding-block: 1.9rem 2.2rem;
  }

  .personality-index-shell #personality-quiz .question--statement > .question__prompt {
    margin-block-end: 1.6rem;
  }

  .personality-index-shell #personality-quiz .question--statement > .likert {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.35rem;
    width: 100%;
  }

  .personality-index-shell #personality-quiz .likert__edge {
    display: none;
  }

  .personality-index-shell #personality-quiz .likert__label {
    position: static;
    width: auto;
    height: auto;
    margin-block-start: 0.55rem;
    overflow: visible;
    clip: auto;
    clip-path: none;
    font-size: 0.66rem;
    white-space: normal;
  }

  .personality-index-shell #personality-quiz .likert__choice--level-2 .likert__dot {
    width: clamp(2.55rem, 12vw, 3.15rem);
  }

  .personality-index-shell #personality-quiz .likert__choice--level-1 .likert__dot {
    width: clamp(2.25rem, 10vw, 2.65rem);
  }

  .personality-index-shell #personality-quiz .likert__choice--neutral .likert__dot {
    width: clamp(2rem, 9vw, 2.2rem);
  }
}

/* 人格测试结果：人物、维度与建议分别成章，避免卡片叠压和末项掉队。 */
.personality-index-shell > .result--personality {
  display: block;
  width: min(100%, 82rem);
  margin-inline: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: clamp(3.5rem, 6vw, 5.5rem) 0;
  box-shadow: none;
}

.result-personality__heading {
  width: min(100%, 48rem);
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}

.result-personality__heading h2 {
  margin-block: 0.35rem 0.8rem;
  color: var(--color-ink);
  font-size: clamp(2.5rem, 4.5vw, 4.35rem);
  letter-spacing: -0.055em;
  line-height: 1.08;
}

.result-personality__heading > p:last-child {
  max-width: 39rem;
  margin: 0 auto;
  color: var(--color-muted);
  font-size: 1.05rem;
  line-height: 1.75;
}

.personality-index-shell > .result--personality [data-result-body] {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
}

.result--personality .result-identity.character-card {
  min-height: clamp(27rem, 34vw, 32rem);
  border: 0;
  border-radius: clamp(1.35rem, 3vw, 2rem);
  background:
    radial-gradient(circle at 78% 16%, color-mix(in srgb, var(--card-glow) 30%, transparent), transparent 22rem),
    linear-gradient(116deg, color-mix(in srgb, var(--card-middle) 12%, #fffdf9), color-mix(in srgb, var(--card-middle) 34%, #fff8ef));
  box-shadow: 0 1.8rem 4rem color-mix(in srgb, var(--card-deep) 14%, transparent);
}

.result--personality .result-identity.character-card::before {
  inset: 0;
  border: 0;
  border-radius: inherit;
  background:
    linear-gradient(140deg, transparent 0 59%, color-mix(in srgb, var(--card-middle) 10%, transparent) 59.2% 70%, transparent 70.2%),
    radial-gradient(circle, color-mix(in srgb, var(--card-middle) 18%, transparent) 0 1.3px, transparent 1.7px) 0 0 / 1rem 1rem;
  clip-path: polygon(46% 0, 100% 0, 100% 100%, 31% 100%);
}

.result--personality .result-identity.character-card::after {
  inset-block-start: 2rem;
  inset-inline-start: clamp(2rem, 5vw, 3.6rem);
  border-color: color-mix(in srgb, var(--card-middle) 24%, transparent);
  background: color-mix(in srgb, var(--card-middle) 8%, white);
  color: var(--card-deep);
  backdrop-filter: none;
}

.result--personality .result-identity .character-card__copy {
  width: min(52%, 33rem);
  margin: clamp(5.5rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem) clamp(2rem, 5vw, 3.6rem);
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.result--personality .result-identity .character-card__copy h3 {
  color: var(--card-deep);
  font-size: clamp(2.8rem, 4.8vw, 4.25rem);
  line-height: 1.06;
  text-shadow: none;
}

.result--personality .result-identity .character-card__copy > p:last-child {
  max-width: 31rem;
  color: color-mix(in srgb, var(--card-deep) 76%, #433d43);
  line-height: 1.75;
}

.result--personality .result-identity > .type-avatar.character-card__art {
  inset: 0 clamp(0.5rem, 2vw, 1.5rem) 0 auto;
  width: min(50%, 32rem);
  height: 100%;
  aspect-ratio: auto;
  background-position: center bottom;
  background-size: contain;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 100%);
  transform: none;
}

.result-score-stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: center;
  margin-block-end: 0.4rem;
}

.result-score-ring {
  position: relative;
  display: grid;
  width: clamp(7.5rem, 9vw, 9rem);
  aspect-ratio: 1;
  place-content: center;
  border-radius: 50%;
  background: conic-gradient(
    var(--card-middle) 0 var(--score-progress),
    color-mix(in srgb, var(--card-middle) 14%, white) var(--score-progress) 100%
  );
  color: var(--card-deep);
  text-align: center;
}

.result-score-ring::before {
  position: absolute;
  inset: 0.62rem;
  border: 1px solid color-mix(in srgb, var(--card-middle) 12%, white);
  border-radius: inherit;
  background: color-mix(in srgb, var(--card-middle) 5%, #fffdf9);
  box-shadow: inset 0 0.6rem 1.4rem rgb(255 255 255 / 58%);
  content: "";
}

.result-score-ring > * {
  position: relative;
  z-index: 1;
}

.result-score-ring strong {
  font-size: clamp(1.8rem, 3vw, 2.45rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.055em;
  line-height: 1;
}

.result-score-ring span {
  margin-block-start: 0.32rem;
  color: color-mix(in srgb, var(--card-deep) 68%, #5c555e);
  font-size: 0.68rem;
  font-weight: 760;
}

.result-stage {
  display: grid;
  gap: 0.28rem;
}

.result-stage > span:first-child {
  color: color-mix(in srgb, var(--card-deep) 64%, #5c555e);
  font-size: 0.72rem;
  font-weight: 820;
  letter-spacing: 0.08em;
}

.result-stage > strong {
  color: var(--card-deep);
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  letter-spacing: -0.04em;
  line-height: 1.08;
}

.result-stage > p {
  max-width: 23rem;
  margin: 0.25rem 0 0;
  color: color-mix(in srgb, var(--card-deep) 72%, #5c555e);
  font-size: 0.8rem;
  line-height: 1.55;
}

.result-stage__dots {
  display: flex;
  gap: 0.38rem;
  margin-block: 0.2rem;
}

.result-stage__dots i {
  width: 0.72rem;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--card-middle) 28%, white);
  border-radius: 50%;
  background: color-mix(in srgb, var(--card-middle) 10%, white);
}

.result-stage__dots i.is-active {
  border-color: var(--card-middle);
  background: var(--card-middle);
  box-shadow: 0 0 0.7rem color-mix(in srgb, var(--card-middle) 42%, transparent);
}

.result-identity__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.result-identity__tags span {
  border: 1px solid color-mix(in srgb, var(--card-middle) 23%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--card-middle) 7%, white);
  color: var(--card-deep);
  padding: 0.38rem 0.72rem;
  font-size: 0.75rem;
  font-weight: 760;
}

.result-attributes {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.result-attributes__heading {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: 0.5rem clamp(2rem, 5vw, 5rem);
  align-items: end;
  margin-block-end: clamp(2.5rem, 5vw, 4rem);
}

.result-attributes__eyebrow {
  grid-column: 1 / -1;
  color: var(--color-brand-strong);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.result-attributes__heading h3 {
  margin: 0;
  color: var(--color-ink);
  font-size: clamp(2rem, 3.6vw, 3.3rem);
  letter-spacing: -0.05em;
  line-height: 1.08;
}

.result-attributes__heading p {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.75;
}

.result-attributes__layout {
  display: grid;
  grid-template-columns: minmax(20rem, 0.82fr) minmax(28rem, 1.18fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}

.personality-radar {
  position: relative;
  isolation: isolate;
  width: min(100%, 28rem);
  aspect-ratio: 1;
  margin-inline: auto;
}

.personality-radar__ring {
  position: absolute;
  z-index: 0;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: var(--ring-size);
  aspect-ratio: 1;
  background: color-mix(in srgb, var(--color-brand) 28%, var(--color-line));
  clip-path: polygon(50% 0, 97.55% 34.55%, 79.39% 90.45%, 20.61% 90.45%, 2.45% 34.55%);
  translate: -50% -50%;
}

.personality-radar__ring::after {
  position: absolute;
  inset: 1px;
  background: var(--color-surface);
  clip-path: inherit;
  content: "";
}

.personality-radar__axis {
  position: absolute;
  z-index: 1;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 42%;
  height: 1px;
  background: color-mix(in srgb, var(--color-brand) 26%, var(--color-line));
  transform: rotate(var(--axis-angle));
  transform-origin: left center;
}

.personality-radar__shape {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: color-mix(in srgb, var(--color-brand) 38%, transparent);
  filter: drop-shadow(0 0.4rem 0.7rem color-mix(in srgb, var(--color-brand) 23%, transparent));
}

.personality-radar__point {
  position: absolute;
  z-index: 3;
  inset-block-start: var(--point-y);
  inset-inline-start: var(--point-x);
  width: 0.68rem;
  aspect-ratio: 1;
  border: 2px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-brand-strong);
  box-shadow: 0 0.2rem 0.65rem color-mix(in srgb, var(--color-brand) 34%, transparent);
  translate: -50% -50%;
}

.personality-radar__label {
  position: absolute;
  z-index: 4;
  max-width: 8.5rem;
  color: var(--color-ink);
  font-size: 0.74rem;
  font-weight: 760;
  line-height: 1.35;
}

.personality-radar__label--1 {
  inset-block-start: 0;
  inset-inline-start: 50%;
  text-align: center;
  translate: -50% -25%;
}

.personality-radar__label--2 {
  inset-block-start: 30%;
  inset-inline-end: 0;
  text-align: end;
  translate: 10% -50%;
}

.personality-radar__label--3 {
  inset-block-end: 4%;
  inset-inline-end: 4%;
  text-align: end;
  translate: 20% 20%;
}

.personality-radar__label--4 {
  inset-block-end: 4%;
  inset-inline-start: 4%;
  translate: -20% 20%;
}

.personality-radar__label--5 {
  inset-block-start: 30%;
  inset-inline-start: 0;
  translate: -10% -50%;
}

.result-dimensions {
  display: grid;
  gap: 0;
  width: 100%;
  margin: 0;
  border-block: 1px solid var(--color-line);
  padding: 0;
  list-style: none;
}

.result-attributes .result-dimensions {
  border-block: 0;
  padding: 0;
}

.result-dimension {
  display: grid;
  gap: 0.8rem;
  border-block-end: 1px solid var(--color-line);
  padding: clamp(1.25rem, 2.5vw, 1.75rem) 0;
}

.result-dimension:last-child {
  border-block-end: 0;
}

.result-dimension__heading,
.result-dimension__labels {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}

.result-dimension__title {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.result-dimension__axis {
  min-width: 5rem;
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.result-dimension__title strong {
  color: var(--color-ink);
  font-size: clamp(1.08rem, 1.6vw, 1.28rem);
}

.result-dimension__score {
  color: var(--color-brand-strong);
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-variant-numeric: tabular-nums;
}

.result-dimension__track {
  --result-score: 50%;

  position: relative;
  display: block;
  height: 0.65rem;
  overflow: visible;
  border-radius: var(--radius-pill);
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--color-teal) 80%, white) 0 var(--result-score),
      color-mix(in srgb, var(--color-brand) 72%, white) var(--result-score) 100%);
}

.result-dimension__track::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--result-score);
  width: 1rem;
  aspect-ratio: 1;
  border: 3px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-ink);
  box-shadow: 0 0.2rem 0.65rem rgb(49 39 50 / 24%);
  content: "";
  translate: -50% -50%;
}

.result-dimension__labels {
  align-items: center;
  color: var(--color-muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.result-dimension__labels span:last-child {
  text-align: end;
}

.result-insights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-block-start: 1px solid var(--color-line);
}

.result-insight {
  min-width: 0;
  padding: clamp(2rem, 3vw, 2.8rem) clamp(1.5rem, 3vw, 2.6rem);
}

.result-insight:first-child {
  padding-inline-start: 0;
}

.result-insight:last-child {
  padding-inline-end: 0;
}

.result-insight + .result-insight {
  border-inline-start: 1px solid var(--color-line);
}

.result-insight__index {
  display: block;
  margin-block-end: 1rem;
  color: var(--color-accent);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.result-insight h3 {
  margin-block: 0 1.35rem;
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  line-height: 1.35;
}

.result-insight ul {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding-inline-start: 1.15rem;
  color: color-mix(in srgb, var(--color-ink) 82%, var(--color-muted));
  line-height: 1.65;
}

.result-personality__actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  margin: 0;
}

.result-personality__actions [hidden] {
  display: none;
}

@media (max-width: 63.999rem) {
  .result-attributes__layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .result-insights {
    grid-template-columns: 1fr;
  }

  .result-insight,
  .result-insight:first-child,
  .result-insight:last-child {
    padding: 2rem 0;
  }

  .result-insight + .result-insight {
    border-block-start: 1px solid var(--color-line);
    border-inline-start: 0;
  }
}

@media (max-width: 48rem) {
  .personality-index-shell > .result--personality {
    padding-block: 3rem;
  }

  .result-personality__heading {
    margin-block-end: 2rem;
    text-align: start;
  }

  .result-personality__heading > p:last-child {
    margin-inline: 0;
  }

  .result--personality .result-identity.character-card {
    display: block;
    min-height: 52rem;
  }

  .result--personality .result-identity > .type-avatar.character-card__art {
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
    height: 27rem;
    background-position: center top;
    -webkit-mask-image: linear-gradient(to bottom, #000 64%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 64%, transparent 100%);
  }

  .result--personality .result-identity .character-card__copy {
    position: absolute;
    inset: auto 0 0;
    width: 100%;
    margin: 0;
    background: linear-gradient(to top, #fbf8f7 0 76%, transparent 100%);
    padding: 6.5rem 1.25rem 1.5rem;
  }

  .result--personality .result-identity .character-card__copy h3 {
    font-size: clamp(2.3rem, 12vw, 3.1rem);
  }

  .result-attributes__heading {
    grid-template-columns: 1fr;
  }

  .result-score-stage {
    grid-template-columns: 6.75rem minmax(0, 1fr);
  }

  .result-score-ring {
    width: 6.75rem;
  }

  .result-dimension__title {
    display: grid;
    gap: 0.25rem;
  }

  .result-dimension__labels {
    align-items: flex-start;
    font-size: 0.7rem;
  }

  .result-personality__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .result-personality__actions .button {
    width: 100%;
  }
}

/* 双人关系匹配：开放式页面、关系场景与可解释的概率结果。 */
body[data-page="match"] .page-main {
  padding-block-start: 0;
}

.match-page__shell {
  display: grid;
  gap: clamp(5rem, 9vw, 9rem);
}

.match-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100vw;
  min-height: clamp(32rem, 44vw, 43rem);
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
  overflow: hidden;
  margin-inline: calc(50% - 50vw);
  border-block-end: 1px solid color-mix(in srgb, var(--page-tone-accent) 20%, var(--color-line));
  background:
    radial-gradient(circle at 53% 36%, rgb(167 111 143 / 15%), transparent 21rem),
    linear-gradient(120deg, #f9eef4 0%, #f7efe9 52%, #edf4ef 100%);
  padding: clamp(2.5rem, 5vw, 5rem) max(clamp(1.25rem, 4vw, 4rem), calc((100vw - var(--page-width)) / 2));
}

.match-hero::after {
  position: absolute;
  z-index: -1;
  inset: auto -8vw -16rem 42%;
  height: 30rem;
  border: 1px solid rgb(138 99 127 / 11%);
  border-radius: 50%;
  content: "";
  rotate: -8deg;
}

.match-hero__content {
  position: relative;
  z-index: 3;
  max-width: 42rem;
}

.match-hero__content h1 {
  max-width: 8.5em;
  margin: 0;
  color: var(--page-tone-ink);
  font-size: clamp(3rem, 5.1vw, 5.25rem);
  letter-spacing: -0.055em;
  line-height: 1.08;
}

.match-hero__content .hero__copy {
  max-width: 37rem;
  color: color-mix(in srgb, var(--color-ink) 76%, var(--color-muted));
  line-height: 1.9;
}

.match-hero__content .button {
  width: fit-content;
  margin-block-start: 0.5rem;
}

.match-hero__art {
  position: relative;
  display: grid;
  min-width: 0;
  place-items: center;
  mix-blend-mode: multiply;
}

.match-explainer,
.match-builder,
.match-result {
  scroll-margin-block-start: 6rem;
}

.match-explainer {
  display: grid;
  grid-template-columns: minmax(18rem, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: end;
}

.match-explainer .section-heading,
.match-builder .section-heading {
  max-width: none;
}

.match-explainer__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-block: 1px solid var(--color-line);
  padding: 0;
  list-style: none;
}

.match-explainer__steps li {
  min-width: 0;
  padding: 1.7rem clamp(1.1rem, 2.5vw, 2rem);
}

.match-explainer__steps li + li {
  border-inline-start: 1px solid var(--color-line);
}

.match-explainer__steps span {
  display: block;
  margin-block-end: 1.6rem;
  color: var(--page-tone-accent);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.match-explainer__steps strong {
  display: block;
  margin-block-end: 0.55rem;
  color: var(--color-ink);
}

.match-explainer__steps p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.7;
}

.match-builder {
  position: relative;
  isolation: isolate;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  border-block: 1px solid color-mix(in srgb, var(--page-tone-accent) 17%, var(--color-line));
  background:
    linear-gradient(90deg, rgb(255 255 255 / 0%) 49.9%, rgb(138 99 127 / 8%) 50%, rgb(255 255 255 / 0%) 50.1%),
    linear-gradient(120deg, #fffafc, #f7f1f4 50%, #f4f7f2);
  padding: clamp(4rem, 7vw, 7rem) max(clamp(1.25rem, 4vw, 4rem), calc((100vw - var(--page-width)) / 2));
}

.match-builder::before,
.match-builder::after {
  position: absolute;
  z-index: -1;
  width: 15rem;
  aspect-ratio: 1;
  border: 1px solid rgb(138 99 127 / 9%);
  border-radius: 50%;
  content: "";
}

.match-builder::before { inset: 3rem auto auto -7rem; }
.match-builder::after { inset: auto -5rem 2rem auto; }

.match-builder > .section-heading {
  margin-block-end: clamp(2.5rem, 5vw, 4.5rem);
}

.match-form__people {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4rem minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(1.5rem, 3vw, 3.5rem);
}

.match-person {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.match-person legend {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  margin-block-end: 1.8rem;
  color: var(--color-ink);
}

.match-person legend span {
  display: grid;
  width: 2.65rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: var(--page-tone-accent);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 900;
}

.match-person--b legend span {
  background: #4f7c61;
}

.match-person legend strong {
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
}

.match-person .field {
  display: grid;
  grid-template-columns: minmax(7rem, 0.32fr) minmax(0, 0.68fr);
  align-items: center;
  gap: 1.5rem;
  border-block-end: 1px solid color-mix(in srgb, var(--page-tone-accent) 16%, var(--color-line));
  padding-block: 1rem;
}

.match-person .field label {
  margin: 0;
  color: color-mix(in srgb, var(--color-ink) 76%, var(--color-muted));
}

.match-person .field select {
  min-width: 0;
  background-color: rgb(255 255 255 / 76%);
}

.match-form__meeting {
  display: grid;
  place-items: center;
}

.match-form__meeting::before {
  width: 1px;
  height: 100%;
  background: color-mix(in srgb, var(--page-tone-accent) 18%, var(--color-line));
  content: "";
  grid-area: 1 / 1;
}

.match-form__meeting span {
  z-index: 1;
  display: grid;
  width: 3.4rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--page-tone-accent) 22%, var(--color-line));
  border-radius: 50%;
  background: #fffafc;
  color: var(--page-tone-accent);
  font-size: 1.35rem;
  grid-area: 1 / 1;
}

.match-form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
  border-block-start: 1px solid color-mix(in srgb, var(--page-tone-accent) 18%, var(--color-line));
  padding-block-start: 1.7rem;
}

.match-form__footer p {
  max-width: 50rem;
  margin: 0;
}

body[data-page="match"] .match-result {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

body[data-page="match"] .match-result[hidden] {
  display: none;
}

.match-result__heading {
  max-width: 62rem;
}

.match-result__heading h2 {
  margin-block: 0.35rem 0.8rem;
  font-size: clamp(2.5rem, 4.4vw, 4.5rem);
  letter-spacing: -0.05em;
}

.match-result__heading > p:last-child {
  color: var(--color-muted);
  font-size: var(--font-size-lead);
}

.match-result__body {
  display: grid;
  gap: clamp(2.75rem, 5vw, 5rem);
}

.match-pair-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  border-block: 1px solid var(--color-line);
}

.match-pair-summary__person {
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2.4rem) 0;
}

.match-pair-summary__person--b {
  text-align: end;
}

.match-pair-summary__label {
  display: block;
  margin-block-end: 0.45rem;
  color: var(--page-tone-accent);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.match-pair-summary__person strong {
  display: block;
  color: var(--color-ink);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
}

.match-pair-summary__person p {
  margin: 0.35rem 0 0;
  color: var(--color-muted);
}

.match-pair-summary__join {
  display: grid;
  width: 3.2rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--page-tone-accent) 25%, var(--color-line));
  border-radius: 50%;
  color: var(--page-tone-accent);
}

.match-scoreboard {
  display: grid;
  grid-template-columns: minmax(18rem, 0.82fr) minmax(23rem, 1.18fr);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
  border-block: 1px solid color-mix(in srgb, var(--page-tone-accent) 22%, var(--color-line));
  background: linear-gradient(115deg, color-mix(in srgb, var(--page-tone-soft) 56%, #fff), rgb(255 255 255 / 0%));
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 4rem);
}

.match-scoreboard__copy h3 {
  margin-block: 1.1rem 0.8rem;
  color: var(--page-tone-ink);
  font-size: clamp(2rem, 3.6vw, 3.65rem);
  letter-spacing: -0.045em;
  line-height: 1.12;
}

.match-scoreboard__copy p {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.8;
}

.match-probability {
  display: grid;
  gap: 1.8rem;
}

.match-probability__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 0.65rem;
}

.match-probability__heading span {
  color: color-mix(in srgb, var(--color-ink) 78%, var(--color-muted));
  font-weight: 750;
}

.match-probability__heading strong {
  color: var(--page-tone-ink);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-variant-numeric: tabular-nums;
}

.match-probability progress {
  width: 100%;
  height: 0.8rem;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgb(138 99 127 / 11%);
}

.match-probability progress::-webkit-progress-bar {
  border-radius: var(--radius-pill);
  background: rgb(138 99 127 / 11%);
}

.match-probability__item--success progress { accent-color: #4f7c61; }
.match-probability__item--failure progress { accent-color: #c37a68; }
.match-probability__item--success progress::-webkit-progress-value { background: #4f7c61; }
.match-probability__item--failure progress::-webkit-progress-value { background: #c37a68; }
.match-probability__item--success progress::-moz-progress-bar { background: #4f7c61; }
.match-probability__item--failure progress::-moz-progress-bar { background: #c37a68; }

.match-breakdown {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-block: 1px solid var(--color-line);
}

.match-breakdown > div {
  min-width: 0;
  padding: clamp(1.6rem, 3vw, 2.5rem);
}

.match-breakdown > div:first-child { padding-inline-start: 0; }
.match-breakdown > div:last-child { padding-inline-end: 0; }
.match-breakdown > div + div { border-inline-start: 1px solid var(--color-line); }

.match-breakdown dt {
  color: var(--color-muted);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.match-breakdown dd {
  margin: 0.7rem 0 0.35rem;
  color: var(--page-tone-ink);
  font-size: clamp(1.45rem, 2.6vw, 2.3rem);
  font-weight: 850;
}

.match-breakdown small {
  color: var(--color-muted);
  line-height: 1.6;
}

.match-insight {
  display: grid;
  grid-template-columns: minmax(12rem, 0.36fr) minmax(0, 1.64fr);
  gap: clamp(2rem, 6vw, 6rem);
  border-block-start: 1px solid var(--color-line);
  padding-block-start: clamp(2rem, 4vw, 3.5rem);
}

.match-insight .eyebrow {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.match-insight h3,
.match-insight > p,
.match-insight > ul {
  grid-column: 2;
}

.match-insight h3 {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.65rem);
  letter-spacing: -0.035em;
}

.match-insight > p {
  margin: 0;
  color: color-mix(in srgb, var(--color-ink) 82%, var(--color-muted));
  font-size: 1.05rem;
  line-height: 1.9;
}

.match-insight > ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.match-insight > ul li {
  border-block-start: 1px solid var(--color-line);
  padding: 1.1rem 1.5rem 1.1rem 0;
  color: color-mix(in srgb, var(--color-ink) 82%, var(--color-muted));
  line-height: 1.7;
}

.match-insight > ul li:nth-child(even) {
  border-inline-start: 1px solid var(--color-line);
  padding-inline: 1.5rem 0;
}

.match-result__boundary {
  margin: 0;
  border-block-start: 1px solid var(--color-line);
  padding-block-start: 1.5rem;
  color: var(--color-muted);
  font-size: var(--font-size-small);
  line-height: 1.8;
}

.match-result__actions {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 64rem) {
  .match-hero {
    min-height: 43rem;
    grid-template-columns: minmax(20rem, 0.85fr) minmax(27rem, 1.15fr);
  }

  .match-explainer {
    grid-template-columns: 1fr;
  }

  .match-person .field {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .match-scoreboard {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 48rem) {
  .match-page__shell {
    gap: 4.5rem;
  }

  .match-hero {
    min-height: 0;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 1rem;
    padding-block: 3rem 1.5rem;
  }

  .match-hero__content h1 {
    max-width: 10em;
    font-size: clamp(2.8rem, 13vw, 4.2rem);
  }

  .match-hero__art {
    width: min(100%, 28rem);
    margin-inline: auto;
  }

  .match-explainer__steps,
  .match-breakdown {
    grid-template-columns: 1fr;
  }

  .match-explainer__steps li + li,
  .match-breakdown > div + div {
    border-block-start: 1px solid var(--color-line);
    border-inline-start: 0;
  }

  .match-breakdown > div,
  .match-breakdown > div:first-child,
  .match-breakdown > div:last-child {
    padding: 1.5rem 0;
  }

  .match-form__people {
    grid-template-columns: 1fr;
  }

  .match-form__meeting {
    height: 3.5rem;
  }

  .match-form__meeting::before {
    width: 100%;
    height: 1px;
  }

  .match-form__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .match-form__footer .button {
    width: 100%;
  }

  .match-pair-summary {
    grid-template-columns: 1fr auto 1fr;
  }

  .match-pair-summary__person strong {
    font-size: 0.95rem;
  }

  .match-pair-summary__person p {
    font-size: 0.78rem;
  }

  .match-pair-summary__join {
    width: 2.5rem;
  }

  .match-scoreboard {
    margin-inline: calc(50% - 50vw);
    padding-inline: 1.25rem;
  }

  .match-insight {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .match-insight .eyebrow,
  .match-insight h3,
  .match-insight > p,
  .match-insight > ul {
    grid-column: 1;
    grid-row: auto;
  }

  .match-insight > ul {
    grid-template-columns: 1fr;
  }

  .match-insight > ul li:nth-child(even) {
    border-inline-start: 0;
    padding-inline: 0;
  }

  .match-result__actions .button {
    width: 100%;
  }
}


/* Shared inner-page system: open editorial hero, scene illustration and flatter sections. */
.page-tone--culture,
.page-tone--bazi {
  --inner-hero-ink: #413629;
  --inner-hero-accent: #9b563f;
  --inner-hero-middle: #b47b4d;
  --inner-hero-soft: #f4e1ca;
  --inner-hero-bg: #f8efe2;
}

.page-tone--companion {
  --inner-hero-ink: #334b40;
  --inner-hero-accent: #4d7163;
  --inner-hero-middle: #aebda7;
  --inner-hero-soft: #e4ebdd;
  --inner-hero-bg: #f1f3ea;
}

.page-tone--people {
  --inner-hero-ink: #32463f;
  --inner-hero-accent: #4f7a68;
  --inner-hero-middle: #779b78;
  --inner-hero-soft: #dce9dc;
  --inner-hero-bg: #edf3eb;
}

.page-tone--contact {
  --inner-hero-ink: #304550;
  --inner-hero-accent: #3e7182;
  --inner-hero-middle: #6e9daa;
  --inner-hero-soft: #d9e9ec;
  --inner-hero-bg: #edf5f5;
}

.page-tone--document {
  --inner-hero-ink: #35364a;
  --inner-hero-accent: #5e628a;
  --inner-hero-middle: #8589ad;
  --inner-hero-soft: #e1e2ed;
  --inner-hero-bg: #f0f0f6;
}

.page-tone--account {
  --inner-hero-ink: #443246;
  --inner-hero-accent: #76547a;
  --inner-hero-middle: #9b78a0;
  --inner-hero-soft: #e8dceb;
  --inner-hero-bg: #f4eef5;
}

.page-tone--control {
  --inner-hero-ink: #344447;
  --inner-hero-accent: #47767a;
  --inner-hero-middle: #70999a;
  --inner-hero-soft: #dcebea;
  --inner-hero-bg: #eef6f4;
}

.page-tone--wellbeing {
  --inner-hero-ink: #3d493b;
  --inner-hero-accent: #63805e;
  --inner-hero-middle: #8ea477;
  --inner-hero-soft: #e2ead7;
  --inner-hero-bg: #f2f5ea;
}

.page-tone--screening {
  --inner-hero-ink: #334651;
  --inner-hero-accent: #47798a;
  --inner-hero-middle: #72a0aa;
  --inner-hero-soft: #d9eaec;
  --inner-hero-bg: #edf5f5;
}

.page-tone--people .page-main,
.page-tone--contact .page-main,
.page-tone--document .page-main,
.page-tone--account .page-main,
.page-tone--control .page-main,
.page-tone--companion .page-main,
.page-tone--bazi .page-main,
.page-tone--wellbeing .page-main,
.page-tone--screening .page-main {
  overflow: hidden;
  padding-block-start: 0;
  background:
    radial-gradient(circle at 8% 36%, color-mix(in srgb, var(--inner-hero-soft) 28%, transparent), transparent 28rem),
    var(--color-canvas);
}

.inner-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100vw;
  min-height: clamp(28rem, 42vw, 39rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(25rem, 0.95fr);
  align-items: center;
  gap: clamp(2.5rem, 7vw, 8rem);
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 14%, rgb(255 255 255 / 70%), transparent 20rem),
    linear-gradient(120deg, color-mix(in srgb, var(--inner-hero-bg) 76%, #fff), var(--inner-hero-bg));
  padding: clamp(2.5rem, 4.8vw, 5rem) max(1rem, calc((100vw - var(--page-width)) / 2 + 1rem));
}

.inner-hero::before {
  position: absolute;
  z-index: -1;
  inset: auto -8vw -41% 41%;
  height: 74%;
  background:
    linear-gradient(142deg, transparent 0 29%, rgb(255 255 255 / 36%) 29.5% 52%, transparent 52.5%),
    linear-gradient(31deg, color-mix(in srgb, var(--inner-hero-middle) 10%, transparent), transparent 55%);
  clip-path: polygon(5% 18%, 84% 0, 100% 67%, 33% 100%);
  content: "";
}

.inner-hero::after {
  position: absolute;
  z-index: 4;
  inset: auto 0 0;
  height: clamp(0.7rem, 1.4vw, 1.3rem);
  background: var(--color-canvas);
  clip-path: polygon(0 75%, 8% 28%, 17% 66%, 27% 18%, 39% 72%, 50% 30%, 61% 69%, 72% 16%, 84% 63%, 93% 24%, 100% 70%, 100% 100%, 0 100%);
  content: "";
}

.inner-hero__copy {
  position: relative;
  z-index: 2;
  max-width: 48rem;
}

.inner-hero__copy .eyebrow {
  color: var(--inner-hero-accent);
  letter-spacing: 0.16em;
}

.inner-hero__copy h1 {
  max-width: 12ch;
  margin: 0;
  color: var(--inner-hero-ink);
  font-family: var(--font-family-display, var(--font-sans));
  font-size: clamp(3rem, 5.8vw, 5.7rem);
  letter-spacing: -0.075em;
  line-height: 1.03;
  text-wrap: balance;
}

.inner-hero__summary {
  max-width: 42rem;
  margin: 0;
  color: color-mix(in srgb, var(--inner-hero-ink) 73%, var(--color-muted));
  font-size: clamp(1.05rem, 1.45vw, 1.28rem);
  line-height: 1.9;
}

.inner-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.5rem;
  margin-block-start: 1.7rem;
  color: color-mix(in srgb, var(--inner-hero-ink) 68%, var(--color-muted));
  font-size: 0.82rem;
  font-weight: 750;
}

.inner-hero__meta span {
  position: relative;
}

.inner-hero__meta span + span::before {
  position: absolute;
  inset: 50% auto auto -0.85rem;
  width: 0.24rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--inner-hero-accent);
  content: "";
  translate: 0 -50%;
}

.inner-hero__actions {
  margin-block-start: 1.8rem;
}

.inner-hero__actions .button {
  border-color: var(--inner-hero-accent);
  background: var(--inner-hero-accent);
}

.inner-hero__actions .button--secondary {
  background: rgb(255 255 255 / 58%);
  color: var(--inner-hero-ink);
}

.inner-hero__art {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  place-items: center;
  mix-blend-mode: multiply;
}

/* Complete high-resolution scenes; white artwork blends into the pale hero only. */
.hero-illustration {
  display: block;
  width: 100%;
  height: auto;
  max-height: 35rem;
  object-fit: contain;
  /* Normalize the generator's near-white paper to white before blending. */
  filter: brightness(1.04);
}

/* Sleep uses real Alpha: retain the original artwork colors on every surface. */
.inner-hero__art--sleep {
  mix-blend-mode: normal;
}

.inner-hero__art--sleep .hero-illustration {
  filter: none;
}

.match-hero__art .hero-illustration {
  max-height: 38rem;
}

/* Dedicated transparent scenes share a single responsive hero layout. */
.hero.hero--illustrated {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  min-height: 0;
  padding-block: clamp(1.75rem, 4vw, 3.5rem);
  background: linear-gradient(115deg, #fffcf7 25%, #faf4e9 62%, var(--hero-art-wash, #e9f3ee));
}

.hero--illustrated::before {
  content: none;
}

.hero--illustrated .hero__content {
  max-width: none;
}

.hero-illustration--alpha {
  filter: none;
}

/* Transparent artwork retains its own gold and jade colors inside shared heroes. */
.inner-hero__art:has(> .hero-illustration--alpha) {
  mix-blend-mode: normal;
}

.hero--illustrated > .hero-illustration--alpha {
  justify-self: center;
  width: min(100%, 32rem);
  max-height: none;
  pointer-events: none;
}

@media (max-width: 48rem) {
  .hero.hero--illustrated {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .hero--illustrated > .hero-illustration--alpha {
    width: min(100%, 18rem);
  }
}

.open-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-block: 1px solid var(--color-line);
}

.open-grid > .card {
  min-height: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: clamp(1.5rem, 3.2vw, 2.8rem);
  box-shadow: none;
  translate: none;
}

.open-grid > .card:first-child { padding-inline-start: 0; }
.open-grid > .card:last-child { padding-inline-end: 0; }
.open-grid > .card + .card { border-inline-start: 1px solid var(--color-line); }
.open-grid > .card:hover { box-shadow: none; translate: none; }

.open-section.panel {
  border-width: 1px 0;
  border-radius: 0;
  background: transparent;
  padding: clamp(2.5rem, 5vw, 4.75rem) 0;
  box-shadow: none;
}

.auth-shell {
  display: grid;
  width: min(100%, 72rem);
  grid-template-columns: minmax(16rem, 0.7fr) minmax(24rem, 1.3fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: start;
  margin-inline: auto;
  padding-block: clamp(1.5rem, 4vw, 4rem);
}

.auth-shell__intro {
  padding-block-start: 1.25rem;
}

.auth-shell__intro h2 {
  margin: 0;
  color: var(--inner-hero-ink);
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: -0.05em;
}

.auth-shell__intro > p:not(.eyebrow) {
  line-height: 1.8;
}

.auth-shell > .panel {
  border-color: color-mix(in srgb, var(--inner-hero-middle) 28%, var(--color-line));
  padding: clamp(1.5rem, 4vw, 2.6rem);
  box-shadow: 0 1.6rem 4rem color-mix(in srgb, var(--inner-hero-ink) 8%, transparent);
}

.page-tone--document .document-layout {
  grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6.5rem);
}

.page-tone--document .document-nav.panel,
.page-tone--document .document-content.panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.page-tone--document .document-nav {
  border-block-start: 0.22rem solid var(--inner-hero-accent);
  padding-block-start: 1.25rem;
}

.page-tone--document .document-nav nav {
  margin-block-start: 1rem;
}

.page-tone--document .document-nav a {
  border-block-end: 1px solid var(--color-line);
  border-radius: 0;
  padding: 0.78rem 0.1rem;
}

.page-tone--document .document-content {
  max-width: 70rem;
}

.page-tone--document .document-section {
  display: grid;
  grid-template-columns: minmax(12rem, 0.34fr) minmax(0, 0.66fr);
  gap: 0.5rem clamp(2rem, 5vw, 5rem);
}

.page-tone--document .document-section h2 {
  grid-column: 1;
  grid-row: 1 / span 20;
  margin: 0;
  line-height: 1.35;
}

.page-tone--document .document-section p,
.page-tone--document .document-section ul {
  grid-column: 2;
  margin-block: 0;
  line-height: 1.9;
}

.page-tone--document .document-section p + p,
.page-tone--document .document-section p + ul {
  margin-block-start: 0.9rem;
}

.page-tone--document .document-section + .document-section {
  margin-block-start: clamp(2.5rem, 5vw, 4.5rem);
  padding-block-start: clamp(2.5rem, 5vw, 4.5rem);
}

.page-tone--control .container > .panel {
  border-width: 1px 0 0;
  border-radius: 0;
  background: transparent;
  padding: clamp(2rem, 4vw, 3.5rem) 0 0;
  box-shadow: none;
}

.page-tone--bazi .tool-layout,
.page-tone--wellbeing .tool-layout,
.page-tone--screening .tool-layout {
  width: min(100%, 76rem);
  grid-template-columns: minmax(0, 1fr);
  margin-inline: auto;
}

.page-tone--companion .chat-layout {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.chat-page > * + * { margin-block-start: 1.5rem; }

/* Keep the welcome illustration compact so the conversation is immediately usable. */
.chat-page > .inner-hero {
  width: 100%;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) 6rem;
  gap: 2rem;
  margin: 0;
  padding: 1.1rem 0;
  background: transparent;
}
.chat-page .inner-hero::before,
.chat-page .inner-hero::after,
.chat-page .inner-hero .eyebrow,
.chat-page .inner-hero__meta { display: none; }
.chat-page .inner-hero__copy { max-width: none; }
.chat-page .inner-hero__copy h1 {
  max-width: none;
  font-size: clamp(1.6rem, 2vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.chat-page .inner-hero__summary {
  max-width: none;
  margin-block-start: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.65;
}
.chat-page .inner-hero__art {
  width: 6rem;
  height: 6rem;
  min-height: 0;
  margin: 0;
}
.chat-page .inner-hero__art img { width: 100%; height: 100%; object-fit: contain; }
.chat-page > .chat-layout { margin-block-start: 0; }

@media (max-width: 36rem) {
  .chat-page > .inner-hero { grid-template-columns: minmax(0, 1fr) 4rem; gap: 0.8rem; }
  .chat-page .inner-hero__art { width: 4rem; height: 4rem; }
}

@media (max-width: 64rem) {
  .inner-hero {
    grid-template-columns: minmax(0, 1fr) minmax(21rem, 0.78fr);
    gap: 2rem;
  }

  .inner-hero__copy h1 {
    font-size: clamp(2.8rem, 6.5vw, 4.8rem);
  }

  .page-tone--document .document-section {
    grid-template-columns: 1fr;
  }

  .page-tone--document .document-section h2,
  .page-tone--document .document-section p,
  .page-tone--document .document-section ul {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 48rem) {
  .inner-hero {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding-block: 3.5rem 1.6rem;
  }

  .inner-hero::after {
    display: none;
  }

  .inner-hero__copy h1 {
    max-width: 14ch;
    font-size: clamp(2.65rem, 12vw, 4rem);
  }

  .inner-hero__art {
    width: min(100%, 27rem);
    margin-inline: auto;
  }

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

  .open-grid > .card,
  .open-grid > .card:first-child,
  .open-grid > .card:last-child {
    padding: 1.6rem 0;
  }

  .open-grid > .card + .card {
    border-block-start: 1px solid var(--color-line);
    border-inline-start: 0;
  }

  .auth-shell,
  .page-tone--document .document-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .auth-shell__intro {
    padding-block-start: 0;
  }

  .page-tone--document .document-nav {
    position: static;
  }

  .page-tone--document .document-nav nav {
    display: flex;
    overflow-x: auto;
    gap: 0;
    padding-block-end: 0.5rem;
    scrollbar-width: none;
  }

  .page-tone--document .document-nav a {
    flex: 0 0 auto;
    padding-inline: 0.75rem;
    white-space: nowrap;
  }

  .page-tone--control .cluster--between {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* Four Pillars: open reading flow, dual-calendar input and Chinese-zodiac gallery. */
.bazi-page {
  --bazi-rule: color-mix(in srgb, var(--inner-hero-accent) 24%, var(--color-line));
  gap: 0;
}

.page-tone--bazi .inner-hero {
  min-height: clamp(30rem, 36vw, 35rem);
  padding-inline: max(clamp(2rem, 5vw, 6rem), calc((100vw - var(--page-width)) / 2 + 1rem));
  padding-block: clamp(3.5rem, 5vw, 5rem);
}

.page-tone--bazi .inner-hero__copy h1 {
  font-size: clamp(3rem, 5.2vw, 5rem);
}

.bazi-entry,
.bazi-result,
.shengxiao-section,
.bazi-method,
.bazi-sources {
  width: 100%;
  padding-block: clamp(3.25rem, 5vw, 5.25rem);
}

.bazi-entry,
.bazi-result,
.shengxiao-section,
.bazi-method,
.bazi-sources {
  border-block-start: 1px solid var(--bazi-rule);
}

.bazi-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
  scroll-margin-block-start: 6rem;
}

.bazi-entry__intro h2,
.bazi-section-heading h2,
.bazi-section-heading h3 {
  max-width: none;
  margin: 0;
  color: var(--inner-hero-ink);
  font-family: var(--font-family-display, var(--font-sans));
  font-size: clamp(2.15rem, 3.7vw, 3.5rem);
  letter-spacing: -0.055em;
  line-height: 1.08;
}

.bazi-section-heading h3 {
  font-size: clamp(1.8rem, 3.4vw, 3rem);
}

.bazi-form {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 1.75rem clamp(2rem, 4vw, 4rem);
  align-items: start;
  border-block-start: 1px solid var(--bazi-rule);
  padding-block-start: 2rem;
}

.bazi-form__details {
  display: grid;
  min-width: 0;
  gap: 1.5rem;
}

.bazi-form__details > .field-help {
  margin: -0.75rem 0 0;
}

.bazi-form__group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
  border: 0;
  margin: 0;
  padding: 0;
  align-content: start;
}

.bazi-form__group[hidden] {
  display: none;
}

.bazi-form__group > legend {
  float: none;
  width: 100%;
  grid-column: 1;
  margin: 0 0 0.75rem;
  color: var(--inner-hero-ink);
  font-size: 1rem;
  font-weight: 820;
}

.bazi-form__group > :not(legend) {
  grid-column: 1;
}

.bazi-form__primary {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.65fr);
  gap: 1.5rem;
  align-items: start;
}

.bazi-form__date {
  min-width: 0;
}

.bazi-form .field {
  width: 100%;
  max-width: none;
}

.bazi-form input[type="date"],
.bazi-form input[type="time"],
.bazi-form input[type="number"],
.bazi-form input[type="text"],
.bazi-form select {
  min-width: 0;
  max-width: 100%;
  height: 3.25rem;
  min-height: 3.25rem;
  line-height: 1.4;
  border-color: var(--bazi-rule);
  background: color-mix(in srgb, var(--inner-hero-bg) 42%, #fff);
}

.bazi-form__group > .field + .field-help {
  margin: 0;
  line-height: 1.7;
}

.bazi-calendar-mode,
.bazi-luck-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--bazi-rule);
}

.bazi-calendar-mode label,
.bazi-luck-mode label {
  position: relative;
  cursor: pointer;
}

.bazi-calendar-mode label + label,
.bazi-luck-mode label:nth-child(even) {
  border-inline-start: 1px solid var(--bazi-rule);
}

.bazi-luck-mode label:nth-child(n + 3) {
  border-block-start: 1px solid var(--bazi-rule);
}

.bazi-calendar-mode input,
.bazi-luck-mode input {
  position: absolute;
  opacity: 0;
}

.bazi-calendar-mode span,
.bazi-luck-mode span {
  display: grid;
  gap: 0.2rem;
  min-height: 4.35rem;
  align-content: center;
  padding: 0.9rem 1.1rem;
  transition: background-color 180ms ease, color 180ms ease;
}

.bazi-calendar-mode span {
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  gap: 0.65rem;
  min-height: 3.35rem;
  padding: 0.75rem;
}

.bazi-calendar-mode small,
.bazi-luck-mode small {
  color: var(--color-muted);
}

.bazi-calendar-mode input:checked + span,
.bazi-luck-mode input:checked + span {
  background: var(--inner-hero-accent);
  color: #fff;
}

.bazi-calendar-mode input:checked + span small,
.bazi-luck-mode input:checked + span small {
  color: rgb(255 255 255 / 78%);
}

.bazi-calendar-mode input:focus-visible + span,
.bazi-luck-mode input:focus-visible + span {
  outline: 3px solid color-mix(in srgb, var(--inner-hero-accent) 42%, transparent);
  outline-offset: -3px;
}

.bazi-date-fields {
  grid-template-columns: 1.05fr 1fr 1fr;
  gap: 0.75rem;
}

.bazi-leap-check {
  width: fit-content;
}

.bazi-advanced {
  min-width: 0;
  border-inline-start: 1px solid var(--bazi-rule);
  padding-inline-start: clamp(2rem, 4vw, 4rem);
}

.bazi-advanced__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  margin-block-end: 1.25rem;
}

.bazi-advanced__heading .eyebrow {
  margin-block: 0 0.4rem;
}

.bazi-advanced__heading h3 {
  margin: 0;
  color: var(--inner-hero-ink);
  font-size: clamp(1.25rem, 1.65vw, 1.6rem);
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.bazi-advanced__heading > p {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.75;
}

.bazi-advanced > fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.bazi-advanced > fieldset > legend {
  margin-block-end: 0.9rem;
  color: var(--inner-hero-ink);
  font-weight: 820;
}

.bazi-advanced .field-help {
  margin-block: 1rem 0;
}

.bazi-submit {
  width: min(100%, 17rem);
  min-width: 14rem;
  margin: 0;
}

.bazi-form__footer {
  display: flex;
  grid-column: 1 / -1;
  justify-content: flex-end;
  gap: 1.25rem 2rem;
  align-items: center;
  border-block-start: 1px solid var(--bazi-rule);
  padding-block-start: 1.5rem;
}

.bazi-result[hidden],
.bazi-reading[hidden],
.bazi-reading__output[hidden] {
  display: none;
}

.bazi-result__body > * {
  margin-block: 0;
}

.bazi-result__body > * + * {
  margin-block-start: clamp(1.25rem, 2.5vw, 2.25rem);
}

.bazi-result__body > h3:not(:first-child) {
  margin-block-start: clamp(3.75rem, 6vw, 6rem);
}

.bazi-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.5fr);
  gap: 1rem clamp(2rem, 6vw, 6rem);
  align-items: end;
  margin-block-end: clamp(1.75rem, 3.5vw, 3.25rem);
}

.bazi-section-heading > p,
.bazi-section-heading > .text-button {
  justify-self: end;
}

.bazi-section-heading > p {
  max-width: 30rem;
  margin: 0;
  color: var(--color-muted);
  line-height: 1.75;
}

.bazi-entry > .bazi-entry__intro {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  margin: 0;
}

.bazi-entry__intro > p {
  max-width: none;
}

.text-button {
  border: 0;
  border-block-end: 1px solid currentColor;
  background: transparent;
  color: var(--inner-hero-accent);
  padding: 0.25rem 0;
  cursor: pointer;
  font: inherit;
  font-weight: 760;
}

.bazi-chart-summary {
  display: grid;
  min-height: clamp(18rem, 36vw, 31rem);
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.52fr);
  align-items: center;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--inner-hero-bg) 88%, #fff), color-mix(in srgb, var(--inner-hero-soft) 68%, #fff));
  padding: clamp(2rem, 6vw, 5.5rem);
}

.bazi-chart-summary::after {
  opacity: 0.45;
}

.bazi-chart-summary__animal {
  align-self: stretch;
  overflow: visible;
}

.bazi-name-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.bazi-name-strokes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
  gap: 0.75rem;
}

.bazi-name-analysis {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
  padding-block: 1.5rem;
}

.bazi-name-grids {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: 1.25rem;
  border-block: 1px solid var(--color-line);
  padding-block: 1.25rem;
}

.bazi-name-grids > article {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.6rem;
  min-width: 0;
}

.bazi-name-grids > article > strong {
  font-size: 1.5rem;
  color: var(--inner-hero-accent);
}

@media (max-width: 36rem) {
  .bazi-name-settings { grid-template-columns: 1fr; }
  .bazi-name-grids { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.bazi-chart-summary__animal img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1.4rem 1.5rem rgb(65 54 41 / 16%));
}

.page-tone--bazi .pillar-grid {
  gap: 0;
  border-block: 1px solid var(--bazi-rule);
}

.page-tone--bazi .pillar-card {
  min-height: 15rem;
  align-content: center;
  border-block-start: 0;
  padding: 2rem 1rem;
}

.page-tone--bazi .pillar-card + .pillar-card {
  border-inline-start: 1px solid var(--bazi-rule);
}

.page-tone--bazi .element-meter {
  gap: 0;
  border-block: 1px solid var(--color-line);
}

.page-tone--bazi .element-meter li {
  padding: 1.2rem;
}

.page-tone--bazi .element-meter li + li {
  border-inline-start: 1px solid var(--color-line);
}

.bazi-reading {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 1.5rem clamp(2rem, 4vw, 4rem);
  align-items: start;
  margin-block-start: clamp(1.5rem, 3vw, 3rem);
  border-block-start: 1px solid var(--bazi-rule);
  padding-block: clamp(2rem, 3vw, 3rem);
  scroll-margin-block-start: 6rem;
}

.bazi-page.is-reading-restored [data-bazi-entry],
.bazi-page.is-reading-restored [data-tool-result] {
  display: none;
}

.bazi-page.is-reading-restored .bazi-reading {
  margin-block-start: clamp(1.5rem, 3vw, 2.5rem);
}

.bazi-reading > .bazi-section-heading {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0;
  gap: 1rem;
  align-items: start;
}

.bazi-entry__intro h2,
.bazi-reading .bazi-section-heading h2 {
  font-size: clamp(1.75rem, 2.75vw, 2.65rem);
  line-height: 1.2;
}

.bazi-reading__intro {
  grid-column: 1 / -1;
  max-width: none;
  margin: 0;
  color: var(--color-muted);
  line-height: 1.85;
}

.bazi-reading__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.button__spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 1em;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: button-spin 1s linear infinite;
}
.button__spinner[hidden] { display: none; }
.button__copy { display: grid; gap: .15rem; text-align: start; }
.button__elapsed { font-size: .75rem; font-weight: 400; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
@keyframes button-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .button__spinner { animation: none; }
}

.bazi-page .result-actions { flex-wrap: wrap; }
.bazi-page .result-actions > [data-bazi-restored-actions]:empty { display: none; }
@media (max-width: 48rem) {
  .bazi-page .result-actions { gap: .5rem; }
  .bazi-page .result-actions .button,
  .bazi-page .result-actions .text-button { font-size: .8125rem; }
}

.bazi-reading > .progress-status,
.bazi-reading__output {
  grid-column: 1 / -1;
  min-width: 0;
}

.bazi-reading__output {
  margin-block-start: 0;
  border-block-start: 0.22rem solid var(--inner-hero-accent);
  padding-block-start: clamp(2rem, 5vw, 4rem);
}

.bazi-reading-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2.5rem, 6vw, 6rem);
}

.bazi-reading-sections > .bazi-reading-section:nth-child(n + 3),
.bazi-reading-sections > .bazi-name-analysis {
  grid-column: 1 / -1;
  max-width: none;
}

.bazi-reading-domains {
  margin-block-start: clamp(2.75rem, 6vw, 5rem);
}

.bazi-reading-current-focus {
  margin-block-start: clamp(2rem, 5vw, 4rem);
}

.bazi-reading-domains > h4 {
  margin: 0;
  color: var(--inner-hero-ink);
  font-size: clamp(1.55rem, 3vw, 2.35rem);
}

.bazi-reading-domain-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2.5rem, 6vw, 6rem);
}

.bazi-reading-domain {
  border-block-start: 1px solid var(--color-line);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
}

.bazi-reading-domain h4,
.bazi-reading-year-group h5,
.bazi-reading-guidance h5 {
  margin: 0;
  color: var(--inner-hero-ink);
}

.bazi-reading-domain > p,
.bazi-reading-basis p,
.bazi-reading-year-group > p {
  margin: 0.75rem 0 0;
  line-height: 1.85;
}

.bazi-reading-basis {
  border-inline-start: 0.2rem solid var(--inner-hero-accent);
  margin-block-start: 1.35rem;
  padding-inline-start: 1.1rem;
}

.bazi-reading-basis strong,
.bazi-reading-current-year > span,
.bazi-current-year > span {
  color: var(--inner-hero-accent);
  font-size: 0.76rem;
  font-weight: 820;
  letter-spacing: 0.08em;
}

.bazi-reading-guidance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-block-start: 1.5rem;
}

.bazi-reading-guidance ul {
  margin: 0.75rem 0 0;
  padding-inline-start: 1.2rem;
}

.bazi-reading-guidance li {
  line-height: 1.75;
}

.bazi-reading-guidance li + li {
  margin-block-start: 0.55rem;
}

.bazi-reading-section {
  border-block-start: 1px solid var(--color-line);
  padding-block: 1.8rem;
}

.bazi-reading-section h4,
.bazi-reading-timeline h4,
.bazi-reading-years h4 {
  margin: 0;
  color: var(--inner-hero-ink);
  font-size: clamp(1.35rem, 2.6vw, 2rem);
}

.bazi-reading-section p,
.bazi-reading-timeline p,
.bazi-reading-years p {
  margin: 0;
  line-height: 1.85;
}

.bazi-reading-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
}

.bazi-reading-sources span {
  color: var(--inner-hero-accent);
  font-size: 0.72rem;
  font-weight: 780;
}

.bazi-reading-timeline,
.bazi-reading-years {
  margin-block-start: clamp(2.5rem, 6vw, 5rem);
}

.bazi-reading-timeline__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2.5rem, 6vw, 6rem);
  margin: 0;
  padding: 0;
  counter-reset: none;
  list-style: none;
}

.bazi-reading-timeline__list > li {
  border-block-start: 1px solid var(--color-line);
  padding-block: 1.5rem;
}

.bazi-reading-year-groups,
.bazi-year-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2.5rem, 6vw, 6rem);
}

.bazi-reading-year-group,
.bazi-year-comparison__group {
  border-block-start: 1px solid var(--bazi-rule);
  padding-block-start: 1.5rem;
}

.bazi-reading-year-list > article {
  border-block-start: 1px solid var(--color-line);
  padding-block: 1.4rem;
}

.bazi-reading-current-year,
.bazi-current-year {
  display: grid;
  grid-template-columns: minmax(6rem, 0.22fr) minmax(8rem, 0.25fr) minmax(0, 1fr);
  gap: 0.75rem 1.5rem;
  align-items: center;
  border-block: 1px solid var(--bazi-rule);
  background: color-mix(in srgb, var(--inner-hero-bg) 45%, transparent);
  margin-block: 1.5rem 2rem;
  padding: 1.25rem clamp(1rem, 3vw, 2rem);
}

.bazi-reading-current-year > strong,
.bazi-current-year > strong {
  color: var(--inner-hero-ink);
  font-size: 1.15rem;
}

.bazi-reading-current-year > p,
.bazi-current-year > p {
  margin: 0;
  line-height: 1.75;
}

.bazi-reading-current-year > .bazi-reading-sources {
  grid-column: 3;
}

.bazi-reading-current-year--detail {
  display: block;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}

.bazi-reading-current-year__heading {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.5rem;
  align-items: baseline;
}

.bazi-reading-current-year__heading > span {
  color: var(--inner-hero-accent);
  font-size: 0.78rem;
  font-weight: 820;
  letter-spacing: 0.08em;
}

.bazi-reading-current-year__heading > strong {
  color: var(--inner-hero-ink);
  font-size: clamp(1.2rem, 2.2vw, 1.65rem);
}

.bazi-reading-current-year--detail > .bazi-reading-current-year__overall {
  max-width: none;
  margin-block-start: 1rem;
}

.bazi-reading-current-year__themes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block-start: 1.5rem;
  border-block-start: 1px solid var(--bazi-rule);
}

.bazi-reading-current-year__theme {
  border-block-end: 1px solid var(--bazi-rule);
  padding: 1.25rem 0;
}

.bazi-reading-current-year__theme:nth-child(odd) {
  padding-inline-end: clamp(1rem, 3vw, 2.5rem);
}

.bazi-reading-current-year__theme:nth-child(even) {
  border-inline-start: 1px solid var(--bazi-rule);
  padding-inline-start: clamp(1rem, 3vw, 2.5rem);
}

.bazi-reading-current-year__theme h5,
.bazi-reading-current-year__advice > strong {
  margin: 0;
  color: var(--inner-hero-ink);
  font-size: 0.95rem;
}

.bazi-reading-current-year__theme p,
.bazi-reading-current-year__advice p {
  margin-block-start: 0.55rem;
}

.bazi-reading-current-year__advice {
  border-inline-start: 0.2rem solid var(--inner-hero-accent);
  margin-block-start: 1.5rem;
  padding-inline-start: 1.1rem;
}

.bazi-reading-current-year--detail > .bazi-reading-sources {
  margin-block-start: 1.4rem;
}

.bazi-year-comparison__group h4,
.bazi-reading-year-group h5 {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
}

.bazi-year-comparison__group > p {
  min-height: 3.6em;
  margin: 0.7rem 0 1.2rem;
  color: var(--color-muted);
  line-height: 1.8;
}

.bazi-year-comparison .data-table {
  min-width: 38rem;
}

.shengxiao-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 3vw, 3rem);
}

.shengxiao-section {
  background: color-mix(in srgb, var(--inner-hero-bg) 32%, #fff);
  box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--inner-hero-bg) 32%, #fff);
  clip-path: inset(0 -100vmax);
}

.shengxiao-item {
  display: grid;
  grid-template-rows: minmax(19rem, 27rem) auto;
  border-block-start: 1px solid var(--bazi-rule);
  padding-block: clamp(1.4rem, 2.5vw, 2.2rem);
}

/* Fixed animal themes; never rotate or mirror scenes according to list order. */
.shengxiao-item[data-animal="rat"] { --facet-color: #758a9c; }
.shengxiao-item[data-animal="ox"] { --facet-color: #ad915e; }
.shengxiao-item[data-animal="tiger"] { --facet-color: #718768; }
.shengxiao-item[data-animal="rabbit"] { --facet-color: #9c88b5; }
.shengxiao-item[data-animal="dragon"] { --facet-color: #518e91; }
.shengxiao-item[data-animal="snake"] { --facet-color: #588b70; }
.shengxiao-item[data-animal="horse"] { --facet-color: #b58c65; }
.shengxiao-item[data-animal="goat"] { --facet-color: #849765; }
.shengxiao-item[data-animal="monkey"] { --facet-color: #668b73; }
.shengxiao-item[data-animal="rooster"] { --facet-color: #c59a4c; }
.shengxiao-item[data-animal="dog"] { --facet-color: #8a92a4; }
.shengxiao-item[data-animal="pig"] { --facet-color: #b6a169; }

.shengxiao-item__art {
  position: relative;
  display: grid;
  overflow: visible;
  place-items: end center;
  background: radial-gradient(
    ellipse at 50% 68%,
    color-mix(in srgb, var(--facet-color) 9%, transparent),
    transparent 70%
  );
  clip-path: none;
  isolation: isolate;
}

.faceted-backdrop {
  position: absolute;
  z-index: 0;
  inset: 6% -3% 0;
  width: 106%;
  height: 94%;
  overflow: visible;
  color: var(--facet-color);
  filter: drop-shadow(0.45rem 0.9rem 0.7rem rgb(83 65 42 / 7%));
  pointer-events: none;
}

.shengxiao-item img {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 1.15rem 1.1rem rgb(65 54 41 / 15%));
  transform: none;
  transform-origin: center bottom;
  transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.shengxiao-item:hover img {
  transform: translateY(-1%) scale(1.025);
}

.shengxiao-item > div:last-child {
  padding-block-start: 1.2rem;
}

.shengxiao-item > div:last-child > span {
  color: var(--inner-hero-accent);
  font-size: 0.78rem;
  font-weight: 820;
  letter-spacing: 0.12em;
}

.shengxiao-item h3 {
  margin: 0;
  color: var(--inner-hero-ink);
  font-size: clamp(1.35rem, 2.3vw, 1.9rem);
}

.shengxiao-item p {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.75;
}

.bazi-method__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-block: 1px solid var(--bazi-rule);
}

.bazi-method__grid article {
  min-width: 0;
  padding: clamp(1.4rem, 3vw, 2.4rem);
}

.bazi-method__grid article:first-child { padding-inline-start: 0; }
.bazi-method__grid article:last-child { padding-inline-end: 0; }
.bazi-method__grid article + article { border-inline-start: 1px solid var(--bazi-rule); }

.bazi-method__grid span {
  color: var(--inner-hero-accent);
  font-size: 0.76rem;
  font-weight: 820;
  letter-spacing: 0.1em;
}

.bazi-method__grid h3 {
  margin-block: 0.65rem;
  color: var(--inner-hero-ink);
}

.bazi-method__grid p {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.75;
}

.bazi-sources {
  scroll-margin-block-start: 5rem;
}

.bazi-source-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 3vw, 3rem);
  border-block: 1px solid var(--bazi-rule);
}

.bazi-source-list article {
  position: relative;
  display: grid;
  align-content: start;
  min-width: 0;
  padding-block: 2rem;
  text-align: center;
}

.bazi-source-list article:nth-child(n + 4) {
  border-block-start: 1px solid var(--bazi-rule);
}

.bazi-source-art {
  display: block;
  justify-self: center;
  width: min(100%, 24rem);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

.bazi-method__note,
.bazi-source-boundary {
  max-width: 72rem;
  margin: 2rem 0 0;
  color: var(--color-muted);
  line-height: 1.85;
}

@media (max-width: 78rem) {
  .shengxiao-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 68rem) {
  .bazi-source-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bazi-source-list article:nth-child(n + 3) {
    border-block-start: 1px solid var(--bazi-rule);
  }

  .bazi-form {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .bazi-advanced {
    border-inline-start: 0;
    border-block-start: 1px solid var(--bazi-rule);
    padding-inline-start: 0;
    padding-block-start: 1.5rem;
  }

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

  .bazi-method__grid article:nth-child(3) {
    border-inline-start: 0;
  }

  .bazi-method__grid article:nth-child(n + 3) {
    border-block-start: 1px solid var(--bazi-rule);
  }
}

@media (max-width: 62rem) {
  .shengxiao-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bazi-year-comparison,
  .bazi-reading-year-groups {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 48rem) {
  .bazi-entry,
  .bazi-result,
  .shengxiao-section,
  .bazi-method,
  .bazi-sources {
    padding-block: 3.5rem;
  }

  .bazi-form__primary,
  .bazi-form__footer,
  .bazi-entry > .bazi-entry__intro,
  .bazi-reading {
    grid-template-columns: 1fr;
  }

  .bazi-date-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bazi-date-fields > .field:first-child {
    grid-column: 1 / -1;
  }

  .bazi-submit,
  .bazi-reading__controls > .button {
    width: 100%;
    min-width: 0;
  }

  .bazi-entry,
  .bazi-reading {
    scroll-margin-block-start: 12rem;
  }

  .bazi-calendar-mode span {
    grid-template-columns: 1fr;
    gap: 0.1rem;
    text-align: center;
  }

  .bazi-luck-mode span {
    padding: 0.85rem 0.7rem;
    font-size: 0.9rem;
  }

  .bazi-reading-sections,
  .bazi-reading-domain-list,
  .bazi-reading-guidance,
  .bazi-reading-timeline__list,
  .bazi-reading-year-groups {
    grid-template-columns: 1fr;
  }

  .bazi-reading-current-year,
  .bazi-current-year {
    grid-template-columns: 1fr;
  }

  .bazi-reading-current-year > .bazi-reading-sources {
    grid-column: auto;
  }

  .bazi-reading-current-year__themes {
    grid-template-columns: 1fr;
  }

  .bazi-reading-current-year__theme:nth-child(odd),
  .bazi-reading-current-year__theme:nth-child(even) {
    border-inline-start: 0;
    padding-inline: 0;
  }

  .bazi-section-heading {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .bazi-section-heading > p,
  .bazi-section-heading > .text-button {
    justify-self: start;
  }

  .bazi-chart-summary {
    min-height: 0;
    grid-template-columns: 1fr;
    padding: 2rem 1.25rem 0;
  }

  .bazi-chart-summary__animal {
    height: 17rem;
  }

  .page-tone--bazi .pillar-grid,
  .page-tone--bazi .element-meter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-tone--bazi .pillar-card + .pillar-card,
  .page-tone--bazi .element-meter li + li {
    border-inline-start: 0;
  }

  .page-tone--bazi .pillar-card:nth-child(even),
  .page-tone--bazi .element-meter li:nth-child(even) {
    border-inline-start: 1px solid var(--bazi-rule);
  }

  .page-tone--bazi .pillar-card:nth-child(n + 3),
  .page-tone--bazi .element-meter li:nth-child(n + 3) {
    border-block-start: 1px solid var(--bazi-rule);
  }

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

  .shengxiao-item {
    grid-template-rows: 21rem auto;
  }

  .bazi-method__grid {
    grid-template-columns: 1fr;
  }

  .bazi-method__grid article,
  .bazi-method__grid article:first-child,
  .bazi-method__grid article:last-child {
    border-inline-start: 0;
    padding: 1.5rem 0;
  }

  .bazi-method__grid article + article {
    border-block-start: 1px solid var(--bazi-rule);
  }
}

@media (max-width: 40rem) {
  .bazi-sources {
    scroll-margin-block-start: 12rem;
  }

  .bazi-source-list {
    grid-template-columns: 1fr;
  }

  .bazi-source-list article {
    padding-block: 1.25rem;
  }

  .bazi-source-list article + article {
    border-block-start: 1px solid var(--bazi-rule);
  }

}

@media (prefers-reduced-motion: reduce) {
  .shengxiao-item img {
    transition: none;
  }
}

/* 16 型人格详情 Hero：每种人格使用独立场景，透明人物保持为前景层。 */
.character-card--intj { --personality-hero-background: url("../img/personality-hero-intj-v2.png"); }
.character-card--intp { --personality-hero-background: url("../img/personality-hero-intp-v2.png"); }
.character-card--entj { --personality-hero-background: url("../img/personality-hero-entj-v2.png"); }
.character-card--entp { --personality-hero-background: url("../img/personality-hero-entp-v2.png"); }
.character-card--infj { --personality-hero-background: url("../img/personality-hero-infj-v2.png"); }
.character-card--infp { --personality-hero-background: url("../img/personality-hero-infp-v2.png"); }
.character-card--enfj { --personality-hero-background: url("../img/personality-hero-enfj-v2.png"); }
.character-card--enfp { --personality-hero-background: url("../img/personality-hero-enfp-v2.png"); }
.character-card--istj { --personality-hero-background: url("../img/personality-hero-istj-v2.png"); }
.character-card--isfj { --personality-hero-background: url("../img/personality-hero-isfj-v2.png"); }
.character-card--estj { --personality-hero-background: url("../img/personality-hero-estj-v2.png"); }
.character-card--esfj { --personality-hero-background: url("../img/personality-hero-esfj-v2.png"); }
.character-card--istp { --personality-hero-background: url("../img/personality-hero-istp-v2.png"); }
.character-card--isfp { --personality-hero-background: url("../img/personality-hero-isfp-v2.png"); }
.character-card--estp { --personality-hero-background: url("../img/personality-hero-estp-v2.png"); }
.character-card--esfp { --personality-hero-background: url("../img/personality-hero-esfp-v2.png"); }

.profile-detail .profile-hero--personality {
  background-color: var(--profile-soft, #f7f3ed);
  background-image:
    linear-gradient(
      90deg,
      rgb(255 253 249 / 94%) 0%,
      rgb(255 253 249 / 88%) 27%,
      rgb(255 253 249 / 68%) 44%,
      rgb(255 253 249 / 22%) 61%,
      transparent 75%
    ),
    var(--personality-hero-background);
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: cover;
}

.profile-detail .profile-hero--personality::before,
.profile-detail .profile-hero--personality::after,
.profile-detail .profile-hero--personality.character-card::before,
.profile-detail .profile-hero--personality.character-card::after {
  display: none;
  content: none;
}

@media (max-width: 48rem) {
  .profile-detail .profile-hero--personality {
    background-image:
      linear-gradient(
        180deg,
        rgb(255 253 249 / 97%) 0%,
        rgb(255 253 249 / 91%) 29%,
        rgb(255 253 249 / 57%) 48%,
        rgb(255 253 249 / 14%) 72%,
        transparent 100%
      ),
      var(--personality-hero-background);
    background-position: center, 62% center;
  }
}

/* Keep the personality-result cascade last: legacy profile rules above remain for detail pages. */
.personality-index-shell > .result--personality {
  width: min(100%, 84rem);
  padding-block: clamp(3.5rem, 6vw, 6rem);
}

.personality-index-shell > .result--personality [data-result-body] {
  gap: clamp(3.25rem, 6vw, 5.5rem);
}

.personality-index-shell .result-personality__heading {
  width: 100%;
  margin-inline: 0;
  margin-block-end: clamp(2.5rem, 5vw, 4.5rem);
  text-align: start;
}

.personality-index-shell .result-personality__heading h2 {
  font-size: clamp(2.65rem, 4.6vw, 4.5rem);
  text-wrap: balance;
}

.personality-index-shell .result-personality__heading > p:last-child {
  max-width: 48rem;
  margin-inline: 0;
  font-size: clamp(1rem, 1.25vw, 1.12rem);
}

.personality-index-shell .result-attributes__heading {
  display: block;
  max-width: 55rem;
  margin-block-end: clamp(2.25rem, 4.5vw, 4rem);
}

.personality-index-shell .result-attributes__heading h3 {
  margin-block: 0.45rem 0.75rem;
}

.personality-index-shell .result-attributes__heading p {
  max-width: 48rem;
}

.personality-index-shell .result-attributes__layout {
  grid-template-columns: minmax(19rem, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.personality-index-shell .personality-radar {
  display: grid;
  gap: 0.8rem;
  width: min(100%, 25rem);
  aspect-ratio: auto;
  margin: 0 auto;
}

.personality-index-shell .result-dimension {
  gap: 0.7rem;
  padding-block: clamp(1.05rem, 2vw, 1.4rem);
}

.personality-index-shell .result-score-ring {
  background: transparent;
}

.personality-index-shell .result-score-ring::before {
  content: none;
}

.personality-index-shell .result-score-ring__graphic {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 63.999rem) {
  .personality-index-shell .result-attributes__layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(1rem, 3vw, 2rem);
    align-items: center;
  }

  .personality-index-shell .personality-radar {
    width: min(100%, 23rem);
  }
}

@media (max-width: 48rem) {
  .personality-index-shell > .result--personality {
    padding-block: 3rem;
  }

  .personality-index-shell .result-personality__heading {
    width: 100%;
    text-align: start;
  }

  .personality-index-shell .result-personality__heading > p:last-child {
    margin-inline: 0;
  }

  .personality-index-shell > .result--personality [data-result-body] {
    gap: 1.75rem;
  }

  .personality-index-shell .result-attributes {
    padding-block: 0.5rem 1rem;
  }

  .personality-index-shell .result-attributes__heading {
    margin-block-end: 1.25rem;
  }

  .personality-index-shell .result-attributes__heading h3 {
    font-size: clamp(1.5rem, 6vw, 2rem);
    margin-block: 0.4rem 0.5rem;
  }

  .personality-index-shell .result-attributes__heading p {
    font-size: 0.85rem;
    line-height: 1.6;
  }

  .personality-index-shell .result-attributes__layout {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: 0.85rem;
  }

  .personality-index-shell .personality-radar {
    width: min(100%, 16rem);
    gap: 0.5rem;
    align-self: center;
  }

  .personality-radar__labels:not(.personality-radar__labels--compact) {
    display: none;
  }

  .personality-radar__labels--compact {
    display: block;
  }

  .personality-radar__labels--compact text {
    font-size: 12px;
  }

  .personality-radar figcaption {
    font-size: 0.75rem;
    line-height: 1.5;
  }

  .personality-index-shell .result-dimension {
    min-width: 0;
    gap: 0.25rem;
    padding-block: 0.5rem;
  }

  .personality-index-shell .result-dimension:first-child {
    padding-block-start: 0;
  }

  .personality-index-shell .result-dimension:last-child {
    padding-block-end: 0;
  }

  .result-dimension__heading {
    gap: 0.35rem;
  }

  .result-dimension__title {
    min-width: 0;
    gap: 0.1rem;
  }

  .result-dimension__axis {
    min-width: 0;
    font-size: 0.75rem;
    letter-spacing: 0;
    line-height: 1.2;
  }

  .result-dimension__title strong {
    font-size: 0.82rem;
    line-height: 1.3;
  }

  .result-dimension__score {
    flex: 0 0 auto;
    font-size: 1rem;
    line-height: 1.4;
  }

  .result-dimension__meter {
    height: 0.5rem;
  }

  .result-dimension__labels {
    display: none;
  }

  .personality-index-shell .result-personality__actions {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (hover: hover) and (pointer: fine) {
  .personality-result-hero:hover .personality-result-hero__portrait {
    filter: saturate(1.04) contrast(1.02) drop-shadow(0 1.25rem 1.5rem color-mix(in srgb, var(--card-middle) 17%, transparent));
  }

  .personality-result-hero:is(.character-card--intj, .character-card--intp, .character-card--entj, .character-card--entp):hover .personality-result-hero__portrait {
    animation: personality-consider 840ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .personality-result-hero:is(.character-card--infj, .character-card--infp, .character-card--enfj, .character-card--enfp):hover .personality-result-hero__portrait {
    animation: personality-welcome 880ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .personality-result-hero:is(.character-card--istj, .character-card--isfj, .character-card--estj, .character-card--esfj):hover .personality-result-hero__portrait {
    animation: personality-nod 760ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .personality-result-hero:is(.character-card--istp, .character-card--isfp, .character-card--estp, .character-card--esfp):hover .personality-result-hero__portrait {
    animation: personality-spring 720ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
}
.share-actions { padding-block: 1rem; }
.result-actions { display: flex; align-items: center; gap: 1rem; justify-self: end; flex-wrap: nowrap; }
.result-actions .share-actions { padding: 0; }
.result-actions .button, .result-actions .text-button { white-space: nowrap; }
.result-personality__actions .result-actions { justify-content: center; }
.result-personality__actions .result-actions .button { width: auto; }
.result-actions .field-help:empty { display: none; }
@media (max-width: 48rem) {
  .bazi-reading > .bazi-section-heading { grid-template-columns: minmax(0, 1fr); }
  .result-actions { justify-self: start; gap: .75rem; }
  .result-actions .button { padding-inline: .875rem; }
}
.share-dialog { width: min(48rem, calc(100vw - 2rem)); max-width: none; }
.share-dialog .site-dialog__surface { max-height: calc(100dvh - 4rem); overflow-y: auto; text-align: left; }
.share-dialog input, .share-list-row input { width: 100%; min-width: 0; }
.share-list-row { padding-block: 1rem; border-bottom: 1px solid var(--color-line); }
.admin-page .page-main > .container { width: min(100% - 4rem, 108rem); max-width: none; }
.admin-page .page-main { padding-block: 2rem 3rem; }
.admin-page .page-main > .container.stack--large > * + * { margin-block-start: 1.5rem; }
.admin-page h1 { font-size: clamp(1.9rem, 3vw, 2.75rem); }
.admin-page h2 { font-size: 1.4rem; }
.admin-page p { max-width: none; }
.admin-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.admin-heading :is(h1,h2,p) { margin: 0; }
.admin-tabs { display: flex; gap: 2rem; overflow-x: auto; border-bottom: 1px solid var(--color-line); }
.admin-tabs a { flex: none; padding: .8rem .1rem; color: var(--color-text); text-decoration: none; border-bottom: 3px solid transparent; }
.admin-tabs a[aria-current="page"] { color: var(--color-primary, #326b65); border-bottom-color: currentColor; font-weight: 700; }
.admin-filters { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem 1.5rem; align-items: end; padding-bottom: 1.5rem; border-bottom: 1px solid var(--color-line); }
.admin-filters .field { min-width: 0; margin: 0; }
.admin-filters :is(input,select) { width: 100%; min-width: 0; min-height: 2.8rem; }
.admin-filters .button-row { align-self: end; }
.admin-heading > .button, .admin-filters .button-row > .button { width: auto; }
.admin-table { width: 100%; max-width: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.admin-table table { width: 100%; min-width: 65rem; border-collapse: collapse; table-layout: fixed; font-size: .875rem; line-height: 1.6; }
.admin-table th { text-align: left; background: #f0f5f3; font-weight: 600; color: #465f59; }
.admin-table :is(th,td) { padding: 1rem .8rem; border: 0; border-bottom: 1px solid var(--color-line); vertical-align: top; overflow-wrap: anywhere; }
.admin-table th:last-child { width: 23%; }
.admin-table tbody tr:hover { background: #f8faf9; }
.admin-table small { display: block; font-size: .8rem; color: #687a75; }
.admin-table time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.admin-table code { white-space: normal; font-size: .82rem; }
.admin-table details { margin-top: .5rem; }
.admin-table summary { cursor: pointer; font-size: .82rem; color: #326b65; }
.admin-table .button-row { gap: .35rem .8rem; margin-top: .6rem; }
.admin-owner { overflow-wrap: anywhere; font-size: .75rem; line-height: 1.65; }
.admin-owner > span { color: #687a75; }
.admin-empty { padding: 3rem 1rem !important; text-align: center; color: #687a75; }
.admin-record { padding-block: 1.25rem; border-bottom: 1px solid var(--color-line); }
.admin-content { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.9; max-height: none; color: inherit; background: #f5f8f6; padding: 1.25rem; border-radius: .4rem; }
.site-nav__item[hidden] { display: none; }
.admin-phone { display: block; margin-bottom: .25rem; white-space: nowrap; }
.service-stamp { font-size: .85rem; font-variant-numeric: tabular-nums; }
.service-row { display: grid; grid-template-columns: minmax(12rem,1fr) minmax(20rem,2fr) minmax(12rem,1fr); gap: 1.5rem 2rem; padding-block: 1.5rem; border-bottom: 1px solid var(--color-line); }
.service-row:first-child { border-top: 1px solid var(--color-line); }
.service-row h3 { font-size: 1.1rem; margin: 0; }
.service-row p { margin: 0; font-size: .875rem; }
.service-state { display: inline-flex; align-items: center; gap: .5rem; color: #63756f; font-size: .875rem; font-weight: 600; }
.service-state::before { content: ''; flex: 0 0 .5rem; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.service-state[data-tone="ok"] { color: #28745d; }
.service-state[data-tone="warn"] { color: #95611d; }
.service-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; gap: 1rem 1.5rem; margin: 0; }
.service-row dt { font-size: .78rem; color: #687a75; font-weight: 400; margin-bottom: .3rem; }
.service-row dd { margin: 0; font-size: .875rem; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.service-task details { margin-top: .65rem; }
.service-task summary { cursor: pointer; color: #326b65; font-size: .875rem; }
.service-task dl { margin-block: .75rem 0; }
@media (max-width: 60rem) { .service-row { grid-template-columns: minmax(0,1fr) minmax(0,2fr); } .service-task { grid-column: 2; } }
@media (max-width: 40rem) { .service-row { grid-template-columns: minmax(0,1fr); gap: 1.1rem; } .service-task { grid-column: auto; } .service-metrics { gap: .8rem; } }
.admin-pagination { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 1.5rem; padding-block: 1rem; border-top: 1px solid var(--color-line); font-size: .875rem; }
.admin-pagination__summary { margin: 0; color: #687a75; font-variant-numeric: tabular-nums; }
.admin-pagination__pages, .admin-pagination__controls { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin: 0; }
.admin-page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; min-height: 2.5rem; padding: .3rem .5rem; border: 1px solid #d5e0dc; border-radius: .35rem; color: #326b65; background: #fff; text-decoration: none; font-variant-numeric: tabular-nums; }
.admin-page-link:hover, .admin-page-link:focus-visible { background: #eaf2ef; color: #234e48; border-color: #8cafa6; }
.admin-page-link[aria-current="page"] { background: #326b65; border-color: #326b65; color: #fff; font-weight: 700; }
.admin-page-link[aria-disabled="true"] { background: #f5f7f6; color: #a0ada8; border-color: #e4ebe8; }
.admin-pagination__controls :is(input,select) { width: auto; min-width: 0; min-height: 2.5rem; padding: .35rem .5rem; margin: 0; }
.admin-pagination__controls input { width: 4.5rem; }
.admin-pagination__controls :is(label,span) { margin: 0; white-space: nowrap; color: #687a75; font-size: inherit; }
.admin-pagination__controls .button { min-height: 2.5rem; width: auto; padding: .35rem .65rem; font-size: inherit; }
.admin-pagination__controls label[for="admin-size"] { margin-left: .6rem; }
@media (max-width: 60rem) { .admin-filters { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 36rem) {
  .admin-page .page-main > .container { width: calc(100% - 2rem); }
  .admin-tabs { gap: 1.5rem; }
  .admin-filters { gap: .8rem; }
  .admin-filters .button-row { grid-column: 1 / -1; }
  .admin-pagination__pages { gap: .25rem; }
  .admin-page-link { min-width: 2rem; padding-inline: .4rem; }
}
@media (max-width: 42rem) {
  .share-dialog .site-dialog__surface { padding: 1rem; }
  .share-actions .button { width: 100%; }
}