.mascot {
    display: inline-block;
    position: relative;
    width: var(--mascot-size, var(--mascot-preset-size, 28px));
    max-width: 100%;
    aspect-ratio: 1;
    flex-shrink: 0;
    vertical-align: middle;
}
.mascot--small {
    --mascot-preset-size: 28px;
}
.mascot--large {
    --mascot-preset-size: 160px;
}
.mascot {
    --mascot-default-eye-size: 0.13;
    --mascot-default-eye-spacing: 0.22;
    --mascot-default-border-width: 1;
}
.mascot > canvas,
.mascot > .mascot-fallback {
    display: block;
    width: 100%;
    height: 100%;
}
.mascot > canvas { position: absolute; inset: 0; }
.mascot.is-ready > .mascot-fallback { visibility: hidden; }