body {
    margin: 0;
    font-family: Exo, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

@font-face {
    font-family: Exo;
    src: url(../assets/fonts/Exo-VariableFont_wght.ttf);
    font-display: swap
}

:root,
::backdrop {
    --page-color-light: gainsboro;
    --bg-color-light: white;
    --basic-bg-color-light: white;
    --dark-accent-color-light: var(--accent-color);
    --darker-accent-color-light: var(--accent-color);
    --text-color-light: #333;
    --basic-text-color-light: black;
    --highlighted-text-color-light: white;
    --button-color-light: white;
    --disabled-button-color-light: gray;
    --bg-disabled-button-color-light: gainsboro;
    --outline-color-light: #333;
    --page-color-dark: #333;
    --bg-color-dark: black;
    --basic-bg-color-dark: black;
    --dark-accent-color-dark: var(--accent-color);
    --darker-accent-color-dark: var(--accent-color);
    --text-color-dark: gainsboro;
    --basic-text-color-dark: white;
    --highlighted-text-color-dark: black;
    --button-color-dark: black;
    --disabled-button-color-dark: gray;
    --bg-disabled-button-color-dark: #333;
    --outline-color-dark: gainsboro
}

@supports (color: color-mix(in srgb, red 0%, red)) {

    :root,
    ::backdrop {
        --page-color-light: color-mix(in srgb, var(--accent-color) 7.5%, white);
        --bg-color-light: color-mix(in srgb, var(--accent-color) 5%, white);
        --dark-accent-color-light: color-mix(in srgb, var(--accent-color) 60%, var(--bg-color));
        --darker-accent-color-light: color-mix(in srgb, var(--accent-color) 30%, var(--bg-color));
        --text-color-light: color-mix(in srgb, var(--accent-color) 90%, black);
        --highlighted-text-color-light: color-mix(in srgb, var(--accent-color) 10%, white);
        --button-color-light: color-mix(in srgb, var(--accent-color) 10%, white);
        --disabled-button-color-light: color-mix(in srgb, var(--accent-color) 50%, gray);
        --bg-disabled-button-color-light: color-mix(in srgb, var(--accent-color) 25%, white);
        --outline-color-dark: color-mix(in srgb, var(--accent-color) 25%, black);
        --page-color-dark: color-mix(in srgb, var(--accent-color) 7.5%, black);
        --bg-color-dark: color-mix(in srgb, var(--accent-color) 5%, black);
        --dark-accent-color-dark: color-mix(in srgb, var(--accent-color) 60%, var(--bg-color));
        --darker-accent-color-dark: color-mix(in srgb, var(--accent-color) 30%, var(--bg-color));
        --text-color-dark: color-mix(in srgb, var(--accent-color) 90%, white);
        --highlighted-text-color-dark: color-mix(in srgb, var(--accent-color) 10%, black);
        --button-color-dark: color-mix(in srgb, var(--accent-color) 10%, black);
        --disabled-button-color-dark: color-mix(in srgb, var(--accent-color) 50%, gray);
        --bg-disabled-button-color-dark: color-mix(in srgb, var(--accent-color) 25%, black);
        --outline-color-dark: color-mix(in srgb, var(--accent-color) 25%, white)
    }
}

:root.light,
:root.light ::backdrop {
    --page-color: var(--page-color-light);
    --bg-color: var(--bg-color-light);
    --basic-bg-color: var(--basic-bg-color-light);
    --dark-accent-color: var(--dark-accent-color-light);
    --darker-accent-color: var(--darker-accent-color-light);
    --text-color: var(--text-color-light);
    --basic-text-color: var(--basic-text-color-light);
    --highlighted-text-color: var(--highlighted-text-color-light);
    --button-color: var(--button-color-light);
    --disabled-button-color: var(--disabled-button-color-light);
    --bg-disabled-button-color: var(--bg-disabled-button-color-light);
    --outline-color: var(--outline-color-light)
}

:root.dark,
:root.dark ::backdrop {
    --page-color: var(--page-color-dark);
    --bg-color: var(--bg-color-dark);
    --basic-bg-color: var(--basic-bg-color-dark);
    --dark-accent-color: var(--dark-accent-color-dark);
    --darker-accent-color: var(--darker-accent-color-dark);
    --text-color: var(--text-color-dark);
    --basic-text-color: var(--basic-text-color-dark);
    --highlighted-text-color: var(--highlighted-text-color-dark);
    --button-color: var(--button-color-dark);
    --disabled-button-color: var(--disabled-button-color-dark);
    --bg-disabled-button-color: var(--bg-disabled-button-color-dark);
    --outline-color: var(--outline-color-dark)
}

@media (prefers-color-scheme: light) {

    :root,
    ::backdrop {
        --page-color: var(--page-color-light);
        --bg-color: var(--bg-color-light);
        --basic-bg-color: var(--basic-bg-color-light);
        --dark-accent-color: var(--dark-accent-color-light);
        --darker-accent-color: var(--darker-accent-color-light);
        --text-color: var(--text-color-light);
        --basic-text-color: var(--basic-text-color-light);
        --highlighted-text-color: var(--highlighted-text-color-light);
        --button-color: var(--button-color-light);
        --disabled-button-color: var(--disabled-button-color-light);
        --bg-disabled-button-color: var(--bg-disabled-button-color-light);
        --outline-color: var(--outline-color-light)
    }
}

@media (prefers-color-scheme: dark) {

    :root,
    ::backdrop {
        --page-color: var(--page-color-dark);
        --bg-color: var(--bg-color-dark);
        --basic-bg-color: var(--basic-bg-color-dark);
        --dark-accent-color: var(--dark-accent-color-dark);
        --darker-accent-color: var(--darker-accent-color-dark);
        --text-color: var(--text-color-dark);
        --basic-text-color: var(--basic-text-color-dark);
        --highlighted-text-color: var(--highlighted-text-color-dark);
        --button-color: var(--button-color-dark);
        --disabled-button-color: var(--disabled-button-color-dark);
        --bg-disabled-button-color: var(--bg-disabled-button-color-dark);
        --outline-color: var(--outline-color-dark)
    }
}

:root {
    --brightness-hover: .75;
    --border-radius-width: .25em;
    --gap-inline-size: .75ch;
    --gap-block-size: .5em;
    --small-gap-inline-size: calc(var(--gap-inline-size) / 2);
    --small-gap-block-size: calc(var(--gap-block-size) / 2);
    --smaller-gap-inline-size: calc(var(--small-gap-inline-size) / 2);
    --smaller-gap-block-size: calc(var(--small-gap-block-size) / 2);
    --large-gap-inline-size: calc(var(--gap-inline-size) * 2);
    --large-gap-block-size: calc(var(--gap-block-size) * 2);
    --button-padding-inline-size: 1.5ch;
    --small-button-padding-inline-size: calc(var(--button-padding-inline-size) / 1.5);
    --button-padding-block-size: .25em;
    --small-button-padding-block-size: calc(var(--button-padding-block-size) / 1.5);
    --list-item-padding-inline-size: var(--small-button-padding-inline-size);
    --list-item-padding-block-size: calc(var(--button-padding-block-size) / 2);
    --border-width: .05em;
    --large-border-width: calc(var(--border-width) * 2);
    --outline-width: 1px;
    --no-scrollable-outline-width: 1px;
    --font-weight: 400;
    --font-weight-bolder: 500;
    --button-animation-duration: .2s;
    --app-width: 85dvw;
    --dialog-margin-block-start: min(10dvh, 5em);
    --dialog-width: min(40ch, 75dvw);
    --dialog-form-max-block-size: 70dvh
}

:root {
    background-color: var(--page-color);
    overscroll-behavior: none
}

button,
input,
select {
    font-size: inherit
}

body {
    font-weight: var(--font-weight)
}

ol,
ol li {
    display: flex
}

ol {
    margin: 0;
    padding: 0;
    list-style: none
}

ol li {
    align-items: center
}

button {
    border-width: 0;
    -webkit-user-select: none;
    user-select: none;
    background-color: var(--accent-color);
    color: var(--button-color);
    font-family: inherit;
    /*border-radius:var(--border-radius-width);*/
    text-transform: uppercase !important;
    padding-block: var(--button-padding-block-size);
    padding-inline: var(--button-padding-inline-size);
    margin: var(--outline-width);
    block-size: fit-content;
    font-size: 12px;
}



button:disabled {
    color: var(--disabled-button-color);
    background-color: var(--bg-disabled-button-color)
}

button.flashing-button {
    animation-name: flashing-button-animation;
    animation-duration: var(--button-animation-duration)
}

button:not([disabled]):hover {
    filter: brightness(var(--brightness-hover))
}

@keyframes flashing-button-animation {
    0% {
        outline: 0
    }

    50% {
        filter: brightness(var(--brightness-hover));
        outline: var(--outline-width) solid var(--outline-color)
    }
}

a,
a:visited {
    color: inherit
}

:focus {
    outline: var(--outline-width) solid var(--outline-color);
    outline-offset: 0
}

:focus-visible {
    outline-offset: 0
}

::selection {
    background-color: var(--text-color);
    color: var(--bg-color)
}

@media (display-mode: standalone) {
    body {
        max-inline-size: none
    }
}

@media (max-width: 60ch) {
    * {
        font-size: .85rem
    }

    :root .info-bar .source-link * {
        font-size: .65rem
    }
}

@media (max-width: 40ch) {
    * {
        font-size: .8rem
    }

    :root .info-bar .source-link * {
        font-size: .55rem
    }
}

.scrollable {
    overflow-block: auto;
    overflow-y: auto;
    scrollbar-color: var(--dark-accent-color) transparent
}

.scrollable::-webkit-scrollbar {
    inline-size: var(--gap-inline-size)
}

.scrollable::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: var(--border-width)
}

.scrollable::-webkit-resizer {
    background-color: var(--bg-color)
}

.list-item-button {
    font-family: monospace;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none
}

.list-item-button:hover {
    filter: brightness(var(--brightness-hover))
}

.list-item-name {
    overflow-x: hidden;
    overflow-inline: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.button-bar,
.button-bar .button-group {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--gap-block-size)
}

.button-bar {
    column-gap: var(--gap-inline-size)
}

.button-bar .button-group {
    column-gap: var(--small-gap-inline-size)
}

.button-bar button:not([disabled]) {
    cursor: pointer
}

dialog::backdrop {
    background-color: var(--basic-bg-color);
    opacity: .85
}

dialog {
    margin-block-start: var(--dialog-margin-block-start);
    inline-size: var(--dialog-width);
    background-color: var(--page-color);
    color: var(--text-color);
    border: solid var(--accent-color) var(--large-border-width);
    border-radius: var(--border-radius-width);
    padding-inline: var(--large-gap-inline-size);
    padding-block: var(--large-gap-block-size)
}

dialog:focus {
    outline-width: 0
}

dialog input,
dialog select {
    background-color: var(--bg-color);
    color: var(--text-color);
    border: solid var(--accent-color) var(--border-width);
    block-size: 1.5em;
    padding-inline: var(--gap-inline-size);
    font-family: inherit;
    margin: var(--outline-width);
    border-radius: var(--border-radius-width);
    box-sizing: content-box;
    caret-color: var(--accent-color);
    align-self: baseline;
    inline-size: calc(100% - 2 * (var(--gap-inline-size) + var(--border-width) + var(--outline-width)));
    align-self: end
}

dialog form,
dialog form p,
dialog label {
    display: flex;
    flex-direction: column
}

dialog form,
dialog form p {
    row-gap: var(--large-gap-block-size)
}

dialog form {
    max-block-size: var(--dialog-form-max-block-size)
}

dialog form .dialog-title {
    font-weight: var(--font-weight-bolder);
    border-block-end: solid var(--accent-color) var(--border-width);
    padding-block-end: var(--large-gap-block-size)
}

dialog form p {
    margin: 0;
    padding-block-start: var(--small-gap-block-size);
    padding-block-end: var(--large-gap-block-size);
    overflow: visible auto
}

dialog label {
    row-gap: var(--gap-block-size);
    overflow: visible
}

dialog .button-bar {
    margin-block-start: var(--gap-block-size)
}

dialog .button-group:first-of-type {
    flex: 1
}

@font-face {
    font-family: DOS-VGA-437;
    src: url(../assets/fonts/dos-vga-9x16.ttf);
    font-display: swap
}

.skin-dos {
    --gap-inline-size: 2ch;
    --gap-block-size: 1.25em;
    --border-width: 0;
    --button-padding-inline-size: var(--gap-inline-size);
    --button-padding-block-size: 0;
    --border-radius-width: 0;
    --list-item-padding-inline-size: 0;
    --list-item-padding-block-size: 0;
    --outline-color: var(--accent-color);
    --outline-width: 0;
    --dialog-margin-block-start: calc(var(--gap-block-size) + var(--small-gap-block-size) - var(--smaller-gap-block-size) / 2)
}

.skin-dos * {
    line-height: 1.25
}

.skin-dos body {
    font-family: DOS-VGA-437, monospace
}

.skin-dos body:after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.skin-dos dialog[open] form:after {
    top: calc(-1 * var(--smaller-gap-inline-size));
    left: calc(-1 * var(--smaller-gap-block-size));
    width: calc(100% + 2 * var(--small-gap-inline-size));
    height: calc(100% + 2 * var(--small-gap-block-size))
}

.skin-dos main,
.skin-dos dialog {
    position: relative;
    overflow: visible;
    border-width: var(--smaller-gap-block-size) var(--smaller-gap-inline-size)
}

.skin-dos main:before,
.skin-dos dialog:before,
.skin-dos main:after,
.skin-dos dialog:after {
    position: absolute;
    content: "";
    background-color: var(--darker-accent-color)
}

.skin-dos main:before {
    top: var(--smaller-gap-block-size);
    right: calc(-1 * var(--smaller-gap-inline-size) - var(--small-gap-inline-size));
    inline-size: var(--small-gap-inline-size);
    block-size: calc(100% + var(--small-gap-block-size) - var(--smaller-gap-block-size) + var(--smaller-gap-block-size) / 2)
}

.skin-dos main:after {
    left: var(--smaller-gap-inline-size);
    bottom: calc(-1 * var(--small-gap-block-size) - var(--smaller-gap-block-size) / 2);
    inline-size: calc(100% + var(--small-gap-inline-size));
    block-size: calc(var(--small-gap-block-size) - var(--smaller-gap-block-size) / 2)
}

.skin-dos dialog:before {
    right: calc(-1 * var(--smaller-gap-inline-size) - var(--small-gap-inline-size));
    inline-size: var(--small-gap-inline-size);
    block-size: calc(100% + var(--small-gap-block-size) - var(--smaller-gap-block-size))
}

.skin-dos dialog:after {
    left: var(--smaller-gap-inline-size);
    bottom: calc(-1 * var(--small-gap-block-size) - var(--smaller-gap-block-size) / 2);
    inline-size: calc(100% + var(--small-gap-inline-size));
    block-size: calc(var(--small-gap-block-size) - var(--smaller-gap-block-size) / 2)
}

.skin-dos main {
    margin-block-start: calc(var(--small-gap-block-size) - var(--smaller-gap-block-size) / 2);
    min-inline-size: min(85dvw, 132ch);
    inline-size: min(85dvw, 132ch);
    inline-size: min(round(up, 85dvw, 1ch), 132ch)
}

.skin-dos main,
.skin-dos main>*,
.skin-dos dialog {
    border-style: double
}

.skin-dos main>* {
    padding-inline: var(--smaller-gap-inline-size);
    padding-block: calc(var(--small-gap-block-size) - var(--smaller-gap-block-size) / 2);
    border-block-end-width: var(--smaller-gap-block-size)
}

.skin-dos button {
    margin: 0
}

.skin-dos button:focus {
    filter: brightness(var(--brightness-hover));
    outline-width: 0
}

.skin-dos .scrollable::-webkit-scrollbar {
    inline-size: var(--small-gap-inline-size);
    background-color: var(--bg-disabled-button-color)
}

.skin-dos .scrollable::-webkit-scrollbar-thumb,
.skin-dos .scrollable::-webkit-scrollbar-track {
    border-radius: 0
}

.skin-dos input[type=checkbox] {
    font-family: DOS-VGA-437, monospace;
    accent-color: var(--text-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer
}

.skin-dos input[type=checkbox]:after {
    content: "[ ]"
}

.skin-dos input[type=checkbox]:focus:after {
    background-color: var(--text-color);
    color: var(--bg-color)
}

.skin-dos input[type=checkbox]:checked:after {
    content: "[■]"
}

.skin-dos .button-bar,
.skin-dos .button-bar .button-group {
    row-gap: var(--small-gap-block-size)
}

.skin-dos .history-buttons button {
    font-family: DOS-VGA-437, monospace;
    padding-inline: var(--button-padding-inline-size)
}

.skin-dos .navigation-bar,
.skin-dos .breadcrumb ol,
.skin-dos .breadcrumb li,
.skin-dos .entries .entry-name {
    column-gap: var(--small-gap-inline-size)
}

.skin-dos .breadcrumb .breadcrumb-item-active,
.skin-dos .breadcrumb .breadcrumb-item-active:focus {
    text-decoration: underline var(--accent-color) var(--large-border-width)
}

.skin-dos .breadcrumb .breadcrumb-item {
    margin: 0
}

.skin-dos .breadcrumb .breadcrumb-item-active:focus {
    outline: 0;
    filter: brightness(var(--brightness-hover))
}

.skin-dos .entries {
    padding-block-start: 0;
    margin-block-start: calc(var(--small-gap-block-size) - var(--smaller-gap-block-size) / 2)
}

.skin-dos .entries li {
    column-gap: var(--small-gap-inline-size)
}

.skin-dos .entries .entry-select {
    color: var(--text-color)
}

.skin-dos .entries .entry-select:checked {
    color: var(--bg-color)
}

.skin-dos .entries .entry-select:focus:after {
    background-color: var(--bg-color);
    color: var(--text-color)
}

.skin-dos .entries .entry-select:checked:focus:after {
    background-color: var(--accent-color);
    color: var(--bg-color)
}

.skin-dos .info-bar {
    margin-block-end: 0;
    padding-block: var(--gap-block-size);
    min-block-size: var(--gap-block-size);
    font-size: .8em
}

.skin-dos .info-bar canvas {
    bottom: calc(-1.25 * var(--gap-block-size))
}

.skin-dos dialog {
    min-inline-size: min(75dvw, 50ch);
    inline-size: min(75dvw, 50ch);
    inline-size: min(round(up, 75dvw, 1ch), 50ch);
    padding-inline: var(--smaller-gap-inline-size);
    padding-block: calc(var(--small-gap-block-size) - var(--smaller-gap-block-size) / 2)
}

.skin-dos dialog form,
.skin-dos dialog form p {
    row-gap: 0
}

.skin-dos dialog form p {
    margin: 0;
    padding-inline: var(--small-gap-inline-size);
    padding-block-start: var(--large-gap-block-size)
}

.skin-dos dialog form .dialog-title {
    padding-inline-start: var(--small-gap-inline-size);
    padding-block-end: calc(var(--small-gap-block-size) - var(--smaller-gap-block-size) / 4);
    border-block-end: solid var(--accent-color) calc(var(--smaller-gap-block-size) / 2)
}

.skin-dos dialog form p {
    row-gap: var(--gap-block-size);
    padding-block-start: calc(var(--small-gap-block-size) - var(--smaller-gap-block-size) / 4);
    padding-block-end: 0
}

.skin-dos dialog label {
    row-gap: 0
}

.skin-dos dialog input {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
    caret-shape: underscore
}

.skin-dos dialog select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.skin-dos dialog input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.skin-dos dialog input,
.skin-dos dialog select {
    padding: 0;
    block-size: var(--gap-block-size);
    inline-size: 100%
}

.skin-dos dialog select:focus {
    background-color: var(--text-color);
    color: var(--bg-color)
}

.skin-dos .options-dialog label {
    min-block-size: auto
}

.skin-dos .options-dialog form p {
    row-gap: 0
}

.skin-dos .options-dialog input[type=checkbox] {
    inline-size: inherit;
    block-size: inherit;
    accent-color: inherit
}

.skin-dos .options-dialog input,
.skin-dos .options-dialog select {
    inline-size: min(10ch, 100%);
    text-align: right
}

.skin-dos .downloads,
.main-container.hidden-downloads .button-bar-bottom {
    border-block-end-width: 0
}

@media (display-mode: standalone) or (orientation: portrait) or (max-aspect-ratio: 7/5) {

    .skin-dos .main-container:not(.hidden-footer) .downloads,
    .main-container.hidden-downloads:not(.hidden-footer) .button-bar-bottom {
        border-block-end-width: var(--smaller-gap-block-size)
    }

    .skin-dos main {
        inline-size: 100%;
        inline-size: round(down, 100%, 1ch);
        margin-block-start: 0;
        border-width: 0
    }

    .skin-dos main:before,
    .skin-dos main:after {
        content: none
    }

    .skin-dos main>:first-child {
        padding-block-start: var(--small-gap-block-size);
        padding-inline: var(--small-gap-inline-size)
    }

    .skin-dos main>* {
        padding-inline: var(--small-gap-inline-size)
    }

    .skin-dos .info-bar {
        margin-block-start: var(--small-gap-block-size);
        padding-block: var(--small-gap-inline-size)
    }

    .skin-dos .info-bar canvas {
        bottom: calc(-.75 * var(--gap-block-size))
    }

    .skin-dos dialog {
        margin-block-start: calc(var(--gap-block-size) - var(--smaller-gap-block-size) / 2)
    }
}

.main-container,
main {
    display: flex;
    flex-direction: column
}

.main-container {
    block-size: 100dvh;
    align-items: center
}

main,
.hidden-downloads .entries {
    flex: 1
}

main,
main>* {
    border-style: solid;
    border-color: var(--accent-color);
    border-width: 0
}

main {
    /*background-color:var(--bg-color);*/
    color: var(--text-color);
    margin-inline: var(--gap-inline-size);
    margin-block: var(--gap-block-size);

    /*border-width:var(--border-width);*/
    inline-size: var(--app-width);
    min-block-size: 20em;
    /*border-radius:var(--border-radius-width)*/
}

.main-container:not(.hidden-footer) main {
    margin-block-end: 0
}

main>* {
    padding-inline: var(--gap-inline-size);
    padding-block: var(--gap-block-size);
    border-block-end-width: var(--border-width)
}

.hidden-downloads .entries {
    resize: none
}

.downloads,
.main-container.hidden-downloads .button-bar-bottom {
    border-block-end-width: 0
}

@media (display-mode: standalone) or (orientation: portrait) or (max-aspect-ratio: 7/5) {
    main {
        inline-size: 100dvw;
        margin: 0;
        border-width: 0;
        margin-block-end: 0
    }

    .main-container:not(.hidden-footer) .downloads,
    .main-container.hidden-downloads:not(.hidden-footer) .button-bar-bottom {
        border-block-end-width: var(--border-width)
    }
}

.button-bar-top {
    justify-content: flex-start
}

.button-bar-top .button-group:last-of-type {
    flex: 1;
    justify-content: end
}

.navigation-bar,
.history-buttons,
.breadcrumb {
    display: flex
}

.navigation-bar {
    column-gap: var(--gap-inline-size)
}

.history-buttons,
.breadcrumb li {
    column-gap: var(--small-gap-inline-size)
}

.history-buttons button {
    font-family: monospace;
    align-self: start;
    padding-block: var(--small-button-padding-block-size);
    padding-inline: var(--small-button-padding-inline-size)
}

.history-buttons button:not([disabled]),
.breadcrumb .breadcrumb-item-active {
    cursor: pointer
}

.breadcrumb,
.breadcrumb ol,
.breadcrumb li,
.breadcrumb .breadcrumb-item {
    overflow-x: hidden;
    overflow-inline: hidden
}

.navigation-bar,
.breadcrumb ol {
    flex-wrap: wrap;
    column-gap: calc(var(--small-gap-inline-size) - var(--outline-width));
    row-gap: var(--small-gap-block-size)
}

.breadcrumb li:after {
    content: var(--folder-separator)
}

.breadcrumb .breadcrumb-item {
    text-decoration: underline dotted transparent var(--large-border-width);
    text-underline-offset: .25em;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-tap-highlight-color: transparent;
    margin: var(--outline-width)
}

.breadcrumb .breadcrumb-item:focus-visible {
    text-decoration: none
}

.breadcrumb li:last-of-type .breadcrumb-item {
    font-weight: var(--font-weight-bolder)
}

.breadcrumb .breadcrumb-item-active {
    text-decoration-color: var(--accent-color)
}

.breadcrumb .breadcrumb-item-active:hover {
    filter: brightness(var(--brightness-hover))
}

.entries {
    block-size: 55dvh;
    min-block-size: 10dvh;
    resize: vertical;
    box-sizing: border-box;
    padding-block-start: 0;
    margin-block-start: var(--gap-block-size)
}

.entries ol {
    flex-direction: column;
    row-gap: var(--list-item-gap-block-size)
}

.entries li {
    padding-block: var(--list-item-padding-block-size);
    padding-inline: var(--list-item-padding-inline-size);
    outline: none;
    column-gap: var(--gap-inline-size);
    cursor: pointer
}

@supports (grid-template-columns: subgrid) {
    .entries ol {
        display: grid;
        grid-template-columns: auto min-content min-content;
        grid-template-rows: repeat(auto)
    }

    .entries li {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1 / 4
    }
}

.entries .entry-select {
    accent-color: var(--dark-accent-color);
    margin: 0;
    padding: 0;
    max-block-size: 1em;
    margin-inline-start: var(--small-gap-inline-size)
}

.entries .entry-name {
    display: flex;
    -webkit-user-select: none;
    user-select: none;
    overflow-x: hidden;
    overflow-inline: hidden;
    column-gap: var(--small-gap-inline-size);
    flex: 1;
    -webkit-tap-highlight-color: transparent
}

.entries .entry-size {
    text-align: right;
    white-space: nowrap
}

.entries .entry-highlighted {
    background-color: var(--accent-color);
    color: var(--highlighted-text-color)
}

.entries .entry-highlighted ::selection {
    background-color: var(--text-color);
    color: var(--bg-color)
}

.entries .directory .entry-name:after {
    content: var(--folder-separator)
}

@media (hover: hover) and (pointer: fine) {
    .entries ol {
        --no-entries-outline-width: 1px;
        --no-entries-outline-width-negative: calc(var(--no-entries-outline-width) * -1)
    }

    .entries ol:empty {
        block-size: 100%
    }

    .entries ol:empty:after {
        display: flex;
        block-size: 100%;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-weight: 700;
        font-size: 2em;
        line-height: 1.5em;
        text-shadow: var(--no-entries-outline-width-negative) var(--no-entries-outline-width-negative) 0 var(--accent-color), var(--no-entries-outline-width-negative) 0 0 var(--accent-color), var(--no-entries-outline-width-negative) var(--no-entries-outline-width) 0 var(--accent-color), 0 var(--no-entries-outline-width-negative) 0 var(--accent-color), 0 0 0 var(--accent-color), 0 var(--no-entries-outline-width) 0 var(--accent-color), var(--no-entries-outline-width) var(--no-entries-outline-width-negative) 0 var(--accent-color), var(--no-entries-outline-width) 0 0 var(--accent-color), var(--no-entries-outline-width) var(--no-entries-outline-width) 0 var(--accent-color);
        color: var(--bg-color);
        opacity: .5
    }

    .entries.dragging-items ol:empty:after {
        color: var(--accent-color);
        text-shadow: none
    }

    .entries ol:empty:after {
        content: var(--message-drag-and-drop-entries)
    }
}

.button-bar-bottom {
    justify-content: flex-end;
    touch-action: none
}

.downloads {
    min-block-size: 5dvh;
    overflow-block: auto;
    flex: 1
}

.downloads ol,
.downloads li {
    flex-direction: column
}

.downloads ol {
    row-gap: var(--gap-block-size)
}

.downloads li {
    row-gap: var(--small-gap-block-size);
    align-items: normal
}

.downloads .download-entry {
    display: flex
}

.downloads .download-entry-name {
    flex: 1
}

.downloads li progress {
    inline-size: 100%;
    block-size: 1em;
    accent-color: var(--accent-color)
}

.info-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: var(--gap-block-size);
    margin-inline: var(--gap-inline-size);
    inline-size: 100%;
    overflow: hidden
}

.info-bar .source-link {
    display: inline;
    color: var(--basic-text-color);
    text-align: center;
    position: relative;
    overflow: visible;
    text-transform: uppercase !important;
}

.info-bar .source-link * {
    font-size: .8rem
}

.info-bar .source-link a {
    text-decoration: none
}

.info-bar .source-link a svg {
    width: 1em;
    height: 1em;
    margin-bottom: -2px
}

.info-bar .player-active :not(canvas) {
    opacity: .5;
    color: var(--basic-text-color);
    transition: all .2s
}

.info-bar .player-active .label {
    opacity: 0;
    pointer-events: none
}

.info-bar:hover .source-link.player-active canvas {
    opacity: .2
}

.info-bar:hover .player-active * {
    opacity: 1;
    pointer-events: inherit
}

.info-bar:hover .source-link.player-active .icon {
    color: var(--accent-color);
    opacity: 1
}

.info-bar .icon {
    display: inline-block;
    color: var(--accent-color);
    inline-size: 1.75ch;
    -webkit-user-select: none;
    user-select: none
}

.info-bar .icon-music-player {
    inline-size: 2.25ch
}

.info-bar input[type=color],
.info-bar .icon-music-player {
    cursor: pointer;
    outline-width: 0
}

.icon-music-player.paused {
    color: inherit
}

.info-bar .icon:hover {
    filter: brightness(var(--brightness-hover))
}

.info-bar input[type=color] {
    position: relative;
    left: -1.75ch;
    margin-right: -1.8ch;
    inline-size: 1.8ch;
    block-size: 1.25em;
    padding: 0;
    filter: opacity(0)
}

.info-bar canvas {
    position: absolute;
    bottom: calc(-1 * var(--gap-block-size));
    left: -7.5%;
    z-index: -1;
    inline-size: 115%;
    block-size: calc(100% + var(--gap-block-size));
    opacity: .4
}

.options-dialog form p {
    padding-inline: var(--small-gap-inline-size);
    padding-block-start: var(--large-gap-block-size)
}

.options-dialog label {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-block-size: 1.5em
}

.options-dialog label span {
    flex: 1
}

.options-dialog input,
.options-dialog select {
    margin-inline-start: var(--gap-inline-size)
}

.options-dialog input[disabled] {
    color: var(--disabled-button-color)
}

.options-dialog input[type=checkbox] {
    inline-size: 2ch;
    block-size: 1em;
    accent-color: var(--accent-color);
    margin-inline: calc(var(--outline-width))
}

.options-dialog input[type=password],
.options-dialog input[type=number],
.options-dialog select {
    inline-size: min(10ch, 100%)
}