.architecture{padding:1rem;background:#0f171f;border:1px solid var(--line-dark);border-radius:var(--radius-lg)}.architecture__tabs{display:flex;flex-wrap:wrap;gap:.35rem;padding:.4rem;margin-bottom:1rem;background:rgba(255,255,255,.035);border-radius:10px}.architecture__tab{flex:1;min-width:85px;padding:.65rem .7rem;background:0 0;color:#7f8e9c;border:0;border-radius:7px;font:.62rem/1 var(--font-mono);text-transform:uppercase;cursor:pointer}.architecture__tab:hover,.architecture__tab.is-active{background:#1d2a36;color:var(--signal)}.architecture__canvas{position:relative;min-height:470px;overflow:hidden;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:20px 20px;border-radius:12px}.architecture__canvas:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,23,31,.95),transparent 35%,transparent 65%,rgba(15,23,31,.95));pointer-events:none}.arch-node{position:absolute;z-index:2;display:grid;place-content:center;min-width:105px;min-height:56px;padding:.6rem;background:#16232e;color:#a4b0bb;border:1px solid rgba(255,255,255,.1);border-radius:10px;font:.65rem/1.35 var(--font-mono);text-align:center;transition:.25s ease}.arch-node.is-active{color:var(--white);border-color:var(--signal);box-shadow:0 0 0 4px rgba(51,214,177,.08),0 10px 30px rgba(0,0,0,.3)}.arch-node[data-node=edge]{top:8%;left:50%;transform:translateX(-50%)}.arch-node[data-node=app]{top:31%;left:50%;transform:translateX(-50%)}.arch-node[data-node=compute]{top:54%;left:33%;transform:translateX(-50%)}.arch-node[data-node=events]{top:54%;left:67%;transform:translateX(-50%)}.arch-node[data-node=data]{top:78%;left:33%;transform:translateX(-50%)}.arch-node[data-node=workers]{top:78%;left:67%;transform:translateX(-50%)}.arch-side{position:absolute;z-index:2;left:1rem;bottom:1rem;padding:.65rem .8rem;color:#8493a1;border-left:2px solid var(--blue);font:.58rem/1.5 var(--font-mono)}.arch-side--right{left:auto;right:1rem;border-left-color:var(--warning)}.arch-line{position:absolute;z-index:1;width:2px;background:#334554;transform-origin:top;transition:background-color .2s ease,box-shadow .2s ease}.arch-line.is-active{background:var(--signal);box-shadow:0 0 12px rgba(51,214,177,.6)}.arch-line--1{top:20%;left:50%;height:12%}.arch-line--2{top:43%;left:50%;height:13%;transform:rotate(47deg)}.arch-line--3{top:43%;left:50%;height:13%;transform:rotate(-47deg)}.arch-line--4{top:65%;left:33%;height:14%}.arch-line--5{top:65%;left:67%;height:14%}.data-pipeline{display:grid;gap:.9rem}.pipeline-stage{position:relative;display:grid;grid-template-columns:8rem 1fr;gap:1rem;align-items:center;min-height:88px;padding:1rem;background:var(--white);border:1px solid var(--line);border-radius:var(--radius)}.pipeline-stage:not(:last-child):after{content:"↓";position:absolute;z-index:2;bottom:-1.4rem;left:4.7rem;color:var(--signal-dark);font-family:var(--font-mono)}.pipeline-stage__label{color:var(--muted);font:.65rem/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.pipeline-nodes{display:flex;flex-wrap:wrap;gap:.45rem}.pipeline-node{position:relative;overflow:hidden;flex:1;min-width:90px;padding:.65rem;background:var(--paper);border:1px solid var(--line);border-radius:7px;font-size:.72rem;text-align:center}.pipeline-node:before{content:"";position:absolute;top:0;left:-35%;width:30%;height:2px;background:var(--signal-dark);animation:pipeline-pulse 4s linear infinite}.pipeline-stage:nth-child(2) .pipeline-node:before{animation-delay:.7s}.pipeline-stage:nth-child(3) .pipeline-node:before{animation-delay:1.4s}.pipeline-stage:nth-child(4) .pipeline-node:before{animation-delay:2.1s}.pipeline-stage:nth-child(5) .pipeline-node:before{animation-delay:2.8s}@keyframes pipeline-pulse{to{left:110%}}@media (max-width:600px){.architecture__canvas{min-height:620px}.arch-node[data-node]{left:50%;transform:translateX(-50%)}.arch-node[data-node=edge]{top:4%}.arch-node[data-node=app]{top:20%}.arch-node[data-node=compute]{top:36%}.arch-node[data-node=events]{top:52%}.arch-node[data-node=data]{top:68%}.arch-node[data-node=workers]{top:84%}.arch-line{display:none}.arch-side{display:none}.pipeline-stage{grid-template-columns:1fr}.pipeline-stage:not(:last-child):after{left:50%}}