:root { --ink:#edf1e9; --muted:#a2aaa2; --line:rgba(225,235,221,.15); --black:#090c0b; --deep:#101613; --panel:#151d19; --panel-soft:#1a241f; --jade:#9ebda5; --jade-dark:#42624e; --gold:#d5b56d; --red:#c34236; --white:#fff; --shadow:0 30px 80px rgba(0,0,0,.38); }
.cover { --pointer-x:52%; --pointer-y:47%; }.cover-spotlight { position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(400px circle at var(--pointer-x) var(--pointer-y),rgba(213,181,109,.13),transparent 68%); transition:background .18s ease-out; mix-blend-mode:screen; }.hex-halo { position:absolute; z-index:-1; top:50%; right:13%; display:grid; gap:14px; width:250px; padding:48px 30px; opacity:.52; transform:translateY(-50%) rotate(-9deg); animation:haloFloat 9s ease-in-out infinite; }.hex-halo::before,.hex-halo::after { position:absolute; inset:0; content:""; border:1px solid rgba(213,181,109,.34); border-radius:50%; }.hex-halo::after { inset:17px; border-color:rgba(158,189,165,.3); animation:haloSpin 22s linear infinite; }.hex-halo i { position:relative; z-index:1; display:block; height:8px; border-radius:99px; background:linear-gradient(90deg,rgba(213,181,109,.12),#d5b56d 48%,rgba(213,181,109,.12)); box-shadow:0 0 12px rgba(213,181,109,.42); }.hex-halo i:nth-child(2),.hex-halo i:nth-child(5) { background:linear-gradient(90deg,rgba(213,181,109,.08) 0 38%,transparent 38% 58%,rgba(213,181,109,.78) 58% 64%,transparent 64% 100%); }.hex-halo i:nth-child(3) { opacity:.45; }.hex-halo i:nth-child(4) { opacity:.7; }
.result-method { display:flex; gap:12px; align-items:flex-start; margin:22px 0 -12px; color:var(--muted); font-size:13px; }.result-method span { flex:0 0 auto; padding:3px 8px; border:1px solid rgba(158,189,165,.38); color:var(--jade); font-size:11px; }.result-method p { margin:0; }.locked-copy { max-width:440px; color:var(--muted); }.locked-preview { position:relative; min-height:310px; overflow:hidden; }.self-way.is-locked .line-advice { opacity:.34; filter:blur(3px); user-select:none; }.locked-overlay { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:8px; text-align:center; background:linear-gradient(90deg,rgba(16,22,19,.82),rgba(16,22,19,.16),rgba(16,22,19,.82)); }.locked-overlay span { color:var(--gold); font-size:12px; letter-spacing:2px; }.locked-overlay strong { color:var(--white); font-size:18px; }.report-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }.site-footer { width:min(1280px,100%); display:flex; justify-content:space-between; gap:20px; margin:auto; padding:26px clamp(20px,5vw,70px); border-top:1px solid var(--line); color:var(--muted); font-size:12px; }.site-footer nav { display:flex; flex-wrap:wrap; gap:16px; }.site-footer a:hover,.back-link:hover { color:var(--gold); }
.legal-page { min-height:100svh; background:radial-gradient(ellipse at 100% 0%,#1b3026 0%,transparent 44%),var(--deep); }.back-link { color:var(--muted); font-size:13px; }.legal-main,.report-sample { width:min(860px,100%); margin:auto; padding:clamp(65px,10vw,120px) clamp(20px,5vw,52px); }.legal-main h1,.report-sample h1 { max-width:720px; margin-bottom:22px; color:var(--white); font-size:clamp(38px,6vw,72px); line-height:1.12; }.legal-main h2 { margin:44px 0 8px; color:var(--white); font-size:22px; }.legal-main p { max-width:700px; color:var(--muted); }.legal-updated { margin-top:50px; font-size:12px; }.page-lead { max-width:620px; color:var(--muted); }.sample-summary { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:38px 0 20px; padding:15px; border:1px solid var(--line); color:var(--jade); font-size:13px; }.sample-summary i { width:4px; height:4px; border-radius:50%; background:var(--gold); }.sample-section { padding:30px 0; border-bottom:1px solid var(--line); }.sample-section h2 { color:var(--white); font-size:27px; }.sample-section p { max-width:650px; color:var(--muted); }.sample-section blockquote { margin:20px 0; padding:16px 18px; border-left:2px solid var(--gold); color:#efe0ba; background:rgba(255,255,255,.025); }.sample-boundary { border-bottom:0; }.sample-action { margin-top:28px; }
.consent { grid-template-columns:auto 1fr; align-items:flex-start; color:var(--muted)!important; font-size:12px; font-weight:400!important; line-height:1.55; }.consent input { width:auto; margin:4px 0 0; accent-color:var(--gold); }.consent a { color:var(--gold); text-decoration:underline; text-underline-offset:2px; }
@keyframes haloFloat { 0%,100% { transform:translateY(-50%) rotate(-9deg) scale(1); } 50% { transform:translateY(calc(-50% - 10px)) rotate(-2deg) scale(1.035); } } @keyframes haloSpin { to { transform:rotate(360deg); } }
@media (max-width:820px) { .hex-halo { top:29%; right:-18%; width:200px; opacity:.42; }.result-method { margin-bottom:0; }.report-actions { width:100%; }.report-actions>* { flex:1; }.site-footer { align-items:flex-start; flex-direction:column; }.locked-preview { min-height:260px; }.locked-overlay strong { font-size:16px; } }
.cover-promises { display:flex; flex-wrap:wrap; gap:8px 16px; margin:-2px 0 30px; color:rgba(237,241,233,.72); font-size:12px; }.cover-promises span { display:inline-flex; gap:8px; align-items:center; }.cover-promises span::before { width:5px; height:5px; content:""; border-radius:50%; background:var(--gold); box-shadow:0 0 10px var(--gold); }.cover-foot { letter-spacing:2px; }
.progress-rail { width:min(1140px,calc(100% - 40px)); display:flex; align-items:center; gap:10px; margin:0 auto; padding:24px 0 0; color:#6f7b72; font-size:12px; }.progress-rail span { display:flex; align-items:center; gap:8px; white-space:nowrap; transition:color .25s; }.progress-rail b { display:grid; width:23px; height:23px; place-items:center; border:1px solid currentColor; border-radius:50%; font-size:10px; }.progress-rail i { width:36px; height:1px; background:currentColor; opacity:.35; }.progress-rail .is-active { color:var(--gold); }.progress-rail .is-complete { color:var(--jade); }
.question-prompts { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }.question-prompts button { padding:6px 10px; cursor:pointer; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:transparent; font-size:12px; }.question-prompts button:hover { border-color:var(--gold); color:var(--gold); }.input-note { margin:12px 0 0; color:var(--muted); font-size:12px; }
.category-field { margin-top:16px; }.category-field label { margin-bottom:7px; font-size:13px; }.question-card select { width:100%; min-height:44px; padding:0 12px; outline:none; border:1px solid rgba(237,241,233,.2); border-radius:3px; color:var(--ink); background:#0d1210; }.question-card select:focus { border-color:var(--gold); }.save-status { margin:18px 0 0; padding:10px 12px; border:1px solid var(--line); color:var(--muted); font-size:13px; }.save-status[data-state="saving"] { border-color:rgba(213,181,109,.42); color:var(--gold); }.save-status[data-state="success"] { border-color:rgba(158,189,165,.5); color:var(--jade); }.save-status[data-state="warning"] { border-color:rgba(195,66,54,.55); color:#f0b0a8; }
@media (max-width:820px) { .progress-rail { gap:7px; padding-top:18px; overflow:hidden; font-size:10px; }.progress-rail i { width:15px; }.progress-rail b { width:20px; height:20px; }.cover-promises { margin-bottom:24px; } }
* { box-sizing:border-box; } html { background:var(--black); scroll-behavior:smooth; } body { min-width:320px; margin:0; overflow-x:hidden; color:var(--ink); background:var(--black); font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif; line-height:1.6; } a { color:inherit; text-decoration:none; } button,input,textarea { font:inherit; }
.cover { isolation:isolate; position:relative; min-height:100svh; display:grid; grid-template-rows:auto 1fr auto; overflow:hidden; background:#070a09; }.cover-image,.cover-veil { position:absolute; inset:0; z-index:-3; }.cover-image { background:center / cover no-repeat url("assets/hero-coin-v1.png"); opacity:.76; animation:coverDrift 18s ease-in-out infinite alternate; }.cover-veil { z-index:-2; background:linear-gradient(90deg,rgba(7,10,9,.94) 0%,rgba(7,10,9,.74) 43%,rgba(7,10,9,.18) 100%),linear-gradient(0deg,rgba(7,10,9,.85),transparent 42%); }.cover:after { position:absolute; inset:-30%; z-index:-1; content:""; pointer-events:none; opacity:.3; background-image:radial-gradient(circle at center,transparent 0 1px,rgba(203,225,202,.15) 1px 2px,transparent 2px); background-size:18px 18px; mask-image:radial-gradient(circle at center,#000,transparent 56%); animation:grain 8s steps(4) infinite; }.cover-header,.work-header { width:min(1320px,100%); margin:0 auto; padding:22px clamp(20px,5vw,70px); display:flex; align-items:center; justify-content:space-between; font-size:13px; letter-spacing:1px; color:rgba(237,241,233,.72); }.brand { display:flex; gap:10px; align-items:center; color:var(--white); font-weight:800; letter-spacing:0; }.brand span { display:grid; width:31px; height:31px; place-items:center; border:1px solid rgba(255,255,255,.52); border-radius:50%; color:var(--gold); font-size:16px; }.cover-header p { margin:0; }.cover-copy { width:min(1320px,100%); align-self:center; margin:0 auto; padding:20px clamp(20px,5vw,70px) 84px; }.eyebrow { margin:0 0 14px; color:var(--gold); font-size:12px; font-weight:800; letter-spacing:2px; } h1,h2,h3,p { margin-top:0; } h1 { margin:0 0 16px; color:var(--white); font-family:STKaiti,"KaiTi",serif; font-size:clamp(66px,11vw,156px); line-height:.95; font-weight:700; letter-spacing:0; text-shadow:0 2px 32px rgba(0,0,0,.45); }.cover-statement { max-width:500px; margin-bottom:14px; font-size:clamp(19px,2vw,27px); font-weight:700; line-height:1.45; }.cover-detail { max-width:465px; margin-bottom:30px; color:rgba(237,241,233,.71); font-size:15px; }.enter-button { min-height:54px; display:inline-flex; gap:36px; align-items:center; justify-content:space-between; padding:0 13px 0 21px; cursor:pointer; color:var(--white); border:1px solid rgba(213,181,109,.68); border-radius:0; background:rgba(7,10,9,.45); backdrop-filter:blur(6px); transition:background .2s,transform .2s,border-color .2s; }.enter-button i { display:grid; width:30px; height:30px; place-items:center; border-radius:50%; color:var(--black); background:var(--gold); font-style:normal; }.enter-button:hover { transform:translateY(-2px); border-color:var(--gold); background:rgba(66,98,78,.38); }.cover-foot { justify-self:center; margin:0 0 22px; color:rgba(237,241,233,.5); font-size:10px; letter-spacing:3px; }.orbit { position:absolute; z-index:-1; border:1px solid rgba(213,181,109,.25); border-radius:50%; pointer-events:none; }.orbit-one { width:64vmax; height:64vmax; right:-19vmax; top:13vmax; animation:orbitTurn 28s linear infinite; }.orbit-two { width:37vmax; height:37vmax; right:-8vmax; top:28vmax; border-color:rgba(158,189,165,.25); animation:orbitTurn 19s linear infinite reverse; }
.experience { min-height:100svh; background:radial-gradient(ellipse at 80% 0%,#193126 0%,transparent 42%),var(--deep); }.work-header { border-bottom:1px solid var(--line); }.work-header>span { color:var(--muted); font-size:12px; }.casting-section,.result-section { width:min(1280px,100%); margin:auto; padding:clamp(68px,9vw,120px) clamp(20px,5vw,70px); }.section-intro { max-width:720px; }.section-intro h2,.self-way h2 { max-width:720px; margin-bottom:13px; color:var(--white); font-size:clamp(30px,4.5vw,58px); line-height:1.18; letter-spacing:0; }.section-intro p:not(.eyebrow) { color:var(--muted); }.casting-layout { display:grid; grid-template-columns:minmax(280px,1fr) minmax(310px,.82fr); gap:16px; max-width:1040px; margin-top:36px; }.question-card,.coin-stage { padding:27px; border:1px solid var(--line); border-radius:4px; background:rgba(18,26,22,.82); }.question-card label { display:block; margin-bottom:11px; color:var(--white); font-weight:800; }.question-card textarea { width:100%; min-height:148px; padding:14px; outline:none; border:1px solid rgba(237,241,233,.2); border-radius:3px; color:var(--ink); background:#0d1210; resize:vertical; }.question-card textarea:focus,.checkout input:focus,.checkout textarea:focus { border-color:var(--gold); }.form-footer { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:15px; }.form-footer span { color:var(--muted); font-size:12px; }.primary,.secondary { min-height:48px; padding:0 19px; border-radius:3px; cursor:pointer; font-weight:800; transition:transform .18s,background .18s,border-color .18s; }.primary { border:1px solid var(--gold); color:#16150f; background:var(--gold); }.primary:hover:not(:disabled) { transform:translateY(-1px); background:#ecd18f; }.primary:disabled { opacity:.5; cursor:not-allowed; }.secondary { color:var(--ink); border:1px solid var(--line); background:transparent; }.full { width:100%; }.coin-stage { background:linear-gradient(160deg,#20362b,#101612); }.coin-stage.is-disabled { opacity:.5; }.stage-heading { display:flex; justify-content:space-between; gap:12px; font-size:14px; }.stage-heading b { color:var(--gold); }.throw-coins { display:flex; justify-content:center; gap:12px; margin:26px 0 20px; }.throw-coins span { width:69px; height:69px; display:grid; place-items:center; border:4px solid rgba(255,255,255,.2); border-radius:50%; color:#352909; background:radial-gradient(circle at 35% 30%,#f6db8b,#c89e45 55%,#755117); font-size:19px; font-weight:800; animation:coinFloat 4s ease-in-out infinite; }.throw-coins span:nth-child(2) { animation-delay:.5s; }.throw-coins span:nth-child(3) { animation-delay:1s; }.line-preview { min-height:132px; display:flex; flex-direction:column; gap:7px; justify-content:flex-end; max-width:180px; margin:12px auto 20px; }.yao { position:relative; display:flex; gap:10px; align-items:center; width:100%; height:12px; }.yao i { display:block; height:100%; flex:1; border-radius:2px; background:#f4e6c4; }.yao.yang i:nth-child(2),.yao.empty i:nth-child(2) { display:none; }.yao.empty i { background:rgba(255,255,255,.16); }.yao.moving { color:var(--gold); }.yao em { position:absolute; right:-21px; top:-8px; font-style:normal; font-size:20px; }.yao.compact { height:8px; gap:6px; }.microcopy { margin:13px 0 0; color:var(--muted); font-size:13px; }.coin-stage .microcopy { color:rgba(237,241,233,.64); }
.result-section { border-top:1px solid var(--line); }.result-heading { display:flex; align-items:flex-start; gap:14px; }.result-heading>div { flex:1; }.result-heading h2 { max-width:780px; margin:0; color:var(--white); font-size:clamp(28px,4vw,47px); line-height:1.2; }.icon-button { width:42px; height:42px; border:1px solid var(--line); border-radius:50%; color:var(--gold); background:transparent; cursor:pointer; font-size:22px; }.hexagram-summary { display:grid; grid-template-columns:repeat(3,1fr); overflow:hidden; margin-top:28px; border:1px solid var(--line); border-radius:4px; }.hexagram-summary article { min-height:165px; padding:24px; background:rgba(255,255,255,.025); }.hexagram-summary article+article { border-left:1px solid var(--line); }.hexagram-summary span,.reading-label { color:var(--muted); font-size:13px; }.hexagram-summary strong { display:block; margin:5px 0; color:var(--white); font-size:25px; }.hexagram-summary p { margin:0; color:var(--jade); }.reading-columns { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }.reading-block { padding:24px; border:1px solid var(--line); border-radius:4px; background:var(--panel); }.reading-block h3 { color:var(--white); }.reading-block p:last-child { margin:0; color:var(--muted); }.self-way { display:grid; grid-template-columns:.75fr 1.25fr; gap:36px; margin-top:72px; }.line-advice { display:grid; gap:10px; }.advice-card { display:grid; grid-template-columns:86px 1fr; gap:14px; align-items:center; padding:16px; border:1px solid var(--line); border-radius:4px; background:rgba(255,255,255,.025); }.advice-card.is-moving { border-color:var(--gold); box-shadow:inset 3px 0 0 var(--gold); }.advice-card .yao { width:65px; }.advice-card strong { display:block; margin-bottom:4px; color:var(--white); }.advice-card p { margin:0; color:var(--muted); font-size:14px; }.report-cta { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:70px; padding:31px; border:1px solid rgba(213,181,109,.4); border-radius:4px; background:linear-gradient(100deg,#263b2e,#121814); }.report-cta h2 { margin-bottom:8px; color:var(--white); font-size:29px; }.report-cta p:not(.eyebrow) { margin:0; color:var(--muted); }.report-cta .primary { flex:0 0 auto; }
.modal { position:fixed; inset:0; z-index:50; display:none; overflow-y:auto; padding:16px 0; }.modal.is-open { display:block; }.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(9px); }.checkout { position:relative; z-index:1; width:min(560px,calc(100% - 28px)); max-height:calc(100dvh - 32px); margin:0 auto; padding:clamp(22px,4vw,34px); overflow-y:auto; border:1px solid var(--line); border-radius:4px; background:#171d1a; box-shadow:var(--shadow); }.close { position:absolute; top:13px; right:13px; width:38px; height:38px; border:1px solid var(--line); border-radius:50%; color:var(--ink); background:transparent; cursor:pointer; font-size:22px; }.checkout h2 { color:var(--white); }.checkout form { display:grid; gap:14px; }.checkout label { display:grid; gap:7px; color:var(--white); font-weight:800; }.checkout textarea,.checkout input { width:100%; padding:12px; outline:none; border:1px solid var(--line); border-radius:3px; color:var(--ink); background:#0d1210; resize:vertical; }.success { margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }.success h3 { margin-bottom:4px; color:var(--white); }
@keyframes coverDrift { from { transform:scale(1.03) translate3d(-.8%,0,0); } to { transform:scale(1.1) translate3d(.8%,-.8%,0); } } @keyframes orbitTurn { to { transform:rotate(360deg); } } @keyframes coinFloat { 50% { transform:translateY(-7px); } } @keyframes grain { 0% { transform:translate(0,0); } 25% { transform:translate(3%,2%); } 50% { transform:translate(-2%,4%); } 75% { transform:translate(4%,-3%); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; } } @media (max-width:820px) { .cover { min-height:100svh; }.cover-veil { background:linear-gradient(0deg,rgba(7,10,9,.94) 8%,rgba(7,10,9,.5) 70%,rgba(7,10,9,.35)); }.cover-copy { align-self:end; padding-bottom:42px; }.cover-detail { font-size:14px; }.cover-foot { display:none; }.orbit-one { width:100vmax; height:100vmax; right:-42vmax; top:10vmax; }.orbit-two { width:62vmax; height:62vmax; right:-20vmax; top:25vmax; }.casting-layout,.reading-columns,.self-way { grid-template-columns:1fr; }.hexagram-summary { grid-template-columns:1fr; }.hexagram-summary article+article { border-top:1px solid var(--line); border-left:0; }.report-cta { display:grid; }.report-cta .primary { width:100%; }.form-footer { align-items:stretch; flex-direction:column; }.form-footer .primary { width:100%; }.self-way { gap:18px; } }
.throw-coins { position:relative; perspective:600px; }.throw-coins::after { position:absolute; bottom:-12px; left:50%; width:160px; height:18px; content:""; border-radius:50%; background:radial-gradient(ellipse,rgba(0,0,0,.56),transparent 66%); transform:translateX(-50%); filter:blur(3px); }.throw-coins span { position:relative; z-index:1; box-shadow:0 9px 16px rgba(0,0,0,.34); }.throw-coins.is-throwing span { animation:coinThrow .82s cubic-bezier(.2,.7,.2,1) both; }.throw-coins.is-throwing span:nth-child(2) { animation-delay:.06s; }.throw-coins.is-throwing span:nth-child(3) { animation-delay:.12s; }.throw-coins.is-throwing::after { animation:shadowPulse .82s ease both; }.yao.is-new { animation:lineReveal .42s ease-out both; } @keyframes coinThrow { 0% { transform:translate3d(0,0,0) rotateX(0) rotateZ(0); } 35% { transform:translate3d(0,-40px,45px) rotateX(280deg) rotateZ(145deg); } 68% { transform:translate3d(0,3px,0) rotateX(540deg) rotateZ(270deg); } 83% { transform:translate3d(0,-7px,8px) rotateX(650deg) rotateZ(320deg); } 100% { transform:translate3d(0,0,0) rotateX(720deg) rotateZ(360deg); } } @keyframes shadowPulse { 0%,100% { transform:translateX(-50%) scale(1); opacity:.7; } 43% { transform:translateX(-50%) scale(.58); opacity:.22; } 72% { transform:translateX(-50%) scale(1.18); opacity:.85; } } @keyframes lineReveal { from { opacity:0; transform:translateX(-18px) scaleX(.45); filter:brightness(2); } to { opacity:1; transform:translateX(0) scaleX(1); filter:brightness(1); } }