@layer pages{.demo{isolation:isolate;background:var(--ink);position:relative;overflow:hidden}.demo-poster,.demo-poster img{width:100%;height:auto;display:block}.demo-video{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .7s var(--ease-fade,ease);display:block;position:absolute;inset:0}.demo.is-playing .demo-video{opacity:1}html.motion-off .demo-video{display:none}.demo--cover{position:absolute;inset:0}.demo--cover :is(.demo-poster,.demo-poster img){object-fit:cover;height:100%;position:absolute;inset:0}.demo--cover :is(.demo-poster img,.demo-video){object-position:var(--demo-x,50%) var(--demo-y,50%)}.demo-beats{left:var(--demo-beats-left,24px);right:var(--demo-beats-right,120px);z-index:2;gap:12px;margin:0;padding:0;list-style:none;display:flex;position:absolute;bottom:22px}.demo-beat{min-width:0;font:var(--t-caption);color:var(--bone-mute);transition:color var(--d-ui,.2s) var(--ease-fade,ease);flex:1 1 0}.demo-beat-bar{background:color-mix(in oklab, var(--bone) 18%, transparent);height:2px;margin-bottom:8px;display:block;position:relative;overflow:hidden}.demo-beat-bar:after{content:"";background:var(--gold-hot);transform-origin:0;transform:scaleX(var(--p,0));position:absolute;inset:0}.demo-beat-t{white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}.demo-beat.is-on{color:var(--bone)}.demo:not(.is-playing) .demo-beats{visibility:hidden}.demo-note{top:var(--demo-note-top,auto);left:var(--demo-note-left,auto);right:var(--demo-note-right,24px);bottom:var(--demo-note-bottom,74px);z-index:2;max-width:36ch;font:var(--t-caption);color:var(--bone-mute);text-align:var(--demo-note-align,right);text-wrap:balance;margin:0;position:absolute}.demo-toggle{top:var(--demo-toggle-top,auto);right:var(--demo-toggle-right,16px);bottom:var(--demo-toggle-bottom,16px);z-index:3;border:1px solid color-mix(in oklab, var(--bone) 30%, transparent);border-radius:var(--r-pill);min-width:72px;min-height:44px;color:var(--bone);font:var(--t-label);letter-spacing:var(--t-label-track);text-transform:uppercase;cursor:pointer;background:#07080a73;padding:0 14px;position:absolute}.demo-toggle[hidden]{display:none}.demo-toggle:hover{border-color:var(--bone)}.demo-toggle:focus-visible{outline:2px solid var(--gold-hot);outline-offset:2px}@media (width<=759px){.demo-beats{bottom:18px;left:16px;right:100px}.demo-note{right:var(--demo-note-right,16px);bottom:var(--demo-note-bottom,70px)}}}