body.divination-mode { color: #f2e7d0; background: #211719; }
body.divination-mode .site-header { border-bottom-color: rgba(215, 181, 108, .28); background: rgba(33, 23, 25, .95); }
body.divination-mode .brand { color: #f2e7d0; }
body.divination-mode .brand-mark { border-color: #d7b56c; color: #211719; background: #d7b56c; }
body.divination-mode .nav-button { color: #aaa0ae; }
body.divination-mode .nav-button:hover,
body.divination-mode .nav-button.is-active { color: #f2e7d0; background: rgba(197, 116, 95, .18); }
body.divination-mode .mobile-nav { border-color: rgba(215, 181, 108, .3); background: rgba(48, 35, 38, .96); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.page.divination-page { width: 100%; margin: 0; min-height: calc(100vh - 72px); color: #f2e7d0; background: #211719; }
.divination-feature { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 22px; border: 1px solid #d4b078; border-radius: 8px; padding: 22px 26px; color: #f9ead1; background: #2d1e27; box-shadow: 0 12px 28px rgba(86,43,28,.14); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.divination-feature:hover, .divination-feature:focus-visible { border-color: #e7c98d; box-shadow: 0 16px 34px rgba(86,43,28,.24); transform: translateY(-2px); }
.divination-feature .eyebrow { margin-bottom: 7px; color: #b56a3f; }.divination-feature h2 { margin-bottom: 7px; color: #8f2f28; font-family: Georgia, "Microsoft YaHei", serif; font-size: 25px; }.divination-feature p:not(.eyebrow) { margin-bottom: 15px; color: #795b4f; line-height: 1.7; }.divination-feature .primary-button { border-color: #8f2f28; color: #fff8ed; background: #8f2f28; box-shadow: 4px 4px 0 #d2a15d; }
.divination-feature-art { position: relative; display: grid; width: 130px; height: 130px; place-items: center; border: 1px solid rgba(210,161,93,.5); border-radius: 50%; background: #231721; box-shadow: inset 0 0 26px rgba(173,85,51,.2); }.divination-feature-art::before { position: absolute; inset: 15px; border: 1px dashed #9d674f; border-radius: 50%; content: ""; }.divination-feature-art span { position: relative; z-index: 2; color: #e9c582; font-family: serif; font-size: 48px; }.divination-feature-art i, .divination-feature-art b { position: absolute; width: 5px; height: 34px; border-radius: 3px; background: #d8b270; transform-origin: 50% 100%; }.divination-feature-art i { top: 12px; left: 45px; transform: rotate(-22deg); }.divination-feature-art b { top: 14px; right: 40px; transform: rotate(25deg); }
.divination-shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 42px 0 60px; }
.divination-intro { max-width: 620px; }
.divination-intro .eyebrow { color: #d7b56c; }
.divination-intro .page-title { color: #f2e7d0; font-family: Georgia, "Microsoft YaHei", serif; }
.divination-intro > p:last-child { max-width: 580px; color: #aaa0ae; }
.divination-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; border: 1px solid rgba(215,181,108,.35); border-radius: 8px; padding: 26px; background: #302326; box-shadow: 0 18px 45px rgba(0,0,0,.28); }
.divination-panel:has(.divination-result) { grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); align-items: start; }
.divination-panel .field > span { color: #f2e7d0; }.divination-panel .textarea { min-height: 132px; border-color: rgba(215,181,108,.42); color: #f2e7d0; background: #211719; }.divination-panel .textarea::placeholder { color: #aaa0ae; }.divination-panel .textarea:focus { border-color: #d7b56c; box-shadow: 0 0 0 3px rgba(215,181,108,.15); }
.divination-meta { display: flex; justify-content: space-between; gap: 12px; margin: 12px 0 18px; color: #aaa0ae; font-size: 13px; }.divination-submit { border-color: #d7b56c; color: #211719; background: #d7b56c; box-shadow: 4px 4px 0 #c5745f; }.divination-submit:hover { background: #e4c47d; }.divination-submit:disabled { cursor: not-allowed; opacity: .55; box-shadow: none; }
.divination-result { position: relative; border-left: 1px solid rgba(213,163,91,.36); padding-left: 28px; }.result-seal { display: inline-grid; width: 42px; height: 42px; place-items: center; border: 2px solid #c76e4c; color: #d88860; font-family: serif; font-size: 22px; transform: rotate(-7deg); }.divination-result .eyebrow { display: inline-block; margin: 0 0 0 10px; color: #d9a45f; }.divination-result h2 { margin: 12px 0 4px; color: #f4d69c; font-family: Georgia, "Microsoft YaHei", serif; font-size: 30px; }.result-question { color: #aa96a3; font-size: 13px; }.result-verse { margin: 18px 0; color: #f5d79c; font-family: serif; font-size: 19px; line-height: 1.9; }.result-block { border-top: 1px solid rgba(213,163,91,.2); padding-top: 13px; }.result-block h3 { margin: 0 0 5px; color: #d9a45f; font-size: 14px; }.result-block p { margin-bottom: 12px; color: #cfbec0; font-size: 14px; line-height: 1.75; }.result-action { border-left: 3px solid #b65343; padding-left: 12px; }.divination-note { margin: 18px 0 0; color: #877580; font-size: 12px; line-height: 1.65; }.divination-back { display: block; margin: 18px auto 0; color: #c9a46c; }
.result-heading, .result-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 14px; }.result-heading { margin-bottom: 18px; color: #f0cb89; font-weight: 800; }.result-roll { color: #9d8994; font-size: 13px; font-weight: 500; }.result-meta { margin: 8px 0 10px; color: #d6b779; font-size: 13px; }.result-classes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 14px; }.result-classes div { display: grid; gap: 3px; border: 1px solid rgba(213,163,91,.18); border-radius: 6px; padding: 9px 10px; background: rgba(13,9,16,.24); }.result-classes span { color: #c79055; font-size: 12px; }.result-classes strong { color: #d8c9c9; font-size: 13px; font-weight: 500; line-height: 1.55; }.result-action ol { margin: 8px 0 12px; padding-left: 22px; color: #d5c4c5; }.result-action li { margin-bottom: 7px; line-height: 1.65; }.result-risk { border-left: 3px solid #c66a52; padding-left: 12px; }.binary-note { border-left: 3px solid #d1a15a; padding-left: 10px; }.divination-followup { display: grid; gap: 4px; margin-top: 18px; border: 1px solid rgba(213,163,91,.35); border-radius: 6px; padding: 13px; color: #e5c584; background: rgba(126,72,47,.16); }.divination-followup span { color: #b9a5aa; font-size: 13px; line-height: 1.6; }.divination-followup.is-complete { border-color: rgba(174,91,70,.45); }
.draw-tabs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; border-bottom: 1px solid rgba(213,163,91,.22); padding-bottom: 14px; }.draw-tabs > span { width: 100%; color: #a99398; font-size: 12px; }.draw-tab { min-height: 36px; border: 1px solid rgba(213,163,91,.28); border-radius: 5px; padding: 0 11px; color: #cbb9b6; background: #18121b; font-size: 13px; }.draw-tab:hover { border-color: #d1a15a; color: #f2d59e; }.draw-tab.is-active { border-color: #d1a15a; color: #281a1c; background: #d1a15a; font-weight: 800; }
.result-synthesis { margin-top: 18px; border: 1px solid rgba(213,163,91,.35); border-radius: 6px; padding: 14px; background: rgba(210,161,93,.08); }.result-synthesis h3 { margin: 0 0 6px; color: #e0b970; font-size: 14px; }.result-synthesis p { margin: 0 0 8px; color: #d8c8c5; line-height: 1.7; }.result-synthesis span { color: #a99398; font-size: 12px; line-height: 1.6; }
.divination-note { color: #aaa0ae; }
.divination-back { color: #d7b56c; }
@media (max-width: 760px) { .divination-shell { padding: 28px 0 42px; }.divination-panel, .divination-panel:has(.divination-result) { grid-template-columns: 1fr; padding: 18px; }.divination-result { border-top: 1px solid rgba(213,163,91,.3); border-left: 0; padding: 22px 0 0; }.result-classes { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .divination-feature { grid-template-columns: 1fr; text-align: center; }.divination-feature-art { margin: 0 auto; }.divination-feature .primary-button { width: 100%; } }