/* Living materials, two complementary directed cycles, and a harmony crest. */
.wuxing-reading-grid{grid-template-columns:1.45fr 1fr;gap:38px;align-items:stretch}
.wuxing-feature.feature-reading{padding:0;display:block;background:#faf6e9;border:1px solid #cdbf9f;min-height:0;--sinh:#dfc07a;--khac:#a8d8f4;--harmony:0}
.wuxing-feature .wuxing-visual{position:relative;padding:25px 24px 17px;background:radial-gradient(ellipse at 50% 50%,#153137,#07191f 80%);color:#f2e5c3;overflow:hidden}
.wuxing-kicker{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:8px;letter-spacing:1.6px;color:#ceaf71;font-weight:600}
.wuxing-kicker>span:last-child{font-size:6px;letter-spacing:1.2px;color:#9eac9d;font-weight:400}
.wuxing-phase-heading{display:flex;align-items:center;justify-content:space-between;margin-top:22px;border-bottom:1px solid #baa46a40;padding-bottom:13px}
.wuxing-phase-label{font:27px var(--serif);letter-spacing:-.3px;color:var(--sinh);transition:color .6s}
.wuxing-phase-counter{font:italic 12px var(--serif);letter-spacing:2px;color:#b6a576}
.wuxing-feature[data-phase=khac] .wuxing-phase-label{color:var(--khac)}
.wuxing-stage{width:100%;max-width:650px;aspect-ratio:1;margin:8px auto 3px;position:relative}
.wuxing-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.wuxing-element-labels{position:absolute;inset:0;pointer-events:none}
.wuxing-element-name{position:absolute;transform:translate(-50%,-50%);font:650 13px/1.2 var(--sans);letter-spacing:1.3px;color:#e3e6d4;text-shadow:0 1px 4px #031014,0 0 9px #031014;white-space:nowrap;transition:color .4s,text-shadow .4s}
.wuxing-element-name.is-awake{color:var(--element-tone);text-shadow:0 0 10px color-mix(in srgb,var(--element-tone) 30%,transparent)}
.wuxing-harmony{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:var(--harmony);font:600 clamp(14px,1.7vw,24px)/1 var(--serif);color:#fff0c5;text-shadow:0 0 10px #e9c171;pointer-events:none}
.wuxing-stage>.wuxing-relationships{position:absolute;top:2%;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;z-index:2}
.wuxing-fact{width:28%;min-width:0;padding:11px 5px;text-align:center;background:#081b21c4;border:1px solid #b5995c42;opacity:.6;transition:opacity .5s,border-color .5s}
.wuxing-fact>span{font:600 8px var(--sans);letter-spacing:1px;color:var(--sinh)}
.wuxing-fact strong{display:block;font:23px var(--serif);color:#e5e8da;margin:7px 0 3px;white-space:nowrap}
.wuxing-fact strong i{font:11px var(--sans);font-style:normal;color:var(--sinh);margin:0 4px}
.wuxing-fact small{font:7px/1.7 var(--sans);color:#a3ad9b;white-space:nowrap}
.wuxing-fact--khac{border-color:#87adc442}.wuxing-fact--khac>span,.wuxing-fact--khac strong i{color:var(--khac)}
.wuxing-feature[data-phase=sinh] .wuxing-fact--sinh,.wuxing-feature[data-phase=khac] .wuxing-fact--khac,.wuxing-feature[data-phase=hoa] .wuxing-fact{opacity:1;border-color:#c8b07a99}
.wuxing-cycle-legend{display:flex;justify-content:center;gap:22px;margin:0 0 13px;font-size:9px;letter-spacing:.3px}
.wuxing-cycle-legend>span{display:flex;align-items:center;gap:6px;color:#acb4a5;opacity:.5;transition:opacity .5s}
.wuxing-cycle-legend i{width:14px;height:1px;background:var(--sinh)}
.wuxing-cycle-legend [data-legend=khac] i{background:var(--khac)}.wuxing-cycle-legend [data-legend=hoa] i{width:6px;height:6px;border-radius:50%;background:#e5c780}
.wuxing-feature[data-phase=sinh] [data-legend=sinh],.wuxing-feature[data-phase=khac] [data-legend=khac],.wuxing-feature[data-phase=hoa] [data-legend=hoa]{opacity:1;color:#e5d8ad}
.wuxing-action{font:10px/1.7 var(--sans);text-align:center;color:#c5cebf;min-height:18px;margin:0 0 14px}
.wuxing-phase-progress{height:2px;background:#8b805733;overflow:hidden}
.wuxing-phase-progress>span{display:block;width:100%;height:100%;background:var(--sinh);transform:scaleX(0);transform-origin:left}
.wuxing-feature[data-phase=khac] .wuxing-phase-progress>span{background:var(--khac)}
.wuxing-bottomline{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:12px;font:8px/1.5 var(--sans);color:#9eae9d}
.wuxing-bottomline>span{display:flex;align-items:center;gap:7px}.wuxing-live-dot{width:4px;height:4px;background:#b9c58b;border-radius:50%;box-shadow:0 0 5px #b9c58b55}
.wuxing-play{border:0;background:none;color:#cfcdaf;font:inherit;display:flex;align-items:center;gap:8px;padding:5px 0;white-space:nowrap}.wuxing-play:disabled{opacity:.5}
.wuxing-still .wuxing-live-dot{background:#7f8d7d;box-shadow:none}
.wuxing-editorial{padding:23px 25px 20px;position:relative;background:#faf6e9;border-top:1px solid #d8cdb5}
.wuxing-category{display:block;font-size:8px;font-weight:500;letter-spacing:1.3px;color:#8c7446}
.wuxing-editorial h3{font-size:28px;line-height:1.35;max-width:none;margin:11px 0 9px;letter-spacing:-.4px}
.wuxing-editorial .wuxing-insight{font:11px/1.9 var(--sans);color:#747b69;min-height:21px;margin:0}
.wuxing-source{display:inline-block;margin-top:11px;font:8px/1.7 var(--sans);color:#8c7446;text-decoration:underline;text-decoration-color:#c8b892;text-underline-offset:3px}
.wuxing-read{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:9px;border-top:1px solid #dbd1b9;padding-top:13px;margin-top:17px;color:#5c6858}
.wuxing-reading-grid>.reading-list{justify-content:space-between}.wuxing-reading-grid>.reading-list .reading-row{flex:1;padding:27px 0}.wuxing-reading-grid>.reading-list .reading-row h3{font-size:23px;line-height:1.45}
@media(max-width:1000px){.wuxing-reading-grid{gap:26px}.wuxing-feature .wuxing-visual{padding-left:19px;padding-right:19px}.wuxing-fact strong{font-size:19px}.wuxing-fact>span{font-size:7px}.wuxing-fact small{font-size:6px}.wuxing-element-name{font-size:11px}.wuxing-cycle-legend{gap:15px;font-size:8px}}
@media(max-width:850px) and (min-width:621px){.wuxing-reading-grid{grid-template-columns:1.4fr 1fr}.wuxing-fact{padding:8px 3px}.wuxing-fact strong{font-size:15px}.wuxing-fact strong i{margin:0 1px;font-size:8px}.wuxing-fact small{display:none}.wuxing-fact>span{font-size:6px}.wuxing-kicker>span:last-child{font-size:5px;letter-spacing:.4px}.wuxing-phase-label{font-size:22px}.wuxing-reading-grid>.reading-list .reading-row h3{font-size:20px}}
@media(max-width:620px){.wuxing-reading-grid{grid-template-columns:minmax(0,1fr);gap:25px}.wuxing-feature .wuxing-visual{padding:20px 13px 14px}.wuxing-kicker{font-size:7px;letter-spacing:1px}.wuxing-kicker>span:last-child{font-size:5px;letter-spacing:.3px}.wuxing-phase-heading{margin-top:18px;padding-bottom:11px}.wuxing-phase-label{font-size:24px}.wuxing-phase-counter{font-size:10px}.wuxing-fact{padding:8px 3px;width:29%}.wuxing-fact>span{font-size:6px;letter-spacing:.5px}.wuxing-fact strong{font-size:16px;margin:5px 0 0}.wuxing-fact strong i{font-size:8px;margin:0 1px}.wuxing-fact small{display:none}.wuxing-element-name{font-size:11px;letter-spacing:1px}.wuxing-harmony{font-size:15px}.wuxing-cycle-legend{gap:17px;font-size:8px;margin-bottom:12px}.wuxing-action{font-size:9px;min-height:30px;margin-bottom:10px}.wuxing-bottomline{font-size:7px;gap:8px}.wuxing-editorial{padding:23px}.wuxing-editorial h3{font-size:27px}.wuxing-reading-grid>.reading-list .reading-row{padding:21px 0}.wuxing-reading-grid>.reading-list .reading-row h3{font-size:21px}}
@media(max-width:360px){.wuxing-fact strong{font-size:13px}.wuxing-fact>span{font-size:5.5px;letter-spacing:.15px}.wuxing-element-name{font-size:10px}.wuxing-cycle-legend{gap:12px;font-size:7px}.wuxing-phase-label{font-size:22px}.wuxing-kicker{font-size:6px}.wuxing-kicker>span:last-child{font-size:4.8px}.header{padding:0 16px;gap:8px}.header .wordmark{font-size:17px;letter-spacing:.7px}.header .wordmark small{font-size:5px;letter-spacing:1px}.header-actions{gap:2px}.header-actions .icon-button{width:30px}}
@media(prefers-reduced-motion:reduce){.wuxing-feature *{transition:none!important}}