.console-block {
    --tab-gap: 6px;
    --tab-gap-forced-colors: calc(2 * var(--tab-gap));
    --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: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-end;
    column-gap: var(--tab-gap);
    @media (forced-colors: active) {
        /* Forced colors uses the same color for the tab borders and focus
         * ring. Provide some additional visual separation. */
        column-gap: var(--tab-gap-forced-colors);
    }

    > 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 {
        &:last-of-type {
            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: pointer;
        -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 {
        outline: var(--tab-focus-outline);
        outline-offset: var(--tab-focus-outline-offset);
    }

    > section {
        box-sizing: border-box;
        max-width: 100%;
        overflow-x: auto;
        /* Place the panel on its own row and hide it until active. */
        flex-basis: 100%;
        display: none;
    }

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

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