:root {
  color-scheme: light;
  --paper:#fbf8f0; --white:#fffdf8; --ink:#2d2440; --muted:#625970;
  --line:#e4dcee; --violet:#5c3fb3; --deep:#49318f; --lilac:#eee7fc;
  --shadow:0 15px 38px #38265c0b;
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
  color:var(--ink); background:var(--paper);
  -webkit-text-size-adjust:100%;
}
*, *::before, *::after {box-sizing:border-box}
body {margin:0; min-height:100vh; display:flex; flex-direction:column}
main {flex:1}
button {font:inherit; cursor:pointer; color:inherit; -webkit-tap-highlight-color:transparent}
a {color:inherit}
a, button {touch-action:manipulation}
img {display:block; max-width:100%; height:auto}
p,h1,h2,h3,figure {margin:0}
h1,h2,h3 {line-height:1.25}
[hidden] {display:none!important}
:focus-visible {outline:3px solid #6849c4; outline-offset:4px}
h1[tabindex]:focus, main:focus {outline:none}
.skip {position:absolute; z-index:4; left:12px; top:8px; padding:10px; border-radius:8px; background:white; transform:translateY(-160%)}
.skip:focus {transform:none}
.wrap {width:min(1200px,calc(100% - 96px)); margin-inline:auto}
.topbar {border-bottom:1px solid #eae2ef; background:#fbf8f0}
.topbar-inner {min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand {border:0; background:none; padding:4px 0; display:inline-flex; align-items:center; gap:10px; min-height:44px; text-align:left}
.brand strong {font-size:21px; letter-spacing:.08em; white-space:nowrap}
.brand span,.footer-en {font:700 10px/1 system-ui,sans-serif; letter-spacing:.16em; color:#625481; white-space:nowrap}
.brand span {border-left:1px solid #dcd0e7; padding-left:11px}
.nav-link {display:flex; align-items:center; gap:7px; min-height:44px; font-size:14px; font-weight:700; text-decoration:none}
.nav-link span {color:var(--violet)}
.nav-link:hover {text-decoration:underline}
.hero {display:grid; grid-template-columns:minmax(0,.93fr) minmax(0,1.13fr); align-items:center; gap:clamp(26px,4vw,66px); padding-block:clamp(48px,5vw,76px) 40px}
.hero-copy {padding-block:9px}
.eyebrow {display:flex; align-items:center; gap:8px; font-size:13px; font-weight:800; color:var(--violet); letter-spacing:.12em; line-height:1.6}
.spark {font-size:1.15em; line-height:1}
.hero h1 {font-size:clamp(33px,4vw,61px); letter-spacing:-.05em; margin:21px 0; line-height:1.22; font-weight:900}
.hero-mark {color:var(--violet); position:relative; isolation:isolate; white-space:nowrap}
.hero-mark::after {content:""; z-index:-1; position:absolute; inset:auto -3% 5%; height:22%; background:#ffda84; border-radius:50% 20% 50% 20%; transform:rotate(-4deg)}
.hero-text {font-size:clamp(15px,1.4vw,17px); color:var(--muted); line-height:1.85; max-width:26em}
.hero-action {margin-top:28px; display:grid; justify-items:start; gap:12px}
.hero-action p {font-size:13px; color:var(--muted)}
.primary,.secondary {display:inline-flex; gap:21px; align-items:center; justify-content:center; border-radius:13px; padding:0 22px; min-height:53px; border:1px solid transparent; font-weight:800; letter-spacing:.04em}
.primary {background:var(--violet); color:white; box-shadow:0 5px 0 #392574}
.primary:hover {background:var(--deep)}
.primary:active {transform:translateY(3px); box-shadow:0 2px 0 #392574}
.button-arrow {font-size:22px; line-height:1}
.secondary {background:var(--white); border-color:#d4c7e5; color:var(--deep)}
.secondary:hover {background:var(--lilac)}
.island-scene {position:relative; background:#ede1fc; border:1px solid #d8c9e7; border-radius:27px; overflow:hidden; box-shadow:var(--shadow)}
.island-scene img {width:100%; aspect-ratio:640/448}
.island-scene figcaption {position:absolute; top:16px; left:16px; display:flex; align-items:center; gap:6px; padding:7px 9px; border-radius:7px; background:#fffaf2ec; border:1px solid #e1d3ec; font-size:10px; color:#504064; font-weight:800; letter-spacing:.09em}
.island-scene figcaption span:last-child {margin-left:5px; color:#665779; font:700 9px/1 system-ui,sans-serif}
.scene-dot {width:6px; height:6px; border-radius:50%; background:#8c6ccd}
.details-strip {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); background:var(--white); border:1px solid var(--line); border-radius:18px; padding:17px 7px; box-shadow:var(--shadow)}
.details-strip>div {padding:4px 10px; min-width:0; display:flex; gap:14px; justify-content:center; align-items:center}
.details-strip>div+div {border-left:1px solid var(--line)}
.details-strip strong,.details-strip small {display:block}
.details-strip strong {font-size:15px}
.details-strip small {color:var(--muted); font-size:12px; margin-top:4px}
.stat-icon {width:41px; height:41px; border-radius:12px; flex:none; display:grid; place-items:center; font-size:22px; font-weight:800}
.lavender {background:#ede4fd; color:#6945b2}
.gold {background:#fff0ca; color:#845418}
.green {background:#e8f0d7; color:#536b32}
.islanders {padding-block:57px 65px; scroll-margin-top:22px}
.section-head {display:flex; justify-content:space-between; align-items:end; gap:18px; margin-bottom:22px}
.section-head h2 {font-size:clamp(25px,3vw,36px); margin-top:7px}
.section-head>p {line-height:1.65; font-size:14px; color:var(--muted)}
.sample-grid {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px}
.sample {border:1px solid var(--line); overflow:hidden; border-radius:17px; background:var(--white)}
.sample-art {position:relative; display:grid; place-items:center; background:var(--tint); min-height:148px}
.sample-art img {width:min(52%,180px)}
.sample-art>span {position:absolute; top:12px; left:12px; font:800 11px/1 system-ui,sans-serif; letter-spacing:.08em; color:#5f4d6e}
.sample-copy {padding:15px 18px 18px}
.sample-copy h3 {font-size:19px; margin-bottom:5px}
.sample-copy p {font-size:13px; color:var(--muted); line-height:1.55}
.footer {background:#f7f0e9; border-top:1px solid #e7dfe9}
.footer-inner {min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:12px; color:#514960}
.footer-inner>span:first-child {display:flex; align-items:center; gap:7px; font-weight:800; white-space:nowrap}
.noscript,.notice {padding:32px 20px}
.notice p {margin:12px 0 16px}
.quiz-wrap {width:min(670px,calc(100% - 56px)); margin:35px auto 45px}
.quiz-top,.quiz-bottom {display:flex; align-items:center; justify-content:space-between; gap:12px}
.quiz-counter {font-size:13px; color:var(--muted); white-space:nowrap}
.quiz-counter strong {color:var(--deep); font-size:20px; font-variant-numeric:tabular-nums}
progress {display:block; width:100%; height:9px; overflow:hidden; appearance:none; border:0; border-radius:10px; margin:12px 0 20px; background:#e7dcf5; color:var(--violet)}
progress::-webkit-progress-bar {background:#e7dcf5; border-radius:10px}
progress::-webkit-progress-value {background:#7252c5; border-radius:10px}
progress::-moz-progress-bar {background:#7252c5; border-radius:10px}
.question-card,.card {border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); background:var(--white)}
.question-card {padding:28px clamp(16px,4vw,36px)}
.question-kicker {font:800 11px/1.25 system-ui,sans-serif; letter-spacing:.15em; color:var(--violet)}
.question-card h1 {font-size:clamp(21px,3.5vw,32px); margin:10px 0 8px; line-height:1.42; text-wrap:pretty}
.question-help {font-size:13px; color:var(--muted); margin-bottom:17px}
.options {display:grid; gap:8px}
.option {display:grid; grid-template-columns:15px 1fr auto; gap:12px; align-items:center; width:100%; padding:8px 14px; min-height:49px; border:1px solid #dfd5ec; border-radius:11px; background:#faf7ff; text-align:left; font-size:15px; font-weight:700}
.option-dot {width:14px; height:14px; border-radius:50%; border:1.5px solid #997ebd; background:#fffdf8}
.option-next {color:#7353a6; font-size:18px}
.option[aria-pressed=true] {background:#eee5ff; border-color:#8b6ac7}
.option[aria-pressed=true] .option-dot {background:var(--violet); border-color:var(--violet); box-shadow:inset 0 0 0 3px #f6edff}
@media(hover:hover) {.option:hover {background:#eee5ff; border-color:#8b6ac7}}
.quiz-bottom {margin-top:9px; font-size:13px; color:var(--muted)}
.text-button {min-height:44px; border:0; background:none; color:var(--deep); font-weight:800; padding:6px 2px}
.text-button:disabled {color:#837992; cursor:default}
.result-wrap {max-width:910px; padding-block:36px 48px}
.result-hero {display:grid; grid-template-columns:1.15fr .85fr; min-height:326px; overflow:hidden; border:1px solid #d9cbea; border-radius:25px; background:var(--tint); box-shadow:var(--shadow)}
.result-intro {align-self:center; padding:28px 0 28px 33px; position:relative; z-index:1}
.result-intro h1 {font-size:clamp(32px,6vw,61px); letter-spacing:-.06em; margin:10px 0 8px; font-weight:900}
.result-motto {font-size:clamp(15px,2.4vw,20px); line-height:1.55}
.result-art {isolation:isolate; position:relative; display:grid; align-self:stretch; place-items:center; min-width:0}
.result-art::before,.result-art::after {content:""; position:absolute; width:min(77%,246px); aspect-ratio:1; border-radius:50%; z-index:-1}
.result-art::before {background:var(--accent); opacity:.62}
.result-art::after {width:min(92%,298px); border:1px dashed #8067a370}
.result-art img {width:min(95%,290px)}
.orbit-spark {position:absolute; color:#624583; line-height:1; font-size:26px}
.spark-left {left:11%; top:29%}
.spark-right {right:13%; bottom:28%}
.tags {list-style:none; margin:17px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.tags li {border:1px solid #70568b3b; background:#fffcf4b9; border-radius:999px; padding:5px 10px; font-size:12px; font-weight:800}
.result-section {margin-top:15px; padding:23px clamp(17px,4vw,32px)}
.result-section h2 {font-size:clamp(22px,3vw,29px); margin:6px 0 10px}
.result-section p:not(.eyebrow) {font-size:15px; color:var(--muted); line-height:1.75}
.insight-list {padding-left:1.3em; margin:10px 0 0; font-size:15px; line-height:1.75}
.insight-list li+li {margin-top:4px}
.insight-list li::marker {color:var(--violet)}
.profile {display:grid; grid-template-columns:1fr 1fr; gap:14px 21px; margin:16px 0}
.profile-row {padding:12px 14px; border:1px solid #e8dff0; border-radius:12px; background:#fbf8ff}
.profile-label,.profile-poles {display:flex; align-items:center; justify-content:space-between; gap:5px; font-size:13px}
.profile-label span,.profile-poles {color:var(--muted); font-size:12px}
.profile-track {height:9px; margin:11px 5px 9px; border-radius:8px; position:relative; background:linear-gradient(90deg,#eadff4,#e1d8ef 49.5%,#dad2e4 50%,#e1d8ef 50.5%,#eadff4)}
.profile-track::before {content:""; position:absolute; left:50%; top:0; width:1px; height:100%; background:#a48ab7}
.profile-track span {width:15px; height:15px; border-radius:50%; position:absolute; top:50%; left:var(--position); transform:translate(-50%,-50%); background:var(--marker); border:2px solid white; box-shadow:0 0 0 1px #624b7e5c}
.result-section .profile-note {font-size:12px!important}
.insight-grid,.daily-grid {display:grid; grid-template-columns:1fr 1fr; gap:15px}
.daily-grid h3 {font-size:16px; margin-bottom:4px}
.result-actions {display:flex; flex-wrap:wrap; gap:12px; margin:23px 0 17px}
.result-note {font-size:12px; color:var(--muted); line-height:1.6}

@media(max-width:900px) {
  .wrap {width:calc(100% - 56px)}
  .hero {gap:24px}
}
@media(max-width:700px) {
  .wrap {width:calc(100% - 34px)}
  .topbar-inner {min-height:58px}
  .brand {gap:7px}
  .brand img {width:29px}
  .brand strong {font-size:18px}
  .brand span {font-size:9px; padding-left:7px}
  .nav-link {font-size:12px}
  .hero {grid-template-columns:1fr; gap:20px; padding:26px 0 18px}
  .hero-copy {padding:0}
  .hero h1 {font-size:clamp(31px,7.2vw,49px); margin:13px 0 11px}
  .hero-text {line-height:1.68; font-size:15px}
  .hero-action {margin-top:18px; gap:10px}
  .primary {min-height:49px}
  .island-scene {border-radius:19px}
  .island-scene figcaption {top:9px; left:9px; padding:6px; font-size:9px}
  .details-strip {border-radius:13px; padding:10px 3px}
  .details-strip>div {flex-direction:column; gap:5px; padding:0 2px; text-align:center}
  .details-strip strong {font-size:12px}
  .details-strip small {display:none}
  .stat-icon {width:29px; height:29px; border-radius:8px; font-size:16px}
  .islanders {padding-block:34px 36px}
  .section-head {align-items:start; flex-direction:column; gap:8px; margin-bottom:13px}
  .section-head>p {font-size:13px}
  .desktop-break {display:none}
  .sample-grid {gap:7px}
  .sample {border-radius:11px}
  .sample-art {min-height:92px}
  .sample-art img {width:min(85%,145px)}
  .sample-art>span {font-size:8px; left:6px; top:6px}
  .sample-copy {padding:8px 7px 10px}
  .sample-copy h3 {font-size:clamp(12px,3.45vw,19px)}
  .sample-copy p {font-size:11px}
  .footer-inner {min-height:66px; font-size:11px}
  .footer-en {display:none}
  .quiz-wrap {width:min(520px,calc(100% - 34px)); margin:19px auto 22px}
  progress {margin:9px 0 13px}
  .question-card {border-radius:17px; padding:17px 15px}
  .question-card h1 {margin:7px 0 6px}
  .question-help {margin-bottom:12px}
  .options {gap:7px}
  .option {min-height:46px; padding:6px 11px}
  .quiz-bottom {margin-top:5px}
  .result-wrap {padding-block:20px 30px}
  .result-hero {grid-template-columns:1fr; min-height:0; border-radius:20px}
  .result-intro {padding:18px 14px 0; text-align:center}
  .result-intro .eyebrow,.tags {justify-content:center}
  .tags {margin-top:11px}
  .result-art {width:min(100%,270px); margin-inline:auto}
  .result-art::before {width:72%}
  .result-art::after {width:83%}
  .result-art img {width:min(88%,230px)}
  .result-section {border-radius:16px; padding:17px 15px}
  .profile,.insight-grid {grid-template-columns:1fr; gap:9px}
  .insight-grid>.result-section+.result-section {margin-top:0}
  .daily-grid {grid-template-columns:1fr; gap:12px}
}
@media(max-width:350px) {
  .brand span {display:none}
  .hero h1 {font-size:29px}
  .footer-inner {gap:5px}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {scroll-behavior:auto!important; transition:none!important; animation:none!important}
}

.type-code {display:block; font:900 .54em/1.2 system-ui,sans-serif; letter-spacing:.08em; color:var(--violet); margin-bottom:6px}

.record-footer {padding-bottom:28px}
.record-footer summary {color:var(--violet); cursor:pointer; width:fit-content}
.record-footer details>p {max-width:42rem; color:var(--muted); line-height:1.7}
.record-form {display:grid; justify-items:start; gap:8px; margin-top:12px}
.record-form label {font-weight:700}
.record-form input {width:min(100%,24rem); min-height:42px; border:1px solid var(--line); border-radius:8px; padding:8px 12px; font:inherit; color:var(--ink); background:var(--white)}
.record-form p[role=status]:empty {display:none}
.record-form .secondary:disabled {opacity:.6; cursor:default}
.record-receipt {display:grid; gap:6px; width:min(100%,28rem)}