:root{
 --bg:#e9e7df;--paper:#f8f7f0;--card:#fffefa;--ink:#262d2a;
 --muted:#77817b;--line:#d6dbd1;--pine:#44665a;--pine-dark:#314d44;
 --mist:#e7eee9;--lilac:#b8a9c6;--rose:#d6bfa9;--gold:#ad9266;
 --rare:#6b598b;--serif:"Noto Serif CJK SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;
 --sans:-apple-system,BlinkMacSystemFont,"Noto Sans CJK SC","Microsoft Yahei","PingFang SC",sans-serif;
}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;color:var(--ink);background:var(--bg);font-family:var(--serif);-webkit-font-smoothing:antialiased}
button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #738b7c;outline-offset:3px}
button:disabled{cursor:wait;opacity:.7}
#app{max-width:600px;min-height:100svh;margin:0 auto;background:var(--paper);box-shadow:0 4px 50px #2c463a20;overflow:hidden}
.frame{min-height:100svh;position:relative;padding:22px 29px 35px;animation:fade .42s ease both}
.frame:before{content:"";position:absolute;top:12px;bottom:12px;left:12px;width:1px;background:#dce0d5;pointer-events:none}
.frame:after{content:"";position:absolute;left:12px;right:12px;top:12px;height:1px;background:#dce0d5;pointer-events:none}
@keyframes fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.edition,.footline,.eyebrow,.subtitle-en,.mini-note,.gate-label,.label-index,.caption,.progress-label,.q-meta,.overline,.result-subtitle,.result-meta,.figure-label,.type-index,.secret-label,.chapter-index,.button-sub,.quote-en{
 font-family:var(--sans);letter-spacing:.13em;
}
.edition{display:flex;justify-content:space-between;gap:8px;align-items:center;color:#7c8980;text-transform:uppercase;font-size:8.5px;font-weight:600}
.footline{display:flex;justify-content:space-between;gap:10px;color:#879088;font-size:8px;border-top:1px solid var(--line);padding-top:16px;margin-top:30px}
.landing{display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(155deg,#f8f7f0 0%,#f8f7f0 65%,#f0f0e8 100%)}
.gate-content{padding:35px 0 8px;text-align:center}
.seal{width:132px;height:132px;margin:0 auto 40px;position:relative;border:1px solid #cbd4cb;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,#ffffffaa,transparent 70%)}
.seal:before{content:"";position:absolute;inset:9px;border:1px solid #d6ddd5;border-radius:50%}
.seal-lines{position:absolute;left:13px;right:13px;height:40px;top:48px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 8px,#aab9b0 8px,#aab9b0 9px);opacity:.7}
.seal-mark{z-index:1;font-family:Georgia,serif;font-size:77px;font-style:italic;font-weight:400;line-height:1;color:var(--pine);transform:translate(1px,-4px)}
.seal-point{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--gold);left:23px;bottom:24px}
.eyebrow{display:flex;justify-content:center;align-items:center;gap:13px;font-size:10px;color:var(--pine);font-weight:600;letter-spacing:.26em}
.rule{display:block;width:26px;height:1px;background:#bfcac0}
h1{margin:20px 0 10px;font-size:clamp(32px,8.5vw,46px);line-height:1.48;letter-spacing:.04em;font-weight:550}
.accent-under{position:relative;white-space:nowrap;color:var(--pine-dark)}
.accent-under:after{content:"";position:absolute;left:1px;right:1px;bottom:-5px;height:5px;background:#c8d9cc88;transform:skewX(-26deg);z-index:-1}
.subtitle-en{margin:11px 0 0;color:#849087;font-size:9px;letter-spacing:.23em;line-height:1.8}
.intro{font-size:14px;line-height:2.1;letter-spacing:.05em;color:#626d66;margin:34px 0 32px}
.gate-box{max-width:370px;margin:0 auto;background:#fffefa;border:1px solid #d4dad1;text-align:left;padding:17px 20px 13px;box-shadow:0 13px 25px #55695e0a}
.gate-label{display:flex;justify-content:space-between;color:var(--pine);font-size:9px;font-weight:600;letter-spacing:.14em}
.label-index{color:#a0aaa2}
#access-input{border:0;border-bottom:1px solid #c7d1c9;border-radius:0;outline:0;background:transparent;padding:19px 1px 13px;color:var(--ink);width:100%;font-family:var(--sans);font-size:17px;letter-spacing:.1em;text-align:center}
#access-input::placeholder{font-size:13px;color:#a7aca6;letter-spacing:.14em}
#access-input:focus{border-bottom:1px solid var(--pine)}
.enter-indicator{font-family:var(--sans);font-size:10px;color:#7b8c81;text-align:center;margin-top:13px;letter-spacing:.12em;min-height:16px}
.enter-indicator span{font-size:12px}
.gate-error{font-family:var(--sans);color:#aa635a;text-align:center;font-size:11px;line-height:1.7;margin:6px 0 0;min-height:0}
.gate-error:empty{display:none}
.mini-note{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:9px;color:#869189;font-size:9px;margin-top:30px;letter-spacing:.04em}
.mini-note i{width:2px;height:2px;background:#a5b1a8;border-radius:50%;display:block}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.loading{padding:45vh 20px 0;text-align:center;color:var(--pine);letter-spacing:.22em}
/* Questions */
.quiz-frame{display:flex;flex-direction:column;background:radial-gradient(ellipse at 100% 13%,#e8eee73a,transparent 47%),var(--paper)}
.quiz-brand{font-family:var(--sans);font-size:10px;letter-spacing:.19em;color:var(--pine);font-weight:650;display:flex;justify-content:space-between;align-items:center}
.quiz-brand .brand-en{font-size:8px;letter-spacing:.11em;font-weight:500;color:#8e9990}
.progress-head{display:flex;align-items:center;justify-content:space-between;margin-top:47px}
.progress-label{font-size:10px;color:var(--muted)}
.progress-number{font-family:Georgia,serif;color:var(--pine);font-size:30px;font-weight:400}
.progress-number small{color:#adb6ac;font-size:16px}
.progress-track{width:100%;height:2px;background:#dce2d9;margin:17px 0 43px}
.progress-fill{height:100%;background:var(--pine);transition:width .4s ease}
.q-meta{font-size:10px;color:#7c9386;display:flex;align-items:center;gap:9px}
.q-meta:before{content:"";height:5px;width:5px;background:var(--gold);border-radius:50%}
.question-title{font-size:clamp(22px,5.6vw,29px);line-height:1.6;font-weight:560;margin:18px 0 34px;letter-spacing:.025em;min-height:80px}
.option-list{display:grid;gap:12px}
.option{display:flex;align-items:center;text-align:left;gap:16px;min-height:73px;padding:17px 18px;border-radius:2px;border:1px solid #dce1d8;background:var(--card);color:#3c453e;transition:border-color .2s,background .2s,transform .2s,box-shadow .2s;letter-spacing:.02em;width:100%;font-size:14px;line-height:1.7}
.option:hover:not(:disabled){border-color:#91ab97;background:#f4f8f2;transform:translateY(-1px)}
.option-letter{font-family:Georgia,serif;font-size:19px;color:#8fa296;width:22px;flex:none;font-style:italic}
.option.selected{background:#e7eee8;border-color:#597a64;box-shadow:inset 3px 0 #476c57}
.option.selected .option-letter{color:var(--pine-dark)}
.quiz-bottom{margin-top:auto;padding-top:30px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.back-button,.text-button{background:none;border:0;color:var(--pine);font-family:var(--sans);font-size:12px;letter-spacing:.07em;padding:10px 0}
.back-button:disabled{opacity:.25;cursor:default}
.quiz-hint{font-family:var(--sans);color:#a0aaa0;font-size:10px;letter-spacing:.06em;text-align:right}
/* Transition */
.transition-page{position:relative;min-height:100svh;display:flex;justify-content:center;align-items:center;overflow:hidden;background:#243c33;color:#f3f0e4;text-align:center}
.transition-page:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,#779a8163 0%,transparent 50%),repeating-linear-gradient(to bottom,transparent 0,transparent 58px,#cddfd30e 59px,#cddfd30e 60px)}
.orbit{position:absolute;width:270px;height:270px;border:1px solid #d4e3d353;border-radius:50%;animation:revolve 9s linear infinite}
.orbit:before{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:#d4c8a3;left:16px;top:39px;box-shadow:0 0 20px #d6c7a69c}
.orbit.outer{width:340px;height:340px;border-color:#d4e3d323;animation-direction:reverse;animation-duration:15s}
.orbit.outer:before{width:6px;height:6px;background:#ddd2b1;top:240px;left:6px}
@keyframes revolve{to{transform:rotate(360deg)}}
.staff{position:absolute;width:100%;height:160px;transform:rotate(-17deg);opacity:.16;background:repeating-linear-gradient(to bottom,transparent 0,transparent 18px,#d8e9dd 19px,#d8e9dd 20px);animation:staffShift 4s ease-in-out infinite alternate}
@keyframes staffShift{to{transform:rotate(-11deg) translateY(8px)}}
.transition-inner{position:relative;padding:20px;z-index:1}
.transition-symbol{font-family:Georgia,serif;font-size:58px;font-style:italic;color:#e1d8ba;animation:float 2s ease-in-out infinite alternate}
@keyframes float{to{transform:translateY(-8px)}}
.transition-small{font-family:var(--sans);font-size:10px;letter-spacing:.35em;color:#d5dbd0;margin-top:34px}
.transition-title{font-size:24px;font-weight:500;line-height:1.8;letter-spacing:.13em;margin-top:13px}
/* Results */
.result-frame{padding-bottom:42px;background:var(--paper)}
.result-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.overline{color:var(--pine);font-size:9px;font-weight:650}
.result-index{font-family:Georgia,serif;color:#9ea9a1;font-size:11px;letter-spacing:.1em}
.result-portrait{margin-top:33px;padding:29px 23px 32px;background:#e8eee8;position:relative;overflow:hidden;text-align:center;min-height:306px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;border:1px solid #dce5da}
.result-portrait.rare{background:#edeaf1;border-color:#dad2e1}
.result-portrait:before{content:"";width:288px;height:288px;border-radius:50%;border:1px solid #9cb3a04d;position:absolute;top:-102px;right:-112px}
.result-portrait:after{content:"";width:200px;height:200px;border-radius:50%;border:1px solid #9cb3a05c;position:absolute;bottom:-124px;left:-72px}
.result-portrait.rare:before,.result-portrait.rare:after{border-color:#8e7da94b}
.figure-label{align-self:stretch;text-align:left;color:#687c70;font-size:9px;z-index:1}
.result-portrait.rare .figure-label{color:var(--rare)}
.symbol-frame{width:124px;height:124px;margin:10px auto;border:1px solid #9ab6a3;display:grid;place-items:center;position:relative;transform:rotate(45deg)}
.symbol-frame:before{content:"";position:absolute;inset:10px;border:1px solid #aac2ae}
.symbol-inner{font-family:Georgia,serif;transform:rotate(-45deg);font-size:81px;line-height:1;color:var(--pine);font-style:italic;user-select:none}
.rare .symbol-frame,.rare .symbol-frame:before{border-color:#a897b7}
.rare .symbol-inner{color:#77618c}
.figure-bottom{font-family:var(--sans);font-size:9px;letter-spacing:.22em;color:#66806f;z-index:1}
.rare .figure-bottom{color:#8e79a1}
.result-subtitle{font-size:10px;color:#7b887e;margin:32px 0 8px;letter-spacing:.18em}
.result-name{font-size:clamp(38px,10vw,51px);font-weight:550;letter-spacing:.07em;line-height:1.3;margin:0 0 7px;color:var(--pine-dark)}
.result-name.rare{color:var(--rare)}
.roman-name{font-family:Georgia,serif;color:#9ba69c;font-size:14px;letter-spacing:.045em;margin:0 0 18px}
.secret-label{display:inline-block;background:#665b82;color:#f8f6fd;font-size:9px;letter-spacing:.17em;padding:7px 11px;margin-bottom:16px}
.result-theme{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:17px 0;line-height:1.8;font-size:17px;color:#40594a;letter-spacing:.035em}
.rare-text{color:var(--rare)}
.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 31px}
.tag{font-family:var(--sans);background:#eaf0e8;color:#536d5b;font-size:11px;padding:9px 12px;letter-spacing:.02em}
.rare .tag,.tag.rare{background:#eee9f3;color:#76658d}
.chapter{padding:23px 0 24px;border-top:1px solid #d8ded5}
.chapter-heading{display:flex;align-items:center;gap:12px;margin-bottom:15px}
.chapter-index{font-family:Georgia,serif;font-style:italic;font-size:22px;color:#91a499}
.chapter-title{font-size:17px;margin:0;font-weight:600;letter-spacing:.03em}
.chapter p{font-size:14px;line-height:2.12;letter-spacing:.025em;color:#4c5650;margin:0}
.quote-card{background:#eaf0e9;padding:24px 22px;margin:10px 0 25px;border-left:2px solid var(--pine);font-size:15px;line-height:1.9;color:var(--pine-dark)}
.quote-card.rare{background:#efebf3;border-color:#87709c;color:var(--rare)}
.quote-en{font-size:8px;color:#879a8b;margin-bottom:12px}
.action-stack{display:grid;gap:11px;margin:28px 0}
.primary-button,.secondary-button{display:flex;align-items:center;justify-content:center;gap:14px;border:1px solid var(--pine);width:100%;padding:18px 20px;min-height:57px;font-family:var(--sans);font-size:13px;letter-spacing:.08em}
.primary-button{color:#fdfdfa;background:var(--pine)}
.primary-button:hover{background:#315144}
.secondary-button{color:var(--pine);background:transparent}
.secondary-button:hover{background:#eff4ed}
.result-note{font-family:var(--sans);font-size:10px;line-height:1.9;color:#97a098;text-align:center;margin-top:24px}
.save-message{font-family:var(--sans);font-size:11px;color:var(--pine);min-height:22px;text-align:center}
button:active:not(:disabled){transform:translateY(1px)}
@media(min-width:600px){.frame{padding-left:44px;padding-right:44px}.gate-content{padding:50px 0 12px}.quiz-frame{padding-left:48px;padding-right:48px}.option{min-height:77px}.result-frame{padding-left:45px;padding-right:45px}}
@media(max-width:380px){.frame{padding-left:23px;padding-right:23px}.edition{font-size:7.5px}.seal{width:110px;height:110px;margin-bottom:31px}.seal-mark{font-size:68px}.seal-lines{top:36px}.intro{margin:22px 0 24px}.gate-content{padding:16px 0 6px}.option{padding:14px 13px;gap:12px}.progress-head{margin-top:33px}.progress-track{margin-bottom:27px}.question-title{margin-bottom:22px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001s!important;transition-duration:.001s!important;scroll-behavior:auto!important}}