:root { --ink:#202020; --muted:#858585; --canvas:#f5f5f7; --card:#fff; --line:#ececed; --gold:#b2955d; --gold-pale:#f4f0e6; --fire:#e93e32; --water:#508cff; --wood:#26a84f; --earth:#a98222; --metal:#595959; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--canvas); font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; }
.site-header { height:82px; display:flex; align-items:center; gap:56px; padding:0 clamp(24px,5vw,82px); background:#fff; border-bottom:1px solid #f4f4f4; }.brand { color:#111; display:flex; align-items:center; gap:11px; text-decoration:none; font:500 21px "Noto Serif SC","Songti SC",serif; letter-spacing:.03em; white-space:nowrap; }.brand span { display:grid; place-items:center; width:40px; height:40px; background:#171717; color:#fff; border-radius:5px; font-size:26px; }.main-nav { flex:1; display:flex; justify-content:center; gap:clamp(20px,4vw,68px); }.main-nav a { color:#777; text-decoration:none; padding:31px 0 25px; font-size:14px; border-bottom:2px solid transparent; }.main-nav a:hover,.main-nav .is-current { color:var(--gold); border-color:var(--gold); }.header-note { color:#aaa; margin:0; font-size:13px; white-space:nowrap; }
.page-shell { width:min(100% - 32px,1180px); margin:0 auto; padding:72px 0 86px; }.stage { min-height:570px; display:grid; grid-template-columns:1fr 520px; align-items:center; gap:85px; }.stage-copy { padding-left:30px; }.eyebrow { margin:0 0 13px; color:var(--gold); font-size:12px; letter-spacing:.18em; }.stage-copy h1 { margin:0; font:500 clamp(48px,6vw,76px)/1.24 "Noto Serif SC","Songti SC",serif; letter-spacing:.07em; }.stage-copy h1 em { font-style:normal; color:var(--gold); }.stage-copy > p:not(.eyebrow) { max-width:330px; color:#858585; line-height:1.9; margin:23px 0 0; font-size:15px; }.stage-stamp { display:flex; gap:12px; margin-top:48px; }.stage-stamp span { display:grid; place-items:center; width:37px; height:37px; border:1px solid #dfd5be; border-radius:50%; color:var(--gold); font:18px "Noto Serif SC",serif; }
.calculator-card,.result-card { background:var(--card); border-radius:22px; box-shadow:0 12px 38px rgba(38,38,38,.035); }.calculator-card { padding:30px 48px 44px; }.tabs { display:flex; gap:24px; margin-bottom:32px; border-bottom:1px solid var(--line); }.tab { padding:0 1px 13px; appearance:none; border:0; border-bottom:2px solid transparent; background:transparent; cursor:pointer; color:#8a8a8a; font:14px "Noto Sans SC",sans-serif; }.tab.is-active { color:var(--gold); border-color:var(--gold); }.panel { display:none; }.panel.is-active { display:block; }.panel-heading { margin-bottom:23px; }.panel-heading h2 { margin:0 0 7px; font-size:18px; font-weight:500; }.panel-heading p,.notice { margin:0; color:#999; font-size:13px; line-height:1.7; }
label { display:grid; gap:8px; color:#555; font-size:13px; }[hidden] { display:none !important; }.wide-field { margin-bottom:20px; }.field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }.date-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } input,select { width:100%; height:40px; padding:8px 10px; border:1px solid #e8e8e8; border-radius:4px; background:#fff; color:#222; font:14px "Noto Sans SC",sans-serif; outline-color:var(--gold); }.switch-row,.options { display:flex; align-items:center; flex-wrap:wrap; gap:10px 19px; margin:0 0 21px; }.switch-row > span,.option-label { color:#666; font-size:13px; margin-right:6px; }.choice { display:flex; align-items:center; gap:5px; font-size:13px; }.choice input { width:auto; height:auto; accent-color:var(--gold); }.options { padding-top:19px; margin-bottom:0; border-top:1px solid var(--line); }.calendar-status { flex:1 0 100%; margin-left:53px; color:#aaa; font-size:11px; line-height:1.6; }.submit { width:100%; margin-top:28px; border:0; border-radius:99px; background:#111; color:#f4e7c6; padding:14px; cursor:pointer; font:500 15px "Noto Sans SC",sans-serif; letter-spacing:.05em; }.submit:hover { background:var(--gold); color:white; }
.result-card { margin:42px auto 0; overflow:hidden; }.result-heading { display:flex; justify-content:space-between; align-items:center; padding:25px 32px; border-bottom:1px solid var(--line); }.result-heading .eyebrow { margin:0 0 6px; }.result-heading h2 { margin:0; font:500 19px "Noto Serif SC",serif; }.copy { border:1px solid #ded6c5; background:#fff; border-radius:99px; cursor:pointer; padding:7px 13px; color:#8d764a; font-size:12px; }
.result-workspace { display:grid; grid-template-columns:160px minmax(0,1fr); gap:18px; max-width:1440px; margin:0 auto; }.result-sidebar { display:flex; flex-direction:column; gap:16px; }.side-brand,.result-sidebar nav,.side-settings { border-radius:11px; background:#fff; text-align:center; text-decoration:none; }.side-brand { padding:25px 10px; color:#777; font:500 17px/1.5 "Noto Serif SC",serif; }.result-sidebar nav { overflow:hidden; }.result-sidebar nav a { display:block; padding:20px 8px; border-bottom:1px solid #f1f1f1; color:#898989; text-decoration:none; font-size:14px; }.result-sidebar nav a:last-child { border:0; }.result-sidebar nav .is-active { color:var(--gold); background:#fcfbf8; font-weight:600; }.side-settings { padding:20px 8px; color:#858585; font-size:13px; }.result-content { min-width:0; }.case-banner { display:flex; align-items:center; gap:14px; min-height:105px; padding:18px 26px; border-radius:13px 13px 0 0; background:linear-gradient(115deg,#151412,#2a2821); color:#f1e3be; }.case-seal { display:grid; place-items:center; width:44px; height:44px; border:1px solid #b79b5f; border-radius:50%; font:20px "Noto Serif SC",serif; }.case-banner h1 { margin:0 0 4px; color:#d9b66b; font:600 23px "Noto Serif SC",serif; }.case-banner p { margin:0; color:#e1ded5; font-size:12px; }.case-banner > a { margin-left:auto; padding:8px 22px; border:1px solid #a88c51; border-radius:99px; color:#d7b871; text-decoration:none; font-size:13px; }.has-chart .site-header,.has-chart .stage { display:none; }.has-chart .page-shell { width:min(100% - 48px, 1440px); padding:34px 0 64px; }.has-chart .result-card { margin:0; border-radius:0 0 13px 13px; box-shadow:none; }.has-chart .result-heading { display:none; }.has-chart .result-layout { padding:14px; }.has-chart .complete-chart { padding:28px 18px 34px; }.has-chart .notice { display:none; }
.result-layout { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(330px,.88fr); gap:12px; padding:14px; background:#fafafa; }.chart-panel,.reading-panel { border:1px solid var(--line); border-radius:10px; background:#fff; overflow:hidden; }.chart-title,.reading-title { display:flex; justify-content:space-between; align-items:center; height:45px; padding:0 18px; border-bottom:1px solid var(--line); }.chart-title span,.reading-title strong { font-weight:600; font-size:14px; }.chart-title small,.reading-title span { color:#a5a5a5; font-size:12px; }.pillar-table { display:grid; grid-template-columns:72px repeat(4,minmax(0,1fr)); text-align:center; }.row-labels,.pillar-column { display:grid; grid-template-rows:38px 38px 62px 62px 72px 38px; }.row-labels { background:#fbfbfb; color:#a4a4a4; font-size:12px; }.row-labels span,.pillar-column > span { display:grid; align-items:center; justify-content:center; border-bottom:1px solid #f2f2f2; }.pillar-name { color:#8f8f8f; font-size:12px; }.deity { font-size:14px; }.gan,.zhi { display:grid; place-items:center; border-bottom:1px solid #f2f2f2; font:500 30px "Noto Serif SC","Songti SC",serif; }.hidden-stems { flex-direction:column; gap:1px; padding:7px 1px; }.hidden-stems i { font-style:normal; font-size:11px; line-height:1.25; }.nayin { color:#a58545; font-size:12px; }.fire { color:var(--fire); }.water { color:var(--water); }.wood { color:var(--wood); }.earth { color:var(--earth); }.metal { color:var(--metal); }.hidden-stems .火{color:var(--fire)}.hidden-stems .水{color:var(--water)}.hidden-stems .木{color:var(--wood)}.hidden-stems .土{color:var(--earth)}.hidden-stems .金{color:var(--metal)}.chart-footnote { display:grid; gap:6px; padding:13px 18px; color:#777; font-size:12px; }.chart-footnote span::first-letter { color:var(--gold); }
.reading-tabs { display:flex; overflow-x:auto; border-bottom:1px solid var(--line); scrollbar-width:thin; }.reading-tabs button { flex:0 0 auto; min-width:88px; border:0; border-right:1px solid #f0f0f0; padding:12px 14px; background:#fff; color:#888; font-size:12px; white-space:nowrap; cursor:pointer; }.reading-tabs .is-active { color:var(--gold); background:var(--gold-pale); }.reading-copy { min-height:310px; max-height:520px; overflow:auto; padding:18px 21px; color:#666; font-size:13px; line-height:1.85; }.reading-copy p { margin:0 0 14px; }.reading-copy ul { margin:0 0 14px; padding:0; list-style:none; }.reading-copy li { padding:7px 0; border-bottom:1px dashed #e8e8e8; }.reading-copy b { color:#333; }.reading-copy .muted { color:#aaa; }.book-reading-heading { display:flex; align-items:center; gap:10px; margin-bottom:16px; padding-bottom:13px; border-bottom:1px solid #eee; }.book-reading-heading > span { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:#fff; background:var(--gold); }.book-reading-heading b,.book-reading-heading small { display:block; }.book-reading-heading small { margin-top:2px; color:#aaa; }.book-reading-lines p { padding:10px 12px; border-left:2px solid #d8c496; border-radius:0 7px 7px 0; background:#fbfaf7; }.book-empty { display:grid; justify-items:center; gap:8px; padding:45px 16px; color:#999; text-align:center; }.book-empty > span { display:grid; place-items:center; width:46px; height:46px; border-radius:50%; color:#b99a5c; background:#f8f3e8; font-size:22px; }.book-empty p { margin:0; color:#666; }.book-empty small { color:#aaa; }.raw-result { border-top:1px solid var(--line); }.raw-result summary { cursor:pointer; padding:15px 30px; color:#8d764a; font-size:13px; }.raw-result pre,pre { margin:0; padding:28px; overflow:auto; white-space:pre-wrap; word-break:break-word; font:13px/1.8 "SFMono-Regular",Consolas,monospace; }.notice,.message { max-width:900px; margin:26px auto 0; }.error { color:#a04a42; background:#f9e7e5; padding:14px 18px; border-radius:7px; }
.complete-chart { border-top:1px solid var(--line); padding:36px 32px 42px; background:#fafafa; }.complete-heading { margin:0 0 20px; }.complete-heading .eyebrow { margin-bottom:7px; }.complete-heading h2 { margin:0; font:500 22px "Noto Serif SC",serif; }.complete-heading > p:last-child { margin:8px 0 0; color:#999; font-size:13px; }.metrics-grid { display:grid; grid-template-columns:1.15fr 1fr 1.45fr; gap:14px; }.metric-card,.fortune-card,.detail-library { border:1px solid var(--line); border-radius:10px; background:#fff; }.metric-card { min-height:190px; padding:17px; }.metric-card h3,.fortune-card h3,.detail-library h3 { margin:0; font-size:15px; font-weight:600; }.metric-title { display:flex; align-items:center; justify-content:space-between; gap:10px; }.metric-title small { color:#aaa; font-size:10px; text-align:right; }.seasonal-states { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:15px; }.seasonal-states span { display:flex; flex-direction:column; align-items:center; gap:3px; border:1px solid #eee; border-radius:7px; padding:8px 3px; background:#fcfcfc; }.seasonal-states b { font:500 16px "Noto Serif SC",serif; }.seasonal-states em { color:#777; font-size:10px; font-style:normal; }.seasonal-states .metal b{color:var(--metal)}.seasonal-states .wood b{color:var(--wood)}.seasonal-states .water b{color:var(--water)}.seasonal-states .fire b{color:var(--fire)}.seasonal-states .earth b{color:var(--earth)}.local-metric-title { display:flex; justify-content:space-between; gap:8px; margin-top:17px; padding-top:13px; border-top:1px dashed #eee; color:#777; font-size:11px; }.local-metric-title small { color:#aaa; font-size:9px; }.element-bars { display:grid; gap:8px; margin-top:11px; }.element-bars div { display:grid; align-items:center; grid-template-columns:16px 1fr 22px; gap:8px; font-size:12px; }.element-bars i { display:block; height:7px; overflow:hidden; border-radius:99px; background:#f1f1f1; }.element-bars b { display:block; height:100%; border-radius:99px; }.element-bars b.fire{background:var(--fire)}.element-bars b.water{background:var(--water)}.element-bars b.wood{background:var(--wood)}.element-bars b.earth{background:var(--earth)}.element-bars b.metal{background:var(--metal)}.element-bars em { color:#999; font-style:normal; text-align:right; }.organ-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:17px; }.organ-grid span { display:flex; justify-content:space-between; border-radius:4px; padding:7px; color:#777; background:#f9f9f9; font-size:11px; }.organ-grid b { color:var(--gold); }.relationship-card p { display:grid; grid-template-columns:58px repeat(4,minmax(0,1fr)); margin:0; padding:8px 0; border-bottom:1px dashed #eee; font-size:11px; }.relationship-card p:last-child { border:0; }.relationship-card b { color:var(--gold); }.relationship-card span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; color:#555; }.fortune-card { margin-top:14px; overflow:hidden; }.fortune-card header { display:flex; justify-content:space-between; align-items:center; padding:16px 18px; border-bottom:1px solid var(--line); }.fortune-card header p { margin:0; color:#aaa; font-size:12px; }.fortune-list { display:grid; grid-template-columns:repeat(4,1fr); }.fortune-list article { min-height:116px; padding:15px; border-right:1px solid #f0f0f0; border-bottom:1px solid #f0f0f0; }.fortune-list article b { color:var(--gold); font-size:17px; }.fortune-list article b small { margin-left:2px; font-size:10px; font-weight:400; }.fortune-list article strong { display:block; margin-top:5px; font:500 18px "Noto Serif SC",serif; }.fortune-list article span { color:#777; font-size:12px; }.fortune-list article p { display:-webkit-box; overflow:hidden; margin:8px 0 0; color:#a0a0a0; font-size:10px; line-height:1.5; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.detail-library { margin-top:14px; overflow:hidden; }.detail-library > h3 { padding:17px 18px; border-bottom:1px solid var(--line); }.detail-library details { border-bottom:1px solid var(--line); }.detail-library details:last-child { border:0; }.detail-library summary { display:flex; justify-content:space-between; cursor:pointer; padding:15px 18px; color:#555; list-style:none; font-size:14px; }.detail-library summary::before { content:'+'; color:var(--gold); margin-right:9px; }.detail-library summary span { margin-right:auto; }.detail-library summary small { color:#aaa; }.detail-library details[open] summary::before { content:'−'; }.detail-lines { display:grid; gap:8px; padding:0 18px 18px; }.detail-lines p { margin:0; border-radius:6px; padding:12px 14px; color:#666; background:#fafafa; font-size:12px; line-height:1.75; white-space:pre-wrap; }.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.fortune-card header { gap:18px; }.fortune-card header > div:first-child p { margin-top:5px; }.fortune-timing { display:flex; flex-direction:column; gap:4px; color:#806b42; font-size:10px; text-align:right; }
.insight-board { margin-top:14px; overflow:hidden; border:1px solid #e7dfce; border-radius:10px; background:linear-gradient(135deg,#fffdf8,#fff); }.insight-heading { display:flex; justify-content:space-between; align-items:end; padding:20px; border-bottom:1px solid #eee7d8; }.insight-heading .eyebrow { margin:0 0 6px; }.insight-heading h3 { margin:0; font:500 19px "Noto Serif SC",serif; }.insight-heading > span { color:#aaa; font-size:12px; }.signal-strip { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:14px 20px; background:#fbf8ef; }.signal-strip > span { margin-right:4px; color:#8b7649; font-size:12px; }.signal-strip b { border:1px solid #dfd1ae; border-radius:99px; padding:4px 9px; color:#8a6a27; background:#fff; font-size:12px; font-weight:500; }.insight-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:#eee7d8; }.insight-grid article { display:flex; gap:13px; padding:18px 20px; background:#fff; }.insight-icon { display:grid; flex:none; place-items:center; width:29px; height:29px; border-radius:50%; color:#9c7c35; background:#f6efdc; font-weight:700; }.insight-grid article > div { min-width:0; flex:1; }.insight-grid article header { display:flex; justify-content:space-between; align-items:center; padding:0; border:0; }.insight-grid h4 { margin:0; font-size:14px; }.insight-grid em { color:#aaa; font-size:11px; font-style:normal; }.insight-grid ul { display:grid; gap:7px; margin:12px 0 0; padding:0; list-style:none; }.insight-grid li { position:relative; padding-left:12px; color:#656565; font-size:12px; line-height:1.65; }.insight-grid li::before { content:''; position:absolute; top:.63em; left:0; width:4px; height:4px; border-radius:50%; background:var(--gold); }.insight-note { margin:0; padding:13px 20px; color:#999; background:#fff; font-size:11px; line-height:1.7; }
@media (max-width:850px) { .site-header { gap:18px; height:64px; }.main-nav { display:none; }.header-note { margin-left:auto; }.page-shell { padding-top:36px; }.stage { grid-template-columns:1fr; gap:30px; }.stage-copy { padding-left:8px; }.stage-copy h1 { font-size:52px; }.calculator-card { padding:28px 22px 31px; }.date-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.stage-stamp { margin-top:27px; }.result-layout { grid-template-columns:1fr; }.reading-panel { min-height:auto; }.metrics-grid { grid-template-columns:1fr 1fr; }.relationship-card { grid-column:span 2; }.result-workspace { grid-template-columns:1fr; }.result-sidebar { display:none; }.has-chart .page-shell { width:min(100% - 24px, 1440px); padding-top:16px; } }
@media (max-width:520px) { .brand { font-size:17px; }.brand span { width:34px; height:34px; font-size:21px; }.header-note { display:none; }.page-shell { width:min(100% - 22px,1180px); }.tabs { gap:16px; overflow:auto; }.tab { white-space:nowrap; }.field-grid { grid-template-columns:1fr; }.result-heading { padding:20px; }.result-layout { padding:8px; }.pillar-table { grid-template-columns:50px repeat(4,minmax(44px,1fr)); overflow-x:auto; }.row-labels,.pillar-column { grid-template-rows:32px 32px 50px 50px 65px 34px; }.gan,.zhi { font-size:25px; }.chart-title { padding:0 12px; }.complete-chart { padding:25px 12px; }.metrics-grid { grid-template-columns:1fr; }.relationship-card { grid-column:auto; }.fortune-list { grid-template-columns:repeat(2,1fr); }.relationship-card p { grid-template-columns:50px repeat(4,minmax(0,1fr)); }.relationship-card span { font-size:10px; }.insight-heading { align-items:start; gap:10px; flex-direction:column; }.insight-grid { grid-template-columns:1fr; } }
/* Structured relation graph and source cards */
.four-pillars-graph,.source-library { margin-top:14px; overflow:hidden; border:1px solid var(--line); border-radius:10px; background:#fff; }.four-pillars-graph > header,.source-library > header { display:flex; justify-content:space-between; align-items:end; padding:18px 20px; border-bottom:1px solid var(--line); }.four-pillars-graph .eyebrow,.source-library .eyebrow { margin:0 0 5px; }.four-pillars-graph h3,.source-library h3 { margin:0; font-size:17px; font-weight:600; }.four-pillars-graph header > span,.source-library header > span { color:#aaa; font-size:12px; }.graph-tabs { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line); text-align:center; }.graph-tabs > * { padding:12px 4px; color:#777; font-size:12px; font-weight:400; }.graph-tabs b { color:#a58545; background:#f8f3e9; }.graph-canvas { min-height:310px; padding:20px 8%; background:linear-gradient(#fff,#fcfcfc); }.graph-relation-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 40px; }.graph-edge { position:relative; display:grid; grid-template-columns:32px 1fr 32px; align-items:center; gap:8px; color:#777; text-align:center; }.graph-edge::before { content:''; position:absolute; z-index:0; top:17px; right:30px; left:30px; border-top:1px solid #cfd1d3; }.graph-edge i { position:relative; z-index:1; display:grid; place-items:center; width:30px; height:30px; border:1px solid #bfc2c5; border-radius:50%; background:#fff; color:#444; font:16px "Noto Serif SC",serif; font-style:normal; }.graph-edge span { position:relative; z-index:1; justify-self:center; padding:0 6px; background:#fff; color:#555; font-size:12px; }.graph-edge small { grid-column:1/-1; color:#aaa; font-size:10px; }.graph-edge.combine span { color:#957529; }.graph-edge.clash span { color:#a05b53; }.graph-pillars { display:grid; grid-template-columns:repeat(4,1fr); margin:32px auto 0; max-width:580px; text-align:center; }.graph-pillars div { display:grid; gap:7px; justify-items:center; }.graph-pillars small { color:#aaa; font-size:11px; }.graph-pillars b,.graph-pillars strong { font:500 28px "Noto Serif SC",serif; }.four-pillars-graph footer { padding:12px 20px; border-top:1px solid var(--line); color:#a58545; background:#fcfbf8; font-size:11px; }.source-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:#eee; }.source-card { display:flex; gap:13px; padding:18px 20px; background:#fff; }.source-icon { display:grid; flex:none; place-items:center; width:34px; height:34px; border-radius:9px; background:#eef3fb; color:#5475ab; font-size:18px; }.source-card.gold .source-icon { background:#f8f1df; color:#a48134; }.source-card.red .source-icon { background:#fcebe8; color:#b15c52; }.source-card.purple .source-icon { background:#f3ecfb; color:#8661a6; }.source-card.green .source-icon { background:#eaf5ef; color:#4c9171; }.source-card.slate .source-icon { background:#eff1f3; color:#6c7a86; }.source-meta { min-width:0; flex:1; }.source-meta h4 { margin:0 0 6px; font-size:14px; }.source-meta > p { display:-webkit-box; overflow:hidden; margin:0 0 10px; color:#8a8a8a; font-size:12px; line-height:1.65; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.source-meta details summary { cursor:pointer; color:#9b7931; font-size:12px; }.source-meta details[open] summary { margin-bottom:10px; }.source-meta .detail-lines { max-height:300px; overflow:auto; padding:0; }.source-meta .detail-lines p { font-size:11px; }