:root{--background:#fff;--foreground:#000;--border:#e2e2e2;--accent:#f5f5f5}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--background);color:var(--foreground);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6}.container{max-width:1000px;margin:0 auto;padding:4rem 2rem}header{text-align:center;margin-bottom:6rem}h1{letter-spacing:-.02em;margin-bottom:1rem;font-size:2.5rem;font-weight:300}h2{text-transform:uppercase;letter-spacing:.1em;margin-bottom:1.5rem;font-size:1.25rem;font-weight:500}.section{margin-bottom:8rem}.architecture-grid{flex-direction:column;align-items:center;gap:2rem;display:flex}.node{border:1px solid var(--foreground);background:var(--background);border-radius:20px;width:100%;max-width:600px;padding:2rem;position:relative}.node-title{margin-bottom:1rem;font-weight:600;display:block}.node-content{font-size:.9rem}.node-content ul{list-style:none}.node-content li{border-bottom:1px dashed #eee;padding:.25rem 0}.connector{background:var(--foreground);width:2px;height:40px}.data-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2rem;display:grid}.card{border:1px solid var(--border);border-radius:12px;padding:1.5rem;transition:border-color .2s}.card:hover{border-color:var(--foreground)}.card h3{margin-bottom:1rem;font-size:1.1rem;font-weight:600}.card code{opacity:.7;margin-top:.5rem;font-family:monospace;font-size:.8rem;display:block}.footer{text-align:center;opacity:.5;margin-top:10rem;font-size:.8rem}@media (width<=600px){h1{font-size:1.75rem}.node{padding:1.5rem}}