/* Shared type and control roles; each assessment keeps its own art and composition. */
:root {
  --font-ui: 'Gugu Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-editorial: 'Gugu Display', 'Songti SC', serif;
  --font-section: var(--font-editorial);
  --control-radius: 6px;
  font-family: var(--font-ui);
  font-optical-sizing: auto;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
body, button, input { font-family: var(--font-ui); }
h1 { font-family: var(--font-editorial); text-wrap: balance; }
h2, h3 { font-family: var(--font-section); text-wrap: pretty; }
p { text-wrap: pretty; }
button, summary, input { -webkit-tap-highlight-color: transparent; }
.primary, .secondary {
  min-height: 48px;
  padding: 13px 24px;
  border-radius: var(--control-radius);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .015em;
}
.primary:hover:not(:disabled) { transform: none; }
.text-button { font-size: 13px; line-height: 1.5; min-height: 44px; }
.question-body { margin: clamp(36px, 6svh, 64px) 0 24px; padding: 0; }
.question-body h1 {
  font-size: clamp(25px, 2.55vw, 32px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .01em;
  min-height: 0;
  max-width: 28em;
  text-wrap: pretty;
}
.question-context { font-size: 12px; letter-spacing: .04em; margin-bottom: 20px; line-height: 1.8; }
.question-navigation { margin-top: 0; }
.options { margin-top: 28px; }
.option { min-height: 66px; padding-top: 16px; padding-bottom: 16px; }
.option-label { font-size: 15px; line-height: 1.8; text-wrap: pretty; }
.counter, .axis-head, .dimension-header { font-variant-numeric: tabular-nums; }
.counter { font-size: 13px; }
.counter strong { font-size: 17px; font-weight: 500; }
.type-code, .type-card strong, .stat-value, .scl-result-heading h1, .dimension-header strong {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
}
.result-intro, .insights p, .traits li { font-size: 15px; line-height: 1.95; }
.section-title { font-size: 21px; letter-spacing: .01em; }
.section { margin-top: 40px; padding-top: 32px; }
.actions { gap: 12px; }
.result-links { gap: 24px; }
.notice:empty { display: none; }
.quiz-dialog { overflow: auto; padding: 28px; }
.dialog-heading { margin-bottom: 24px; gap: 16px; }
.dialog-heading h2 { font-family: var(--font-section); font-size: 23px; }
.close-dialog { width: 44px; height: 44px; flex-basis: 44px; border-radius: 50%; }
.close-dialog svg { width: 17px; height: 17px; }
.jump-grid { grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: 8px; }
.jump-grid button { min-height: 44px; font-size: 13px; aspect-ratio: 1; }
.atlas summary, .history-atlas summary, .history-preferences summary, .lifestyle-portrait summary {
  min-height: 44px; line-height: 1.6; align-items: center;
}
@media (max-width: 760px) {
  .question-body { margin: 36px 0 22px; padding: 0; }
  .question-body h1 { font-size: 26px; line-height: 1.65; min-height: 0; }
  .result-intro, .insights p, .traits li { font-size: 14px; }
}
@media (max-width: 480px) {
  .question-body { margin: 30px 0 20px; }
  .question-body h1 { font-size: 24px; }
  .question-context { font-size: 12px; letter-spacing: .025em; margin-bottom: 18px; }
  .options { margin-top: 24px; }
  .option { min-height: 66px; padding-top: 15px; padding-bottom: 15px; }
  .option-label { font-size: 14px; }
  .primary, .secondary { min-height: 48px; font-size: 14px; padding: 12px 20px; }
  .actions .primary, .actions .secondary { font-size: 13px; min-height: 48px; }
  .section { margin-top: 32px; padding-top: 26px; }
  .section-title { font-size: 20px; }
  .quiz-dialog { padding: 22px 18px; width: calc(100% - 24px); max-height: calc(100svh - 24px); }
  .jump-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
  .jump-grid button { min-height: 44px; }
  .dialog-heading h2 { font-size: 21px; }
}
@media (max-width: 360px) {
  .question-body h1 { font-size: 23px; }
  .jump-grid { gap: 6px; }
}