:root { color-scheme: dark; --bg:#090909; --panel:#111111; --panel-2:#171717; --text:#f4efe3; --muted:#c7bca6; --line:rgba(244,239,227,.12); --gold:#d6b16c; --jade:#5fa58b; --red:#bf5a45; --radius:20px; --shadow:0 20px 50px rgba(0,0,0,.22); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scrollbar-gutter:stable; }
body { margin:0; min-height:100vh; font-family:Georgia, "Times New Roman", serif; background:radial-gradient(circle at top, rgba(214,177,108,.14), transparent 32%), linear-gradient(180deg, #0a0a0a 0%, #12100f 100%); color:var(--text); }
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; }
.shell { width:min(1120px, calc(100vw - 32px)); margin:0 auto; }
.site-header { position:sticky; top:0; z-index:10; backdrop-filter:blur(16px); background:rgba(9,9,9,.78); border-bottom:1px solid var(--line); }
.site-header .shell { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; }
.brand { display:flex; flex-direction:column; gap:4px; }
.brand strong { font-size:1rem; letter-spacing:.04em; }
.brand span { color:var(--muted); font-size:.78rem; }
.nav { display:flex; gap:10px; overflow:auto; padding-bottom:2px; }
.nav a { white-space:nowrap; padding:10px 14px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:.88rem; }
.nav a.active, .nav a:hover { color:var(--text); border-color:rgba(214,177,108,.38); background:rgba(214,177,108,.1); }
.hero { padding:28px 0 8px; }
.hero-panel, .card, .tool-card, .article-card, .metric, .story { background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.hero-panel { padding:24px; }
.eyebrow { color:var(--gold); font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; }
h1, h2, h3 { margin:0; line-height:1.05; }
h1 { margin-top:10px; font-size:clamp(1.6rem, 5vw, 3.2rem); }
h2 { font-size:clamp(1.5rem, 5vw, 2.4rem); }
h3 { font-size:1.16rem; }
p { margin:0; color:var(--muted); line-height:1.7; }
.hero-copy { display:grid; gap:16px; }
.hero-grid, .stats, .grid-3, .grid-4, .section-grid, .tool-grid, .result-grid { display:grid; gap:16px; }
.hero-grid { margin-top:22px; align-items:start; }
.stats { grid-template-columns:repeat(2, minmax(0,1fr)); }
.metric { padding:16px; }
.metric strong { display:block; font-size:1.6rem; margin-bottom:6px; color:var(--gold); }
.hero-form, .lookup-form { display:grid; gap:12px; margin-top:18px; }
.field-grid { display:grid; gap:12px; }
label { display:grid; gap:8px; font-size:.88rem; color:var(--muted); }
input, select, button { width:100%; min-height:46px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background:#151515; color:var(--text); padding:12px 14px; font:inherit; }
button { cursor:pointer; background:linear-gradient(135deg, rgba(214,177,108,.96), rgba(191,90,69,.92)); color:#130e08; font-weight:700; }
button:hover { filter:brightness(1.05); }
.subtle-btn { background:#161616; color:var(--text); }
.grid-3, .section-grid, .tool-grid { margin-top:18px; }
.card, .tool-card, .article-card, .story { padding:18px; }
.list { padding-left:18px; margin:0; color:var(--muted); line-height:1.8; }
.badge-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.badge { padding:8px 12px; border-radius:999px; background:rgba(95,165,139,.12); border:1px solid rgba(95,165,139,.22); color:#d9f1e7; font-size:.82rem; }
.term-badge { cursor:help; }
.term-badge small { color:rgba(217,241,231,.75); }
.full-row-card { grid-column:1 / -1; }
.section-intro { display:grid; gap:8px; max-width:760px; }
.section-intro p { max-width:700px; }
.featured-grid, .social-grid { margin-top:20px; }
.feature-card { padding:22px; }
.compact-card { height:100%; }
.compact-card h3 { line-height:1.2; }
.section-card { margin-top:18px; padding:20px; }
.section-card > p:first-child { max-width:760px; }
.story-grid-note { margin-top:8px; max-width:700px; }
.nine-palace-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin-top:14px; }
.palace-cell { min-height:88px; padding:10px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid var(--line); display:grid; align-content:space-between; gap:6px; cursor:help; }
.palace-cell strong { font-size:1.3rem; color:var(--gold); }
.palace-cell small { color:var(--muted); font-size:.74rem; line-height:1.35; }
.palace-cell.best { border-color:rgba(95,165,139,.45); background:rgba(95,165,139,.12); }
.palace-cell.support { border-color:rgba(214,177,108,.4); background:rgba(214,177,108,.08); }
.palace-cell.avoid { border-color:rgba(191,90,69,.42); background:rgba(191,90,69,.11); }
.palace-label { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.palace-label span { color:var(--text); font-size:.8rem; }
.result-panel { margin-top:20px; display:grid; gap:16px; }
.result-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
.score { padding:16px; border-radius:18px; background:rgba(255,255,255,.03); border:1px solid var(--line); }
.score strong { display:block; font-size:2rem; color:var(--gold); }
.section-block { padding:24px 0 8px; }
.section-block.tight-top { padding-top:0; }
.grid-tight-top { margin-top:4px; }
.cta-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }
.inline-link { color:var(--gold); }
.card h3 a.inline-link, .tool-card h3 a.inline-link, .article-card h3 a.inline-link { color:var(--text); text-decoration:none; }
.card h3 a.inline-link:hover, .tool-card h3 a.inline-link:hover, .article-card h3 a.inline-link:hover { color:var(--gold); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(214,177,108,.8); }
.error { padding:14px 16px; border-radius:14px; background:rgba(191,90,69,.12); border:1px solid rgba(191,90,69,.24); color:#ffd9cf; }
.field-note { font-size:.8rem; color:var(--muted); }
.footer { padding:28px 0 42px; color:var(--muted); }
.footer-card { padding:18px; border-top:1px solid var(--line); display:grid; gap:8px; }
.footer small { font-size:.82rem; }
.share-float { position:fixed; z-index:40; }
.share-float__panel { display:flex; gap:10px; align-items:center; min-height:62px; padding:10px; border-radius:18px; background:rgba(9,9,9,.82); border:1px solid var(--line); backdrop-filter:blur(16px); box-shadow:var(--shadow); }
.share-float__label { font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); padding:0 8px 0 4px; }
.share-float__toggle { border:1px solid var(--line); background:rgba(255,255,255,.03); color:var(--text); border-radius:999px; padding:10px 14px; min-height:42px; cursor:pointer; font:inherit; }
.share-float__toggle:hover { border-color:rgba(214,177,108,.38); background:rgba(214,177,108,.1); }
.share-float__list { display:flex; gap:8px; flex-wrap:wrap; }
.share-float__btn { display:inline-flex; align-items:center; justify-content:center; min-width:42px; min-height:42px; padding:10px 12px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.03); color:var(--text); font-size:.84rem; line-height:1; }
.share-float__btn:hover { border-color:rgba(214,177,108,.38); background:rgba(214,177,108,.1); }
.share-float__btn.is-copy-ok { border-color:rgba(95,165,139,.45); background:rgba(95,165,139,.12); }
.share-float__btn.is-copy-fail { border-color:rgba(191,90,69,.42); background:rgba(191,90,69,.11); }
.share-float__btn span { display:block; }
details { margin-top:14px; }
summary { cursor:pointer; color:var(--gold); }
@media (min-width:760px) {
  .hero-grid { grid-template-columns:1.1fr .9fr; align-items:start; }
  .field-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .grid-4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
  .grid-3, .tool-grid, .section-grid { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .result-grid { grid-template-columns:repeat(5, minmax(0,1fr)); }
}
@media (min-width:920px) {
  .share-float { right:14px; top:50%; transform:translateY(-50%); }
  .share-float__panel { flex-direction:column; align-items:stretch; padding:12px 10px; border-radius:22px; }
  .share-float__label { padding:0; text-align:center; }
  .share-float__toggle { display:none; }
  .share-float__list { flex-direction:column; }
  .share-float__btn { min-width:44px; min-height:44px; padding:10px; }
}
@media (max-width:919px) {
  body { padding-bottom:84px; }
  .share-float { left:12px; right:12px; bottom:12px; }
  .share-float__panel { justify-content:space-between; }
  .share-float.is-collapsed .share-float__list { display:none; }
  .share-float.is-collapsed .share-float__label { display:none; }
  .share-float:not(.is-collapsed) .share-float__panel { align-items:flex-start; }
  .share-float:not(.is-collapsed) .share-float__list { width:100%; }
}