.architecture-flow:where(.astro-b2mgoyy4){margin:2rem 0;border:1px solid rgba(148,163,184,.22);border-radius:1.35rem;background:radial-gradient(circle at top left,rgba(116,167,255,.14),transparent 34rem),linear-gradient(145deg,#121d30f0,#060a12fa);box-shadow:0 24px 70px #0000003d;overflow:hidden}.architecture-flow__layout:where(.astro-b2mgoyy4){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.9rem;align-items:stretch;max-width:62rem;margin:0 auto;padding:1.35rem}.architecture-flow__card:where(.astro-b2mgoyy4){display:flex;flex-direction:column;min-width:0;padding:1rem;border:1px solid rgba(148,163,184,.18);border-radius:1rem;background:#070d18b8}.architecture-flow__card--invariants:where(.astro-b2mgoyy4){grid-column:1 / -1}.architecture-flow__header:where(.astro-b2mgoyy4){display:grid;grid-template-columns:3rem minmax(0,1fr);gap:.85rem;align-items:start}.architecture-flow__step:where(.astro-b2mgoyy4){display:inline-flex;align-items:center;justify-content:center;width:2.6rem;height:2.6rem;border:1px solid rgba(148,163,184,.24);border-radius:999px;background:#08111f;color:#91a9ca;font-family:var(--sl-font-mono);font-size:.78rem;font-weight:900}.architecture-flow__step--blue:where(.astro-b2mgoyy4){color:#74a7ff;border-color:#74a7ff59}.architecture-flow__step--gold:where(.astro-b2mgoyy4){color:#f2b84b;border-color:#f2b84b52}.architecture-flow__header:where(.astro-b2mgoyy4) code:where(.astro-b2mgoyy4){display:inline-block;margin-bottom:.32rem;color:#eef6ff;font-family:var(--sl-font-mono);font-size:.9rem;font-weight:800}.architecture-flow__header:where(.astro-b2mgoyy4) p:where(.astro-b2mgoyy4){margin:0;color:#aebfd8;line-height:1.55}.architecture-flow__layers:where(.astro-b2mgoyy4){display:grid;gap:0;margin-top:1rem}.architecture-flow__layer:where(.astro-b2mgoyy4){padding:.95rem 1rem;border-radius:.95rem;border:1px solid rgba(148,163,184,.18)}.architecture-flow__layer--base:where(.astro-b2mgoyy4){background:#0f172ab8}.architecture-flow__layer--parsing:where(.astro-b2mgoyy4){background:#1c3e7040;border-color:#74a7ff38}.architecture-flow__layer--runtime:where(.astro-b2mgoyy4){background:#3341555c}.architecture-flow__layer--input:where(.astro-b2mgoyy4){background:#4a371057;border-color:#f2b84b2e}.architecture-flow__layer--render:where(.astro-b2mgoyy4){background:#0c312757;border-color:#68e0b02e}.architecture-flow__layer--cleanup:where(.astro-b2mgoyy4){background:#7f1d1d2e;border-color:#ff70702e}.architecture-flow__layer-head:where(.astro-b2mgoyy4){display:flex;align-items:center;gap:.7rem}.architecture-flow__layer-head:where(.astro-b2mgoyy4) span:where(.astro-b2mgoyy4){color:#8fb4e8;font-family:var(--sl-font-mono);font-size:.72rem;font-weight:800}.architecture-flow__layer-head:where(.astro-b2mgoyy4) strong:where(.astro-b2mgoyy4){color:#e7f0fd;font-size:.92rem}.architecture-flow__layer:where(.astro-b2mgoyy4) p:where(.astro-b2mgoyy4),.architecture-flow__fact:where(.astro-b2mgoyy4) p:where(.astro-b2mgoyy4){margin:.4rem 0 0;color:#aebfd8;font-size:.84rem;line-height:1.55}.architecture-flow__files:where(.astro-b2mgoyy4){display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.7rem}.architecture-flow__files:where(.astro-b2mgoyy4) code:where(.astro-b2mgoyy4){padding:.24rem .5rem;border-radius:999px;background:#09101b9e;color:#dcecff;font-family:var(--sl-font-mono);font-size:.68rem}.architecture-flow__layer-connector:where(.astro-b2mgoyy4){justify-self:center;width:2px;height:.85rem;background:linear-gradient(to bottom,#94a3b847,#94a3b814)}.architecture-flow__timeline:where(.astro-b2mgoyy4){display:grid;flex:1;gap:.7rem;margin-top:1rem;align-content:stretch}.architecture-flow__timeline-item:where(.astro-b2mgoyy4){position:relative;display:grid;grid-template-columns:2.4rem minmax(0,1fr) auto;gap:.75rem;align-items:center;min-width:0;padding:.88rem .9rem;border:1px solid rgba(148,163,184,.14);border-radius:.9rem;background:#0f172ab8}.architecture-flow__timeline-index:where(.astro-b2mgoyy4){color:#8fb4e8;font-family:var(--sl-font-mono);font-size:.72rem;font-weight:800}.architecture-flow__timeline-item:where(.astro-b2mgoyy4) code:where(.astro-b2mgoyy4){min-width:0;color:#e7eef9;font-family:var(--sl-font-mono);font-size:.78rem;overflow-wrap:anywhere}.architecture-flow__timeline-item:where(.astro-b2mgoyy4) em:where(.astro-b2mgoyy4){padding:.22rem .56rem;border-radius:999px;font-family:var(--sl-font-mono);font-size:.68rem;font-style:normal;font-weight:800;text-transform:uppercase;background:#3341556b;color:#d5dceb;border:1px solid rgba(148,163,184,.24)}.architecture-flow__timeline-item--bonus:where(.astro-b2mgoyy4) em:where(.astro-b2mgoyy4),.architecture-flow__timeline-item--hooks:where(.astro-b2mgoyy4) em:where(.astro-b2mgoyy4){background:#4a37106b;color:#ffdca3;border-color:#f2b84b3d}.architecture-flow__timeline-item--parsing:where(.astro-b2mgoyy4) em:where(.astro-b2mgoyy4),.architecture-flow__timeline-item--player:where(.astro-b2mgoyy4) em:where(.astro-b2mgoyy4){background:#1c3e7057;color:#a9c9ff;border-color:#74a7ff47}.architecture-flow__timeline-item--mlx:where(.astro-b2mgoyy4) em:where(.astro-b2mgoyy4),.architecture-flow__timeline-item--shutdown:where(.astro-b2mgoyy4) em:where(.astro-b2mgoyy4){background:#7f1d1d38;color:#ffb2b2;border-color:#ff707047}.architecture-flow__timeline-item--loop:where(.astro-b2mgoyy4) em:where(.astro-b2mgoyy4),.architecture-flow__timeline-item--render:where(.astro-b2mgoyy4) em:where(.astro-b2mgoyy4){background:#0c312766;color:#9de7c9;border-color:#68e0b03d}.architecture-flow__facts:where(.astro-b2mgoyy4){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:1rem}.architecture-flow__fact:where(.astro-b2mgoyy4){padding:.9rem;border:1px solid rgba(148,163,184,.14);border-radius:.9rem;background:#0f172ab8}.architecture-flow__fact:where(.astro-b2mgoyy4) strong:where(.astro-b2mgoyy4){display:block;margin-bottom:.25rem;color:#e7eef9;font-size:.86rem}@media(max-width:960px){.architecture-flow__layout:where(.astro-b2mgoyy4){grid-template-columns:1fr}}@media(max-width:720px){.architecture-flow__intro:where(.astro-b2mgoyy4){grid-template-columns:1fr}.architecture-flow__header:where(.astro-b2mgoyy4),.architecture-flow__timeline-item:where(.astro-b2mgoyy4){grid-template-columns:1fr;align-items:start}.architecture-flow__facts:where(.astro-b2mgoyy4){grid-template-columns:1fr}}
