.tether { color: var(--ink); background: var(--ice); }
.tether :focus-visible { outline-color: var(--cobalt); }
.tether .eyebrow { color: var(--cobalt); }
.tether-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 56px; }
.tether-copy p { margin-bottom: 28px; color: #405573; font-size: 1.05rem; }
.tether-flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 30px; border: 1px solid #D4E0EF; border-radius: 20px; background: var(--paper); }
.tether-node { display: grid; place-items: center; min-height: 92px; padding: 18px; border: 1px solid rgb(25 82 232 / 30%); border-radius: 14px; color: var(--cobalt); background: #F5F8FF; font-weight: 700; text-align: center; }
.tether-connector { position: relative; padding: 8px 16px; color: #526782; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.72rem; text-align: center; }
.tether-connector::before, .tether-connector::after { position: absolute; top: 50%; width: 20%; height: 1px; content: ""; background: var(--cyan); }
.tether-connector::before { left: 0; }
.tether-connector::after { right: 0; }

@media (prefers-reduced-motion: no-preference) {
  html.io .tether-flow { transition-delay: 100ms; }
}

@media (max-width: 900px) {
  .tether-layout { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 520px) {
  .tether-flow { padding: 20px; }
  .tether-connector::before, .tether-connector::after { width: 8%; }
}