.AnimationsSection-module__qpJU2q__new{background:var(--color-primary);color:var(--text-color-white);letter-spacing:.04em;vertical-align:1px;border-radius:999px;margin-right:6px;padding:2px 9px;font-size:12px;display:inline-block}.AnimationsSection-module__qpJU2q__layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(32px,5vw,72px);display:grid}@media (max-width:900px){.AnimationsSection-module__qpJU2q__layout{grid-template-columns:minmax(0,1fr)}}.AnimationsSection-module__qpJU2q__demos{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.AnimationsSection-module__qpJU2q__demo{border:1px solid var(--color-gray-lighter);background:var(--background-color);border-radius:16px;flex-direction:column;margin:0;display:flex;overflow:hidden}.AnimationsSection-module__qpJU2q__demo figcaption{border-top:1px solid var(--color-gray-lighter);flex-direction:column;gap:2px;padding:12px 14px;font-size:14px;line-height:1.3;display:flex}.AnimationsSection-module__qpJU2q__demo figcaption span{color:var(--text-color-medium-dark);font-size:13px}.AnimationsSection-module__qpJU2q__stage{justify-content:center;align-items:center;height:200px;display:flex;overflow:hidden}@media (max-width:480px){.AnimationsSection-module__qpJU2q__stage{height:150px}}.AnimationsSection-module__qpJU2q__strip{border:1px solid var(--color-gray-lighter);background:var(--background-color);border-radius:16px;grid-column:1/-1;margin:0;padding:14px}.AnimationsSection-module__qpJU2q__frameRow{grid-template-columns:84px minmax(0,1fr);align-items:center;gap:10px;display:grid}.AnimationsSection-module__qpJU2q__frameRow+.AnimationsSection-module__qpJU2q__frameRow{margin-top:6px}@media (max-width:480px){.AnimationsSection-module__qpJU2q__frameRow{grid-template-columns:minmax(0,1fr);gap:4px}}.AnimationsSection-module__qpJU2q__frameLabel{font-family:var(--font-family-monospace);color:var(--text-color-medium-dark);font-size:12px}.AnimationsSection-module__qpJU2q__frames{grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;margin:0;padding:0;list-style:none;display:grid}.AnimationsSection-module__qpJU2q__frames li{aspect-ratio:1;border:1px solid var(--color-gray-lighter);background:var(--color-gray-lightest);border-radius:5px;position:relative}.AnimationsSection-module__qpJU2q__frames li.AnimationsSection-module__qpJU2q__changed{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}.AnimationsSection-module__qpJU2q__ball{top:50%;left:calc(8% + var(--t) * 56%);aspect-ratio:1;background:var(--color-secondary);border-radius:50%;width:28%;position:absolute;translate:0 -50%}.AnimationsSection-module__qpJU2q__changed .AnimationsSection-module__qpJU2q__ball{background:var(--color-primary)}.AnimationsSection-module__qpJU2q__stripCaption{color:var(--text-color-medium-dark);text-wrap:pretty;margin-top:14px;font-size:13px;line-height:1.5}.AnimationsSection-module__qpJU2q__stripCaption strong{color:var(--color-primary)}.AnimationsSection-module__qpJU2q__copy{flex-direction:column;display:flex}.AnimationsSection-module__qpJU2q__points{flex-direction:column;gap:20px;margin:0;padding:0;list-style:none;display:flex}.AnimationsSection-module__qpJU2q__points li{border-left:3px solid var(--color-secondary);padding-left:18px}.AnimationsSection-module__qpJU2q__points h3{letter-spacing:-.01em;margin:0;font-size:19px;font-weight:700}.AnimationsSection-module__qpJU2q__points h3 code{font-family:var(--font-family-monospace);background:0 0;padding:0;font-size:.92em}.AnimationsSection-module__qpJU2q__points p{color:var(--text-color-medium-dark);text-wrap:pretty;margin:4px 0 0;font-size:16px;line-height:1.55}.AnimationsSection-module__qpJU2q__snippet{color:#dee1e8;color:lab(89.5163% -.223994 -3.77467);font-family:var(--font-family-monospace);background:#16181e;background:lab(8.29785% -.0998601 -4.44778);border-radius:12px;margin:24px 0 0;padding:14px 18px;font-size:13px;line-height:1.6;overflow-x:auto}.AnimationsSection-module__qpJU2q__snippet code{font:inherit;color:inherit;background:0 0;padding:0}[data-color-scheme=dark] .AnimationsSection-module__qpJU2q__snippet{box-shadow:0 0 0 1px var(--color-gray-lighter);background:#090b0f;background:lab(3.02059% -.0278801 -2.17829)}.AnimationsSection-module__qpJU2q__ctas{flex-wrap:wrap;gap:12px;margin-top:24px;display:flex}.AnimationsSection-module__qpJU2q__fine{color:var(--text-color-medium-dark);margin:16px 0 0;font-size:14px;line-height:1.5}.AnimationsSection-module__qpJU2q__fine code{font-family:var(--font-family-monospace);font-size:.92em}