.nn-demo{--demo-period:var(--tempo-ambient)}.nn-demo [data-beat]{animation-duration:var(--demo-period);animation-iteration-count:infinite;animation-timing-function:var(--ease-out);animation-fill-mode:both}.nn-demo [data-beat="1"]{animation-name:nn-demo-in-1}.nn-demo [data-beat="2"]{animation-name:nn-demo-in-2}.nn-demo [data-beat="3"]{animation-name:nn-demo-in-3}.nn-demo [data-beat="4"]{animation-name:nn-demo-in-4}.nn-demo [data-beat="5"]{animation-name:nn-demo-in-5}.nn-demo [data-beat-fill]{transform-origin:0;animation:nn-demo-fill var(--demo-period) var(--ease-out) infinite both}[dir=rtl] .nn-demo [data-beat-fill]{transform-origin:100%}.nn-demo[data-paused] [data-beat],.nn-demo[data-paused] [data-beat-fill]{animation-play-state:paused}@media (prefers-reduced-motion:reduce){.nn-demo [data-beat],.nn-demo [data-beat-fill]{opacity:1;animation:none;transform:none}}@keyframes nn-demo-in-1{0%,6%{opacity:0;transform:translateY(6px)}10%,90%{opacity:1;transform:none}96%,to{opacity:0;transform:none}}@keyframes nn-demo-in-2{0%,22%{opacity:0;transform:translateY(6px)}26%,90%{opacity:1;transform:none}96%,to{opacity:0;transform:none}}@keyframes nn-demo-in-3{0%,38%{opacity:0;transform:translateY(6px)}42%,90%{opacity:1;transform:none}96%,to{opacity:0;transform:none}}@keyframes nn-demo-in-4{0%,54%{opacity:0;transform:translateY(6px)}58%,90%{opacity:1;transform:none}96%,to{opacity:0;transform:none}}@keyframes nn-demo-in-5{0%,70%{opacity:0;transform:translateY(6px)}74%,90%{opacity:1;transform:none}96%,to{opacity:0;transform:none}}@keyframes nn-demo-fill{0%,12%{opacity:1;transform:scaleX(0)}34%,90%{opacity:1;transform:scaleX(1)}96%,to{opacity:0;transform:scaleX(1)}}.nn-hint-caret{background:var(--color-ink-2);border:1px solid var(--color-line);width:10px;height:10px;position:absolute;transform:rotate(45deg)}.nn-hint-caret[data-side=top]{top:-6px;border-bottom:0;border-right:0;inset-inline-start:24px}.nn-hint-caret[data-side=bottom]{bottom:-6px;border-top:0;border-left:0;inset-inline-start:24px}.nn-demo-cursor{z-index:2;pointer-events:none;transform:translate3d(var(--cx,0px), var(--cy,0px), 0);transition:transform var(--dur-morph) var(--ease-out), opacity var(--dur-standard) var(--ease-out);will-change:transform;position:absolute;top:0;left:0}.nn-demo-cursor:not([data-ready]){opacity:0;transition:none}.nn-demo-cursor[data-hidden]{opacity:0}.nn-demo-cursor>.nn-demo-cursor-glyph{transform-origin:3px 3px;transition:transform var(--dur-micro) var(--ease-out);filter:drop-shadow(0 1px 1.5px #0000008c);display:block}.nn-demo-cursor[data-press]>.nn-demo-cursor-glyph{transform:scale(.86)}.nn-demo-ring{opacity:0;width:26px;height:26px;animation:nn-demo-ring var(--dur-panel) var(--ease-out) both;border:1.5px solid #f2f0eb8c;border-radius:9999px;position:absolute;top:-11px;left:-11px}@keyframes nn-demo-ring{0%{opacity:.9;transform:scale(.4)}to{opacity:0;transform:scale(1)}}.nn-demo [data-demo-pressed]{transition:transform var(--dur-micro) var(--ease-out);transform:translateY(.5px)scale(.98)}.nn-demo [data-demo-target]{transition:transform var(--dur-micro) var(--ease-out)}.nn-demo{--color-brand:var(--color-paper);--color-brand-dark:color-mix(in srgb, var(--color-paper) 80%, transparent);--color-brand-hover:var(--color-paper);--color-brand-pressed:color-mix(in srgb, var(--color-paper) 85%, transparent);--color-brand-ink:var(--color-ink);--color-brand-soft:color-mix(in srgb, var(--color-paper) 10%, transparent);--color-brand-border:color-mix(in srgb, var(--color-paper) 30%, transparent);--color-brand-ring:color-mix(in srgb, var(--color-paper) 40%, transparent);--color-brand-glow:transparent}.nn-demo-swap{transition:opacity var(--dur-standard) var(--ease-out), transform var(--dur-standard) var(--ease-out)}.nn-demo-swap[data-off]{opacity:0;transform:translateY(4px)}.nn-demo-seg-fill{transform-origin:0;transition:transform var(--dur-panel) var(--ease-out)}[dir=rtl] .nn-demo-seg-fill{transform-origin:100%}@media (prefers-reduced-motion:reduce){.nn-demo-cursor{display:none}.nn-demo-swap,.nn-demo-seg-fill,.nn-demo [data-demo-target]{transition:opacity var(--dur-instant) linear;transform:none}.nn-demo-swap[data-off]{transform:none}}