/* ui-ux-pro-max #38 Neubrutalism: extend the original tokens, never replace them. */
@view-transition { navigation: none; }
.section.wrap, .section--tight.wrap { padding-inline: var(--s5); }
.section { padding-block: var(--s8); }
.section--tight { padding-block: var(--s6); }
.site-header__inner { min-height: 68px; }
.btn--lg { font-size: var(--t-h4); min-height: 56px; padding: var(--s4) var(--s5); }
.atlas-eyebrow { font: var(--w-bold) var(--t-xs)/1.6 var(--font-mono); letter-spacing: .06em; color: var(--text); }
.text-button { min-height: 44px; padding: var(--s2) 0; text-decoration: underline; text-underline-offset: 3px; font-weight: var(--w-bold); font-size: var(--t-sm); }
.storage-notice { margin-top: var(--s4); }
.records-dialog { width: min(560px, calc(100% - var(--s6))); max-height: calc(100dvh - var(--s7)); overflow-y: auto; padding: var(--s5); color: var(--text); background: var(--paper); border: var(--bw) solid var(--line); box-shadow: var(--sh); }
.records-dialog::backdrop { background: var(--overlay); }
body:has(dialog[open]) { overflow: hidden; }
.noscript { margin-block: var(--s5); }
.atlas-hero { padding-top: var(--s7); }
.atlas-hero-grid { display: grid; grid-template-columns: 1.08fr 1fr; gap: var(--s7); align-items: center; }
.atlas-hero .display { margin-top: var(--s5); line-height: 1.2; }
.atlas-hero .lead { margin-top: var(--s5); font-size: var(--t-h4); line-height: var(--lh-body); }
.atlas-hero .btn-group { margin-top: var(--s6); }
.atlas-meta { display: flex; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s5); color: var(--text-2); font-size: var(--t-xs); }
.atlas-meta > span { display: inline-flex; align-items: center; white-space: nowrap; }
.atlas-meta > span + span::before { content: '·'; margin-right: var(--s4); }
.atlas-map { position: relative; background: var(--paper-2); border: var(--bw) solid var(--line); padding: var(--s5) var(--s5) var(--s4); box-shadow: var(--sh-lg); }
.atlas-map__caption { display: inline-block; background: var(--yellow); color: var(--ink-on-accent); border: var(--bw-thin) solid var(--line); box-shadow: var(--sh-sm); padding: var(--s2) var(--s3); font: var(--w-black) var(--t-sm)/1.5 var(--font-sans); }
.atlas-plane { position: relative; aspect-ratio: 1; margin: var(--s7) var(--s3) var(--s6); background: var(--surface); border: var(--bw) solid var(--line); }
.atlas-plane::before, .atlas-plane::after { content: ''; position: absolute; background: var(--line); }
.atlas-plane::before { width: var(--bw); height: 100%; left: calc(50% - 1px); }
.atlas-plane::after { height: var(--bw); width: 100%; top: calc(50% - 1px); }
.atlas-place { position: absolute; z-index: 1; width: 42%; height: 40%; display: grid; align-content: center; justify-items: center; border: var(--bw-thin) solid var(--line); box-shadow: var(--sh-sm); font-size: var(--t-h4); font-weight: var(--w-black); color: var(--ink-on-accent); }
.atlas-place small { font: var(--w-bold) 9px/1.4 var(--font-mono); margin-top: var(--s2); text-align: center; }
.atlas-place--s { left: 3%; bottom: 4%; background: var(--mint); }
.atlas-place--a { left: 3%; top: 4%; background: var(--pink); }
.atlas-place--v { right: 3%; bottom: 4%; background: var(--blue); }
.atlas-place--f { right: 3%; top: 4%; background: var(--purple); }
.atlas-axis { position: absolute; font-size: var(--t-xxs); font-weight: var(--w-bold); color: var(--text); }
.atlas-axis--y { left: 0; top: -28px; }
.atlas-axis--x { right: 0; bottom: -28px; }
.atlas-map__foot { display: flex; justify-content: space-between; gap: var(--s3); font: var(--w-bold) 10px/1.5 var(--font-mono); }
.atlas-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: var(--bw) solid var(--line); padding-block: var(--s5); gap: var(--s6); }
.atlas-strip strong { display: block; font-size: var(--t-body); margin-bottom: var(--s2); }
.atlas-strip p { font-size: var(--t-sm); color: var(--text-2); }
.atlas-section-title { display: flex; justify-content: space-between; align-items: end; gap: var(--s5); margin-bottom: var(--s6); }
.atlas-section-title h2 { margin-top: var(--s2); }
.atlas-section-title > p { max-width: 380px; font-size: var(--t-sm); color: var(--text-2); }
.atlas-type { padding: var(--s5) var(--s4); border: var(--bw) solid var(--line); box-shadow: var(--sh); color: var(--ink-on-accent); }
.atlas-type:nth-child(1) { background: var(--mint); }
.atlas-type:nth-child(2) { background: var(--pink); }
.atlas-type:nth-child(3) { background: var(--blue); }
.atlas-type:nth-child(4) { background: var(--purple); }
.atlas-type h3 { margin-top: var(--s4); }
.atlas-type p { font-size: var(--t-sm); margin-top: var(--s3); }
.atlas-type small { font: var(--w-bold) 10px/1.5 var(--font-mono); }
.atlas-preview { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--s7); align-items: center; }
.atlas-sample { background: var(--surface); border: var(--bw) solid var(--line); padding: var(--s6); box-shadow: var(--sh-lg); }
.atlas-sample > .atlas-eyebrow { display: inline-block; background: var(--purple); color: var(--ink-on-accent); border: var(--bw-thin) solid var(--line); padding: var(--s2); }
.atlas-sample h3 { margin: var(--s5) 0 var(--s4); }
.atlas-sample p { font-size: var(--t-sm); }
.atlas-sample blockquote { margin-top: var(--s5); padding: var(--s4) var(--s5); border: var(--bw-thin) solid var(--line); border-left-width: var(--s2); background: var(--paper-2); font-size: var(--t-sm); font-weight: var(--w-med); }
.atlas-sample .tiny { margin-top: var(--s4); }
.atlas-checklist { display: grid; gap: var(--s3); margin-block: var(--s5); font-size: var(--t-sm); }
.atlas-checklist li::before { content: '↗'; margin-right: var(--s3); font-weight: var(--w-black); }
.atlas-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
/* 双人模式暂时停用：保留代码与内容，切回 data-duo="on" 即可恢复。 */
html[data-duo="off"] [data-duo] { display: none !important; }
html[data-duo="off"] .atlas-products { max-width: 800px; margin-inline: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.atlas-product { padding: var(--s5); border: var(--bw) solid var(--line); box-shadow: var(--sh); background: var(--surface); display: flex; flex-direction: column; }
.atlas-product--featured { background: var(--yellow); color: var(--ink-on-accent); }
.atlas-product--featured .atlas-eyebrow, .atlas-product--featured .tiny { color: var(--ink-on-accent); }
.atlas-price { font-size: 40px; font-weight: var(--w-black); font-family: var(--font-sans); letter-spacing: -.04em; margin-block: var(--s3); }
.atlas-price small { font: var(--w-bold) var(--t-xs)/1.5 var(--font-sans); letter-spacing: 0; }
.atlas-product ul { flex: 1; }
.atlas-product .btn { margin-top: var(--s3); }
.atlas-faq { border-top: var(--bw) solid var(--line); }
.atlas-faq details { border-bottom: var(--bw-thin) solid var(--line); padding: var(--s5) 0; }
.atlas-faq summary { cursor: pointer; font-weight: var(--w-black); }
.atlas-faq details p { margin-top: var(--s3); font-size: var(--t-sm); color: var(--text-2); }
.atlas-bottom { padding: var(--s7); text-align: center; background: var(--yellow); color: var(--ink-on-accent); border: var(--bw) solid var(--line); box-shadow: var(--sh-lg); }
.atlas-bottom .atlas-eyebrow, .atlas-bottom .muted { color: var(--ink-on-accent); }
.atlas-bottom p { margin: var(--s3) auto var(--s5); }
.atlas-mobile-cta { display: none; }
.atlas-redeem { padding: var(--s5); border: var(--bw) solid var(--line); background: var(--surface); box-shadow: var(--sh-sm); margin-top: var(--s5); }
.atlas-redeem form { display: flex; gap: var(--s3); margin-top: var(--s3); flex-wrap: wrap; }
.atlas-redeem input { flex: 1; min-width: 160px; }
.atlas-redeem label { font-weight: var(--w-black); font-size: var(--t-sm); }
.atlas-redeem .tiny { margin-top: var(--s3); }
.atlas-status { min-height: var(--s5); font-size: var(--t-xs); color: var(--text-2); overflow-wrap: anywhere; }
.atlas-status[data-error] { color: var(--text); border-left: var(--bw) solid var(--red); padding-left: var(--s2); }
.atlas-purchase { display: flex; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s5); }
.atlas-purchase .btn { flex: 1; }
.paywall { padding: var(--s6); }
/* 付费墙标题在 390px 上会断出单字成行（「…的起 / 点」）。balance 把两行拉平。 */
.paywall h2 { text-wrap: balance; }
.paywall__price, .paywall small { font-family: var(--font-sans); }
.paywall__list { font-size: var(--t-sm); }
.paywall__list li { line-height: var(--lh-body); }
.typecard { padding: var(--s6); }
.typecard__name { font-size: clamp(44px, 9vw, 74px); }
.typecard__foot { font-size: var(--t-xs); flex-wrap: wrap; gap: var(--s2); }
.likert__btn { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-tight); min-height: 64px; }
.likert__btn small { font-size: 10px; font-weight: var(--w-med); line-height: 1.3; }
.likert__btn span { font-size: var(--t-h3); }
.likert__anchors { display: none; }
[data-page="quiz"] #q-text { min-height: 110px; outline: 0; }
[data-page="quiz"] .likert { margin-top: var(--s6); }
[data-page="quiz"] #cushion { min-height: var(--s7); }
[data-page="quiz"] .card { padding: var(--s6); }
/* 报告正文采用「单页文档」而不是八张卡片堆叠，减少边框切碎阅读节奏。 */
[data-page="report"] h1 { text-wrap: balance; }
[data-page="report"] .report-toc ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2) var(--s5);
  padding: 0;
  list-style: none;
}
[data-page="report"] .report-toc a {
  display: block;
  padding-block: var(--s1);
  color: var(--text-2);
  font-size: var(--t-sm);
  line-height: 1.65;
  border-bottom: var(--bw-thin) solid color-mix(in srgb, var(--line) 12%, transparent);
}
@media (hover: hover) {
  [data-page="report"] .report-toc a:hover { color: var(--text); }
}
[data-page="report"] #sections {
  max-width: 760px;
  padding: var(--s7) var(--s6);
  background: var(--surface);
  border: var(--bw) solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh);
}
[data-page="report"] .report-section {
  padding: var(--s7) 0;
  border: 0;
  border-bottom: var(--bw-thin) solid color-mix(in srgb, var(--line) 18%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
[data-page="report"] .report-section:first-child { padding-top: 0; }
[data-page="report"] .report-section:last-child { padding-bottom: 0; border-bottom: 0; }
[data-page="report"] .report-section__title {
  padding-bottom: var(--s3);
  border-bottom: var(--bw-thin) solid var(--line);
  font-size: clamp(23px, 3vw, 28px);
  line-height: 1.4;
  letter-spacing: -.02em;
  text-wrap: balance;
}
[data-page="report"] .report-body {
  margin-top: var(--s5);
  max-width: 38em;
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: clamp(16.5px, 1.5vw, 17.5px);
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: .012em;
  text-wrap: pretty;
}
[data-page="report"] .report-body > * + * { margin-top: 1.05em; }
[data-page="report"] .report-body p,
[data-page="report"] .report-body .rich-p {
  max-width: none;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
[data-page="report"] .report-body strong {
  color: var(--text);
  font-weight: var(--w-black);
}
[data-page="report"] .report-body .rich-list {
  display: grid;
  gap: var(--s2);
  margin-block: .95em;
  padding-left: 1.35em;
}
[data-page="report"] .report-body .rich-list li {
  padding-left: .15em;
  color: var(--text-2);
  font-size: inherit;
  line-height: 1.85;
}
[data-page="report"] .report-body .rich-list li::marker {
  color: var(--text);
  font-weight: var(--w-black);
}
[data-page="report"] .report-body .rich-subhead {
  display: block;
  margin-top: 1.65em;
  margin-bottom: .55em;
  padding-left: var(--s3);
  border-left: var(--bw-thick) solid var(--yellow);
  color: var(--text);
  font-size: 1.06em;
  font-weight: var(--w-black);
  line-height: 1.55;
  letter-spacing: -.01em;
}
[data-page="report"] .report-body .rich-subhead strong { font-weight: inherit; }
[data-page="report"] .report-body .quote {
  margin-block: 1.15em;
  padding: var(--s4) var(--s5);
  border-left-width: var(--s2);
  background: var(--paper-2);
  color: var(--text);
  font-size: .97em;
}
[data-page="report"] #sections + .divider { margin-top: var(--s7); }
.atlas-report-tools { padding: var(--s5); background: var(--paper-2); border: var(--bw) solid var(--line); margin-top: var(--s5); }
.merchant-page { max-width: 780px; }
.merchant-page h1 { text-wrap: balance; }
.merchant-step { display: flex; align-items: flex-start; gap: var(--s4); }
.merchant-step > span { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border: var(--bw-thin) solid var(--line); border-radius: 50%; background: var(--yellow); color: var(--ink-on-accent); font: var(--w-black) var(--t-xs)/1 var(--font-mono); }
.merchant-step h2 { font-size: var(--t-h3); line-height: 1.35; }
.merchant-step .tiny { margin-top: var(--s1); }
.merchant-page .field { min-width: 0; }
.merchant-page select.input { min-height: 48px; }
.merchant-page #order-lookup-form .row { flex-wrap: nowrap; align-items: stretch; }
.merchant-page #order-lookup-form .row .input { flex: 1 1 auto; width: auto; min-width: 0; }
.merchant-page #order-lookup-form .row .btn { flex: 0 0 auto; }
.merchant-page .merchant-delivery { margin-top: var(--s5); padding: var(--s5); border: var(--bw-thin) dashed var(--line); border-radius: var(--r-sm); background: var(--paper-2); }
.merchant-code { margin-top: var(--s4); padding: var(--s4); border: var(--bw) solid var(--line); border-radius: var(--r-sm); background: var(--surface); font: var(--w-black) clamp(18px, 3.5vw, 24px)/1.4 var(--font-mono); letter-spacing: .04em; overflow-wrap: anywhere; user-select: all; }
.merchant-page textarea.input { font-family: var(--font-mono); font-size: var(--t-xs); line-height: 1.7; }
.merchant-record { margin-top: var(--s5); padding-top: var(--s5); border-top: var(--bw-thin) solid var(--line); }
.merchant-record dl { display: grid; gap: var(--s3); }
.merchant-record dl > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: var(--s3); align-items: baseline; }
.merchant-record dt { color: var(--text-3); font-size: var(--t-xs); }
.merchant-record dd { margin: 0; font-size: var(--t-sm); font-weight: var(--w-bold); overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .merchant-step > span { flex-basis: 30px; width: 30px; height: 30px; }
  .merchant-page .grid--2 { grid-template-columns: minmax(0, 1fr); }
  .merchant-page #order-lookup-form .row { flex-wrap: wrap; align-items: stretch; }
  .merchant-page .row .input { flex-basis: 100%; width: 100%; }
  .merchant-page .row .btn { width: 100%; }
  .merchant-record dl > div { grid-template-columns: 76px minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .wrap, .section.wrap, .section--tight.wrap { padding-inline: var(--s5); }
  .section { padding-block: var(--s7); }
  .site-header__inner { gap: var(--s2); min-height: 64px; }
  .site-nav a { font-size: var(--t-xs); padding: var(--s-tight) var(--s2); }
  .brand { gap: var(--s2); font-size: var(--t-md); }
  .site-header .btn--sm { font-size: var(--t-xs); min-height: 40px; padding: var(--s-tight) var(--s2); }
  .lang-toggle { min-height: 40px; min-width: 40px; }
  .site-header #lang-toggle { display: none; }
  .atlas-hero-grid, .atlas-preview { grid-template-columns: 1fr; gap: var(--s7); }
  .atlas-hero { padding-top: var(--s6); }
  .atlas-hero .display { font-size: 38px; }
  .atlas-hero .lead { font-size: var(--t-md); }
  .atlas-map { width: 100%; max-width: 390px; margin-inline: auto; padding: var(--s5) var(--s4) var(--s4); box-shadow: var(--sh); }
  .atlas-map__caption { font-size: var(--t-xs); }
  .atlas-place { font-size: var(--t-md); }
  .atlas-place small { font-size: 8px; letter-spacing: -.02em; }
  .atlas-strip { grid-template-columns: 1fr; gap: var(--s5); }
  .atlas-strip > div { display: grid; grid-template-columns: 110px 1fr; gap: var(--s3); }
  .atlas-strip strong { margin: 0; font-size: var(--t-sm); }
  .atlas-section-title { display: block; }
  .atlas-section-title > p { margin-top: var(--s4); }
  .atlas-products, html[data-duo="off"] .atlas-products { grid-template-columns: 1fr; gap: var(--s5); }
  .atlas-product, .atlas-bottom, .atlas-sample { padding: var(--s5); }
  .atlas-meta { gap: var(--s2) var(--s3); }
  .atlas-meta > span + span::before { display: none; }
  .atlas-mobile-cta { display: flex; position: fixed; bottom: 0; left: 0; right: 0; align-items: center; justify-content: space-between; padding: var(--s3) var(--s5) calc(var(--s4) + env(safe-area-inset-bottom)); background: var(--surface); border-top: var(--bw) solid var(--line); z-index: 90; gap: var(--s3); }
  .atlas-mobile-cta > span { font-size: var(--t-xxs); color: var(--text-2); }
  .atlas-mobile-cta strong { display: block; color: var(--text); font-size: var(--t-sm); }
  .atlas-mobile-cta .btn { padding-inline: var(--s4); white-space: nowrap; flex-shrink: 0; }
  /* 按实际 CTA 高度留位，兼顾英文换行、字体变化和设备安全区。无 JS 时保留默认高度。 */
  body[data-page="landing"] { padding-bottom: calc(var(--mobile-cta-height, calc(89px + env(safe-area-inset-bottom))) + var(--s4)); }
  .typecard, .paywall { padding: var(--s5); }
  .typecard__foot { margin-top: var(--s5); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
  .atlas-type { padding: var(--s4); }
  .atlas-type h3 { font-size: var(--t-h4); }
  .atlas-type p { font-size: var(--t-xs); }
  .atlas-purchase .btn { flex-basis: 100%; }
  [data-page="quiz"] .card { padding: var(--s5) var(--s4); }
  .likert__scale { grid-template-columns: 1fr; gap: var(--s2); }
  .likert__btn { flex-direction: row; justify-content: flex-start; min-height: 45px; padding: var(--s2) var(--s4); gap: var(--s4); box-shadow: var(--sh-sm); }
  .likert__btn small { font-size: var(--t-xs); }
  .likert__btn span { font-size: var(--t-md); min-width: 18px; }
  [data-page="quiz"] .likert { margin-top: var(--s5); }
  [data-page="quiz"] #q-text { min-height: 84px; }
  [data-page="quiz"] .section { padding-block: var(--s5); }
  [data-page="quiz"] #cushion { min-height: 0; margin-bottom: var(--s3); font-size: var(--t-xxs); line-height: 1.6; }
  [data-page="quiz"] .section > p:first-child { font-size: var(--t-xxs); line-height: 1.6; margin-bottom: var(--s3); }
  [data-page="report"] h1 { font-size: 26px; line-height: 1.38; }
  [data-page="report"] .report-toc ol { grid-template-columns: minmax(0, 1fr); gap: 0; }
  [data-page="report"] .report-toc a { padding-block: var(--s2); }
  [data-page="report"] #sections { padding: var(--s5) var(--s4); }
  [data-page="report"] .report-section { padding: var(--s6) 0; }
  [data-page="report"] .report-section__title { font-size: 22px; }
  [data-page="report"] .report-body { margin-top: var(--s4); font-size: 16.5px; line-height: 1.9; letter-spacing: .006em; }
  [data-page="report"] .report-body .rich-subhead { font-size: 1.04em; }
}
@media (max-width: 359px) {
  .wrap, .section.wrap, .section--tight.wrap { padding-inline: var(--s4); }
  .site-nav a { padding-inline: var(--s-tight); }
  .brand { gap: var(--s-tight); font-size: var(--t-sm); }
  .brand__mark { width: 26px; height: 26px; font-size: var(--t-xs); }
  .site-header .btn--sm { font-size: var(--t-xxs); }
  .atlas-hero .display { font-size: 33px; }
  .atlas-plane { margin-inline: var(--s-tight); }
  .atlas-place { font-size: var(--t-sm); }
  .atlas-place small { font-size: 7px; }
  .atlas-type { padding: var(--s3); }
}
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  :root, [data-theme="dark"] {
    color-scheme: light;
    --paper: var(--print-paper);
    --paper-2: var(--print-paper);
    --surface: var(--print-paper);
    --surface-alt: var(--print-paper);
    --text: var(--print-ink);
    --text-2: var(--print-ink);
    --text-3: var(--print-ink);
    --line: var(--print-ink);
    --shade: var(--print-ink);
  }
  .atlas-mobile-cta, .atlas-redeem, .atlas-report-tools { display: none !important; }
  .card, .atlas-product, .atlas-sample { box-shadow: none; break-inside: avoid; }
  [data-page="report"] #sections { padding: 0; border: 0; box-shadow: none; }
  [data-page="report"] .report-section { break-inside: auto; }
  [data-page="report"] .report-section__title { break-after: avoid; }
  [data-page="report"] .report-body .rich-subhead { break-after: avoid; }
}

/* =====================================================
   体验升级：柔和纸感、可探索地图与有功能的动效
   ===================================================== */
body { transition: background-color var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease); }
.btn, .input, .textarea, .brand__mark, .progress, .likert__btn { border-radius: var(--r-md); }
.card, .atlas-map, .atlas-type, .atlas-product, .atlas-sample, .atlas-bottom,
.atlas-redeem, .atlas-report-tools, .paywall, .typecard, .note, .quad,
.stat, details.acc { border-radius: var(--r); }
.progress { height: 14px; box-shadow: none; }
.progress__bar { border-right: 0; }
.atlas-map { transform-origin: center; }
.atlas-map__caption { border-radius: var(--r-pill); }
.atlas-plane { overflow: hidden; border-radius: var(--r-md); }
.atlas-place { cursor: pointer; padding: var(--s2); border-radius: var(--r-sm); transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease); }
.atlas-place__name { pointer-events: none; }
.atlas-place small { pointer-events: none; }
.atlas-place.is-active { z-index: 2; transform: translate(-2px, -2px); box-shadow: var(--sh); }
.atlas-plane:has(.atlas-place.is-active) .atlas-place:not(.is-active) { opacity: .78; }
.atlas-dot { position: absolute; z-index: 3; left: 50%; top: 50%; width: 18px; aspect-ratio: 1; border: var(--bw) solid var(--line); border-radius: 50%; background: var(--surface); outline: 6px solid color-mix(in srgb, var(--yellow) 64%, transparent); box-shadow: var(--sh-sm); pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.4); transition: left 380ms var(--ease), top 380ms var(--ease), transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease); }
.atlas-dot.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.atlas-map__insight { min-height: 3.2em; margin: calc(-1 * var(--s3)) 0 var(--s4); color: var(--text-2); font-size: var(--t-xs); line-height: 1.65; }
.atlas-type, .atlas-product { transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease); }
@media (hover: hover) {
  .atlas-type:hover, .atlas-product:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
  .atlas-place:hover { transform: translate(-2px, -2px); box-shadow: var(--sh); }
}

/* 首屏只播放一次，不使用循环漂浮或粒子。 */
@keyframes atlasEnter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes quadrantEnter { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.atlas-hero-grid > div > * { animation: atlasEnter 420ms var(--ease) both; }
.atlas-hero-grid > div > *:nth-child(2) { animation-delay: 50ms; }
.atlas-hero-grid > div > *:nth-child(3) { animation-delay: 90ms; }
.atlas-hero-grid > div > *:nth-child(4) { animation-delay: 130ms; }
.atlas-hero-grid > div > *:nth-child(n+5) { animation-delay: 170ms; }
.atlas-map { animation: atlasEnter 460ms var(--ease) 100ms both; }
.atlas-place { animation: quadrantEnter 320ms var(--ease) backwards; }
.atlas-place--a { animation-delay: 220ms; }
.atlas-place--f { animation-delay: 280ms; }
.atlas-place--s { animation-delay: 340ms; }
.atlas-place--v { animation-delay: 400ms; }
.atlas-place.is-active { animation: none; }
.motion-ready .motion-reveal { opacity: 0; transform: translateY(18px); }
.motion-ready .motion-reveal.is-visible { opacity: 1; transform: none; transition: opacity 440ms var(--ease), transform 440ms var(--ease); }

/* 答题：先确定参照，再作答；状态反馈不移动点击目标。 */
.quiz-context { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4); border: var(--bw-thin) solid var(--line); border-radius: var(--r); background: var(--paper-2); }
.quiz-context__icon { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: var(--yellow); color: var(--ink-on-accent); font-weight: var(--w-black); }
.quiz-context p { font-size: var(--t-xs); line-height: 1.65; color: var(--text-2); }
.quiz-context p strong, .quiz-context p > span { display: block; }
.quiz-context p strong { margin-bottom: var(--s1); color: var(--text); font-size: var(--t-sm); }
.quiz-card { position: relative; }
.quiz-card::before { content: ''; position: absolute; inset: 0 0 auto; height: var(--s2); background: var(--yellow); border-bottom: var(--bw-thin) solid var(--line); border-radius: var(--r) var(--r) 0 0; }
.quiz-card__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.quiz-card__meta .tiny { margin: 0; }
.quiz-saved { display: inline-flex; align-items: center; gap: var(--s-tight); white-space: nowrap; color: var(--text-3); font-size: var(--t-xxs); }
.quiz-saved i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); border: 1px solid var(--line); }
[data-page="quiz"] #q-text { font-size: clamp(22px, 3.6vw, 30px); line-height: 1.48; letter-spacing: -.02em; }
.quiz-footnote { margin-top: var(--s5); padding-top: var(--s3); border-top: var(--bw-thin) solid var(--line); color: var(--text-3); font-size: var(--t-xxs); line-height: 1.6; }
.likert__btn { position: relative; }
.likert__btn[aria-pressed="true"]::after { content: '✓'; position: absolute; right: var(--s2); top: var(--s1); font-size: var(--t-xs); font-weight: var(--w-black); }
@keyframes choiceConfirm { 0% { opacity: .72; } 100% { opacity: 1; } }
.likert__btn[aria-pressed="true"] { animation: choiceConfirm 140ms var(--ease); }

/* 结果：按阅读顺序入场，维度条只动合成层属性。 */
@keyframes barReveal { from { transform: scaleX(0); } to { transform: scaleX(1); } }
[data-page="result"] .typecard { animation: atlasEnter 420ms var(--ease) both; }
[data-page="result"] #dims { animation: atlasEnter 420ms var(--ease) 100ms both; }
[data-page="result"] .dimbar__fill { transform-origin: left center; animation: barReveal 640ms var(--ease) 220ms both; }
[data-page="result"] #behaviors > * { animation: atlasEnter 360ms var(--ease) both; }
[data-page="result"] #behaviors > *:nth-child(2) { animation-delay: 80ms; }
[data-page="result"] #behaviors > *:nth-child(3) { animation-delay: 160ms; }

@media (max-width: 760px) {
  /* 手机端头部换行后接近 106px，吸顶会在 844px 高的屏幕上长期吃掉 1/8 视野。
     这个产品的手机场景是「答 36 题」和「读长报告」，持续可见的导航价值低于版面，
     所以手机端让它随页面滚走；桌面端仍然吸顶。 */
  .site-header { position: static; }
  .site-header__inner { flex-wrap: wrap; }
  .site-header #lang-toggle { display: inline-flex; }
  .site-nav { order: 5; flex-basis: 100%; padding-bottom: var(--s1); }
  .quiz-context { padding: var(--s3); }
  .quiz-card__meta { align-items: flex-start; }
  .atlas-map__insight { min-height: 4.8em; }
  .atlas-dot { width: 15px; outline-width: 4px; }
  .likert__btn[aria-pressed="true"]::after { top: 50%; right: var(--s4); transform: translateY(-50%); }
}

/* =====================================================
   文艺引文 & 文化侧影
   —— 引文是页面里唯一「不提要求」的元素：不加按钮、不加链接，
      只用一条细线隔开，给读者一个停顿。
   —— 文化侧影只展示当前类型对应的那一位；边界说明写在区块末尾，
      字号刻意压到 tiny，避免它比人物本身更抢眼。
   ===================================================== */

.epigraph {
  margin: 0;
  padding: var(--s6) 0;
  border-block: var(--bw-thin) solid var(--line);
  text-align: center;
}
.epigraph blockquote {
  font-size: clamp(17px, 2.2vw, 21px);
  line-height: 1.85;
  font-weight: var(--w-med);
  letter-spacing: .01em;
  text-wrap: balance;
  color: var(--text);
}
.epigraph figcaption {
  margin-top: var(--s4);
  color: var(--text-3);
  font: var(--w-bold) var(--t-xxs)/1.6 var(--font-mono);
  letter-spacing: .04em;
}
.epigraph cite { font-style: normal; }
.epigraph--report { margin-top: var(--s6); }
.epigraph--close { margin-top: var(--s7); }

/* 购买与售后：拆成两条完整句，各自成行。
   原先是一整句话，窄屏上会在「未提供商品入口时」后面断开，
   末尾只剩「购买。」两个字，读起来像排版事故。 */
.purchase-note {
  display: grid;
  gap: 2px;
  max-width: var(--measure);
  color: var(--text-3);
  text-wrap: pretty;
}
.purchase-note span { display: block; }

.echo {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  margin: 0;
  border: var(--bw) solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}
.echo__media {
  position: relative;
  margin: 0;
  border-right: var(--bw) solid var(--line);
  background: var(--paper-2);
}
.echo__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.echo__tag {
  position: absolute;
  left: var(--s4);
  bottom: var(--s4);
  padding: var(--s2) var(--s3);
  border: var(--bw-thin) solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font: var(--w-bold) 10px/1.4 var(--font-mono);
  letter-spacing: .06em;
  box-shadow: var(--sh-sm);
}
.echo__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: var(--s6);
}
.echo__name { margin-top: var(--s3); font-size: var(--t-h2); line-height: 1.24; }
.echo__name small {
  display: block;
  margin-top: var(--s2);
  color: var(--text-3);
  font: var(--w-bold) var(--t-xxs)/1.6 var(--font-mono);
  letter-spacing: .02em;
}
.echo__quote {
  margin: var(--s5) 0 0;
  padding-left: var(--s4);
  border-left: var(--bw) solid var(--yellow);
}
.echo__quote p {
  font-size: var(--t-h4);
  line-height: 1.8;
  font-weight: var(--w-med);
  text-wrap: pretty;
}
.echo__quote cite {
  display: block;
  margin-top: var(--s3);
  color: var(--text-3);
  font-style: normal;
  font-size: var(--t-xxs);
}
.echo__why {
  margin-top: var(--s5);
  color: var(--text-2);
  font-size: var(--t-sm);
  line-height: 1.9;
  text-wrap: pretty;
}
.echo-note {
  margin-top: var(--s4);
  max-width: var(--measure);
  color: var(--text-3);
  line-height: 1.7;
  text-wrap: pretty;
}

@media (max-width: 760px) {
  .echo { grid-template-columns: 1fr; box-shadow: var(--sh); }
  .echo__media { border-right: 0; border-bottom: var(--bw) solid var(--line); }
  .echo__media img { aspect-ratio: 5 / 4; }
  .echo__body { padding: var(--s5); }
  .echo__name { font-size: var(--t-h3); }
  .echo__quote p { font-size: var(--t-body); }
  .epigraph { padding: var(--s5) 0; }
}

@media print {
  .echo, .epigraph { box-shadow: none; }
  .echo { break-inside: avoid; }
}

/* 段落换行收尾：避免最后一行只剩一两个字。
   只作用在区块导语上，不影响正文的既有排版。 */
.section__head p { text-wrap: pretty; }