/*SPINNER ino=====*/
.spinner-ino {
    --d: 0.45em; /* Now 1em = parent height due to font-size inheritance */
    /*display: inline-block;*/
    width: 0.1em; /* (4px / 22px ≈ 0.18em) */
    height: 0.1em;
    aspect-ratio: 1/1; /* Ensures perfect circle */
    border-radius: 50%;
    color: var(--accent-color);
    background-color: #bb2d3b00;
    box-shadow:
            calc(1 * var(--d))      calc(0 * var(--d))     0 0,
            calc(0.707 * var(--d))  calc(0.707 * var(--d)) 0 0.02em,
            calc(0 * var(--d))      calc(1 * var(--d))     0 0.03em,
            calc(-0.707 * var(--d)) calc(0.707 * var(--d)) 0 0.04em,
            calc(-1 * var(--d))     calc(0 * var(--d))     0 0.06em,
            calc(-0.707 * var(--d)) calc(-0.707 * var(--d))0 0.07em,
            calc(0 * var(--d))      calc(-1 * var(--d))    0 0.09em;
    animation: l27 1s infinite steps(8);
}
@keyframes l27 {
    100% {transform: rotate(1turn)}
}
.spinner-container {
    line-height: 0; /* Prevents extra space */
    font-size: 2em;
}