.demo{--demo-ease:cubic-bezier(.32, .72, 0, 1);flex-direction:column;gap:12px;margin:0;display:flex}.demo-stage{isolation:isolate;background:var(--color-bg);color:var(--color-text);-webkit-user-select:none;user-select:none;border-radius:14px;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Inter,system-ui,sans-serif;font-size:13px;line-height:1.45;position:relative;overflow:hidden;box-shadow:0 0 0 1px #ffffff1a,0 24px 60px #00000073,0 4px 12px #0000004d;box-shadow:0 0 0 1px lab(100% 0 0/.1),0 24px 60px lab(0% 0 0/.45),0 4px 12px lab(0% 0 0/.3)}.demo-bar{align-items:flex-start;gap:12px;display:flex}.demo-play{width:44px;height:44px;color:var(--color-text);touch-action:manipulation;background:#ffffff14;background:lab(100% 0 0/.08);border-radius:999px;flex:none;place-items:center;transition:background-color .15s ease-out,scale .15s ease-out;display:grid}.demo-play svg{width:14px;height:14px}.demo-play:active{scale:.96}.demo-steps{flex:1;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:4px;margin:0;padding:0;list-style:none;display:grid}.demo-step{text-align:left;width:100%;min-height:40px;color:var(--color-faint);touch-action:manipulation;flex-direction:column;gap:4px;padding:2px 0 6px;font-size:12px;line-height:1.3;transition:color .15s ease-out;display:flex}.demo-step[data-on]{color:var(--color-text)}@media (hover:hover) and (pointer:fine){.demo-play:hover{background:#ffffff24;background:lab(100% 0 0/.14)}.demo-step:hover{color:var(--color-text)}}.demo-step[data-done]{color:var(--color-muted)}.demo-step-n{font-variant-numeric:tabular-nums;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:11px}.demo-step-bar{background:#ffffff1f;background:lab(100% 0 0/.12);border-radius:2px;order:-1;height:2px;display:block;position:relative;overflow:hidden}.demo-step-fill{background:var(--color-accent);transform-origin:0;position:absolute;inset:0;transform:scaleX(0)}.demo-step[data-done] .demo-step-fill{background:#ffffff73;background:lab(100% 0 0/.45);transform:scaleX(1)}.demo-step[data-on] .demo-step-fill{transform:scaleX(1)}.demo-step-fill[data-run]{animation:linear both demo-fill}@keyframes demo-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.demo-step-fill[data-full]{transform:scaleX(1)}.demo-pager{display:none}@media (max-width:640px){.demo-bar{align-items:center;gap:8px}.demo-steps{display:none}.demo-pager{flex:1;align-items:center;gap:4px;min-width:0;display:flex}.demo-nav{width:44px;height:44px;color:var(--color-text);touch-action:manipulation;background:#ffffff14;background:lab(100% 0 0/.08);border-radius:999px;flex:none;place-items:center;transition:scale .15s ease-out,opacity .15s ease-out;display:grid}.demo-nav svg{width:16px;height:16px}.demo-nav:active{scale:.96}.demo-nav[aria-disabled=true]{opacity:.35}.demo-count{min-width:0;color:var(--color-text);flex:1;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:6px 10px;margin:0 6px;font-size:13px;line-height:1.3;display:grid}.demo-count-n{color:var(--color-muted);font-variant-numeric:tabular-nums;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:11px}.demo-count-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.demo-count .demo-step-bar{order:0;grid-column:1/-1}}@media (prefers-reduced-motion:reduce){.demo *,.demo :before,.demo :after{transition:none!important;animation:none!important}}