/* Native chart states: one glyph per occurrence, effects between real endpoints. */
:is(#personal-detail,.annual-personal) .reading-chart-context{--context-ink:#345c59;margin:8px 0 14px;padding:5px 6px;border:1px solid #d6ded0;border-radius:12px;background:linear-gradient(135deg,#fffdf5,#edf4ed);color:#35564e;isolation:isolate}
:is(#personal-detail,.annual-personal) .reading-chart-context table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:3px 2px;margin:0}
:is(#personal-detail,.annual-personal) .reading-chart-context th{font-size:9px;line-height:12px;font-weight:400;text-align:center;color:#7d8c80;padding:0}
:is(#personal-detail,.annual-personal) .reading-chart-context th:first-child{width:10px}
:is(#personal-detail,.annual-personal) .reading-chart-context tbody th{writing-mode:vertical-rl;letter-spacing:0;vertical-align:middle;font-size:8px;line-height:10px}
:is(#personal-detail,.annual-personal) .reading-chart-context td{padding:0;vertical-align:middle}
:is(#personal-detail,.annual-personal) .reading-chart-stack{display:flex;flex-direction:column;gap:2px}
:is(#personal-detail,.annual-personal) .reading-chart-cell{position:relative;display:flex;align-items:center;justify-content:center;gap:0;box-sizing:border-box;min-height:20px;margin:0;padding:0;border:1px solid transparent;border-radius:6px;text-decoration:none;color:var(--context-ink);background:transparent;overflow:hidden;transition:background .2s,opacity .2s}
:is(#personal-detail,.annual-personal) .reading-chart-cell b{font:500 14px/18px var(--serif,"Songti SC",serif);margin:0;padding:0}
:is(#personal-detail,.annual-personal) .reading-chart-cell.is-focus{min-height:30px;background:linear-gradient(145deg,#fffcdf,#f5e6b7);border-color:#c4a356;box-shadow:0 2px 8px #b39a5020;color:#65451f}
:is(#personal-detail,.annual-personal) .reading-chart-cell.is-focus b{font-size:22px;line-height:26px}
:is(#personal-detail,.annual-personal) .reading-chart-cell.is-related{min-height:28px;background:#e0f0e5;border-color:#8fb49d;color:#315d4b}
:is(#personal-detail,.annual-personal) .reading-chart-cell.is-related b{font-size:19px;line-height:24px}
:is(#personal-detail,.annual-personal) .reading-chart-cell.is-anchor{background:#ebefe1;border-color:#bdc9a8}
:is(#personal-detail,.annual-personal) .reading-chart-cell.is-dim{opacity:.3;filter:grayscale(.8)}
:is(#personal-detail,.annual-personal) .reading-chart-cell.is-dim:hover,:is(#personal-detail,.annual-personal) .reading-chart-cell.is-dim:focus-visible{opacity:1}
:is(#personal-detail,.annual-personal) .reading-chart-cell:focus-visible{outline:2px solid #9c7038;outline-offset:1px}
:is(#personal-detail,.annual-personal) .reading-chart-unknown{font-size:9px;line-height:20px;color:#889084;text-align:center;padding:0}


/* Connections are laid out against the actual chart cells, never a second scene. */
:is(#personal-detail,.annual-personal) .reading-chart-context{position:relative;padding-top:12px}
:is(#personal-detail,.annual-personal) .reading-chart-context.has-links table{border-spacing:3px 12px}
:is(#personal-detail,.annual-personal) .reading-chart-context.has-links thead th{line-height:10px}
:is(#personal-detail,.annual-personal) .reading-chart-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
:is(#personal-detail,.annual-personal) .reading-chart-line{fill:none;stroke:#ad8956;stroke-width:1.3;stroke-dasharray:3 4;opacity:.8}
:is(#personal-detail,.annual-personal) .reading-chart-dot{fill:#b18449;stroke:#fff9e9;stroke-width:1}
:is(#personal-detail,.annual-personal) .reading-chart-line-label{font:9px "Microsoft YaHei",sans-serif;fill:#896334;paint-order:stroke;stroke:#faf8ed;stroke-width:4px;stroke-linejoin:round}
:is(#personal-detail,.annual-personal) .reading-chart-context.is-palace .is-focus,:is(#personal-detail,.annual-personal) .reading-chart-context.is-palace .is-related{background:#fff7dd;border:1px solid #c3a36d;min-height:34px;border-radius:50%;width:34px;margin:auto;box-shadow:0 0 0 4px #d7b96a15}
:is(#personal-detail,.annual-personal) .reading-chart-context.is-palace .is-focus b,:is(#personal-detail,.annual-personal) .reading-chart-context.is-palace .is-related b{font-size:22px}
:is(#personal-detail,.annual-personal) .reading-chart-caption{text-align:center;font:11px/1.5 "Microsoft YaHei",sans-serif;color:#967449;margin:3px 20px 4px}
:is(#personal-detail,.annual-personal) .reading-chart-motion{position:absolute;right:5px;top:3px;z-index:4;border:0;border-radius:50%;background:transparent;color:#9d8968;font:12px/20px sans-serif;width:24px;height:24px;cursor:pointer}
:is(#personal-detail,.annual-personal) .reading-chart-context.paused *,:is(#personal-detail,.annual-personal) .reading-chart-context.paused *::before,:is(#personal-detail,.annual-personal) .reading-chart-context.paused *::after{animation-play-state:paused!important}
:is(#personal-detail,.annual-personal) .reading-chart-context+.slot-scene-card{margin:-7px 0 16px;border-radius:10px;box-shadow:none}
:is(#personal-detail,.annual-personal) .reading-chart-context+.slot-scene-card .scene-reading-actions{border-top:0;border-radius:10px}
:is(#personal-detail,.annual-personal) .reading-chart-context+.slot-scene-card .scene-reading-button{min-height:44px;font-size:15px;padding:8px 10px}
:is(#personal-detail,.annual-personal) .reading-chart-context+.slot-scene-card .scene-reading-button small{display:none}
:is(#personal-detail,.annual-personal) .reading-chart-context+.slot-scene-card .reading-action-icon{height:24px;flex-basis:22px;font-size:14px}
@keyframes chart-link-flow{to{stroke-dashoffset:-28}}


/* Each slot uses its own grammar, without scenery or duplicate characters. */
:is(#personal-detail,.annual-personal) .reading-chart-cell.has-native-state{overflow:visible}
:is(#personal-detail,.annual-personal) .reading-chart-cell.has-native-state b{position:relative;z-index:1}
:is(#personal-detail,.annual-personal) .reading-chart-cell.is-focus::before{content:"";position:absolute;inset:2px;border-radius:inherit;border:1px solid #dfb75570;animation:chart-breathe 3s ease-in-out infinite;pointer-events:none}
:is(#personal-detail,.annual-personal) .reading-chart-arrow{stroke:#aa7731;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;fill:none}
:is(#personal-detail,.annual-personal) .edge-flow .reading-chart-line{stroke:#bd9037;stroke-width:2;stroke-dasharray:4 6;animation:chart-link-flow 2.4s linear infinite}
:is(#personal-detail,.annual-personal) .is-source b{animation:chart-give 2.4s ease-in-out infinite}
:is(#personal-detail,.annual-personal) .is-receiver{animation:chart-receive 2.4s ease-in-out infinite}
:is(#personal-detail,.annual-personal) .edge-enclosure .reading-chart-line{stroke-dasharray:none;stroke-width:2;stroke:#719b83}
:is(#personal-detail,.annual-personal) .edge-enclosure .reading-chart-dot{display:none}
:is(#personal-detail,.annual-personal) .mode-same-palace .is-related,:is(#personal-detail,.annual-personal) .mode-same-palace .is-focus{border-color:#78a38b;background:#e7f4dd}
:is(#personal-detail,.annual-personal) .mode-hidden-in .is-focus{border:3px double #b99b64;background:#f4eedb}
:is(#personal-detail,.annual-personal) .mode-hidden-in .is-focus b{animation:chart-shelter 3.2s ease-in-out infinite}
:is(#personal-detail,.annual-personal) .edge-containment .reading-chart-line{stroke-dasharray:1 3;stroke:#a28f6b}
:is(#personal-detail,.annual-personal) .edge-root .reading-chart-line{stroke-dasharray:none;stroke:#85a15f;stroke-width:2.5}
:is(#personal-detail,.annual-personal) .mode-root-remnant .edge-root .reading-chart-line{stroke-width:1;stroke-dasharray:2 3}
:is(#personal-detail,.annual-personal) .mode-root-main .is-focus,:is(#personal-detail,.annual-personal) .mode-root-remnant .is-focus{border-bottom:3px solid #799957}

:is(#personal-detail,.annual-personal) .mode-strong .is-focus{box-shadow:0 0 12px #ebbf5670}
:is(#personal-detail,.annual-personal) .mode-strong .is-focus b{animation:chart-grow 3s ease-in-out infinite}
:is(#personal-detail,.annual-personal) .mode-mid .is-focus b{animation:chart-breathe 4s ease-in-out infinite}
:is(#personal-detail,.annual-personal) .mode-weak .is-focus{background:#f0eee6;border-color:#b3aa94}
:is(#personal-detail,.annual-personal) .edge-stage .reading-chart-line{stroke:#a5ae8f;stroke-dasharray:1 4}
:is(#personal-detail,.annual-personal) .mode-bind .is-focus,:is(#personal-detail,.annual-personal) .mode-bind .is-related{border:3px double #ae925c}
:is(#personal-detail,.annual-personal) .mode-bind .reading-chart-line{stroke:#ae925c;stroke-width:3;stroke-dasharray:2 2;animation:chart-breathe 3s ease-in-out infinite}
:is(#personal-detail,.annual-personal) .mode-clash .is-focus b,:is(#personal-detail,.annual-personal) .mode-mutual-harm .is-focus b{animation:chart-shake 2.8s ease-in-out infinite}
:is(#personal-detail,.annual-personal) .mode-clash .is-related b,:is(#personal-detail,.annual-personal) .mode-mutual-harm .is-related b{animation:chart-shake 2.8s ease-in-out infinite reverse}
:is(#personal-detail,.annual-personal) .mode-clash .reading-chart-line,:is(#personal-detail,.annual-personal) .mode-mutual-harm .reading-chart-line{stroke:#b87965;stroke-width:2;stroke-dasharray:3 3}
:is(#personal-detail,.annual-personal) .mode-rise .is-focus b,:is(#personal-detail,.annual-personal) .mode-emerge .is-focus b{animation:chart-float 2.8s ease-in-out infinite}
:is(#personal-detail,.annual-personal) .mode-open .is-focus::before,:is(#personal-detail,.annual-personal) .mode-scatter .is-focus::before{animation:chart-expand 3s ease-out infinite}
:is(#personal-detail,.annual-personal) .mode-transformed .is-focus b{animation:chart-shelter 3s ease-in-out infinite}
:is(#personal-detail,.annual-personal) .mode-tomb .is-focus,:is(#personal-detail,.annual-personal) .mode-trapped .is-focus{border:3px double #9a947f;box-shadow:inset 0 0 9px #82796330}
:is(#personal-detail,.annual-personal) .mode-hidden-harm .reading-chart-line{stroke:#a98c93;stroke-dasharray:1 5;animation:chart-breathe 4s ease-in-out infinite}
:is(#personal-detail,.annual-personal) .mode-momentum .is-focus,:is(#personal-detail,.annual-personal) .mode-momentum .is-related{animation:chart-receive 3s ease-in-out infinite}
:is(#personal-detail,.annual-personal) .mode-support .is-focus:not(.is-source),:is(#personal-detail,.annual-personal) .mode-supply .is-related{box-shadow:0 0 8px #cae5b6}
@keyframes chart-breathe{50%{opacity:.55}}
@keyframes chart-give{50%{transform:scale(.94);filter:brightness(1.25)}}
@keyframes chart-receive{50%{box-shadow:0 0 0 3px #d9bc6230,0 0 13px #ead78480}}
@keyframes chart-grow{50%{transform:translateY(-1px) scale(1.06)}}
@keyframes chart-float{50%{transform:translateY(-3px)}}
@keyframes chart-shake{4%,12%{transform:translateX(-1px)}8%,16%{transform:translateX(1px)}20%,100%{transform:none}}
@keyframes chart-shelter{50%{opacity:.6}}
@keyframes chart-expand{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.2);opacity:0}}
/* A shared gust makes deep, shallow, and absent roots visibly different. */
:is(#personal-detail,.annual-personal) .reading-chart-cell.has-root-motion{height:64px;min-height:64px;display:block;border-bottom:1px solid #c4a356;overflow:hidden;background:linear-gradient(#fffbe0,#faf4d7)}
:is(#personal-detail,.annual-personal) .reading-chart-cell.has-root-motion::before{display:none}
:is(#personal-detail,.annual-personal) .reading-chart-cell.has-root-motion b{position:absolute;top:4px;left:calc(50% - 13px);width:26px;line-height:28px;text-align:center;transform-origin:50% 100%;text-shadow:0 1px 2px #fffbe0}
:is(#personal-detail,.annual-personal) .chart-root-wind{position:absolute;top:3px;left:0;width:100%;height:29px;fill:none;stroke:#83b2b3;stroke-width:1.2;stroke-linecap:round;pointer-events:none;opacity:.7}
:is(#personal-detail,.annual-personal) .chart-root-wind path{stroke-dasharray:27 73;animation:chart-root-gust 4.8s linear infinite}
:is(#personal-detail,.annual-personal) .chart-root-wind path:nth-child(2){animation-delay:.16s;stroke-width:1.6}
:is(#personal-detail,.annual-personal) .chart-root-wind path:nth-child(3){animation-delay:.32s}
:is(#personal-detail,.annual-personal) .chart-root-soil{position:absolute;top:31px;left:0;width:100%;height:30px;overflow:visible;pointer-events:none}
:is(#personal-detail,.annual-personal) .chart-soil-fill{fill:#d3c39b;opacity:.3}
:is(#personal-detail,.annual-personal) .chart-soil-surface{fill:none;stroke:#a6996b;stroke-width:1}
:is(#personal-detail,.annual-personal) .chart-root-fibres{fill:none;stroke:#887243;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
:is(#personal-detail,.annual-personal) .chart-root-fibres path{stroke-dasharray:100;animation:chart-root-grow 1.2s ease-out both}
:is(#personal-detail,.annual-personal) .chart-root-fibres path:nth-child(n+2){animation-delay:.2s;stroke-width:1.2}
:is(#personal-detail,.annual-personal) .mode-root-main .has-root-motion b{animation:none;transform:none}
:is(#personal-detail,.annual-personal) .mode-root-remnant .has-root-motion b{animation:chart-root-shallow 4.8s ease-in-out infinite}
:is(#personal-detail,.annual-personal) .mode-root-remnant .chart-root-fibres{stroke-width:1.2;stroke:#a18b59}
:is(#personal-detail,.annual-personal) .mode-no-root .has-root-motion b{animation:chart-root-unsteady 4.8s ease-in-out infinite}
@keyframes chart-root-grow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes chart-root-gust{0%,22%{stroke-dashoffset:100;opacity:0}32%{opacity:.85}66%{stroke-dashoffset:-100;opacity:.75}76%,100%{stroke-dashoffset:-100;opacity:0}}
@keyframes chart-root-shallow{0%,28%,78%,100%{transform:rotate(0)}40%{transform:rotate(3deg)}50%{transform:rotate(-2deg)}61%{transform:rotate(2deg)}70%{transform:rotate(-1deg)}}
@keyframes chart-root-unsteady{0%,26%,88%,100%{transform:translateX(0) rotate(0)}39%{transform:translateX(4px) rotate(15deg)}49%{transform:translateX(-2px) rotate(-9deg)}60%{transform:translateX(5px) rotate(18deg)}72%{transform:translateX(-2px) rotate(-8deg)}81%{transform:translateX(1px) rotate(4deg)}}
@media(prefers-reduced-motion:reduce){.reading-chart-context *,.reading-chart-context *::before,.reading-chart-context *::after{animation:none!important;transition:none!important}}