/* Theming */
    :root {
        --gold1: #e7c78d;
        --gold2: #a6824a;
        --ink: #3d2e12;
        --paper: #fff;
        --shadow: 0 2px 8px rgba(61, 46, 18, .2);
        --shadow-lg: 0 8px 24px rgba(61, 46, 18, .25);
    }

    /* Back to top — circular progress button */
    .scrolltop {
        position: fixed;
        right: 28px;
        bottom: 28px;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--gold1), var(--gold2));
        box-shadow: var(--shadow);
        display: grid;
        place-items: center;
        cursor: pointer;
        border: none;
        outline: none;
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: opacity .25s, transform .25s, box-shadow .25s;
        z-index: 1000;
    }

    .scrolltop.visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .scrolltop:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

    .scrolltop:focus-visible {
        outline: 3px solid #fff8;
        outline-offset: 3px;
    }

    .scrolltop .icon {
        font-weight: 800;
        font-size: 20px;
        color: var(--ink);
        text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
        position: absolute;
    }

    /* Progress ring */
    .scrolltop .ring {
        position: absolute;
        inset: 6px;
        /* equal padding on all sides for the 56px button */
        width: auto;
        height: auto;
        display: block;
        transform: rotate(-90deg);
        /* move the rotation here (see note below) */
    }

    .scrolltop .ring .bg {
        fill: none;
        stroke: rgba(255, 255, 255, .35);
        stroke-width: 4;
    }

    .scrolltop .ring .fg {
        fill: none;
        stroke: #fff;
        stroke-width: 4;
        stroke-linecap: round;
        transform: rotate(-90deg);
        transform-origin: 50% 50%;
        stroke-dasharray: 125.66;
        /* 2πr with r=20 */
        stroke-dashoffset: 125.66;
    }

    /* Share FAB + radial menu */
    .share {
        position: fixed;
        left: 28px;
        bottom: 28px;
        z-index: 1000;
    }

    .share__fab {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--gold1), var(--gold2));
        border: none;
        cursor: pointer;
        box-shadow: var(--shadow);
        display: grid;
        place-items: center;
        transition: transform .25s, box-shadow .25s;
    }

    .share__fab:hover {
        transform: translateY(-2px) scale(1.02);
        box-shadow: var(--shadow-lg);
    }

    .share__fab:focus-visible {
        outline: 3px solid #fff8;
        outline-offset: 3px;
    }

    .share__plus {
        display: block;
        color: var(--ink);
        font-weight: 800;
        font-size: 26px;
        text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
        transform: rotate(0);
        transition: transform .25s;
    }

    .share__fab[aria-expanded="true"] .share__plus {
        transform: rotate(45deg);
    }

    .share__menu {
        position: absolute;
        inset: auto auto 70px 10px;
        width: 0;
        height: 0;
        pointer-events: none;
        opacity: 0;
        transition: opacity .25s;
    }

    .share__menu.active {
        pointer-events: auto;
        opacity: 1;
    }

    /* Radial layout: items fly out around 110deg arc */
    .share__item {
        position: absolute;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: var(--paper);
        box-shadow: var(--shadow);
        transform: translate(0, 0) scale(.8);
        opacity: 0;
        transition: transform .36s cubic-bezier(.2, .7, .2, 1), opacity .36s;
        will-change: transform, opacity;
        border: none;
    }

    .share__item svg {
        width: 24px;
        height: 24px;
        fill: var(--ink);
    }

    .share__item:hover {
        transform: scale(.9) translate(var(--tx), var(--ty));
    }

    .share__item:focus-visible {
        outline: 3px solid #0002;
        outline-offset: 3px;
    }

    /* positions (staggered) */
    .share__menu.active .share__item {
        opacity: 1;
        transform: translate(var(--tx), var(--ty)) scale(1);
    }

    .share__item:nth-child(1) {
        --angle: -100deg;
    }

    .share__item:nth-child(2) {
        --angle: -60deg;
    }

    .share__item:nth-child(3) {
        --angle: -20deg;
    }

    .share__item:nth-child(4) {
        --angle: 20deg;
    }

    .share__item:nth-child(5) {
        --angle: 60deg;
    }

    /* copy */
    .share__item {
        --radius: 90px;
        --tx: calc(cos(var(--angle)) * var(--radius));
        --ty: calc(sin(var(--angle)) * var(--radius));
    }

    /* Small screens */
    @media (max-width: 600px) {

        .scrolltop,
        .share__fab {
            width: 48px;
            height: 48px;
        }

        .share {
            left: 20px;
            bottom: 20px;
        }

        .scrolltop {
            right: 20px;
            bottom: 20px;
        }

        .share__item {
            width: 44px;
            height: 44px;
        }

        .share__item svg {
            width: 22px;
            height: 22px;
        }

        .share__item {
            --radius: 80px;
        }

        .scrolltop .ring {
            inset: 4px;
        }

    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {

        .scrolltop,
        .share__fab,
        .share__item {
            transition: none;
        }
    }