:root {
  --bg: #f4f3f6;
  --card: #fff;
  --ink: #101117;
  --muted: #71727e;
  --line: #e4e3e8;
  --purple: #6d59ee;
  --purple-dark: #5543d9;
  --pink: #f7c1d2;
  --pink-ink: #a84367;
  --yellow: #d9f36a;
  --shadow: 0 18px 55px rgba(28, 24, 44, .08);
  --display: "Arial", "Helvetica Neue", "Noto Sans SC", "PingFang SC", sans-serif;
  --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: var(--sans); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }

.site-header { height: 68px; background: rgba(244,243,246,.94); border-bottom: 1px solid #e1e0e6; position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px); }
.header-inner { width: min(1180px, calc(100% - 80px)); height: 100%; margin: auto; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; letter-spacing: -.055em; }
.brand-mark { width: 31px; height: 31px; display: inline-grid; place-items: center; border: 2px solid var(--ink); border-radius: 8px; background: #fff; position: relative; transform: rotate(-4deg); box-shadow: 2px 2px 0 var(--pink); }
.brand-mark::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--pink); position: absolute; right: 4px; top: 4px; }
.brand-mark-face { font: 900 21px/1 var(--display); transform: rotate(4deg); }
.brand-name { font-size: 15px; letter-spacing: -.06em; }.brand-test { padding: 3px 7px 2px; border-radius: 5px; background: #f37b9d; color: #1f1820; font: 900 9px/1 var(--display); letter-spacing: .03em; transform: rotate(-4deg); }
.main-nav { display: flex; align-items: center; gap: 34px; font-size: 12px; font-weight: 700; }.main-nav a { color: #3a3943; transition: color .2s ease; }.main-nav a:hover { color: var(--purple); }.main-nav .nav-pill { color: #fff; background: var(--ink); border-radius: 100px; padding: 12px 18px; }.nav-pill span { color: var(--pink); font-size: 15px; margin-left: 6px; }

.test-shell { width: min(980px, calc(100% - 56px)); margin: 0 auto; padding: 31px 0 104px; }.test-heading { display: flex; align-items: baseline; justify-content: space-between; padding: 0 0 22px; }.test-heading h1 { font: 800 clamp(39px, 5vw, 51px)/1 var(--display); letter-spacing: -.075em; }.test-heading p { color: #666671; display: flex; align-items: center; gap: 11px; font: 700 11px/1 var(--display); }.test-heading i { color: #b7b5bf; font-style: normal; }
.test-card { min-height: 534px; background: var(--card); border-radius: 31px; padding: 49px 47px 38px; box-shadow: var(--shadow); }.progress-row { display: flex; justify-content: space-between; color: #676873; font: 700 11px/1 var(--display); }.progress-track { height: 6px; background: #ededf2; margin-top: 17px; border-radius: 10px; position: relative; overflow: visible; }.progress-fill { height: 100%; width: 0; border-radius: inherit; background: var(--purple); transition: width .25s ease; }.progress-tick { width: 1px; height: 12px; background: #d2d1d8; position: absolute; top: -3px; }.tick-a { left: 25%; }.tick-b { left: 50%; }.tick-c { left: 75%; }
.question-stage { padding: 52px 0 0; }.category-pill { display: inline-flex; align-items: center; background: var(--pink); color: var(--pink-ink); border-radius: 100px; padding: 11px 19px 10px; font: 800 15px/1 var(--sans); letter-spacing: .04em; }.question-stage h2, .result-stage h2 { display: block; width: 100%; color: var(--ink); margin-top: 26px; font: 800 clamp(34px, 4vw, 44px)/1.08 var(--display); letter-spacing: -.075em; max-width: 100%; }.question-prompt { display: flex; align-items: center; gap: 9px; color: var(--purple-dark); font-weight: 800; font-size: 12px; margin-top: 49px; }.prompt-dot { width: 9px; height: 9px; display: inline-block; border-radius: 50%; background: #8c79ff; box-shadow: 0 0 0 7px #f0edff; }
.answer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 15px; }.answer-button { min-height: 101px; border: 2px solid var(--ink); border-radius: 22px; background: var(--card); display: flex; align-items: center; justify-content: space-between; padding: 0 25px; cursor: pointer; font-size: 18px; font-weight: 800; text-align: left; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }.answer-button:hover { transform: translateY(-2px); box-shadow: 0 8px 0 rgba(16,17,23,.11); }.answer-button:active { transform: translateY(0); box-shadow: none; }.answer-yes { color: #fff; border-color: var(--purple); background: var(--purple); box-shadow: 0 8px 0 rgba(82,64,215,.14); }.answer-yes:hover { background: var(--purple-dark); }.answer-button kbd { min-width: 41px; padding: 7px 7px 6px; border: 1px solid rgba(16,17,23,.32); border-radius: 9px; color: #666773; background: rgba(255,255,255,.45); font: 700 10px/1 var(--display); text-align: center; }.answer-yes kbd { border-color: rgba(255,255,255,.48); color: #fff; background: rgba(255,255,255,.08); }
.question-controls { display: flex; gap: 22px; margin-top: 22px; }.question-controls button { border: 0; padding: 0; background: transparent; color: #c4c3ca; cursor: pointer; font: 700 11px/1 var(--display); }.question-controls button:not(:disabled):hover { color: var(--purple); }.question-controls button + button { color: #777782; }.keyboard-hint { color: #a2a1aa; font-size: 10px; margin-top: 34px; }.keyboard-hint span { color: #8c79ff; font-size: 13px; margin-right: 5px; }

.result-stage { padding-top: 44px; }.result-stage h2 { margin-top: 22px; }.result-stage h2 em { color: var(--purple); font-style: normal; }.final-score { display: flex; align-items: baseline; gap: 9px; margin-top: 26px; }.final-score strong { font: 900 102px/.8 var(--display); letter-spacing: -.1em; }.final-score span { color: var(--muted); font: 700 14px/1 var(--display); }.final-label { color: var(--purple-dark); font-weight: 800; font-size: 13px; margin-top: 13px; }.final-actions { display: flex; gap: 11px; margin-top: 27px; }.result-button { min-height: 47px; border-radius: 100px; padding: 0 20px; cursor: pointer; font-size: 12px; font-weight: 800; }.result-primary { color: var(--ink); border: 0; background: var(--yellow); }.result-secondary { border: 1px solid var(--line); background: transparent; }.result-button:hover { transform: translateY(-1px); }.result-note { color: var(--muted); font-size: 11px; margin-top: 21px; }

.info-section, .faq-section { width: min(980px, calc(100% - 56px)); margin: 0 auto; }.info-section { padding: 0 0 102px; }.info-kicker { color: #a84367; font: 800 10px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }.info-section h2 { margin-top: 23px; font: 800 clamp(37px, 5vw, 51px)/1.04 var(--display); letter-spacing: -.075em; }.info-copy { width: min(700px, 100%); color: #62616c; font-size: 14px; line-height: 1.85; margin-top: 25px; }
.faq-section { padding: 0 0 104px; }.faq-section h2 { font: 800 clamp(37px, 5vw, 51px)/1 var(--display); letter-spacing: -.075em; margin-bottom: 27px; }.faq-list { border-top: 1px solid var(--line); }.faq-list details { border-bottom: 1px solid var(--line); }.faq-list summary { min-height: 67px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; font-size: 14px; font-weight: 800; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary span { color: var(--purple); font: 400 28px/1 var(--display); transition: transform .2s ease; }.faq-list details[open] summary span { transform: rotate(45deg); }.faq-list details p { width: min(690px, calc(100% - 35px)); color: #65646e; font-size: 13px; line-height: 1.8; padding: 0 0 23px; }

.site-footer { background: #e9e8ed; border-top: 1px solid #dfdee5; }.footer-inner { width: min(980px, calc(100% - 56px)); min-height: 150px; padding: 31px 0; margin: auto; display: grid; grid-template-columns: 1fr 1.5fr auto; gap: 24px 60px; align-items: center; }.footer-inner > p { color: #70707a; font-size: 12px; margin-top: 7px; }.footer-legal { color: #70707a; text-align: right; font: 10px/1.7 var(--display); letter-spacing: .03em; }


@media (max-width: 760px) {
  .header-inner { width: calc(100% - 36px); }.main-nav { gap: 16px; font-size: 11px; }.main-nav a:nth-child(2) { display: none; }.main-nav .nav-pill { padding: 10px 13px; }.test-shell, .info-section, .faq-section, .footer-inner { width: calc(100% - 36px); }.test-shell { padding-top: 27px; padding-bottom: 83px; }.test-heading { display: block; }.test-heading p { margin-top: 14px; }.test-card { border-radius: 22px; padding: 29px 21px 26px; min-height: 507px; }.question-stage { padding-top: 39px; }.category-pill { padding: 9px 15px 8px; font-size: 13px; }.question-stage h2, .result-stage h2 { font-size: clamp(35px, 10vw, 47px); margin-top: 22px; }.question-prompt { margin-top: 37px; }.answer-grid { grid-template-columns: 1fr; gap: 10px; }.answer-button { min-height: 74px; border-radius: 16px; padding: 0 17px; font-size: 16px; }.answer-button kbd { min-width: 39px; }.question-controls { margin-top: 18px; }.keyboard-hint { margin-top: 28px; }.info-section { padding-bottom: 79px; }.info-section h2, .faq-section h2 { font-size: 42px; }.info-copy { font-size: 13px; }.faq-section { padding-bottom: 80px; }.faq-list summary { min-height: 60px; font-size: 13px; }.faq-list details p { font-size: 12px; }.footer-inner { grid-template-columns: 1fr; gap: 17px; }.footer-legal { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* 清新淡雅的绿色主题 */
:root {
  --bg: #f2f8f4;
  --ink: #17362a;
  --muted: #718179;
  --line: #dce9df;
  --purple: #67ad82;
  --purple-dark: #397759;
  --pink: #d9efe0;
  --pink-ink: #397357;
  --yellow: #bfe5c9;
  --shadow: 0 18px 55px rgba(30, 85, 53, .09);
}

.site-header { background: rgba(242,248,244,.94); border-color: #dce9df; }
.brand-test { background: #9ed2ae; color: #17362a; }
.main-nav a { color: #395446; }
.test-heading p { color: #62756a; }
.test-heading i { color: #a8b8ae; }
.progress-row { color: #607469; }
.progress-track { background: #e6efe8; }
.progress-tick { background: #bfd0c4; }
.prompt-dot { background: #72bb8b; box-shadow: 0 0 0 7px #edf7ef; }
.answer-button:hover { box-shadow: 0 8px 0 rgba(31,89,57,.12); }
.answer-yes { box-shadow: 0 8px 0 rgba(57,119,89,.16); }
.answer-button kbd { border-color: rgba(23,54,42,.32); color: #557165; }
.question-controls button { color: #b7c5bb; }
.question-controls button:not(:disabled):hover { color: var(--purple-dark); }
.question-controls button + button { color: #657c6e; }
.keyboard-hint { color: #98aaa0; }
.keyboard-hint span { color: #72bb8b; }
.info-kicker { color: #4e8f6b; }
.info-copy { color: #61756a; }
.site-footer { background: #e5f1e8; border-color: #d4e4d8; }
.footer-inner > p, .footer-legal { color: #61766a; }