.arc-spinner.svelte-4tvimf {
        display: block;
        flex: none;
        /* transform-only → Chromium runs it on the compositor, it keeps turning while the main thread is busy */
        animation: svelte-4tvimf-spin var(--turn-duration) linear infinite;
        will-change: transform;

        circle:where(.svelte-4tvimf) {
            fill: none;
            stroke: currentColor;
            stroke-linecap: round;
        }
    }

    @keyframes svelte-4tvimf-spin {
        to {
            transform: rotate(1turn);
        }
    }

    @keyframes svelte-4tvimf-pulse {
        to {
            opacity: 0.35;
        }
    }

    /* no motion, but still alive: the standing arc breathes (opacity = compositor as well) */
    @media (prefers-reduced-motion: reduce) {
        .arc-spinner.svelte-4tvimf {
            animation: svelte-4tvimf-pulse 1.2s ease-in-out infinite alternate;
            will-change: opacity;
        }
    }

    .preloader.svelte-16ylr1u {
        /* Overlay, not a page: the configurator mounts underneath as soon as its data
           arrives (so the 3D app can start loading) and stays covered until it reports
           ready. Above all app chrome (max 4000), below the debugger. */
        position: fixed;
        inset: 0;
        z-index: 5000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2.5rem;
        padding: 1.25rem;
        box-sizing: border-box;
        background-color: var(--lib-control-bg);
        color: var(--lib-control-text-secondary);

        .spinner:where(.svelte-16ylr1u) {
            /* ink like the wordmark above: a pale brand would vanish on the light background */
            color: var(--lib-control-color-primary-text);
        }

        .logo:where(.svelte-16ylr1u) {
            /* ink, not the verbatim primary: the wordmark must stay legible on the light
               preloader background (a pale yellow brand reads as ochre here) */
            color: var(--lib-control-color-primary-text);
            width: min(10rem, 100%);
            max-height: 10rem;
            display: flex;
            align-items: center;
            justify-content: center;

            img:where(.svelte-16ylr1u) {
                display: block;
                width: 100%;
                height: auto;
            }
        }

        .title:where(.svelte-16ylr1u) {
            font-size: 0.875rem;
            font-weight: 500;
            line-height: normal;
        }

        .subtitle:where(.svelte-16ylr1u) {
            font-size: 0.6875rem;
            font-weight: 500;
            line-height: normal;
        }
    }