:root {
    color-scheme: dark;

    --accent-2: var(--accent);

    --bg: #111;
    --surface: #1b1b1b;
    --surface-sunken: #141414;
    --surface-inset: #151515;
    --surface-mode: #1c1c1c;
    --surface-deep: #101010;
    --surface-group: #202020;
    --surface-hover: #242424;
    --surface-button-hover: #2d2d2d;
    --surface-primary: #252525;

    --border: #333;
    --border-subtle: #2d2d2d;
    --border-faint: #292929;
    --border-row: #262626;
    --border-muted: #3a3a3a;
    --border-button: #444;
    --border-strong: #555;
    --border-button-hover: #666;

    --text: #eee;
    --text-2: #ccc;
    --text-muted: #aaa;
    --text-dim: #999;
    --text-faint: #888;
    --text-placeholder: #666;
    --text-ghost: #555;

    --accent: #e5b84b;

    --pos: #5fd35f;
    --neg: #f05a5a;
    --warn: #e5b84b;
    --pvp: #b284e5;
    --cat-blue: #5fa8d3;
    --cat-green: #5fd35f;
    --cat-red: #f05a5a;
    --cat-orange: #e5b84b;

    --t-default: #eee;
    --t-orange: #e5b84b;
    --t-red: #f05a5a;
    --t-blue: #5fa8d3;
    --t-yellow: #f2d544;
    --t-white: white;
    --t-green: #5fd35f;
    --t-purple: #b284e5;
    --t-grey: #aaa;

    --pos-bg: #172517;
    --pos-border: #294429;
    --pos-card: #131f13;
    --neg-bg: #2a1717;
    --neg-border: #4b2828;
    --neg-card: #201414;
    --warn-bg: #2a2317;
    --warn-border: #4b3f28;
    --pvp-bg: #241429;
    --pvp-border: #402a4b;
    --cat-blue-bg: #14212a;
    --cat-blue-border: #28414b;
    --cat-green-bg: #172517;
    --cat-green-border: #294429;
    --cat-red-bg: #2a1717;
    --cat-red-border: #4b2828;
    --cat-orange-bg: #2a1f14;
    --cat-orange-border: #4b3a28;

    --err-text: #f88;
    --err-bg: #241414;
    --err-border: #633;
    --missing-border: #3d2727;
    --missing-section-border: #3d2929;
    --other-bg: #201a12;
    --other-border: #4b3a1f;
}

html[data-theme="dark"] {
    --bg: #070707;
    --surface: #121212;
    --surface-sunken: #0d0d0d;
    --surface-inset: #0f0f0f;
    --surface-mode: #161616;
    --surface-deep: #0a0a0a;
    --surface-group: #171310;
    --surface-hover: #1f1812;
    --surface-button-hover: #2a1d12;
    --surface-primary: #2a1a0c;

    --border: #2b2b2b;
    --border-subtle: #232323;
    --border-faint: #202020;
    --border-row: #1d1d1d;
    --border-muted: #333;
    --border-button: #3b2a1c;
    --border-strong: #ff6d10;
    --border-button-hover: #ff8a3d;

    --text: #f2f2f2;
    --text-2: #cfcfcf;
    --text-muted: #a8a8a8;
    --text-dim: #969696;
    --text-faint: #858585;
    --text-placeholder: #6a6a6a;
    --text-ghost: #555;

    --accent: #ff6d10;
    --warn: #ff9a3d;
    --cat-orange: #ff8a33;
    --t-orange: #ff8a33;
    --t-default: #f2f2f2;
    --other-bg: #1a120a;
    --other-border: #4a2a10;
}

html[data-theme="light"] {

    --bg: #e2e9f0;
    --surface: #ffffff;
    --surface-sunken: #f1f5f9;
    --surface-inset: #fbfcfe;
    --surface-mode: #dfe7ef;
    --surface-deep: #f7f9fc;
    --surface-group: #f3f8fd;
    --surface-hover: #eaf3fb;
    --surface-button-hover: #dcebf8;
    --surface-primary: #e6f1fb;

    --border: #c6d2de;
    --border-subtle: #d3dde7;
    --border-faint: #d0dae5;
    --border-row: #dde5ed;
    --border-muted: #c2cedb;
    --border-button: #bccad8;
    --border-strong: #3a95d6;
    --border-button-hover: #1f78b8;

    --text: #16202a;
    --text-2: #2c3742;
    --text-muted: #4d5966;
    --text-dim: #56616d;
    --text-faint: #5f6a76;
    --text-placeholder: #7f8a96;
    --text-ghost: #8793a0;

    --accent: #3a95d6;
}

html[data-tone="light"] {
    color-scheme: light;

    --pos: #1b7a2c;
    --neg: #c0262d;
    --warn: #9a5a00;
    --pvp: #7440b0;
    --cat-blue: #1c5f9c;
    --cat-green: #1b7a2c;
    --cat-red: #c0262d;
    --cat-orange: #a65200;

    --t-default: #1b1b1b;
    --t-orange: #b35300;
    --t-red: #c0262d;
    --t-blue: #1c5f9c;
    --t-yellow: #7d6400;
    --t-white: #000;
    --t-green: #1b7a2c;
    --t-purple: #7440b0;
    --t-grey: #555;

    --err-text: #a51d24;
}

html[data-theme="rogue"] {
    --bg: #0c0808;
    --surface: #170f0f;
    --surface-sunken: #120c0c;
    --surface-inset: #140d0d;
    --surface-mode: #1b1212;
    --surface-deep: #0d0909;
    --surface-group: #1d1111;
    --surface-hover: #261414;
    --surface-button-hover: #321818;
    --surface-primary: #2e1515;

    --border: #3a2020;
    --border-subtle: #301b1b;
    --border-faint: #2c1919;
    --border-row: #281717;
    --border-muted: #422525;
    --border-button: #4d2626;
    --border-strong: #e0323c;
    --border-button-hover: #ff5a62;

    --text: #f0e8e8;
    --text-2: #d2c4c4;
    --text-muted: #b09e9e;
    --text-dim: #a08c8c;
    --text-faint: #907c7c;
    --text-placeholder: #6e5a5a;
    --text-ghost: #5c4848;

    --accent: #e0323c;
    --t-default: #f0e8e8;
    --other-bg: #221010;
    --other-border: #5a2020;
}

html[data-theme="darkzone"] {
    --bg: #0b0910;
    --surface: #15121c;
    --surface-sunken: #110e17;
    --surface-inset: #130f19;
    --surface-mode: #1a1622;
    --surface-deep: #0d0b12;
    --surface-group: #1a1524;
    --surface-hover: #221b30;
    --surface-button-hover: #2c223f;
    --surface-primary: #2a2040;

    --border: #332a44;
    --border-subtle: #2b2439;
    --border-faint: #272135;
    --border-row: #241e31;
    --border-muted: #3b3150;
    --border-button: #45395e;
    --border-strong: #a77bff;
    --border-button-hover: #c2a3ff;

    --text: #ece8f4;
    --text-2: #cbc4d8;
    --text-muted: #a89fb8;
    --text-dim: #978ea8;
    --text-faint: #877e98;
    --text-placeholder: #675e78;
    --text-ghost: #564e66;

    --accent: #a77bff;
    --t-default: #ece8f4;
    --other-bg: #1c1428;
    --other-border: #43305f;
}

html[data-theme="blacktusk"] {
    --bg: #0a0a0a;
    --surface: #161616;
    --surface-sunken: #111111;
    --surface-inset: #131313;
    --surface-mode: #1d1d1d;
    --surface-deep: #0d0d0d;
    --surface-group: #1a1a1a;
    --surface-hover: #242424;
    --surface-button-hover: #2e2e2e;
    --surface-primary: #2a2a2a;

    --border: #343434;
    --border-subtle: #2b2b2b;
    --border-faint: #282828;
    --border-row: #242424;
    --border-muted: #3e3e3e;
    --border-button: #4a4a4a;
    --border-strong: #e6e6e6;
    --border-button-hover: #ffffff;

    --text: #f4f4f4;
    --text-2: #d0d0d0;
    --text-muted: #a9a9a9;
    --text-dim: #979797;
    --text-faint: #868686;
    --text-placeholder: #656565;
    --text-ghost: #4f4f4f;

    --accent: #e6e6e6;
    --accent-line: #5a5a5a;
    --t-default: #f4f4f4;
    --other-bg: #1c1c1c;
    --other-border: #4a4a4a;
}

html[data-theme="outcasts"] {
    --bg: #050505;
    --surface: #101010;
    --surface-sunken: #0b0b0b;
    --surface-inset: #0d0d0d;
    --surface-mode: #161616;
    --surface-deep: #080808;
    --surface-group: #141312;
    --surface-hover: #1d1b17;
    --surface-button-hover: #2a2519;
    --surface-primary: #262117;

    --border: #2e2e2e;
    --border-subtle: #252525;
    --border-faint: #222;
    --border-row: #1e1e1e;
    --border-muted: #383838;
    --border-button: #3d3a33;
    --border-strong: #d4af37;
    --border-button-hover: #f0cc5a;

    --text: #ffffff;
    --text-2: #d8d8d8;
    --text-muted: #b0b0b0;
    --text-dim: #9c9c9c;
    --text-faint: #8a8a8a;
    --text-placeholder: #666;
    --text-ghost: #505050;

    --accent: #d4af37;
    --t-default: #ffffff;
    --other-bg: #17140c;
    --other-border: #4a3f1c;
}

html[data-theme="hyenas"] {
    --bg: #07100c;
    --surface: #0f1a15;
    --surface-sunken: #0b1511;
    --surface-inset: #0d1712;
    --surface-mode: #132019;
    --surface-deep: #08120d;
    --surface-group: #10201a;
    --surface-hover: #15291f;
    --surface-button-hover: #1b3628;
    --surface-primary: #183124;

    --border: #22362b;
    --border-subtle: #1d2f25;
    --border-faint: #1b2b22;
    --border-row: #19281f;
    --border-muted: #284134;
    --border-button: #2c4b3a;
    --border-strong: #2ecc71;
    --border-button-hover: #5ee39a;

    --text: #e6f2eb;
    --text-2: #c4d6cb;
    --text-muted: #9fb5a7;
    --text-dim: #8ea596;
    --text-faint: #7f9587;
    --text-placeholder: #5f7467;
    --text-ghost: #4b5c52;

    --accent: #2ecc71;
    --t-default: #e6f2eb;
    --other-bg: #0f2419;
    --other-border: #1f5a38;
}

html[data-theme="truesons"] {
    --bg: #080a10;
    --surface: #10141e;
    --surface-sunken: #0c1018;
    --surface-inset: #0e121b;
    --surface-mode: #151a26;
    --surface-deep: #0a0d14;
    --surface-group: #1a1420;
    --surface-hover: #1d1a2e;
    --surface-button-hover: #2a1e33;
    --surface-primary: #241a30;

    --border: #2a2c40;
    --border-subtle: #232638;
    --border-faint: #212334;
    --border-row: #1d2030;
    --border-muted: #352f48;
    --border-button: #4a3040;
    --border-strong: #4a86e8;
    --border-button-hover: #77a6f2;

    --text: #e8ecf4;
    --text-2: #c6cddb;
    --text-muted: #a2abbd;
    --text-dim: #9099ac;
    --text-faint: #80899c;
    --text-placeholder: #606a7c;
    --text-ghost: #4c5566;

    --accent: #4a86e8;
    --t-default: #e8ecf4;
    --other-bg: #1e1218;
    --other-border: #5a2430;
    --accent-2: #e23b3b;
    --accent-line: color-mix(in srgb, #e23b3b 55%, var(--border));
    --accent-heading: #ff6b6b;
}

html[data-theme="rikers"] {
    --bg: #140a04;
    --surface: #23130a;
    --surface-sunken: #1c0f07;
    --surface-inset: #1f1108;
    --surface-mode: #2c170b;
    --surface-deep: #170c05;
    --surface-group: #28150a;
    --surface-hover: #36190a;
    --surface-button-hover: #47210c;
    --surface-primary: #40200c;

    --border: #4a2a15;
    --border-subtle: #402411;
    --border-faint: #3c2210;
    --border-row: #361e0e;
    --border-muted: #553019;
    --border-button: #6a3a18;
    --border-strong: #ff7a1a;
    --border-button-hover: #ffa052;

    --text: #fbeee4;
    --text-2: #e2cbbb;
    --text-muted: #c4a590;
    --text-dim: #b3937e;
    --text-faint: #a2826d;
    --text-placeholder: #7d6150;
    --text-ghost: #654d3f;

    --accent: #ff7a1a;
    --t-default: #fbeee4;
    --other-bg: #2e1608;
    --other-border: #7a3a10;
    --warn: #ffb347;
    --t-orange: #ffa052;
    --cat-orange: #ffa052;
}

html[data-theme="cleaners"] {
    --bg: #0f1a0d;
    --surface: #192a16;
    --surface-sunken: #142212;
    --surface-inset: #162514;
    --surface-mode: #1f331b;
    --surface-deep: #11200f;
    --surface-group: #1c2e14;
    --surface-hover: #233b18;
    --surface-button-hover: #2d4a1d;
    --surface-primary: #28431a;

    --border: #34502c;
    --border-subtle: #2d4626;
    --border-faint: #2a4124;
    --border-row: #263b20;
    --border-muted: #3c5a33;
    --border-button: #476a33;
    --border-strong: #f2c230;
    --border-button-hover: #ffd95c;

    --text: #eef4e8;
    --text-2: #cfdcc6;
    --text-muted: #abbd9f;
    --text-dim: #9aad8e;
    --text-faint: #899d7d;
    --text-placeholder: #688060;
    --text-ghost: #52664c;

    --accent: #f2c230;
    --t-default: #eef4e8;
    --other-bg: #243515;
    --other-border: #5c5a16;
    --accent-line: color-mix(in srgb, #7cc242 55%, var(--border));
}

html[data-theme="lmb"] {
    --bg: #eceeef;
    --surface: #ffffff;
    --surface-sunken: #f5f6f7;
    --surface-inset: #fdfdfd;
    --surface-mode: #e7e9eb;
    --surface-deep: #fafafa;
    --surface-group: #fdf6f6;
    --surface-hover: #fbeeee;
    --surface-button-hover: #f7e0e0;
    --surface-primary: #fbe9e9;

    --border: #d2d5d8;
    --border-subtle: #dcdfe2;
    --border-faint: #d9dcdf;
    --border-row: #e3e5e7;
    --border-muted: #cbced2;
    --border-button: #c4c8cc;
    --border-strong: #c8102e;
    --border-button-hover: #9e0c24;

    --text: #151719;
    --text-2: #2c2f33;
    --text-muted: #4f5358;
    --text-dim: #585c61;
    --text-faint: #62666b;
    --text-placeholder: #82868b;
    --text-ghost: #8a8e93;

    --accent: #c8102e;
}

html[data-cvd="protanopia"],
html[data-cvd="deuteranopia"] {
    --pos: #56b4e9;
    --neg: #ff9f40;
    --warn: #f0e442;
    --pvp: #c7a6ff;
    --cat-blue: #56b4e9;
    --cat-green: #f0e442;
    --cat-orange: #e69f00;
    --cat-red: #ff6b8b;

    --t-orange: #f0a830;
    --t-red: #ff6b8b;
    --t-blue: #56b4e9;
    --t-yellow: #f0e442;
    --t-green: #7fd4ff;
    --t-purple: #c7a6ff;

    --err-text: #ff9f40;
}

html[data-cvd="protanopia"] {
    --cat-red: #ff8fb4;
    --t-red: #ff8fb4;
}

html[data-cvd="tritanopia"] {
    --pos: #2ec4b6;
    --neg: #ff4d6d;
    --warn: #ff8a65;
    --pvp: #f28fd0;
    --cat-blue: #8ce4f5;
    --cat-green: #2ec4b6;
    --cat-orange: #ff8a65;
    --cat-red: #ff4d6d;

    --t-orange: #ff8a65;
    --t-red: #ff4d6d;
    --t-blue: #8ce4f5;
    --t-yellow: #ffc9d9;
    --t-green: #2ec4b6;
    --t-purple: #f28fd0;

    --err-text: #ff4d6d;
}

html[data-tone="light"][data-cvd="protanopia"],
html[data-tone="light"][data-cvd="deuteranopia"] {
    --pos: #0067a8;
    --neg: #b34e00;
    --warn: #6f6400;
    --pvp: #5b3fb8;
    --cat-blue: #0067a8;
    --cat-green: #6f6400;
    --cat-orange: #9a5f00;
    --cat-red: #b02a5a;

    --t-orange: #a85200;
    --t-red: #b02a5a;
    --t-blue: #0067a8;
    --t-yellow: #6f6400;
    --t-green: #0a6f9e;
    --t-purple: #5b3fb8;

    --err-text: #b34e00;
}

html[data-tone="light"][data-cvd="protanopia"] {
    --cat-red: #c2186b;
    --t-red: #c2186b;
}

html[data-tone="light"][data-cvd="tritanopia"] {
    --pos: #00796b;
    --neg: #c2184b;
    --warn: #b0412a;
    --pvp: #a3207f;
    --cat-blue: #006f86;
    --cat-green: #00796b;
    --cat-orange: #b0412a;
    --cat-red: #c2184b;

    --t-orange: #b0412a;
    --t-red: #c2184b;
    --t-blue: #006f86;
    --t-yellow: #8f3f66;
    --t-green: #00796b;
    --t-purple: #a3207f;

    --err-text: #c2184b;
}

html[data-theme]:not([data-theme="hayzee"]),
html[data-cvd]:not([data-cvd="off"]) {
    --pos-bg: color-mix(in srgb, var(--pos) 14%, var(--surface-sunken));
    --pos-border: color-mix(in srgb, var(--pos) 38%, var(--surface-sunken));
    --pos-card: color-mix(in srgb, var(--pos) 7%, var(--surface));
    --neg-bg: color-mix(in srgb, var(--neg) 14%, var(--surface-sunken));
    --neg-border: color-mix(in srgb, var(--neg) 38%, var(--surface-sunken));
    --neg-card: color-mix(in srgb, var(--neg) 7%, var(--surface));
    --warn-bg: color-mix(in srgb, var(--warn) 14%, var(--surface-sunken));
    --warn-border: color-mix(in srgb, var(--warn) 38%, var(--surface-sunken));
    --pvp-bg: color-mix(in srgb, var(--pvp) 14%, var(--surface-sunken));
    --pvp-border: color-mix(in srgb, var(--pvp) 38%, var(--surface-sunken));
    --cat-blue-bg: color-mix(in srgb, var(--cat-blue) 14%, var(--surface-sunken));
    --cat-blue-border: color-mix(in srgb, var(--cat-blue) 38%, var(--surface-sunken));
    --cat-green-bg: color-mix(in srgb, var(--cat-green) 14%, var(--surface-sunken));
    --cat-green-border: color-mix(in srgb, var(--cat-green) 38%, var(--surface-sunken));
    --cat-red-bg: color-mix(in srgb, var(--cat-red) 14%, var(--surface-sunken));
    --cat-red-border: color-mix(in srgb, var(--cat-red) 38%, var(--surface-sunken));
    --cat-orange-bg: color-mix(in srgb, var(--cat-orange) 14%, var(--surface-sunken));
    --cat-orange-border: color-mix(in srgb, var(--cat-orange) 38%, var(--surface-sunken));
    --err-bg: color-mix(in srgb, var(--neg) 10%, var(--surface));
    --err-border: color-mix(in srgb, var(--neg) 40%, var(--surface));
    --missing-border: color-mix(in srgb, var(--neg) 25%, var(--border-subtle));
    --missing-section-border: color-mix(in srgb, var(--neg) 20%, var(--border));
}

html[data-tone="light"] {
    --other-bg: color-mix(in srgb, var(--accent) 7%, var(--surface));
    --other-border: color-mix(in srgb, var(--accent) 35%, var(--surface));
}

html[data-tone="light"] .talent-white,
html[data-tone="light"] .talent-yellow,
html[data-tone="light"] .talent-red,
html[data-tone="light"] .talent-blue,
html[data-tone="light"] .talent-light-blue,
html[data-tone="light"] .talent-green,
html[data-tone="light"] .talent-color.talent-purple {
    font-weight: bold;
}

html[data-theme]:not([data-theme="hayzee"]) {
    --accent-soft: var(--accent-line, color-mix(in srgb, var(--accent) 45%, var(--border)));
    --accent-tint: color-mix(in srgb, var(--accent) 10%, var(--surface));
    --accent-text: color-mix(in srgb, var(--accent) 80%, var(--text));
}

html[data-tone="light"] {
    --accent-text: color-mix(in srgb, var(--accent) 75%, #000);
}

html[data-theme]:not([data-theme="hayzee"]) .title-box,
html[data-theme]:not([data-theme="hayzee"]) .dev-title-box {
    border-top: 3px solid var(--accent-2);
}

html[data-theme]:not([data-theme="hayzee"]) .title-box h1,
html[data-theme]:not([data-theme="hayzee"]) .dev-title-box h1 {
    color: var(--accent-text);
}

html[data-theme]:not([data-theme="hayzee"]) .abbreviation-title,
html[data-theme]:not([data-theme="hayzee"]) .mode h3,
html[data-theme]:not([data-theme="hayzee"]) .talent-section-heading,
html[data-theme]:not([data-theme="hayzee"]) .tier-title,
html[data-theme]:not([data-theme="hayzee"]) .balance-label,
html[data-theme]:not([data-theme="hayzee"]) .summary-label {
    color: var(--accent-text);
}

html[data-theme]:not([data-theme="hayzee"]) .gearset-header,
html[data-theme]:not([data-theme="hayzee"]) .gearset-diff-header,
html[data-theme]:not([data-theme="hayzee"]) .gearset-section-header,
html[data-theme]:not([data-theme="hayzee"]) .gearset-group-heading,
html[data-theme]:not([data-theme="hayzee"]) .talent-category-heading {
    border-bottom-color: var(--accent-soft);
}

html[data-theme]:not([data-theme="hayzee"]) .gearset,
html[data-theme]:not([data-theme="hayzee"]) .gearset-diff-card:not(.gearset-diff-card-added):not(.gearset-diff-card-removed),
html[data-theme]:not([data-theme="hayzee"]) .dev-section:not(.dev-group):not(.dev-section-missing) {
    border-top: 2px solid var(--accent-soft);
}

html[data-theme]:not([data-theme="hayzee"]) .bonus > h3 {
    color: var(--accent-heading, var(--accent-text));
}

html[data-theme="truesons"] .gearset-header h2,
html[data-theme="truesons"] .gearset-diff-header h3,
html[data-theme="truesons"] .talent-card-header h4,
html[data-theme="truesons"] .section-heading h2 {
    color: var(--accent-heading);
}

html[data-theme="truesons"] .section-nav button:hover,
html[data-theme="truesons"] .theme-control select:hover {
    border-color: var(--accent-2);
}

html[data-theme]:not([data-theme="hayzee"]) .section-nav button:hover,
html[data-theme]:not([data-theme="hayzee"]) .theme-control select:hover {
    background: var(--accent-tint);
}

html[data-theme]:not([data-theme="hayzee"]) #gearset-search:focus,
html[data-theme]:not([data-theme="hayzee"]) #compare-search:focus,
html[data-theme]:not([data-theme="hayzee"]) .override-editor:focus {
    border-color: var(--accent);
}

html[data-theme]:not([data-theme="hayzee"]) .results-summary strong,
html[data-theme]:not([data-theme="hayzee"]) .summary-value:not(.summary-positive):not(.summary-negative):not(.summary-warning) {
    color: var(--accent-text);
}

html[data-tone="light"] .mode,
html[data-tone="light"] .talent-description-inner-mode,
html[data-tone="light"] .balance-difference {
    border: 1px solid var(--border-subtle);
}

html[data-tone="light"] .page-header {
    box-shadow: 0 6px 12px -10px rgba(0, 0, 0, 0.35);
}

.talent-color.talent-green {
    color: var(--t-green);
}

.talent-color.talent-purple {
    color: var(--t-purple);
}

.talent-color.talent-grey,
.talent-color.talent-gray {
    color: var(--t-grey);
}

.balance-positive::after,
.diff-delta-positive::after {
    content: "\00a0\25B2";
    font-size: 0.7em;
    vertical-align: 0.1em;
}

.balance-negative::after,
.diff-delta-negative::after {
    content: "\00a0\25BC";
    font-size: 0.7em;
    vertical-align: 0.1em;
}

.section-nav {
    flex-wrap: wrap;
}

.theme-control {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.theme-control select {
    padding: 7px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    text-transform: none;
}

.theme-control select:hover,
.theme-control select:focus {
    outline: none;
    border-color: var(--border-strong);
}

@media (max-width: 800px) {
    .theme-control {
        flex: 1 1 auto;
    }

    .theme-control select {
        flex: 1;
    }
}