:root { color-scheme: light; --paper:#f4f1e8; --paper-deep:#e8e1d3; --ink:#18231f; --muted:#65716b; --jade:#0f725c; --jade-deep:#084b3e; --jade-soft:#d9e9e1; --cinnabar:#b94b36; --gold:#b98a3f; --line:rgba(24,35,31,.16); --white:#fffdf7; --shadow:0 24px 70px rgba(31,48,42,.13); --display:"Songti SC","STSong","Noto Serif CJK SC",serif; --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--paper); }
body { min-width:320px; margin:0; color:var(--ink); background:radial-gradient(circle at 80% 2%, rgba(217,233,225,.9), transparent 32%), var(--paper); font-family:var(--sans); letter-spacing:0; }
body::before { content:""; position:fixed; inset:0; z-index:-1; opacity:.16; pointer-events:none; background-image:linear-gradient(rgba(24,35,31,.045) 1px, transparent 1px),linear-gradient(90deg,rgba(24,35,31,.035) 1px,transparent 1px); background-size:34px 34px; }
a,button,input,select { font:inherit; }
a { color:inherit; }
button { cursor:pointer; }
[hidden] { display:none !important; }
.site-header,.site-footer,main { width:min(calc(100% - 40px),1180px); margin:0 auto; }
.site-header { min-height:74px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { font:700 26px var(--display); text-decoration:none; }
.header-note { color:var(--muted); font-size:13px; }
.hero { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr); align-items:center; gap:clamp(36px,7vw,110px); min-height:620px; margin-left:calc((1180px - 100vw) / 2); margin-right:calc((1180px - 100vw) / 2); padding:72px max(20px, calc((100vw - 1180px) / 2)); overflow:hidden; color:var(--white); background:var(--jade-deep); }
.hero::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(110deg,rgba(7,47,39,.98),rgba(7,47,39,.78) 58%,rgba(7,47,39,.4)); }
.hero-copy { position:relative; z-index:1; max-width:680px; }
.eyebrow { margin:0 0 12px; color:var(--jade); font-size:12px; font-weight:800; letter-spacing:.12em; }
.hero .eyebrow { color:#f2c77a; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { font-family:var(--display); }
h1 { max-width:680px; font-size:clamp(48px,7vw,84px); line-height:1.02; letter-spacing:0; }
h1 em { color:var(--jade); font-style:normal; }
.hero-lead { max-width:560px; margin-top:24px; color:rgba(255,253,247,.82); font-size:19px; line-height:1.85; }
.hero-promise { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.hero-promise span { padding:9px 12px; border:1px solid rgba(255,253,247,.28); color:rgba(255,253,247,.82); font-size:12px; }
.hero-cta,.primary-submit,.result-cta a { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:54px; border:0; background:var(--jade); color:var(--white); font-weight:750; text-decoration:none; box-shadow:0 12px 24px rgba(15,114,92,.2); }
.hero-cta { margin-top:30px; padding:0 24px; }
.hero-cta span { font-size:20px; }
.hero-note { margin-top:12px; color:rgba(255,253,247,.68); font-size:13px; }
.hero-chart { position:relative; display:grid; place-items:center; width:min(100%,430px); aspect-ratio:1; margin-left:auto; border:1px solid rgba(255,253,247,.3); border-radius:50%; background:radial-gradient(circle,rgba(228,197,123,.16),transparent 55%),rgba(255,253,247,.04); box-shadow:0 0 0 18px rgba(255,253,247,.03),0 0 0 44px rgba(255,253,247,.025); }
.chart-orbit { position:absolute; inset:12%; display:flex; align-items:flex-start; justify-content:space-between; color:#f2c77a; font-size:12px; }
.chart-pillar-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; width:70%; }
.chart-pillar-grid b { display:grid; place-items:center; aspect-ratio:1; border:1px solid rgba(242,199,122,.62); color:#fff6da; font:700 clamp(30px,5vw,52px) var(--display); }
.chart-caption { position:absolute; bottom:12%; display:grid; gap:6px; text-align:center; }
.chart-caption strong { font:700 18px var(--display); }.chart-caption span { color:rgba(255,253,247,.64); font-size:12px; }
.trust-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:0 0 80px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--line); }
.trust-strip span { padding:20px 22px; background:rgba(255,253,247,.58); color:var(--muted); font-size:14px; }
.trust-strip b { display:block; margin-bottom:5px; color:var(--cinnabar); font:700 20px var(--display); }
.reading-form-section { display:grid; grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr); gap:clamp(32px,7vw,100px); padding:42px 0 92px; scroll-margin-top:30px; }
.section-intro h2,.explain-section h2 { font-size:clamp(34px,4vw,52px); line-height:1.08; }
.section-intro > p:last-child { max-width:300px; margin-top:18px; color:var(--muted); line-height:1.75; }
.fortune-form { padding:28px; background:rgba(255,253,247,.72); border:1px solid var(--line); box-shadow:var(--shadow); }
.form-row { display:grid; gap:12px; }
.form-row-three { grid-template-columns:92px 92px minmax(0,1fr); }
.fortune-form label,.birth-place-field { display:grid; gap:7px; min-width:0; }
.fortune-form label > span,.birth-place-field > span,.birth-fieldset legend { color:var(--muted); font-size:12px; font-weight:700; }
select,.field-button,.place-dialog input { width:100%; min-height:46px; border:1px solid var(--line); border-radius:2px; padding:0 12px; background:rgba(255,255,255,.72); color:var(--ink); }
.field-button { display:flex; align-items:center; justify-content:space-between; text-align:left; }
.field-button.has-value { color:var(--ink); }
.birth-fieldset { min-width:0; margin:20px 0 0; padding:16px 0 0; border:0; border-top:1px solid var(--line); }
.date-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:10px; }
.check-row { display:flex !important; grid-template-columns:none !important; align-items:center; gap:8px !important; margin-top:12px; }
.check-row input { width:16px; height:16px; accent-color:var(--jade); }
.lunar-row { margin-top:12px; }
.primary-submit { width:100%; margin-top:22px; padding:0 20px; justify-content:space-between; }
.primary-submit:disabled { cursor:wait; opacity:.65; }
.form-status { min-height:21px; margin-top:12px; color:var(--muted); font-size:12px; }
.place-dialog { width:min(92vw,460px); padding:24px; border:1px solid var(--line); background:var(--paper); color:var(--ink); box-shadow:var(--shadow); }
.place-dialog::backdrop { background:rgba(8,28,22,.42); }
.dialog-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; font:700 22px var(--display); }
.dialog-close,.reset-button { border:0; background:transparent; color:var(--muted); }
.dialog-close { font-size:24px; }
.place-dialog > label,.place-dialog > div { margin-top:12px; }
.place-dialog p { margin-top:12px; color:var(--muted); font-size:12px; }
.place-results { display:grid; gap:6px; margin-top:8px; }
.place-results button { min-height:42px; border:1px solid var(--line); background:var(--white); text-align:left; padding:0 10px; }
.result-section { padding:42px 0 96px; border-top:1px solid var(--line); }
.result-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:24px; }
.result-heading h2 { font-size:clamp(38px,5vw,60px); line-height:1; }.result-subtitle { margin-top:10px; color:var(--muted); font-size:14px; }
.reset-button { min-height:44px; border-bottom:1px solid var(--jade); color:var(--jade); }
.result-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:14px; }
.result-grid article { min-height:190px; padding:25px; border:1px solid var(--line); background:rgba(255,253,247,.64); }
.verdict-panel { grid-row:span 2; display:flex; flex-direction:column; justify-content:center; background:var(--jade-deep) !important; color:var(--white); }
.result-kicker,.panel-label { color:var(--gold); font-size:12px; font-weight:800; letter-spacing:.1em; }
.verdict-panel h3 { max-width:520px; margin-top:18px; font-size:clamp(30px,4vw,52px); line-height:1.16; }
.verdict-panel > p:last-child { max-width:560px; margin-top:20px; color:rgba(255,253,247,.78); line-height:1.85; }
.chart-panel strong { display:block; margin-top:25px; font:700 clamp(22px,3vw,34px) var(--display); }
.chart-meta { display:flex; gap:20px; margin-top:24px; color:var(--muted); font-size:13px; }
.chart-meta b { color:var(--ink); }
.element-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.element-list span { padding:8px 10px; background:var(--jade-soft); color:var(--jade-deep); font-size:13px; }
.favorable-line { display:flex; justify-content:space-between; gap:12px; margin-top:22px; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
.favorable-line strong { color:var(--ink); }
.timing-panel p { display:flex; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:1px solid var(--line); font-size:13px; }
.timing-panel p span { color:var(--muted); }.timing-panel p strong { text-align:right; }
.question-block { display:grid; grid-template-columns:.7fr 1.3fr; gap:32px; margin-top:38px; padding:30px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.question-block h3 { margin-top:8px; font-size:30px; }.question-block p { margin-top:10px; color:var(--muted); line-height:1.7; }
.question-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.question-list button { display:flex; align-items:center; min-height:52px; padding:0 14px; border:1px solid var(--line); background:rgba(255,253,247,.65); color:var(--ink); text-align:left; font-size:14px; }
.question-list button:hover,.question-list button:focus-visible { border-color:var(--jade); color:var(--jade-deep); }
.fortune-chat { margin-top:26px; padding:20px; border:1px solid var(--line); background:rgba(255,253,247,.72); }.fortune-chat label { display:block; color:var(--muted); font-size:13px; font-weight:700; }.chat-input-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; margin-top:10px; }.chat-input-row input { min-height:48px; border:1px solid var(--line); padding:0 13px; background:var(--white); color:var(--ink); }.chat-input-row button { min-width:88px; border:0; background:var(--jade); color:var(--white); font-weight:700; }.chat-input-row button:disabled { opacity:.6; cursor:wait; }.chat-status { min-height:20px; margin-top:9px; color:var(--muted); font-size:12px; }.chat-thread { display:grid; gap:12px; margin-top:16px; }.chat-message { max-width:78%; padding:14px 16px; border:1px solid var(--line); background:rgba(255,253,247,.74); }.chat-message span { display:block; margin-bottom:6px; color:var(--jade); font-size:11px; font-weight:800; letter-spacing:.08em; }.chat-message p { color:var(--ink); line-height:1.8; white-space:pre-wrap; }.chat-message.user { justify-self:end; background:var(--jade-soft); }.chat-message.assistant { justify-self:start; }
.result-cta { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:32px; padding:22px 24px; background:var(--paper-deep); }
.result-cta strong,.result-cta span { display:block; }.result-cta span { margin-top:5px; color:var(--muted); font-size:13px; }.result-cta a { flex:none; padding:0 20px; font-size:14px; }
.explain-section { display:grid; grid-template-columns:.7fr 1.3fr; gap:32px; padding:70px 0; border-top:1px solid var(--line); }.explain-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); }.explain-grid article { padding:22px; background:rgba(255,253,247,.58); }.explain-grid b { font:700 22px var(--display); }.explain-grid p { margin-top:12px; color:var(--muted); font-size:14px; line-height:1.7; }
.faq-section { padding:0 0 80px; }.faq-section details { padding:18px 0; border-bottom:1px solid var(--line); }.faq-section summary { cursor:pointer; font-weight:700; }.faq-section details p { max-width:720px; margin-top:12px; color:var(--muted); line-height:1.75; }
.site-footer { display:flex; flex-wrap:wrap; gap:18px 26px; padding:28px 0 42px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }.site-footer a { color:var(--muted); }
@media (max-width:760px) { .site-header, .site-footer, main { width:min(calc(100% - 28px),560px); }.hero { display:flex; flex-direction:column; align-items:flex-start; min-height:620px; margin-left:calc((560px - 100vw) / 2); margin-right:calc((560px - 100vw) / 2); padding:48px 14px 42px; }.hero-chart { width:min(78vw,340px); margin:20px auto 0; }.trust-strip { grid-template-columns:1fr; margin-bottom:52px; }.trust-strip span { padding:15px 18px; }.reading-form-section,.question-block,.explain-section { grid-template-columns:1fr; gap:26px; }.fortune-form { padding:20px 16px; }.form-row-three { grid-template-columns:80px 80px minmax(0,1fr); }.date-grid { grid-template-columns:repeat(2,1fr); }.result-grid { grid-template-columns:1fr; }.verdict-panel { grid-row:auto; min-height:260px !important; }.result-cta { align-items:stretch; flex-direction:column; }.result-cta a { width:100%; }.question-list,.explain-grid { grid-template-columns:1fr; }.chat-message { max-width:94%; } }
@media (max-width:390px) { h1 { font-size:44px; }.hero-lead { font-size:17px; }.form-row-three { grid-template-columns:1fr 1fr; }.birth-place-field { grid-column:1 / -1; } }