.bazi-page .b-hero { background: radial-gradient(ellipse at 76% 39%, #75614424, transparent 58%), #231c1b; }
.bazi-page .b-hero::before { background: radial-gradient(ellipse at 84% 40%, #a98a4a10, transparent 65%), linear-gradient(105deg, #231b1caa, #2d25217a); }
.b-hero-landscape { position: absolute; z-index: -1; inset: 0; color: #c2a579; opacity: .15; pointer-events: none; }
.b-hero-landscape > svg { width: 100%; height: 100%; }
.bazi-page .n-hero h1 { font-size: clamp(55px, 5.2vw, 78px); }
.bazi-page .n-hero h1 em { color: #cfb4c3; }
.b-universe .n-chart-topline { gap: 12px; }
.b-universe .n-chart-topline i { width: 28px; }
.b-chart-scene { position: relative; isolation: isolate; width: 100%; max-width: 555px; margin: 14px auto 0; padding: 21px 4px 25px; }
.b-chart-scene::before { content: ""; position: absolute; z-index: -2; inset: 0 -8%; background: radial-gradient(ellipse, #d3b77e12, transparent 68%); }
.b-chart-orbit { position: absolute; z-index: -1; left: 2%; top: -3%; width: 96%; aspect-ratio: 1; border: 1px solid #c9a56b24; border-radius: 50%; transform: rotate(-28deg); animation: b-orbit-turn 90s linear infinite; pointer-events: none; }
.b-chart-orbit::before { content: ""; position: absolute; inset: 13px; border-radius: inherit; border: 1px dashed #c9a56b1f; }
.b-chart-orbit > span { position: absolute; top: 50%; left: -6px; color: #ddc08b; font-size: 15px; text-shadow: 0 0 20px #d4b67866; }
.b-chart-heading { display: flex; flex-direction: column; align-items: center; gap: 13px; margin-bottom: 28px; }
.b-chinese-title { color: #ccb180; font: 42px/1 'Songti SC', 'STSong', 'Noto Serif CJK SC', serif; letter-spacing: .17em; padding-left: .17em; }
.b-chart-heading > span:last-child { color: #a9906b; font-size: 8px; letter-spacing: .22em; }
.b-pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; padding: 0 5px; }
.b-pillar { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 22px 4px 18px; border: 1px solid #c5a36b47; border-radius: 48px 48px 9px 9px; background: radial-gradient(ellipse at 50% 20%, #b59a6f12, transparent 65%), linear-gradient(160deg, #46362e88, #2a211fdd); box-shadow: 0 18px 34px #110d1126, inset 0 1px #edcea117; }
.b-pillar::before { content: ""; position: absolute; inset: 7px; border: 1px solid #c5a36b1f; border-radius: 42px 42px 4px 4px; pointer-events: none; }
.b-pillar-period { color: #bbab93; font-size: 10px; letter-spacing: .12em; margin-bottom: 23px; }
.b-pillar-stem, .b-pillar-branch { color: #d7bb86; font: 47px/1.2 'Songti SC', 'STSong', 'Noto Serif CJK SC', serif; text-shadow: 0 1px 0 #f2dba128, 0 4px 20px #c6a66b12; }
.b-pillar-branch { margin-top: 18px; color: #b6a184; }
.b-pillar-note { color: #9d8a70; font-size: 8px; margin-top: 27px; }
.b-pillar-day { border-color: #d3b171a6; background: radial-gradient(ellipse at 50% 32%, #b39b6e20, transparent 75%), linear-gradient(155deg, #5b4737, #382a26); box-shadow: 0 18px 34px #110d1126, 0 0 28px #d5ac590b, inset 0 1px #edcea14d; }
.b-pillar-day::after { content: ""; position: absolute; inset: 7px; border-radius: 42px 42px 4px 4px; background: radial-gradient(ellipse at 50% 20%, #edd7a529, transparent 75%); opacity: .2; pointer-events: none; animation: b-pillar-glow 7s ease-in-out infinite; }
.b-pillar-day .b-pillar-period, .b-pillar-day .b-pillar-note { color: #e2c998; }
.b-pillar-day .b-pillar-stem { color: #f0d7a0; }
.b-day-star { position: absolute; bottom: -12px; left: calc(50% - 9px); color: #dfbd79; font-size: 18px; line-height: 1; text-shadow: 0 0 15px #cfaa6266; }
.b-five-elements { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 35px; }
.b-five-elements > span { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #b3a18a; font-size: 8px; }
.b-five-elements i { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #c4aa7e38; border-radius: 50%; font: 18px 'Songti SC', 'STSong', 'Noto Serif CJK SC', serif; color: #c6b07e; background: #a78e5b09; }
.b-five-elements > span:nth-child(1) i { color: #bdc3a1; border-color: #bcc3a138; }
.b-five-elements > span:nth-child(2) i { color: #c79786; border-color: #c7978638; }
.b-five-elements > span:nth-child(5) i { color: #b8adc9; border-color: #b8adc938; }
.bazi-page .n-chart-caption { margin-top: 18px; }
.bazi-page .n-insight h4 { font-size: 37px; }
.bazi-page .n-insight-icon { width: 72px; height: 72px; top: 27px; right: 0; opacity: .42; }
.bazi-page .n-insight { min-height: 390px; }
.bazi-page .n-insight .n-overline { font-size: 9px; }
@keyframes b-orbit-turn { to { transform: rotate(332deg); } }
@keyframes b-pillar-glow { 0%, 100% { opacity: .12; } 50% { opacity: .65; } }
@media (max-width: 1100px) {
  .bazi-page .n-hero h1 { font-size: 62px; }
  .b-pillars { gap: 9px; }
  .b-pillar-stem, .b-pillar-branch { font-size: 42px; }
  .b-five-elements { gap: 19px; }
  .bazi-page .n-insight-icon { width: 57px; height: 57px; }
}
@media (max-width: 800px) {
  .bazi-page .n-hero h1 { font-size: 53px; }
  .b-universe .n-chart-topline { font-size: 14px; gap: 7px; }
  .b-universe .n-chart-topline i { width: 15px; }
  .b-chart-heading { margin-bottom: 24px; }
  .b-chinese-title { font-size: 34px; }
  .b-chart-heading > span:last-child { font-size: 6px; letter-spacing: .14em; }
  .b-pillars { gap: 7px; padding: 0; }
  .b-pillar { padding-top: 21px; padding-bottom: 16px; }
  .b-pillar-period { font-size: 8px; margin-bottom: 17px; }
  .b-pillar-stem, .b-pillar-branch { font-size: 34px; }
  .b-pillar-branch { margin-top: 16px; }
  .b-pillar-note { font-size: 6px; margin-top: 19px; }
  .b-five-elements { gap: 17px; }
  .b-five-elements i { width: 29px; height: 29px; font-size: 16px; }
  .b-five-elements > span { font-size: 7px; }
  .bazi-page .n-insight h4 { font-size: 32px; }
  .bazi-page .n-insight-icon { display: none; }
}
@media (max-width: 600px) {
  .bazi-page .n-hero h1 { font-size: clamp(47px, 13vw, 72px); }
  .bazi-page .n-hero h1 em { white-space: nowrap; }
  .b-universe { margin-top: 43px; }
  .b-universe .n-chart-topline { font-size: 17px; }
  .b-chart-scene { padding-top: 23px; padding-bottom: 14px; }
  .b-chart-heading { gap: 12px; margin-bottom: 25px; }
  .b-chinese-title { font-size: 39px; }
  .b-chart-heading > span:last-child { font-size: 7px; }
  .b-pillars { gap: 10px; }
  .b-pillar { padding-top: 24px; padding-bottom: 20px; }
  .b-pillar-period { font-size: 9px; margin-bottom: 20px; }
  .b-pillar-stem, .b-pillar-branch { font-size: 40px; }
  .b-pillar-note { font-size: 7px; }
  .b-five-elements { gap: 23px; margin-top: 31px; }
  .b-five-elements i { width: 32px; height: 32px; font-size: 18px; }
  .b-five-elements > span { font-size: 8px; }
  .bazi-page .n-chart-caption { font-size: 7px; margin-top: 9px; }
  .bazi-page .n-hero-bottom p { max-width: 260px; font-size: 8px; }
  .bazi-page .n-insight h4 { font-size: 33px; }
  .bazi-page .n-insight { min-height: 335px; }
  .bazi-page .n-insight .n-overline { font-size: 8px; }
}
@media (max-width: 360px) {
  .bazi-page .n-hero h1 { font-size: 43px; }
  .b-pillars { gap: 7px; }
  .b-pillar-stem, .b-pillar-branch { font-size: 34px; }
  .b-pillar-note { font-size: 6px; }
  .b-five-elements { gap: 19px; }
  .b-chart-heading > span:last-child { font-size: 6px; }
  .b-universe .n-chart-topline { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .b-chart-orbit, .b-pillar-day::after { animation: none; }
}