/*
 * Continuous corners use the superellipse |x/a|^4 + |y/b|^4 = 1.
 * CSS superellipse(2) uses exponent 2^2 = 4 (the squircle keyword).
 * https://drafts.csswg.org/css-borders-4/#corner-shaping
 *
 * Apply only to rounded square/rectangular surfaces, never pills or circles.
 * Keep each component's border-radius, including zero and asymmetric radii.
 * Native corner shaping also contours borders, shadows and overflow clips.
 * Browsers without support retain the original rounded-corner rendering.
 */
:root {
    --corner-shape: superellipse(2);
}

@supports (corner-shape: superellipse(2)) {
    :where(
        img,
        .block-image:not(.is-rounded) > a,
        code, kbd, pre, samp,
        input:not([type]),
        input[type="color"], input[type="date"],
        input[type="datetime-local"], input[type="datetime"],
        input[type="email"], input[type="month"], input[type="number"],
        input[type="password"], input[type="search"], input[type="tel"],
        input[type="text"], input[type="time"], input[type="url"], input[type="week"],
        optgroup, select, textarea,
        .table-wrap, table,
        iframe, embed, object, .frame-wrapper,
        .sub-menu, .mobile-menu,
        .widget, .entry-image, .entry, .entry-wrap,
        .icon-wrap,
        .hover-box, .backdrop-box,
        .has-border-radius, .is-boxed, .is-rounded,
        .search-results mark,
        #message, #message a
    ):not(:where(
        .is-circle, .is-pill,
        .type-circle *,
        .is-circle *, .is-pill *,
        button, .button, [type="button"], [type="reset"], [type="submit"],
        .dark-mode-toggle, .shared-counts-button,
        #custom-cursor, #cursor-label
    )) {
        corner-shape: var(--corner-shape);
    }

    /* The card's shading follows its surface; pill button overlays stay round. */
    .backdrop-box::before,
    .backdrop-box::after {
        corner-shape: inherit;
    }
}