*{margin:0;padding:0;box-sizing:border-box}body{margin:0;font-family:Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#root{min-height:100vh}@keyframes gridPulse{0%,to{opacity:.1}50%{opacity:.3}}@keyframes flowPulse{0%{stroke-dashoffset:1000}to{stroke-dashoffset:0}}@keyframes nodePulse{0%,to{transform:scale(1)}50%{transform:scale(1.01)}}@keyframes packetFlow1{0%{top:5%;left:50%;opacity:0}10%{opacity:1}25%{top:20%;left:20%}40%{top:38%;left:35%}55%{top:56%;left:50%}70%{top:74%;left:30%}85%{top:92%;left:50%;opacity:1}to{top:92%;left:50%;opacity:0}}@keyframes packetFlow2{0%{top:5%;left:50%;opacity:0}10%{opacity:1}25%{top:20%;left:80%}40%{top:38%;left:65%}55%{top:56%;left:50%}70%{top:74%;left:70%}85%{top:92%;left:50%;opacity:1}to{top:92%;left:50%;opacity:0}}@keyframes packetFlow3{0%{top:38%;left:35%;opacity:0}10%{opacity:1}40%{top:56%;left:50%}70%{top:74%;left:30%}90%{top:92%;left:50%;opacity:1}to{top:92%;left:50%;opacity:0}}@keyframes packetFlow4{0%{top:38%;left:65%;opacity:0}10%{opacity:1}40%{top:56%;left:50%}70%{top:74%;left:70%}90%{top:92%;left:50%;opacity:1}to{top:92%;left:50%;opacity:0}}@keyframes pulseDot{0%,to{transform:scale(1);box-shadow:0 0 #10b981b3}50%{transform:scale(1.1);box-shadow:0 0 0 10px #10b98100}}@keyframes labelFade{0%,to{opacity:.5}50%{opacity:1}}.architecture-grid{position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(rgba(102,126,234,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(102,126,234,.1) 1px,transparent 1px);background-size:50px 50px;animation:gridPulse 3s ease-in-out infinite;pointer-events:none}.flow-lines line.flow-line{stroke-dasharray:5,5;animation:flowPulse 3s linear infinite}.flow-lines text.flow-label{animation:labelFade 2s ease-in-out infinite}.architecture-node{animation:nodePulse 6s ease-in-out infinite;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .6s cubic-bezier(.4,0,.2,1)}.architecture-node.active{animation:none;filter:brightness(1.1)}.data-packet{position:absolute;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle,#667eea,#764ba2);box-shadow:0 0 15px #667eeacc;pointer-events:none;z-index:5}.packet-1{animation:packetFlow1 8s ease-in-out infinite;animation-delay:0s}.packet-2{animation:packetFlow2 8s ease-in-out infinite;animation-delay:2s}.packet-3{animation:packetFlow3 6s ease-in-out infinite;animation-delay:1s}.packet-4{animation:packetFlow4 6s ease-in-out infinite;animation-delay:3s}.performance-indicator{display:flex;align-items:center;padding:8px 12px;background:#0f172acc;border-radius:20px;border:1px solid rgba(16,185,129,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.pulse-dot{width:10px;height:10px;border-radius:50%;animation:pulseDot 2s ease-in-out infinite}.architecture-node:hover~.data-packet{animation-play-state:paused}@media(max-width:900px){.architecture-node{width:100px!important;height:70px!important}.architecture-node Typography{font-size:.75rem!important}.flow-lines text{font-size:8px!important}}@media(max-width:600px){.architecture-node{width:80px!important;height:60px!important}.flow-lines text{display:none}}@keyframes connectionGlow{0%,to{filter:drop-shadow(0 0 2px rgba(102,126,234,.5))}50%{filter:drop-shadow(0 0 8px rgba(102,126,234,.9))}}.flow-lines{animation:connectionGlow 3s ease-in-out infinite}