.console-block {
    --tab-gap: 6px;
    --tab-padding-block: 4px;
    --tab-padding-inline: 8px;
    --tab-row-end-margin: 0; /* Inset for panel border radius if needed. */

    --tab-label-font: inherit;
    --tab-label-size: inherit;
    --tab-label-color: color-mix(
        in oklch, currentColor 70%, var(--tab-background-color)
    );
    --tab-background-color: transparent;
    --tab-border-radius: 8px;
    --tab-border-width: 1px;
    --tab-border-color: transparent;

    --tab-active-label-color: currentColor;
    --tab-active-background-color: transparent;
    --tab-active-border-color: color-mix(
        in oklch, currentColor 20%, var(--tab-active-background-color)
    );
    --tab-active-border-width: 2px;
    --tab-active-highlight-width: 4px;
    --tab-active-highlight-color: #ab5603;

    --tab-focus-outline: 2px solid #0066cc;
    --tab-focus-outline-offset: 2px;

    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto;
    column-gap: var(--tab-gap);

    > input[type="radio"] {
        /* Hide the radio button visually but not from keyboard navigation.
         * From https://v1.tailwindcss.com/docs/screen-readers sr-only. */
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }

    > label {
        display: inline-block;
        grid-row: 1;
        align-self: end;
        &:first-of-type {
            grid-column: 2;
        }
        &:nth-of-type(2) {
            grid-column: 3;
            margin-inline-end: var(--tab-row-end-margin);
        }

        padding-block: var(--tab-padding-block);
        padding-inline: var(--tab-padding-inline);

        font-family: var(--tab-label-font);
        font-size: var(--tab-label-size);

        color: var(--tab-label-color);
        background-color: var(--tab-background-color);

        border-color: var(--tab-border-color);
        border-width: var(--tab-border-width);
        border-style: solid;
        border-block-end-width: 0;
        border-start-start-radius: var(--tab-border-radius);
        border-start-end-radius: var(--tab-border-radius);

        cursor: default;
        -webkit-user-select: none;
        user-select: none;

        /* Stack above tab content to avoid clipping focus outline. */
        position: relative;
        z-index: 1;
    }

    > input[type="radio"]:checked + label {
        color: var(--tab-active-label-color, #555);
        background-color: var(--tab-active-background-color);
        border-color: var(--tab-active-border-color);
        border-inline-width: var(--tab-active-border-width);
        border-block-start-width: var(--tab-active-highlight-width);
        border-block-start-color: var(--tab-active-highlight-color);
        /* Keep borders from shifting when switching tabs. */
        padding-inline: calc(
            var(--tab-padding-inline)
            - var(--tab-active-border-width)
            + var(--tab-border-width)
        );
    }

    > input[type="radio"]:focus-visible + label > span {
        outline: var(--tab-focus-outline);
        outline-offset: var(--tab-focus-outline-offset);
        border-radius: 1px;
    }

    > section {
        grid-column: 1 / -1;
        grid-row: 2;
        display: none;

        .c-tab-unix:checked ~ &.c-content-unix,
        .c-tab-win:checked ~ &.c-content-win {
            display: block;
        }
    }

    pre {
        margin-block-start: 0;
    }
}