.connection-explorer { margin: 40px 0; scroll-margin-top: 110px; }
.connection-explorer-heading { margin-bottom: 22px; }
.connection-explorer-heading .eyebrow { margin-bottom: 14px; }
.connection-explorer-heading h3 { font: 400 38px/1.12 var(--serif); margin: 0 0 14px; letter-spacing: -.025em; }
.connection-explorer-heading > p:last-child { margin: 0; font-size: 14px; }
.connection-lab { background: var(--dark); color: var(--mint); border-radius: 3px; overflow: hidden; }
.connection-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid #a4bba52b; }
.connection-strategy { display: flex; align-items: center; gap: 10px; padding: 19px 16px; background: #102019; color: #b4c6ba; border: 0; border-right: 1px solid #a4bba52b; text-align: left; line-height: 1.4; font-size: 12px; }
.connection-strategy:last-child { border-right: 0; }
.connection-strategy:hover { background: #203a2d; }
.connection-strategy[aria-pressed="true"] { background: #bce4bb; color: var(--ink); }
.connection-strategy:focus-visible { position: relative; outline: 2px solid #e4b979; outline-offset: -4px; }
.connection-strategy small { display: block; margin-top: 4px; font-size: 10px; opacity: .85; }
.connection-number { border: 1px solid currentColor; border-radius: 50%; width: 24px; height: 24px; display: grid; place-items: center; font-size: 9px; flex-shrink: 0; opacity: .75; }
.connection-topline { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 22px 22px 8px; font-size: 9px; letter-spacing: .1em; color: #a9bab2; }
.connection-topline label { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0; cursor: pointer; }
.connection-topline input { width: 16px; height: 16px; accent-color: var(--mint); cursor: pointer; }
.connection-topline input:focus-visible { outline: 2px solid #e4b979; outline-offset: 4px; }
.connection-diagram { padding: 0 12px; }
.connection-diagram svg, .connection-diagram img { display: block; width: 100%; height: auto; }
.connection-diagram svg text { font-size: 19px; letter-spacing: 0; }
.connection-diagram svg > text:last-child { display: none; }
.connection-explanation { display: flex; align-items: flex-start; gap: 20px; padding: 24px; border-top: 1px solid #a4bba52b; min-height: 145px; }
.connection-explanation-index { font: 38px/1 var(--serif); color: #8daa94; }
.connection-explanation h4 { margin: 0 0 9px; color: #e5eee5; font-size: 16px; font-weight: 500; line-height: 1.45; letter-spacing: -.015em; }
.connection-explanation p { margin: 0; color: #a9bab2; font-size: 12px; line-height: 1.75; }
.connection-explorer figcaption { margin-top: 15px; color: var(--muted); font-size: 12px; line-height: 1.7; }
@media (max-width: 680px) {
  .connection-explorer { scroll-margin-top: 95px; }
  .connection-explorer-heading h3 { font-size: 33px; }
  .connection-controls { grid-template-columns: 1fr; }
  .connection-strategy { padding: 15px 18px; border-right: 0; border-bottom: 1px solid #a4bba52b; gap: 14px; min-height: 67px; }
  .connection-strategy:last-child { border-bottom: 0; }
  .connection-topline { padding: 18px 16px 5px; font-size: 8px; gap: 8px 16px; }
  .connection-topline label { font-size: 10px; }
  .connection-diagram { padding: 10px 0; }
  .connection-diagram svg { min-height: 190px; }
  .connection-diagram svg text { font-size: 23px; }
  .connection-explanation { padding: 20px; gap: 15px; min-height: 172px; }
  .connection-explanation-index { font-size: 32px; }
  .connection-explanation h4 { font-size: 15px; }
  .connection-explanation p { font-size: 12px; }
}