.snippet-demo{width:100%;height:100%}
.demo-controls{min-height:calc(1.9375rem + var(--space-4) * 2);padding:var(--space-4) var(--space-5);justify-content:flex-end;align-items:center;display:flex;position:relative}.demo-controls--top{order:-1}.demo-controls--overlay{z-index:2;pointer-events:none;position:absolute;inset-inline:0}.demo-controls--overlay.demo-controls--top{inset-block-start:0}.demo-controls--overlay.demo-controls--bottom{inset-block-end:0}.demo-controls--overlay .demo-controls__replay{pointer-events:auto}.demo-controls__hint{align-items:center;gap:var(--space-1);font-family:var(--font-annotation);font-size:var(--text-p-base);text-align:center;color:var(--demo-accent,var(--colour-corona));flex-direction:column;display:flex;position:absolute;inset-inline-start:var(--space-5)}.demo-controls--bottom .demo-controls__hint{inset-block-end:var(--space-4)}.demo-controls--top .demo-controls__hint{inset-block-start:var(--space-4)}.demo-controls__hint--below{flex-direction:column-reverse}.demo-controls__arrow{background:currentColor;flex:none;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.demo-controls__arrow--md{width:7.5rem;height:2.125rem}.demo-controls__arrow--lg{width:11rem;height:3.125rem}.demo-controls__arrow--xl{width:21.4375rem;height:6.125rem;position:absolute;inset-block-end:100%;inset-inline-start:0}.demo-controls__replay{font-family:var(--font-sans);font-size:var(--text-label);text-transform:uppercase;letter-spacing:.04em;padding:.375rem var(--space-4);border-radius:var(--radius-full);background:var(--surface-hover);color:var(--ink-primary);cursor:pointer;transition:background var(--duration-base) var(--ease-smooth);border:0;flex:none;font-weight:500}.demo-controls__replay:hover{background:var(--border-strong)}.demo-controls__say--touch{display:none}@media (hover:none) and (pointer:coarse){.demo-controls__say--pointer{display:none}.demo-controls__say--touch{display:block}}@media (max-width:40rem){.demo-controls{padding:var(--space-3) var(--space-4);min-height:calc(1.9375rem + var(--space-3) * 2)}.demo-controls__hint{max-width:calc(100% - 7.5rem);font-size:var(--text-p-sm,.875rem);inset-inline-start:var(--space-4)}.demo-controls--bottom .demo-controls__hint{inset-block-end:var(--space-3)}.demo-controls--top .demo-controls__hint{inset-block-start:var(--space-3)}.demo-controls__arrow--md{width:5rem;height:1.43rem}.demo-controls__arrow--lg{width:6.5rem;height:1.86rem}.demo-controls__arrow--xl{width:9rem;height:2.57rem;position:static}}@media (max-width:26rem){.demo-controls__arrow{display:none}.demo-controls__hint{max-width:calc(100% - 7rem)}}
.wp{--wp-travel:3;flex-direction:column;width:100%;height:100%;display:flex}.wp__scroller{overscroll-behavior:contain;scrollbar-width:thin;flex:1;min-height:0;position:relative;overflow-y:auto}.wp__track{height:calc(var(--wp-travel) * 100%)}.wp__stage{height:calc(100% / var(--wp-travel));position:sticky;inset-block-start:0}.wp__waypoint{border:1px dashed var(--border-strong);border-radius:var(--radius-md);width:4.5rem;height:4.5rem;position:absolute;translate:-50% -50%}.wp__marker{border-radius:var(--radius-md);background:var(--demo-hue);width:2.75rem;height:2.75rem;position:absolute}.wp--still{pointer-events:none}.wp--still .wp__scroller{overflow:hidden}.wp--still{--wp-travel:1}@media (max-width:40rem){.wp__waypoint{width:3rem;height:3rem}.wp__marker{width:1.85rem;height:1.85rem}}