/* /css-animation-generator only: keyframe rows, the stage and the easing curve. Scoped under #aniApp. */
#aniApp .xr-frames { display: grid; gap: 8px; }
#aniApp .xr-frame { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; align-items: end; padding: 8px 10px; border: 1px solid var(--bm-line); border-radius: 12px; background: var(--bm-surface); }
#aniApp .xr-frame .ic-field { gap: 3px; }
#aniApp .xr-frame .ic-field label { font-size: .72rem; }
#aniApp .xr-frame input { width: 100%; min-width: 0; min-height: 38px; padding: 4px 6px; border: 1px solid var(--bm-line); border-radius: 8px; font: inherit; font-size: .85rem; background: var(--bm-surface); color: var(--bm-ink); }
#aniApp .xr-frame input:focus { border-color: var(--bm-accent); outline: 3px solid var(--bm-accent-ring); }
#aniApp .xr-ani-stage { display: grid; place-items: center; min-height: 220px; border: 1px solid var(--bm-line); border-radius: 14px; background: var(--bm-bg); overflow: hidden; }
#aniApp .xr-ani-box { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 18px; background: #6366f1; color: #fff; font-weight: 800; }
#aniApp .xr-curve { width: 100%; max-width: 260px; height: auto; display: block; }
#aniApp .xr-curve .xr-grid-line { stroke: var(--bm-line); stroke-width: 1; }
#aniApp .xr-curve .xr-ease { fill: none; stroke: #6366f1; stroke-width: 3; }
#aniApp .xr-curve .xr-handle-line { stroke: #9ca3af; stroke-dasharray: 4 3; }

@media (forced-colors: active) { #aniApp .xr-ani-box { border: 2px solid CanvasText; } #aniApp .xr-curve .xr-ease { stroke: CanvasText; } }