/* Demo kit: shared rules for live demonstrations. Demos draw on the page itself:
   no panels, no fills, no shadows. Hairlines separate records only. */
.demo {position:relative;padding-block:clamp(2.5rem,5vw,5rem) clamp(3.5rem,6vw,6rem);color:var(--ink)}
.demo[data-off] *, .demo[data-off] *::before, .demo[data-off] *::after {animation-play-state:paused!important}
.demo[data-instant] *, .demo[data-instant] *::before, .demo[data-instant] *::after {transition:none!important;animation:none!important}
.demo-foot {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-top:clamp(2rem,4vw,3rem);padding-top:1.2rem;border-top:1px solid var(--rule);font-size:.875rem;line-height:1.6;color:var(--ink-2)}
.demo-replay {display:inline-flex;align-items:center;gap:.55rem;padding:.35rem 0;color:var(--ink);font:inherit;background:none;border:0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:.35em;transition:color .25s}
.demo-replay:hover {color:var(--oxide)}
.demo-replay svg {width:1em;height:1em;transition:transform .5s var(--ease)}
.demo-replay:hover svg {transform:rotate(-200deg)}
.demo-sr {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}