/* Shared design and circular EQ charts. Icons: Iconify / Lucide. */
:root { --accent: #1956D8; --action-bg: #1956D8; --label: #15283F; --text-secondary: #56677D; --surface-soft: #F6F9FE; --surface-tint: #EDF3FF; --r-lg: 12px; --r-xl: 16.5px; --ease-out: cubic-bezier(.23, 1, .32, 1); }
[hidden] { display: none !important; }
body { color: var(--label); background: #fff; line-height: 1.5; }
.icon { display: inline-block; width: 21px; height: 21px; flex: 0 0 auto; vertical-align: middle; color: currentColor; }
.brand-icon { display: inline-flex; color: var(--accent); }
.brand-icon .icon { width: 30px; height: 30px; }
.brand { gap: 10px; }
.site-header { min-height: calc(68px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); background: rgb(255 255 255 / .9); border-color: #E0E7F0; }
.section-wrap { width: min(1140px, calc(100% - 48px)); }
.button { border-radius: 10px; min-height: 50px; font-weight: 620; box-shadow: none; }
.button-primary { background: var(--action-bg); box-shadow: 0 2px 4px rgb(20 63 145 / .14); }
.button:disabled { transform: none; opacity: .42; cursor: default; }
.button-secondary { border-color: #D8E1ED; color: #4D607A; background: #fff; }
.top-nav .nav-screen { border-radius: 8px; }
.text-link { gap: 7px; }
.text-link .icon { width: 18px; height: 18px; }
.eyebrow { color: #5F7189; font-size: .72rem; letter-spacing: .07em; font-weight: 700; }
.eyebrow-icon { width: 16px; height: 16px; color: var(--accent); }
.hero { min-height: 610px; gap: 64px; }
.hero-copy { min-width: 0; }
.source-list a { overflow-wrap: anywhere; }
.hero h1 { font-weight: 620; letter-spacing: -.065em; }
.hero-lead { line-height: 1.5; }
.hero-meta { margin-top: 38px; }
.emotion-map { border-color: #DBE5F3; border-radius: 18px; background: radial-gradient(ellipse at center, #EAF1FC 0%, #F9FBFF 60%, #FFFFFF 100%); }
.map-core { gap: 3px; width: 116px; height: 116px; background: #fff; box-shadow: 0 4px 24px rgb(41 73 130 / .08); }
.map-core .icon { width: 30px; height: 30px; margin-inline: auto; }
.map-core span { font-size: 1.4rem; }
.map-core small { font-size: .66rem; }
.map-node { border-radius: 8px; border-color: #D9E4F3; padding: 11px 13px; box-shadow: 0 2px 5px rgb(28 62 115 / .035); }
.map-node .icon { width: 16px; height: 16px; color: var(--accent); }
.branch-icon { color: var(--accent); width: 23px; height: 23px; }
.branch-title h3 { font-weight: 620; }
.note-mark { background: transparent; }
.callout { border-color: #DFE7F2; background: #F8FAFD; border-radius: 12px; }
.callout-icon { border: 0; }
.callout-icon .icon { width: 21px; height: 21px; }
.model-footnote .icon { width: 18px; height: 18px; color: var(--accent); }
.site-footer { padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)); }

.assessment-section { padding-block: 76px 84px; background: linear-gradient(160deg, #F7FAFF, #EFF4FC); border-block: 1px solid #E4EBF5; scroll-margin-top: 24px; }
.assessment-header { align-items: center; gap: 40px; margin-bottom: 40px; }
.assessment-header h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.08; letter-spacing: -.055em; font-weight: 620; }
.assessment-intro { font-size: .95rem; max-width: 345px; line-height: 1.7; }
.assessment-layout { display: grid; grid-template-columns: 190px minmax(0, 700px); justify-content: space-between; gap: 40px; }
.test-directions { padding-top: 14px; }
.stage-list { display: grid; gap: 20px; padding: 0; margin: 0; list-style: none; }
.stage-chip { display: flex; align-items: center; gap: 12px; color: #7B8AA1; font-size: .83rem; font-weight: 550; }
.stage-symbol { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 9px; border: 1px solid #DFE6F1; }
.stage-symbol .icon { width: 19px; height: 19px; }
.stage-chip.is-current { color: var(--accent); font-weight: 650; }
.stage-chip.is-current .stage-symbol { background: #E7EEFC; border-color: #B5CAF3; }
.stage-chip.is-complete { color: #365784; }
.test-aside-note { display: flex; gap: 8px; align-items: start; margin: 30px 0 0; color: #75859B; font-size: .74rem; line-height: 1.5; }
.test-aside-note .icon { width: 17px; height: 17px; margin-top: 2px; }
.test-form { display: block; min-width: 0; }
.question-stage { padding: 30px 32px 25px; border: 1px solid #DCE5F2; border-radius: 12px; background: #fff; box-shadow: 0 12px 40px rgb(33 66 117 / .055); scroll-margin-top: 10px; }
.question-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.question-direction { display: inline-flex; align-items: center; gap: 8px; color: #48617F; font-size: .78rem; font-weight: 600; }
.question-direction .icon { width: 18px; height: 18px; color: var(--accent); }
.question-counter { color: #677C98; font: 500 .78rem/1 var(--font-mono); white-space: nowrap; }
.question-progress { width: 100%; height: 3px; display: block; margin: 16px 0 26px; appearance: none; border: none; background: #E7EDF6; border-radius: 4px; overflow: hidden; }
.question-progress::-webkit-progress-bar { background: #E7EDF6; }
.question-progress::-webkit-progress-value { background: var(--accent); }
.question-progress::-moz-progress-bar { background: var(--accent); }
.question-fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
.question-fieldset legend { display: block; width: 100%; min-height: 108px; padding: 0; margin-bottom: 21px; font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.3; font-weight: 600; letter-spacing: -.04em; }
.question-fieldset legend:focus { outline: none; }
.answer-options { display: grid; gap: 8px; }
.answer-option { display: block; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.answer-content { display: flex; align-items: center; gap: 13px; min-height: 57px; padding: 11px 15px; border: 1px solid #E4EAF3; border-radius: 8px; background: #FBFCFE; transition: transform 120ms var(--ease-out), background-color 120ms ease, border-color 120ms ease; }
.answer-number { display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center; border: 1px solid #DCE4F1; border-radius: 6px; color: #6B7E99; font-size: .8rem; font-weight: 600; }
.answer-text { flex: 1; font-size: .94rem; font-weight: 500; }
.answer-selected { display: flex; color: var(--accent); opacity: 0; }
.answer-selected .icon { width: 20px; height: 20px; }
.answer-option input:checked + .answer-content { color: #173E87; border-color: #739DEE; background: #EDF3FF; }
.answer-option input:checked + .answer-content .answer-number { color: #fff; background: var(--accent); border-color: var(--accent); }
.answer-option input:checked + .answer-content .answer-selected { opacity: 1; }
.answer-option input:focus-visible + .answer-content { outline: 3px solid var(--accent); outline-offset: 3px; }
.answer-option:active .answer-content { transform: scale(.987); }
.answer-option:has(input:disabled) { cursor: default; }
.test-navigation { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.test-navigation .button-primary { min-width: 176px; }
.test-navigation .button-secondary { padding-inline: 15px; }
.form-hint { min-height: 34px; margin: 14px 0 0; color: #71829A; font-size: .76rem; line-height: 1.45; }
.form-hint.is-error { color: var(--danger); }
.test-footnote { display: flex; align-items: start; gap: 8px; padding-inline: 3px; margin: 17px 0 0; color: #71829A; font-size: .73rem; line-height: 1.5; }
.test-footnote .icon { width: 17px; height: 17px; margin-top: 2px; }

.profile-result { grid-column: 1 / -1; max-width: 940px; width: 100%; padding: 38px; margin-inline: auto; background: #fff; border: 1px solid #DBE5F2; border-radius: 12px; box-shadow: 0 12px 40px rgb(33 66 117 / .05); scroll-margin-top: 10px; }
.result-status { display: flex; align-items: start; gap: 9px; margin-bottom: 28px; color: #237153; font-size: .8rem; }
.result-status .icon { width: 19px; height: 19px; }
.result-status p { margin: 0; }
.profile-result h3 { margin: 0 0 27px; font-size: clamp(1.9rem, 4vw, 2.65rem); line-height: 1.1; letter-spacing: -.055em; font-weight: 620; }
.result-overview { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 32px; align-items: center; padding-bottom: 28px; border-bottom: 1px solid #E1E8F2; }
#overall-result .score-ring { --ring-size: 174px; margin-inline: auto; }
.ring-caption { margin: 8px 0 0; color: #6C7F99; text-align: center; font-size: .72rem; }
.result-overview-copy > p:not(.eyebrow) { font-size: 1.07rem; line-height: 1.55; }
.result-overview-copy .result-scale-note { margin-bottom: 0; color: #72829A; font-size: .77rem !important; }
.score-ring { --ring-size: 120px; position: relative; display: block; width: var(--ring-size); height: var(--ring-size); flex: 0 0 auto; }
.ring-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ring-track, .ring-fill { fill: none; stroke-width: 7; }
.ring-track { stroke: #E5ECF6; }
.ring-fill { stroke: var(--accent); stroke-linecap: round; }
.ring-reading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-reading strong { color: #1B3A66; font-size: calc(var(--ring-size) * .26); font-weight: 620; line-height: 1.1; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.ring-reading small { margin-top: 4px; color: #71849E; font-size: 11px; }
.result-chart-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin: 25px 0 13px; }
.result-chart-heading h4 { margin: 0; font-size: 1rem; font-weight: 620; }
.result-chart-heading p { margin: 0; color: #7A8BA3; font-size: .75rem; }
.chart-fieldset { min-width: 0; border: 0; padding: 0; margin: 0; }
.dimension-chart { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 0; margin: 0; list-style: none; }
.dimension-option { display: block; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.dimension-face { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 9px 4px 14px; border-bottom: 2px solid transparent; transition: transform 120ms var(--ease-out); }
.dimension-option input:checked + .dimension-face { border-color: var(--accent); }
.dimension-option input:checked + .dimension-face .dimension-name { color: var(--accent); }
.dimension-option input:focus-visible + .dimension-face { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.dimension-option:active .dimension-face { transform: scale(.98); }
.dimension-name { display: flex; justify-content: center; align-items: center; gap: 5px; font-size: .76rem; font-weight: 600; color: #566F91; }
.dimension-name .icon { width: 16px; height: 16px; }
.profile-detail { padding: 23px 0; }
.profile-detail .eyebrow { margin-bottom: 8px; }
.profile-detail h4 { margin: 0 0 8px; font-size: 1.15rem; letter-spacing: -.03em; }
.profile-detail p { margin: 0; color: #5F718B; font-size: .9rem; line-height: 1.6; }
.practice-line { display: flex; gap: 11px; padding: 16px 18px; margin-top: 18px; border-left: 2px solid #6D99ED; background: #F4F7FC; }
.practice-line > .icon { width: 19px; height: 19px; color: var(--accent); margin-top: 3px; }
.practice-line strong { display: block; margin-bottom: 4px; font-size: .8rem; }
.practice-line p { font-size: .83rem; }
.result-insights { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; padding-block: 24px; border-block: 1px solid #E1E8F2; }
.result-insights article > .icon { margin-bottom: 10px; color: var(--accent); }
.result-insights h4 { margin: 0 0 8px; font-size: .96rem; line-height: 1.4; }
.result-insights p { margin: 0; color: #61748E; font-size: .83rem; line-height: 1.6; }
.result-boundary { display: flex; gap: 10px; align-items: start; padding-top: 22px; }
.result-boundary .icon { width: 17px; height: 17px; color: #7388A4; margin-top: 2px; }
.result-boundary p, .result-privacy { margin: 0; color: #73849D; font-size: .75rem; line-height: 1.55; }
.result-privacy { margin-top: 14px; }
.result-group-link { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 24px; margin-top: 24px; border-top: 1px solid #E1E8F2; }
.result-group-link p { margin: 0; font-size: .78rem; color: #7486A0; }
.result-group-link p strong { color: #294974; font-size: 1.5rem; font-weight: 600; margin-right: 5px; }
.result-group-link .text-link { font-size: .83rem; }

@media (hover: hover) and (pointer: fine) {
  .answer-option:hover .answer-content { background: #F0F5FD; border-color: #C7D6EF; }
  .dimension-option:hover .dimension-face { border-color: #A8BFEB; }
  .button-primary:hover { background: #1347BC; }
}
@media (max-width: 850px) {
  .hero { gap: 34px; min-height: auto; }
  .assessment-layout { grid-template-columns: 1fr; gap: 20px; max-width: 680px; margin-inline: auto; }
  .stage-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .stage-chip { flex-direction: column; gap: 6px; font-size: .72rem; }
  .test-aside-note { display: none; }
  .test-directions { padding: 0; }
}
@media (max-width: 600px) {
  .section-wrap { width: calc(100% - 36px); }
  .site-header { min-height: calc(62px + env(safe-area-inset-top, 0px)); padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
  .brand { font-size: .78rem; gap: 7px; }
  .brand-icon .icon { width: 25px; height: 25px; }
  .top-nav a:first-child { display: none; }
  .top-nav { gap: 10px; font-size: .76rem; }
  .top-nav .nav-screen { padding-inline: 10px; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-block: 48px 54px; }
  .hero h1 { font-size: clamp(2.15rem, 10.6vw, 3.8rem); }
  .hero-actions { gap: 18px; }
  .hero .text-link { font-size: .85rem; }
  .emotion-map { border-radius: 16px; }
  .map-node { padding: 9px 10px; font-size: .71rem; }
  .map-node .icon { width: 14px; height: 14px; }
  .map-core { width: 98px; height: 98px; }
  .map-core .icon { width: 25px; height: 25px; }
  .assessment-section { padding-block: 48px 56px; }
  .assessment-header { margin-bottom: 25px; }
  .assessment-header h2 { font-size: clamp(2rem, 8.2vw, 2.7rem); }
  .assessment-intro { margin-top: 18px; font-size: .88rem; }
  .assessment-layout { gap: 17px; }
  .stage-chip { position: relative; }
  .stage-symbol { width: 36px; height: 36px; flex-basis: 36px; }
  .stage-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .question-stage { padding: 22px 19px 18px; border-radius: 10px; scroll-margin-top: 8px; }
  .question-direction { font-size: .71rem; gap: 6px; }
  .question-direction .icon { width: 17px; height: 17px; }
  .question-counter { font-size: .7rem; }
  .question-progress { margin: 14px 0 22px; }
  .question-fieldset legend { min-height: 108px; margin-bottom: 18px; font-size: 1.35rem; line-height: 1.32; }
  .answer-content { min-height: 54px; padding: 10px 12px; gap: 12px; }
  .answer-text { font-size: .86rem; }
  .answer-number { width: 25px; height: 25px; flex-basis: 25px; }
  .test-navigation { margin-top: 21px; gap: 10px; }
  .test-navigation .button { font-size: .83rem; min-height: 49px; gap: 8px; padding-inline: 13px; }
  .test-navigation .button-primary { min-width: 0; flex: 1; }
  .test-navigation .button-secondary { padding-inline: 10px; }
  .test-navigation .button .icon { width: 17px; height: 17px; }
  .form-hint { font-size: .71rem; min-height: 32px; }
  .test-footnote { font-size: .7rem; }
  .profile-result { padding: 24px 19px; border-radius: 10px; scroll-margin-top: 8px; }
  .result-status { font-size: .74rem; margin-bottom: 23px; }
  .profile-result h3 { font-size: 2rem; margin-bottom: 22px; }
  .result-overview { grid-template-columns: 1fr; gap: 23px; }
  #overall-result .score-ring { --ring-size: 160px; }
  .result-overview-copy > p:not(.eyebrow) { font-size: .95rem; }
  .result-chart-heading { display: block; }
  .result-chart-heading p { margin-top: 6px; font-size: .72rem; }
  .dimension-chart { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .score-ring { --ring-size: clamp(94px, 30vw, 113px); }
  .dimension-name { font-size: .75rem; }
  .profile-detail p { font-size: .83rem; }
  .profile-detail h4 { font-size: 1.05rem; }
  .practice-line { padding: 14px 12px; }
  .practice-line p { font-size: .77rem; }
  .result-insights { grid-template-columns: 1fr; gap: 24px; }
  .result-group-link { display: block; }
  .result-group-link .text-link { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .answer-content, .dimension-face { transition: none; }
  .button:active, .answer-option:active .answer-content, .dimension-option:active .dimension-face { transform: none; }
}