.wx-scene{--wx-green:#466758;--wx-red:#a04e41;position:relative;margin:8px 0 28px;padding:22px 12px 18px;border-radius:28px;background:var(--fate-paper,#f8f6ef);color:var(--text-strong);overflow:hidden}
.wx-heading{display:flex;align-items:center;justify-content:space-between;padding:0 10px}
.wx-heading h2{margin:0;font-family:var(--font-display);font-size:22.4px;font-weight:400;letter-spacing:.08em}
.wx-heading p{margin:6px 0 0;font-size:12px;color:var(--text-body);letter-spacing:.12em}
.wx-seal{color:var(--fate-seal);border:1px solid currentColor;padding:5px 3px;writing-mode:vertical-rl;font-family:var(--font-display);font-size:14px;line-height:1.1;border-radius:3px;transform:rotate(3deg)}
.wx-diagram{position:relative;aspect-ratio:1;margin:4px -4px 0;isolation:isolate;background:var(--fate-paper,#f8f6ef)}
.wx-ink-ring,.wx-diagram .wx-art{background-image:url('assets/five-elements-atlas.webp');background-size:300% 200%;background-repeat:no-repeat;mix-blend-mode:multiply}
.wx-ink-ring{position:absolute;inset:0;background-position:100% 100%;opacity:.13;animation:wx-orbit 110s linear infinite;pointer-events:none}
.wx-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wx-diagram .wx-edge{transition:opacity 200ms ease}
.wx-diagram .wx-edge path{fill:none;stroke-width:1.05;stroke:var(--wx-green)}
.wx-diagram .wx-edge text{font-size:11px;fill:var(--wx-green);text-anchor:middle;paint-order:stroke;stroke:var(--fate-paper,#f8f6ef);stroke-width:5px;stroke-linejoin:round}
.wx-diagram .wx-ke path{stroke:var(--wx-red);stroke-dasharray:3 4;opacity:.62}
.wx-diagram .wx-ke text{fill:var(--wx-red);font-size:10px}
.wx-diagram .wx-edge.wx-dim{filter:grayscale(1);opacity:.32}
.wx-scene[data-selected]:not([data-selected=""]) .wx-edge:not(.wx-dim) path{opacity:1}
.wx-diagram .wx-node{position:absolute;width:25%;aspect-ratio:1;border:0;padding:0;background:transparent;color:var(--text-strong);cursor:pointer;transform:translate(-50%,-50%);-webkit-tap-highlight-color:transparent;border-radius:50%;mix-blend-mode:multiply}
.wx-diagram .wx-art{position:absolute;inset:0;pointer-events:none}
.wx-diagram .wx-node-name{position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;width:46px;height:48px;font:400 13.6px var(--font-display);line-height:1.25;padding:1px 4px;background:var(--fate-paper,#f8f6ef);border-radius:12px;transition:color 180ms ease}
.wx-diagram .wx-node[aria-pressed=false] .wx-node-name{color:#242620;box-shadow:inset 0 0 0 .5px rgba(50,54,44,.3)}
.wx-percent{display:block;font-family:var(--font-body,system-ui);font-size:9.6px;font-weight:400;font-variant-numeric:tabular-nums;line-height:1.5;letter-spacing:0}
.wx-diagram .wx-node[aria-pressed=true] .wx-node-name{color:var(--fate-seal);box-shadow:0 1px 0 var(--fate-seal)}
.wx-diagram .wx-node:focus-visible{outline:2px solid var(--fate-jade);outline-offset:2px}
.wx-diagram .wx-fire .wx-art{background-position:0 0;transform-origin:50% 80%;animation:wx-flame 3.8s ease-in-out infinite}
.wx-diagram .wx-earth .wx-art{background-position:50% 0}
.wx-diagram .wx-earth::after{content:"";position:absolute;inset:55% 2% 15%;border-radius:50%;background:linear-gradient(90deg,transparent,#f8f6efbf,transparent);animation:wx-mist 9s ease-in-out infinite;pointer-events:none}
.wx-diagram .wx-metal .wx-art{background-position:100% 0}
.wx-diagram .wx-metal::after{content:"";position:absolute;inset:25%;background:radial-gradient(ellipse at 28% 30%,#fff 0 1%,#fff0 6%),radial-gradient(ellipse at 78% 60%,#fffce6 0 2%,#fff0 9%);animation:wx-glint 4.6s ease-in-out infinite;pointer-events:none}
.wx-diagram .wx-water .wx-art{background-position:0 100%;animation:wx-water 12s ease-in-out infinite}
.wx-diagram .wx-wood .wx-art{background-position:50% 100%;transform-origin:50% 90%;animation:wx-bamboo 7s ease-in-out infinite}
.wx-diagram .wx-hint{margin:8px 0 16px;text-align:center;font-size:11px;color:var(--text-body)}
.wx-reading{padding:14px 10px 0;border-top:1px solid var(--line-soft);min-height:70px}
.wx-reading h3{font:400 18px var(--font-display);margin:0 0 6px}
.wx-reading p{font-size:13px;line-height:1.8;margin:0 0 12px;color:var(--text-body)}
.wx-chain{display:flex;align-items:baseline;gap:12px;font-size:13px;line-height:2.1;color:var(--text-body)}
.wx-chain b{font-size:12px;font-weight:500;color:var(--wx-green);white-space:nowrap}
.wx-control b{color:var(--wx-red)}
.wx-chain span{letter-spacing:.02em}
.wx-guidance{margin:18px 10px 0;padding-top:20px;border-top:1px solid var(--line-soft)}
.wx-guidance h3{font-family:var(--font-display);font-size:19px;margin:0 0 5px}
.wx-source{font-size:11px;color:var(--text-body)}
.wx-bullets{padding-left:18px;margin:18px 0 22px}
.wx-bullets li{padding-left:3px;margin:0 0 15px;font-size:14px;line-height:1.8;color:var(--text-body)}
.wx-bullets li::marker{color:var(--fate-jade)}
.wx-bullets strong{display:block;font-size:13px;color:var(--text-strong);margin-bottom:2px}
.wx-guidance .lk-tz{padding:0;background:none}
.wx-guidance .lk-tz-cta{align-items:flex-start}
.wx-full summary{font-size:14px;line-height:1.8}
.wx-full summary span{display:block;font-size:11px;font-weight:400;color:var(--fate-jade)}
.wx-full h4{font-size:15px;margin:20px 0 8px}
.wx-full p{font-size:14px;line-height:1.9;color:var(--text-body)}
.wx-resting *,.wx-resting::after,.wx-hidden *{animation-play-state:paused!important}
.wx-resting .wx-diagram .wx-node::after,.wx-hidden .wx-diagram .wx-node::after{animation-play-state:paused}
@keyframes wx-orbit{to{transform:rotate(360deg)}}
@keyframes wx-flame{0%,100%{transform:rotate(-2deg) scale(.98,1)}50%{transform:rotate(2deg) scale(1.02,.95)}}
@keyframes wx-bamboo{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes wx-water{0%,100%{transform:rotate(-8deg) scale(.96)}50%{transform:rotate(8deg) scale(1)}}
@keyframes wx-glint{0%,35%,100%{opacity:.1;transform:translate(-2px,1px)}55%{opacity:1;transform:translate(2px,-1px)}}
@keyframes wx-mist{0%,100%{opacity:.35;transform:translateX(-5px)}50%{opacity:.8;transform:translateX(5px)}}
@media(prefers-reduced-motion:reduce){.wx-scene *,.wx-scene *::after{animation:none!important;transition:none!important}}
@media(max-width:360px){.wx-chain{font-size:12px;gap:8px}.wx-diagram .wx-node-name{font-size:12.8px}}
/* The upgraded 五行圖 (js/wuxing-chart.js) mounted in this section brings its own plate; the V2 rules above stay scoped to .wx-diagram so they never touch it. */
.wx-scene--chart{padding:0 0 18px;background:none;overflow:visible}

/* Outer stem ring (L 2026-09-26): HTML buttons (2026-09-27) so a tap swaps the stem card; the 日元 keeps its seal-red ring */
.wx-stems{position:absolute;inset:0;pointer-events:none}
.wx-stem{position:absolute;display:flex;flex-direction:column;align-items:center;width:44px;min-height:44px;padding:0 0 6px;border:0;background:none;cursor:pointer;transform:translate(-50%,-11px);pointer-events:auto;-webkit-tap-highlight-color:transparent;color:var(--text-muted,#6b645c);z-index:1}
.wx-stem__g{position:relative;display:block;width:22px;height:22px;font:400 15px/22px var(--font-display);text-align:center;transition:color 200ms ease}
.wx-stem__g::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1.2px currentColor;opacity:0;transition:opacity 200ms ease}
.wx-stem__yy{margin-top:4px;font-size:9.5px;line-height:12px;letter-spacing:.08em;color:var(--text-faint,#8a847a)}
.wx-stem[aria-pressed=true] .wx-stem__g{color:var(--text-strong)}
.wx-stem[aria-pressed=true] .wx-stem__g::before{opacity:.45}
.wx-stem.is-dm .wx-stem__g{color:var(--fate-seal,#b62f23)}
.wx-stem.is-dm .wx-stem__g::before{opacity:1}
.wx-stem:focus-visible{outline:2px solid var(--fate-jade);outline-offset:1px;border-radius:10px}

/* Stem card (L 2026-09-27「我們少了這些咨詢」): V2 日元 card material (.dy-card, app.css) — no frame, no rim */
/* The card's own layout (V2 屬性卡, was app.css .dy-attr … .dy-tr, values unchanged) lives here with the component (2026-09-27), so
   pages without app.css can show it: the onboarding reveal (onboarding.html) loads this file + five-elements.js + js/stem-data.js.
   Tokens it reads: --r-md --font-display --font-latin --text-strong --text-muted --line-soft (css/ob-reveal.css maps them there).
   app.css still carries the old copy (dead on index.html, where this file loads later): delete it on the next app.css bump. */
.dy-attr{flex:1;display:flex;align-items:stretch;gap:13px}
.dy-attr-id{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  background:linear-gradient(160deg,#F0D28C,#C9A227) center/cover;border-radius:var(--r-md);padding:10px 9px;color:#3A2B08}
.dy-attr-id{background-image:url("assets/tex-gold-oil.jpg");background-size:cover;background-position:center}
.dy-attr-id b{font-family:var(--font-display);font-size:17px;font-weight:400;writing-mode:vertical-rl;letter-spacing:3px}
.dy-yy{display:flex;gap:4px}
.dy-yy i{width:9px;height:9px;border-radius:50%;border:1.5px solid #3A2B08}
.dy-yy i.f{background:#3A2B08}
.dy-attr-traits{flex:1;display:flex;flex-direction:column;justify-content:center;
  font-size:15px;line-height:1.85;color:var(--text-strong);font-weight:400;letter-spacing:.12em}
.dy-foot{display:flex;align-items:center;gap:16px;padding:4px 6px 0}
.dy-seal{font-family:var(--font-display);font-size:58px;font-weight:400;color:var(--text-strong);line-height:1;
  text-shadow:0 2px 10px rgba(255,217,142,.25)}
.dy-seal span{display:block;font-size:11px;font-weight:400;color:var(--text-muted);letter-spacing:.1em;margin-top:6px;font-family:var(--font-latin)}
.dy-table{flex:1;font-size:12px}
.dy-tr{display:grid;grid-template-columns:68px 1fr;gap:0 10px;align-items:baseline;padding:7px 0;border-top:1px solid var(--line-soft)}
.dy-tr:first-child{border-top:none}
.dy-tr span{color:var(--text-muted)}
.dy-tr b{color:var(--text-strong);font-weight:500}
.wx-stemlive{margin:14px 6px 4px}
.wx-stemlive:empty{display:none}
.wx-stemcard{padding:14px 16px 16px;animation:wx-card-in 560ms cubic-bezier(.22,1,.36,1) both}
.wx-stemcard__top{display:flex;justify-content:flex-end;min-height:22px;margin:0 0 8px}
.wx-stemcard__mine{font-size:11px;letter-spacing:.12em;color:var(--fate-seal,#b62f23)}
.wx-stemcard__home{min-height:44px;margin:-12px -8px -10px 0;padding:0 8px;border:0;background:none;font:inherit;font-size:11px;letter-spacing:.08em;color:var(--fate-jade);cursor:pointer}
.wx-stemcard .dy-attr{padding:0 4px}
.wx-stemcard .dy-yy i.dim{opacity:.3}
.wx-stemcard.wx-e-earth .dy-attr-id{background-image:url("assets/tex-earth.jpg");color:#2A1A08}
.wx-stemcard.wx-e-water .dy-attr-id{background-image:url("assets/tex-water.jpg");color:#10302B}
.wx-stemcard.wx-e-fire .dy-attr-id{background-image:url("assets/tex-fire.jpg");color:#fff}
.wx-stemcard.wx-e-wood .dy-attr-id{background-image:url("assets/tex-wood.jpg");color:#fff;text-shadow:0 1px 1px rgba(21,23,19,.35)}
.wx-stemcard .dy-attr-id .dy-yy i{border-color:currentColor}
.wx-stemcard .dy-attr-id .dy-yy i.f{background:currentColor}
.wx-stemcard .dy-foot{margin-top:18px}
.wx-stemcard .dy-seal{min-width:64px;text-align:center}
.wx-stemcard .dy-tr b{display:flex;align-items:center;gap:6px}
.wx-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--text-strong)}
.wx-dot.is-yang{background:none;box-shadow:inset 0 0 0 1.3px var(--text-strong)}
.wx-e-metal .wx-dot.is-el{background:#C9A227}.wx-e-earth .wx-dot.is-el{background:#9A6B3A}.wx-e-water .wx-dot.is-el{background:#2F6E78}.wx-e-fire .wx-dot.is-el{background:#B8462E}.wx-e-wood .wx-dot.is-el{background:#4E7A4A}
.wx-stemcard__note{margin:14px 4px 0;font-size:11px;line-height:1.6;color:var(--text-muted)}
@keyframes wx-card-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Element label (L 2026-09-30「把外圈去掉」: the brush ring is gone; only the paper glow stays so the text reads over the ink art; the selected element shows by its seal-red label). History — 2026-09-26 brush ring:「這個格子試試用毛筆風格的圈圈, 能看清楚字就好不需要故意有個很明顯的boarder 和background color」— no box, no border, no fill; a faint paper glow keeps the text readable over the ink art. */
.wx-diagram .wx-node .wx-node-name{width:54px;height:54px;border-radius:50%;box-shadow:none!important;background:radial-gradient(circle,rgba(243,240,231,.78) 0 44%,rgba(243,240,231,0) 70%)}
.wx-diagram .wx-node[aria-pressed=true] .wx-node-name{box-shadow:none!important}
/* Selected element: seal-red label (the red ring went with the ring, L 2026-09-30) */
.wx-diagram .wx-node[aria-pressed=true] .wx-node-name{background:radial-gradient(circle,rgba(243,240,231,.78) 0 44%,rgba(243,240,231,0) 70%)}
.wx-diagram .wx-node[aria-pressed=true] .wx-node-name{box-shadow:none!important}