.chart-diagram { margin: 20px 0 24px; padding: 20px 14px 16px; border: 1px solid #e4d9f3; border-radius: 20px; background: linear-gradient(155deg,#fff 15%,#f6f2fc 100%); color: #30243f; }
.chart-diagram-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 4px; }
.chart-diagram-heading h3 { margin: 0; font-size: 18px; font-weight: 600; }
.chart-diagram-heading > span { color: #78658d; font-size: 11px; text-align: right; }
.chart-diagram-board { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1; margin: 16px auto; isolation: isolate; }
.chart-diagram-orbit { position: absolute; inset: 21%; border: 1px solid #e8dff3; border-radius: 50%; }
.chart-diagram-orbit::after { content: ''; position: absolute; inset: 18%; border: 1px dashed #e8dff3; border-radius: 50%; }
.chart-diagram-line { position: absolute; height: 1px; color: #d9cbed; opacity: .35; transform-origin: left center; pointer-events: none; }
.chart-diagram-line.is-active { z-index: 1; height: 2px; color: #9164c5; opacity: 1; }
.chart-diagram-node { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; box-sizing: border-box; width: 34%; height: 28%; margin: 0; padding: 6px 2px; transform: translate(-50%,-50%); border: 1px solid var(--element-border,#e4d9f3); border-radius: 15px; background: var(--element-soft,#fff); color: #51405f; line-height: 1.3; cursor: pointer; }
.chart-diagram-node.is-emphasis { border-color: var(--element-border,#bea4df); background: var(--element-soft,#f1eafa); box-shadow: inset 0 -2px 0 #cbb7e3; }
.chart-diagram-node[aria-pressed="true"] { border-color: #673acb; background: #673acb; color: #fff; box-shadow: 0 5px 15px #673acb26; }
.chart-diagram-node-label { font-size: 11px; }
.chart-diagram-node-value { color: var(--element-ink,#673acb); font-family: 'Songti SC','STSong',serif; font-size: 28px; font-weight: 600; }
.chart-diagram-node-star { font-size: 12px; }
.chart-diagram-node-meta { padding: 0 5px; border-radius: 6px; background: var(--element-soft,transparent); color: var(--element-ink,#78658d); font-size: 10px; }
.chart-diagram-node[aria-pressed="true"] .chart-diagram-node-value { color: inherit; }
.chart-diagram-side { position: absolute; top: -5px; transform: translateX(-50%); color: #78658d; font-size: 12px; }
.chart-diagram-match .chart-diagram-board { margin-top: 32px; }
.chart-diagram-match .chart-diagram-node { width: 31%; height: 19%; border-radius: 12px; gap: 1px; padding: 3px 1px; }
.chart-diagram-match .chart-diagram-node-value { font-size: 23px; }
.chart-diagram-match .chart-diagram-node-star { font-size: 10px; }
.chart-diagram-match .chart-diagram-node-label { font-size: 10px; }
.chart-diagram-match .chart-diagram-node-meta { display: none; }
.chart-diagram-annual .chart-diagram-node { width: 23%; height: 27%; gap: 4px; }
.chart-diagram-annual .chart-diagram-node-label,.chart-diagram-annual .chart-diagram-node-star { font-size: 10px; }
.chart-diagram-annual .chart-diagram-node-value { font-size: 25px; }
.chart-diagram-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
.chart-diagram-link { flex: 1 1 120px; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid #e4d9f3; border-radius: 12px; background: #fff; color: #51405f; text-align: left; font-size: 12px; line-height: 1.6; }
.chart-diagram-link strong { color: #673acb; font-size: 12px; font-weight: 500; }
.chart-diagram-link[aria-pressed="true"] { border-color: #a58bc7; background: #f0e7fb; }
.chart-diagram-detail { padding: 15px 4px 0; border-top: 1px solid #e4d9f3; }
.chart-diagram-detail h4 { margin: 0 0 8px; color: #673acb; font-size: 15px; font-weight: 600; line-height: 1.7; }
.chart-diagram-detail p { margin: 8px 0 0; font-size: 13px; line-height: 1.85; }
.chart-diagram-detail p.chart-diagram-detail-meta { margin-bottom: 10px; color: #78658d; font-size: 11px; }
.chart-diagram-caption { margin: 14px 4px 0; color: #78658d; font-size: 11px; line-height: 1.7; }
.chart-diagram-node:focus-visible,.chart-diagram-link:focus-visible { outline: 2px solid #673acb; outline-offset: 4px; }
.chart-diagram-digits { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 4px; margin: 22px 0 14px; }
.chart-diagram-digit { padding: 6px 0; border: 1px solid transparent; border-radius: 9px; background: #f1edf8; text-align: center; }
.chart-diagram-digit strong { display: block; color: #51405f; font-size: 20px; font-weight: 600; }
.chart-diagram-digit small { display: block; color: #78658d; font-size: 9px; white-space: nowrap; }
.chart-diagram-digit.is-modifier strong { color: #9c6d2d; }
.chart-diagram-digit.is-selected { border-color: #a58bc7; background: #e9ddf7; }
.chart-diagram-scroll { overflow-x: auto; padding: 5px 4px 12px; margin: 0 -4px 12px; }
.chart-diagram-chain { display: flex; align-items: center; gap: 8px; width: max-content; min-width: 100%; }
.chart-diagram-chain .chart-diagram-node { position: static; flex: 0 0 106px; width: 106px; height: auto; min-height: 130px; padding: 12px 8px; transform: none; gap: 8px; }
.chart-diagram-chain .chart-diagram-node-label { font-size: 15px; overflow-wrap: anywhere; }
.chart-diagram-chain .chart-diagram-node-value { font-size: 25px; }
.chart-diagram-chain .chart-diagram-node-meta { max-width: 100%; white-space: normal; line-height: 1.6; }
.chart-diagram-chain-arrow { color: #a58bc7; }