.animation-demo {
  --an-blue: #075de8;
  --an-cyan: #29a6d8;
  --an-green: #13805f;
  --an-red: #c5374f;
  --an-amber: #b66b00;
  --an-ink: var(--text, #10233c);
  --an-muted: var(--muted, #68778b);
  --an-line: var(--border, #d8e1ec);
  --an-soft: var(--surface-subtle, #f4f7fb);
  --an-surface: var(--surface, #fff);
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 7px;
  color: var(--an-ink);
  font-size: 9px;
}

.animation-demo * { box-sizing: border-box; }

.an-toolbar {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}

.an-toolbar > span {
  min-width: 0;
  overflow: hidden;
  color: var(--an-muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .055em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.an-toolbar > div { display: flex; flex: none; gap: 3px; }
.animation-demo > small { color: var(--an-muted); font-size: 8px; }

.animation-demo button,
.animation-demo input,
.animation-demo select { font: inherit; }

.animation-demo button {
  border: 1px solid var(--an-line);
  border-radius: 4px;
  background: var(--an-surface);
  color: var(--an-blue);
  cursor: pointer;
  font-weight: 800;
  padding: 4px 6px;
}

.animation-demo button:focus-visible,
.animation-demo input:focus-visible,
.animation-demo [tabindex]:focus-visible {
  outline: 2px solid var(--an-blue);
  outline-offset: 2px;
}

.an-stage {
  position: relative;
  display: grid;
  min-height: 105px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--an-line);
  border-radius: 7px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--an-line) 35%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(color-mix(in srgb, var(--an-line) 35%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--an-soft);
  padding: 12px;
}

.an-box {
  display: grid;
  min-width: 38px;
  height: 34px;
  place-items: center;
  border-radius: 7px;
  background: var(--an-blue);
  box-shadow: 0 5px 12px color-mix(in srgb, var(--an-blue) 22%, transparent);
  color: #fff;
  font-weight: 900;
}

.an-secondary { background: var(--an-green); }
.an-arrow { color: var(--an-muted); font-weight: 900; }
.animation-demo-css-transition .an-stage { grid-template-columns: auto auto auto; gap: 10px; }
.animation-demo-css-transition .an-box { transition: transform var(--motion-duration) cubic-bezier(.2,.8,.2,1), opacity var(--motion-duration) ease; }
.animation-demo-css-transition.is-active .an-box:first-child { transform: translateX(58px) scale(.8); opacity: .25; }
.animation-demo-css-transition.is-active .an-secondary { transform: translateX(-58px) scale(1.08); }

.an-keyframes { position: absolute; inset: auto 12px 10px; display: flex; justify-content: space-between; color: var(--an-muted); }
.an-keyframe-box { position: relative; justify-self: start; }
.animation-demo-css-keyframe-animation.is-running .an-keyframe-box { animation: an-keyframe var(--motion-duration) cubic-bezier(.2,.8,.2,1) both; }

.an-orbit { position: relative; display: grid; width: 92px; height: 70px; place-items: center; border: 1px dashed var(--an-line); border-radius: 50%; }
.an-orbit i { position: absolute; top: -6px; left: 39px; width: 14px; height: 14px; border-radius: 50%; background: var(--an-blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--an-blue) 15%, transparent); transform-origin: 7px 41px; }
.an-orbit b { font-size: 10px; }
.animation-demo-web-animations-api.is-playing .an-orbit i { animation: an-orbit 1.2s linear infinite; }
.animation-demo-web-animations-api.is-reversed .an-orbit i { animation-direction: reverse; }

.an-lane { display: grid; width: 100%; grid-template-columns: 60px 1fr; align-items: center; gap: 7px; color: var(--an-muted); }
.an-lane i { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--an-blue); }
.an-raf-lane { width: min(100%, 180px); }
.an-frame-count { position: absolute; right: 12px; bottom: 8px; color: var(--an-green); font-variant-numeric: tabular-nums; }
.animation-demo-request-animation-frame.is-playing .an-lane i { animation: an-lane 1s linear infinite alternate; }

.an-duration-list, .an-easing-list { display: grid; width: 100%; gap: 8px; }
.animation-demo-duration-token.is-running .fast i { animation: an-lane 120ms ease-out both; }
.animation-demo-duration-token.is-running .base i { animation: an-lane 240ms ease-out both; }
.animation-demo-duration-token.is-running .slow i { animation: an-lane 480ms ease-out both; }
.animation-demo-easing-curve.is-running .an-lane i { animation: an-lane var(--motion-duration) both; }
.animation-demo-easing-curve .linear i { animation-timing-function: linear !important; }
.animation-demo-easing-curve .enter i { animation-timing-function: cubic-bezier(0,0,.2,1) !important; }
.animation-demo-easing-curve .exit i { animation-timing-function: cubic-bezier(.4,0,1,1) !important; }
.animation-demo-animation-delay .an-stage { align-content: center; gap: 12px; }
.animation-demo-animation-delay.is-running .an-lane i { animation: an-lane 380ms ease-out both; }
.animation-demo-animation-delay.is-running .delayed i { animation-delay: 240ms; }

.an-stagger { display: flex; gap: 7px; }
.an-stagger i { display: grid; width: 30px; height: 42px; place-items: center; border-radius: 6px; background: var(--an-surface); border: 1px solid var(--an-line); color: var(--an-blue); font-style: normal; font-weight: 900; opacity: .25; transform: translateY(14px); }
.animation-demo-staggered-animation.is-running .an-stagger i { animation: an-stagger 360ms ease-out both; }
.animation-demo-staggered-animation.is-running .an-stagger i:nth-child(2) { animation-delay: 70ms; }
.animation-demo-staggered-animation.is-running .an-stagger i:nth-child(3) { animation-delay: 140ms; }
.animation-demo-staggered-animation.is-running .an-stagger i:nth-child(4) { animation-delay: 210ms; }

.an-spring-line { position: absolute; right: 18px; bottom: 16px; left: 18px; height: 2px; background: var(--an-line); }
.an-spring-box { z-index: 1; }
.animation-demo-spring-animation.is-running .an-spring-box { animation: an-spring 800ms both; }
.an-sprite { display: flex; gap: 5px; }
.an-sprite i { width: 24px; height: 34px; border: 1px solid var(--an-line); border-radius: 5px; background: var(--an-surface); opacity: .28; }
.an-sprite i::after { display: block; width: 10px; height: 10px; margin: 10px auto; border-radius: 50% 50% 35% 35%; background: var(--an-blue); content: ""; }
.animation-demo-stepped-animation.is-playing .an-sprite i { animation: an-frame 800ms steps(1,end) infinite; }
.animation-demo-stepped-animation.is-playing .an-sprite i:nth-child(2) { animation-delay: 200ms; }
.animation-demo-stepped-animation.is-playing .an-sprite i:nth-child(3) { animation-delay: 400ms; }
.animation-demo-stepped-animation.is-playing .an-sprite i:nth-child(4) { animation-delay: 600ms; }

.an-swap, .an-crossfade { position: relative; display: grid; width: 110px; height: 52px; place-items: center; border: 1px solid var(--an-line); border-radius: 8px; background: var(--an-surface); }
.an-swap b, .an-crossfade b { position: absolute; transition: opacity 300ms ease; }
.an-swap b:last-child, .an-crossfade b:last-child { opacity: 0; }
.is-active .an-swap b:first-child, .is-active .an-crossfade b:first-child { opacity: 0; }
.is-active .an-swap b:last-child, .is-active .an-crossfade b:last-child { opacity: 1; }
.an-window { position: relative; width: 135px; height: 66px; overflow: hidden; border: 1px solid var(--an-line); border-radius: 8px; background: var(--an-surface); }
.an-slide-box { position: absolute; top: 15px; left: 47px; }
.animation-demo-slide-transition.is-running .an-slide-box { animation: an-slide var(--motion-duration) cubic-bezier(.2,.8,.2,1) both; }
.an-scale-box { transform-origin: 0 0; }
.animation-demo-scale-transition.is-running .an-scale-box { animation: an-scale var(--motion-duration) cubic-bezier(.2,.8,.2,1) both; }
.an-origin { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--an-red); transform: translate(-20px,-18px); }
.an-disclosure { display: flex; width: 120px; align-items: center; justify-content: space-between; }
.an-disclosure i { font-style: normal; transition: transform var(--motion-duration) ease; }
.is-running .an-disclosure i { transform: rotate(-180deg); }
.an-reveal { display: grid; width: 140px; height: 52px; place-items: center; border-radius: 8px; background: linear-gradient(135deg,var(--an-blue),var(--an-cyan)); color: #fff; font-weight: 900; clip-path: inset(0 100% 0 0); }
.animation-demo-reveal-wipe.is-running .an-reveal { animation: an-reveal var(--motion-duration) ease-out both; }
.an-blur { display: flex; gap: 10px; align-items: center; }
.an-blur > * { border: 1px solid var(--an-line); border-radius: 6px; background: var(--an-surface); padding: 12px; transition: filter 320ms, opacity 320ms, transform 320ms; }
.an-blur span { filter: blur(2px); opacity: .45; }
.is-active .an-blur b { filter: blur(2px); opacity: .45; transform: scale(.96); }
.is-active .an-blur span { filter: none; opacity: 1; transform: scale(1.04); }
.an-accordion { width: min(100%, 170px); overflow: hidden; border: 1px solid var(--an-line); border-radius: 7px; background: var(--an-surface); }
.an-accordion b { display: flex; justify-content: space-between; padding: 8px; }
.an-accordion b i { font-style: normal; transition: transform 300ms; }
.an-accordion p { max-height: 0; margin: 0; overflow: hidden; color: var(--an-muted); opacity: 0; padding: 0 8px; transition: max-height 360ms ease, opacity 240ms, padding 360ms; }
.is-active .an-accordion p { max-height: 55px; opacity: 1; padding: 0 8px 8px; }
.is-active .an-accordion b i { transform: rotate(-180deg); }
.an-toast-sample { display: grid; min-width: 135px; gap: 2px; border-left: 4px solid var(--an-green); border-radius: 7px; background: var(--an-surface); box-shadow: 0 8px 22px rgba(20,40,70,.15); padding: 10px; transform: translateX(180px); opacity: 0; }
.an-toast-sample span { color: var(--an-muted); }
.animation-demo-fly-in-transition.is-running .an-toast-sample { animation: an-fly 600ms cubic-bezier(.2,.8,.2,1) both; }

.an-flip { position: relative; width: 126px; height: 65px; transform-style: preserve-3d; transition: transform 620ms cubic-bezier(.2,.8,.2,1); }
.an-flip > div { position: absolute; inset: 0; display: grid; place-content: center; gap: 3px; border: 1px solid var(--an-line); border-radius: 8px; background: var(--an-surface); backface-visibility: hidden; text-align: center; }
.an-flip > div:last-child { background: var(--an-blue); color: #fff; transform: rotateY(180deg); }
.an-flip span { color: var(--an-muted); }
.an-flip > div:last-child span { color: #dbe8ff; }
.is-active .an-flip { transform: rotateY(180deg); }

.an-hover-card { display: flex; width: 145px; min-height: 48px; align-items: center; justify-content: space-between; color: var(--an-ink) !important; transition: transform 180ms ease, border-color 180ms, box-shadow 180ms; }
@media (hover:hover) { .an-hover-card:hover { border-color: var(--an-blue); box-shadow: 0 8px 20px rgba(7,93,232,.14); transform: translateY(-3px); } }
.an-hover-card:focus-visible { border-color: var(--an-blue); box-shadow: 0 8px 20px rgba(7,93,232,.14); transform: translateY(-3px); }
.an-press { min-width: 92px; min-height: 38px; background: var(--an-blue) !important; color: #fff !important; transition: transform 90ms, filter 90ms; }
.an-press:active, .an-press.is-pressed { transform: scale(.94); filter: brightness(.88); }
.an-focus-row { display: flex; gap: 6px; }
.an-focus-row button { min-width: 38px; transition: box-shadow 180ms; }
.an-focus-row button:focus-visible { box-shadow: 0 0 0 5px color-mix(in srgb, var(--an-blue) 17%, transparent); }
.an-ripple { position: relative; min-width: 100px; min-height: 38px; overflow: hidden; background: var(--an-blue) !important; color: #fff !important; }
.an-ripple span { position: relative; z-index: 1; }
.an-ripple i { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.45); opacity: 0; transform: translate(-50%,-50%) scale(0); }
.an-ripple.is-rippling i { animation: an-ripple 520ms ease-out; }
.an-field { display: grid; width: 150px; gap: 4px; }
.an-field span { font-weight: 800; }
.an-field input { width: 100%; border: 1px solid var(--an-red); border-radius: 5px; background: var(--an-surface); color: var(--an-ink); padding: 6px; }
.an-field small { color: var(--an-red); }
.animation-demo-validation-shake.is-running .an-field { animation: an-shake 340ms ease-out; }
.an-success { display: grid; justify-items: center; gap: 5px; color: var(--an-green); }
.an-success svg { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 3; }
.an-success circle { opacity: .25; }
.an-success path { stroke-dasharray: 31; stroke-dashoffset: 31; }
.animation-demo-success-checkmark.is-running .an-success path { animation: an-draw 520ms ease-out both; }
.an-morph { display: flex; min-width: 112px; align-items: center; gap: 8px; color: var(--an-ink) !important; }
.an-morph i { position: relative; width: 16px; height: 16px; }
.an-morph i::before, .an-morph i::after { position: absolute; inset: 2px auto 2px 3px; width: 4px; border-radius: 2px; background: var(--an-blue); content: ""; transition: transform 300ms, clip-path 300ms; }
.an-morph i::after { left: 10px; }
.is-active .an-morph i::before { clip-path: polygon(0 0,100% 50%,0 100%); transform: scaleX(2); }
.is-active .an-morph i::after { opacity: 0; transform: translateX(-5px); }
.an-progress { display: grid; width: 150px; gap: 6px; }
.an-progress div { display: flex; justify-content: space-between; }
.an-progress progress { width: 100%; height: 8px; accent-color: var(--an-blue); }
.an-loading { display: flex; align-items: center; gap: 8px; }
.an-loading i { width: 25px; height: 25px; border: 3px solid var(--an-line); border-top-color: var(--an-blue); border-radius: 50%; }
.is-playing .an-loading i { animation: an-spin 700ms linear infinite; }
.an-skeleton { display: grid; width: 150px; grid-template-columns: 38px 1fr; gap: 7px; }
.an-skeleton i { height: 13px; border-radius: 8px; background: linear-gradient(90deg,var(--an-line),var(--an-surface),var(--an-line)); background-size: 200% 100%; }
.an-skeleton i:first-child { grid-row: span 3; height: 53px; border-radius: 7px; }
.an-skeleton i:last-child { width: 65%; }
.is-playing .an-skeleton i { animation: an-shimmer 1.2s linear infinite; }

.an-view { display: grid; width: 150px; height: 70px; grid-template-columns: 42px 1fr; overflow: hidden; border: 1px solid var(--an-line); border-radius: 7px; background: var(--an-surface); }
.an-view aside { background: color-mix(in srgb,var(--an-blue) 12%,var(--an-surface)); transition: width 420ms, transform 420ms; }
.an-view main { display: grid; align-content: center; gap: 7px; padding: 10px; transition: transform 420ms; }
.an-view main i { height: 10px; border-radius: 7px; background: var(--an-line); }
.is-active .an-view { grid-template-columns: 1fr; }
.is-active .an-view aside { position: absolute; width: 100%; height: 18px; }
.is-active .an-view main { transform: translateY(8px); }
.an-shared { position: relative; display: flex; width: 160px; justify-content: space-between; color: var(--an-muted); }
.an-shared i { position: absolute; left: 21px; top: -18px; display: grid; width: 42px; height: 42px; place-items: center; border-radius: 7px; background: var(--an-blue); color: #fff; font-style: normal; transition: transform 620ms cubic-bezier(.2,.8,.2,1), border-radius 620ms; }
.is-active .an-shared i { border-radius: 50%; transform: translateX(78px) scale(1.22); }
.an-modal-scene { position: relative; width: 165px; height: 82px; overflow: hidden; border-radius: 7px; background: var(--an-surface); }
.an-modal-scene > i { position: absolute; inset: 0; background: rgba(9,18,34,.58); opacity: 0; transition: opacity 280ms; }
.an-modal-scene section { position: absolute; top: 18px; right: 18px; left: 18px; display: grid; gap: 4px; border-radius: 7px; background: var(--an-surface); box-shadow: 0 12px 28px rgba(0,0,0,.18); padding: 10px; opacity: 0; transform: translateY(10px) scale(.96); transition: transform 320ms, opacity 240ms; }
.an-modal-scene section span { color: var(--an-muted); }
.is-active .an-modal-scene > i, .is-active .an-modal-scene section { opacity: 1; }
.is-active .an-modal-scene section { transform: none; }
.an-drawer-scene { position: relative; width: 165px; height: 82px; overflow: hidden; border: 1px solid var(--an-line); border-radius: 7px; background: var(--an-surface); }
.an-drawer-scene aside { position: absolute; z-index: 1; inset: 0 auto 0 0; display: grid; width: 92px; align-content: center; gap: 5px; background: var(--an-surface); box-shadow: 5px 0 16px rgba(12,31,62,.15); padding: 10px; transform: translateX(-105%); transition: transform 360ms cubic-bezier(.2,.8,.2,1); }
.an-drawer-scene main { position: absolute; inset: 0; background: linear-gradient(135deg,var(--an-soft),color-mix(in srgb,var(--an-blue) 7%,var(--an-soft))); }
.is-active .an-drawer-scene aside { transform: none; }
.an-popover-scene { position: relative; width: 150px; height: 78px; }
.an-popover-scene > button { position: absolute; left: 4px; top: 4px; }
.an-popover-scene section { position: absolute; right: 4px; bottom: 2px; display: grid; gap: 4px; min-width: 82px; border: 1px solid var(--an-line); border-radius: 6px; background: var(--an-surface); box-shadow: 0 8px 20px rgba(12,31,62,.15); padding: 7px; opacity: 0; transform: translateY(-5px) scale(.95); transform-origin: 0 0; transition: 220ms ease-out; }
.is-active .an-popover-scene section { opacity: 1; transform: none; }
.an-tabs { position: relative; display: flex; border-bottom: 1px solid var(--an-line); }
.an-tabs button { border: 0; color: var(--an-muted); padding: 7px; }
.an-tabs i { position: absolute; bottom: -1px; left: 0; width: 48px; height: 2px; background: var(--an-blue); transition: transform 360ms cubic-bezier(.2,.8,.2,1); }
.an-tabs[data-step="1"] i { transform: translateX(49px); }
.an-tabs[data-step="2"] i { transform: translateX(97px); }
.an-carousel { display: grid; width: 145px; gap: 5px; overflow: hidden; }
.an-carousel > div { display: flex; width: 200%; transition: transform 420ms cubic-bezier(.2,.8,.2,1); }
.an-carousel article { display: grid; width: 50%; height: 58px; place-items: center; border-radius: 7px; background: var(--an-blue); color: #fff; font-size: 18px; font-weight: 900; }
.an-carousel article:last-child { background: var(--an-green); }
.an-carousel span { color: var(--an-muted); text-align: center; }
.is-active .an-carousel > div { transform: translateX(-50%); }
.an-layout-list { display: flex; gap: 6px; }
.an-layout-list i { display: grid; width: 42px; height: 50px; place-items: center; border: 1px solid var(--an-line); border-radius: 6px; background: var(--an-surface); color: var(--an-blue); font-style: normal; font-weight: 900; transition: transform 480ms cubic-bezier(.2,.8,.2,1); }
.is-reordered .an-layout-list i:first-child { transform: translateX(96px); }
.is-reordered .an-layout-list i:nth-child(2), .is-reordered .an-layout-list i:nth-child(3) { transform: translateX(-48px); }
.an-drag { display: grid; width: 150px; gap: 7px; }
.an-drag i { border: 1px solid var(--an-line); border-radius: 6px; background: var(--an-surface); color: var(--an-ink); font-style: normal; padding: 7px; transition: transform 440ms, border-color 440ms; }
.an-drag .target { border-style: dashed; color: var(--an-muted); text-align: center; }
.is-dropped .an-drag i:first-child { transform: translateY(39px) scale(.96); }
.is-dropped .an-drag .target { border-color: var(--an-blue); transform: translateY(-39px); }

.an-scroll-scene { display: grid; width: 150px; gap: 7px; }
.an-scroll-scene i { height: 14px; border-radius: 7px; background: var(--an-line); transform: translateY(12px); opacity: .15; }
.an-scroll-scene i:first-child { width: 66%; background: var(--an-blue); }
.an-scroll-scene i:last-child { width: 42%; }
.animation-demo-scroll-reveal.is-running .an-scroll-scene i { animation: an-stagger 360ms ease-out both; }
.animation-demo-scroll-reveal.is-running .an-scroll-scene i:nth-child(2) { animation-delay: 90ms; }
.animation-demo-scroll-reveal.is-running .an-scroll-scene i:nth-child(3) { animation-delay: 180ms; }
.an-reading { position: relative; display: grid; width: 150px; grid-template-columns: 1fr auto; gap: 8px; padding-top: 10px; }
.an-reading i { position: absolute; top: 0; left: 0; width: 18%; height: 4px; border-radius: 4px; background: var(--an-blue); transition: width 600ms ease-out; }
.an-reading span { color: var(--an-muted); }
.is-active .an-reading i { width: 68%; }
.an-parallax { position: relative; width: 165px; height: 80px; overflow: hidden; border-radius: 7px; background: linear-gradient(#9eddf3,#eaf7fc); }
.an-parallax i { position: absolute; left: -15%; right: -15%; bottom: -30px; height: 66px; border-radius: 50%; background: #5cbb88; }
.an-parallax i:nth-child(2) { bottom: -44px; background: #217956; }
.an-parallax b { position: absolute; inset: 0; display: grid; place-items: center; color: #123b56; letter-spacing: .12em; }
.animation-demo-parallax-effect.is-running .an-parallax i:first-child { animation: an-parallax-a 1.2s ease-in-out both; }
.animation-demo-parallax-effect.is-running .an-parallax i:nth-child(2) { animation: an-parallax-b 1.2s ease-in-out both; }
.an-number { display: grid; justify-items: center; gap: 2px; }
.an-number small { color: var(--an-muted); }
.an-number b { color: var(--an-blue); font-size: 24px; font-variant-numeric: tabular-nums; }
.an-number span { color: var(--an-green); font-weight: 800; }
.an-chart { display: flex; width: 150px; height: 72px; align-items: end; justify-content: space-around; border-bottom: 1px solid var(--an-line); }
.an-chart i { width: 22px; height: var(--bar); border-radius: 4px 4px 0 0; background: var(--an-blue); transition: height 620ms cubic-bezier(.2,.8,.2,1), background 620ms; }
.is-active .an-chart i { background: var(--an-green); }
.is-active .an-chart i:nth-child(1) { height: 72%; }
.is-active .an-chart i:nth-child(2) { height: 48%; }
.is-active .an-chart i:nth-child(3) { height: 88%; }
.is-active .an-chart i:nth-child(4) { height: 62%; }
.an-path { width: 170px; height: 70px; fill: none; stroke: var(--an-blue); stroke-width: 4; stroke-linecap: round; }
.an-path path { stroke-dasharray: 260; stroke-dashoffset: 260; }
.animation-demo-svg-path-drawing.is-running .an-path path { animation: an-draw 1.1s ease-out both; }
.an-motion-path { position: relative; width: 180px; height: 70px; }
.an-motion-path svg { position: absolute; inset: 0; fill: none; stroke: var(--an-line); stroke-width: 2; stroke-dasharray: 4 4; }
.an-motion-path i { position: absolute; left: 3px; top: 48px; width: 14px; height: 14px; border-radius: 50%; background: var(--an-blue); offset-path: path("M8 55C42 3 99 69 180 14"); offset-distance: 0; }
.is-playing .an-motion-path i { animation: an-path-motion 1.6s ease-in-out infinite alternate; }
.an-sprite-character { display: grid; justify-items: center; gap: 6px; }
.an-sprite-character i { position: relative; width: 34px; height: 48px; border-radius: 14px 14px 10px 10px; background: var(--an-blue); }
.an-sprite-character i::before, .an-sprite-character i::after { position: absolute; bottom: -8px; width: 8px; height: 16px; border-radius: 5px; background: var(--an-ink); content: ""; }
.an-sprite-character i::before { left: 6px; }
.an-sprite-character i::after { right: 6px; }
.is-playing .an-sprite-character i { animation: an-walk 640ms steps(4,end) infinite; }

.an-player { display: grid; justify-items: center; gap: 8px; }
.an-player i { position: relative; display: block; width: 120px; height: 5px; border-radius: 5px; background: var(--an-line); }
.an-player i::before { position: absolute; width: 12px; height: 12px; top: -3px; left: 0; border-radius: 50%; background: var(--an-blue); content: ""; }
.is-playing .an-player i::before { animation: an-player var(--motion-duration) linear infinite alternate; }
.an-ticker { width: 160px; overflow: hidden; border: 1px solid var(--an-line); border-radius: 6px; background: var(--an-surface); }
.an-ticker div { display: flex; width: max-content; gap: 22px; padding: 8px; }
.an-ticker span { white-space: nowrap; }
.is-playing .an-ticker div { animation: an-ticker 4s linear infinite; }
.an-compare { display: grid; width: 160px; grid-template-columns: 1fr 1fr; gap: 7px; }
.an-compare > div { display: grid; justify-items: center; gap: 8px; border: 1px solid var(--an-line); border-radius: 6px; background: var(--an-surface); padding: 8px; }
.an-compare i { width: 18px; height: 18px; border-radius: 50%; background: var(--an-blue); }
.animation-demo-reduced-motion-variant.is-running .an-compare > div:first-child i { animation: an-bounce 550ms ease-in-out infinite alternate; }
.animation-demo-reduced-motion-variant.is-running .an-compare > div:last-child i { animation: an-dissolve 1.1s linear infinite alternate; }
.animation-demo-reduced-motion-variant.is-reduced .an-compare > div:first-child i { animation: none; opacity: 1; }
.an-reversible { position: relative; width: 160px; display: flex; justify-content: space-between; border-bottom: 2px solid var(--an-line); padding-bottom: 8px; color: var(--an-muted); }
.an-reversible i { position: absolute; left: 11px; bottom: -8px; width: 14px; height: 14px; border-radius: 50%; background: var(--an-blue); transition: transform var(--motion-duration) cubic-bezier(.2,.8,.2,1); }
.is-active .an-reversible i { transform: translateX(124px); }
.an-rate { position: absolute; right: 12px; bottom: 8px; color: var(--an-blue); font-size: 12px; }
.is-playing .an-speed-lane i { animation: an-lane calc(var(--motion-duration) / var(--motion-rate,1)) linear infinite alternate; }
.an-visibility-card { display: grid; justify-items: center; gap: 3px; min-width: 130px; border: 1px solid var(--an-line); border-radius: 7px; background: var(--an-surface); padding: 11px; transition: opacity 260ms, filter 260ms; }
.an-visibility-card i { width: 10px; height: 10px; border-radius: 50%; background: var(--an-green); }
.an-visibility-card span { color: var(--an-muted); }
.is-paused-visibility .an-visibility-card { filter: grayscale(1); opacity: .55; }
.an-browser-tab { display: grid; width: 150px; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; border: 1px solid var(--an-line); border-radius: 7px; background: var(--an-surface); padding: 9px; }
.an-browser-tab i { width: 9px; height: 9px; border-radius: 50%; background: var(--an-green); }
.an-browser-tab span { color: var(--an-green); }
.is-paused-visibility .an-browser-tab i { background: var(--an-muted); }
.is-paused-visibility .an-browser-tab span { color: var(--an-muted); }
.an-performance { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: center; }
.an-performance i { border-radius: 999px; background: color-mix(in srgb,var(--an-blue) 10%,var(--an-surface)); color: var(--an-blue); font-style: normal; padding: 5px 8px; }
.an-performance b { justify-self: end; color: var(--an-green); font-size: 23px; font-variant-numeric: tabular-nums; }
.an-performance span { color: var(--an-muted); }
.animation-demo-transform-opacity-animation.is-running .an-performance i { animation: an-performance var(--motion-duration) ease-out both; }

.concept-card-preview .animation-demo { font-size: 7px; }
.concept-card[data-card-id^="animation-"] .concept-card-header h4 { overflow-wrap: anywhere; }
.concept-card-preview .animation-demo button { padding: 3px 4px; }
.concept-card-preview .an-stage { min-height: 104px; padding: 9px; }
.concept-card-preview .an-toolbar > span { font-size: 6.5px; }
.concept-card-preview .an-toolbar > div { max-width: 82px; flex-wrap: wrap; justify-content: flex-end; }

[data-theme="dark"] .animation-demo { --an-green: #55d5a8; --an-red: #ff7c8c; --an-amber: #f0ad4e; }

@keyframes an-keyframe { 0% { transform: translateX(-48px) rotate(0); } 50% { transform: translateX(0) translateY(-20px) rotate(180deg); } 100% { transform: translateX(48px) rotate(360deg); } }
@keyframes an-orbit { to { transform: rotate(360deg); } }
@keyframes an-lane { from { transform: translateX(0); } to { transform: translateX(min(70px, 9vw)); } }
@keyframes an-stagger { from { opacity: .15; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes an-spring { 0% { transform: translateY(-35px); } 55% { transform: translateY(8px); } 72% { transform: translateY(-4px); } 86% { transform: translateY(2px); } 100% { transform: none; } }
@keyframes an-frame { 0%,24% { opacity: 1; transform: translateY(-4px); } 25%,100% { opacity: .28; transform: none; } }
@keyframes an-slide { from { opacity: 0; transform: translateX(-75px); } to { opacity: 1; transform: none; } }
@keyframes an-scale { from { opacity: 0; transform: scale(.35); } to { opacity: 1; transform: none; } }
@keyframes an-reveal { to { clip-path: inset(0); } }
@keyframes an-fly { 0% { opacity: 0; transform: translateX(160px); } 70% { opacity: 1; transform: translateX(-4px); } 100% { opacity: 1; transform: none; } }
@keyframes an-ripple { 0% { opacity: .7; transform: translate(-50%,-50%) scale(0); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(18); } }
@keyframes an-shake { 0%,100% { transform: none; } 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
@keyframes an-draw { to { stroke-dashoffset: 0; } }
@keyframes an-spin { to { transform: rotate(360deg); } }
@keyframes an-shimmer { to { background-position: -200% 0; } }
@keyframes an-parallax-a { to { transform: translateX(14px) translateY(-7px); } }
@keyframes an-parallax-b { to { transform: translateX(-12px) translateY(-3px); } }
@keyframes an-path-motion { to { offset-distance: 100%; } }
@keyframes an-walk { 25% { transform: translateY(-4px) rotate(-2deg); } 50% { transform: translateX(5px); } 75% { transform: translateY(-4px) rotate(2deg); } 100% { transform: translateX(10px); } }
@keyframes an-player { to { transform: translateX(108px); } }
@keyframes an-ticker { to { transform: translateX(-55%); } }
@keyframes an-bounce { to { transform: translateY(-18px) scale(1.12); } }
@keyframes an-dissolve { to { opacity: .45; } }
@keyframes an-performance { from { opacity: .2; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 480px) {
  .animation-demo { font-size: 10px; }
  .animation-demo > small, .an-toolbar > span { font-size: 8px; }
  .an-stage { min-height: 125px; }
}

@media (prefers-reduced-motion: reduce) {
  .animation-demo *, .animation-demo *::before, .animation-demo *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .an-parallax i, .an-shared i, .an-toast-sample, .an-slide-box { transform: none !important; }
}

.animation-demo.is-reduced *, .animation-demo.is-reduced *::before, .animation-demo.is-reduced *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}

@media (forced-colors: active) {
  .an-stage, .animation-demo button, .an-view, .an-modal-scene, .an-drawer-scene, .an-accordion, .an-swap, .an-crossfade { border: 1px solid CanvasText; }
  .an-box, .an-chart i, .an-progress progress, .an-orbit i { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}