@layer components {
    :root {
        --cipher-board-label: var(--secondary-label);
        --cipher-board-face: var(--tertiary-system-background);
        --cipher-board-sheen: light-dark(
            color-mix(
                in oklch,
                var(--tertiary-system-background) 80%,
                transparent
            ),
            color-mix(in oklch, var(--label) 7%, transparent)
        );
        --cipher-board-highlight: light-dark(
            color-mix(
                in oklch,
                var(--tertiary-system-background) 90%,
                transparent
            ),
            color-mix(in oklch, var(--label) 10%, transparent)
        );
        --cipher-board-edge: light-dark(
            color-mix(in oklch, var(--label) 14%, transparent),
            color-mix(in oklch, var(--system-background) 85%, transparent)
        );
        --cipher-board-shadow: light-dark(
            color-mix(in oklch, var(--label) 12%, transparent),
            color-mix(in oklch, var(--system-background) 70%, transparent)
        );
        --cipher-board-hover: color-mix(
            in oklch,
            var(--tint) 8%,
            var(--cipher-board-face)
        );
        --cipher-board-pressed: light-dark(
            color-mix(in oklch, var(--cipher-board-face) 90%, var(--label)),
            color-mix(
                in oklch,
                var(--cipher-board-face) 70%,
                var(--system-background)
            )
        );
        --cipher-board-selected: light-dark(
            oklch(from var(--tint) 0.93 calc(c * 0.55) h),
            oklch(from var(--tint) 0.37 calc(c * 0.7) h)
        );
        --cipher-board-selected-ring: color-mix(
            in oklch,
            var(--tint) 55%,
            transparent
        );
        --cipher-board-sunken: light-dark(
            color-mix(in oklch, var(--cipher-board-face) 92%, var(--label)),
            color-mix(
                in oklch,
                var(--cipher-board-face) 55%,
                var(--system-background)
            )
        );
        --cipher-board-cipher: var(--secondary-label);
        --cipher-board-glyph: var(--label);
        --cipher-board-line: var(--separator);
        --cipher-board-line-filled: color-mix(
            in oklch,
            var(--label) 40%,
            transparent
        );
        --cipher-board-mark: var(--label);
        --cipher-board-hinted: var(--secondary-label);
        --cipher-board-wrong: light-dark(
            oklch(0.55 0.2 27),
            oklch(0.72 0.17 27)
        );
        --cipher-board-wrong-face: color-mix(
            in oklch,
            var(--cipher-board-wrong) 13%,
            var(--cipher-board-face)
        );
        --cipher-board-duplicate: light-dark(
            oklch(0.5 0.14 70),
            oklch(0.8 0.14 85)
        );
        --cipher-board-duplicate-face: color-mix(
            in oklch,
            var(--cipher-board-duplicate) 15%,
            var(--cipher-board-face)
        );
        --cipher-board-solved: light-dark(
            oklch(from var(--tint) 0.95 calc(c * 0.45) h),
            oklch(from var(--tint) 0.33 calc(c * 0.6) h)
        );
        --cipher-board-solved-ring: color-mix(
            in oklch,
            var(--tint) 35%,
            transparent
        );
        --cipher-board-quote: var(--label);
        --cipher-board-attribution: var(--secondary-label);
    }

    .cipher-board {
        --cipher-board-span: 9;
        --cipher-board-gap: 0.1875rem;
        --cipher-board-tile: min(
            2.5rem,
            (100cqi + var(--cipher-board-gap)) / var(--cipher-board-span) -
                var(--cipher-board-gap)
        );
        --cipher-board-tile-block: max(
            2.75rem,
            var(--cipher-board-tile) * 1.42
        );
        --cipher-board-line-width: max(
            0.125rem,
            var(--cipher-board-tile) * 0.07
        );
        --cipher-board-padding-end: calc(var(--cipher-board-tile) * 0.16);

        container-type: inline-size;
        display: grid;
        gap: 1rem;
        inline-size: 100%;
        -webkit-user-select: none;
        user-select: none;

        &.cipher-board--fit-10 {
            --cipher-board-span: 10;
        }

        &.cipher-board--fit-11 {
            --cipher-board-span: 11;
        }

        &.cipher-board--fit-12 {
            --cipher-board-span: 12;
        }

        &.cipher-board--fit-13 {
            --cipher-board-span: 13;
        }

        &.cipher-board--fit-14 {
            --cipher-board-span: 14;
        }

        &.cipher-board--fit-15 {
            --cipher-board-span: 15;
        }
    }

    .cipher-board__label {
        color: var(--cipher-board-label);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.08rem;
        margin: 0;
        text-align: center;
        text-transform: uppercase;
    }

    .cipher-board__text {
        align-items: flex-end;
        column-gap: calc(var(--cipher-board-tile) * 0.38);
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: calc(var(--cipher-board-tile) * 0.26);
    }

    .cipher-board__word {
        align-items: flex-end;
        display: flex;
        gap: var(--cipher-board-gap);
    }

    .cipher-board__tile {
        --cipher-board-tile-inset: inset 0 0.0625rem 0
            var(--cipher-board-highlight);
        --cipher-board-tile-ring: 0 0 0 0.0625rem var(--cipher-board-edge);
        --cipher-board-tile-lift:
            0 0.0625rem 0 var(--cipher-board-edge),
            0 0.125rem 0.375rem var(--cipher-board-shadow);

        background-color: var(--cipher-board-face);
        background-image: linear-gradient(
            var(--cipher-board-sheen),
            transparent 70%
        );
        block-size: var(--cipher-board-tile-block);
        border-radius: calc(var(--cipher-board-tile) * 0.22);
        box-shadow:
            var(--cipher-board-tile-inset), var(--cipher-board-tile-ring),
            var(--cipher-board-tile-lift);
        color: var(--cipher-board-glyph);
        display: grid;
        flex: none;
        grid-template-rows: auto 1fr;
        inline-size: var(--cipher-board-tile);
        justify-items: center;
        padding-block: calc(var(--cipher-board-tile) * 0.13)
            var(--cipher-board-padding-end);
        position: relative;
        text-decoration: none;
        touch-action: manipulation;
        transition:
            background-color 160ms ease,
            box-shadow 160ms ease,
            scale 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
            translate 90ms ease;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;

        &:any-link {
            cursor: pointer;

            @media (hover: hover) {
                &:hover {
                    background-color: var(--cipher-board-hover);
                }
            }

            &:active {
                --cipher-board-tile-lift: 0 0 0 transparent;

                background-color: var(--cipher-board-pressed);
                translate: 0 0.0625rem;
            }
        }

        &:focus-visible {
            outline: 0.125rem solid var(--tint);
            outline-offset: 0.1875rem;
        }

        &.cipher-board__tile--filled .cipher-board__slot {
            border-block-end-color: var(--cipher-board-line-filled);
        }

        &.cipher-board__tile--selected {
            --cipher-board-tile-ring: 0 0 0 0.0625rem
                var(--cipher-board-selected-ring);
            --cipher-board-tile-lift:
                0 0.125rem 0 var(--cipher-board-edge),
                0 0.375rem 0.75rem var(--cipher-board-shadow);

            background-color: var(--cipher-board-selected);
            background-image: none;
            scale: 1.07;
            z-index: 1;

            & .cipher-board__cipher {
                color: var(--tint);
            }

            & .cipher-board__slot {
                border-block-end-color: var(--tint);
            }
        }

        &.cipher-board__tile--cursor {
            --cipher-board-tile-ring: 0 0 0 0.125rem var(--tint);

            &:focus-visible {
                --cipher-board-tile-ring: 0 0 0 0.0625rem
                    var(--cipher-board-selected-ring);
            }
        }

        &.cipher-board__tile--hinted {
            --cipher-board-tile-inset: inset 0 0.0625rem 0.1875rem
                var(--cipher-board-shadow);
            --cipher-board-tile-lift: 0 0 0 transparent;

            background-color: var(--cipher-board-sunken);
            background-image: none;

            & .cipher-board__glyph {
                color: var(--cipher-board-hinted);
                font-style: italic;
            }

            & .cipher-board__slot {
                border-block-end-style: dotted;
            }
        }

        &.cipher-board__tile--duplicate {
            background-color: var(--cipher-board-duplicate-face);

            & .cipher-board__glyph {
                color: var(--cipher-board-duplicate);
            }

            & .cipher-board__slot {
                border-block-end-color: var(--cipher-board-duplicate);
                border-block-end-style: dashed;
            }
        }

        &.cipher-board__tile--wrong {
            background-color: var(--cipher-board-wrong-face);

            & .cipher-board__glyph {
                color: var(--cipher-board-wrong);
                text-decoration: line-through;
                text-decoration-thickness: 0.125rem;
            }

            & .cipher-board__slot {
                border-block-end-color: var(--cipher-board-wrong);
            }
        }

        &.cipher-board__tile--solved {
            --cipher-board-tile-ring: 0 0 0 0.0625rem
                var(--cipher-board-solved-ring);

            & .cipher-board__cipher {
                color: var(--tint);
            }

            & .cipher-board__slot {
                border-block-end-color: var(--tint);
            }
        }
    }

    .cipher-board__glow {
        background-color: var(--cipher-board-solved);
        background-image: linear-gradient(
            var(--cipher-board-sheen),
            transparent 70%
        );
        border-radius: inherit;
        inset: 0;
        position: absolute;
    }

    .cipher-board__cipher {
        color: var(--cipher-board-cipher);
        font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
        font-size: max(0.5625rem, var(--cipher-board-tile) * 0.3);
        font-weight: 600;
        line-height: 1;
        position: relative;
    }

    .cipher-board__slot {
        align-items: flex-end;
        border-block-end: var(--cipher-board-line-width) solid
            var(--cipher-board-line);
        display: flex;
        inline-size: 66%;
        justify-content: center;
        position: relative;
    }

    .cipher-board__glyph {
        display: block;
        font-size: calc(var(--cipher-board-tile) * 0.62);
        font-weight: 700;
        line-height: 1.15;
    }

    .cipher-board__mark {
        align-items: flex-end;
        block-size: var(--cipher-board-tile-block);
        color: var(--cipher-board-mark);
        display: flex;
        flex: none;
        font-size: calc(var(--cipher-board-tile) * 0.62);
        font-weight: 700;
        line-height: 1.15;
        padding-block-end: calc(
            var(--cipher-board-padding-end) + var(--cipher-board-line-width)
        );
    }

    .cipher-board__card {
        margin-block-start: 0.25rem;
    }

    .cipher-board__source {
        display: grid;
        gap: 0.75rem;
        margin: 0;
    }

    .cipher-board__plain {
        color: var(--cipher-board-quote);
        font-family: ui-serif, "New York", Georgia, "Times New Roman", serif;
        font-size: 1.1875rem;
        line-height: 1.5;
        margin: 0;
        text-wrap: pretty;
        -webkit-user-select: text;
        user-select: text;
    }

    .cipher-board__attribution {
        color: var(--cipher-board-attribution);
        font-size: 0.9375rem;
        text-align: end;
        -webkit-user-select: text;
        user-select: text;
    }

    @media (prefers-reduced-motion: reduce) {
        .cipher-board__tile {
            transition: none;
        }
    }
}