.ffd-widget { --ffd-teal: #137b78; --ffd-orange: #ac501c; margin: 1.5rem auto; color: var(--bs-body-color, #252b30); }
.ffd-widget h4 { margin: 0 0 .8rem; font-size: 1.08rem; }
.ffd-control[hidden] { display: none; }
.ffd-control label { display: inline-flex; align-items: center; gap: .55rem; padding: .35rem 0; font-size: .9rem; cursor: pointer; }
.ffd-control input { width: 1.1rem; height: 1.1rem; accent-color: var(--ffd-teal); }
.ffd-control input:focus-visible { outline: 3px solid var(--ffd-teal); outline-offset: 3px; }
.ffd-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; margin: .6rem 0 .8rem; font-size: .78rem; }
.ffd-positive-key, .ffd-negative-key { display: inline-flex; align-items: center; gap: .35rem; }
.ffd-positive-key::before, .ffd-negative-key::before { content: ""; display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: var(--ffd-teal); }
.ffd-negative-key::before { background: var(--ffd-orange); }
.ffd-lattices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.ffd-lattices section { min-width: 0; }
.ffd-lattices h5 { font-size: 1rem; text-align: center; margin: .2rem 0 .7rem; }
.ffd-lattices svg { display: block; width: 100%; height: auto; overflow: hidden; }
.ffd-edges { stroke: currentColor; stroke-width: 1; opacity: .17; transition: opacity .25s; }
.ffd-node { transition: opacity .25s; }
.ffd-positive circle { fill: var(--ffd-teal); }
.ffd-negative circle { fill: var(--ffd-orange); }
.ffd-node .ffd-outline { fill: none; stroke: currentColor; stroke-width: 1.5; }
.ffd-sign { fill: white; font: 600 17px system-ui, sans-serif; }
.ffd-label { fill: currentColor; font: 12px system-ui, sans-serif; }
.ffd-sample-only .ffd-unsampled { opacity: 0; pointer-events: none; }
.ffd-sample-only .ffd-edges { opacity: .045; }
.ffd-readout { font-size: .88rem; line-height: 1.5; min-height: 1.5em; margin: .7rem 0; }
.ffd-widget figcaption { font-size: .78rem; color: var(--bs-secondary-color, #555); }
body.quarto-dark .ffd-widget { --ffd-teal: #70ccc1; --ffd-orange: #f0ac79; }
body.quarto-dark .ffd-sign { fill: #17212b; }
@media (max-width: 540px) {
  .ffd-lattices { grid-template-columns: 1fr; gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ffd-node, .ffd-edges { transition: none; }
}
@media print {
  .ffd-control { display: none; }
}