/* Circular highlights keep the editable illustration fully visible. */
.connection-thread{display:block;width:100%;height:auto;aspect-ratio:1200/110;overflow:visible;pointer-events:none;margin:8px 0 10px}
.connection-thread path{fill:none;stroke:#9da694;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:round}
.connection-thread-tails{opacity:.3}
.connection-thread-baseline{opacity:.3}
.connection-thread-layers{opacity:.24}
.connection-thread-route{opacity:.75}
.connection-thread-socket{fill:var(--paper);stroke:#9da694;stroke-width:.65;vector-effect:non-scaling-stroke}
.connection-thread-stop{fill:var(--selection-accent);stroke:var(--selection-shade);stroke-width:.8;vector-effect:non-scaling-stroke}
.connection-thread-traveler{color:var(--selection-shade,#97732a);opacity:.5;transition:opacity .2s}
.connection-thread-halo{fill:var(--selection-accent,#e4c26f);fill-opacity:.22;stroke:currentColor;stroke-width:.7;vector-effect:non-scaling-stroke}
.connection-thread-dot{fill:var(--selection-accent,#e4c26f);stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
.connection-figure[data-connection-active]:not([data-connection-active=""]) .connection-thread-traveler{opacity:1}
.connection-scene{position:relative;isolation:isolate;overflow:visible;background:var(--paper)}
.connection-scene>img{display:block;width:100%;height:auto;aspect-ratio:12/5;object-fit:contain;mix-blend-mode:multiply}
.connection-traces{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.connection-traces>[data-connection-trace]{opacity:0;transition:opacity .16s ease}
.connection-traces{filter:drop-shadow(0 1px 2px #173424b3)}
.focus-highlight-line{fill:none;stroke:var(--selection-shade);stroke-width:1.25;vector-effect:non-scaling-stroke}
.connection-orbit{fill:none;stroke:var(--selection-shade);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.connection-orbit-echo-near{stroke-width:1.5;opacity:.46}
.connection-orbit-echo-far{stroke-width:1.15;opacity:.23}
.connection-orbit-register{fill:none;stroke:var(--selection-shade);stroke-width:1;stroke-linecap:round;opacity:.38}
.connection-orbit-halo{fill:var(--selection-accent);fill-opacity:.17;stroke:var(--selection-shade);stroke-opacity:.35;stroke-width:.8}
.connection-orbit-dot{fill:var(--selection-accent);stroke:var(--selection-shade);stroke-width:1.6}
.connection-orbit-pinhole{fill:var(--paper);stroke:none}
.connection-figure[data-connection-orbit=listen] [data-connection-trace=listen],.connection-figure[data-connection-orbit=explore] [data-connection-trace=explore],.connection-figure[data-connection-orbit=connect] [data-connection-trace=connect]{opacity:1}
.connection-figure figcaption{gap:12px;padding-top:0;border-top:0}
.connection-choice{position:relative;min-width:0;min-height:82px;padding:13px 9px 14px 10px;text-align:left;cursor:default;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;transition:background .2s}
.connection-figure .connection-choice strong{display:flex;align-items:center;gap:8px;font-weight:500;font-size:13px;color:var(--forest)}
.connection-choice strong i{display:block;flex:0 0 7px;width:7px;height:7px;border:1px solid #8d9987;border-radius:50%;transition:background .18s,border-color .18s,box-shadow .18s}
.connection-choice[data-active=true]{background:linear-gradient(110deg,color-mix(in srgb,var(--selection-accent) 32%,var(--paper)),transparent 85%);box-shadow:none}
.connection-choice[data-active=true] span{color:var(--forest)}
.connection-choice[data-active=true] strong i{background:var(--selection-accent);border-color:var(--selection-shade);box-shadow:none}
.connection-choice:not(:disabled):hover strong,.connection-choice[data-active=true] strong,.connection-choice:focus-visible strong{color:var(--forest);font-weight:700}
.connection-choice:focus-visible{outline:2px solid var(--selection-shade);outline-offset:3px}
.connection-choice:disabled{cursor:default;opacity:1}
@media(max-width:560px){.connection-choice{padding-top:12px;min-height:88px}.connection-choice strong{gap:6px}.connection-figure figcaption{gap:8px}.connection-choice strong i{flex-basis:6px;width:6px;height:6px}.connection-orbit-primary{stroke-width:3.8}.connection-orbit-echo-near{stroke-width:2}.connection-orbit-echo-far{stroke-width:1.5}}
@media(prefers-reduced-motion:reduce){.connection-traces g,.connection-traces path,.connection-choice,.connection-choice strong i,.connection-thread-traveler{transition:none}}
@media(forced-colors:active){.connection-traces,.connection-thread{display:none}.connection-choice[data-active=true]{border-color:Highlight}.connection-choice[data-active=true] strong i{background:Highlight;border-color:Highlight;box-shadow:none}}

/* Open editorial tabs echo the route without enclosing each choice in a card. */
.connection-choice::after{content:"";position:absolute;left:0;bottom:-1px;width:26px;height:2px;background:var(--selection-shade);opacity:.6;transition:width .24s ease,opacity .2s}
.connection-choice:hover::after,.connection-choice[data-active=true]::after,.connection-choice:focus-visible::after{width:100%;opacity:1}
.connection-choice:hover:not([data-active=true]){background:linear-gradient(110deg,color-mix(in srgb,var(--selection-accent) 18%,var(--paper)),transparent 85%)}
@media(prefers-reduced-motion:reduce){.connection-choice::after{transition:none}}
@media(forced-colors:active){.connection-choice[data-active=true]{border-bottom:3px solid Highlight}.connection-choice::after{background:CanvasText}}