.explainer{background:var(--color-cream-panel);color:var(--color-ink);padding:var(--space-4);border-radius:var(--radius-md)}.explainer-stage:focus,.explainer-title:focus{outline:none}.explainer-title:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.explainer-title{margin:0 0 var(--space-3);font-size:var(--text-lg)}.explainer-scene{min-height:12rem;animation:explainer-in .24s ease-out}.explainer[data-reduced-motion] .explainer-scene{animation:none}@keyframes explainer-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.explainer *,.explainer :after,.explainer :before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.explainer-autoplay,.explainer-controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-top:var(--space-4)}.explainer-controls{justify-content:space-between}.explainer-progress{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-ink-soft)}.explainer button{font:inherit;font-size:var(--text-sm);color:var(--color-ink);background:transparent;border:1px solid var(--color-ink-soft);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);cursor:pointer}.explainer button:disabled{color:var(--color-ink-soft);border-style:dashed;cursor:default}.explainer button.explainer-primary{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-cream)}.explainer [data-explainer-interaction] :focus-visible,.explainer [data-explainer-interaction]:focus-visible,.explainer button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.explainer-error{color:var(--color-bad)}.explainer-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.explainer svg{max-width:100%;height:auto}