.input-flow:where(.astro-yid6ekfi){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}.input-flow__layout:where(.astro-yid6ekfi){display:grid;gap:.9rem;max-width:56rem;margin:0 auto;padding:1.35rem}.input-flow__card:where(.astro-yid6ekfi){min-width:0;padding:1rem;border:1px solid rgba(148,163,184,.18);border-radius:1rem;background:#070d18b8}.input-flow__header:where(.astro-yid6ekfi){display:grid;grid-template-columns:3rem minmax(0,1fr);gap:.85rem;align-items:start}.input-flow__step:where(.astro-yid6ekfi){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}.input-flow__step--blue:where(.astro-yid6ekfi){color:#74a7ff;border-color:#74a7ff59}.input-flow__step--gold:where(.astro-yid6ekfi){color:#f2b84b;border-color:#f2b84b52}.input-flow__step--orange:where(.astro-yid6ekfi){color:#f9a35f;border-color:#f9a35f52}.input-flow__step--green:where(.astro-yid6ekfi){color:#68e0b0;border-color:#68e0b04d}.input-flow__header:where(.astro-yid6ekfi) code:where(.astro-yid6ekfi){display:inline-block;margin-bottom:.32rem;color:#eef6ff;font-family:var(--sl-font-mono);font-size:.9rem;font-weight:800}.input-flow__header:where(.astro-yid6ekfi) p:where(.astro-yid6ekfi){margin:0;color:#aebfd8;line-height:1.55}.input-flow__chips:where(.astro-yid6ekfi){display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.95rem}.input-flow__chips:where(.astro-yid6ekfi) span:where(.astro-yid6ekfi){padding:.35rem .6rem;border:1px solid rgba(148,163,184,.18);border-radius:999px;background:#0f172ad1;color:#d6e6fb;font-family:var(--sl-font-mono);font-size:.72rem}.input-flow__events:where(.astro-yid6ekfi){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin-top:.95rem}.input-flow__event-card:where(.astro-yid6ekfi){display:grid;gap:.28rem;min-width:0;padding:.8rem;border:1px solid rgba(148,163,184,.14);border-radius:.85rem;background:#0f172ab8}.input-flow__event-card:where(.astro-yid6ekfi) strong:where(.astro-yid6ekfi){color:#e7f0fd;font-family:var(--sl-font-mono);font-size:.78rem}.input-flow__event-card:where(.astro-yid6ekfi) p:where(.astro-yid6ekfi){margin:0;color:#8da2c1;font-size:.82rem;line-height:1.45}.input-flow__event-card:where(.astro-yid6ekfi) code:where(.astro-yid6ekfi){color:#74a7ff;font-family:var(--sl-font-mono);font-size:.72rem;overflow-wrap:anywhere}.input-flow__simulator:where(.astro-yid6ekfi){display:grid;gap:.9rem;margin-top:.95rem}.input-flow__keys:where(.astro-yid6ekfi){display:flex;flex-wrap:wrap;gap:.65rem}.input-flow__key:where(.astro-yid6ekfi){display:inline-flex;align-items:center;justify-content:center;min-width:3rem;min-height:2.75rem;padding:0 .95rem;border:1px solid rgba(116,167,255,.28);border-radius:.85rem;background:#0a121eeb;color:#e8f0fe;font-family:var(--sl-font-mono);font-size:.88rem;font-weight:800;cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease}.input-flow__key:where(.astro-yid6ekfi):hover,.input-flow__key:where(.astro-yid6ekfi):focus-visible{border-color:#74a7ff8f;background:#101c2ef2;box-shadow:0 0 0 3px #74a7ff1f;outline:none}.input-flow__key:where(.astro-yid6ekfi).is-active{transform:translateY(1px);border-color:#f2b84b99;background:#3a2a10eb;color:#ffdca3}.input-flow__state:where(.astro-yid6ekfi){display:grid;gap:.3rem}.input-flow__state-label:where(.astro-yid6ekfi){color:#8ba3c4;font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.input-flow__state:where(.astro-yid6ekfi) code:where(.astro-yid6ekfi){display:inline-block;width:fit-content;max-width:100%;padding:.45rem .7rem;border:1px solid rgba(148,163,184,.2);border-radius:.75rem;background:#09101beb;color:#dcecff;font-family:var(--sl-font-mono);font-size:.78rem;overflow-wrap:anywhere}.input-flow__canvas:where(.astro-yid6ekfi){width:100%;border:1px solid rgba(148,163,184,.14);border-radius:.95rem;background:#09111d}.input-flow__frame-list:where(.astro-yid6ekfi){display:grid;gap:.6rem;margin:.95rem 0 0;padding:0;list-style:none}.input-flow__frame-item:where(.astro-yid6ekfi){display:grid;grid-template-columns:2.5rem minmax(0,1fr) auto;align-items:center;gap:.8rem;min-width:0;padding:.72rem .82rem;border:1px solid rgba(148,163,184,.14);border-radius:.85rem;background:#0f172ab8}.input-flow__frame-item:where(.astro-yid6ekfi) span:where(.astro-yid6ekfi){color:#8fb4e8;font-family:var(--sl-font-mono);font-size:.72rem;font-weight:800}.input-flow__frame-item:where(.astro-yid6ekfi) strong:where(.astro-yid6ekfi){min-width:0;color:#e7eef9;font-size:.88rem;line-height:1.4}.input-flow__frame-item:where(.astro-yid6ekfi) em:where(.astro-yid6ekfi){padding:.2rem .55rem;border-radius:999px;background:#74a7ff24;color:#a9c9ff;font-family:var(--sl-font-mono);font-size:.7rem;font-style:normal;font-weight:700;text-transform:uppercase}@media(max-width:720px){.input-flow__intro:where(.astro-yid6ekfi){grid-template-columns:1fr}.input-flow__header:where(.astro-yid6ekfi){grid-template-columns:1fr}.input-flow__events:where(.astro-yid6ekfi){grid-template-columns:1fr}.input-flow__frame-item:where(.astro-yid6ekfi){grid-template-columns:1fr;align-items:start}}