.stateful-stateless-guide{--guide-color:var(--orange);--guide-color-bg:#f973161a;--guide-color-border:#f9731633}.architecture-section{background:linear-gradient(#ffffff05 0%,#fff0 100%);border:1px solid #ffffff0d;border-radius:1rem;flex-direction:column;gap:2rem;max-width:1000px;margin:0 auto 4rem;padding:2rem;display:flex;position:relative}.architecture-section.stateful{border-color:#f9731633}.architecture-section.stateless{border-color:#22d3ee33}.architecture-title{color:var(--white);align-items:center;gap:1rem;margin-bottom:1rem;font-family:Outfit,sans-serif;font-size:2rem;display:flex}.architecture-content{grid-template-columns:1fr 1fr;gap:2rem;display:grid}@media (max-width:768px){.architecture-content{grid-template-columns:1fr}}.feature-card{background:#ffffff08;border:1px solid #ffffff0d;border-radius:.5rem;padding:1.5rem;transition:all .3s}.feature-card:hover{border-color:var(--guide-color-border);background:#ffffff0d;transform:translateY(-4px)}.feature-icon{margin-bottom:1rem;font-size:2rem;display:block}.simulator-container{background:#0a0e14;border:1px solid #ffffff1a;border-radius:1rem;flex-direction:column;align-items:center;max-width:1000px;min-height:450px;margin:2rem auto;padding:2rem 2rem 3rem;display:flex;position:relative}.simulator-controls{z-index:10;flex-wrap:wrap;justify-content:center;gap:.8rem;width:100%;margin-bottom:1.5rem;display:flex;position:relative}.sim-btn{background:var(--surface);color:var(--text);border:1px solid var(--border2);font-size:.78rem;font-family:var(--font-mono);cursor:pointer;border-radius:8px;align-items:center;gap:.5rem;padding:.5rem 1.1rem;transition:all .2s;display:flex}.sim-btn:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-1px)}.sim-btn.active-stateful{background:var(--orange);color:#000;border-color:var(--orange);font-weight:700}.sim-btn.active-stateless{background:var(--cyan);color:#000;border-color:var(--cyan);font-weight:700}.sim-icon-btn{background:var(--surface);border:1px solid var(--border);cursor:pointer;width:32px;height:32px;color:var(--text-dim);border-radius:6px;justify-content:center;align-items:center;transition:all .2s;display:flex}.sim-icon-btn:hover{border-color:var(--text);color:var(--text)}.flow-node{background:var(--surface-card);z-index:10;border:1px solid #ffffff1a;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;width:120px;height:80px;transition:all .5s;display:flex;position:absolute}.flow-node.active{border-color:var(--guide-color);box-shadow:0 0 20px var(--guide-color-bg)}.flow-node.server{top:50%;right:50px;transform:translateY(-50%)}.flow-node.client{top:50%;left:50px;transform:translateY(-50%)}.flow-packet{background:var(--guide-color);opacity:0;z-index:5;width:20px;height:20px;box-shadow:0 0 10px var(--guide-color);border-radius:50%;position:absolute;top:50%;left:50px;transform:translateY(-50%)}.packet-label{white-space:nowrap;color:var(--text-secondary);background:#000c;border-radius:4px;padding:2px 6px;font-size:.75rem;position:absolute;top:-25px;left:50%;transform:translate(-50%)}@keyframes moveRight{0%{opacity:1;left:170px}to{opacity:1;left:calc(100% - 170px)}}@keyframes moveLeft{0%{opacity:1;left:calc(100% - 170px)}to{opacity:1;left:170px}}.animate-request{animation:2s ease-in-out forwards moveRight}.animate-response{background:var(--green);animation:2s ease-in-out forwards moveLeft;box-shadow:0 0 10px #4ade8080}.server-memory{color:var(--text-secondary);opacity:0;background:#ffffff1a;border-radius:4px;padding:.25rem .5rem;font-size:.7rem;transition:opacity .3s;position:absolute;top:-40px;right:0}.flow-node.server.has-memory .server-memory{opacity:1}.sim-steps-container{z-index:10;flex-direction:column;gap:.5rem;width:100%;max-width:600px;margin-top:2rem;display:flex}.sim-step{opacity:.5;background:#ffffff08;border:1px solid #0000;border-radius:8px;align-items:center;gap:1rem;padding:.8rem 1rem;transition:all .3s;display:flex}.sim-step.active{opacity:1;background:#22d3ee14;border-color:#22d3ee33}.sim-step.active-stateful{background:#f9731614;border-color:#f9731633}.sim-step-num{border:2px solid var(--text-dim);width:24px;height:24px;color:var(--text-dim);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:.7rem;font-weight:700;display:flex}.sim-step.active .sim-step-num{border-color:var(--cyan);color:var(--cyan);background:#22d3ee1a}.sim-step.active-stateful .sim-step-num{border-color:var(--orange);color:var(--orange);background:#f973161a}.sim-step-text{color:var(--text-dim);font-size:.85rem}.sim-step.active .sim-step-text,.sim-step.active-stateful .sim-step-text{color:var(--text-hi);font-weight:500}.comparison-row{border-bottom:1px solid #ffffff0d;grid-template-columns:1fr 1fr 1fr;gap:1rem;padding:1rem;display:grid}.comparison-header{color:var(--guide-color);font-weight:700}