:root {
    --decorative-spacing-xs: 4px;
    --decorative-spacing-s: 8px;
    --decorative-spacing-m: 12px;
    --decorative-spacing-l: 16px;
    --decorative-spacing-xl: 24px;
    --semantic-spacing-s: 0.5rem;
    --semantic-spacing-m: 1rem;
    --semantic-spacing-l: 1.5rem;
    --semantic-spacing-xl: 2rem;
    --border-radius-std: 8px;
    --border-radius-large: 16px;
    --bg-default: oklch(97.614% 0.00011 271.152);
    --bg-dark: oklch(84.522% 0.0001 271.152);
    --color-accent: oklch(51.146% 0.175 273.5);
    --color-accent-active: oklch(40.761% 0.172 271.5);
    --color-accent-light: oklch(70.177% 0.118 274.5);
    --text-default: oklch(19.125% 0.00002 271.152);
    --text-secondary: oklch(19.125% 0.00002 271.152/0.75);
    --high-contrast-bg: oklch(100% 0.00011 271.152);
    --high-contrast-text: oklch(0% 0 0);
    --high-contrast-track: oklch(59.987% 0.00007 271.152);
    --high-contrast-thumb: oklch(100% 0.00011 271.152);
    --high-contrast-active-track: oklch(77.389% 0.086 273.5);
    --high-contrast-active-thumb: oklch(45.203% 0.228 272.0);
    --high-contrast-accent: oklch(45.203% 0.228 272.0);
    --high-contrast-accent-active: oklch(42.938% 0.172 272.0);
    --high-contrast-accent-light: oklch(56.789% 0.142 271.5);
    --color-valid: oklch(49.234% 0.118 142.888);
    --color-error: oklch(52.879% 0.170 29.223);
    --text-xxs: 0.75rem;
    --text-xs: 0.925rem;
    --text-sm: 1.125rem;
    --text-m: 1.25rem;
    --text-l: 1.5rem;
}

.dark {
    --bg-default: oklch(15.907% 0.00002 271.152);
    --bg-dark: oklch(33.289% 0.00004 271.152);
    --text-default: oklch(95.514% 0.00011 271.152);
    --text-secondary: oklch(84.522% 0.0001 271.152/0.75);
    --color-accent: oklch(65.512% 0.138 274.5);
    --color-accent-active: oklch(51.205% 0.122 275.0);
    --color-accent-light: oklch(81.928% 0.040 273.5);
    --high-contrast-bg: oklch(0% 0 0);
    --high-contrast-text: oklch(100% 0.00011 271.152);
    --high-contrast-track: oklch(75.402% 0.00009 271.152);
    --high-contrast-thumb: oklch(36.002% 0.00004 271.152);
    --high-contrast-active-track: oklch(80.202% 0.075 273.5);
    --high-contrast-active-thumb: oklch(37.639% 0.166 271.0);
    --high-contrast-accent: oklch(80.202% 0.075 273.5);
    --high-contrast-accent-active: oklch(71.534% 0.114 273.5);
    --high-contrast-accent-light: oklch(86.483% 0.050 273.5);
    --color-valid: oklch(85.965% 0.210 142.776);
    --color-error: oklch(66.066% 0.175 25.939);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: var(--bg-default);
    color: var(--text-default);
    font-family: sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue';
    transition: background-color 150ms ease, color 150ms ease;
}

main {
    padding: 48px;
    min-height: 100vh;
    display: flex;
    flex-flow: column nowrap;
}

.valid {
    color: var(--color-valid);
}

.invalid {
    color: var(--color-error);
}

h1, h2, p {
    margin: 0;
    font-weight: 400;
}

h1 {
    margin-bottom: var(--semantic-spacing-xl);
}

h2 {
    font-size: var(--text-l);
    margin-bottom: var(--semantic-spacing-m);
}

.touch-fallback {
    display: none;
}

.flex-wrapper {
    display: flex;
    flex-flow: row nowrap;
    flex-grow: 1;
    justify-content: space-evenly;
}

.flex-wrapper > * {
    flex: 3;
    min-width: 12rem;
    padding: var(--decorative-spacing-s);
}

.flex-wrapper > :first-child {
    flex: 2;
}

.flex-wrapper > :nth-child(2) {
    min-width: 18rem;
}

.justify-center {
    display: flex;
    justify-content: center;
}

.row {
    display: flex;
    flex-flow: row nowrap;
}

.items-center {
    align-items: center;
    gap: var(--decorative-spacing-xl)
}

.inputs {
    display: flex;
    flex-flow: column nowrap;
    column-gap: var(--decorative-spacing-l);
}

.col {
    display: flex;
    flex-flow: column nowrap;
}

input {
    background-color: var(--bg-default);
    margin: var(--semantic-spacing-s) 0;
    padding: 6px var(--decorative-spacing-m);
    box-shadow: 0 0 2.5px 0 var(--text-default);
    border: none;
    border-radius: var(--border-radius-large);
    transition: background-color 100ms ease-out, box-shadow 100ms ease-in;
    color: var(--text-default);
    font-size: var(--text-xs);
}

input:focus-visible {
    outline: 1.5px solid var(--text-default);
}

.dark-mode {
    margin: var(--decorative-spacing-xs) 0;
    border-radius: var(--border-radius-large);
    padding: var(--decorative-spacing-s) var(--decorative-spacing-m);
    background-color: var(--color-accent);
    border: none;
    color: var(--bg-default);
    min-width: 95px;
    transition: background-color 100ms ease-out, color 100ms ease-out;
}

.dark-mode:hover, .keybind button:hover {
    background-color: var(--color-accent-light);
}

.dark-mode:active, .keybind button:active {
    background-color: var(--color-accent-active);
}

.toggle {
    margin-bottom: var(--semantic-spacing-m);
}

.toggle-title {
    font-size: var(--text-m);
}

.toggle-desc {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    transition: color 150ms ease;
}

.track {
    position: relative;
    min-width: 75px;
    margin: var(--semantic-spacing-s) 0;
    padding: var(--decorative-spacing-xs) 0;
    border-radius: var(--border-radius-large);
    background-color: var(--bg-dark);
    border: none;
    transition: background-color 150ms ease-out;
}

.track.active {
    background-color: var(--color-accent-light);
}

.thumb {
    position: relative;
    left: var(--decorative-spacing-xs);
    width: 24px;
    height: 24px;
    border-radius: 1000px;
    border-radius: var(--border-radius-large);
    background-color: var(--bg-default);
    transition: background-color 150ms ease-out, left 250ms ease;
}

.active .thumb {
    left: 45px;
    background-color: var(--color-accent);
}

.keybinds-section {
    margin-top: var(--semantic-spacing-l);
}

.keybind {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--decorative-spacing-xl);
    margin-bottom: var(--semantic-spacing-m);
}

.keybind-subgroup {
    display: flex;
    flex-flow: row nowrap;
    gap: var(--decorative-spacing-xl);
    width: 75%;
    justify-content: space-evenly;
    align-items: center;
}

.keybind-title {
    font-size: var(--text-sm);
}

.keybind p {
    max-width: 25%;
}

.keybind button {
    border-radius: var(--border-radius-large);
    padding: var(--decorative-spacing-s) var(--decorative-spacing-l);
    background-color: var(--color-accent);
    border: none;
    font-size: var(--text-xxs);
    color: var(--bg-default);
    transition: background-color 100ms ease-out, color 100ms ease-out;
}

body *:disabled, body *:disabled:hover, body *:disabled:active {
    background-color: gray;
    opacity: 0.9;
}

.monospace {
    font-family: monospace;
    font-size: var(--text-sm);
}

body.reduced-motion, body.reduced-motion * {
    transition: none;
}

.high-contrast {
    background-color: var(--high-contrast-bg);
    color: var(--high-contrast-text);
}

.high-contrast .track {
    background-color: var(--high-contrast-track);
}

.high-contrast .track.active {
    background-color: var(--high-contrast-active-track);
}

.high-contrast .thumb {
    background-color: var(--high-contrast-thumb);
}

.high-contrast .active .thumb {
    background-color: var(--high-contrast-active-thumb);
}

.high-contrast .toggle-desc {
    color: var(--high-contrast-text);
}

.high-contrast .dark-mode, .high-contrast .keybind button {
    background-color: var(--high-contrast-accent);
}

.high-contrast .dark-mode:hover, .high-contrast .keybind button:hover {
    background-color: var(--high-contrast-accent-light);
}

.high-contrast .dark-mode:active, .high-contrast .keybind button:active {
    background-color: var(--high-contrast-accent-active);
}

.increased-focus *:focus-visible, 
.increased-focus *:focus {
    outline: 2px solid var(--text-default);
}

@media (max-width: 64rem) {
    .flex-wrapper {
        flex-flow: column nowrap;
    }

    .flex-wrapper > * {
        flex: 3;
        padding: 0;
        margin-bottom: var(--semantic-spacing-xl);
    }

    .keybind p {
        max-width: 15%;
    }

    .justify-center {
        justify-content: flex-start;
    }

    .touch-fallback {
        display: block;
        margin-bottom: var(--semantic-spacing-l);
    }

    .keybind {
        max-width: 60%;
    }
}

@media (max-width: 52rem) {
    .keybind {
        align-items: start;
        flex-flow: column nowrap;
        max-width: 100%;
        gap: 0;
        margin-bottom: var(--semantic-spacing-l);
    }

    .keybind-title {
        margin-bottom: var(--semantic-spacing-s);
    }

    .keybind-subgroup {
        justify-content: start;
        gap: 128px;
    }

    .keybind p {
        max-width: 100%;
    }
}