.five-phase-explorer{border:1px solid var(--rule);border-radius:var(--radius-atlas);background:var(--panel);color:var(--ink);margin:1.5rem 0;padding:1.5rem}.five-phase-explorer h2{margin:.5rem 0;font-size:1.5rem}.five-phase-explorer p{line-height:1.7}.five-phase-layout{grid-template-columns:minmax(260px,360px) minmax(220px,1fr);align-items:center;gap:1.75rem;display:grid}.five-phase-layout figure{margin:0}.five-phase-layout svg{width:100%;max-width:360px;margin:auto;display:block}.five-phase-cycle{flex-wrap:wrap;justify-content:center;gap:.5rem;margin:.8rem 0;display:flex}.five-phase-cycle button{border:1px solid var(--rule-strong);border-radius:var(--radius-atlas);background:var(--panel);padding:.55rem .8rem;font-size:.875rem}.five-phase-cycle button[aria-pressed=true]{color:#fff;background:var(--selected);border-color:var(--mark)}.five-phase-cycle button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.five-phase-arrow{stroke:var(--ink-2);color:var(--ink-3);stroke-width:1.6px}.five-phase-arrow.is-active{stroke:var(--soft);color:var(--ink);stroke-width:3px}.five-phase-node circle{stroke:var(--rule-strong);stroke-width:1px}.five-phase-node circle.is-reference{stroke:var(--soft);stroke-width:5px;paint-order:stroke fill}.five-phase-node circle.is-compared{stroke:var(--ink);stroke-width:3px}.five-phase-node text{fill:var(--panel);font-size:25px;font-weight:600}.five-phase-node .five-phase-name{stroke:var(--ink-2);stroke-width:5px;paint-order:stroke fill;stroke-linejoin:round;font-size:16px}.phase-wood circle{fill:var(--wood)}.phase-fire circle{fill:var(--fire)}.phase-earth circle{fill:var(--earth)}.phase-metal circle{fill:var(--metal)}.phase-water circle{fill:var(--water)}.five-phase-layout figcaption{color:var(--ink-2);font-size:.875rem;line-height:1.6}.five-phase-reading h3{color:var(--mark);margin:1rem 0 .4rem;font-size:1.35rem}.five-phase-reference{border-left:1px solid var(--rule-strong);background:var(--panel);border-radius:0 var(--radius-atlas) var(--radius-atlas) 0;padding:.8rem 1rem}.five-phase-reading .related-links{gap:.5rem}.five-phase-reading .related-links a{font-size:.875rem}.five-phase-explorer .field{flex:1}.five-phase-explorer .field-label{font-size:.875rem}@media (max-width:850px){.five-phase-layout{grid-template-columns:1fr;gap:1rem}.five-phase-explorer{padding:1rem}.five-phase-reading{min-width:0}}