:root {
    --preferred-font: "Pixelated MS Sans Serif";
    --desktop-bg: #C0C0C0;
    --workspace-bg: #FFFFFF;
    --window-bg: #FFFFFF;
    --window-fg: #000000;
    --button-bg: #C0C0C0;
    --button-fg: #000000;
    --button-dark: #808080;
    --button-light: #FFFFFF;
    --input-bg: var(--window-bg);
    --input-fg: var(--window-fg);
    --border: #000000;
    --disabled: #808080;
    --window-frame: #C0C0C0;
    --window-frame-active: var(--window-frame);
    --menu-bg: #FFFFFF;
    --menu-fg: #000000;
    --title-bar-bg: #FFFFFF;
    --title-bar-fg: #000000;
    --title-bar-active-bg: #0000C0;
    --title-bar-active-fg: #FFFFFF;
    --selection-bg: #0000C0;
    --selection-fg: #FFFFFF;
    --selection-inverse: #FFFF3F;
    --scrollbar-bg: #C0C0C0;
}

[data-theme="3.1"] {
    body {
        // background-color: var(--window-bg); // Minesweeper-XP: Keep background transparent.
        color: var(--window-fg);
        font-family: var(--preferred-font), system-ui;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    button::-moz-focus-inner {
        border: none;
    }

    button,
    input,
    textarea,
    select {
        font-family: inherit;
        font-size: inherit;
    }

    a:focus {
        outline: 1px dotted var(--border);
    }

    code {
        font-family: monospace;
    }

    .desktop {
        background: var(--desktop-bg);
    }

    .raised {
        background: var(--window-bg);
        border: 1px solid var(--border);
    }

    .lowered {
        background: var(--window-bg);
        border: 1px solid var(--border);
    }

    .raised>.lowered {
        border: 0;
    }

    .raised.stack-row>.lowered+.lowered {
        border-left: 1px solid var(--border);
    }

    .raised.stack-column>.lowered+.lowered {
        border-top: 1px solid var(--border);
    }

    .top-panel {
        background: var(--window-bg);
        border-bottom: 1px solid var(--border);
    }

    .right-panel {
        background: var(--window-bg);
        border-left: 1px solid var(--border);
    }

    .bottom-panel {
        background: var(--window-bg);
        border-top: 1px solid var(--border);
    }

    .left-panel {
        background: var(--window-bg);
        border-right: 1px solid var(--border);
    }

    fieldset {
        border: 1px solid var(--border);
        position: relative;
    }

    legend {
        text-align: left;
        padding: 0 2px;
        display: block;
    }

    hr {
        border-top: 1px solid var(--border);
    }

    .horizontal-scrollbar,
    .vertical-scrollbar {
        display: flex;
    }

    .horizontal-scrollbar>button,
    .vertical-scrollbar>button {
        display: flex;
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        min-width: 0;
        padding: 0;
        background-repeat: no-repeat;
        background: #C0C0C0;
        border: 1px solid var(--border);
        box-shadow: inset 1px 1px var(--button-light), inset -2px -2px var(--button-dark);
        border-radius: 0;
    }

    .horizontal-scrollbar>button::after,
    .horizontal-scrollbar>button:active::after,
    .vertical-scrollbar>button::after,
    .vertical-scrollbar>button:active::after {
        content: "";
        display: block;
        width: 7px;
        height: 7px;
        margin: 3px 0 0 3px;
        background-repeat: no-repeat;
        position: initial;
    }

    .horizontal-scrollbar>button:focus,
    .vertical-scrollbar>button:focus {
        outline: none;
    }

    .horizontal-scrollbar>button:focus::after,
    .vertical-scrollbar>button:focus::after {
        position: initial;
        border: unset;
    }

    .horizontal-scrollbar>button:not(:disabled):active,
    .vertical-scrollbar>button:not(:disabled):active {
        padding: 1px 0 0 1px;
        box-shadow: inset 1px 1px var(--button-dark);
        outline: none;
    }

    .horizontal-scrollbar>.scrollbar-track,
    .vertical-scrollbar>.scrollbar-track {
        flex-grow: 1;
        background: var(--scrollbar-bg);
        position: relative;
    }

    .horizontal-scrollbar>.scrollbar-track>.scrollbar-thumb,
    .vertical-scrollbar>.scrollbar-track>.scrollbar-thumb {
        position: absolute;
        background: var(--button-bg);
        border: 1px solid var(--border);
        box-shadow: inset 1px 1px var(--button-light), inset -2px -2px var(--button-dark);
    }

    .horizontal-scrollbar>button:first-child::after {
        background-image: url(scroll-left.svg);
    }

    .horizontal-scrollbar>button:last-child::after {
        background-image: url(scroll-right.svg);
    }

    .horizontal-scrollbar>.scrollbar-track {
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
    }

    .horizontal-scrollbar>.scrollbar-track>.scrollbar-thumb {
        top: 0;
        bottom: 0;
        border-top: 0;
        border-bottom: 0;
    }

    .vertical-scrollbar {
        flex-direction: column;
        width: 16px;
    }

    .vertical-scrollbar>button:first-child::after {
        background-image: url(scroll-up.svg);
    }

    .vertical-scrollbar>button:last-child::after {
        background-image: url(scroll-down.svg);
    }

    .vertical-scrollbar>.scrollbar-track {
        border-left: 1px solid var(--border);
        border-right: 1px solid var(--border);
    }

    .vertical-scrollbar>.scrollbar-track>.scrollbar-thumb {
        left: 0;
        right: 0;
        border-left: 0;
        border-right: 0;
    }

    ::-webkit-scrollbar {
        background-color: var(--scrollbar-bg);
        width: 17px;
        height: 17px;
    }

    ::-webkit-scrollbar-corner {
        background: var(--scrollbar-bg);
    }

    ::-webkit-scrollbar-button,
    ::-webkit-scrollbar-thumb {
        background-color: var(--button-bg);
        color: var(--button-fg);
        border: 1px solid var(--border);
        box-shadow: inset 1px 1px 0 var(--button-light), inset -2px -2px var(--button-dark);
    }

    ::-webkit-scrollbar-track-piece {
        border: 1px solid var(--border);
    }

    ::-webkit-scrollbar-button {
        width: 17px;
        height: 17px;
        display: none;
    }

    ::-webkit-scrollbar-button:single-button {
        display: block;
        background-position: 4px 4px;
    }

    ::-webkit-scrollbar-button:active {
        box-shadow: inset 1px 1px var(--button-dark);
        background-position: 5px 5px;
    }

    ::-webkit-scrollbar-button:vertical:decrement {
        background-image: url(scroll-up.svg);
        background-repeat: no-repeat;
        border-bottom: 0;
    }

    ::-webkit-scrollbar-button:vertical:increment {
        background-image: url(scroll-down.svg);
        background-repeat: no-repeat;
        border-top: 0;
    }

    ::-webkit-scrollbar-button:horizontal:decrement {
        background-image: url(scroll-left.svg);
        background-repeat: no-repeat;
        border-right: 0;
    }

    ::-webkit-scrollbar-button:horizontal:increment {
        background-image: url(scroll-right.svg);
        background-repeat: no-repeat;
        border-left: 0;
    }

    button,
    input[type=button],
    input[type=submit],
    input[type=reset],
    .button {
        background-color: var(--button-bg);
        color: var(--button-fg);
        border: 1px solid var(--border);
        border-radius: 2.5px;
        min-width: 70px;
        padding: 2px 8px;
        position: relative;
        box-shadow: inset -1px -1px 0 var(--button-dark), inset 1px 1px 0 var(--button-light), inset -2px -2px 0 var(--button-dark), inset 2px 2px 0 var(--button-light);
        outline: none;
        cursor: default;
        user-select: none;
        text-align: center;
    }

    button:focus,
    button.focus,
    input[type=button]:focus,
    input[type=button].focus,
    input[type=submit]:focus,
    input[type=submit].focus,
    input[type=reset]:focus,
    input[type=reset].focus,
    .button:focus,
    .button.focus {
        box-shadow: inset 1px 1px 0 var(--border), inset -1px -1px 0 var(--border), inset -2px -2px 0 var(--button-dark), inset 2px 2px 0 var(--button-light), inset -3px -3px 0 var(--button-dark), inset 3px 3px 0 var(--button-light);
    }

    button:focus::after,
    button.focus::after,
    input[type=button]:focus::after,
    input[type=button].focus::after,
    input[type=submit]:focus::after,
    input[type=submit].focus::after,
    input[type=reset]:focus::after,
    input[type=reset].focus::after,
    .button:focus::after,
    .button.focus::after {
        content: "";
        display: block;
        position: absolute;
        top: 3px;
        bottom: 3px;
        left: 6px;
        right: 6px;
        border: 1px dotted var(--button-dark);
        border-radius: 1px;
    }

    button:disabled::after,
    button.disabled::after,
    input[type=button]:disabled::after,
    input[type=button].disabled::after,
    input[type=submit]:disabled::after,
    input[type=submit].disabled::after,
    input[type=reset]:disabled::after,
    input[type=reset].disabled::after,
    .button:disabled::after,
    .button.disabled::after {
        content: "";
        display: block;
        position: absolute;
        top: 3px;
        left: 3px;
        right: 3px;
        bottom: 3px;
        background-image: linear-gradient(45deg, var(--button-bg) 25%, transparent 25%), linear-gradient(-45deg, var(--button-bg) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--button-bg) 75%), linear-gradient(-45deg, transparent 75%, var(--button-bg) 75%);
        background-size: 2px 2px;
        background-position: 0 0, 0 1px, 1px -1px, -1px 0px;
    }

    button:not(:disabled, .disabled):active,
    button.active,
    input[type=button]:not(:disabled, .disabled):active,
    input[type=button].active,
    input[type=submit]:not(:disabled, .disabled):active,
    input[type=submit].active,
    input[type=reset]:not(:disabled, .disabled):active,
    input[type=reset].active,
    .button:not(:disabled, .disabled):active,
    .button.active {
        box-shadow: inset 1px 1px 0 var(--border), inset -1px -1px 0 var(--border), inset 2px 2px 0 var(--button-dark);
        padding: 3px 7px 1px 9px;
    }

    button:not(:disabled, .disabled):active::after,
    button.active::after,
    input[type=button]:not(:disabled, .disabled):active::after,
    input[type=button].active::after,
    input[type=submit]:not(:disabled, .disabled):active::after,
    input[type=submit].active::after,
    input[type=reset]:not(:disabled, .disabled):active::after,
    input[type=reset].active::after,
    .button:not(:disabled, .disabled):active::after,
    .button.active::after {
        top: 4px;
        bottom: 2px;
        left: 31px;
        right: 29px;
    }

    input:not([type=button], [type=submit], [type=reset], [type=checkbox], [type=radio], [type=range]),
    textarea,
    .input,
    select {
        background-color: var(--input-bg);
        color: var(--input-fg);
        border: 1px solid var(--border);
        padding: 2px 6px;
        font-family: inherit;
        font-size: inherit;
        outline: none;
    }

    input:not([type=button], [type=submit], [type=reset], [type=checkbox], [type=radio], [type=range])::selection,
    textarea::selection,
    .input::selection,
    select::selection {
        background-color: var(--selection-bg);
        color: var(--selection-fg);
    }

    input:not([type=button], [type=submit], [type=reset], [type=checkbox], [type=radio], [type=range]):disabled,
    input:not([type=button], [type=submit], [type=reset], [type=checkbox], [type=radio], [type=range]).disabled,
    textarea:disabled,
    textarea.disabled,
    .input:disabled,
    .input.disabled,
    select:disabled,
    select.disabled {
        color: var(--disabled);
    }

    select>option {
        padding: 2px 6px;
    }

    select>option:checked {
        background-color: var(--selection-bg);
        color: var(--selection-fg);
    }

    select[multiple],
    select[size]:not([size="1"]) {
        padding: 0;
    }

    select[multiple]>option:checked,
    select[size]:not([size="1"])>option:checked {
        background-color: var(--selection-bg);
        color: var(--selection-fg);
    }

    select[multiple]:focus>option:checked,
    select[size]:not([size="1"]):focus>option:checked {
        outline: 1px dotted var(--selection-inverse);
    }

      select:not([size]):not(:active):focus,
      select[size="1"]:not(:active):focus {
        background-color: var(--selection-bg);
        color: var(--selection-fg);
        box-shadow: inset 1px 1px 0 var(--input-bg), inset -1px -1px 0 var(--input-bg);
      }

      .dropdown {
        display: inline-grid;
        padding: 0;
        grid-template-areas: "s";
      }
      .dropdown > select {
        appearance: none;
        grid-area: s;
        padding-right: 21px;
      }
      .dropdown > select:not(:disabled):active {
        background: var(--input-bg);
        color: var(--input-fg);
      }
      .dropdown > select:not(:disabled):active + .dropdown-button {
        box-shadow: inset 1px 1px var(--button-dark), -1px 0 var(--input-bg);
      }
      .dropdown > select:not(:disabled):active + .dropdown-button::after {
        margin: 1px 0 0 2px;
      }
      .dropdown > select:disabled + .dropdown-button {
        color: var(--disabled);
      }
      .dropdown > .dropdown-button {
        justify-self: end;
        grid-area: s;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 1px;
        background-color: var(--button-bg);
        color: var(--button-fg);
        border-left: 1px solid var(--border);
        box-shadow: inset 1px 1px var(--button-light), inset -2px -2px var(--button-dark), -1px 0 var(--input-bg);
        width: 16px;
        pointer-events: none;
      }
      .dropdown > .dropdown-button::after {
        content: "";
        display: block;
        width: 7px;
        height: 9px;
        -webkit-mask-image: url(dropdown-arrow.svg);
        -webkit-mask-repeat: no-repeat;
        mask-image: url(dropdown-arrow.svg);
        mask-repeat: no-repeat;
        background: currentColor;
      }

    input[type=checkbox] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: var(--input-bg);
        border: 1px solid var(--input-fg);
        width: 13px;
        height: 13px;
        border-radius: 0;
    }

    input[type=checkbox]:checked {
        background-image: url(checkmark.svg);
        background-repeat: no-repeat;
        background-position: 0 0;
    }

    input[type=checkbox]:disabled+label,
    input[type=radio]:disabled+label {
        position: relative;
    }

    input[type=checkbox]:disabled+label::after,
    input[type=radio]:disabled+label::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(45deg, var(--window-bg) 25%, transparent 25%), linear-gradient(-45deg, var(--window-bg) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--window-bg) 75%), linear-gradient(-45deg, transparent 75%, var(--window-bg) 75%);
        background-size: 2px 2px;
        background-position: 0 0, 0 1px, 1px -1px, -1px 0px;
    }

    input[type=radio] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: var(--input-bg);
        border: 1px solid var(--input-fg);
        width: 12px;
        height: 12px;
        border-radius: 50%;
    }

    input[type=radio]:checked::after {
        content: "";
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: var(--input-fg);
        margin-top: 2px;
        margin-left: 2px;
    }

    input[type=radio]:focus,
    input[type=checkbox]:focus {
        outline: none;
    }

    input[type=radio]:focus+label,
    input[type=checkbox]:focus+label {
        position: relative;
    }

    input[type=radio]:focus+label::after,
    input[type=checkbox]:focus+label::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: calc(var(--spacing) - 1px);
        right: 0;
        bottom: 0;
        border: 1px dotted var(--border);
        border-radius: 1px;
    }

    label>input[type=radio]:focus,
    label>input[type=checkbox]:focus {
        outline: 1px dotted var(--border);
        outline-offset: 1px;
    }

    input[type=range] {
        -webkit-appearance: none;
        width: 100%;
        background: transparent;
        padding: 2px;
    }

    input[type=range]:focus {
        outline: none;
    }

    input[type=range]:focus::-moz-range-thumb {
        animation: 1s infinite linear range-focus;
    }

    input[type=range]:focus::-webkit-slider-thumb {
        animation: 1s infinite linear range-focus;
    }

    input[type=range]::-moz-range-track {
        height: 16px;
        background: var(--scrollbar-bg);
        border: 1px solid var(--border);
    }

    input[type=range]::-moz-range-thumb {
        border-radius: 0;
        height: 16px;
        width: 32px;
        background: var(--button-bg);
        background-size: 2px 2px;
        background-position: 0 0, 0 1px, 1px -1px, -1px 0px;
        border: 1px solid var(--border);
        box-shadow: inset 1px 1px var(--button-light), inset -2px -2px var(--button-dark);
    }

    input[type=range]::-webkit-slider-runnable-track {
        height: 16px;
        background: var(--scrollbar-bg);
        border: 1px solid var(--border);
        margin: 10px 0;
    }

    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        margin-top: -1px;
        border-radius: 0;
        height: 16px;
        width: 32px;
        background: var(--button-bg);
        background-size: 2px 2px;
        background-position: 0 0, 0 1px, 1px -1px, -1px 0px;
        border: 1px solid var(--border);
        box-shadow: inset 1px 1px var(--button-light), inset -2px -2px var(--button-dark);
    }

    @keyframes range-focus {
        from {
            background-image: linear-gradient(45deg, var(--button-dark) 25%, transparent 25%), linear-gradient(-45deg, var(--button-dark) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--button-dark) 75%), linear-gradient(-45deg, transparent 75%, var(--button-dark) 75%);
        }

        to {
            background-image: none;
        }
    }

    progress,
    .progress-bar {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: var(--input-bg);
        border: 1px solid var(--border);
        height: 16px;
    }

    .progress-bar {
        position: relative;
        overflow: hidden;
    }

    .progress-bar:not([aria-valuenow])::after,
    .progress-bar>.progress-bar-value {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        background: var(--selection-bg);
    }

    .progress-bar:not([aria-valuenow])::after {
        width: 50%;
        animation: 1s infinite linear indeterminate;
    }

    progress::-webkit-progress-bar {
        background: var(--input-bg);
    }

    progress::-webkit-progress-value {
        background: var(--selection-bg);
    }

    progress::-moz-progress-bar {
        background: var(--selection-bg);
    }

    progress:indeterminate::-moz-progress-bar {
        width: 50%;
        animation: 1s infinite linear indeterminate;
    }

    progress:not([value])::-webkit-progress-value {
        width: 50%;
        animation: 1s infinite linear indeterminate;
    }

    @keyframes indeterminate {
        from {
            margin-left: -50%;
        }

        to {
            margin-left: 100%;
        }
    }

    .window,
    .dialog,
    .menu {
        background: var(--window-frame);
        border: 1px solid var(--border);
        // position: relative; // Minesweeper-XP: Allows menus to display outside of the window.
        padding: 2px;
    }

    .window.maximized,
    .dialog.maximized {
        border: none;
        padding: 0;
    }

    .window.active,
    .window:focus-within {
        background-color: var(--window-frame-active);
    }

    .dialog {
        background: var(--title-bar-bg);
    }

    .dialog.active,
    .dialog:focus-within {
        background-color: var(--title-bar-active-bg);
    }

    .title-bar {
        background: var(--title-bar-bg);
        color: var(--title-bar-fg);
        display: flex;
        flex-direction: row;
        font-weight: bold;
        border: 1px solid var(--border);
    }

    .dialog>.title-bar {
        border: 1px solid var(--window-bg);
        border-bottom-color: var(--border);
    }

    .title-bar-text {
        text-align: center;
        font-weight: bold;
        padding: 2px 4px;
        flex-grow: 1;
        cursor: default;
    }

    .title-bar-buttons {
        flex-shrink: 0;
        display: flex;
        flex-direction: row;
        align-items: stretch;
    }

    .title-bar-buttons button {
        flex-shrink: 0;
        width: 24px;
        min-width: 0;
        padding: 0;
        border: 0;
        border-left: 1px solid var(--border);
        border-radius: 0;
        background-color: var(--button-bg);
        background-repeat: no-repeat;
        background-position: 7px 8px;
    }

    .title-bar-buttons button::after {
        display: none;
    }

    .title-bar-buttons:first-child button {
        border: 0;
        border-right: 1px solid var(--border);
    }

    .title-bar-buttons button:active {
        outline: none;
        box-shadow: inset 1px 1px 0 var(--button-dark);
        background-position: 8px 10px;
    }

    .title-bar-buttons button[data-close] {
        background-image: url(close.svg);
    }

    // Minesweeper-XP Start
    .title-bar-buttons button[data-control] {
        background-image: url(./custom/control.svg);
        background-position: center;
        box-shadow: none;
    }

    .title-bar-buttons button[data-control]:active {
        background-image: url(./custom/control-active.svg);
        background-position: center;
        background-color: rgb(132, 132, 132);
    }
    // Minsweeper-XP End

    .title-bar-buttons button[data-minimize] {
        background-image: url(./minimize.svg);
    }

    .title-bar-buttons button[data-maximize] {
        background-image: url(maximize.svg);
    }

    .maximized .title-bar-buttons button[data-maximize] {
        background-image: url(restore.svg);
    }

    .window-body,
    .dialog-body {
        background: var(--window-bg);
        color: var(--window-fg);
        border: 1px solid var(--border);
        border-top: 0;
    }

    .dialog-body {
        border-color: var(--window-bg);
    }

    .window.active>.title-bar,
    .window:focus-within>.title-bar,
    .dialog.active>.title-bar,
    .dialog:focus-within>.title-bar,
    .menu>.title-bar,
    .title-bar.active {
        background: var(--title-bar-active-bg);
        color: var(--title-bar-active-fg);
    }

    .window-body>*+*,
    .dialog-body>*+* {
        border: 0;
        border-top: 1px solid var(--border);
    }

      [role=menu] {
        color: var(--menu-fg);
        background-color: var(--menu-bg);
        border: 1px solid var(--border);
      }
      [role=menu] li {
        padding: 1px 3px 1px 16px;
      }
      [role=menu] li[data-shortcut]::after {
        float: right;
        content: attr(data-shortcut);
        display: block;
        margin-left: 4px;
      }
      [role=menu] li > ul {
        left: 100%;
        margin: 0;
        top: -1px;
        min-width: 200px;
      }
      [role=menu] li[role=separator] {
        border-top: 1px solid var(--border);
        height: 0;
        padding: 0;
        margin: 2px 0;
      }
      [role=menu] li[role=checkbox][aria-checked=true]::before, [role=menu] li[role=radio][aria-checked=true]::before {
        content: "";
        position: absolute;
        left: 4px;
        top: 50%;
        margin-top: -5px;
        display: block;
        width: 8px;
        height: 10px;
        background: currentColor;
        -webkit-mask-image: url(menu-checkmark.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: 8px 10px;
        mask-image: url(menu-checkmark.svg);
        mask-repeat: no-repeat;
        mask-size: 8px 10px;
      }
      [role=menu] li[aria-haspopup=true] {
        position: relative;
      }
      [role=menu] li[aria-haspopup=true]:after {
        content: "";
        display: block;
        position: absolute;
        right: 8px;
        top: 0;
        bottom: 0;
        width: 4px;
        background: currentColor;
        -webkit-mask-image: url(arrow-right.svg);
        -webkit-mask-size: 4px 7px;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center center;
        mask-image: url(arrow-right.svg);
        mask-size: 4px 7px;
        mask-repeat: no-repeat;
        mask-position: center center;
      }

      [role=menubar] {
        color: var(--menu-fg);
        background-color: var(--menu-bg);
      }
      [role=menubar] > li {
        padding: 1px 8px;
      }
      [role=menubar] > li > ul {
        left: 0;
        top: 100%;
        min-width: 200px;
      }

      .menu > [role=menu] {
        border-top: 0;
      }

      [role=menu] li:focus,
      [role=menubar] li:focus {
        outline: none;
      }
      [role=menu] li:focus-within,
      [role=menubar] li:focus-within {
        background: var(--selection-bg);
        color: var(--selection-fg);
      }
      [role=menu] li[aria-disabled],
      [role=menubar] li[aria-disabled] {
        color: var(--disabled);
        border-color: transparent;
      }

      .tabs > menu {
        display: flex;
        flex-direction: row;
        margin: 0 2px;
      }

      .tabs > menu > button {
        border-bottom: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        min-width: 0;
        padding: 2px 10px 2px 10px;
        box-shadow: inset -1px 0 0 var(--button-dark), inset 1px 1px 0 var(--button-light), inset -2px 0 0 var(--button-dark), inset 2px 2px 0 var(--button-light);
      }

      .tabs > menu > button:focus,
      .tabs > menu > button:active {
        padding: 2px 10px 2px 10px;
      }

      .tabs > menu > button:focus:after {
        left: 8px;
        right: 8px;
      }

      .tabs > menu > button[aria-selected=true] {
        margin-right: -2px;
        margin-left: -2px;
        margin-top: -2px;
        margin-bottom: -1px;
        padding: 0px 12px 4px 12px;
        background-color: var(--window-bg);
        color: var(--window-fg);
        box-shadow: none;
        z-index: 1;
      }

      .tabs > [role=tabpanel] {
        border: 1px solid var(--border);
      }

      .list {
        background: var(--window-bg);
        color: var(--window-fg);
        border: 1px solid var(--border);
        overflow: auto;
        cursor: default;
      }

      .list > [role=option] {
        padding: 2px 6px 2px 6px;
        white-space: nowrap;
      }

      .list > [role=option][aria-selected=true] {
        background-color: var(--selection-bg);
        color: var(--selection-fg);
      }

      .list > [role=option]:focus {
        outline: 1px dotted var(--border);
        outline-offset: -1px;
      }

      .list > [role=option][aria-selected=true]:focus {
        outline: 1px dotted var(--selection-inverse);
      }

      .icon-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, 128px);
        flex-direction: row;
        flex-wrap: wrap;
      }

      .icon-grid > .icon {
        flex: 0 0 128px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 4px;
      }

      .icon-grid > .icon > .icon-label {
        margin-top: 5px;
        text-align: center;
      }

      .icon-grid > .icon:focus {
        outline: none;
      }

      .icon-grid > .icon:focus > .icon-label {
        outline: 1px dotted var(--border);
        outline-offset: -1px;
      }

      .icon-grid > .icon[aria-selected=true] > .icon-label {
        outline: 1px solid var(--selection-bg);
      }

      .icon-grid:focus-within > .icon[aria-selected=true] > .icon-label {
        background-color: var(--selection-bg);
        color: var(--selection-fg);
        outline: none;
      }

      .icon-grid > .icon[aria-selected=true]:focus > .icon-label {
        outline: 1px dotted var(--selection-inverse);
      }

      .detailed {
        width: 100%;
        border-spacing: 0;
      }

      .detailed th {
        text-align: left;
        font-weight: bold;
        padding: 2px 6px 2px 6px;
        white-space: nowrap;
      }

      .detailed tr {
        outline: none;
      }

      .detailed tr:focus {
        outline: 1px dotted var(--border);
        outline-offset: -1px;
      }

      .detailed tr[aria-selected=true] {
        background-color: var(--selection-bg);
        color: var(--selection-fg);
      }

      .detailed tr[aria-selected=true]:focus {
        outline: 1px dotted var(--selection-inverse);
      }

      .detailed .icon:focus .icon-label {
        outline: 1px dotted var(--border);
        outline-offset: -1px;
      }

      .detailed .icon[aria-selected=true] .icon-label {
        outline: 1px solid var(--selection-bg);
      }

      .detailed:focus-within .icon[aria-selected=true] .icon-label {
        background-color: var(--selection-bg);
        color: var(--selection-fg);
        outline: none;
      }

      .detailed .icon[aria-selected=true]:focus .icon-label {
        outline: 1px dotted var(--selection-inverse);
      }

      .detailed td {
        padding: 2px 6px 2px 6px;
        white-space: nowrap;
      }

      .detailed .icon {
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        outline: none;
      }

      .detailed td.icon {
        display: flex;
      }

      .detailed .icon > img {
        width: 16px;
        height: 16px;
        margin-right: 1px;
        margin-left: -4px;
      }

      .detailed .icon > .icon-label {
        text-align: center;
        padding: 1px 3px;
      }

      .detailed thead {
        position: sticky;
        top: 0;
      }
}