.shading-flow:where(.astro-6xq3mzom){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}.shading-flow__layout:where(.astro-6xq3mzom){display:grid;gap:.9rem;max-width:56rem;margin:0 auto;padding:1.35rem}.shading-flow__card:where(.astro-6xq3mzom){min-width:0;padding:1rem;border:1px solid rgba(148,163,184,.18);border-radius:1rem;background:#070d18b8}.shading-flow__header:where(.astro-6xq3mzom){display:grid;grid-template-columns:3rem minmax(0,1fr);gap:.85rem;align-items:start}.shading-flow__step:where(.astro-6xq3mzom){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}.shading-flow__step--blue:where(.astro-6xq3mzom){color:#74a7ff;border-color:#74a7ff59}.shading-flow__step--gold:where(.astro-6xq3mzom){color:#f2b84b;border-color:#f2b84b52}.shading-flow__step--green:where(.astro-6xq3mzom){color:#68e0b0;border-color:#68e0b04d}.shading-flow__header:where(.astro-6xq3mzom) code:where(.astro-6xq3mzom){display:inline-block;margin-bottom:.32rem;color:#eef6ff;font-family:var(--sl-font-mono);font-size:.9rem;font-weight:800}.shading-flow__header:where(.astro-6xq3mzom) p:where(.astro-6xq3mzom){margin:0;color:#aebfd8;line-height:1.55}.shading-flow__passes:where(.astro-6xq3mzom){display:grid;gap:.75rem;margin-top:1rem}.shading-flow__pass-card:where(.astro-6xq3mzom){display:grid;gap:.45rem;padding:.9rem;border:1px solid rgba(148,163,184,.14);border-radius:.9rem;background:#0f172ab8}.shading-flow__pass-head:where(.astro-6xq3mzom){display:flex;align-items:center;gap:.7rem}.shading-flow__pass-head:where(.astro-6xq3mzom) span:where(.astro-6xq3mzom){color:#8fb4e8;font-family:var(--sl-font-mono);font-size:.72rem;font-weight:800}.shading-flow__pass-head:where(.astro-6xq3mzom) strong:where(.astro-6xq3mzom){color:#e7f0fd;font-family:var(--sl-font-mono);font-size:.78rem;overflow-wrap:anywhere}.shading-flow__pass-card:where(.astro-6xq3mzom) p:where(.astro-6xq3mzom),.shading-flow__sequence-item:where(.astro-6xq3mzom) p:where(.astro-6xq3mzom){margin:0;color:#8da2c1;font-size:.84rem;line-height:1.5}.shading-flow:where(.astro-6xq3mzom) pre:where(.astro-6xq3mzom){margin:0;padding:.9rem 1rem;border:1px solid rgba(148,163,184,.16);border-radius:.85rem;background:#09101beb;overflow-x:auto}.shading-flow:where(.astro-6xq3mzom) pre:where(.astro-6xq3mzom) code:where(.astro-6xq3mzom){color:#dcecff;font-family:var(--sl-font-mono);font-size:.78rem;line-height:1.7;white-space:pre-wrap}.shading-flow__controls:where(.astro-6xq3mzom){display:grid;gap:.75rem;margin-top:1rem}.shading-flow__control:where(.astro-6xq3mzom){display:grid;grid-template-columns:minmax(9rem,12rem) minmax(0,1fr) auto;gap:.8rem;align-items:center}.shading-flow__control:where(.astro-6xq3mzom) span:where(.astro-6xq3mzom){color:#d6e6fb;font-size:.84rem}.shading-flow__control:where(.astro-6xq3mzom) code:where(.astro-6xq3mzom),.shading-flow__state:where(.astro-6xq3mzom){display:inline-block;padding:.35rem .6rem;border:1px solid rgba(148,163,184,.2);border-radius:.7rem;background:#09101beb;color:#dcecff;font-family:var(--sl-font-mono);font-size:.76rem}.shading-flow__canvas:where(.astro-6xq3mzom){width:100%;margin-top:1rem;border:1px solid rgba(148,163,184,.14);border-radius:.95rem;background:#09111d}.shading-flow__state:where(.astro-6xq3mzom){margin-top:.75rem;width:fit-content;max-width:100%;overflow-wrap:anywhere}.shading-flow__sequence:where(.astro-6xq3mzom){display:grid;gap:.7rem;margin-top:1rem}.shading-flow__sequence-item:where(.astro-6xq3mzom){padding:.85rem .9rem;border:1px solid rgba(148,163,184,.14);border-radius:.9rem;background:#0f172ab8}.shading-flow__sequence-item:where(.astro-6xq3mzom) strong:where(.astro-6xq3mzom){display:block;margin-bottom:.25rem;color:#e7eef9;font-size:.86rem}.shading-flow__chips:where(.astro-6xq3mzom){display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.95rem}.shading-flow__chips:where(.astro-6xq3mzom) span:where(.astro-6xq3mzom){padding:.35rem .6rem;border:1px solid rgba(104,224,176,.22);border-radius:999px;background:#0c312766;color:#9de7c9;font-family:var(--sl-font-mono);font-size:.72rem}@media(max-width:720px){.shading-flow__intro:where(.astro-6xq3mzom){grid-template-columns:1fr}.shading-flow__header:where(.astro-6xq3mzom){grid-template-columns:1fr}.shading-flow__control:where(.astro-6xq3mzom){grid-template-columns:1fr;align-items:start}}