/* Shared rules for interactive-background variants: canvas stacking and the pause control. */
.bg-canvas{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;opacity:var(--bg-intensity,1);transition:opacity .35s linear}
main.wrap{position:relative;z-index:1}
.bg-toggle{position:fixed;right:1rem;bottom:1rem;z-index:40;display:inline-flex;align-items:center;gap:.45rem;height:2.25rem;padding:0 .7rem;border:1px solid var(--border);border-radius:999px;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--muted-fg);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:color .2s,border-color .2s}
.bg-toggle:hover{color:var(--fg);border-color:var(--accent)}
.bg-toggle svg{width:14px;height:14px;fill:currentColor}
.bg-toggle .i-play,.bg-paused .bg-toggle .i-pause{display:none}
.bg-paused .bg-toggle .i-play{display:block}
@media (max-width:640px){.bg-toggle span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.bg-toggle{padding:0 .6rem}}
.hero h1,.headline,.prose h2{text-wrap:balance}
.body p,.prose p,.card p{text-wrap:pretty}