:root {
  --paper: #f3eee4; --paper-deep: #e6dac9; --white: #fffdf8; --ink: #202522;
  --muted: #687069; --line: #d1c5b5; --red: #b64a34; --red-dark: #823522;
  --green: #4f6b5c; --green-dark: #30483d; --green-light: #dbe6de; --gold: #c09852;
  --serif: "Songti SC", "STSong", "Noto Serif SC", Georgia, serif;
  --sans: "PingFang SC", "Microsoft YaHei", ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans);
  background-image: linear-gradient(90deg, rgba(79,107,92,.025) 1px, transparent 1px), linear-gradient(rgba(79,107,92,.018) 1px, transparent 1px);
  background-size: 36px 36px;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .52; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid rgba(182,74,52,.28); outline-offset: 3px; }
h1, h2, h3, p { margin-top: 0; text-wrap: pretty; }
h1, h2, h3 { font-family: var(--serif); }
h1 { margin: 18px 0 24px; font-size: clamp(51px, 7vw, 96px); line-height: .95; letter-spacing: -.065em; }
h2 { margin-bottom: 16px; font-size: clamp(34px, 4.4vw, 58px); line-height: 1.02; letter-spacing: -.05em; }
h3 { margin-bottom: 8px; font-size: 25px; line-height: 1.16; }
.review-strip { min-height: 30px; padding: 7px 5vw; color: #f9f3ea; background: var(--red-dark); font-size: 11px; letter-spacing: .035em; text-align: center; }
.topbar { min-height: 72px; padding: 0 5vw; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 18px; position: sticky; top: 0; z-index: 5; background: rgba(243,238,228,.95); backdrop-filter: blur(14px); }
.brand { min-height: 44px; display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 20px; font-weight: 700; white-space: nowrap; }
.brand-mark { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid var(--red-dark); color: var(--paper); background: var(--red); font-size: 16px; transform: rotate(-2deg); }
.nav { display: flex; align-items: center; gap: 3px; margin-left: auto; }
.nav a, .language-switch { min-height: 44px; padding: 13px 10px; color: var(--muted); font-size: 12px; }
.nav a:hover, .nav a.active, .language-switch:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 7px; }
.passport-quick { min-height: 44px; padding: 13px 14px; color: var(--paper); background: var(--ink); font-size: 12px; white-space: nowrap; }
.main { width: min(1180px, 90vw); margin: 0 auto; }
.noscript { margin: 80px auto; padding: 20px; background: var(--white); }
.eyebrow { color: var(--red-dark); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.lede { max-width: 610px; color: #515952; font-size: 17px; line-height: 1.75; }
.actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.btn { min-height: 44px; padding: 12px 17px; border: 1px solid var(--ink); background: transparent; font-size: 13px; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn:active, button:active { transform: translateY(1px); }
.btn.primary { color: var(--paper); border-color: var(--red); background: var(--red); }
.btn.quiet { color: var(--muted); border-color: var(--line); }
.page-head { padding: 66px 0 10px; display: flex; justify-content: space-between; gap: 45px; align-items: end; }
.page-head p { max-width: 460px; margin: 0 0 8px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.ssr-placeholder { min-height: 440px; }
.error-page { min-height: 100vh; padding: 14vh 0 70px; }
.error-page h1 { max-width: 900px; }
.error-page p { max-width: 620px; color: var(--muted); font-size: 15px; line-height: 1.8; }
.hero { min-height: min(580px, calc(100dvh - 102px)); padding: 54px 0 58px; display: grid; grid-template-columns: 1.08fr .92fr; gap: 7vw; align-items: center; }
.hero h1 { max-width: 660px; font-size: clamp(54px, 5.6vw, 76px); line-height: .98; letter-spacing: -.055em; }
.hero-note { display: flex; gap: 25px; margin-top: 44px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.hero-note strong { display: block; margin-bottom: 3px; color: var(--ink); font-family: var(--serif); font-size: 19px; }
.passport-cover { min-height: 380px; padding: 31px; color: #f6efdf; background: var(--green-dark); box-shadow: 0 20px 45px rgba(62,45,27,.12); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.passport-cover-link:hover { box-shadow: 0 24px 52px rgba(62,45,27,.18); }
.passport-cover::after { content: ""; position: absolute; width: 270px; height: 270px; right: -70px; bottom: -90px; border: 1px solid rgba(216,187,124,.28); border-radius: 50%; box-shadow: 0 0 0 20px rgba(216,187,124,.04), 0 0 0 42px rgba(216,187,124,.03); }
.cover-top, .cover-center, .cover-progress { position: relative; z-index: 1; }
.cover-top, .progress-meta { display: flex; justify-content: space-between; gap: 18px; }
.cover-kicker { color: #d8bb7c; font-size: 10px; letter-spacing: .18em; }
.cover-number, .progress-meta { color: #c9d8ce; font-size: 11px; }
.cover-mark { width: 83px; height: 83px; display: grid; place-items: center; border: 1px solid #d8bb7c; border-radius: 50%; color: #d8bb7c; font-family: var(--serif); font-size: 44px; }
.cover-center h3 { max-width: 310px; margin: 22px 0 8px; color: #f6efdf; font-size: 37px; }
.cover-center p { max-width: 340px; margin: 0; color: #c9d8ce; font-size: 12px; line-height: 1.65; }
.progress-track { height: 4px; margin-top: 10px; background: rgba(255,255,255,.14); }
.progress-track span { display: block; height: 100%; background: #d8bb7c; }
.section { padding: 72px 0; border-top: 1px solid var(--line); }
.section-head { display: flex; justify-content: space-between; gap: 40px; align-items: end; }
.section-head p { max-width: 430px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.route-list, .tool-directory { display: grid; gap: 8px; margin-top: 28px; }
.route-row, .tool-entry { width: 100%; border: 1px solid var(--line); background: transparent; text-align: left; }
.route-row { min-height: 112px; padding: 17px; display: grid; grid-template-columns: 60px 1fr 170px auto; gap: 17px; align-items: center; }
.route-row:hover, .tool-entry:hover, .exam-card:hover { border-color: var(--red); background: #f8eee8; }
.route-no { color: var(--red); font-family: var(--serif); font-size: 30px; }
.route-title, .tool-entry-title { display: block; font-family: var(--serif); font-size: 21px; }
.route-copy, .tool-entry-copy { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.route-meta, .tool-entry-meta { color: var(--muted); font-size: 11px; line-height: 1.7; }
.route-meta strong, .tool-entry-meta strong { display: block; color: var(--ink); font-size: 12px; }
.route-action, .tool-entry-arrow { color: var(--red-dark); font-size: 12px; white-space: nowrap; }
.tools-overview { display: grid; grid-template-columns: 130px 1fr; margin-top: 28px; border-top: 1px solid var(--line); }
.tools-manifesto { display: flex; flex-direction: column; justify-content: space-between; padding: 22px 15px 22px 0; border-right: 1px solid var(--line); }
.tools-manifesto strong { writing-mode: vertical-rl; font-family: var(--serif); font-size: 28px; }
.seal-label { color: var(--red); font-family: var(--serif); font-size: 19px; }
.tool-entry { min-height: 93px; padding: 15px; display: grid; grid-template-columns: 67px 1fr 145px auto; gap: 15px; align-items: center; }
.tool-character, .exam-mark { color: var(--red); font-family: var(--serif); font-size: 45px; line-height: 1; }
.random-band { margin-top: 30px; padding: 31px; color: var(--paper); background: var(--green-dark); display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; }
.random-band h2 { color: #f6efdf; }
.random-band p { max-width: 500px; margin: 0; color: #c9d8ce; font-size: 12px; line-height: 1.65; }
.random-band .btn { border-color: #d8bb7c; color: #f6efdf; }
.exam-grid, .game-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.game-grid { grid-template-columns: repeat(2, 1fr); }
.exam-card, .game-card { min-height: 245px; padding: 21px; border: 1px solid var(--line); background: transparent; text-align: left; display: flex; flex-direction: column; justify-content: space-between; }
.exam-card h3, .game-card h3 { margin: 19px 0 7px; }
.exam-card p, .game-card p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.exam-meta { color: var(--green-dark); font-size: 11px; }
.tool-shell, .quiz-shell { max-width: 820px; margin: 45px auto 85px; }
.tool-panel, .quiz-panel { padding: clamp(27px, 5vw, 52px); border: 1px solid var(--line); background: var(--white); box-shadow: 0 20px 45px rgba(62,45,27,.08); position: relative; overflow: hidden; }
.tool-panel::before { content: ""; position: absolute; width: 60px; height: 60px; right: -31px; top: -31px; border: 1px solid var(--red); transform: rotate(45deg); }
.tool-back { display: inline-block; margin-bottom: 21px; color: var(--red-dark); font-size: 11px; }
.tool-form { margin-top: 27px; }
.tool-form label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 12px; }
.tool-row { display: flex; gap: 8px; }
.tool-row input, .tool-row select, .tool-form > input { flex: 1; min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 0; color: var(--ink); background: transparent; }
.tool-row button { border: 1px solid var(--red); color: var(--paper); background: var(--red); padding: 13px 16px; }
.field-hint { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.form-error { margin: 7px 0 0; color: var(--red-dark); font-size: 12px; font-weight: 700; line-height: 1.5; }
.choice-label { margin-top: 19px; color: var(--muted); font-size: 12px; }
.choice-row, .quick-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.choice, .quick-chip { min-height: 44px; padding: 10px 13px; border: 1px solid var(--line); background: transparent; font-size: 12px; }
.choice.active, .quick-chip.active, .choice:hover, .quick-chip:hover { color: var(--paper); background: var(--green); border-color: var(--green); }
.result-card { margin-top: 27px; padding: 24px; color: var(--paper); background: var(--green-dark); }
.result-card h3 { color: #f6efdf; }
.result-card p { color: #c9d8ce; font-size: 12px; line-height: 1.7; }
.result-list { display: grid; gap: 8px; margin-top: 20px; }
.result-choice { width: 100%; min-height: 72px; padding: 14px; border: 1px solid #71877c; color: #f6efdf; background: var(--green-dark); text-align: left; }
.result-choice:hover, .result-choice.selected { border-color: #d8bb7c; background: #3b5649; }
.result-choice small { color: #d7e0da; font-size: 12px; line-height: 1.55; }
.name-chars { display: inline-block; margin-right: 15px; font-family: var(--serif); font-size: 30px; }
.name-pinyin { color: #edd59f; font-size: 12px; }
.plain-result { margin-top: 26px; padding: 22px; border-top: 2px solid var(--red); background: #f7f2e9; }
.plain-result h3 { margin: 9px 0 7px; font-size: 32px; }
.plain-result p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.meaning-list { display: grid; gap: 8px; margin-top: 20px; }
.meaning-row { display: grid; grid-template-columns: 115px 1fr; gap: 9px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 12px; line-height: 1.6; }
.meaning-row strong { font-family: var(--serif); }
.kinship-path { min-height: 55px; margin-top: 20px; padding: 13px 15px; border: 1px solid var(--line); background: #f7f2e9; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.path-node { color: var(--red-dark); font-family: var(--serif); font-size: 16px; }
.path-arrow { color: var(--line); }
.relation-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-top: 12px; }
.relation-button { min-height: 48px; padding: 7px; border: 1px solid var(--line); background: transparent; font-size: 11px; }
.relation-button:hover { border-color: var(--red); color: var(--red-dark); }
.exam-progress { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 10px; }
.exam-line { flex: 1; height: 3px; background: var(--paper-deep); }
.exam-line span { display: block; height: 100%; background: var(--red); }
.question { margin: 42px 0 20px; font-family: var(--serif); font-size: clamp(27px, 4vw, 40px); line-height: 1.2; }
.options { display: grid; gap: 8px; }
.option { min-height: 50px; padding: 13px 15px; border: 1px solid var(--line); background: transparent; text-align: left; line-height: 1.5; }
.option:hover:not(:disabled) { border-color: var(--ink); background: var(--paper); }
.option.correct { border-color: var(--green); background: var(--green-light); }
.option.wrong { border-color: var(--red); background: #f5e3dc; }
.explanation { margin-top: 20px; padding: 15px 17px; border-left: 2px solid var(--gold); color: var(--muted); background: #f7f2e9; font-size: 12px; line-height: 1.7; }
.score { margin: 28px 0 10px; color: var(--red-dark); font-family: var(--serif); font-size: 92px; line-height: .9; text-align: center; }
.rank { text-align: center; }
.rank span { display: inline-block; padding: 8px 11px; border: 1px solid var(--red); color: var(--red-dark); font-size: 10px; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 26px 0; }
.metric { border-top: 2px solid var(--ink); padding-top: 9px; }
.metric strong { display: block; font-family: var(--serif); font-size: 20px; }
.metric span { color: var(--muted); font-size: 11px; }
.seal-workbench { display: grid; grid-template-columns: .9fr 1.1fr; gap: 24px; align-items: stretch; }
.seal-preview { min-height: 300px; padding: 28px; color: var(--paper); background: var(--green-dark); display: grid; place-items: center; text-align: center; }
.generated-seal { width: 145px; height: 145px; padding: 14px; border: 5px double #c94f39; color: #c94f39; background: #f3eee4; display: grid; grid-template-columns: repeat(2,1fr); grid-auto-rows: 1fr; place-items: center; font-family: var(--serif); font-size: 42px; line-height: 1; transform: rotate(-2deg); }
.generated-seal.count-2 { grid-template-columns: 1fr; font-size: 49px; }
.seal-caption { margin-top: 16px; color: #c9d8ce; font-size: 11px; }
.practice-sheet { margin-top: 25px; padding: 23px; border: 1px solid var(--line); background: #fffdf8; }
.practice-row { display: grid; grid-template-columns: repeat(6,1fr); gap: 7px; margin-top: 8px; }
.practice-cell { aspect-ratio: 1; border: 1px solid #cfbfae; display: grid; place-items: center; color: transparent; font-family: var(--serif); font-size: clamp(24px,4vw,43px); background: linear-gradient(45deg,transparent 49.5%,rgba(182,74,52,.13) 49.5%,rgba(182,74,52,.13) 50.5%,transparent 50.5%), linear-gradient(-45deg,transparent 49.5%,rgba(182,74,52,.13) 49.5%,rgba(182,74,52,.13) 50.5%,transparent 50.5%); }
.practice-cell.trace { color: rgba(32,37,34,.72); }
.practice-cell.trace-light { color: rgba(32,37,34,.18); }
.principles-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 34px; padding: 42px 0 85px; }
.principle { border-top: 2px solid var(--ink); padding-top: 15px; }
.principle p { color: var(--muted); font-size: 12px; line-height: 1.7; }
.footer { width: min(1180px,90vw); margin: 0 auto; padding: 25px 0 34px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.footer a { text-decoration: underline; text-underline-offset: 3px; }
.footer button { padding: 0; border: 0; color: inherit; background: transparent; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; }
.analytics-consent {
  width: min(840px, calc(100vw - 32px)); padding: 20px 22px; border: 1px solid #25362f;
  color: #f6efdf; background: var(--green-dark); box-shadow: 0 22px 60px rgba(32,37,34,.28);
  position: fixed; right: 16px; bottom: 16px; z-index: 50;
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
}
.analytics-consent strong { display: block; margin-bottom: 6px; font-family: var(--serif); font-size: 18px; }
.analytics-consent p { max-width: 590px; margin: 0; color: #c9d8ce; font-size: 11px; line-height: 1.65; }
.analytics-consent a { color: #f0c983; text-decoration: underline; text-underline-offset: 3px; }
.analytics-consent-actions { display: flex; gap: 8px; }
.analytics-consent .btn { border-color: #9cad9f; color: #f6efdf; white-space: nowrap; }
.analytics-consent .btn.primary { border-color: var(--red); }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } .route-row { grid-template-columns: 55px 1fr 150px; } .route-action { grid-column: 2 / -1; } .tool-entry { grid-template-columns: 61px 1fr 135px; } .tool-entry-arrow { grid-column: 2 / -1; } .seal-workbench { grid-template-columns: 1fr; } }
@media (max-width: 660px) {
  .review-strip { display: none; }
  .topbar { min-height: 104px; padding: 8px 5vw 6px; display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: 44px 44px; gap: 2px 10px; }
  .brand { min-width: 0; font-size: 18px; } .brand-mark { flex: 0 0 auto; } .brand span:last-child { overflow: hidden; text-overflow: ellipsis; }
  .nav { width: 100%; grid-column: 1 / -1; grid-row: 2; justify-content: space-between; gap: 0; overflow-x: visible; margin-left: 0; border-top: 1px solid var(--line); }
  .nav a { flex: 0 0 auto; min-height: 44px; padding: 13px 4px; font-size: 12px; }
  .passport-quick { grid-column: 2; grid-row: 1; align-self: center; margin-left: 0; }
  .language-switch { padding-right: 0; }
  h1 { font-size: 44px; } h2 { font-size: 36px; } .hero { min-height: auto; padding: 42px 0 50px; } .hero h1 { font-size: 44px; line-height: 1; } .page-head, .section-head, .footer { display: block; } .page-head p, .section-head p { margin-top: 15px; } .section { padding: 60px 0; }
  .tool-page-head { padding: 30px 0 0; }
  .tool-page-head h1 { margin: 10px 0 0; font-size: 32px; line-height: 1.05; }
  .tool-page-head p { display: none; }
  .tool-page-head + .tool-shell { margin-top: 20px; }
  .tool-panel { padding: 25px 24px 28px; }
  .tool-panel h2 { font-size: 32px; }
  .route-row { grid-template-columns: 48px 1fr; } .route-meta, .route-action { grid-column: 2; } .random-band { grid-template-columns: 1fr; padding: 27px; } .tools-overview { grid-template-columns: 1fr; } .tools-manifesto { min-height: 94px; padding: 20px 0; border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; align-items: center; } .tools-manifesto strong { writing-mode: initial; font-size: 24px; }
  .tool-entry { grid-template-columns: 55px 1fr; } .tool-entry-meta, .tool-entry-arrow { grid-column: 2; } .exam-grid, .game-grid, .principles-grid { grid-template-columns: 1fr; } .metric-grid { grid-template-columns: 1fr; } .relation-grid { grid-template-columns: repeat(2,1fr); } .tool-row { display: block; } .tool-row button { width: 100%; margin-top: 8px; } .meaning-row { grid-template-columns: 90px 1fr; } .practice-row { grid-template-columns: repeat(3,1fr); } .footer span { display: block; margin-bottom: 9px; }
  .analytics-consent { grid-template-columns: 1fr; gap: 16px; padding: 18px; }
  .analytics-consent-actions { flex-direction: column-reverse; }
  .analytics-consent .btn { width: 100%; }
}
@media print { .review-strip, .topbar, .footer, .page-head, .no-print, .analytics-consent { display: none !important; } body { background: white; } .main, .tool-shell, .tool-panel { width: 100%; max-width: none; margin: 0; padding: 0; border: 0; box-shadow: none; } .tool-panel > :not(.practice-sheet):not(h2):not(.eyebrow) { display: none !important; } .practice-sheet { margin: 10mm; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }