:root {
  --gold: #C5A059;
  --ink: #2C2A29;
  --paper: #F6F3EB;
  --vermilion: #9E2A2B;
  --muted-paper: #6D665D;
  --line: rgba(44, 42, 41, .18);
  color: var(--ink);
  background: var(--paper);
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
.hidden { display: none !important; }
.splash-screen, .loading-screen { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: var(--paper); color: var(--ink); }
.splash-screen { background: radial-gradient(circle at 50% 20%, rgba(197, 160, 89, .14), transparent 42%), var(--paper); }
.splash-card { width: min(100%, 560px); padding: 42px clamp(24px, 7vw, 56px); border: 1px solid rgba(197, 160, 89, .55); border-radius: 8px; background: rgba(255, 255, 255, .58); box-shadow: 0 12px 36px rgba(44, 42, 41, .12); text-align: center; animation: ink-reveal .45s ease both; }
.splash-card h1 { margin: 16px 0; font-family: "STSong", "SimSun", serif; font-size: clamp(1.8rem, 7vw, 2.6rem); }
.splash-card p:not(.eyebrow) { margin: 0; color: var(--muted-paper); line-height: 1.85; }
.splash-card .primary-button { margin-top: 28px; }
.loading-screen { z-index: 55; background: rgba(246, 243, 235, .97); animation: ink-reveal .3s ease both; }
.loading-screen p { margin: 4px 0; color: var(--muted-paper); font-family: "STSong", "SimSun", serif; font-size: 1rem; letter-spacing: .08em; animation: loading-breathe 1.6s ease-in-out infinite; }
.loading-screen p:last-child { animation-delay: .8s; }
.loading-orbit { width: 54px; height: 54px; margin-bottom: 18px; border: 2px solid rgba(197, 160, 89, .25); border-top-color: var(--vermilion); border-right-color: var(--gold); border-radius: 50%; animation: loading-spin 1.1s linear infinite; }
@keyframes loading-spin { to { transform: rotate(360deg); } }
@keyframes loading-breathe { 0%, 100% { opacity: .48; } 50% { opacity: 1; } }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-width: 320px; min-height: 100vh; overflow-x: hidden; background: var(--paper); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
button, .option, .gallery-card { touch-action: manipulation; }
button:disabled { cursor: wait; opacity: .64; }
.app-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background-color: var(--paper); background-image: radial-gradient(circle at 15% 10%, rgba(197, 160, 89, .10), transparent 32%), repeating-linear-gradient(0deg, rgba(44, 42, 41, .018) 0, rgba(44, 42, 41, .018) 1px, transparent 1px, transparent 5px); }
.hero, .panel { width: min(100%, 560px); text-align: center; padding: 40px 18px; }
.hero h1, .result-screen h1, .question-card h1, .panel h1 { font-family: "STSong", "SimSun", serif; font-weight: 600; letter-spacing: 0; }
.hero h1 { font-size: clamp(2rem, 8vw, 3.2rem); line-height: 1.25; margin: 18px 0; }
.hero p:not(.eyebrow), .result-note { color: var(--muted-paper); line-height: 1.75; }
.eyebrow { margin: 0; color: var(--gold); font-size: .78rem; letter-spacing: .12em; }
.version-badge { display: inline-block; margin-bottom: 16px; border: 1px solid rgba(212, 175, 55, .7); border-radius: 999px; padding: 5px 10px; color: var(--gold); font-size: .72rem; line-height: 1; }
.hero-description { display: grid; gap: 2px; margin: 0; }
.hero-description span { display: block; overflow-wrap: anywhere; }
.hero-gallery-button { display: block; margin: 12px auto 0; }
.primary-button, .secondary-button { min-height: 48px; border-radius: 6px; padding: 12px 24px; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.primary-button { margin-top: 22px; border: 1px solid var(--gold); background: var(--vermilion); color: var(--paper); font-weight: 700; }
.secondary-button { border: 1px solid rgba(245, 244, 237, .45); color: var(--paper); background: rgba(245, 244, 237, .04); }
.primary-button:hover, .primary-button:focus-visible { background: #A93533; }
.secondary-button:hover, .secondary-button:focus-visible { border-color: var(--gold); background: rgba(212, 175, 55, .12); }
.primary-button:active, .secondary-button:active { transform: translateY(1px); }
.primary-button:focus-visible, .secondary-button:focus-visible, .option:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.quiz-screen { width: min(100%, 680px); min-height: calc(100vh - 48px); display: flex; flex-direction: column; }
.quiz-header { display: grid; gap: 10px; color: var(--muted-paper); font-size: .85rem; }
.progress-track { height: 3px; background: rgba(245, 244, 237, .2); overflow: hidden; }
.progress-track i { display: block; height: 100%; background: var(--gold); transition: width .2s ease; }
.question-card { margin: auto 0; }
.question-card h1 { font-size: clamp(1.5rem, 6vw, 2.1rem); line-height: 1.48; margin: 18px 0 30px; }
.options { display: grid; gap: 12px; }
.option { min-height: 68px; width: 100%; display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; text-align: left; padding: 16px; border: 1px solid rgba(245, 244, 237, .34); border-radius: 6px; background: rgba(245, 244, 237, .06); color: var(--paper); line-height: 1.55; transition: border-color .2s ease, background .2s ease; }
.option:hover, .option.selected { border-color: var(--gold); background: rgba(212, 175, 55, .13); }
.option b { color: var(--gold); }
.quiz-footer { min-height: 72px; display: flex; align-items: end; justify-content: space-between; padding-bottom: env(safe-area-inset-bottom); color: #b9b5aa; font-size: .85rem; }
.result-screen { width: min(100%, 720px); padding: 0; background: rgba(245, 244, 237, .065); border: 1px solid rgba(245, 244, 237, .28); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.05); overflow: hidden; }
.result-tier { padding: 32px clamp(20px, 6vw, 56px); }
.result-tier + .result-tier { border-top: 1px solid rgba(245, 244, 237, .22); }
.result-module { position: relative; }
.result-tier-four { background: rgba(212, 175, 55, .045); }
.result-tier-one { text-align: center; background: rgba(212, 175, 55, .08); }
.dynasty-anchor { margin: 14px 0 0; color: var(--paper); font-size: clamp(1.15rem, 4vw, 1.55rem); line-height: 1.5; }
.dynasty-anchor strong { color: var(--gold); }
.result-screen h1 { margin: 14px 0 12px; color: var(--gold); font-family: "STSong", "SimSun", serif; font-size: clamp(2.1rem, 9vw, 3.4rem); }
.identity-summary { max-width: 540px; margin: 0 auto; color: var(--paper); line-height: 1.75; }
.keyword-list, .dimension-list { display: flex; flex-wrap: wrap; gap: 8px; }
.classical-heading { text-align: center; font-weight: 800; letter-spacing: .16em; color: var(--vermilion); }
.ecological-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 18px; }
.ecological-tags span { padding: 6px 10px; border: 1px solid rgba(197, 160, 89, .7); border-radius: 999px; color: var(--ink); background: rgba(197, 160, 89, .10); font-size: .76rem; }
.keyword-list { justify-content: center; margin-top: 20px; }
.keyword-list span, .dimension-list span { max-width: 100%; overflow-wrap: anywhere; border: 1px solid rgba(212, 175, 55, .7); border-radius: 999px; padding: 7px 13px; color: var(--paper); font-size: .82rem; }
.tier-label { margin: 0 0 14px; color: var(--gold); font-size: .78rem; letter-spacing: .1em; }
.result-tier h2 { margin: 0 0 10px; color: var(--paper); font-family: "STSong", "SimSun", serif; font-size: 1.4rem; }
.result-tier-two h2:not(:first-of-type) { margin-top: 26px; }
.result-tier p { overflow-wrap: anywhere; color: #d7d3c7; line-height: 1.75; }
.result-tier p, .gallery-summary p:not(.eyebrow) { user-select: text; -webkit-user-select: text; -webkit-touch-callout: default; }
.portrait-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.portrait-panel, .survival-panel { margin-top: 22px; padding: 16px; border: 1px solid rgba(245, 244, 237, .22); border-radius: 6px; background: rgba(245,244,237,.045); }
.portrait-panel h3, .survival-panel h3 { margin: 0; color: var(--gold); font-size: .92rem; }
.portrait-panel p, .survival-panel p { margin-bottom: 0; }
.portrait-grid > div, .neighbor-list article { min-width: 0; overflow-wrap: anywhere; }
.portrait-grid > div, .neighbor-list article { padding: 16px; border: 1px solid rgba(245, 244, 237, .22); border-radius: 6px; background: rgba(245,244,237,.045); }
.portrait-grid h3, .neighbor-list h3 { margin: 0; color: var(--gold); font-size: .92rem; }
.portrait-grid p, .neighbor-list p { margin-bottom: 0; font-size: .9rem; }
.neighbor-list { display: grid; gap: 10px; }
.result-actions { display: flex; gap: 10px; margin-top: 24px; padding-bottom: env(safe-area-inset-bottom); }
.result-actions button { flex: 1; margin-top: 0; }
.share-status { min-height: 1.4em; margin: 12px 0 0 !important; text-align: center; font-size: .8rem; color: var(--gold) !important; }
.radar-wrap { width: min(100%, 560px); margin: 4px auto 30px; padding: 14px 10px 10px; border: 1px solid rgba(212, 175, 55, .28); border-radius: 8px; background: rgba(245, 244, 237, .035); box-shadow: 0 4px 12px rgba(0,0,0,.05); }
.radar-wrap canvas { display: block; width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 1; }
.radar-caption { margin: 0 !important; text-align: center; color: #A39684 !important; font-size: .75rem; }
.bipolar-wrap { width: min(100%, 560px); margin: 4px auto 30px; padding: 20px; border: 1px solid rgba(212, 175, 55, .28); border-radius: 8px; background: rgba(245, 244, 237, .035); box-shadow: 0 4px 12px rgba(0,0,0,.05); }
.viz-label { margin: 0 0 14px !important; text-align: center; color: var(--gold) !important; font-size: .78rem !important; letter-spacing: .08em; }
.bipolar-bars { position: relative; display: grid; gap: 20px; }
.bipolar-bars::before { content: ""; position: absolute; top: -6px; bottom: -6px; left: 50%; width: 2px; background: rgba(245, 244, 237, .58); pointer-events: none; }
.bipolar-row { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(72px, 1fr) minmax(140px, 2fr) minmax(72px, 1fr); align-items: center; gap: 8px; min-width: 0; }
.bipolar-label { min-width: 0; overflow-wrap: anywhere; color: var(--muted-paper); font-size: .82rem; font-weight: 600; line-height: 1.25; }
.bipolar-label-left { text-align: right; }
.bipolar-label-right { text-align: left; }
.bipolar-track { position: relative; height: 14px; border-radius: 999px; background: rgba(245, 244, 237, .14); overflow: hidden; }
.bipolar-axis { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(245, 244, 237, .72); }
.bipolar-fill { position: absolute; top: 1px; bottom: 1px; max-width: 50%; background: var(--vermilion); }
.bipolar-fill.positive { right: 50%; }
.bipolar-fill.negative { left: 50%; background: var(--gold); }
.deep-analysis { margin-top: 24px; padding: 18px; border: 1px solid rgba(212, 175, 55, .52); border-radius: 6px; background: rgba(212, 175, 55, .075); }
.deep-analysis-label { margin: 0 !important; color: var(--gold) !important; font-family: "STSong", "SimSun", serif; font-size: 1rem !important; }
.deep-analysis p { margin: 10px 0 0; }
.deep-analysis p:first-of-type { margin-top: 14px; }
.deep-analysis p:nth-of-type(2)::first-letter { float: left; margin: .05em .12em 0 0; color: var(--vermilion); font-family: "STSong", "SimSun", serif; font-size: 2em; font-weight: 800; line-height: .86; }
.historical-mirror { margin: 22px 0 0; padding: 16px 18px; border-left: 3px solid var(--vermilion); color: var(--ink); background: rgba(197, 160, 89, .12); line-height: 1.7; }
.historical-mirror span { display: block; margin-bottom: 4px; color: var(--vermilion); font-size: .78rem; font-weight: 800; letter-spacing: .08em; }
.poster-modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 18px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); background: rgba(20, 19, 17, .88); animation: ink-reveal .25s ease both; }
.poster-modal-card { position: relative; width: min(100%, 420px); max-height: calc(100vh - 36px); display: grid; justify-items: center; gap: 10px; padding: 18px 14px 14px; border: 1px solid rgba(212, 175, 55, .46); border-radius: 8px; background: #2B2B2B; box-shadow: 0 4px 12px rgba(0,0,0,.28); }
.poster-modal-card p { margin: 0; color: var(--paper); font-size: .86rem; text-align: center; }
.poster-modal-card img { display: block; width: auto; max-width: 100%; max-height: calc(100vh - 100px); border-radius: 4px; object-fit: contain; user-select: none; -webkit-user-select: none; }
.poster-close { position: absolute; top: 8px; right: 8px; z-index: 1; width: 44px; height: 44px; border: 1px solid rgba(245, 244, 237, .42); border-radius: 50%; color: var(--paper); background: rgba(43, 43, 43, .8); font-size: 1.45rem; line-height: 1; }
.poster-close:hover, .poster-close:focus-visible { border-color: var(--gold); color: var(--gold); outline: none; }
.gallery-screen { width: min(100%, 1040px); min-height: calc(100vh - 48px); padding: 12px 0 36px; }
.gallery-header { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; margin-bottom: 24px; }
.gallery-header .secondary-button { min-width: 72px; }
.gallery-header h1 { margin: 5px 0; color: var(--paper); font-family: "STSong", "SimSun", serif; font-size: clamp(1.8rem, 6vw, 2.6rem); }
.gallery-header p:not(.eyebrow) { margin: 0; color: var(--muted-paper); }
.gallery-summary { margin: 0 0 18px; padding: 18px; border: 1px solid rgba(212, 175, 55, .48); border-radius: 8px; background: rgba(212, 175, 55, .09); box-shadow: 0 4px 12px rgba(0,0,0,.05); animation: ink-reveal .25s ease both; }
.gallery-summary h2 { margin: 5px 0 10px; color: var(--gold); font-family: "STSong", "SimSun", serif; }
.gallery-summary p:not(.eyebrow) { margin: 0; color: var(--paper); line-height: 1.65; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gallery-card { min-width: 0; min-height: 166px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 16px; border: 1px solid rgba(245, 244, 237, .2); border-radius: 6px; text-align: left; overflow-wrap: anywhere; }
.gallery-card.unlocked { color: var(--paper); background: rgba(245, 244, 237, .06); transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.gallery-card.unlocked:hover, .gallery-card.unlocked:focus-visible, .gallery-card.unlocked.active { border-color: var(--gold); background: rgba(212, 175, 55, .12); outline: none; transform: translateY(-2px); }
.gallery-card.locked { color: rgba(245, 244, 237, .48); background: rgba(245, 244, 237, .025); filter: grayscale(1); opacity: .46; }
.gallery-card p { margin: 0; color: var(--gold); font-size: .76rem; }
.gallery-card h2 { margin: 10px 0; font-family: "STSong", "SimSun", serif; font-size: 1.2rem; }
.gallery-card div { display: flex; flex-wrap: wrap; gap: 6px; }
.gallery-card div span, .gallery-card > span { padding: 4px 7px; border: 1px solid rgba(212, 175, 55, .46); border-radius: 999px; font-size: .7rem; }
.gallery-modal { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; padding: 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); background: rgba(0, 0, 0, .8); animation: ink-reveal .2s ease both; }
.gallery-modal-card { position: relative; width: min(90vw, 400px); max-height: min(78vh, 720px); overflow-y: auto; padding: 32px 22px 24px; border: 1px solid rgba(43, 43, 43, .18); border-radius: 8px; background: var(--paper); color: var(--ink); box-shadow: 0 14px 40px rgba(0, 0, 0, .34); }
.gallery-modal-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 1px solid rgba(43, 43, 43, .22); border-radius: 50%; background: transparent; color: var(--ink); font-size: 1.5rem; line-height: 1; }
.gallery-modal-close:hover, .gallery-modal-close:focus-visible { border-color: var(--vermilion); color: var(--vermilion); outline: none; }
.gallery-modal-dynasty { margin: 0; color: var(--vermilion); font-size: .78rem; letter-spacing: .12em; text-align: center; }
.gallery-modal-card h2 { margin: 8px 0; font-family: "STSong", "SimSun", serif; font-size: clamp(1.75rem, 8vw, 2.25rem); text-align: center; }
.gallery-modal-summary { margin: 0; color: #615d54; line-height: 1.65; text-align: center; }
.gallery-modal-keywords { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 18px 0; }
.gallery-modal-keywords span { border: 1px solid rgba(195, 66, 63, .46); border-radius: 999px; padding: 5px 9px; color: var(--ink); font-size: .74rem; }
.gallery-modal-copy { display: grid; gap: 16px; border-top: 1px solid rgba(43, 43, 43, .16); padding-top: 18px; }
.gallery-modal-copy section { min-width: 0; }
.gallery-modal-copy h3 { margin: 0 0 7px; color: var(--vermilion); font-size: .86rem; }
.gallery-modal-copy p { margin: 0; overflow-wrap: anywhere; line-height: 1.72; user-select: text; -webkit-user-select: text; }
.hero, .quiz-screen, .result-screen, .gallery-screen { animation: ink-reveal .45s ease both; }
@keyframes ink-reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 760px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .app-shell { padding: 16px; } .quiz-screen, .gallery-screen { min-height: calc(100vh - 32px); } .option { padding: 14px; } .portrait-grid { grid-template-columns: 1fr; } .result-actions { flex-direction: column; } .gallery-header { gap: 12px; } .gallery-card { min-height: 145px; padding: 13px; } .bipolar-wrap { padding: 20px 14px; } .bipolar-bars { gap: 18px; } .bipolar-row { grid-template-columns: minmax(62px, 1fr) minmax(110px, 1.55fr) minmax(62px, 1fr); gap: 6px; } .bipolar-label { font-size: .76rem; } .gallery-modal { padding: 14px; } .gallery-modal-card { width: min(90vw, 400px); max-height: min(80vh, 720px); padding: 30px 18px 20px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } }
.result-screen { background: rgba(255, 252, 244, .88); border-color: rgba(44, 42, 41, .18); }
.result-tier-one { background: rgba(197, 160, 89, .14); }
.result-tier-four { background: rgba(197, 160, 89, .08); }
.result-tier p, .identity-summary { color: var(--muted-paper); }
.result-tier h2, .result-screen h1 { color: var(--ink); }
.portrait-panel, .survival-panel, .neighbor-list article { border-color: rgba(44, 42, 41, .16); background: rgba(255, 255, 255, .34); }
.bipolar-wrap, .radar-wrap { border-color: rgba(197, 160, 89, .48); background: rgba(255, 255, 255, .28); }
.bipolar-label { color: var(--muted-paper); }
.bipolar-bars::before, .bipolar-axis { background: rgba(44, 42, 41, .38); }
.option, .secondary-button { color: var(--ink); border-color: rgba(44, 42, 41, .28); background: rgba(255, 255, 255, .42); }
.secondary-button:hover, .secondary-button:focus-visible { background: rgba(197, 160, 89, .16); }
.quiz-header, .quiz-footer { color: var(--muted-paper); }
.keyword-list span, .ecological-tags span, .dimension-list span, .gallery-card h2, .gallery-card.unlocked { color: #2C2A29; }
.gallery-header h1 { color: #5C4A3D; }
.bipolar-fill.positive { background: linear-gradient(90deg, #BA6860 0%, #9C4D46 100%); box-shadow: inset 0 2px 4px rgba(255,255,255,.12), 0 2px 5px rgba(156,77,70,.22); border: 1px solid #9C4D46; }
.bipolar-fill.negative { background: linear-gradient(90deg, #D4BA8C 0%, #B89C6A 100%); box-shadow: inset 0 2px 4px rgba(255,255,255,.2), 0 2px 5px rgba(184,156,106,.22); border: 1px solid #B89C6A; }
.bipolar-fill.positive { border-radius: 4px 0 0 4px; }
.bipolar-fill.negative { border-radius: 0 4px 4px 0; }