article {
    --gap-base: 25px;
    --color-foreground: var(--color-primary);;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: var(--gap-base);

    section {
        width: 100%;
        padding: 0 var(--gap-base);
        box-sizing: border-box;

        max-width: min(800px, 100%);


        &.narrow {
            max-width: min(600px, 100%);
        }

        &.wide {
            max-width: min(1024px, 100%);
        }

        &.ultraWide {
            max-width: 100%;
        }

        @media all and (max-width: 600px) {
            &.narrow,
            &.wide {
                max-width: 100%;
            }
        }

        &.panel {
            --gap-base: 35px;
            padding: var(--gap-base) calc(var(--gap-base) * 1.2);
            box-sizing: border-box;
            background: #fff;
            border: solid var(--color-background-faint) 1px;
            border-radius: var(--border-radius-big);
        }

        display: flex;
        flex-direction: column;
        gap: var(--gap-base);

        i {
            font-style: normal;
            color: var(--color-background);
            background: var(--color-foreground);
            border-radius: var(--border-radius-small);
            padding: .07em .2em;
            white-space: nowrap;
        }

        u {
            text-decoration: none;
            font-weight: 400;
            background: hsl(var(--color-primary-hue), var(--color-primary-saturation), 93%);
            border-radius: var(--border-radius-small);
            padding: .07em .2em;
            white-space: nowrap;
        }

        h1 > u,
        h2 > u,
        h3 > u,
        h4 > u,
        h5 > u {
            font-weight: 600;
        }

        ul {
            margin-top: 1em;
            margin-bottom: 1em;

            &.emoji {
                padding-left: 1.45em;

                li.ok { list-style-type: "\2705   "; }
                li.ko { list-style-type: "\274C   "; }
                li.apple { list-style-type: "\1F34F   "; }
                li.android { list-style-type: "\1F916   "; }
                li.warning { list-style-type: "\1F6AB   "; }
            }
        }

        div b.enumerated,
        li b.enumerated,
        li li b.enumerated {
            font-weight: 400;
            background: hsl(var(--color-primary-hue), var(--color-primary-saturation), 93%);
            border-radius: var(--border-radius-small);
            padding: .07em .2em;
            white-space: nowrap;
        }

        div b.enumerated {
        }

        li b.enumerated {
        }

        li li b.enumerated {
        }


        span.variableName,
        div.variableName {
            font-weight: 500;
            border: none !important;
            background: #d968a9;
            color: #fff;
        }

        span.variableValue,
        div.variableValue {
            font-weight: 500;
            color: #9dab00;
        }

        div.variableName,
        div.variableValue {
            width: max-content;
            border: solid currentColor 1px;
            border-radius: var(--border-radius-small);
            padding: .07em .4em;
            white-space: nowrap;
        }

        .consolePrompt {
            font-weight: 500;
            color: rgb(129, 194, 0);
        }

        .syntaxOperator {
            color: #00acd3;
        }

        .hdrjpg {
            border-radius: var(--border-radius);
            overflow: hidden;

            > img {
                float: left;
                width: 100%;
            }
        }

        aside {
            padding: var(--gap-base);
            background: hsl(var(--color-primary-hue), var(--color-primary-saturation), 93%);
            border-radius: var(--border-radius);

            > p {
                margin: 0;

                &:not(:first-child) {
                    margin-top: 1em;
                }
            }
        }

        code {
            position: relative;
            display: inline-block;
            padding: calc(var(--gap-base)* .8) var(--gap-base);

            border-radius: var(--border-radius);
            word-break: break-word;
            font-size: .8em;
            line-height: 1.5em;

            --bgColor: var(--color-background);
            --borderColor: hsl(var(--color-primary-hue), 40%, 75%);
            --fgColor: hsl(var(--color-primary-hue), var(--color-primary-saturation), 25%);
            --labelFgColor: #fff;

            background: var(--bgColor);
            border: solid var(--borderColor) 1px;
            color: var(--fgColor);

            overflow: hidden;

            > pre {
                float: left;
                margin: 0;
            }
        }

        code > pre {
            width: 100%;
            overflow-x: auto;
        }

        code.dark {
            --bgColor: hsl(var(--color-primary-hue), var(--color-primary-saturation), 15%);
            --borderColor: hsl(var(--color-primary-hue), 40%, 25%);
            --fgColor: hsl(var(--color-primary-hue), var(--color-primary-saturation), 85%);
        }

        code:is(.json, .php, .html, .css) {
            white-space: pre-wrap;
        }

        code[data-label]:after {
            position: absolute;
            top: 0;
            right: 0;
            content: attr(data-label);
            background-color: var(--borderColor);
            color: var(--labelFgColor);
            border-bottom-left-radius: var(--border-radius-small);
            padding: 0 5px;
        }

        code.centered {
            margin-left: auto;
            margin-right: auto;
        }

        code.apiKey {
            display: inline-block;
            background: hsl(var(--color-primary-hue), 40%, 65%);
            border: none;
            color: #ffffff;
            padding: 7px 10px;
            border-radius: var(--border-radius);
            letter-spacing: .5px;
            font-family: 'Courier New', Courier, Inconsolata, monospace;
            font-size: 13pt;
        }

        table {
            th {
                color: hsl(var(--color-primary-hue), var(--color-primary-saturation), 50%);
                font-weight: normal;
            }

            th, td {
                border-bottom: solid hsl(var(--color-primary-hue), var(--color-primary-saturation), 90%) 1px;
                text-align: left;
                vertical-align: top;
                padding: 15px;

                &.complex {
                    display: inline-flex;
                    flex-direction: column;
                    gap: 20px;
                }
            }

            @media all and (max-width: 600px) {
                th {
                    display: none;
                }

                tr {
                    display: flex;
                    flex-direction: column;
                }
            }
        }

        .getwaitlistWidget {
            justify-content: center;
            margin: 0 auto;
            max-width: 100% !important;
            width: min(100%, 400px) !important;
            font-family: inherit !important;
            font-size: inherit !important;

            > div {
                background: none !important;
            }

            input {
                background: white;
                height: 39px !important;
                border: solid hsl(var(--color-primary-hue), var(--color-primary-saturation), 75%) 1px !important;
                border-right: none !important;
            }

            button {
                font-size: .9em;
                font-weight: 500;
                white-space: nowrap;
                background-color: var(--color-accent) !important;
            }
        }
    }

    &.dark {
        --color-foreground: #fff;
        --color-background: var(--color-background-dark);

        i {
            color: var(--color-background);
            background: var(--color-foreground);
        }
    }

    .footer {
        font-size: var(--font-size-small);
        flex-direction: row;
        justify-content: space-between;

        a {
            text-decoration: none;
        }

        > .right {
            text-align: right;
        }
    }

    /* tabs */
    .tabSet {

        > .tabs {
            z-index: 1;
            padding-top: 20px;

            background: var(--color-background);
            position: sticky;
            top: var(--menu-height);
            display: flex;
            justify-content: center;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 10px;

            padding-left: 15px;
            padding-right: 15px;

            --border-color: hsl(var(--color-primary-hue), var(--color-primary-saturation), 80%);
            border-bottom: solid var(--border-color) 1px;

            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;

            &::after {
                position: absolute;
                content: '';
                left: 0;
                right: 0;
                top: calc(100% + 1px);
                height: var(--gap-base);
                background: linear-gradient(180deg, hsl(var(--color-primary-hue), var(--color-primary-saturation), var(--color-background-lightness)) 0%, hsla(var(--color-primary-hue), var(--color-primary-saturation), var(--color-background-lightness), 0) 100%);
                pointer-events: none;
            }
        }

        &.dark {
            --color-background: var(--color-background-dark);

            > .tabs {
                &::after {
                    background: linear-gradient(180deg, hsl(var(--color-primary-hue), var(--color-primary-saturation), var(--color-background-dark-background-lightness)) 0%, hsla(var(--color-primary-hue), var(--color-primary-saturation), var(--color-background-dark-lightness), 0) 100%);
               -background }
            }
        }
    }

    .tabSet > .tabs > input[type="radio"] {
        position: absolute;
        left: -200vw;
        display: flex;
    }

    .tabSet {

        > .tabs > label {
            white-space: nowrap;
            line-height: 1.2em;
            font-weight: 600;
            padding: 13px 18px;
            border: solid var(--border-color) 1px;
            border-bottom: none;
            border-top-left-radius: var(--border-radius);
            border-top-right-radius: var(--border-radius);
            transition: color var(--transition-animation-ms);
            cursor: pointer;
            background: var(--color-background);
            color: var(--unselected-color);
        }

        &:not(.dark) {
            --unselected-color: var(--color-primary);
            --selected-color: var(--color-accent);
        }

        &.dark {
            --unselected-color: var(--color-primary-dark-background-faint);
            --selected-color: var(--color-primary-dark-background);
        }
    }

    .tabSet > .tabs > label:hover {
        color: hsl(var(--color-accent-hue), var(--color-accent-saturation), calc(var(--color-accent-brightness) * var(--hover-color-brightness-multiplier)));
    }

    .tabSet > .tabs > input:checked + label {
        margin-bottom: -1px;
        color: var(--selected-color);
    }

    .tabSet > .tabSections {
        > section {
            max-width: none;
            display: none;
        }
    }

    .tabSet:has(.tabs > input:first-child:checked) > .tabSections > section:first-child,
    .tabSet:has(.tabs > input:nth-child(3):checked) > .tabSections > section:nth-child(2),
    .tabSet:has(.tabs > input:nth-child(5):checked) > .tabSections > section:nth-child(3),
    .tabSet:has(.tabs > input:nth-child(7):checked) > .tabSections > section:nth-child(4),
    .tabSet:has(.tabs > input:nth-child(9):checked) > .tabSections > section:nth-child(5),
    .tabSet:has(.tabs > input:nth-child(11):checked) > .tabSections > section:nth-child(6) {
        display: flex;
    }
}