/* Same form, one substance. The formula map is drawn in the page, not on a canvas: the chain at the root, four trunks
   of the core beneath it, the thirteen equations as buttons on their trunks, and a panel with the selected
   equation's reading and its links. Blue marks what an equation derives from, brass what it leads to. */
#figure { scroll-margin-top: 1.25rem; }
.fm { position: relative; padding: 1.25rem 1.1rem 1rem; font-family: var(--font-ui); }
.fm-root { position: relative; z-index: 1; display: block; margin: 0 auto; max-width: 31rem; width: 100%; text-align: center; background: var(--paper); border: 1px solid var(--ink-3); border-radius: var(--radius); padding: .6rem 1rem .65rem; cursor: pointer; font: inherit; color: var(--ink); }
.fm-root b { display: block; font-weight: 600; font-size: .98rem; letter-spacing: .01em; }
.fm-root span { display: block; font-family: var(--font-text); font-size: 1.14rem; margin-top: .2rem; }
.fm-root i { position: absolute; right: .6rem; top: .45rem; font-style: normal; font-size: .78rem; color: var(--ink-3); }
.fm-root[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--port-3); border-color: var(--port-3); }
.fm-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 .9rem; margin-top: 1.5rem; padding-top: 1.15rem; }
.fm-grid::before { content: ""; position: absolute; top: 0; left: 12.5%; right: 12.5%; border-top: 1.5px solid var(--rule); }
.fm-grid::after { content: ""; position: absolute; top: -1.5rem; left: 50%; height: 1.5rem; border-left: 1.5px solid var(--rule); }
.fm-col { position: relative; display: flex; flex-direction: column; gap: .75rem; }
.fm-col::before { content: ""; position: absolute; top: -1.15rem; bottom: 1.2rem; left: 50%; border-left: 1.5px solid var(--rule); z-index: 0; }
.fm-trunk { position: relative; z-index: 1; background: var(--paper-3); border: 1px solid var(--rule); border-radius: var(--radius); padding: .5rem .55rem .55rem; text-align: center; min-height: 3.6rem; display: flex; flex-direction: column; justify-content: center; }
.fm-trunk b { display: block; font-weight: 600; font-size: .93rem; color: var(--ink); line-height: 1.2; }
.fm-trunk span { display: block; font-size: .8rem; color: var(--ink-3); margin-top: .2rem; }
.fm-eq { position: relative; z-index: 1; display: block; width: 100%; text-align: center; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: .6rem .45rem .62rem; cursor: pointer; color: var(--ink); line-height: 1.3; }
.fm-eq .fm-n { display: block; font-family: var(--font-ui); font-size: .78rem; font-weight: 600; color: var(--ink-3); margin-bottom: .15rem; }
.fm-eq .fm-f { display: block; font-family: var(--font-text); font-size: 1.02rem; overflow-wrap: anywhere; }
.fm-eq:hover { border-color: var(--ink-3); }
.fm-eq:focus-visible, .fm-root:focus-visible, .fm-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.fm-eq.is-from { border-color: var(--space); background: var(--space-soft); }
.fm-eq.is-to { border-color: var(--matter); background: var(--matter-soft); }
.fm-eq[aria-pressed="true"] { border-color: var(--port-3); box-shadow: inset 0 0 0 2px var(--port-3); background: var(--paper); }
.fm-key { margin: 1rem 0 0; font-size: .86rem; color: var(--ink-3); text-align: center; }
.fm-key .k-from { color: var(--space); font-weight: 600; }
.fm-key .k-to { color: var(--matter); font-weight: 600; }
.fm-detail { border-top: 1px solid var(--rule); background: var(--paper); padding: 1rem 1.15rem 1.15rem; min-height: 15rem; }
.fm-detail h4 { margin: .15rem 0 .35rem; font-family: var(--font-ui); font-size: 1.12rem; font-weight: 600; color: var(--ink); }
.fm-detail p { margin: .45rem 0 0; font-family: var(--font-text); font-size: 1.02rem; line-height: 1.5; color: var(--ink); max-width: 48rem; }
.fm-detail .fm-kicker { margin: 0; font-family: var(--font-ui); font-size: .82rem; color: var(--ink-3); letter-spacing: .01em; }
.fm-detail .fm-eqline { font-size: 1.15rem; margin-top: .2rem; }
.fm-rel { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .9rem; margin-top: .8rem; font-family: var(--font-ui); font-size: .9rem; }
.fm-rel-k { flex: 0 0 auto; min-width: 6.4rem; font-weight: 600; color: var(--ink-2); }
.fm-rel.from .fm-rel-k { color: var(--space); }
.fm-rel.to .fm-rel-k { color: var(--matter); }
.fm-rel-i { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; }
.fm-rel-t { color: var(--ink-3); }
.fm-chip { font-family: var(--font-ui); font-size: .88rem; font-weight: 500; color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule); border-radius: 999px; padding: .2rem .65rem; cursor: pointer; }
.fm-rel.from .fm-chip { border-color: var(--space); }
.fm-rel.to .fm-chip { border-color: var(--matter); }
.fm-chip:hover { background: var(--paper-3); }
@media (max-width: 860px) {
  .fm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem .8rem; }
  .fm-grid::before { left: 25%; right: 25%; }
  .fm-col::before { bottom: 1.2rem; }
  .fm-col:nth-child(n+3)::before { top: 0; }
}
@media (max-width: 699px) {
  .fm { padding: 1rem .7rem .9rem; }
  .fm-root span { font-size: 1.02rem; }
  .fm-eq .fm-f { font-size: .95rem; }
  .fm-trunk b { font-size: .88rem; }
  .fm-detail { padding: .9rem .85rem 1rem; min-height: 18rem; }
}