.how-hero{position:relative;overflow:hidden}.how-hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(620px 280px at 18% 8%,rgba(34,211,238,.12),transparent 70%),radial-gradient(680px 320px at 84% 0,rgba(79,140,255,.15),transparent 70%)}.how-hero .container{position:relative;z-index:1}.how-card-mark{display:inline-block;width:36px;height:4px;border-radius:999px;background:var(--accent-gradient);margin-bottom:16px}.how-layers{display:flex;flex-direction:column;gap:14px;max-width:900px;margin:0 auto}.how-layer{border-radius:var(--radius);background:var(--bg-card);padding:18px 22px;border:1px solid var(--border);border-left:4px solid var(--border-strong);transition:border-color .18s ease,background .18s ease}.how-layer:hover{background:var(--bg-card-hover)}.how-layer--entry{border-left-color:#4f8cff}.how-layer--app{background:rgba(34,211,238,.06);border-color:rgba(34,211,238,.3) rgba(34,211,238,.3) rgba(34,211,238,.3) #22d3ee}.how-layer--cap{border-left-color:#8b5cf6}.how-layer--infra{border-left-color:#64748b}.how-layer-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:12px}.how-layer-name{font-size:15px;font-weight:800;letter-spacing:.03em;background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;white-space:nowrap}.how-layer-role{font-size:13px;color:var(--text-muted)}.how-layer-modules{display:flex;flex-wrap:wrap;gap:8px}.how-module{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;font-size:13px;color:var(--text);background:rgba(255,255,255,.045);border:1px solid var(--border);transition:border-color .15s ease,background .15s ease}.how-module:hover{border-color:var(--border-strong);background:rgba(255,255,255,.07)}.how-layers-note{max-width:900px;margin:28px auto 0;font-size:14.5px;color:var(--text-muted);text-align:center}.how-sub-title{font-size:22px;letter-spacing:-.01em;text-align:center;margin:0 0 32px}.how-flow-grid{margin-top:56px}.how-cta{text-align:center;background:radial-gradient(560px 240px at 50% 100%,rgba(79,140,255,.14),transparent 70%);border-top:1px solid var(--border)}.how-cta .section-subtitle{margin-bottom:32px}@media (max-width:768px){.how-layer{padding:14px 16px}.how-layer-head{flex-direction:column;gap:4px;align-items:flex-start}.how-sub-title{font-size:19px}}.how-figure{margin:0 0 40px}.how-figure--spaced{margin-top:48px;margin-bottom:0}.how-diagram-pair{display:flex;flex-wrap:wrap;gap:24px;align-items:stretch}.how-diagram-pair>figure{flex:1 1 420px;min-width:0;margin:0;display:flex;flex-direction:column}.how-diagram-pair .mermaid{flex:1 1}@media (max-width:768px){.how-diagram-pair{flex-direction:column}.how-diagram-pair>figure{flex-basis:auto}}