:root { --ink:#f0ede4; --muted:rgba(240,237,228,.62); --line:rgba(240,237,228,.18); --gold:#bda36b; --night:#07100d; }
*{box-sizing:border-box} [hidden]{display:none!important} html,body{margin:0;min-height:100%;background:var(--night);color:var(--ink)}
body{font-family:"Songti SC","Noto Serif CJK SC","STSong",serif} button{font:inherit}
.app-shell{position:relative;width:100%;min-height:100vh;min-height:100dvh;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 18% 18%,rgba(84,105,76,.22),transparent 34%),radial-gradient(circle at 82% 78%,rgba(147,121,68,.13),transparent 29%),#07100d}
.mineral-field{position:absolute;inset:-20%;z-index:-2;opacity:.62;background:linear-gradient(120deg,transparent 20%,rgba(181,156,99,.09) 21%,transparent 22%),repeating-radial-gradient(ellipse at 20% 30%,transparent 0 36px,rgba(177,194,162,.025) 37px 38px);animation:drift 22s ease-in-out infinite alternate}
.brand-bar{position:absolute;z-index:10;top:0;left:0;right:0;height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 24px}.brand-cn{display:block;font-size:15px;letter-spacing:.28em}.brand-en{display:block;margin-top:3px;font-family:Georgia,serif;font-size:9px;letter-spacing:.38em;color:var(--muted)}
.sound-button,.question-meta button{border:1px solid var(--line);background:rgba(4,10,8,.28);color:var(--ink);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;backdrop-filter:blur(12px)}.question-meta button:disabled{opacity:.2}
.gate-panel,.intro-panel,.transition-panel{min-height:100vh;min-height:100dvh;padding:120px 28px 48px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.overline{margin:0 0 18px;font-family:Georgia,serif;font-size:10px;letter-spacing:.26em;color:var(--gold);text-transform:uppercase}
.gate-panel h1{margin:0;max-width:330px;font-weight:400;font-size:clamp(33px,9vw,48px);line-height:1.45;letter-spacing:.05em}.gate-note{max-width:280px;margin:28px 0 42px;color:var(--muted);font-size:15px;line-height:1.9}.primary-button{min-height:54px;padding:0 24px;border-radius:999px;border:1px solid rgba(205,183,128,.56);background:rgba(189,163,107,.12);color:var(--ink);display:flex;align-items:center;gap:12px}.sound-note{margin:14px 0 0 5px;color:rgba(240,237,228,.36);font-size:12px}
.intro-panel{align-items:center;text-align:center;cursor:pointer}.intro-line{max-width:330px;margin:0;font-size:22px;line-height:1.9;letter-spacing:.08em;animation:lineReveal 1.1s ease both}.skip{position:absolute;bottom:38px;color:rgba(240,237,228,.36);font-size:12px;letter-spacing:.15em}
.question-panel{min-height:100vh;min-height:100dvh;padding:96px 22px 40px;overflow-y:auto}.question-meta{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-family:Georgia,serif;font-size:12px;letter-spacing:.18em}.progress-track{height:1px;margin:22px 0 42px;background:var(--line)}.progress-track span{display:block;height:100%;background:var(--gold);transition:width .5s ease}.question-panel h2{max-width:420px;margin:0 0 30px;font-size:clamp(24px,6.5vw,31px);font-weight:400;line-height:1.55;letter-spacing:.035em}.options-list{display:grid;gap:12px;padding-bottom:26px}.option{width:100%;min-height:64px;display:grid;grid-template-columns:28px 1fr;align-items:center;gap:10px;padding:14px 16px;border:1px solid var(--line);border-radius:3px;color:var(--ink);background:rgba(15,28,23,.46);text-align:left;backdrop-filter:blur(10px);transition:.25s ease}.option span{font-family:Georgia,serif;font-size:12px;color:var(--gold)}.option strong{font-size:15px;font-weight:400;line-height:1.7}.option.selected{border-color:rgba(205,183,128,.75);background:rgba(189,163,107,.15);transform:translateX(3px)}
.transition-panel{align-items:center;text-align:center}.transition-panel p{margin:0 0 16px;color:var(--muted);font-size:15px;letter-spacing:.16em}.transition-panel h2{margin:0;font-size:28px;font-weight:400;letter-spacing:.1em;line-height:1.7}.loading-mark{width:1px;height:64px;margin-top:42px;background:linear-gradient(transparent,var(--gold),transparent);animation:breathe 1.8s ease infinite}
.result-panel{position:relative;min-height:100vh;min-height:100dvh;padding:118px 24px 34px;display:flex;flex-direction:column;justify-content:flex-end;background:url('/sj001-bg.jpg') center/cover no-repeat}.result-shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(3,8,7,.02),rgba(3,8,7,.05) 42%,rgba(3,8,7,.38) 68%,rgba(3,8,7,.78) 100%)}.result-copy,.result-nav,.art-credit{position:relative;z-index:1}.art-credit{position:absolute;top:84px;right:22px;color:rgba(255,255,255,.72);font-size:10px;letter-spacing:.08em;text-shadow:0 1px 6px #000}.result-copy{min-height:255px;animation:lineReveal .7s ease both;text-shadow:0 1px 8px rgba(0,0,0,.88),0 0 2px rgba(0,0,0,.72)}.result-copy h2{margin:0 0 18px;font-size:clamp(31px,8vw,46px);font-weight:400;letter-spacing:.1em}.result-body{max-width:440px;margin:0;font-size:15px;line-height:1.95;letter-spacing:.025em;color:rgba(250,248,241,.96)}.result-materials{margin:19px 0 0;font-family:"Songti SC","Noto Serif CJK SC","STSong",serif;font-size:11px;line-height:1.7;letter-spacing:.19em;color:rgba(235,217,174,.94);text-shadow:0 1px 8px rgba(0,0,0,.8)}.result-nav{margin-top:22px;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:10px;text-shadow:0 1px 7px rgba(0,0,0,.9)}.result-nav button{min-height:43px;padding:0;border:0;border-bottom:1px solid rgba(216,193,137,.72);background:transparent;color:var(--ink);display:flex;gap:6px;align-items:center;white-space:nowrap}.result-nav button:last-child{justify-self:end}.result-nav button:disabled{max-width:116px;white-space:normal;text-align:right;line-height:1.5;color:var(--muted);border-color:var(--line)}.result-back{justify-self:start}.dots{display:flex;gap:6px;padding-bottom:20px}.dots span{width:13px;height:1px;background:rgba(240,237,228,.36)}.dots span.active{background:var(--gold)}
.fade-in{animation:fadeIn .8s ease both}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes lineReveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes breathe{0%,100%{opacity:.25;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}}@keyframes drift{from{transform:translate3d(-1%,-1%,0) rotate(-1deg)}to{transform:translate3d(1%,1%,0) rotate(1deg)}}
@media(min-width:640px){.app-shell{width:min(100%,520px);margin:0 auto;box-shadow:0 0 90px rgba(0,0,0,.58)}body{background:#020504}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}