/* Local, finite architecture comparison. No canvas or scroll-controlled scene. */
.federation-section{padding-bottom:0}
.federation-heading{display:grid;grid-template-columns:1.15fr 1fr;gap:70px;align-items:end;margin-bottom:35px}
.federation-heading>p{max-width:440px;font-size:18px;line-height:1.6;color:var(--muted);padding-bottom:3px}
.federation-card{background:radial-gradient(ellipse at 96% 0%,#f4dfd280,transparent 55%),#efeaf2;border:1px solid #e5dce9}
.federation-toolbar{margin:0 35px;padding:24px 0;border-bottom:1px solid #dcd1e3;display:flex;align-items:center;justify-content:space-between;gap:24px}
.federation-state-label{font-size:18px;letter-spacing:-.025em;line-height:1.3;color:#47334f}
.federation-switch{display:flex;padding:4px;gap:3px;background:#e7e0e8;border:1px solid #dad0de;border-radius:99px;flex:none}
.federation-switch button{border:0;background:transparent;color:#68596f;font-size:12px;min-height:44px;padding:10px 20px;border-radius:99px;transition:background .2s,color .2s}
.federation-switch button[aria-pressed=true]{background:#3f2857;color:#fff;box-shadow:0 2px 5px #2816350c}
.federation-switch button:hover:not([aria-pressed=true]){background:#fff6}
.federation-switch button:focus-visible{outline-offset:1px}
.federation-comparison{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,1.7fr);align-items:center;min-height:453px;padding:8px 18px 8px 35px}
.federation-details{padding:20px 18px 20px 0}
.federation-details ol{list-style:none;margin:0;padding:0;display:grid;gap:31px}
.federation-details li{display:flex;align-items:start;gap:16px}
.federation-details li>span{font-size:10px;line-height:1.5;margin-top:3px;color:#8c739b;flex:none}
.federation-details h4{font-size:23px;letter-spacing:-.03em;line-height:1.1;color:#3f2b50;margin-bottom:10px}
.federation-details p{font-size:13px;line-height:1.55;color:#736079;max-width:265px}
.federation-art{min-width:0}
.federation-diagram{width:100%;height:auto;display:block;overflow:visible;font-family:Helvetica,Arial,sans-serif}
.federation-diagram text{fill:#55425f;font-size:20px;letter-spacing:-.3px}
.federation-consumers rect,.federation-sources rect{fill:#fdfbfd;stroke:#d7c9e0;stroke-width:1}
.federation-consumers text{font-size:21px;fill:#4a3659}
.federation-diagram .federation-source-caption{font-size:16px;fill:#76627f}
.federation-top-link,.federation-route{stroke:#9f7ec5;stroke-width:1.6;fill:none}
.federation-diagram .federation-flow-label{font-size:17px;fill:#705183;letter-spacing:0}
.federation-cloth-surface{fill:url(#federation-cloth);stroke:#bda2df;stroke-width:.7}
.federation-weft{stroke:url(#federation-thread);stroke-width:.95;opacity:.8}
.federation-warp{stroke:#a27ad1;stroke-width:.65;opacity:.6}
.federation-fabric-name rect{fill:#f1e9f9;stroke:#ae8dd0;stroke-width:1}
.federation-diagram .federation-fabric-name text{font-size:32px;fill:#6242a2;letter-spacing:-1.5px}
.federation-node{fill:#ed790c;stroke:#fcf2e5;stroke-width:1.5}
.federation-stack-art,.federation-copy-link{opacity:0;visibility:hidden}
.federation-stack-art{transform:translateY(12px) scale(.94);transform-origin:360px 270px;transition:opacity .23s,transform .45s cubic-bezier(.2,.7,.2,1),visibility .45s}
.federation-diagram .federation-replica-label{font-size:20px;font-weight:500;fill:#514457;letter-spacing:-.2px}
.federation-replica-image,.federation-source-records{pointer-events:none}
.federation-copy-link{stroke:#a996b5;stroke-width:1.6;transition:opacity .2s,visibility .2s}
.federation-fabric-art{transform-origin:360px 270px;transition:opacity .3s .16s,transform .6s cubic-bezier(.2,.7,.2,1),visibility .3s}
.federation-source-links,.federation-top-link,.federation-glow{transition:opacity .3s,visibility .3s}
[data-architecture=stack] .federation-stack-art,[data-architecture=stack] .federation-copy-link{opacity:1;visibility:visible;transform:none}
[data-architecture=stack] .federation-fabric-art{opacity:0;visibility:hidden;transform:translateY(30px) scaleY(.25);transition:opacity .2s,transform .45s,visibility .45s}
[data-architecture=stack] .federation-source-links,[data-architecture=stack] .federation-top-link,[data-architecture=stack] .federation-glow{opacity:0;visibility:hidden}
.federation-foot{margin:0 35px;padding:21px 0 25px;border-top:1px solid #dcd1e3;display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.federation-foot p{font-size:11px;line-height:1.5;color:#786882}
.federation-foot p:first-child{color:#584464;font-size:12px}
.federation-fallback{margin-top:20px;padding:24px;border:1px solid var(--line);border-radius:20px}
.federation-fallback h3{font-size:20px;margin-bottom:12px}
.federation-fallback p{font-size:13px;color:var(--muted)}
.federation-fallback p+p{margin-top:8px}
.federation-card.is-running .federation-route{stroke-dasharray:1;animation:federation-read .75s .18s ease both}
.federation-card.is-running .federation-top-link{stroke-dasharray:1;animation:federation-read .55s .5s ease both}
.federation-card.is-running .federation-node{animation:federation-node .6s .4s ease both}
@keyframes federation-read{from{stroke-dashoffset:1;opacity:.15}to{stroke-dashoffset:0;opacity:1}}
@keyframes federation-node{from{opacity:.25}to{opacity:1}}
@media(max-width:1100px){
 .federation-heading{gap:42px}.federation-heading>p{font-size:16px}
 .federation-comparison{grid-template-columns:minmax(215px,.85fr) minmax(0,1.7fr);padding-left:28px;padding-right:10px;min-height:420px}
 .federation-toolbar,.federation-foot{margin-inline:28px}
 .federation-details h4{font-size:21px}.federation-details p{font-size:12px}
 .federation-details li{gap:12px}.federation-details ol{gap:27px}
 .federation-switch button{padding-inline:16px}
}
@media(max-width:800px){
 .federation-section{padding-bottom:0}
 .federation-heading{grid-template-columns:1fr;gap:22px;margin-bottom:27px}
 .federation-heading>p{max-width:570px;font-size:16px;padding:0}
 .federation-toolbar{margin-inline:23px;flex-wrap:wrap;gap:19px;padding:23px 0}
 .federation-state-label{font-size:20px}
 .federation-switch{width:100%}.federation-switch button{flex:1;font-size:12px;padding-inline:9px}
 .federation-comparison{grid-template-columns:1fr;min-height:0;padding:15px 0 0}
 .federation-art{grid-row:1;width:min(100%,580px);margin:auto}
 .federation-diagram{width:116%;max-width:none;margin-left:-8%}
 .federation-consumers rect{x:165px;width:390px}
 .federation-consumers text{font-size:28px}
 .federation-sources text{font-size:27px}
 .federation-diagram .federation-source-caption{font-size:24px}
 .federation-diagram .federation-flow-label{font-size:22px}
 .federation-diagram .federation-replica-label{font-size:26px}
 .federation-details{padding:20px 23px 28px;min-height:315px}
 .federation-details ol{gap:22px}
 .federation-details h4{font-size:21px;margin-bottom:7px}
 .federation-details p{font-size:13px;max-width:100%}
 .federation-details li{gap:16px}
 .federation-foot{margin-inline:23px;align-items:start;flex-direction:column;gap:9px;padding:19px 0 22px;min-height:103px}
 .federation-foot p{font-size:11px}.federation-foot p:first-child{font-size:12px}
}
@media(max-width:374px){
 .federation-heading h2{font-size:36px}.federation-heading>p{font-size:15px}
 .federation-toolbar{margin-inline:19px}.federation-switch button{font-size:11px}
 .federation-details{padding-inline:19px;min-height:322px}.federation-details p{font-size:12px}
 .federation-foot{margin-inline:19px;min-height:115px}
}
@media(prefers-reduced-motion:reduce){
 .federation-card *{animation:none!important;transition:none!important}
}