:root {
  color-scheme: dark;
  --bg: #06100c;
  --panel: #0a1811;
  --text: #eff3ec;
  --muted: #87998d;
  --faint: #53685b;
  --line: rgba(142, 207, 160, .2);
  --primary: #9ddbaf;
  --secondary: #e77755;
  --accent: #dfe75b;
  --display: Georgia, "Songti SC", serif;
  --ui: Inter, "PingFang SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: var(--ui); letter-spacing: 0; transition: background .6s ease, color .6s ease; }
button, input { font: inherit; }
button { color: inherit; }

#field { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: .72; }
.grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .23; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }

.site-header { position: fixed; z-index: 40; top: 0; left: 0; right: 0; height: 76px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 4vw; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; cursor: pointer; font: 700 10px/1 var(--ui); letter-spacing: 2.4px; }
.brand-mark { width: 18px; height: 18px; border: 1px solid var(--primary); border-radius: 50%; position: relative; }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; background: var(--primary); }
.brand-mark::before { width: 4px; height: 4px; border-radius: 50%; inset: 6px; }
.brand-mark::after { width: 8px; height: 1px; left: 8px; top: 8px; transform: rotate(-45deg); transform-origin: left; }
.theme-switch { display: flex; height: 39px; border: 1px solid var(--line); background: rgba(0, 0, 0, .18); }
.theme-option { min-width: 132px; display: flex; justify-content: center; align-items: center; gap: 8px; padding: 0 13px; border: 0; background: transparent; cursor: pointer; color: var(--faint); transition: .25s ease; }
.theme-switch .theme-option:only-child { min-width: 210px; }
.theme-option + .theme-option { border-left: 1px solid var(--line); }
.theme-option b { font-size: 11px; }
.theme-option span { font: 700 8px/1 var(--ui); letter-spacing: 1.4px; }
.theme-option.active { color: var(--bg); background: var(--primary); }
.header-status { justify-self: end; display: flex; align-items: center; gap: 9px; color: var(--muted); font: 700 9px/1 var(--ui); letter-spacing: 1.6px; }
.header-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); animation: statusPulse 2s ease-in-out infinite; }

main { position: relative; z-index: 2; }
.view { display: none; min-height: 100vh; position: relative; padding-top: 76px; }
.view.active { display: block; animation: viewIn .65s cubic-bezier(.16, 1, .3, 1); }
.section-code, .report-number { color: var(--secondary); font: 700 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 2.8px; }

/* Home */
.home-view { overflow: hidden; }
.home-view::before { content: ""; position: absolute; inset: 76px 0 0; background: radial-gradient(circle at 71% 48%, color-mix(in srgb, var(--primary) 15%, transparent), transparent 31%), radial-gradient(circle at 91% 20%, color-mix(in srgb, var(--secondary) 10%, transparent), transparent 24%); pointer-events: none; }
.hero-copy { position: absolute; z-index: 4; left: 7vw; top: 50%; width: min(640px, 42vw); transform: translateY(-47%); }
.hero-copy h1 { max-width: 720px; margin: 32px 0 26px; font: 500 clamp(58px, 6vw, 98px)/.96 var(--display); letter-spacing: 0; }
.hero-copy h1 em { color: var(--primary); font-style: normal; font-weight: inherit; }
.hero-lead { max-width: 500px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.9; white-space: pre-line; }
.hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 38px; }
.primary-button { min-height: 54px; display: inline-flex; align-items: center; justify-content: space-between; gap: 35px; padding: 0 22px; border: 1px solid var(--primary); border-radius: 0; background: var(--primary); color: var(--bg); cursor: pointer; font-size: 13px; font-weight: 800; transition: transform .2s ease, filter .2s ease; }
.primary-button:not(:disabled):hover { transform: translateY(-2px); filter: brightness(1.08); }
.primary-button:disabled { cursor: not-allowed; opacity: .28; }
.primary-button i { font-style: normal; font-size: 19px; }
.text-button { padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; font-size: 12px; }
.consent-row { margin-top: 25px; display: flex; align-items: flex-start; gap: 10px; width: max-content; max-width: 100%; color: var(--faint); cursor: pointer; font-size: 11px; line-height: 1.5; }
.consent-row input { position: absolute; opacity: 0; pointer-events: none; }
.checkmark { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 1px; border: 1px solid var(--faint); position: relative; }
.consent-row input:checked + .checkmark { border-color: var(--primary); background: var(--primary); }
.consent-row input:checked + .checkmark::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border-right: 1px solid var(--bg); border-bottom: 1px solid var(--bg); transform: rotate(45deg); }
.hero-art { position: absolute; z-index: 3; right: 3vw; top: 12%; width: 49vw; height: 70vh; min-height: 520px; }
.bio-organism { position: absolute; inset: 0; }
.bio-core { position: absolute; left: 49%; top: 48%; width: 110px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--primary); border-radius: 50%; background: color-mix(in srgb, var(--primary) 11%, transparent); box-shadow: 0 0 80px color-mix(in srgb, var(--primary) 25%, transparent), inset 0 0 35px color-mix(in srgb, var(--primary) 12%, transparent); transform: translate(-50%, -50%); animation: breathe 4s ease-in-out infinite; }
.bio-core::before { content: ""; position: absolute; inset: -15px; border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); border-radius: 48% 52% 44% 56%; animation: rotate 16s linear infinite; }
.bio-core span { color: var(--primary); font: 600 24px/1 var(--display); }
.stem { position: absolute; left: 49%; top: 48%; width: 41%; height: 1px; background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 5%, transparent)); transform-origin: left center; }
.stem::after { content: ""; position: absolute; left: 35%; top: -18px; width: 54px; height: 35px; border-top: 1px solid color-mix(in srgb, var(--primary) 56%, transparent); border-radius: 50%; transform: rotate(-26deg); }
.stem b { position: absolute; right: -7px; top: -7px; width: 14px; height: 14px; border: 1px solid var(--secondary); border-radius: 50%; box-shadow: 0 0 18px color-mix(in srgb, var(--secondary) 65%, transparent); }
.s1 { transform: rotate(-10deg); }.s2 { transform: rotate(50deg); width: 34%; }.s3 { transform: rotate(112deg); width: 36%; }.s4 { transform: rotate(170deg); width: 32%; }.s5 { transform: rotate(225deg); width: 42%; }.s6 { transform: rotate(303deg); width: 37%; }
.orbit { position: absolute; left: 49%; top: 48%; border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent); border-radius: 50%; transform: translate(-50%, -50%); }
.o1 { width: 280px; height: 280px; }.o2 { width: 430px; height: 430px; }.o3 { width: 590px; height: 590px; }
.art-caption { position: absolute; right: 1%; bottom: 0; display: flex; justify-content: space-between; width: 44%; color: var(--faint); font: 700 8px/1 var(--ui); letter-spacing: 1.6px; }
.art-caption b { color: var(--accent); }
.metrics-rail { position: absolute; z-index: 5; left: 7vw; right: 7vw; bottom: 30px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.metrics-rail > div { padding: 15px 22px 0 0; display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 5px 14px; }
.metrics-rail > div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.metrics-rail span { grid-column: 1 / -1; color: var(--faint); font: 700 8px/1 var(--ui); letter-spacing: 1.5px; }
.metrics-rail strong { font: 500 29px/1 var(--display); }.metrics-rail small { color: var(--muted); font-size: 10px; }

/* Quiz */
.quiz-view { min-height: 100vh; }
.quiz-view::before { content: ""; position: absolute; inset: 76px 0 0; background: radial-gradient(circle at 18% 55%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 35%); }
.quiz-context { position: absolute; left: 6vw; top: 15%; bottom: 10%; width: 26vw; padding-right: 5vw; border-right: 1px solid var(--line); }
.question-number { display: flex; align-items: end; margin-top: 9vh; }
.question-number span { font: 500 clamp(80px, 9vw, 144px)/.8 var(--display); color: color-mix(in srgb, var(--primary) 72%, var(--text)); }
.question-number small { margin: 0 0 5px 12px; color: var(--faint); font: 700 11px/1 var(--ui); }
.dimension-meta { margin-top: 8vh; }
.dimension-meta span { color: var(--faint); font: 700 8px/1 var(--ui); letter-spacing: 1.6px; }
.dimension-meta strong { display: block; margin-top: 12px; font: 500 22px/1.3 var(--display); }
.dimension-meta p { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.dimension-index { position: absolute; bottom: 0; left: 0; right: 5vw; display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.dimension-index i { height: 3px; background: var(--line); }.dimension-index i.done { background: var(--primary); }.dimension-index i.current { background: var(--secondary); box-shadow: 0 0 10px var(--secondary); }
.quiz-stage { position: relative; width: 57vw; min-height: calc(100vh - 76px); margin-left: 37vw; padding: 11vh 7vw 11vh 6vw; display: flex; flex-direction: column; justify-content: center; }
.scenario-label { display: flex; align-items: center; gap: 12px; color: var(--secondary); font: 700 9px/1 var(--ui); letter-spacing: 1.5px; }
.scenario-label i { width: 34px; height: 1px; background: var(--line); }.scenario-label b { color: var(--faint); }
.quiz-stage h2 { max-width: 820px; margin: 24px 0 34px; font: 500 clamp(32px, 3.2vw, 52px)/1.22 var(--display); letter-spacing: 0; }
.answer-list { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.answer-option { min-height: 88px; display: grid; grid-template-columns: 38px 1fr 22px; align-items: center; gap: 12px; padding: 17px 16px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 78%, transparent); text-align: left; cursor: pointer; transition: .25s cubic-bezier(.16, 1, .3, 1); }
.answer-option:hover { border-color: color-mix(in srgb, var(--primary) 70%, transparent); transform: translateY(-2px); }
.answer-option.selected { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--panel)); }
.answer-option .letter { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); color: var(--muted); font: 700 10px/1 var(--ui); }
.answer-option.selected .letter { border-color: var(--primary); background: var(--primary); color: var(--bg); }
.answer-option .answer-text { color: color-mix(in srgb, var(--text) 78%, var(--muted)); font-size: 13px; line-height: 1.65; }
.answer-option .answer-check { opacity: 0; color: var(--primary); font-size: 18px; }.answer-option.selected .answer-check { opacity: 1; }
.quiz-navigation { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 22px; margin-top: 34px; }
.nav-button { padding: 8px 0; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 11px; }.nav-button:disabled { opacity: .2; cursor: not-allowed; }.nav-button.next { display: none; }
.progress-track { height: 1px; background: var(--line); }.progress-track i { display: block; height: 100%; width: 8.33%; background: var(--primary); box-shadow: 0 0 9px var(--primary); transition: width .45s ease; }
.bio-growth-progress { position: absolute; left: 4vw; right: 4vw; bottom: 25px; height: 24px; display: flex; align-items: center; justify-content: space-between; }
.bio-growth-progress::before { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--line); }
.bio-growth-progress i { position: relative; width: 10px; height: 10px; border: 1px solid var(--faint); border-radius: 50%; background: var(--bg); }.bio-growth-progress i.done { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 11px var(--primary); }.bio-growth-progress i.current { width: 15px; height: 15px; border-color: var(--secondary); box-shadow: 0 0 14px var(--secondary); }
/* Result */
.result-view { padding: 148px 6vw 0; }
.result-intro { min-height: 580px; width: 42%; padding-top: 5vh; }
.score-line { display: flex; align-items: baseline; margin-top: 44px; }.score-line strong { font: 500 clamp(90px, 12vw, 170px)/.72 var(--display); }.score-line span { margin-left: 12px; color: var(--faint); font-size: 13px; }
.result-intro h2 { margin: 42px 0 12px; font: 500 clamp(42px, 5vw, 72px)/1 var(--display); }.result-intro > p { max-width: 500px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.85; }
.result-actions { display: flex; align-items: center; gap: 22px; margin-top: 34px; }
.profile-panel { position: absolute; right: 5vw; top: 132px; width: min(48vw, 650px); aspect-ratio: 1; }
#profileChart { width: 100%; height: 100%; display: block; }
.profile-center { position: absolute; left: 50%; top: 50%; width: 92px; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--secondary); border-radius: 50%; background: var(--bg); transform: translate(-50%, -50%); box-shadow: 0 0 38px color-mix(in srgb, var(--secondary) 19%, transparent); }.profile-center span { font: 500 34px/1 var(--display); }.profile-center small { margin-top: 6px; color: var(--faint); font: 700 7px/1 var(--ui); letter-spacing: 1px; }
.profile-label { position: absolute; color: var(--muted); font-size: 10px; }.profile-label span, .profile-label b { display: block; }.profile-label b { margin-top: 4px; color: var(--text); font-size: 11px; }.label-top { left: 50%; top: 0; text-align: center; transform: translateX(-50%); }.label-right { right: 0; top: 49%; transform: translateY(-50%); }.label-bottom { left: 50%; bottom: 0; text-align: center; transform: translateX(-50%); }.label-left { left: 0; top: 49%; text-align: right; transform: translateY(-50%); }
.report-band { margin: 70px -6vw 0; padding: 90px 6vw; display: grid; grid-template-columns: 1.18fr .82fr; gap: 9vw; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 78%, transparent); }
.report-band h3, .route-section h3, .advice-panel h3 { margin: 18px 0 34px; font: 500 34px/1.1 var(--display); }
.dimension-bars { display: grid; gap: 18px; }.dimension-bar { display: grid; grid-template-columns: 150px 1fr 44px; align-items: center; gap: 18px; }.dimension-bar span { color: var(--muted); font-size: 12px; }.dimension-bar .bar { height: 3px; background: var(--line); }.dimension-bar .bar i { display: block; height: 100%; background: var(--primary); box-shadow: 0 0 9px color-mix(in srgb, var(--primary) 60%, transparent); }.dimension-bar b { font-size: 11px; }
.report-insight > strong { display: block; color: var(--primary); font: 500 27px/1.2 var(--display); }.report-insight > p { color: var(--muted); font-size: 13px; line-height: 1.8; }.strength-row { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }.strength-row span { display: block; color: var(--faint); font: 700 8px/1 var(--ui); letter-spacing: 1.5px; }.strength-row b { display: block; margin-top: 9px; font-size: 12px; }
.route-section { margin: 0 -6vw; padding: 90px 6vw 110px; }.route-heading { display: flex; justify-content: space-between; align-items: end; }.route-heading h3 { margin: 0; }
.route-grid { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 48px; border-top: 1px solid var(--line); }.route-day { min-height: 240px; padding: 20px 18px 0 0; }.route-day + .route-day { padding-left: 18px; border-left: 1px solid var(--line); }.route-day span { color: var(--secondary); font: 700 9px/1 var(--ui); letter-spacing: 1.3px; }.route-day strong { display: block; margin-top: 31px; min-height: 44px; font: 500 17px/1.35 var(--display); }.route-day p { margin: 14px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.advice-panel { margin: 0 -6vw; padding: 85px 20vw; text-align: center; border-top: 1px solid var(--line); background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 52%); }.advice-panel h3 { margin-bottom: 20px; }.advice-panel p { max-width: 780px; margin: auto; color: var(--muted); font-size: 14px; line-height: 1.9; }
.personalized-advice-content { max-width: 780px; margin: 34px auto 0; text-align: left; color: var(--text); }
.personalized-advice-content h3, .personalized-advice-content h4, .personalized-advice-content h5 { margin: 28px 0 12px; font: 500 22px/1.3 var(--display); color: var(--primary); }
.personalized-advice-content p { margin: 0 0 16px; color: var(--text); }
.personalized-advice-content ul, .personalized-advice-content ol { margin: 0 0 18px; padding-left: 22px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.personalized-advice-content strong { color: var(--primary); }
.result-footer { margin: 0 -6vw; height: 90px; display: flex; justify-content: space-between; align-items: center; padding: 0 6vw; border-top: 1px solid var(--line); color: var(--faint); font: 700 8px/1 var(--ui); letter-spacing: 1.5px; }.result-footer button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 11px; }
.candidate-note { position: fixed; z-index: 30; right: 18px; bottom: 15px; display: flex; align-items: baseline; gap: 7px; pointer-events: none; color: var(--faint); font: 700 7px/1 var(--ui); letter-spacing: 1.5px; }.candidate-note b { color: var(--primary); font-size: 13px; }

@keyframes viewIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: translate(-50%, -50%) scale(1.1); filter: brightness(1.25); } }
@keyframes statusPulse { 50% { opacity: .35; } }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; height: 66px; padding: 0 18px; }.header-status { display: none; }.theme-option { min-width: 52px; padding: 0 11px; }.theme-switch .theme-option:only-child { min-width: 52px; }.theme-option span { display: none; }.brand span:last-child { font-size: 9px; }
  .view { padding-top: 66px; }.home-view { min-height: 920px; }.home-view::before { inset-top: 66px; }.hero-copy { position: relative; left: auto; top: auto; width: auto; padding: 72px 24px 0; transform: none; }.hero-copy h1 { margin-top: 23px; font-size: clamp(50px, 15vw, 69px); }.hero-lead { font-size: 14px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 9px; margin-top: 28px; }.primary-button { width: 100%; }.consent-row { width: 100%; }
  .hero-art { top: 500px; right: -20%; width: 120%; height: 370px; min-height: 0; }.bio-core { width: 76px; }.o1 { width: 190px; height: 190px; }.o2 { width: 280px; height: 280px; }.o3 { width: 370px; height: 370px; }.art-caption { display: none; }.signal-word { font-size: 24vw; }.signal-core { width: 82px; height: 82px; }.metrics-rail { left: 24px; right: 24px; bottom: 22px; grid-template-columns: 1fr 1fr; row-gap: 16px; }.metrics-rail > div:nth-child(3) { padding-left: 0; border-left: 0; }.metrics-rail strong { font-size: 23px; }
  .quiz-view { min-height: 100dvh; padding-bottom: 34px; }.quiz-context { position: relative; left: auto; top: auto; bottom: auto; width: auto; padding: 32px 24px 18px; border: 0; }.question-number { margin-top: 30px; }.question-number span { font-size: 76px; }.dimension-meta { margin-top: 30px; }.dimension-meta p { display: none; }.dimension-index { position: static; margin-top: 22px; }.quiz-stage { width: auto; min-height: 0; margin: 0; padding: 18px 24px 20px; }.quiz-stage h2 { margin: 18px 0 25px; font-size: 30px; }.answer-list { grid-template-columns: 1fr; }.answer-option { min-height: 74px; }.quiz-navigation { gap: 14px; margin-top: 25px; }.bio-growth-progress { position: relative; z-index: 1; left: auto; right: auto; bottom: auto; margin: 6px 24px 0; }.candidate-note { display: none; }
  .result-view { padding: 112px 24px 0; }.result-intro { min-height: auto; width: 100%; padding: 0; }.score-line { margin-top: 34px; }.score-line strong { font-size: 112px; }.result-intro h2 { margin-top: 35px; font-size: 49px; }.result-actions { align-items: flex-start; flex-direction: column; gap: 7px; }.profile-panel { position: relative; right: auto; top: auto; width: 100%; margin: 68px 0 85px; }.profile-label { font-size: 8px; }.profile-label b { font-size: 9px; }
  .report-band { margin: 0 -24px; padding: 65px 24px; grid-template-columns: 1fr; gap: 75px; }.report-band h3, .route-section h3 { font-size: 30px; }.dimension-bar { grid-template-columns: 120px 1fr 38px; gap: 10px; }.route-section { margin: 0 -24px; padding: 65px 24px 80px; }.route-heading { display: block; }.route-heading h3 { margin-top: 16px; }.route-grid { grid-template-columns: 1fr; margin-top: 30px; border-top: 0; }.route-day { min-height: 0; padding: 20px 0; display: grid; grid-template-columns: 56px 1fr; column-gap: 10px; border-top: 1px solid var(--line); }.route-day + .route-day { padding-left: 0; border-left: 0; }.route-day strong { min-height: 0; margin: 0; font-size: 17px; }.route-day p { grid-column: 2; margin-top: 8px; }.advice-panel { margin: 0 -24px; padding: 65px 24px; }.result-footer { margin: 0 -24px; padding: 0 24px; }
}

@media (max-width: 420px) {
  .hero-copy h1 { font-size: 48px; }.hero-copy { padding-top: 55px; }.hero-art { top: 500px; }.home-view { min-height: 900px; }.section-code { font-size: 8px; letter-spacing: 2px; }.answer-option .answer-text { font-size: 12px; }.nav-button span { display: none; }.profile-center { width: 75px; }.profile-center span { font-size: 29px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}