.flow{display:grid;gap:.8rem}.flow>div{padding:1rem;border-radius:12px;border:1px solid var(--line-on-dark);background:#ffffff0e}.flow .avato{background:linear-gradient(160deg,var(--avato-blue),#202fae)}.principles,.operations,.scope,.product-model,.deploy{display:grid;gap:1rem;margin-top:2rem}.principles{grid-template-columns:repeat(3,1fr)}.principles article,.scope article,.product-model article{padding:1.4rem;border:1px solid var(--line);border-radius:var(--radius);background:#fff}.operations{grid-template-columns:repeat(4,1fr)}.operations article{padding:1.4rem;border:1px solid var(--line-on-dark);border-radius:var(--radius);background:#ffffff0e}.scope{grid-template-columns:repeat(3,1fr)}.product-model{grid-template-columns:repeat(4,1fr)}.deploy{grid-template-columns:repeat(4,1fr)}.deploy div{padding:1rem;border:1px solid var(--line-on-dark);border-radius:14px;text-align:center;background:#ffffff0e}.product-example{margin-top:2rem;border-radius:var(--radius);overflow:hidden;background:#111520;color:#d8dfec;border:1px solid #2c3446}.product-example>div{display:grid;grid-template-columns:220px 1fr}.product-example aside,.product-example pre{margin:0;padding:1rem;font:.8rem/1.65 ui-monospace,SFMono-Regular,Menlo,monospace}.product-example aside{border-right:1px solid #2c3446;color:#aeb8ca}.product-example pre{white-space:pre-wrap}@media(max-width:900px){.principles,.operations,.scope,.product-model{grid-template-columns:1fr 1fr}.deploy{grid-template-columns:1fr 1fr}}@media(max-width:620px){.principles,.operations,.scope,.product-model,.deploy,.product-example>div{grid-template-columns:1fr}.product-example aside{border-right:0;border-bottom:1px solid #2c3446}}