.snippet-demo{width:100%;height:100%}.demo-controls{position:relative;display:flex;align-items:center;justify-content:flex-end;min-height:calc(1.9375rem + var(--space-4) * 2);padding:var(--space-4) var(--space-5)}.demo-controls--top{order:-1}.demo-controls--overlay{position:absolute;inset-inline:0;z-index:2;pointer-events:none}.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{position:absolute;inset-inline-start:var(--space-5);display:flex;flex-direction:column;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))}.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{flex:0 0 auto;background:currentColor;mask-repeat:no-repeat;mask-position:center;mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain}.demo-controls__arrow--md{width:7.5rem;height:2.125rem}.demo-controls__arrow--lg{width:11rem;height:3.125rem}.demo-controls__arrow--xl{position:absolute;inset-block-end:100%;inset-inline-start:0;width:21.4375rem;height:6.125rem}.demo-controls__replay{flex:0 0 auto;font-family:var(--font-sans);font-size:var(--text-label);font-weight:500;text-transform:uppercase;letter-spacing:.04em;padding:.375rem var(--space-4);border:0;border-radius:var(--radius-full);background:var(--surface-hover);color:var(--ink-primary);cursor:pointer;transition:background var(--duration-base) var(--ease-smooth)}.demo-controls__replay:hover{background:var(--border-strong)}.fan{width:100%;height:100%;display:flex;flex-direction:column}.fan,.fan__stage{position:relative}.fan__stage{flex:1 1;min-height:0;display:grid;place-items:center}.fan__slot{position:absolute;width:30%;transform:translate(var(--slot-x),var(--slot-y)) rotate(var(--slot-rotate));transition:transform var(--duration-card) var(--ease-card);will-change:transform}.fan__slot:hover{transform:translate(var(--slot-x),calc(var(--slot-y) - 8%)) rotate(0deg) scale(1.06);z-index:5}.fan--still{pointer-events:none}.fan--still .fan__slot,.fan--still .fan__slot:hover{transform:translate(var(--slot-x),var(--slot-y)) rotate(var(--slot-rotate));transition:none}.fan__card{display:flex;flex-direction:column;width:100%;aspect-ratio:22/24;padding:9% 10%;border-radius:12%;color:var(--ink-on-colour);will-change:transform,opacity}.fan__count{align-self:flex-end;font-weight:800;font-size:.875rem;line-height:1}.fan__count,.fan__label{font-family:var(--font-sans)}.fan__label{margin-top:auto;font-weight:500;font-size:.75rem;line-height:1.2}.fan__note{margin-top:.25rem;font-family:var(--font-mono);font-size:.5625rem;opacity:.72}@media (prefers-reduced-motion:reduce){.fan__slot{transition:none}}.wp{--wp-travel:3;display:flex;flex-direction:column;width:100%;height:100%}.wp__scroller{position:relative;flex:1 1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.wp__track{height:calc(var(--wp-travel) * 100%)}.wp__stage{position:-webkit-sticky;position:sticky;inset-block-start:0;height:calc(100% / var(--wp-travel))}.wp__waypoint{width:4.5rem;height:4.5rem;translate:-50% -50%;border:1px dashed var(--border-strong)}.wp__marker,.wp__waypoint{position:absolute;border-radius:var(--radius-md)}.wp__marker{width:2.75rem;height:2.75rem;background:var(--demo-hue)}.wp--still{pointer-events:none}.wp--still .wp__scroller{overflow:hidden}.wp--still{--wp-travel:1}