body {
    --accent: 0, 170, 255;
    --accent-bg: 40, 40, 40;
    line-height: 24px;
    display: flex;
    flex-direction: column;
    background-color: #181818;
    overflow-x: hidden;
}
::placeholder, * {
    font-family: arial, sans-serif;
    font-size: 16px;
    line-height: inherit;
    color: #ffffff;
    margin: 0px;
}
h1, p.large {
    font-size: 24px;
    line-height: 32px;
}
:any-link {
    color: rgb(var(--accent));
}
div, nav, header, footer, main, aside, form {
    position: relative;
    display: flex;
}
video, img, svg, canvas {
    display: block;
}
video {
    object-fit: fill;
}
textarea, div[contenteditable], input {
    flex: 1;
    padding: 0px;
    outline: none;
    border: none;
    resize: none;
    background-color: #00000000;
}
div[contenteditable] {
    word-break: break-word;
    white-space: break-spaces;
}
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    height: 8px;
    background-color: #80808040;
    border-radius: 4px;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    border-radius: 8px;
}
input[type="range"]::-moz-range-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    border-radius: 8px;
    border: none;
}
button, a.button {
    line-height: 16px;
    text-decoration: none;
    cursor: pointer;
    padding: 0px;
    outline: none;
    border: none;
    background-color: #80808000;
    -webkit-user-select: none;
    user-select: none;
}
div.button-inner {
    padding: 8px;
    gap: 8px;
    background-color: #80808040;
    transition: 0.1s background-color, 0.1s box-shadow;
}
button *, a * {
    pointer-events: none;
}
button svg, a.button svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}
button.round div.button-inner,
a.button.round div.button-inner,
.round-buttons button div.button-inner,
.round-buttons a.button div.button-inner {
    border-radius: 16px;
}
button.feedback div.button-inner,
a.button.feedback div.button-inner {
    box-shadow: inset 0px 0px 2px 2px #808080;
}
button.flat div.button-inner,
a.button.flat div.button-inner,
.flat-buttons button div.button-inner,
.flat-buttons a.button div.button-inner {
    background-color: #80808000;
}
button:hover div.button-inner,
button:focus-visible div.button-inner,
a.button:hover div.button-inner,
a.button:focus-visible div.button-inner {
    background-color: #808080c0;
}
button:active div.button-inner,
a.button:active div.button-inner {
    background-color: #80808080;
}
::-webkit-scrollbar,
::-webkit-scrollbar-button,
::-webkit-scrollbar-corner {
    width: 16px;
    height: 16px;
    background: #00000000;
}
::-webkit-scrollbar-button:vertical:decrement {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8px' height='4px' fill='rgb(128,128,128)'><polygon points='0,4 8,4 4,0'/></svg>") center / 8px 4px no-repeat;
}
::-webkit-scrollbar-button:vertical:increment {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8px' height='4px' fill='rgb(128,128,128)'><polygon points='0,0 8,0 4,4'/></svg>") center / 8px 4px no-repeat;
}
::-webkit-scrollbar-button:horizontal:decrement {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4px' height='8px' fill='rgb(128,128,128)'><polygon points='0,4 4,0 4,8'/></svg>") center / 4px 8px no-repeat;
}
::-webkit-scrollbar-button:horizontal:increment {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4px' height='8px' fill='rgb(128,128,128)'><polygon points='0,0 0,8 4,4'/></svg>") center / 4px 8px no-repeat;
}
::-webkit-scrollbar-button:decrement:end,
::-webkit-scrollbar-button:increment:start {
    display: none;
}
::-webkit-scrollbar-thumb {
    background: #808080;
}
@media (prefers-color-scheme: light) {
    ::placeholder, * {
        color: #000000;
    }
    body {
        --accent-bg: 255, 255, 255;
        background-color: #e3e3e3;
    }
}
button.accent div.button-inner,
a.button.accent div.button-inner {
    background-color: rgba(var(--accent), 0.5);
}
button.accent:hover div.button-inner,
button.accent:focus-visible div.button-inner,
a.button.accent:hover div.button-inner,
a.button.accent:focus-visible div.button-inner {
    background-color: rgb(var(--accent));
}
button.accent:active div.button-inner,
a.button.accent:active div.button-inner {
    background-color: rgba(var(--accent), 0.75);
}
.hidden {
    display: none !important;
}
.flexible {
    flex: 1;
}