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

* {
    margin: 0;
}

:root {
    --active-border: selecteditem;
    --active-text: selecteditemtext;
    --body-background: canvas;
    --body-text: canvastext;
    --button-background: buttonface;
    --button-border: rgba(32, 32, 32, .5);
    --button-destructive-background: buttonface;
    --button-destructive-text: buttontext;
    --button-disabled-background: buttonface;
    --button-text: buttontext;
    --disabled-text: graytext;
    --error-text: red;
    --input-background: field;
    --input-border: var(--button-border);
    --input-text: fieldtext;
    --select-background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%204.233%204.233%22%3E%3Cpath%20d%3D%22M.794%201.323H3.44L2.117%202.646Z%22%20style%3D%22fill%3A%23000%3Bfill-opacity%3A1%3Bstroke%3Anone%22%2F%3E%3C%2Fsvg%3E');
    --selection-background: highlight;
    --selection-text: highlighttext;

    --display-font-family: system-ui, sans-serif;
    --monospace-font-family: monospace;
    --text-font-family: system-ui, sans-serif;
}

.named-colors {
    --body-background: #fff;
    --body-text: #000;
    --button-background: #eee;
    --button-destructive-background: #eee;
    --button-destructive-text: #c00;
    --button-disabled-background: #eee;
    --button-text: #000;
    --disabled-text: #999;
    --input-background: #fff;
    --input-text: #000;
}

@media screen and (prefers-color-scheme: dark) {
    :root {
        --button-border: rgba(224, 224, 224, .5);
        --select-background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%204.233%204.233%22%3E%3Cpath%20d%3D%22M.794%201.323H3.44L2.117%202.646Z%22%20style%3D%22fill%3A%23fff%3Bfill-opacity%3A1%3Bstroke%3Anone%22%2F%3E%3C%2Fsvg%3E');
    }

    .named-colors {
        --active-border: #69f;
        --active-text: #fff;
        --body-background: #000;
        --body-text: #fff;
        --button-background: #333;
        --button-destructive-background: #333;
        --button-destructive-text: #f99;
        --button-disabled-background: #333;
        --button-text: #fff;
        --disabled-text: #999;
        --input-background: #000;
        --input-text: #fff;
    }
}

body {
    background-color: var(--body-background);
    color: var(--body-text);
    font-family: var(--text-font-family);
    line-height: 1.3;
}

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

.box {
    display: flex;
    flex-wrap: wrap;
}

.box--horizontal {
    flex-direction: row;
}

.box--vertical {
    flex-direction: column;
}

.box--compact {
    gap: .25rem;
}

.box--cozy {
    gap: .5rem;
}

.box--comfortable {
    gap: 1rem;
}

.container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1024px;
    padding-left: 1rem;
    padding-right: 1rem;
}

a:focus,
button:focus,
input[type=date]:focus,
input[type=datetime-local]:focus,
input[type=month]:focus,
input[type=number]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=submit]:focus,
input[type=reset]:focus,
input[type=button]:focus,
input[type=tel]:focus,
input[type=time]:focus,
input[type=week]:focus,
input[type=datetime]:focus,
input[type=search]:focus,
input[type=text]:focus,
input[type=url]:focus,
select:focus,
textarea:focus {
    box-shadow: 0 0 0 1px var(--active-border) inset;
    border-color: var(--active-border);
    outline: none;
}

input[type=file]:focus {
    box-shadow: 0 0 0 2px var(--active-border) inset;
    outline: none;
}

.button,
.input,
.select {
    font-family: var(--display-font-family);
    font-size: 1rem;
    line-height: 1.3rem;
}

.button {
    appearance: none;
    background-color: var(--button-background);
    border-radius: .25rem;
    border: 1px var(--button-border) solid;
    color: var(--button-text);
    cursor: pointer;
    display: inline-block;
    padding: .25rem .5rem;
    text-decoration: none;
}

.button--destructive {
    background-color: var(--button-destructive-background);
    color: var(--button-destructive-text);
}

.button:disabled,
.button--disabled {
    background-color: var(--button-disabled-background);
    color: var(--disabled-text);
    cursor: not-allowed;
}

.input,
.select {
    background-color: var(--input-background);
    border-radius: .25rem;
    border: 1px var(--input-border) solid;
    color: var(--input-text);
    display: inline-block;
    padding: .25rem .5rem;
}

input[type=date],
input[type=datetime-local],
input[type=month],
input[type=number],
input[type=email],
input[type=password],
input[type=submit],
input[type=reset],
input[type=button],
input[type=tel],
input[type=time],
input[type=week],
input[type=datetime],
input[type=search],
input[type=text],
input[type=url],
select {
    min-height: calc(1.3rem + 2 * .25rem + 2px);
}

.input:disabled {
    color: var(--disabled-text);
    cursor: not-allowed;
}

.input[type=password] {
    font-family: var(--monospace-font-family);
}

.input[type=file] {
    background-color: unset;
    border-style: none;
    padding: 0;
}

.input--block {
    display: block;
    width: 100%;
}

.select {
    min-height: calc(1.3rem + 2 * .25rem);
}

.select--custom {
    appearance: none;
    background-image: var(--select-background-image);
    background-position: right .25rem top .5rem;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    padding-right: calc(.25rem + 1rem + .5rem);
}

.select--custom[multiple] {
    background-image: none;
    min-height: unset;
    padding-right: .5rem;
}

.input--monospace {
    font-family: monospace;
}

.form__group {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.form__widget {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.form__checkbox-or-radio {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: .5rem;
}

.form__label {
    font-weight: bold;
}

.form__checkbox-or-radio .form__label {
    font-weight: normal;
}

.form__errors {
    color: var(--error-text);
    display: flex;
    flex-direction: column;
    gap: .25rem;
    list-style-type: none;
    padding-left: 0;
}