%story-dark {
    --storyColor-dark-l: calc(var(--storyColor-l) - 20%);
    --storyColor-dark: hsl(
        var(--storyColor-h),
        var(--storyColor-s),
        var(--storyColor-dark-l)
    );
}

:root {
    @extend %story-dark;

    --storyColor-bright-l: calc(var(--storyColor-l) + 20%);
    --storyColor-bright-s: calc(var(--storyColor-s) + 20%);
    --storyColor-bright: hsl(
        var(--storyColor-h),
        var(--storyColor-bright-s),
        var(--storyColor-bright-l)
    );

    --msr-unit-margin: 1.2em;
    --msr-unit-marginSmall: 0.9em;
    --msr-icon-border: 12px 4px;
    --msr-icon-size: 60px;
    --msr-icon-sizeSmall: 45px;
    --msr-name-case: uppercase;
    // --msr-line-filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.05)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
    --msr-line-border: 8px;
    --msr-line-size: 1em;
    --msr-line-gap: 2.5px;

    --msr-tippy-bg: rgba(0, 0, 0, 0.75);

    --msr-marker-lineColor: #bbb;
}

[character] {
    --light-mode: hsl(var(--hue), 54%, 93%);
    --dark-mode: hsl(var(--hue), 12%, 25%);
    --fill-mode: hsl(var(--hue), 25%, 42%);
}

.preview-wrapper,
.info-area,
a.msr-fn-inline {
    @extend %story-dark;
}