/* Cubic Bezier Editor styles */
.bezier-stage{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    max-width:380px;
    margin:0 auto;
    background:var(--bs-body-bg);
    border-radius:.5rem;
    overflow:hidden;
}
.bezier-stage svg{display:block;width:100%;height:100%;touch-action:none;}
.bezier-axis{stroke:var(--bs-border-color);stroke-width:1.5;}
.bezier-bound{stroke:var(--bs-border-color);stroke-width:1;stroke-dasharray:3 3;opacity:.6;}
.bezier-axis-label{fill:var(--bs-secondary-color);font-size:11px;font-family:sans-serif;}
.bezier-handle-line{stroke:var(--bs-info);stroke-width:1.5;stroke-dasharray:4 3;opacity:.8;}
.bezier-curve{stroke:var(--bs-primary);stroke-width:2.5;fill:none;}
.bezier-anchor{fill:var(--bs-primary);stroke:var(--bs-body-bg);stroke-width:2;}
.bezier-handle{fill:var(--bs-info);stroke:#fff;stroke-width:2;cursor:grab;transition:r .15s ease;}
.bezier-handle:hover,.bezier-handle:focus{r:11;outline:none;}
.bezier-handle:active{cursor:grabbing;}
[data-bs-theme="dark"] .bezier-stage{background:rgba(255,255,255,.03);}
[data-bs-theme="dark"] .bezier-handle{stroke:#0f172a;}

/* Grid lines */
.bezier-grid-line{stroke:var(--bs-border-color);stroke-width:.5;opacity:.4;}

/* Animation track */
.bezier-anim-track{
    position:relative;
    height:60px;
    background:linear-gradient(90deg, var(--bs-tertiary-bg) 0%, var(--bs-tertiary-bg) 100%);
    border-radius:.5rem;
    overflow:hidden;
    border:1px solid var(--bs-border-color);
}
.bezier-anim-ball{
    position:absolute;
    top:50%;
    left:6px;
    width:36px;
    height:36px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--bs-primary), var(--bs-info));
    transform:translate(0,-50%);
    box-shadow:0 4px 12px rgba(13,110,253,.35);
}
.bezier-anim-ball-compare{
    background:linear-gradient(135deg, #6c757d, #adb5bd);
    box-shadow:0 4px 12px rgba(108,117,125,.35);
    width:30px;height:30px;
}

/* CSS output */
.css-output{
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
    font-size:.9rem;
    background:var(--bs-tertiary-bg);
    padding:.75rem 1rem;
    border-radius:.375rem;
    white-space:pre-wrap;
    word-break:break-all;
    margin:0;
    color:var(--bs-body-color);
}

/* Preset grid */
.bezier-presets{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
    gap:.75rem;
}
.bezier-preset{
    padding:.5rem;
    border:1px solid var(--bs-border-color);
    border-radius:.5rem;
    cursor:pointer;
    background:var(--bs-body-bg);
    text-align:center;
    transition:all .15s ease;
    font-size:.85rem;
}
.bezier-preset:hover,.bezier-preset:focus{
    border-color:var(--bs-primary);
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(13,110,253,.15);
    outline:none;
}
.bezier-preset svg{display:block;margin:0 auto .25rem;width:60px;height:40px;}
.bezier-preset-curve{stroke:var(--bs-primary);stroke-width:2;fill:none;}
.bezier-preset-name{font-weight:600;font-size:.8rem;}
.bezier-preset-values{color:var(--bs-secondary-color);font-size:.7rem;font-family:ui-monospace,monospace;}