/* October 2026 refinement. Keep the original presentation intact in style.css. */
:root {
  --text-small: 14px;
  --text-body: 18px;
  --text-display: 32px;
}
body { font-size: var(--text-small); }
img, svg { max-width: 100%; }
button, a { overflow-wrap: anywhere; }
#app > *, .profile-body > *, .profile-hero > *, .quiz-layout > * { min-width: 0; }

/* Three text sizes: hierarchy comes from weight, spacing and colour. */
.brand, .character-stamp, .site-header .nav-link, .header-help, .site-footer, .site-footer button,
.eyebrow, .intro-meta, .intro-secondary span, .intro-secondary .text-button,
.portrait-paper .paper-code, .portrait-paper .paper-caption, .art-tag,
.route-caption, .route-caption strong, .route-dim span, .route-dim small,
.page-intro p, .small-pill, .question-meta, .chapter-chip, .question-count,
.question-hint, .answer-label, .question-actions .text-button,
.quiz-bottom, .quiz-bottom kbd, .profile-choice, .journey h2,
.journey h2 small, .journey-station h3, .journey-station p, .station-number,
.guide-quote, .checkpoint p, .library-note, .group-title span,
.type-code, .type-card p, .card-explore, .profile-topbar,
.profile-topbar .text-button, .type-original, .tags span,
.voyage-label, .voyage-description, .voyage-score small,
.section-label span, .score-top, .score-number small, .score-caption,
.score-explanation, .company-profile span, .peer-note, .profile-disclaimer,
.profile-tools button, .scoring-table, .scoring-table th,
dialog .scoring-table, dialog p, dialog li, #toast {
  font-size: var(--text-small);
}
.primary-button, .secondary-button, .text-button, .dialog-close,
.intro-copy > p, .intro-copy .primary-button, .intro-meta b,
.question-title, .answer-num, .choice-key, .question-count b,
.question-actions .primary-button, .group-title h2, .type-card h3,
.profile-motto, .section-label, .score-letter, .description,
.trait-heading, .trait-heading span, .trait-item h3, .trait-item p, .teamwork,
.actions li, .services summary, .services p, .profile-buttons .primary-button,
.profile-buttons .secondary-button, dialog h3 {
  font-size: var(--text-body);
}
.intro h1, .page-intro h1, .library-intro h1, .checkpoint h2,
.chapter-seal, .big-code, .profile-hero h1, .voyage-name,
.voyage-score, .score-number, .actions li::before, .route-dim b, dialog h2 {
  font-size: var(--text-display);
}
.eyebrow { letter-spacing: 1.5px; line-height: 1.6; }
.intro h1 { line-height: 1.5; letter-spacing: -.02em; }
.intro-copy > p { max-width: 450px; }
.intro-meta { flex-wrap: wrap; gap: 14px 22px; line-height: 1.7; }
.intro-secondary { flex-wrap: wrap; }
.intro-secondary span, .library-note, .score-explanation,
.peer-note, .profile-disclaimer { color: #827360; }
.portrait-paper .paper-caption { letter-spacing: .5px; }
.intro-route { align-items: flex-start; }
.route-dim small { letter-spacing: .6px; }
.route-dim span { line-height: 1.6; }
.route-caption strong { font-weight: 600; }
.page-intro h1, .profile-hero h1, .checkpoint h2 { line-height: 1.5; }
.big-code { font-weight: 600; margin: 20px 0 8px; letter-spacing: 4px; }
.section-label { flex-wrap: wrap; gap: 10px 14px; }
.section-label span { letter-spacing: 1px; }
.score-caption { flex-wrap: wrap; line-height: 1.6; }
.score-number small { margin-left: 4px; }
.actions li, .description, .trait-item p, .teamwork { line-height: 1.95; }
.group-title { flex-wrap: wrap; }
.type-card p { min-height: 0; }
.type-card h3 { line-height: 1.6; }
.type-code { letter-spacing: 1.5px; }
.profile-topbar { gap: 16px; line-height: 1.7; flex-wrap: wrap; }
.tags span { padding: 7px 10px; }

/* A shared brand mark, with no text recreation or stretched logo. */
.brand { display: flex; flex: 0 0 auto; align-items: center; letter-spacing: 0; }
.brand-logo { display: block; width: 220px; height: auto; }
.brand span { display: none; }
.footer-brand { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.footer-brand img { display: block; width: 130px; height: auto; }
.character-stamp {
  width: auto; height: auto; min-width: 0; border: 0; border-radius: 0;
  padding: 8px 10px; background: #fffaf0e8; transform: none;
  right: 20px; bottom: 20px; display: block;
}
.profile-art .character-stamp .stamp-logo {
  display: block; width: 120px; height: auto; padding: 0;
  mix-blend-mode: normal; object-fit: contain;
}
.ui-icon {
  width: 18px; height: 18px; min-width: 18px; flex: 0 0 18px;
  display: inline-block; vertical-align: middle; fill: none;
  stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
button .ui-icon, a .ui-icon { pointer-events: none; }
.primary-button, .secondary-button, .text-button, .nav-link,
.site-footer button, .brand-links a {
  align-items: center;
}
.secondary-button, .text-button, .site-footer button { display: inline-flex; gap: 10px; justify-content: center; }
.nav-link .ui-icon { margin-left: 7px; }
.card-explore { gap: 8px; align-items: center; }
.dialog-close { display: grid; place-items: center; width: 40px; height: 40px; top: 8px; right: 9px; }

/* Normal full-line reading for all question text. */
.question-title {
  display: block; min-height: 0; width: 100%; text-wrap: wrap;
  text-align: left; word-break: normal; overflow-wrap: break-word;
  letter-spacing: 0; line-height: 1.9; margin: 25px 0 18px;
}
.question-count { white-space: nowrap; }
.question-count b { margin-right: 5px; font-weight: 600; }
.answer-label { letter-spacing: 0; }
.question-actions { flex-wrap: wrap; }
.question-actions .primary-button { margin-left: auto; }
.choice-key, .answer-num { flex-shrink: 0; }
.quiz-bottom { gap: 16px; }

/* The acronym is readable everywhere, including the compact library cards. */
.type-expansion {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; margin: 0 0 24px;
}
.type-word {
  display: grid; grid-template-columns: 35px minmax(0, 1fr); column-gap: 10px;
  align-content: center; padding: 17px 16px; min-width: 0;
  background: #f4ead9; border: 1px solid var(--line); border-radius: 8px;
}
.type-word b {
  grid-row: span 2; align-self: center; font: 600 var(--text-display)/1.3 Georgia, serif;
  color: var(--accent);
}
.type-word span { font-size: var(--text-small); font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.type-word small { display: block; font-size: var(--text-small); line-height: 1.6; margin-top: 3px; color: var(--muted); }
.dimension-key {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  padding: 25px 0 6px; border-top: 1px solid var(--line);
}
.dimension-key-item {
  padding: 19px; border-radius: 8px; border: 1px solid var(--line); background: var(--white); min-width: 0;
}
.dimension-key h3 { font-size: var(--text-body); margin: 0 0 17px; line-height: 1.5; }
.dim-pole { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 9px; align-items: start; }
.dim-pole + .dim-pole { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); }
.dim-pole strong, .dim-pole code { grid-row: span 2; font: 600 var(--text-body)/1.5 Georgia, serif; color: var(--accent); }
.dim-pole span { font-size: var(--text-small); line-height: 1.6; font-weight: 600; overflow-wrap: anywhere; }
.dim-pole small { font-size: var(--text-small); line-height: 1.6; color: var(--muted); }
.type-words-compact {
  display: flex; flex-wrap: wrap; gap: 5px 10px; padding-top: 13px; margin-top: 13px;
  border-top: 1px solid var(--line); font-size: var(--text-small); line-height: 1.5;
  color: #8c7050; overflow-wrap: anywhere;
}
.type-words-compact span { font-size: var(--text-small); display: inline-block; max-width: 100%; }

/* Company context and useful next steps replace the service catalogue. */
.about-eastora {
  padding: 35px 0 8px; margin-top: 34px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px 34px; align-items: start;
}
.about-eastora > img { display: block; width: 200px; height: auto; margin-top: 7px; }
.about-eastora h2 { font-size: var(--text-body); line-height: 1.6; }
.about-eastora p { font-size: var(--text-body); line-height: 1.95; color: #807360; }
.about-eastora > h2, .about-eastora > p, .about-eastora > .brand-links { grid-column: 2; }
.about-eastora > img { grid-row: 1 / span 3; }
.brand-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 18px; }
.brand-links a {
  font-size: var(--text-small); color: var(--accent); font-weight: 600;
  display: inline-flex; gap: 7px; text-underline-offset: 4px; line-height: 1.7;
}
.brand-follow {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .9fr); gap: 32px;
  align-items: center; margin-top: 30px; padding: 28px; background: #f3e9d8;
  border: 1px solid #e1d1b8; border-radius: 11px;
}
.follow-copy { min-width: 0; }
.follow-copy h2 { font-size: var(--text-body); line-height: 1.6; margin: 0 0 14px; }
.follow-copy p { font-size: var(--text-small); line-height: 1.95; color: #807360; }
.wechat-name { font-size: var(--text-body); font-weight: 600; margin: 16px 0 0; color: var(--ink); line-height: 1.7; }
.follow-copy .wechat-name { font-size: var(--text-body); color: var(--ink); }
.follow-visual { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 7px; background: var(--white); }

/* Save/share gives the phone a clear fallback when native sharing is absent. */
.share-card-preview {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 45svh;
  margin: 20px auto 22px; border-radius: 8px; border: 1px solid var(--line);
  box-shadow: 0 5px 18px #64492312; object-fit: contain;
}
.share-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; align-items: stretch; }
.share-actions button { flex: 1 1 160px; font-size: var(--text-small); gap: 10px; padding: 12px 16px; }
.share-instructions { margin: 20px 0 0; padding-left: 22px; }
.share-instructions li { margin: 8px 0; }
.share-status { font-size: var(--text-small); line-height: 1.8; color: var(--accent); min-height: 25px; margin-top: 12px; }
dialog { scroll-padding: 16px; }
dialog .scoring-table { table-layout: fixed; }
.scoring-table td, .scoring-table th { overflow-wrap: anywhere; vertical-align: top; }
.scoring-table small { font-size: var(--text-small); display: block; line-height: 1.6; color: var(--muted); }

/* Keep help on the left and leave the host's bottom-right badge untouched. */
.site-footer {
  flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 16px;
  padding-top: 24px; padding-right: 0; padding-bottom: calc(100px + env(safe-area-inset-bottom));
  line-height: 1.8; letter-spacing: 0;
}
.site-footer > span { max-width: none; }
.site-footer button { align-self: flex-start; padding: 5px 0; white-space: normal; }
#toast { bottom: calc(100px + env(safe-area-inset-bottom)); }

@media (max-width: 1100px) {
  .site-header { gap: 24px; }
  .brand-logo { width: 190px; }
  .type-expansion { gap: 10px; }
  .type-word { padding: 14px 12px; gap: 6px 8px; }
  .dimension-key { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intro-route { flex-wrap: wrap; justify-content: flex-start; gap: 24px 30px; }
  .route-caption { flex: 1 0 100%; }
}

@media (max-width: 800px) {
  :root { --text-display: 28px; }
  .brand-logo { width: 145px; }
  .site-header { gap: 18px; }
  .site-header nav { gap: 18px; }
  #app { padding-top: 28px; }
  .intro-copy > p { max-width: 480px; }
  .intro-route { gap: 20px 0; }
  .route-dim { width: 50%; gap: 12px; padding-right: 12px; }
  .route-caption { flex-wrap: wrap; }
  .quiz-layout { gap: 18px; }
  .question-meta { justify-content: flex-end; }
  .question-meta .chapter-chip { display: none; }
  .question-inner { padding: 20px 26px 26px; }
  .question-title { margin-top: 12px; margin-bottom: 16px; line-height: 1.9; }
  .journey-stations { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  .journey-station { flex-direction: column; gap: 8px; text-align: center; min-width: 0; }
  .journey-station h3 { line-height: 1.5; font-size: var(--text-small); }
  .station-number { width: 27px; height: 27px; font-size: var(--text-small); }
  .page-intro { margin-bottom: 20px; }
  .page-intro h1 { margin-top: 10px; }
  .type-expansion { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-hero-copy { padding: 28px; }
  .profile-motto { line-height: 1.8; }
  .type-word { padding: 15px; }
  .brand-follow { grid-template-columns: 1fr; gap: 25px; }
  .follow-visual { max-width: 560px; justify-self: center; }
  .about-eastora { grid-template-columns: 160px minmax(0, 1fr); gap: 15px 25px; }
  .about-eastora > img { width: 150px; }
  .quiz-bottom { text-align: center; }
  .actions { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .site-header { height: auto; min-height: 104px; padding: 17px 20px 0; gap: 12px; flex-wrap: wrap; }
  .brand { flex: 1 1 auto; }
  .brand-logo { width: 145px; }
  .header-help { width: 27px; height: 27px; font-size: var(--text-small); }
  .site-header nav { order: 3; width: 100%; height: 43px; margin: 0; gap: 28px; justify-content: center; }
  .site-header .nav-link { height: 43px; font-size: var(--text-small); }
  .nav-link .ui-icon { display: inline-block; }
  #app { padding-top: 24px; padding-bottom: 35px; }
  .intro h1 { line-height: 1.5; margin: 16px 0; }
  .intro-copy > p { font-size: var(--text-body); max-width: 100%; line-height: 1.9; }
  .intro-meta { gap: 8px 16px; margin: 20px 0 24px; }
  .intro-meta span + span { padding-left: 16px; }
  .intro-secondary { gap: 9px 18px; }
  .intro-art { height: 405px; margin-top: 31px; }
  .portrait-paper { padding-bottom: 15px; }
  .portrait-paper .paper-code { letter-spacing: 1.5px; padding-top: 11px; }
  .portrait-paper .paper-caption { margin-top: 6px; line-height: 1.5; }
  .art-tag { max-width: 90%; line-height: 1.7; letter-spacing: .8px; bottom: 9px; }
  .route-caption { align-items: flex-start; }
  .route-dim { align-items: flex-start; gap: 10px; }
  .route-dim b { line-height: 1.2; }
  .page-intro .eyebrow { letter-spacing: 1px; }
  .journey-stations { gap: 5px; }
  .journey-station { gap: 7px; }
  .journey-station h3 { max-width: 4em; line-height: 1.5; }
  .question-inner { padding: 15px 18px 23px; }
  .question-title { margin: 10px 0 15px; }
  .question-hint { margin-bottom: 17px; }
  .answers { gap: 6px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .answer { min-height: 106px; gap: 9px; padding: 11px 2px; }
  .answer.selected { padding: 10px 1px; }
  .answer-num { font-size: var(--text-body); width: 29px; height: 29px; }
  .answer-label { line-height: 1.5; }
  .question-actions { margin-top: 22px; padding-top: 20px; gap: 12px; }
  .question-actions .primary-button { padding: 12px 14px; gap: 10px; font-size: var(--text-small); }
  .question-actions .text-button { gap: 6px; }
  .profile-choice { padding: 12px 14px; line-height: 1.7; }
  .type-grid { gap: 12px; }
  .type-card-copy { padding: 14px 12px 17px; }
  .type-card h3 { font-size: var(--text-body); line-height: 1.6; }
  .type-card p { line-height: 1.8; }
  .card-explore { line-height: 1.6; }
  .type-words-compact { gap: 5px 8px; padding-top: 11px; margin-top: 11px; }
  .dimension-key { gap: 10px; padding-top: 21px; }
  .dimension-key-item { padding: 15px 12px; }
  .dimension-key h3 { font-size: var(--text-body); margin-bottom: 15px; }
  .dim-pole { gap: 2px 5px; grid-template-columns: 19px minmax(0, 1fr); }
  .type-expansion { gap: 10px; margin-bottom: 20px; }
  .type-word { padding: 13px 11px; grid-template-columns: 25px minmax(0, 1fr); gap: 4px 8px; }
  .profile-topbar { margin-bottom: 18px; gap: 10px; }
  .profile-topbar > span:last-child { font-size: var(--text-small); }
  .profile-hero-copy { padding: 26px; }
  .big-code { margin-top: 18px; }
  .profile-hero h1 { letter-spacing: 0; }
  .profile-art .character-stamp .stamp-logo { width: 105px; }
  .voyage-card { grid-template-columns: 1fr; gap: 15px; padding: 21px; }
  .voyage-name { margin-top: 4px; }
  .voyage-track i { width: 38px; }
  .score-card { padding: 15px; }
  .score-top { gap: 7px; flex-wrap: wrap; }
  .score-letter { width: 27px; height: 27px; }
  .score-caption { gap: 4px 7px; }
  .profile-buttons { align-items: stretch; }
  .profile-buttons .primary-button, .profile-buttons .secondary-button {
    width: 100%; padding: 14px 17px; min-height: 50px; gap: 12px; font-size: var(--text-body);
  }
  .profile-tools { flex-wrap: wrap; gap: 6px 25px; }
  .brand-follow { padding: 22px 19px; gap: 23px; }
  .brand-links { gap: 12px 19px; }
  .about-eastora { display: block; padding-top: 28px; }
  .about-eastora > img { width: 160px; margin: 0 0 22px; }
  .about-eastora h2 { margin-bottom: 12px; }
  .about-eastora p { line-height: 1.9; }
  .footer-brand { gap: 14px; align-items: flex-start; flex-direction: column; }
  .site-footer { gap: 13px; padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .site-footer > span { max-width: none; }
  dialog { padding: 35px 21px 25px; }
  dialog h2 { line-height: 1.5; }
  .scoring-table td, .scoring-table th { padding: 12px 5px; font-size: var(--text-small); }
  .share-actions { gap: 11px; }
  .share-actions button { flex-basis: 100%; }
}

@media (max-width: 350px) {
  .site-header { padding-left: 16px; padding-right: 16px; }
  .header-help { display: block; }
  .type-grid { gap: 9px; }
  .type-card-copy { padding-left: 10px; padding-right: 10px; }
  .card-explore { flex-wrap: wrap; }
  .question-inner { padding-left: 14px; padding-right: 14px; }
  .answers { gap: 4px; }
  .answer-label { font-size: var(--text-small); }
  .dimension-key, .type-expansion { gap: 8px; }
  .dimension-key-item { padding: 14px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Integrated brand links and share copy. */
.brand-logo, .footer-brand img, .stamp-logo { mix-blend-mode: multiply; }
.brand-links a.primary-button { color: #fff9ef; text-decoration: none; font-size: var(--text-body); }
.type-expansion { margin-top: 18px; }
.library-key summary { cursor: pointer; font-size: var(--text-small); padding: 14px 0; color: var(--accent); }
.share-copy-label { display: block; font-size: var(--text-small); margin-top: 18px; }
#share-caption { display: block; width: 100%; box-sizing: border-box; resize: vertical; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8f4eb; color: var(--ink); font-family: inherit; font-size: var(--text-small); line-height: 1.8; }
dialog .eyebrow { padding-right: 35px; }

/* 关注公众号卡片 + 底部按钮 */
.follow-card{display:flex;align-items:center;gap:16px;margin:18px 0 0;padding:14px;background:var(--white);border:1px solid var(--line);border-radius:10px;max-width:520px}
.follow-card-qr{flex:0 0 auto;width:116px;height:116px;display:block;border-radius:6px}
.follow-card-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.follow-card-label{font-size:12px;letter-spacing:.08em;color:var(--muted)}
.follow-card-text strong{font-size:15px;line-height:1.4;color:var(--ink);white-space:nowrap}
.follow-card-tip{font-size:13px;line-height:1.65;color:#807360;margin-top:2px}
.about-eastora .brand-links,.brand-follow .brand-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:520px;margin-top:14px}
.about-eastora .brand-links>*,.brand-follow .brand-links>*,.about-eastora .brand-links a.primary-button,.brand-follow .brand-links a.primary-button{width:100%;margin:0;min-height:48px;padding:10px 12px;gap:8px;white-space:nowrap;font-size:14px;justify-content:center;box-sizing:border-box;min-width:0}
@media (max-width:360px){.follow-card-qr{width:96px;height:96px}.about-eastora .brand-links,.brand-follow .brand-links{grid-template-columns:1fr}}