:root { --night:#07100f; --ice:#edf4ed; --mist:#afc2ba; --mint:#66c5b4; --ember:#e6592b; --line:rgba(237,244,237,.16); --panel:rgba(13,30,28,.80); --ease:cubic-bezier(.16,1,.3,1); }
* { box-sizing:border-box; } html { min-height:100%; background:var(--night); } body { min-width:320px; min-height:100vh; margin:0; color:var(--ice); background:radial-gradient(circle at 80% 0%,rgba(230,89,43,.20),transparent 24%),radial-gradient(circle at 5% 94%,rgba(31,139,130,.26),transparent 30%),var(--night); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; } button,textarea { font:inherit; } button { cursor:pointer; }
.realm-shell { position:relative; display:grid; place-items:center; min-height:100vh; padding:32px 20px; overflow:hidden; isolation:isolate; }.topography { position:fixed; z-index:-2; inset:0; opacity:.32; background:repeating-radial-gradient(ellipse at 70% 30%,transparent 0 28px,rgba(195,229,211,.12) 29px 30px,transparent 31px 57px); transform:rotate(-13deg) scale(1.55); }.altitude { position:fixed; z-index:-1; border-radius:50%; filter:blur(70px); pointer-events:none; }.altitude-one { width:43vw; aspect-ratio:1; left:-18%; bottom:-20%; background:rgba(30,166,149,.24); }.altitude-two { width:35vw; aspect-ratio:1; right:-14%; top:-17%; background:rgba(230,89,43,.22); }
.stage { display:none; grid-area:1/1; width:min(100%,700px); padding:clamp(30px,7vw,58px); border:1px solid var(--line); border-radius:30px; background:linear-gradient(145deg,rgba(20,42,38,.90),var(--panel)); box-shadow:0 32px 100px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter:blur(25px); -webkit-backdrop-filter:blur(25px); }.stage.is-active,.stage.is-leaving { display:block; }.stage.is-active { animation:stage-in .62s var(--ease) both; }.stage.is-leaving { z-index:1; pointer-events:none; animation:stage-out .4s var(--ease) both; } @keyframes stage-in { from { opacity:0; transform:translateY(18px) scale(.985); filter:blur(8px); } to { opacity:1; transform:none; filter:none; } } @keyframes stage-out { to { opacity:0; transform:translateY(-11px) scale(.99); filter:blur(4px); } }
.eyebrow,.question-kicker,.route-mark { margin:0 0 16px; color:var(--mint); font-size:10px; font-weight:700; letter-spacing:.17em; }.route-mark { color:var(--mist); } h1,h2 { margin:0; font-family:"Songti SC","STSong","Noto Serif CJK SC",serif; font-weight:300; letter-spacing:-.05em; } h1 { font-size:clamp(56px,12vw,88px); line-height:1; } h2 { font-size:clamp(31px,6vw,48px); line-height:1.25; text-wrap:balance; } #gate-stage { text-align:center; }.site-subtitle { margin:18px 0 0; color:var(--mint); font-size:14px; letter-spacing:.08em; }.intro-copy { max-width:510px; margin:30px auto 23px; color:#d3ddd6; font-size:15px; line-height:1.9; }.disclaimer { max-width:440px; margin:12px auto 0; color:var(--mist); font-size:11px; line-height:1.65; }
.scope-notice { max-width:530px; margin:0 auto 17px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--mist); text-align:left; }.scope-notice summary,.prompt-notice summary { padding:14px 0; color:var(--mint); cursor:pointer; font-size:12px; list-style:none; }.scope-notice summary::-webkit-details-marker,.prompt-notice summary::-webkit-details-marker { display:none; }.scope-notice summary::after,.prompt-notice summary::after { float:right; content:'+'; color:var(--ember); font-size:16px; }.scope-notice[open] summary::after,.prompt-notice[open] summary::after { content:'−'; }.scope-copy { padding-bottom:4px; font-size:11px; line-height:1.8; }.scope-copy p { margin:0 0 13px; }.scope-copy strong { color:var(--ice); font-weight:650; }.consent-control { display:flex; align-items:flex-start; justify-content:center; gap:8px; margin:0 auto 18px; color:var(--mist); font-size:11px; line-height:1.55; text-align:left; }.consent-control input { width:15px; height:15px; margin:1px 0 0; accent-color:var(--ember); }
.primary-button,.secondary-button { min-width:148px; padding:14px 25px; border-radius:999px; font-size:13px; letter-spacing:.08em; transition:transform .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease); }.primary-button { border:1px solid var(--ember); color:#fff; background:var(--ember); box-shadow:0 12px 28px rgba(230,89,43,.22); }.primary-button:hover { transform:translateY(-2px); background:#f06b42; }.primary-button:disabled { cursor:not-allowed; opacity:.4; transform:none; }.primary-button.compact { min-width:126px; padding:11px 18px; }.secondary-button { border:1px solid rgba(102,197,180,.48); color:var(--ice); background:rgba(102,197,180,.08); }.secondary-button:hover { border-color:var(--mint); background:rgba(102,197,180,.18); }.poster-button { border-color:rgba(102,197,180,.45); color:var(--ice); background:rgba(102,197,180,.11); box-shadow:none; }.poster-button:hover { background:rgba(102,197,180,.23); }
.quiz-meta,.result-topline,.question-actions { display:flex; align-items:center; justify-content:space-between; gap:20px; }.quiz-meta { color:var(--mist); font-size:12px; letter-spacing:.06em; } #question-echo { color:var(--mint); text-align:right; }.progress-track { height:2px; margin:20px 0 44px; overflow:hidden; background:rgba(237,244,237,.12); }.progress-track span { display:block; height:100%; background:linear-gradient(90deg,var(--mint),var(--ember)); transition:width .6s var(--ease); }.question-kicker { color:var(--ember); }.question-prompt { margin:17px 0 0; color:var(--mist); font-size:13px; line-height:1.7; }.options { display:grid; gap:10px; margin-top:26px; }.option,.anchor { width:100%; padding:15px 17px; border:1px solid var(--line); border-radius:17px; color:var(--ice); background:rgba(255,255,255,.035); text-align:left; transition:.2s var(--ease); }.option:hover,.option.is-selected,.anchor:hover,.anchor.is-selected { border-color:rgba(102,197,180,.68); color:#fff; background:rgba(102,197,180,.12); transform:translateY(-1px); }.answer-label { display:block; margin:27px 0 8px; color:var(--mist); font-size:12px; } textarea { width:100%; min-height:94px; padding:13px 0; border:0; border-bottom:1px solid var(--line); outline:0; resize:vertical; color:var(--ice); background:transparent; font-size:16px; line-height:1.7; } textarea::placeholder { color:#75877f; } textarea:focus { border-color:var(--ember); }.question-actions { margin-top:18px; color:var(--mist); font-size:11px; }.text-button,.restart-button { padding:5px 0; border:0; color:var(--ember); background:transparent; font-size:13px; }.text-button span { display:inline-block; margin-left:5px; transition:transform .2s var(--ease); }.text-button:hover span { transform:translateX(4px); }
.choice-copy,.selection-summary { margin:22px 0 25px; color:#cbd7d0; font-size:15px; line-height:1.8; }.anchors { display:grid; gap:10px; }.anchor small { display:block; margin-bottom:7px; color:var(--mint); font-size:10px; letter-spacing:.12em; }.choice-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }.result-topline { margin-bottom:24px; }.result-topline .eyebrow { margin:0; }.result-label { margin:0 0 8px; color:var(--mist); font-size:11px; letter-spacing:.11em; }.archetype { margin:15px 0 0; color:var(--mint); font-size:14px; letter-spacing:.06em; }.verse { margin:32px 0 27px; padding:15px 0 15px 18px; border-left:2px solid var(--ember); color:#e3ebe4; font-family:"Songti SC",serif; font-size:18px; line-height:1.86; white-space:pre-line; }.analysis-content { color:#d5ded8; font-size:15px; line-height:1.88; }.analysis-content h3 { margin:27px 0 8px; color:var(--ice); font-family:"Songti SC",serif; font-size:20px; font-weight:400; }.analysis-content p { margin:0; }.analysis-content .remedy { padding:15px 17px; border-radius:15px; color:#d9f2e8; background:rgba(102,197,180,.10); }.ai-note { margin:29px 0 0; color:var(--mist); font-size:11px; line-height:1.7; }.prompt-notice { margin-top:15px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--mist); }.prompt-notice p { margin:0 0 10px; font-size:11px; line-height:1.65; }.prompt-notice pre { margin:0 0 16px; padding:13px; overflow-x:auto; border-radius:13px; color:#d7e3dc; background:rgba(255,255,255,.045); font:10px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; }.result-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:23px; }.result-engagement { margin-top:39px; padding-top:25px; border-top:1px solid var(--line); }.engagement-block { padding:2px 0 24px; }.engagement-block + .engagement-block { padding-top:23px; border-top:1px solid var(--line); }.engagement-kicker { margin:0 0 8px; color:var(--mint); font-size:10px; font-weight:700; letter-spacing:.14em; }.engagement-block h3 { margin:0 0 9px; font-family:"Songti SC",serif; font-size:20px; font-weight:400; }.engagement-block p { max-width:510px; margin:0 0 10px; color:var(--mist); font-size:13px; line-height:1.75; }.engagement-link { color:var(--ice); font-size:13px; text-decoration:none; text-underline-offset:4px; }.engagement-link:hover { color:var(--mint); text-decoration:underline; }.product-links { display:grid; gap:10px; }
.care-dialog,.poster-modal { color:var(--ice); background:#10211f; border:1px solid rgba(237,244,237,.18); box-shadow:0 28px 70px rgba(0,0,0,.52); }.care-dialog { width:min(440px,calc(100% - 34px)); padding:29px; border-radius:24px; }.care-dialog::backdrop,.poster-modal::backdrop { background:rgba(0,0,0,.66); backdrop-filter:blur(8px); }.care-dialog p:not(.eyebrow) { margin:0 0 21px; line-height:1.75; }.poster-modal { width:min(470px,calc(100% - 28px)); max-height:min(92vh,850px); padding:20px; overflow:auto; border-radius:26px; }.poster-modal-head { display:flex; align-items:start; justify-content:space-between; gap:16px; margin-bottom:15px; }.poster-modal-head .eyebrow { margin-bottom:6px; }.poster-modal-head h2 { font-size:25px; } #share-poster-canvas { display:block; width:100%; height:auto; border-radius:15px; background:var(--night); box-shadow:0 15px 35px rgba(0,0,0,.34); }.poster-hint { margin:13px 0; color:var(--mist); font-size:11px; line-height:1.55; }
@media (max-width:540px) { .realm-shell { align-items:start; padding:16px 12px; }.stage { margin-top:2vh; padding:31px 23px; border-radius:24px; }.progress-track { margin-bottom:34px; }.choice-actions .primary-button,.choice-actions .secondary-button { width:100%; } } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:1ms !important; transition-duration:1ms !important; } }