:root {
  color-scheme: dark;
  --night: #211d19;
  --night-deep: #15120f;
  --paper: #f4e8d1;
  --paper-light: #fbf3e3;
  --ink: #221d18;
  --muted: #82776a;
  --cinnabar: #ad4038;
  --cinnabar-dark: #7b2b27;
  --gold: #9b8c6f;
  --gold-light: #d3bb91;
  --line: rgba(115, 93, 62, .27);
  font-family: "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
  background: var(--night-deep);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--night-deep); }
body { min-height: 100%; margin: 0; color: var(--paper); background: radial-gradient(circle at 50% -10%, #514439 0, var(--night) 34rem, var(--night-deep) 100%); }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
#app { min-height: 100dvh; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.scene { position: relative; isolation: isolate; width: min(100%, 480px); min-height: 100dvh; margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 15px max(28px, env(safe-area-inset-bottom)); overflow: hidden; }
.scene::before, .scene::after { position: fixed; z-index: -2; content: ""; pointer-events: none; }
.scene::before { inset: 0; opacity: .18; background-image: repeating-linear-gradient(92deg, transparent 0 18px, rgba(239, 216, 174, .06) 19px, transparent 20px), radial-gradient(#fff 0.6px, transparent 0.8px); background-size: auto, 7px 7px; }
.scene::after { inset: 0; box-shadow: inset 0 0 110px rgba(0, 0, 0, .72); }
.paper-texture { position: fixed; inset: 0; z-index: -1; opacity: .15; pointer-events: none; background: linear-gradient(102deg, transparent 48%, rgba(255,255,255,.08) 50%, transparent 52%); background-size: 68px 100%; }
.sutra-watermark { position: fixed; z-index: -1; top: 5%; left: 50%; width: min(92vw, 540px); color: rgba(230,205,162,.04); font: 700 clamp(54px, 16vw, 88px)/1.7 "Songti SC", serif; letter-spacing: .18em; text-align: center; writing-mode: vertical-rl; transform: translateX(-50%); pointer-events: none; }
.candle-glow { position: fixed; z-index: -1; top: -170px; left: 50%; width: 520px; height: 420px; background: radial-gradient(circle, rgba(239,194,125,.19), rgba(239,194,125,0) 68%); transform: translateX(-50%); pointer-events: none; }

.cover-card, .paper-card, .question-card, .result-section, .easter-envelope { position: relative; color: var(--ink); background: var(--paper); border: 1px solid rgba(207,179,132,.48); border-radius: 7px; box-shadow: 0 26px 70px rgba(0,0,0,.34), inset 0 0 35px rgba(106,78,43,.08); }
.cover-card::before, .paper-card::before, .question-card::before, .result-section::before { position: absolute; inset: 5px; border: 1px solid rgba(132,103,62,.15); content: ""; pointer-events: none; }
.gate-card { min-height: calc(100dvh - 46px); padding: 19px 24px 22px; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.cover-topline { display: flex; align-items: center; justify-content: space-between; color: var(--gold); font: 11px/1.2 "Songti SC", serif; letter-spacing: .16em; }
.cover-topline b { color: var(--cinnabar); font-weight: 700; }
.ledger-illustration { width: 100%; max-width: 360px; margin: 2px auto -10px; overflow: visible; }
.ledger-shadow { fill: #17130f; opacity: .35; }
.ledger-page { fill: #ead9bb; stroke: #9c835e; stroke-width: 1.5; }
.fold { fill: none; stroke: #9c835e; }
.ledger-lines { fill: none; stroke: #9b8c6f; stroke-width: 1; stroke-dasharray: 3 5; opacity: .72; }
.ledger-title { fill: #6f302c; font: 700 17px "Kaiti SC", serif; letter-spacing: .28em; }
.wax circle { fill: none; stroke: #a23b35; stroke-width: 2; }.wax text { fill: #a23b35; font: 700 22px "Kaiti SC", serif; text-anchor: middle; }
.thread { fill: none; stroke: #a73e38; stroke-width: 2; stroke-linecap: round; opacity: .86; stroke-dasharray: 5 6; animation: thread-flow 5s linear infinite; }
.incense, .smoke { fill: none; stroke: #8c7250; stroke-width: 2; stroke-linecap: round; }.smoke { opacity: .55; animation: smoke 3s ease-in-out infinite; transform-origin: 321px 84px; }
@keyframes thread-flow { to { stroke-dashoffset: -44; } }
@keyframes smoke { 50% { transform: translateX(3px) scaleX(.9); opacity: .25; } }

.eyebrow { margin: 0 0 10px; color: var(--cinnabar); font-size: 11px; font-weight: 760; letter-spacing: .2em; }
.gate-card h1 { margin: 0; color: var(--cinnabar-dark); font: 700 clamp(34px, 10vw, 46px)/1.2 "Songti SC", "STSong", serif; letter-spacing: .08em; text-shadow: 0 1px #fff6e7; }
.cover-hook { margin: 19px 0 17px; color: #52483f; font: 17px/1.75 "Kaiti SC", "Songti SC", serif; }
.truth-teasers { display: flex; justify-content: center; gap: 0; margin-bottom: 18px; color: #6e5f50; font-size: 11px; }
.truth-teasers span { padding: 0 10px; border-right: 1px solid var(--line); }.truth-teasers span:last-child { border: 0; }
.primary-button, .outline-button, .text-button { min-height: 48px; border-radius: 4px; cursor: pointer; transition: transform .18s ease, filter .18s ease, opacity .18s ease; }
.primary-button { width: 100%; border: 1px solid #6c2824; color: #fff7e9; background: linear-gradient(135deg, #b4483f, #8d302c); box-shadow: 0 8px 24px rgba(110,41,35,.28), inset 0 1px rgba(255,255,255,.18); font-weight: 760; letter-spacing: .08em; }
.primary-button:hover, .outline-button:hover { filter: brightness(1.06); }.primary-button:active, .outline-button:active { transform: translateY(1px) scale(.995); }.primary-button:disabled { opacity: .58; cursor: wait; }
.hero-button { margin-top: 2px; }
.outline-button { width: 100%; border: 1px solid rgba(151,129,93,.62); color: #695845; background: rgba(255,250,240,.42); font-weight: 700; }
.text-button { border: 0; color: var(--muted); background: transparent; text-decoration: underline; text-underline-offset: 4px; }
.micro-copy, .disclaimer, .result-disclaimer { color: var(--muted); font-size: 10px; line-height: 1.65; }
.micro-copy { margin: 12px 0 0; }
.code-panel { padding: 15px; border: 1px solid var(--line); background: rgba(255,250,239,.45); text-align: left; animation: unfold .35s ease both; }
@keyframes unfold { from { opacity: 0; transform: translateY(8px); } }
.code-panel p { display: grid; gap: 3px; margin: 0 0 10px; }.code-panel p b { color: #4e3a2c; font-size: 14px; }.code-panel p span { color: var(--muted); font-size: 11px; }
.code-field input { width: 100%; height: 46px; margin-bottom: 9px; padding: 0 13px; border: 1px solid #b6a282; border-radius: 3px; color: var(--ink); background: rgba(255,255,255,.62); outline: none; text-align: center; text-transform: uppercase; letter-spacing: .08em; }.code-field input:focus { border-color: var(--cinnabar); box-shadow: 0 0 0 3px rgba(173,64,56,.1); }

.intro-scene { display: grid; place-items: center; }
.intro-card { width: 100%; padding: 25px 23px; text-align: center; }
.entry-ticket { width: 112px; min-height: 142px; margin: -5px auto 23px; padding: 17px 12px; border: 1px solid var(--cinnabar); color: var(--cinnabar); display: grid; place-items: center; background: rgba(255,255,255,.25); transform: rotate(-2deg); }
.entry-ticket span { font: 11px "Songti SC", serif; letter-spacing: .18em; }.entry-ticket b { font: 700 34px "Kaiti SC", serif; }.entry-ticket em { font-size: 9px; font-style: normal; letter-spacing: .1em; }
.intro-card h1 { margin: 0 0 16px; color: #3a2d24; font: 700 26px/1.42 "Songti SC", serif; }.intro-card > p:not(.eyebrow,.soft-note,.disclaimer) { margin: 0 auto; max-width: 340px; color: #625548; font-size: 14px; line-height: 1.85; }
.intro-notes { display: grid; grid-template-columns: repeat(3,1fr); margin: 24px 0 18px; border-block: 1px solid var(--line); }
.intro-notes div { display: grid; gap: 2px; padding: 13px 4px; border-right: 1px solid var(--line); }.intro-notes div:last-child { border: 0; }.intro-notes b { color: var(--cinnabar); font: 700 25px "Songti SC", serif; }.intro-notes span { color: var(--muted); font-size: 10px; }
.soft-note { margin: 0 0 18px; padding: 10px 12px; color: #6f6356; background: rgba(139,112,74,.08); font-size: 11px; line-height: 1.65; }
.intro-card .text-button { display: block; margin: 9px auto 0; }.disclaimer { margin: 13px 0 0; }

.quiz-scene { padding-top: max(13px, env(safe-area-inset-top)); }
.quiz-shell { width: 100%; }
.quiz-header { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; gap: 8px; min-height: 52px; }
.back-button { width: 36px; height: 36px; border: 1px solid rgba(211,187,145,.35); border-radius: 50%; color: var(--gold-light); background: rgba(0,0,0,.16); cursor: pointer; }.back-button:disabled { opacity: .2; }
.progress-meta { display: grid; gap: 3px; text-align: center; }.progress-meta span { color: #aa9a80; font-size: 10px; letter-spacing: .12em; }.progress-meta b { color: #e9d8b9; font: 700 13px "Songti SC", serif; }
.incense-progress { position: relative; height: 18px; margin: 6px 10px 13px; }.incense-progress span { position: absolute; top: 8px; left: 0; right: 0; height: 2px; background: rgba(154,137,108,.28); }.incense-progress i { position: absolute; top: 8px; left: 0; height: 2px; background: linear-gradient(90deg,#8f7651,#c3a36f); transition: width .35s ease; }.incense-progress i b { position: absolute; top: -4px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--cinnabar); box-shadow: 0 0 14px #df8f67; }
.question-card { padding: 25px 20px 22px; animation: page-up .3s ease both; }
@keyframes page-up { from { opacity: 0; transform: translateY(10px) scale(.99); } }
.question-number { position: absolute; top: 16px; right: 17px; color: rgba(135,101,64,.12); font: 700 58px/1 "Songti SC", serif; }
.question-lead { position: relative; margin: 0 45px 12px 0; color: #8a7966; font: 14px/1.75 "Kaiti SC", serif; }
.question-card h1 { position: relative; margin: 0 0 20px; color: #30251e; font: 700 24px/1.48 "Songti SC", serif; }
.options { display: grid; gap: 9px; }
.option-button { position: relative; display: grid; grid-template-columns: 17px 27px 1fr; gap: 9px; align-items: center; min-height: 66px; padding: 12px 12px; border: 1px dashed rgba(127,105,71,.42); border-radius: 4px; color: #332b25; background: rgba(255,252,245,.54); text-align: left; cursor: pointer; overflow: hidden; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.option-button::after { position: absolute; inset: 50%; border-radius: 50%; content: ""; background: rgba(173,64,56,.13); transform: scale(0); transition: inset .22s ease, transform .22s ease; }
.option-button:hover { border-color: var(--cinnabar); transform: translateY(-1px); }.option-button.selected { border-style: solid; border-color: var(--cinnabar); background: rgba(173,64,56,.08); }.option-button.selected::after { inset: -30%; transform: scale(1); }
.option-radio, .option-letter, .option-button b { position: relative; z-index: 1; }.option-radio { width: 16px; height: 16px; border: 1.5px solid #9d9e93; border-radius: 50%; }.selected .option-radio { border: 4px solid var(--cinnabar); }
.option-letter { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(149,119,79,.5); color: #856f54; font: 700 13px "Songti SC", serif; font-style: normal; transform: rotate(-2deg); }.selected .option-letter { color: #fff8ea; border-color: var(--cinnabar); background: var(--cinnabar); }
.option-button b { font-size: 14px; line-height: 1.7; font-weight: 580; }

.transition-scene { display: grid; place-items: center; text-align: center; }
.transition-card { width: 100%; padding: 44px 24px; }
.seal-loader { position: relative; width: 108px; height: 108px; margin: 0 auto 25px; display: grid; place-items: center; }.seal-loader::before, .seal-loader span { position: absolute; inset: 0; border: 1px solid rgba(194,167,122,.45); border-radius: 50%; content: ""; }.seal-loader span { inset: 10px; border-style: dashed; animation: spin 5s linear infinite; }.seal-loader i { width: 57px; height: 57px; display: grid; place-items: center; border: 2px solid var(--cinnabar); color: var(--cinnabar); font: 700 31px "Kaiti SC", serif; font-style: normal; transform: rotate(-6deg); box-shadow: inset 0 0 0 4px rgba(173,64,56,.08); }
@keyframes spin { to { transform: rotate(360deg); } }
.transition-card h1 { margin: 0; font: 700 29px/1.5 "Songti SC", serif; }.loading-lines { display: grid; gap: 7px; margin-top: 26px; color: #a99a83; font-size: 11px; }.loading-lines span { animation: pulse 1.5s ease infinite; }.loading-lines span:nth-child(2){animation-delay:.3s}.loading-lines span:nth-child(3){animation-delay:.6s}@keyframes pulse{50%{color:#ead3aa}}

.result-scene { padding-inline: 12px; overflow: visible; }.result-scroll { --type-accent: var(--cinnabar); display: grid; gap: 15px; padding-bottom: 24px; }
.result-hero { position: relative; margin-inline: -12px; min-height: 440px; padding: 66px 30px 31px; text-align: center; background: radial-gradient(circle at 50% 26%, color-mix(in srgb,var(--type-accent) 28%,transparent), transparent 34%), linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.38)); border-bottom: 1px solid rgba(211,187,145,.28); overflow: hidden; }
.result-hero::before { position: absolute; width: 310px; height: 310px; left: 50%; top: 34px; border: 1px solid rgba(211,187,145,.16); border-radius: 50%; content:""; transform: translateX(-50%); box-shadow: 0 0 0 11px rgba(211,187,145,.035), 0 0 0 27px rgba(211,187,145,.025); }
.survival-stamp { position: absolute; top: 22px; right: 24px; padding: 7px 5px; border: 1px solid #bd5b52; color: #cf6c62; font: 700 12px "Kaiti SC",serif; letter-spacing:.1em; transform: rotate(5deg); }
.result-hero .eyebrow { color: #c8b394; }.type-glyph { position: relative; width: 105px; height: 105px; margin: 11px auto 2px; fill: none; stroke: #d6bc91; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 7px 13px rgba(0,0,0,.2)); }
.result-hero h1 { position: relative; margin: 0; color: #f2d8ae; font: 700 44px/1.2 "Songti SC",serif; letter-spacing:.08em; }.subtype-tag { position: relative; width: fit-content; margin: 11px auto 17px; padding: 6px 13px; border: 1px solid color-mix(in srgb,var(--type-accent) 60%,#d9c09a); color: #f2dfc0; font-size: 12px; letter-spacing:.09em; }.result-kicker { position: relative; margin: 0 auto; max-width: 370px; color: #e0d0b8; font: 16px/1.85 "Kaiti SC",serif; }.tie-note { position: relative; margin: 11px auto 0; max-width: 350px; color:#a99b87;font-size:10px;line-height:1.6; }
.result-section, .easter-envelope { padding: 22px 20px; }.section-mark { display: flex; align-items: center; gap: 9px; margin: 0 0 15px; color: var(--type-accent); font-size: 11px; font-weight: 750; letter-spacing: .16em; }.section-mark::after { height:1px; flex:1; content:""; background:linear-gradient(90deg,var(--line),transparent); }
.verdict-card blockquote { margin: 0; color: #40352d; font: 16px/2 "Kaiti SC", "Songti SC", serif; }.subtype-copy { margin-top: 18px; padding: 16px; border-left: 2px solid var(--type-accent); background: rgba(132,99,55,.065); }.subtype-copy b { color: var(--type-accent); font:700 17px "Songti SC",serif; }.subtype-copy p { margin:7px 0 0;color:#66584b;font-size:13px;line-height:1.85; }
.mirror-card { display:grid; gap:12px; }.mirror-card .section-mark { margin-bottom:3px; }.mirror-card > div { padding:14px 15px; border:1px solid var(--line); background:rgba(255,255,255,.28); }.mirror-card span { color: var(--type-accent); font-size:10px; letter-spacing:.12em; }.mirror-card p { margin:7px 0 0;color:#594a40;font:14px/1.8 "Kaiti SC",serif; }
.dimension-section h2 { margin:-3px 0 15px;color:#3c3027;font:700 20px "Songti SC",serif; }.compass { position:relative;width:132px;height:132px;margin:0 auto 19px;border:1px solid #aa9575;border-radius:50%;box-shadow:0 0 0 7px rgba(155,140,111,.11),inset 0 0 18px rgba(155,140,111,.12);animation:compass-in 1.2s ease both; }.compass::before,.compass::after{position:absolute;content:"";background:#b5a383;opacity:.65}.compass::before{width:1px;top:9px;bottom:9px;left:50%}.compass::after{height:1px;left:9px;right:9px;top:50%}.compass span{position:absolute;inset:18px;border:1px dashed #b8a98e;border-radius:50%}.compass i{position:absolute;left:63px;top:17px;width:2px;height:48px;background:var(--type-accent);transform-origin:50% 49px;transform:rotate(34deg);}.compass i::before{position:absolute;top:-5px;left:-4px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:10px solid var(--type-accent);content:""}.compass b{position:absolute;inset:46px;display:grid;place-items:center;border:1px solid var(--type-accent);color:var(--type-accent);font:700 22px "Kaiti SC",serif;transform:rotate(-4deg)}@keyframes compass-in{from{opacity:0;transform:rotate(70deg) scale(.8)}}
.dimension-list { display:grid;gap:10px; }.dimension-card { padding:14px;border:1px solid var(--line);background:rgba(255,255,255,.35); }.state-row{display:flex;justify-content:space-between;align-items:center;}.state-row span{font-size:13px;font-weight:720}.state-row strong{width:29px;height:29px;display:grid;place-items:center;border:1px solid var(--type-accent);color:var(--type-accent);font:700 12px "Songti SC",serif;}.meter{height:5px;margin:10px 0;background:#ded0bb;overflow:hidden}.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--type-accent));animation:meter-grow .8s ease both;transform-origin:left}@keyframes meter-grow{from{transform:scaleX(0)}}.dimension-card p{margin:0;color:#685a4e;font-size:12px;line-height:1.75}.metric-note{margin:13px 0 0;color:var(--muted);font-size:10px;line-height:1.6}
.easter-envelope{overflow:hidden}.easter-envelope summary{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-22px -20px;padding:18px 20px;color:#5f4236;cursor:pointer;list-style:none;background:linear-gradient(135deg,#ecd8b8,#f7ead2)}.easter-envelope[open] summary{margin-bottom:18px}.easter-envelope summary::-webkit-details-marker{display:none}.easter-envelope summary span{font:700 16px "Songti SC",serif}.easter-envelope summary b{padding:5px 8px;color:#fff5e7;background:var(--cinnabar);font-size:10px}.easter-envelope>div{text-align:center}.easter-envelope i{width:46px;height:46px;display:grid;place-items:center;margin:0 auto 9px;border:2px solid var(--cinnabar);color:var(--cinnabar);font:700 23px "Kaiti SC",serif;font-style:normal;transform:rotate(-7deg)}.easter-envelope h2{margin:0 0 8px;color:var(--cinnabar-dark);font:700 21px "Songti SC",serif}.easter-envelope p{margin:0;color:#655549;font-size:13px;line-height:1.85;text-align:left}
.advice-card ol{display:grid;gap:15px;margin:0;padding:0;list-style:none;counter-reset:steps}.advice-card li{display:grid;grid-template-columns:29px 1fr;gap:10px;align-items:start;counter-increment:steps}.advice-card li span{width:27px;height:27px;display:grid;place-items:center;border:1px solid var(--type-accent);color:var(--type-accent);transform:rotate(-3deg)}.advice-card li span::after{content:counter(steps);font:700 12px "Songti SC",serif}.advice-card li p{margin:0;color:#57493e;font-size:13px;line-height:1.85}
.result-actions{display:grid;gap:9px;padding:5px 4px}.result-actions .primary-button{background:linear-gradient(135deg,color-mix(in srgb,var(--type-accent) 88%,#c98066),var(--type-accent));border-color:var(--type-accent)}.result-actions .outline-button{color:#dec8a7;background:rgba(0,0,0,.14);border-color:rgba(211,187,145,.42)}.result-actions .text-button{margin:auto;color:#a6957d}.result-disclaimer{margin:0 12px;text-align:center;color:#897d6b}.reveal{opacity:0;transform:translateY(12px);transition:opacity .42s ease,transform .42s ease}.reveal.visible{opacity:1;transform:none}
.toast{position:fixed;z-index:90;left:50%;bottom:max(20px,env(safe-area-inset-bottom));max-width:calc(100% - 36px);padding:11px 16px;border:1px solid rgba(211,187,145,.3);border-radius:3px;color:#fff3df;background:#3a3028;box-shadow:0 14px 44px rgba(0,0,0,.4);opacity:0;transform:translate(-50%,14px);pointer-events:none;transition:.2s;font-size:12px;text-align:center}.toast.visible{opacity:1;transform:translate(-50%,0)}.toast.error{background:#6d2c28}

@media (max-width:390px){.scene{padding-inline:10px}.gate-card{padding-inline:18px}.question-card{padding-inline:14px}.option-button{grid-template-columns:16px 25px 1fr;gap:7px;padding-inline:10px}.option-button b{font-size:13px}.result-section,.easter-envelope{padding-inline:16px}.easter-envelope summary{margin-inline:-16px;padding-inline:16px}.gate-card h1{font-size:34px}}
@supports not (color:color-mix(in srgb,red 50%,white)){.result-hero{background:linear-gradient(180deg,#3b3029,#211d19)}.result-actions .primary-button{background:var(--type-accent)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}