.dsc-outer {
    --active-1: oklch(75% 0.15 195.032);
    --active-2: oklch(75% 0.15 328.437);
    --active-3: oklch(75% 0.15 109.374);
    transform: rotate(-45deg) scale(0.7);
    width: fit-content;
    height: fit-content;
    margin: auto;
    display: grid;
    gap: 0.5em;
    grid-template-columns: auto auto;
    padding: 0.5em;
    border: none;

    &[data-solved] {
        outline: 2px solid var(--active-1);
    }

    >button {
        font-size: 1.5em;

        &.dsc-submit {
            writing-mode: sideways-rl;
        }
    }
}

button {
    border: 2px outset #000;
    background-color: #eee;

    &:active {
        border: 2px inset #000;
    }
}

.dsc-inner {
    grid-column-start: 1;
    border: 2px inset #000;
    display: grid;
    gap: 0.5em;
    padding: 0.5em;

    >button {
        height: 2em;
        width: 2em;
        aspect-ratio: 1 / 1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2em;

        >span {
            transform: rotate(45deg);
            pointer-events: none;
        }

        &:disabled {
            border: 2px solid #000;
            outline: 1px solid #000;
            color: #000;
        }

        &[data-active="1"] {
            background-color: var(--active-1);
        }

        &[data-active="2"] {
            background-color: var(--active-2);
        }

        &[data-active="3"] {
            background-color: var(--active-3);
        }
    }
}