.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;}

.anim-css-output{
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
    font-size:.85rem;
    line-height:1.55;
    background:var(--bs-tertiary-bg);
    padding:.75rem 1rem;
    border-radius:.375rem;
    white-space:pre-wrap;
    margin:0;
    color:var(--bs-body-color);
    max-height:300px;
    overflow-y:auto;
}
.anim-css-output .ts-keyword{color:#9b59b6;font-weight:600;}
.anim-css-output .ts-prop{color:#2e86de;}
.anim-css-output .ts-num{color:#e67e22;}
[data-bs-theme="dark"] .anim-css-output .ts-keyword{color:#c792ea;}
[data-bs-theme="dark"] .anim-css-output .ts-prop{color:#82aaff;}
[data-bs-theme="dark"] .anim-css-output .ts-num{color:#f78c6c;}

/* Animation stage */
.anim-stage{
    position:relative;
    height:240px;
    background:repeating-linear-gradient(45deg,
        var(--bs-tertiary-bg) 0 10px,
        var(--bs-body-bg) 10px 20px);
    border:1px solid var(--bs-border-color);
    border-radius:.5rem;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.anim-box{
    width:64px;
    height:64px;
    border-radius:.5rem;
    background:linear-gradient(135deg, var(--bs-primary), var(--bs-info));
    box-shadow:0 6px 20px rgba(13,110,253,.3);
    will-change:transform,opacity,background;
}

/* Preset library */
.anim-presets{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
    gap:.5rem;
}
.anim-preset{
    padding:.6rem .5rem;
    border:1px solid var(--bs-border-color);
    border-radius:.5rem;
    background:var(--bs-body-bg);
    cursor:pointer;
    text-align:center;
    font-size:.85rem;
    transition:all .15s ease;
}
.anim-preset:hover,.anim-preset:focus{
    border-color:var(--bs-primary);
    transform:translateY(-2px);
    box-shadow:0 3px 8px rgba(13,110,253,.15);
}
.anim-preset .ap-name{font-weight:600;}
.anim-preset .ap-desc{font-size:.7rem;color:var(--bs-secondary-color);margin-top:.15rem;}

/* Keyframes table */
.anim-kf-table input[type="number"],
.anim-kf-table input[type="color"],
.anim-kf-table input[type="text"]{
    width:100%;
    min-width:50px;
}
.anim-kf-table .kf-delete{
    padding:.15rem .3rem;
}
.anim-kf-table input[type="color"]{
    height:30px;
    padding:.15rem;
}