.diagram-frame{container-type:inline-size}.diagram-frame svg{width:100%;height:auto;display:block}.diagram-wide{display:none}.diagram-narrow{max-width:24rem;margin-inline:auto;display:block}@container (width>=34rem){.diagram-wide{display:block}.diagram-narrow{display:none}}.explainer-steps{flex-direction:column;padding-block:.5rem;display:flex}.explainer-step{align-items:center;gap:1rem;min-width:0;display:flex}.explainer-illustration{width:4rem;height:4rem;color:var(--primary);background:color-mix(in oklch, var(--primary) 10%, var(--card));border-radius:50%;flex:0 0 4rem;place-items:center;display:grid}.explainer-illustration svg{width:2rem;height:2rem}.explainer-copy{overflow-wrap:anywhere;min-width:0}.explainer-person{color:var(--muted-foreground);font-size:.875rem}.explainer-label{font-family:var(--font-display);margin-top:.25rem;font-size:1.5rem;line-height:1.2}.explainer-detail{color:var(--muted-foreground);margin-top:.5rem;font-size:.875rem;line-height:1.5}.explainer-connector{flex:0 0 3rem;width:4rem}.explainer-connector svg{height:3rem;transform:rotate(90deg)}.explainer-frame figcaption{border-top:1px solid var(--border);font-family:var(--font-sans);padding-top:1rem;font-size:.9375rem}@container (width>=44rem){.explainer-steps{flex-direction:row;padding-block:1rem}.explainer-step{text-align:center;flex-direction:column;flex:1 1 0}.explainer-illustration{flex-basis:5rem;width:5rem;height:5rem}.explainer-illustration svg{width:2.5rem;height:2.5rem}.explainer-label{font-size:1.75rem}.explainer-connector{flex-basis:4rem;padding-top:.5rem}.explainer-connector svg{height:4rem;transform:none}}.ai-shift-way{padding:.5rem}.ai-shift-open{border-top:1px solid var(--border);margin-top:1.5rem;padding-top:1.5rem}.ai-shift-open>p:first-child{color:var(--primary)}.ai-shift-way:not(.ai-shift-open) .explainer-illustration{color:var(--muted-foreground);background:var(--muted)}.ai-shift-steps{flex-direction:column;margin-block:1.25rem;display:flex}.ai-shift-step{align-items:center;gap:1rem;min-width:0;display:flex}.ai-shift-arrow{width:4rem;height:1.75rem}.ai-shift-arrow svg{height:1.75rem;transform:rotate(90deg)}@container (width>=44rem){.ai-shift-steps{flex-direction:row;align-items:center;margin-block:1.5rem}.ai-shift-step{text-align:center;flex-direction:column;flex:1 1 0;align-self:start}.ai-shift-arrow{flex:0 0 2.5rem;align-self:start;height:4rem}.ai-shift-arrow svg{height:4rem;transform:none}}