/* Original ellipse identity; each connector count uses only occupied rings. */
.integration-orbit { --io-max:1180px; --io-aspect:1430/820; --io-size:58px; --io-core-size:64px; --io-core-width:148px; max-width:1180px; margin:0 auto; color:var(--body); }
.io-layout-solo { --io-max:380px; --io-aspect:1430/760; --io-size:52px; --io-core-size:56px; --io-core-width:128px; }
.io-layout-small { --io-max:620px; --io-aspect:1430/760; --io-size:52px; }
.io-layout-medium { --io-max:840px; --io-size:56px; }
.io-plot { position:relative; isolation:isolate; width:100%; max-width:var(--io-max); aspect-ratio:var(--io-aspect); margin:0 auto; }
.io-connections { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; mask-image:radial-gradient(ellipse calc(var(--io-core-width)/2 + 12px) calc(var(--io-core-size)/2 + 36px) at 50% 50%,transparent 76%,#000 100%); }
.io-connection { fill:none; stroke:var(--zen-green-600); stroke-width:1; vector-effect:non-scaling-stroke; stroke-linecap:round; opacity:.2; transition:opacity .2s,stroke-width .2s; }
/* Names, nodes and existing note links identify the same visual connection. */
.integration-orbit:has([data-io-index="0"]:is(:hover,:focus-within,:target)) [data-io-link="0"],
.integration-orbit:has([data-io-index="1"]:is(:hover,:focus-within,:target)) [data-io-link="1"],
.integration-orbit:has([data-io-index="2"]:is(:hover,:focus-within,:target)) [data-io-link="2"],
.integration-orbit:has([data-io-index="3"]:is(:hover,:focus-within,:target)) [data-io-link="3"],
.integration-orbit:has([data-io-index="4"]:is(:hover,:focus-within,:target)) [data-io-link="4"],
.integration-orbit:has([data-io-index="5"]:is(:hover,:focus-within,:target)) [data-io-link="5"],
.integration-orbit:has([data-io-index="6"]:is(:hover,:focus-within,:target)) [data-io-link="6"],
.integration-orbit:has([data-io-index="7"]:is(:hover,:focus-within,:target)) [data-io-link="7"],
.integration-orbit:has([data-io-index="8"]:is(:hover,:focus-within,:target)) [data-io-link="8"],
.integration-orbit:has([data-io-index="9"]:is(:hover,:focus-within,:target)) [data-io-link="9"],
.integration-orbit:has([data-io-index="10"]:is(:hover,:focus-within,:target)) [data-io-link="10"],
.integration-orbit:has([data-io-index="11"]:is(:hover,:focus-within,:target)) [data-io-link="11"],
.integration-orbit:has([data-io-index="12"]:is(:hover,:focus-within,:target)) [data-io-link="12"],
.integration-orbit:has([data-io-index="13"]:is(:hover,:focus-within,:target)) [data-io-link="13"],
.integration-orbit:has([data-io-index="14"]:is(:hover,:focus-within,:target)) [data-io-link="14"],
.integration-orbit:has([data-io-index="15"]:is(:hover,:focus-within,:target)) [data-io-link="15"],
.integration-orbit:has([data-io-index="16"]:is(:hover,:focus-within,:target)) [data-io-link="16"] { opacity:.72; stroke-width:1.5; }
.io-rings { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.io-ring { fill:none; stroke:var(--line-strong); stroke-width:1.2; stroke-dasharray:5 8; opacity:.75; }
.io-center { position:absolute; z-index:1; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:12px; width:var(--io-core-width); text-align:center; }
.io-center-logo { display:grid; place-items:center; width:var(--io-core-size); height:var(--io-core-size); }
.io-brand-logo { display:block; width:var(--io-core-size); height:var(--io-core-size); object-fit:contain; }
.io-center-name { font:700 .8125rem/1.3 var(--font-display); color:var(--muted); }
.io-nodes { list-style:none; padding:0; margin:0; }
.io-node { position:absolute; z-index:2; left:var(--io-x); top:var(--io-y); width:var(--io-size); height:var(--io-size); transform:translate(-50%,-50%); }
.io-node-body { display:grid; place-items:center; width:var(--io-size); height:var(--io-size); border-radius:50%; color:inherit; text-decoration:none; }
.io-node-noted .io-node-body { width:max(44px,var(--io-size)); height:max(44px,var(--io-size)); margin:min(0px,calc((var(--io-size) - 44px)/2)); }
.io-node-face { display:grid; place-items:center; position:relative; width:var(--io-size); height:var(--io-size); border:1px solid var(--line); border-radius:50%; background:var(--surface); box-shadow:var(--sh-md); transition:box-shadow .3s var(--ease-custom),border-color .3s; }
.io-node-logo { display:block; width:60%; height:60%; object-fit:contain; }
.io-node-logo.io-logo-wide { width:78%; height:52%; }
.io-node-logo.io-logo-padded { width:86%; height:82%; }
.io-node-face:has(>.io-logo-on-dark) { background:#181818; border-color:#303030; }
.io-node-logo.io-logo-on-dark { width:86%; height:86%; border-radius:50%; }
.io-node-name { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.io-node-body:hover .io-node-face,.io-node-body:focus-visible .io-node-face { border-color:var(--zen-green-300); box-shadow:var(--sh-brand); }
a.io-node-body:focus-visible { outline:2px solid var(--zen-green-700); outline-offset:4px; }
.io-note-mark { position:absolute; top:-3px; right:-3px; display:grid; place-items:center; width:16px; height:16px; border-radius:50%; background:var(--zen-green-50); border:2px solid var(--surface); color:var(--zen-green-700); font:700 .6rem/1 var(--font-body); }
.io-name-index { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 24px; margin:24px auto; padding:0; max-width:880px; list-style:none; }
.io-name-index li { color:var(--body); font:500 .75rem/1.5 var(--font-body); }
.io-layout-solo .io-name-index,.io-layout-small .io-name-index { margin-block:16px 20px; }
.io-conditions { display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:center; list-style:none; padding:16px 24px; margin:0 auto; max-width:880px; border-radius:18px; background:var(--zen-green-50); }
.io-conditions li { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; font:400 .75rem/1.5 var(--font-body); color:var(--body); scroll-margin-top:110px; }
.io-conditions strong { font-weight:500; color:var(--zen-green-700); }
.io-conditions li:target,.io-conditions li:focus { outline:2px solid var(--zen-green-300); outline-offset:4px; border-radius:6px; }
@keyframes io-node-enter { from { opacity:.65; } to { opacity:1; } }
@keyframes io-ring-enter { from { opacity:.25; } to { opacity:.75; } }
@keyframes io-connection-enter { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@media (prefers-reduced-motion:no-preference) and (hover:hover) {
  .io-node-body { animation:io-node-enter .6s both; animation-delay:calc(var(--io-i)*35ms); }
  .io-ring { animation:io-ring-enter 1.2s ease-out 1; }
  .io-connection { stroke-dasharray:1; animation:io-connection-enter .8s ease-out both; animation-delay:calc(var(--io-i)*18ms); }
}
@media(max-width:1023px) {
  .integration-orbit { --io-core-size:56px; --io-core-width:128px; }
  .io-layout-solo,.io-layout-small { --io-size:48px; }
  .io-layout-medium { --io-max:540px; --io-aspect:1430/1150; --io-size:44px; }
  .io-layout-large { --io-max:420px; --io-aspect:1430/2000; --io-size:40px; --io-core-width:112px; }
  .io-plot { width:calc(100% - 32px); }
  .io-center { gap:8px; }
  .io-name-index { max-width:520px; gap:8px 16px; margin:24px auto; }
  .io-name-index li { font-size:.72rem; }
  .io-conditions { padding:16px; gap:12px 24px; }
  .io-conditions li { flex:1 1 160px; font-size:.72rem; }
}
@media(max-width:479px) {
  .integration-orbit { --io-core-size:48px; }
  .io-layout-solo,.io-layout-small { --io-aspect:1430/900; --io-size:44px; --io-core-width:112px; }
  .io-layout-medium { --io-aspect:1430/1450; --io-size:40px; --io-core-width:104px; }
  .io-layout-large { --io-size:32px; --io-core-width:88px; }
  .io-center-name { font-size:.75rem; }
  .io-layout-large .io-center-name { font-size:.6875rem; }
  .io-name-index { gap:8px 14px; }
  .io-name-index li { font-size:.6875rem; }
  .io-note-mark { width:14px; height:14px; top:-4px; right:-4px; font-size:.55rem; }
}
@media(prefers-reduced-motion:reduce) {
  .io-ring,.io-node-body,.io-connection { animation:none!important; }
  .io-node-face,.io-connection { transition:none; }
}