/* Two calm, connected layers: BubbleBeer inside, company systems outside. */
.connected-cosmos { margin: 2.5rem 0 0; border: 1px solid var(--line); border-radius: 1.5rem; background: color-mix(in srgb,var(--panel) 82%,transparent); overflow: hidden; }
.connected-cosmos .connected-cosmos__bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--line); }
.connected-cosmos .connected-cosmos__world-label { color: var(--text); font-size: .95rem; font-weight: 600; }
.connected-cosmos .connected-cosmos__interfaces { color: var(--muted); font-size: .8rem; }
.connected-cosmos .connected-cosmos__universe { position: relative; width: 100%; aspect-ratio: 1000 / 760; min-height: 760px; background: radial-gradient(ellipse 33% 35% at 50% 52%,color-mix(in srgb,var(--text) 5%,transparent),transparent); }
.connected-cosmos .connected-cosmos__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.connected-cosmos .connected-cosmos__orbit { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.connected-cosmos .connected-cosmos__orbit--outer { stroke-dasharray: 4 8; opacity: .65; }
.connected-cosmos .connected-cosmos__orbit--inner { stroke-width: 1.5; opacity: .8; }
.connected-cosmos .connected-cosmos__link { fill: none; stroke: var(--muted); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .25; }
.connected-cosmos .connected-cosmos__link--inner { opacity: .35; }
.connected-cosmos .connected-cosmos__signal { fill: var(--stinvar-accent); opacity: .8; }
.connected-cosmos .connected-cosmos__surface-label { position: absolute; top: 25%; left: 50%; transform: translate(-50%,-50%); width: 240px; text-align: center; }
.connected-cosmos .connected-cosmos__surface-label strong { display: block; color: var(--text); font-size: 1rem; line-height: 1.35; }
.connected-cosmos .connected-cosmos__surface-label span { display: block; color: var(--muted); font-size: .8rem; margin-top: .3rem; }
.connected-cosmos .connected-cosmos__node { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; width: 138px; min-height: 80px; padding: .8rem .5rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--panel); color: var(--text); text-align: center; }
.connected-cosmos .connected-cosmos__node svg { flex: 0 0 auto; width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.connected-cosmos .connected-cosmos__node span { font-size: .85rem; line-height: 1.35; font-weight: 500; overflow-wrap: anywhere; }
.connected-cosmos .connected-cosmos__node--external { width: 152px; background: var(--panel); color: var(--muted); border-style: dashed; }
.connected-cosmos .connected-cosmos__core { position: absolute; left: 50%; top: 52%; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; width: 132px; text-align: center; }
.connected-cosmos .connected-cosmos__core img { width: 92px; height: 92px; object-fit: contain; border-radius: 50%; background: var(--panel); box-shadow: 0 0 0 1px var(--line),0 0 40px color-mix(in srgb,var(--stinvar-accent) 8%,transparent); }
.connected-cosmos .connected-cosmos__core strong { margin-top: .6rem; font-size: 1.15rem; }
.connected-cosmos .connected-cosmos__core span { color: var(--muted); font-size: .75rem; margin-top: .2rem; line-height: 1.3; }
.connected-cosmos .connected-cosmos__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media(max-width:1000px) { .connected-cosmos .connected-cosmos__node { width: 112px; } .connected-cosmos .connected-cosmos__node--external { width: 128px; } .connected-cosmos .connected-cosmos__surface-label { width: 200px; } }
@media(max-width:620px) {
 .connected-cosmos .connected-cosmos__bar { padding: 1rem; }
 .connected-cosmos .connected-cosmos__universe { aspect-ratio: auto; height: 760px; min-height: 0; }
 .connected-cosmos .connected-cosmos__node, .connected-cosmos .connected-cosmos__node--external { width: 94px; min-height: 80px; padding: .65rem .3rem; gap: .4rem; border-radius: .8rem; }
 .connected-cosmos .connected-cosmos__node svg { width: 23px; height: 23px; }
 .connected-cosmos .connected-cosmos__node span { font-size: .7rem; hyphens: auto; }
 .connected-cosmos .connected-cosmos__surface-label { width: 150px; }
 .connected-cosmos .connected-cosmos__surface-label strong { font-size: .8rem; }
 .connected-cosmos .connected-cosmos__surface-label span { font-size: .7rem; }
 .connected-cosmos .connected-cosmos__core { width: 82px; }
 .connected-cosmos .connected-cosmos__core img { width: 66px; height: 66px; }
 .connected-cosmos .connected-cosmos__core strong { font-size: 1rem; }
 .connected-cosmos .connected-cosmos__core span { font-size: .68rem; }
}
@media(max-width:360px) { .connected-cosmos .connected-cosmos__node, .connected-cosmos .connected-cosmos__node--external { width: 76px; } .connected-cosmos .connected-cosmos__surface-label { width: 130px; } }
@media(prefers-reduced-motion:reduce) { .connected-cosmos .connected-cosmos__signal { display: none; } }

/* Shared portrait and communication-channel presentation. */
.connected-cosmos .connected-cosmos__core { width: 128px; }
.connected-cosmos .connected-cosmos__core img { width: 128px; height: auto; aspect-ratio: 280 / 355; border-radius: .9rem; object-fit: contain; }
.connected-cosmos .connected-cosmos__core strong { margin-top: .35rem; }
.connected-cosmos .connected-cosmos__node--communication { min-height: 90px; }
.connected-cosmos .susi-channels { display: flex; gap: .6rem; align-items: flex-start; justify-content: center; width: 100%; }
.connected-cosmos .susi-channel { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.connected-cosmos .susi-channel svg { width: 23px; height: 23px; }
.connected-cosmos .susi-channel small { font-size: .55rem; font-weight: 400; line-height: 1.3; white-space: nowrap; color: var(--muted); }
@media(max-width:620px) {
 .connected-cosmos .connected-cosmos__core { width: 80px; }
 .connected-cosmos .connected-cosmos__core img { width: 80px; }
 .connected-cosmos .connected-cosmos__node--communication { width: 112px; min-height: 90px; }
 .connected-cosmos .susi-channels { gap: .35rem; }
 .connected-cosmos .susi-channel svg { width: 22px; height: 22px; }
 .connected-cosmos .susi-channel small { font-size: .52rem; }
}
.connected-cosmos { min-width:0; width:100%; max-width:100%; } .susi-story-cosmos { min-width:0; width:100%; }
@media(max-width:360px) {
 .connected-cosmos .connected-cosmos__node--communication { width: 98px; }
 .connected-cosmos .susi-channels { gap: .2rem; }
 .connected-cosmos .susi-channel small { font-size: .47rem; }
}
.connected-cosmos { min-width:0; width:100%; max-width:100%; } .susi-story-cosmos { min-width:0; width:100%; }
@media(max-width:360px) { .connected-cosmos .connected-cosmos__surface-label { width:110px; } .connected-cosmos .connected-cosmos__core { width:70px; } .connected-cosmos .connected-cosmos__core img { width:70px; } }

/* Communication is one proportional, in-flow grid inside its own tile. */
.connected-cosmos .connected-cosmos__node--communication { container-type: inline-size; }
.connected-cosmos .susi-channels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; gap:clamp(2px,3cqi,7px); align-items:start; }
.connected-cosmos .susi-channel { display:flex; flex-direction:column; align-items:center; gap:clamp(2px,2cqi,4px); width:100%; min-width:0; max-width:100%; position:static; }
.connected-cosmos .susi-channel svg { display:block; width:clamp(14px,22cqi,25px); max-width:100%; height:auto; aspect-ratio:1; position:static; }
.connected-cosmos .susi-channel small { display:block; width:100%; min-width:0; font-size:clamp(5.5px,6cqi,9px); line-height:1.3; white-space:nowrap; text-align:center; position:static; }

/* First live module: one native link, a calm breathing edge, and clear keyboard/touch access. */
.connected-cosmos .connected-cosmos__node--live{cursor:pointer;text-decoration:none;border-color:var(--stinvar-accent);box-shadow:0 0 12px color-mix(in srgb,var(--stinvar-accent) 14%,transparent);transition:transform .2s ease,box-shadow .2s ease;isolation:isolate}
.connected-cosmos .connected-cosmos__node--live::after{content:'';position:absolute;inset:-1px;border:1px solid var(--stinvar-accent);border-radius:inherit;pointer-events:none;animation:calendar-live-edge 6s ease-in-out infinite}
.connected-cosmos .connected-cosmos__node--live .connected-cosmos__live-label{font-size:.65rem;font-weight:600;line-height:1.2;color:var(--stinvar-accent);white-space:nowrap}
.connected-cosmos .connected-cosmos__node--live:hover,.connected-cosmos .connected-cosmos__node--live:focus-visible{transform:translate(-50%,-50%) translateY(-2px);box-shadow:0 0 20px color-mix(in srgb,var(--stinvar-accent) 28%,transparent)}
.connected-cosmos .connected-cosmos__node--live:hover::after,.connected-cosmos .connected-cosmos__node--live:focus-visible::after{animation:none;opacity:1;box-shadow:0 0 8px color-mix(in srgb,var(--stinvar-accent) 35%,transparent)}
.connected-cosmos .connected-cosmos__node--live:focus-visible{outline:2px solid var(--stinvar-accent);outline-offset:3px}
@keyframes calendar-live-edge{0%,100%{opacity:.4;box-shadow:0 0 4px color-mix(in srgb,var(--stinvar-accent) 10%,transparent)}50%{opacity:.85;box-shadow:0 0 12px color-mix(in srgb,var(--stinvar-accent) 22%,transparent)}}
@media(prefers-reduced-motion:reduce){.connected-cosmos .connected-cosmos__node--live{transition:none}.connected-cosmos .connected-cosmos__node--live::after{animation:none;opacity:.7}.connected-cosmos .connected-cosmos__node--live:hover,.connected-cosmos .connected-cosmos__node--live:focus-visible{transform:translate(-50%,-50%)}}