:root { color-scheme: light; --ink:#252448; --muted:#73738d; --lavender:#f6f5ff; --line:#e5e4f2; --indigo:#625ce4; --purple:#8674ed; --card:#fff; --radius:24px; }
* { box-sizing:border-box; }
body { min-width:320px; min-height:100vh; margin:0; color:var(--ink); background:radial-gradient(circle at 14% 4%,#e9e5ff 0,transparent 26rem),linear-gradient(160deg,#fbfaff,#f3f2ff); font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif; }
button,input,select { font:inherit; } button { border:0; cursor:pointer; } button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #bdb8ff; outline-offset:2px; }
.app-shell { width:min(100%,430px); min-height:100vh; margin:auto; padding:20px; display:grid; align-items:center; }
.screen { width:100%; padding:29px 23px 24px; background:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.9); border-radius:var(--radius); box-shadow:0 18px 50px rgba(72,63,151,.12); animation:rise .32s ease-out; }
.is-hidden { display:none; }.eyebrow { margin:0 0 11px; color:#7971de; font-size:11px; font-weight:800; letter-spacing:.13em; }.lead { margin:10px 0 0; color:var(--muted); font-size:14px; line-height:1.75; }
h1,h2 { margin:0; letter-spacing:-.045em; line-height:1.2; } h1 { font-size:31px; } h2 { font-size:25px; }.brand-mark { display:grid; place-items:center; width:50px; height:50px; margin-bottom:22px; color:#fff; font-size:14px; font-weight:800; letter-spacing:.1em; background:linear-gradient(145deg,#8e7af2,#5854d9); border-radius:18px 18px 18px 5px; box-shadow:0 9px 20px #8f84e066; }
.stack { display:grid; gap:9px; margin-top:27px; }.stack label,.date-selects label { color:#555570; font-size:13px; font-weight:700; } input,select { width:100%; min-height:48px; padding:0 13px; color:var(--ink); background:#fbfbff; border:1px solid var(--line); border-radius:13px; } .form-error { min-height:18px; margin:0; color:#d15270; font-size:12px; }
.primary-button { min-height:51px; padding:0 19px; color:white; font-size:14px; font-weight:800; letter-spacing:.02em; background:linear-gradient(105deg,var(--indigo),var(--purple)); border-radius:15px; box-shadow:0 9px 18px #766be53b; transition:transform .16s,box-shadow .16s; }.primary-button:hover { transform:translateY(-1px); box-shadow:0 12px 22px #766be556; }.primary-button span { margin-left:7px; font-size:18px; }.full-button { width:100%; margin-top:24px; }
.date-selects { display:grid; grid-template-columns:1.45fr 1fr 1fr; gap:8px; margin-top:25px; }.date-selects label { display:grid; gap:7px; }.date-selects select { padding:0 8px; font-size:13px; }
.element-orb,.result-icon { display:grid; place-items:center; width:68px; height:68px; margin:16px 0 20px; border-radius:23px; background:#f0eeff; }.element-orb svg,.result-icon svg { width:39px; height:39px; }.analysis-copy { margin-top:12px; }.analysis-copy p { margin:7px 0; color:var(--muted); font-size:14px; line-height:1.7; }.relation-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:17px; }.relation-grid div { padding:10px; background:#f8f7ff; border-radius:12px; color:#686482; font-size:12px; }.relation-grid strong { display:block; margin-top:3px; color:var(--ink); font-size:14px; }
.intro-illustration { height:130px; margin:18px 0 25px; border-radius:20px; background:linear-gradient(145deg,#dfe1ff,#f1edff); position:relative; overflow:hidden; }.intro-illustration::before { content:""; position:absolute; inset:auto -15px -58px; height:128px; background:#b4b6f7; border-radius:52% 48% 0 0; }.intro-illustration::after { content:"✦  ✧  ✦"; position:absolute; top:22px; left:0; width:100%; color:#7871e0; font-size:28px; text-align:center; letter-spacing:20px; }.element-row { display:flex; gap:8px; margin-top:22px; }.chip { display:grid; place-items:center; width:31px; height:27px; border-radius:9px; font-size:13px; font-weight:800; }.wood{background:#e3f3e4;color:#438553}.fire{background:#ffe5e3;color:#d4564e}.earth{background:#f8eedc;color:#a97c41}.metal{background:#eceef4;color:#69758a}.water{background:#e1effb;color:#3c79ab}
.quiz-topline { display:flex; justify-content:space-between; color:#77738d; font-size:12px; font-weight:750; }.progress-track { height:6px; margin:11px 0 23px; overflow:hidden; background:#ebeaf6; border-radius:99px; }.progress-track span { display:block; width:2%; height:100%; background:linear-gradient(90deg,#625ce4,#9d86f2); border-radius:inherit; transition:width .24s ease; }.answer-list { display:grid; gap:9px; margin-top:25px; }.answer-button { width:100%; min-height:54px; padding:12px 14px; color:#494864; text-align:left; font-size:13px; line-height:1.45; background:#fff; border:1px solid var(--line); border-radius:14px; transition:border .15s,background .15s,transform .15s; }.answer-button:hover { border-color:#aaa4ee; transform:translateX(2px); }.answer-button.is-selected { color:#4840bc; background:#f0efff; border-color:#7770e9; box-shadow:inset 0 0 0 1px #7770e9; }.answer-button::before { content:""; display:inline-block; width:8px; height:8px; margin:0 9px 1px 1px; background:#d5d3e3; border-radius:99px; }.answer-button.is-selected::before { background:#6c63de; }.quiz-footer { display:flex; justify-content:space-between; align-items:center; margin-top:18px; color:#aaa7ba; font-size:11px; }.text-button { min-height:44px; padding:5px 0; color:#6861d4; font-size:12px; font-weight:700; background:transparent; }.text-button:disabled { color:#c7c4d6; cursor:default; }
.completion { text-align:center; }.complete-icon { width:63px; height:63px; margin:9px auto 18px; border-radius:50%; background:linear-gradient(145deg,#8379ee,#5d55d9); position:relative; }.complete-icon::after { content:"✓"; color:white; font-size:31px; line-height:63px; }.loading-dots { display:flex; justify-content:center; gap:7px; margin-top:24px; }.loading-dots i { width:7px; height:7px; background:#776ee5; border-radius:50%; animation:bounce .75s infinite alternate; }.loading-dots i:nth-child(2){animation-delay:.15s}.loading-dots i:nth-child(3){animation-delay:.3s}
.result-icon { width:73px; height:73px; margin:16px 0 15px; }.result-subtitle { margin:7px 0 0; color:#756ede; font-size:13px; font-weight:800; }.balance-copy { margin:13px 0 0; padding:12px; color:#686482; font-size:12px; line-height:1.65; background:#f6f5ff; border-radius:12px; }.score-card { margin-top:22px; padding:16px; background:#f8f7ff; border-radius:16px; }.score-heading { margin-bottom:12px; color:#5d5a79; font-size:12px; font-weight:800; }.score-list { display:grid; gap:9px; padding:0; margin:0; list-style:none; }.score-list li { display:grid; grid-template-columns:31px 1fr 28px; gap:9px; align-items:center; color:#5b5972; font-size:12px; }.score-bar { height:7px; overflow:hidden; background:#e5e4ef; border-radius:99px; }.score-bar b { display:block; height:100%; border-radius:inherit; }.score-list strong { color:#55526c; font-size:11px; text-align:right; }
@keyframes rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } } @keyframes bounce { to { transform:translateY(-6px); opacity:.5; } }
@media (max-width:360px) { .app-shell{padding:13px}.screen{padding:25px 19px}h1{font-size:28px}h2{font-size:23px} }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }

/* Stitch parity layer: local exported documents remain unstyled in frames. */
.stitch-screen { position:relative; padding:0; background:transparent; border:0; border-radius:0; box-shadow:none; animation:none; }
.app-shell { width:min(100%,390px); padding:0; }
.stitch-canvas { width:100%; line-height:0; }
.stitch-frame { display:block; width:100%; border:0; background:#faf9ff; }
.stitch-overlay { display:none; }
.stitch-hit-zone { position:absolute; display:block; padding:0; margin:0; opacity:0; color:transparent; background:transparent; border:0; border-radius:0; box-shadow:none; appearance:none; -webkit-appearance:none; }
.stitch-hit-zone:focus,.stitch-hit-zone:focus-visible { outline:0; }
.screenshot-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.birth-year { top:44.3%; left:14%; width:72%; height:5.6%; }
.birth-month { top:51.7%; left:14%; width:34%; height:5.6%; }
.birth-day { top:51.7%; left:52%; width:34%; height:5.6%; }
.birth-next,.screen-bottom-action { bottom:2.6%; left:5.2%; width:89.6%; height:6.7%; }
.stitch-answer-list { position:absolute; top:32.3%; left:7.5%; width:85%; height:47%; display:grid; grid-template-rows:repeat(5,1fr); gap:1%; }
.stitch-answer-list .answer-button { position:static; width:100%; min-height:0; padding:0; opacity:0; background:transparent; border:0; border-radius:0; box-shadow:none; }
.stitch-answer-list .answer-button::before { display:none; }
.quiz-back { top:90.2%; left:7.5%; width:37%; height:5%; }
.result-restart { bottom:2.4%; left:5%; width:90%; height:3.4%; }