HarborFork/harbor/web/themes.css

/* Harbor's colour themes, one light and one dark side each. Generated from the user's BroadWorks Enhancer palettes
   (src/content/theme-palettes.css, the twelve video-game-nod themes) on 2026-10-02 and mapped onto Harbor's tokens:
   canvas -> --bg, surface/raised -> the surfaces, accent -> links and highlights, action -> filled buttons, on/off/warn
   -> green/red/amber, and side/header -> the sidebar and the top bar. Harbor's own look (harbor.css) is the default;
   <html data-palette="<id>"> picks one of these, and data-theme / the system setting picks the side, like harbor.css.
   The [data-p] blocks colour the picker's preview cards (themes.js). */

/* DMG */
:root[data-palette="dmg"] {
  --bg: #c6d09a;
  --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #8b1d57 9%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #9bbc0f 7%, transparent) 0%, transparent 55%);
  --surface: #e2e9be;
  --surface-2: color-mix(in srgb, #e2e9be 55%, #d7dfb0);
  --surface-3: #d7dfb0;
  --text: #0f380f;
  --text-2: color-mix(in srgb, #0f380f 72%, #2f5a2f);
  --muted: #2f5a2f;
  --faint: color-mix(in srgb, #2f5a2f 62%, #e2e9be);
  --line: #b3bf7c;
  --line-2: color-mix(in srgb, #b3bf7c 78%, #0f380f);
  --accent: #8b1d57;
  --accent-2: color-mix(in srgb, #8b1d57 85%, #0f380f);
  --accent-soft: color-mix(in srgb, #8b1d57 12%, #e2e9be);
  --accent-ink: color-mix(in oklab, #8b1d57 70%, #0f380f);
  --action: #8b1d57;
  --action-2: color-mix(in srgb, #8b1d57 86%, #0f380f);
  --on-action: #ffffff;
  --green: #1f5f1f;
  --green-soft: color-mix(in srgb, #1f5f1f 13%, #e2e9be);
  --amber: #7a5a00;
  --amber-soft: color-mix(in srgb, #7a5a00 13%, #e2e9be);
  --red: #a1203a;
  --red-soft: color-mix(in srgb, #a1203a 13%, #e2e9be);
  --violet: color-mix(in oklab, #7356f0 78%, #0f380f);
  --violet-soft: color-mix(in srgb, #7356f0 13%, #e2e9be);
  --blue: color-mix(in oklab, #2a78e4 78%, #0f380f);
  --blue-soft: color-mix(in srgb, #2a78e4 13%, #e2e9be);
  --on-green: #ffffff;
  --on-red: #ffffff;
  --header: #cfcbc8;
  --side: #0f380f;
  --side-solid: #0f380f;
  --side-text: #c6d79a;
  --side-muted: color-mix(in srgb, #c6d79a 64%, #0f380f);
  --side-hover: #1d4a1d;
  --side-active: #306230;
  --side-active-text: #e2e9be;
  --side-accent: #9bbc0f;
  --side-line: color-mix(in srgb, #c6d79a 14%, #0f380f);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px #0f380f1f;
  --shadow-3: 0 24px 60px -16px rgba(0, 0, 0, .3);
  --ring: 0 0 0 3px color-mix(in srgb, #8b1d57 38%, transparent);
  color-scheme: light;
}
:root[data-palette="dmg"][data-theme="dark"] {
  --bg: #0e240e;
  --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #f29bc6 12%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #9bbc0f 7%, transparent) 0%, transparent 55%);
  --surface: #173617;
  --surface-2: color-mix(in srgb, #173617 55%, #1e421e);
  --surface-3: #1e421e;
  --text: #e2e9be;
  --text-2: color-mix(in srgb, #e2e9be 72%, #b4c48a);
  --muted: #b4c48a;
  --faint: color-mix(in srgb, #b4c48a 62%, #173617);
  --line: #2a4f2a;
  --line-2: color-mix(in srgb, #2a4f2a 78%, #e2e9be);
  --accent: #f29bc6;
  --accent-2: color-mix(in srgb, #f29bc6 85%, #e2e9be);
  --accent-soft: color-mix(in srgb, #f29bc6 16%, #173617);
  --accent-ink: color-mix(in oklab, #f29bc6 70%, #e2e9be);
  --action: #e86aa6;
  --action-2: color-mix(in srgb, #e86aa6 86%, #e2e9be);
  --on-action: #1f0a14;
  --green: #9bbc0f;
  --green-soft: color-mix(in srgb, #9bbc0f 16%, #173617);
  --amber: #f2c36b;
  --amber-soft: color-mix(in srgb, #f2c36b 16%, #173617);
  --red: #ff8cc0;
  --red-soft: color-mix(in srgb, #ff8cc0 16%, #173617);
  --violet: color-mix(in oklab, #a68cff 78%, #e2e9be);
  --violet-soft: color-mix(in srgb, #a68cff 16%, #173617);
  --blue: color-mix(in oklab, #5ba3ff 78%, #e2e9be);
  --blue-soft: color-mix(in srgb, #5ba3ff 16%, #173617);
  --on-green: #0e240e;
  --on-red: #0e240e;
  --header: #0b1f0b;
  --side: #081a08;
  --side-solid: #081a08;
  --side-text: #c6d79a;
  --side-muted: color-mix(in srgb, #c6d79a 64%, #081a08);
  --side-hover: #133013;
  --side-active: #1e421e;
  --side-active-text: #e2e9be;
  --side-accent: #9bbc0f;
  --side-line: color-mix(in srgb, #c6d79a 14%, #081a08);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px #00000059;
  --shadow-3: 0 30px 70px -20px rgba(0, 0, 0, .7);
  --ring: 0 0 0 3px color-mix(in srgb, #9bbc0f 38%, transparent);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="dmg"]:not([data-theme="light"]) {
    --bg: #0e240e;
    --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #f29bc6 12%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #9bbc0f 7%, transparent) 0%, transparent 55%);
    --surface: #173617;
    --surface-2: color-mix(in srgb, #173617 55%, #1e421e);
    --surface-3: #1e421e;
    --text: #e2e9be;
    --text-2: color-mix(in srgb, #e2e9be 72%, #b4c48a);
    --muted: #b4c48a;
    --faint: color-mix(in srgb, #b4c48a 62%, #173617);
    --line: #2a4f2a;
    --line-2: color-mix(in srgb, #2a4f2a 78%, #e2e9be);
    --accent: #f29bc6;
    --accent-2: color-mix(in srgb, #f29bc6 85%, #e2e9be);
    --accent-soft: color-mix(in srgb, #f29bc6 16%, #173617);
    --accent-ink: color-mix(in oklab, #f29bc6 70%, #e2e9be);
    --action: #e86aa6;
    --action-2: color-mix(in srgb, #e86aa6 86%, #e2e9be);
    --on-action: #1f0a14;
    --green: #9bbc0f;
    --green-soft: color-mix(in srgb, #9bbc0f 16%, #173617);
    --amber: #f2c36b;
    --amber-soft: color-mix(in srgb, #f2c36b 16%, #173617);
    --red: #ff8cc0;
    --red-soft: color-mix(in srgb, #ff8cc0 16%, #173617);
    --violet: color-mix(in oklab, #a68cff 78%, #e2e9be);
    --violet-soft: color-mix(in srgb, #a68cff 16%, #173617);
    --blue: color-mix(in oklab, #5ba3ff 78%, #e2e9be);
    --blue-soft: color-mix(in srgb, #5ba3ff 16%, #173617);
    --on-green: #0e240e;
    --on-red: #0e240e;
    --header: #0b1f0b;
    --side: #081a08;
    --side-solid: #081a08;
    --side-text: #c6d79a;
    --side-muted: color-mix(in srgb, #c6d79a 64%, #081a08);
    --side-hover: #133013;
    --side-active: #1e421e;
    --side-active-text: #e2e9be;
    --side-accent: #9bbc0f;
    --side-line: color-mix(in srgb, #c6d79a 14%, #081a08);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px #00000059;
    --shadow-3: 0 30px 70px -20px rgba(0, 0, 0, .7);
    --ring: 0 0 0 3px color-mix(in srgb, #9bbc0f 38%, transparent);
    color-scheme: dark;
  }
}

/* Duke */
:root[data-palette="graphite"] {
  --bg: #e9eceb;
  --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #44700f 9%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #b9e568 7%, transparent) 0%, transparent 55%);
  --surface: #fbfcfb;
  --surface-2: color-mix(in srgb, #fbfcfb 55%, #eef1ef);
  --surface-3: #eef1ef;
  --text: #1b2320;
  --text-2: color-mix(in srgb, #1b2320 72%, #4c5a57);
  --muted: #4c5a57;
  --faint: color-mix(in srgb, #4c5a57 62%, #fbfcfb);
  --line: #d6dcda;
  --line-2: color-mix(in srgb, #d6dcda 78%, #1b2320);
  --accent: #44700f;
  --accent-2: color-mix(in srgb, #44700f 85%, #1b2320);
  --accent-soft: color-mix(in srgb, #44700f 12%, #fbfcfb);
  --accent-ink: color-mix(in oklab, #44700f 70%, #1b2320);
  --action: #a7d65e;
  --action-2: color-mix(in srgb, #a7d65e 86%, #1b2320);
  --on-action: #15210e;
  --green: #1d6b3a;
  --green-soft: color-mix(in srgb, #1d6b3a 13%, #fbfcfb);
  --amber: #9a5b00;
  --amber-soft: color-mix(in srgb, #9a5b00 13%, #fbfcfb);
  --red: #b3261e;
  --red-soft: color-mix(in srgb, #b3261e 13%, #fbfcfb);
  --violet: color-mix(in oklab, #7356f0 78%, #1b2320);
  --violet-soft: color-mix(in srgb, #7356f0 13%, #fbfcfb);
  --blue: color-mix(in oklab, #2a78e4 78%, #1b2320);
  --blue-soft: color-mix(in srgb, #2a78e4 13%, #fbfcfb);
  --on-green: #ffffff;
  --on-red: #ffffff;
  --header: #fbfcfb;
  --side: #15191d;
  --side-solid: #15191d;
  --side-text: #c9d5d3;
  --side-muted: color-mix(in srgb, #c9d5d3 64%, #15191d);
  --side-hover: #273438;
  --side-active: #304343;
  --side-active-text: #f5fffa;
  --side-accent: #b9e568;
  --side-line: color-mix(in srgb, #c9d5d3 14%, #15191d);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px #1b232014;
  --shadow-3: 0 24px 60px -16px rgba(0, 0, 0, .3);
  --ring: 0 0 0 3px color-mix(in srgb, #5b8f1f 38%, transparent);
  color-scheme: light;
}
:root[data-palette="graphite"][data-theme="dark"] {
  --bg: #15191d;
  --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #b9e568 12%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #c6ee7c 7%, transparent) 0%, transparent 55%);
  --surface: #242c31;
  --surface-2: color-mix(in srgb, #242c31 55%, #2c373a);
  --surface-3: #2c373a;
  --text: #f0f5f2;
  --text-2: color-mix(in srgb, #f0f5f2 72%, #b4c4c1);
  --muted: #b4c4c1;
  --faint: color-mix(in srgb, #b4c4c1 62%, #242c31);
  --line: #3d4b4b;
  --line-2: color-mix(in srgb, #3d4b4b 78%, #f0f5f2);
  --accent: #b9e568;
  --accent-2: color-mix(in srgb, #b9e568 85%, #f0f5f2);
  --accent-soft: color-mix(in srgb, #b9e568 16%, #242c31);
  --accent-ink: color-mix(in oklab, #b9e568 70%, #f0f5f2);
  --action: #a7d65e;
  --action-2: color-mix(in srgb, #a7d65e 86%, #f0f5f2);
  --on-action: #15210e;
  --green: #8be0a4;
  --green-soft: color-mix(in srgb, #8be0a4 16%, #242c31);
  --amber: #f2c36b;
  --amber-soft: color-mix(in srgb, #f2c36b 16%, #242c31);
  --red: #ff9d8f;
  --red-soft: color-mix(in srgb, #ff9d8f 16%, #242c31);
  --violet: color-mix(in oklab, #a68cff 78%, #f0f5f2);
  --violet-soft: color-mix(in srgb, #a68cff 16%, #242c31);
  --blue: color-mix(in oklab, #5ba3ff 78%, #f0f5f2);
  --blue-soft: color-mix(in srgb, #5ba3ff 16%, #242c31);
  --on-green: #15191d;
  --on-red: #15191d;
  --header: #171b1e;
  --side: #101619;
  --side-solid: #101619;
  --side-text: #c9d5d3;
  --side-muted: color-mix(in srgb, #c9d5d3 64%, #101619);
  --side-hover: #273438;
  --side-active: #304343;
  --side-active-text: #f5fffa;
  --side-accent: #c6ee7c;
  --side-line: color-mix(in srgb, #c9d5d3 14%, #101619);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px #00000036;
  --shadow-3: 0 30px 70px -20px rgba(0, 0, 0, .7);
  --ring: 0 0 0 3px color-mix(in srgb, #c6ee7c 38%, transparent);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="graphite"]:not([data-theme="light"]) {
    --bg: #15191d;
    --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #b9e568 12%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #c6ee7c 7%, transparent) 0%, transparent 55%);
    --surface: #242c31;
    --surface-2: color-mix(in srgb, #242c31 55%, #2c373a);
    --surface-3: #2c373a;
    --text: #f0f5f2;
    --text-2: color-mix(in srgb, #f0f5f2 72%, #b4c4c1);
    --muted: #b4c4c1;
    --faint: color-mix(in srgb, #b4c4c1 62%, #242c31);
    --line: #3d4b4b;
    --line-2: color-mix(in srgb, #3d4b4b 78%, #f0f5f2);
    --accent: #b9e568;
    --accent-2: color-mix(in srgb, #b9e568 85%, #f0f5f2);
    --accent-soft: color-mix(in srgb, #b9e568 16%, #242c31);
    --accent-ink: color-mix(in oklab, #b9e568 70%, #f0f5f2);
    --action: #a7d65e;
    --action-2: color-mix(in srgb, #a7d65e 86%, #f0f5f2);
    --on-action: #15210e;
    --green: #8be0a4;
    --green-soft: color-mix(in srgb, #8be0a4 16%, #242c31);
    --amber: #f2c36b;
    --amber-soft: color-mix(in srgb, #f2c36b 16%, #242c31);
    --red: #ff9d8f;
    --red-soft: color-mix(in srgb, #ff9d8f 16%, #242c31);
    --violet: color-mix(in oklab, #a68cff 78%, #f0f5f2);
    --violet-soft: color-mix(in srgb, #a68cff 16%, #242c31);
    --blue: color-mix(in oklab, #5ba3ff 78%, #f0f5f2);
    --blue-soft: color-mix(in srgb, #5ba3ff 16%, #242c31);
    --on-green: #15191d;
    --on-red: #15191d;
    --header: #171b1e;
    --side: #101619;
    --side-solid: #101619;
    --side-text: #c9d5d3;
    --side-muted: color-mix(in srgb, #c9d5d3 64%, #101619);
    --side-hover: #273438;
    --side-active: #304343;
    --side-active-text: #f5fffa;
    --side-accent: #c6ee7c;
    --side-line: color-mix(in srgb, #c9d5d3 14%, #101619);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px #00000036;
    --shadow-3: 0 30px 70px -20px rgba(0, 0, 0, .7);
    --ring: 0 0 0 3px color-mix(in srgb, #c6ee7c 38%, transparent);
    color-scheme: dark;
  }
}

/* FLUDD */
:root[data-palette="atlas"] {
  --bg: #edf2f7;
  --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #087f89 9%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #18aab3 7%, transparent) 0%, transparent 55%);
  --surface: #ffffff;
  --surface-2: color-mix(in srgb, #ffffff 55%, #f0f5f9);
  --surface-3: #f0f5f9;
  --text: #162b3d;
  --text-2: color-mix(in srgb, #162b3d 72%, #536778);
  --muted: #536778;
  --faint: color-mix(in srgb, #536778 62%, #ffffff);
  --line: #d5e0e9;
  --line-2: color-mix(in srgb, #d5e0e9 78%, #162b3d);
  --accent: #087f89;
  --accent-2: color-mix(in srgb, #087f89 85%, #162b3d);
  --accent-soft: color-mix(in srgb, #087f89 12%, #ffffff);
  --accent-ink: color-mix(in oklab, #087f89 70%, #162b3d);
  --action: #096c77;
  --action-2: color-mix(in srgb, #096c77 86%, #162b3d);
  --on-action: #ffffff;
  --green: #11703a;
  --green-soft: color-mix(in srgb, #11703a 13%, #ffffff);
  --amber: #9a5b00;
  --amber-soft: color-mix(in srgb, #9a5b00 13%, #ffffff);
  --red: #c0281a;
  --red-soft: color-mix(in srgb, #c0281a 13%, #ffffff);
  --violet: color-mix(in oklab, #7356f0 78%, #162b3d);
  --violet-soft: color-mix(in srgb, #7356f0 13%, #ffffff);
  --blue: color-mix(in oklab, #2a78e4 78%, #162b3d);
  --blue-soft: color-mix(in srgb, #2a78e4 13%, #ffffff);
  --on-green: #ffffff;
  --on-red: #ffffff;
  --header: #ffffff;
  --side: #132d47;
  --side-solid: #132d47;
  --side-text: #dbe8f2;
  --side-muted: color-mix(in srgb, #dbe8f2 64%, #132d47);
  --side-hover: #254561;
  --side-active: #e3f5f6;
  --side-active-text: #12354b;
  --side-accent: #18aab3;
  --side-line: color-mix(in srgb, #dbe8f2 14%, #132d47);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 28px #17364b12;
  --shadow-3: 0 24px 60px -16px rgba(0, 0, 0, .3);
  --ring: 0 0 0 3px color-mix(in srgb, #18aab3 38%, transparent);
  color-scheme: light;
}
:root[data-palette="atlas"][data-theme="dark"] {
  --bg: #0d1a26;
  --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #3cc6cf 12%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #3cc6cf 7%, transparent) 0%, transparent 55%);
  --surface: #142637;
  --surface-2: color-mix(in srgb, #142637 55%, #1a3044);
  --surface-3: #1a3044;
  --text: #e2edf5;
  --text-2: color-mix(in srgb, #e2edf5 72%, #9bb0c1);
  --muted: #9bb0c1;
  --faint: color-mix(in srgb, #9bb0c1 62%, #142637);
  --line: #27415a;
  --line-2: color-mix(in srgb, #27415a 78%, #e2edf5);
  --accent: #3cc6cf;
  --accent-2: color-mix(in srgb, #3cc6cf 85%, #e2edf5);
  --accent-soft: color-mix(in srgb, #3cc6cf 16%, #142637);
  --accent-ink: color-mix(in oklab, #3cc6cf 70%, #e2edf5);
  --action: #3cc6cf;
  --action-2: color-mix(in srgb, #3cc6cf 86%, #e2edf5);
  --on-action: #0b2226;
  --green: #6fd49b;
  --green-soft: color-mix(in srgb, #6fd49b 16%, #142637);
  --amber: #f2c36b;
  --amber-soft: color-mix(in srgb, #f2c36b 16%, #142637);
  --red: #f08a7e;
  --red-soft: color-mix(in srgb, #f08a7e 16%, #142637);
  --violet: color-mix(in oklab, #a68cff 78%, #e2edf5);
  --violet-soft: color-mix(in srgb, #a68cff 16%, #142637);
  --blue: color-mix(in oklab, #5ba3ff 78%, #e2edf5);
  --blue-soft: color-mix(in srgb, #5ba3ff 16%, #142637);
  --on-green: #0d1a26;
  --on-red: #0d1a26;
  --header: #0b1722;
  --side: #0a1520;
  --side-solid: #0a1520;
  --side-text: #c8d9e6;
  --side-muted: color-mix(in srgb, #c8d9e6 64%, #0a1520);
  --side-hover: #15283a;
  --side-active: #1a3044;
  --side-active-text: #ffffff;
  --side-accent: #3cc6cf;
  --side-line: color-mix(in srgb, #c8d9e6 14%, #0a1520);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px #00000055;
  --shadow-3: 0 30px 70px -20px rgba(0, 0, 0, .7);
  --ring: 0 0 0 3px color-mix(in srgb, #5fd8e0 38%, transparent);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="atlas"]:not([data-theme="light"]) {
    --bg: #0d1a26;
    --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #3cc6cf 12%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #3cc6cf 7%, transparent) 0%, transparent 55%);
    --surface: #142637;
    --surface-2: color-mix(in srgb, #142637 55%, #1a3044);
    --surface-3: #1a3044;
    --text: #e2edf5;
    --text-2: color-mix(in srgb, #e2edf5 72%, #9bb0c1);
    --muted: #9bb0c1;
    --faint: color-mix(in srgb, #9bb0c1 62%, #142637);
    --line: #27415a;
    --line-2: color-mix(in srgb, #27415a 78%, #e2edf5);
    --accent: #3cc6cf;
    --accent-2: color-mix(in srgb, #3cc6cf 85%, #e2edf5);
    --accent-soft: color-mix(in srgb, #3cc6cf 16%, #142637);
    --accent-ink: color-mix(in oklab, #3cc6cf 70%, #e2edf5);
    --action: #3cc6cf;
    --action-2: color-mix(in srgb, #3cc6cf 86%, #e2edf5);
    --on-action: #0b2226;
    --green: #6fd49b;
    --green-soft: color-mix(in srgb, #6fd49b 16%, #142637);
    --amber: #f2c36b;
    --amber-soft: color-mix(in srgb, #f2c36b 16%, #142637);
    --red: #f08a7e;
    --red-soft: color-mix(in srgb, #f08a7e 16%, #142637);
    --violet: color-mix(in oklab, #a68cff 78%, #e2edf5);
    --violet-soft: color-mix(in srgb, #a68cff 16%, #142637);
    --blue: color-mix(in oklab, #5ba3ff 78%, #e2edf5);
    --blue-soft: color-mix(in srgb, #5ba3ff 16%, #142637);
    --on-green: #0d1a26;
    --on-red: #0d1a26;
    --header: #0b1722;
    --side: #0a1520;
    --side-solid: #0a1520;
    --side-text: #c8d9e6;
    --side-muted: color-mix(in srgb, #c8d9e6 64%, #0a1520);
    --side-hover: #15283a;
    --side-active: #1a3044;
    --side-active-text: #ffffff;
    --side-accent: #3cc6cf;
    --side-line: color-mix(in srgb, #c8d9e6 14%, #0a1520);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px #00000055;
    --shadow-3: 0 30px 70px -20px rgba(0, 0, 0, .7);
    --ring: 0 0 0 3px color-mix(in srgb, #5fd8e0 38%, transparent);
    color-scheme: dark;
  }
}

/* Flowey */
:root[data-palette="rosepine"] {
  --bg: #f2e9e1;
  --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #286983 9%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #ebbcba 7%, transparent) 0%, transparent 55%);
  --surface: #fffaf3;
  --surface-2: color-mix(in srgb, #fffaf3 55%, #f4ede8);
  --surface-3: #f4ede8;
  --text: #464261;
  --text-2: color-mix(in srgb, #464261 72%, #625e7c);
  --muted: #625e7c;
  --faint: color-mix(in srgb, #625e7c 62%, #fffaf3);
  --line: #dfdad9;
  --line-2: color-mix(in srgb, #dfdad9 78%, #464261);
  --accent: #286983;
  --accent-2: color-mix(in srgb, #286983 85%, #464261);
  --accent-soft: color-mix(in srgb, #286983 12%, #fffaf3);
  --accent-ink: color-mix(in oklab, #286983 70%, #464261);
  --action: #286983;
  --action-2: color-mix(in srgb, #286983 86%, #464261);
  --on-action: #ffffff;
  --green: #2d6a55;
  --green-soft: color-mix(in srgb, #2d6a55 13%, #fffaf3);
  --amber: #9a5b00;
  --amber-soft: color-mix(in srgb, #9a5b00 13%, #fffaf3);
  --red: #a14d66;
  --red-soft: color-mix(in srgb, #a14d66 13%, #fffaf3);
  --violet: color-mix(in oklab, #7356f0 78%, #464261);
  --violet-soft: color-mix(in srgb, #7356f0 13%, #fffaf3);
  --blue: color-mix(in oklab, #2a78e4 78%, #464261);
  --blue-soft: color-mix(in srgb, #2a78e4 13%, #fffaf3);
  --on-green: #ffffff;
  --on-red: #ffffff;
  --header: #fffaf3;
  --side: #26233a;
  --side-solid: #26233a;
  --side-text: #e0def4;
  --side-muted: color-mix(in srgb, #e0def4 64%, #26233a);
  --side-hover: #312d4a;
  --side-active: #393552;
  --side-active-text: #ffffff;
  --side-accent: #ebbcba;
  --side-line: color-mix(in srgb, #e0def4 14%, #26233a);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px #57527914;
  --shadow-3: 0 24px 60px -16px rgba(0, 0, 0, .3);
  --ring: 0 0 0 3px color-mix(in srgb, #907aa9 38%, transparent);
  color-scheme: light;
}
:root[data-palette="rosepine"][data-theme="dark"] {
  --bg: #191724;
  --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #ebbcba 12%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #ebbcba 7%, transparent) 0%, transparent 55%);
  --surface: #1f1d2e;
  --surface-2: color-mix(in srgb, #1f1d2e 55%, #26233a);
  --surface-3: #26233a;
  --text: #e0def4;
  --text-2: color-mix(in srgb, #e0def4 72%, #908caa);
  --muted: #908caa;
  --faint: color-mix(in srgb, #908caa 62%, #1f1d2e);
  --line: #403d52;
  --line-2: color-mix(in srgb, #403d52 78%, #e0def4);
  --accent: #ebbcba;
  --accent-2: color-mix(in srgb, #ebbcba 85%, #e0def4);
  --accent-soft: color-mix(in srgb, #ebbcba 16%, #1f1d2e);
  --accent-ink: color-mix(in oklab, #ebbcba 70%, #e0def4);
  --action: #9ccfd8;
  --action-2: color-mix(in srgb, #9ccfd8 86%, #e0def4);
  --on-action: #191724;
  --green: #9ccfd8;
  --green-soft: color-mix(in srgb, #9ccfd8 16%, #1f1d2e);
  --amber: #f2c36b;
  --amber-soft: color-mix(in srgb, #f2c36b 16%, #1f1d2e);
  --red: #eb6f92;
  --red-soft: color-mix(in srgb, #eb6f92 16%, #1f1d2e);
  --violet: color-mix(in oklab, #a68cff 78%, #e0def4);
  --violet-soft: color-mix(in srgb, #a68cff 16%, #1f1d2e);
  --blue: color-mix(in oklab, #5ba3ff 78%, #e0def4);
  --blue-soft: color-mix(in srgb, #5ba3ff 16%, #1f1d2e);
  --on-green: #191724;
  --on-red: #191724;
  --header: #16141f;
  --side: #12101b;
  --side-solid: #12101b;
  --side-text: #cfcce6;
  --side-muted: color-mix(in srgb, #cfcce6 64%, #12101b);
  --side-hover: #1f1d2e;
  --side-active: #26233a;
  --side-active-text: #e0def4;
  --side-accent: #ebbcba;
  --side-line: color-mix(in srgb, #cfcce6 14%, #12101b);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px #0000004d;
  --shadow-3: 0 30px 70px -20px rgba(0, 0, 0, .7);
  --ring: 0 0 0 3px color-mix(in srgb, #c4a7e7 38%, transparent);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="rosepine"]:not([data-theme="light"]) {
    --bg: #191724;
    --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #ebbcba 12%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #ebbcba 7%, transparent) 0%, transparent 55%);
    --surface: #1f1d2e;
    --surface-2: color-mix(in srgb, #1f1d2e 55%, #26233a);
    --surface-3: #26233a;
    --text: #e0def4;
    --text-2: color-mix(in srgb, #e0def4 72%, #908caa);
    --muted: #908caa;
    --faint: color-mix(in srgb, #908caa 62%, #1f1d2e);
    --line: #403d52;
    --line-2: color-mix(in srgb, #403d52 78%, #e0def4);
    --accent: #ebbcba;
    --accent-2: color-mix(in srgb, #ebbcba 85%, #e0def4);
    --accent-soft: color-mix(in srgb, #ebbcba 16%, #1f1d2e);
    --accent-ink: color-mix(in oklab, #ebbcba 70%, #e0def4);
    --action: #9ccfd8;
    --action-2: color-mix(in srgb, #9ccfd8 86%, #e0def4);
    --on-action: #191724;
    --green: #9ccfd8;
    --green-soft: color-mix(in srgb, #9ccfd8 16%, #1f1d2e);
    --amber: #f2c36b;
    --amber-soft: color-mix(in srgb, #f2c36b 16%, #1f1d2e);
    --red: #eb6f92;
    --red-soft: color-mix(in srgb, #eb6f92 16%, #1f1d2e);
    --violet: color-mix(in oklab, #a68cff 78%, #e0def4);
    --violet-soft: color-mix(in srgb, #a68cff 16%, #1f1d2e);
    --blue: color-mix(in oklab, #5ba3ff 78%, #e0def4);
    --blue-soft: color-mix(in srgb, #5ba3ff 16%, #1f1d2e);
    --on-green: #191724;
    --on-red: #191724;
    --header: #16141f;
    --side: #12101b;
    --side-solid: #12101b;
    --side-text: #cfcce6;
    --side-muted: color-mix(in srgb, #cfcce6 64%, #12101b);
    --side-hover: #1f1d2e;
    --side-active: #26233a;
    --side-active-text: #e0def4;
    --side-accent: #ebbcba;
    --side-line: color-mix(in srgb, #cfcce6 14%, #12101b);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px #0000004d;
    --shadow-3: 0 30px 70px -20px rgba(0, 0, 0, .7);
    --ring: 0 0 0 3px color-mix(in srgb, #c4a7e7 38%, transparent);
    color-scheme: dark;
  }
}

/* Gerudo */
:root[data-palette="gruvbox"] {
  --bg: #f2e5bc;
  --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #a13502 9%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #fabd2f 7%, transparent) 0%, transparent 55%);
  --surface: #f9f5d7;
  --surface-2: color-mix(in srgb, #f9f5d7 55%, #f2e5bc);
  --surface-3: #f2e5bc;
  --text: #3c3836;
  --text-2: color-mix(in srgb, #3c3836 72%, #665c54);
  --muted: #665c54;
  --faint: color-mix(in srgb, #665c54 62%, #f9f5d7);
  --line: #e0d0a8;
  --line-2: color-mix(in srgb, #e0d0a8 78%, #3c3836);
  --accent: #a13502;
  --accent-2: color-mix(in srgb, #a13502 85%, #3c3836);
  --accent-soft: color-mix(in srgb, #a13502 12%, #f9f5d7);
  --accent-ink: color-mix(in oklab, #a13502 70%, #3c3836);
  --action: #af3a03;
  --action-2: color-mix(in srgb, #af3a03 86%, #3c3836);
  --on-action: #ffffff;
  --green: #5f5b0b;
  --green-soft: color-mix(in srgb, #5f5b0b 13%, #f9f5d7);
  --amber: #9a5b00;
  --amber-soft: color-mix(in srgb, #9a5b00 13%, #f9f5d7);
  --red: #9d0006;
  --red-soft: color-mix(in srgb, #9d0006 13%, #f9f5d7);
  --violet: color-mix(in oklab, #7356f0 78%, #3c3836);
  --violet-soft: color-mix(in srgb, #7356f0 13%, #f9f5d7);
  --blue: color-mix(in oklab, #2a78e4 78%, #3c3836);
  --blue-soft: color-mix(in srgb, #2a78e4 13%, #f9f5d7);
  --on-green: #ffffff;
  --on-red: #ffffff;
  --header: #f9f5d7;
  --side: #282828;
  --side-solid: #282828;
  --side-text: #d5c4a1;
  --side-muted: color-mix(in srgb, #d5c4a1 64%, #282828);
  --side-hover: #3c3836;
  --side-active: #504945;
  --side-active-text: #fbf1c7;
  --side-accent: #fabd2f;
  --side-line: color-mix(in srgb, #d5c4a1 14%, #282828);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px #3c383614;
  --shadow-3: 0 24px 60px -16px rgba(0, 0, 0, .3);
  --ring: 0 0 0 3px color-mix(in srgb, #b57614 38%, transparent);
  color-scheme: light;
}
:root[data-palette="gruvbox"][data-theme="dark"] {
  --bg: #282828;
  --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #fabd2f 12%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #fabd2f 7%, transparent) 0%, transparent 55%);
  --surface: #32302f;
  --surface-2: color-mix(in srgb, #32302f 55%, #3c3836);
  --surface-3: #3c3836;
  --text: #ebdbb2;
  --text-2: color-mix(in srgb, #ebdbb2 72%, #bdae93);
  --muted: #bdae93;
  --faint: color-mix(in srgb, #bdae93 62%, #32302f);
  --line: #504945;
  --line-2: color-mix(in srgb, #504945 78%, #ebdbb2);
  --accent: #fabd2f;
  --accent-2: color-mix(in srgb, #fabd2f 85%, #ebdbb2);
  --accent-soft: color-mix(in srgb, #fabd2f 16%, #32302f);
  --accent-ink: color-mix(in oklab, #fabd2f 70%, #ebdbb2);
  --action: #fe8019;
  --action-2: color-mix(in srgb, #fe8019 86%, #ebdbb2);
  --on-action: #1d2021;
  --green: #b8bb26;
  --green-soft: color-mix(in srgb, #b8bb26 16%, #32302f);
  --amber: #fabd2f;
  --amber-soft: color-mix(in srgb, #fabd2f 16%, #32302f);
  --red: #ff8a7a;
  --red-soft: color-mix(in srgb, #ff8a7a 16%, #32302f);
  --violet: color-mix(in oklab, #a68cff 78%, #ebdbb2);
  --violet-soft: color-mix(in srgb, #a68cff 16%, #32302f);
  --blue: color-mix(in oklab, #5ba3ff 78%, #ebdbb2);
  --blue-soft: color-mix(in srgb, #5ba3ff 16%, #32302f);
  --on-green: #282828;
  --on-red: #282828;
  --header: #1d2021;
  --side: #1d2021;
  --side-solid: #1d2021;
  --side-text: #d5c4a1;
  --side-muted: color-mix(in srgb, #d5c4a1 64%, #1d2021);
  --side-hover: #32302f;
  --side-active: #3c3836;
  --side-active-text: #fbf1c7;
  --side-accent: #fabd2f;
  --side-line: color-mix(in srgb, #d5c4a1 14%, #1d2021);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px #0000004d;
  --shadow-3: 0 30px 70px -20px rgba(0, 0, 0, .7);
  --ring: 0 0 0 3px color-mix(in srgb, #fabd2f 38%, transparent);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="gruvbox"]:not([data-theme="light"]) {
    --bg: #282828;
    --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #fabd2f 12%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #fabd2f 7%, transparent) 0%, transparent 55%);
    --surface: #32302f;
    --surface-2: color-mix(in srgb, #32302f 55%, #3c3836);
    --surface-3: #3c3836;
    --text: #ebdbb2;
    --text-2: color-mix(in srgb, #ebdbb2 72%, #bdae93);
    --muted: #bdae93;
    --faint: color-mix(in srgb, #bdae93 62%, #32302f);
    --line: #504945;
    --line-2: color-mix(in srgb, #504945 78%, #ebdbb2);
    --accent: #fabd2f;
    --accent-2: color-mix(in srgb, #fabd2f 85%, #ebdbb2);
    --accent-soft: color-mix(in srgb, #fabd2f 16%, #32302f);
    --accent-ink: color-mix(in oklab, #fabd2f 70%, #ebdbb2);
    --action: #fe8019;
    --action-2: color-mix(in srgb, #fe8019 86%, #ebdbb2);
    --on-action: #1d2021;
    --green: #b8bb26;
    --green-soft: color-mix(in srgb, #b8bb26 16%, #32302f);
    --amber: #fabd2f;
    --amber-soft: color-mix(in srgb, #fabd2f 16%, #32302f);
    --red: #ff8a7a;
    --red-soft: color-mix(in srgb, #ff8a7a 16%, #32302f);
    --violet: color-mix(in oklab, #a68cff 78%, #ebdbb2);
    --violet-soft: color-mix(in srgb, #a68cff 16%, #32302f);
    --blue: color-mix(in oklab, #5ba3ff 78%, #ebdbb2);
    --blue-soft: color-mix(in srgb, #5ba3ff 16%, #32302f);
    --on-green: #282828;
    --on-red: #282828;
    --header: #1d2021;
    --side: #1d2021;
    --side-solid: #1d2021;
    --side-text: #d5c4a1;
    --side-muted: color-mix(in srgb, #d5c4a1 64%, #1d2021);
    --side-hover: #32302f;
    --side-active: #3c3836;
    --side-active-text: #fbf1c7;
    --side-accent: #fabd2f;
    --side-line: color-mix(in srgb, #d5c4a1 14%, #1d2021);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px #0000004d;
    --shadow-3: 0 30px 70px -20px rgba(0, 0, 0, .7);
    --ring: 0 0 0 3px color-mix(in srgb, #fabd2f 38%, transparent);
    color-scheme: dark;
  }
}

/* Kill Screen */
:root[data-palette="contrast"] {
  --bg: #ffffff;
  --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #0037c4 9%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #ffd60a 7%, transparent) 0%, transparent 55%);
  --surface: #ffffff;
  --surface-2: color-mix(in srgb, #ffffff 55%, #f0f0f0);
  --surface-3: #f0f0f0;
  --text: #000000;
  --text-2: color-mix(in srgb, #000000 72%, #1f1f1f);
  --muted: #1f1f1f;
  --faint: color-mix(in srgb, #1f1f1f 62%, #ffffff);
  --line: #4d4d4d;
  --line-2: color-mix(in srgb, #4d4d4d 78%, #000000);
  --accent: #0037c4;
  --accent-2: color-mix(in srgb, #0037c4 85%, #000000);
  --accent-soft: color-mix(in srgb, #0037c4 12%, #ffffff);
  --accent-ink: color-mix(in oklab, #0037c4 70%, #000000);
  --action: #0037c4;
  --action-2: color-mix(in srgb, #0037c4 86%, #000000);
  --on-action: #ffffff;
  --green: #006b1f;
  --green-soft: color-mix(in srgb, #006b1f 13%, #ffffff);
  --amber: #8a5a00;
  --amber-soft: color-mix(in srgb, #8a5a00 13%, #ffffff);
  --red: #b00020;
  --red-soft: color-mix(in srgb, #b00020 13%, #ffffff);
  --violet: color-mix(in oklab, #7356f0 78%, #000000);
  --violet-soft: color-mix(in srgb, #7356f0 13%, #ffffff);
  --blue: color-mix(in oklab, #2a78e4 78%, #000000);
  --blue-soft: color-mix(in srgb, #2a78e4 13%, #ffffff);
  --on-green: #ffffff;
  --on-red: #ffffff;
  --header: #ffffff;
  --side: #000000;
  --side-solid: #000000;
  --side-text: #ffffff;
  --side-muted: color-mix(in srgb, #ffffff 64%, #000000);
  --side-hover: #1f1f1f;
  --side-active: #2b2b2b;
  --side-active-text: #ffffff;
  --side-accent: #ffd60a;
  --side-line: color-mix(in srgb, #ffffff 14%, #000000);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .04), 0 0 0 1px #4d4d4d;
  --shadow-3: 0 24px 60px -16px rgba(0, 0, 0, .3);
  --ring: 0 0 0 3px color-mix(in srgb, #0037c4 38%, transparent);
  color-scheme: light;
}
:root[data-palette="contrast"][data-theme="dark"] {
  --bg: #000000;
  --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #ffd60a 12%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #ffd60a 7%, transparent) 0%, transparent 55%);
  --surface: #0d0d0d;
  --surface-2: color-mix(in srgb, #0d0d0d 55%, #1c1c1c);
  --surface-3: #1c1c1c;
  --text: #ffffff;
  --text-2: color-mix(in srgb, #ffffff 72%, #e2e2e2);
  --muted: #e2e2e2;
  --faint: color-mix(in srgb, #e2e2e2 62%, #0d0d0d);
  --line: #8c8c8c;
  --line-2: color-mix(in srgb, #8c8c8c 78%, #ffffff);
  --accent: #ffd60a;
  --accent-2: color-mix(in srgb, #ffd60a 85%, #ffffff);
  --accent-soft: color-mix(in srgb, #ffd60a 16%, #0d0d0d);
  --accent-ink: color-mix(in oklab, #ffd60a 70%, #ffffff);
  --action: #ffd60a;
  --action-2: color-mix(in srgb, #ffd60a 86%, #ffffff);
  --on-action: #000000;
  --green: #5cff8a;
  --green-soft: color-mix(in srgb, #5cff8a 16%, #0d0d0d);
  --amber: #ffd60a;
  --amber-soft: color-mix(in srgb, #ffd60a 16%, #0d0d0d);
  --red: #ff8a8a;
  --red-soft: color-mix(in srgb, #ff8a8a 16%, #0d0d0d);
  --violet: color-mix(in oklab, #a68cff 78%, #ffffff);
  --violet-soft: color-mix(in srgb, #a68cff 16%, #0d0d0d);
  --blue: color-mix(in oklab, #5ba3ff 78%, #ffffff);
  --blue-soft: color-mix(in srgb, #5ba3ff 16%, #0d0d0d);
  --on-green: #000000;
  --on-red: #000000;
  --header: #000000;
  --side: #000000;
  --side-solid: #000000;
  --side-text: #ffffff;
  --side-muted: color-mix(in srgb, #ffffff 64%, #000000);
  --side-hover: #1f1f1f;
  --side-active: #2b2b2b;
  --side-active-text: #ffffff;
  --side-accent: #ffd60a;
  --side-line: color-mix(in srgb, #ffffff 14%, #000000);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .3), 0 0 0 1px #8c8c8c;
  --shadow-3: 0 30px 70px -20px rgba(0, 0, 0, .7);
  --ring: 0 0 0 3px color-mix(in srgb, #ffd60a 38%, transparent);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="contrast"]:not([data-theme="light"]) {
    --bg: #000000;
    --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #ffd60a 12%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #ffd60a 7%, transparent) 0%, transparent 55%);
    --surface: #0d0d0d;
    --surface-2: color-mix(in srgb, #0d0d0d 55%, #1c1c1c);
    --surface-3: #1c1c1c;
    --text: #ffffff;
    --text-2: color-mix(in srgb, #ffffff 72%, #e2e2e2);
    --muted: #e2e2e2;
    --faint: color-mix(in srgb, #e2e2e2 62%, #0d0d0d);
    --line: #8c8c8c;
    --line-2: color-mix(in srgb, #8c8c8c 78%, #ffffff);
    --accent: #ffd60a;
    --accent-2: color-mix(in srgb, #ffd60a 85%, #ffffff);
    --accent-soft: color-mix(in srgb, #ffd60a 16%, #0d0d0d);
    --accent-ink: color-mix(in oklab, #ffd60a 70%, #ffffff);
    --action: #ffd60a;
    --action-2: color-mix(in srgb, #ffd60a 86%, #ffffff);
    --on-action: #000000;
    --green: #5cff8a;
    --green-soft: color-mix(in srgb, #5cff8a 16%, #0d0d0d);
    --amber: #ffd60a;
    --amber-soft: color-mix(in srgb, #ffd60a 16%, #0d0d0d);
    --red: #ff8a8a;
    --red-soft: color-mix(in srgb, #ff8a8a 16%, #0d0d0d);
    --violet: color-mix(in oklab, #a68cff 78%, #ffffff);
    --violet-soft: color-mix(in srgb, #a68cff 16%, #0d0d0d);
    --blue: color-mix(in oklab, #5ba3ff 78%, #ffffff);
    --blue-soft: color-mix(in srgb, #5ba3ff 16%, #0d0d0d);
    --on-green: #000000;
    --on-red: #000000;
    --header: #000000;
    --side: #000000;
    --side-solid: #000000;
    --side-text: #ffffff;
    --side-muted: color-mix(in srgb, #ffffff 64%, #000000);
    --side-hover: #1f1f1f;
    --side-active: #2b2b2b;
    --side-active-text: #ffffff;
    --side-accent: #ffd60a;
    --side-line: color-mix(in srgb, #ffffff 14%, #000000);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, .3), 0 0 0 1px #8c8c8c;
    --shadow-3: 0 30px 70px -20px rgba(0, 0, 0, .7);
    --ring: 0 0 0 3px color-mix(in srgb, #ffd60a 38%, transparent);
    color-scheme: dark;
  }
}

/* Mode 7 */
:root[data-palette="snes"] {
  --bg: #cfcfd5;
  --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #283f8e 9%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #ffcd29 7%, transparent) 0%, transparent 55%);
  --surface: #ededf0;
  --surface-2: color-mix(in srgb, #ededf0 55%, #e4e4e8);
  --surface-3: #e4e4e8;
  --text: #2b2b31;
  --text-2: color-mix(in srgb, #2b2b31 72%, #55555f);
  --muted: #55555f;
  --faint: color-mix(in srgb, #55555f 62%, #ededf0);
  --line: #b9b9c1;
  --line-2: color-mix(in srgb, #b9b9c1 78%, #2b2b31);
  --accent: #283f8e;
  --accent-2: color-mix(in srgb, #283f8e 85%, #2b2b31);
  --accent-soft: color-mix(in srgb, #283f8e 12%, #ededf0);
  --accent-ink: color-mix(in oklab, #283f8e 70%, #2b2b31);
  --action: #2f4ba3;
  --action-2: color-mix(in srgb, #2f4ba3 86%, #2b2b31);
  --on-action: #ffffff;
  --green: #006b35;
  --green-soft: color-mix(in srgb, #006b35 13%, #ededf0);
  --amber: #8a6a00;
  --amber-soft: color-mix(in srgb, #8a6a00 13%, #ededf0);
  --red: #b81c25;
  --red-soft: color-mix(in srgb, #b81c25 13%, #ededf0);
  --violet: color-mix(in oklab, #7356f0 78%, #2b2b31);
  --violet-soft: color-mix(in srgb, #7356f0 13%, #ededf0);
  --blue: color-mix(in oklab, #2a78e4 78%, #2b2b31);
  --blue-soft: color-mix(in srgb, #2a78e4 13%, #ededf0);
  --on-green: #ffffff;
  --on-red: #ffffff;
  --header: #ababb4;
  --side: #4b4b53;
  --side-solid: #4b4b53;
  --side-text: #e6e6ea;
  --side-muted: color-mix(in srgb, #e6e6ea 64%, #4b4b53);
  --side-hover: #5a5a63;
  --side-active: #5f5f69;
  --side-active-text: #ffffff;
  --side-accent: #ffcd29;
  --side-line: color-mix(in srgb, #e6e6ea 14%, #4b4b53);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px #2b2b3a24;
  --shadow-3: 0 24px 60px -16px rgba(0, 0, 0, .3);
  --ring: 0 0 0 3px color-mix(in srgb, #4562c4 38%, transparent);
  color-scheme: light;
}
:root[data-palette="snes"][data-theme="dark"] {
  --bg: #2a2a30;
  --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #8c9eff 12%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #7d93ff 7%, transparent) 0%, transparent 55%);
  --surface: #34343b;
  --surface-2: color-mix(in srgb, #34343b 55%, #3e3e46);
  --surface-3: #3e3e46;
  --text: #ececf0;
  --text-2: color-mix(in srgb, #ececf0 72%, #b0b0ba);
  --muted: #b0b0ba;
  --faint: color-mix(in srgb, #b0b0ba 62%, #34343b);
  --line: #46464f;
  --line-2: color-mix(in srgb, #46464f 78%, #ececf0);
  --accent: #8c9eff;
  --accent-2: color-mix(in srgb, #8c9eff 85%, #ececf0);
  --accent-soft: color-mix(in srgb, #8c9eff 16%, #34343b);
  --accent-ink: color-mix(in oklab, #8c9eff 70%, #ececf0);
  --action: #8c9eff;
  --action-2: color-mix(in srgb, #8c9eff 86%, #ececf0);
  --on-action: #16162a;
  --green: #4cd07d;
  --green-soft: color-mix(in srgb, #4cd07d 16%, #34343b);
  --amber: #ffcd29;
  --amber-soft: color-mix(in srgb, #ffcd29 16%, #34343b);
  --red: #ff8f94;
  --red-soft: color-mix(in srgb, #ff8f94 16%, #34343b);
  --violet: color-mix(in oklab, #a68cff 78%, #ececf0);
  --violet-soft: color-mix(in srgb, #a68cff 16%, #34343b);
  --blue: color-mix(in oklab, #5ba3ff 78%, #ececf0);
  --blue-soft: color-mix(in srgb, #5ba3ff 16%, #34343b);
  --on-green: #2a2a30;
  --on-red: #2a2a30;
  --header: #222227;
  --side: #1e1e22;
  --side-solid: #1e1e22;
  --side-text: #d4d4da;
  --side-muted: color-mix(in srgb, #d4d4da 64%, #1e1e22);
  --side-hover: #2c2c32;
  --side-active: #3a3a42;
  --side-active-text: #ffffff;
  --side-accent: #7d93ff;
  --side-line: color-mix(in srgb, #d4d4da 14%, #1e1e22);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px #00000059;
  --shadow-3: 0 30px 70px -20px rgba(0, 0, 0, .7);
  --ring: 0 0 0 3px color-mix(in srgb, #a9b6ff 38%, transparent);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="snes"]:not([data-theme="light"]) {
    --bg: #2a2a30;
    --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #8c9eff 12%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #7d93ff 7%, transparent) 0%, transparent 55%);
    --surface: #34343b;
    --surface-2: color-mix(in srgb, #34343b 55%, #3e3e46);
    --surface-3: #3e3e46;
    --text: #ececf0;
    --text-2: color-mix(in srgb, #ececf0 72%, #b0b0ba);
    --muted: #b0b0ba;
    --faint: color-mix(in srgb, #b0b0ba 62%, #34343b);
    --line: #46464f;
    --line-2: color-mix(in srgb, #46464f 78%, #ececf0);
    --accent: #8c9eff;
    --accent-2: color-mix(in srgb, #8c9eff 85%, #ececf0);
    --accent-soft: color-mix(in srgb, #8c9eff 16%, #34343b);
    --accent-ink: color-mix(in oklab, #8c9eff 70%, #ececf0);
    --action: #8c9eff;
    --action-2: color-mix(in srgb, #8c9eff 86%, #ececf0);
    --on-action: #16162a;
    --green: #4cd07d;
    --green-soft: color-mix(in srgb, #4cd07d 16%, #34343b);
    --amber: #ffcd29;
    --amber-soft: color-mix(in srgb, #ffcd29 16%, #34343b);
    --red: #ff8f94;
    --red-soft: color-mix(in srgb, #ff8f94 16%, #34343b);
    --violet: color-mix(in oklab, #a68cff 78%, #ececf0);
    --violet-soft: color-mix(in srgb, #a68cff 16%, #34343b);
    --blue: color-mix(in oklab, #5ba3ff 78%, #ececf0);
    --blue-soft: color-mix(in srgb, #5ba3ff 16%, #34343b);
    --on-green: #2a2a30;
    --on-red: #2a2a30;
    --header: #222227;
    --side: #1e1e22;
    --side-solid: #1e1e22;
    --side-text: #d4d4da;
    --side-muted: color-mix(in srgb, #d4d4da 64%, #1e1e22);
    --side-hover: #2c2c32;
    --side-active: #3a3a42;
    --side-active-text: #ffffff;
    --side-accent: #7d93ff;
    --side-line: color-mix(in srgb, #d4d4da 14%, #1e1e22);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px #00000059;
    --shadow-3: 0 30px 70px -20px rgba(0, 0, 0, .7);
    --ring: 0 0 0 3px color-mix(in srgb, #a9b6ff 38%, transparent);
    color-scheme: dark;
  }
}

/* Shovel Knight */
:root[data-palette="terra"] {
  --bg: #ebe6dc;
  --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #ad543e 9%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #cb7358 7%, transparent) 0%, transparent 55%);
  --surface: #fffcf7;
  --surface-2: color-mix(in srgb, #fffcf7 55%, #f5ede2);
  --surface-3: #f5ede2;
  --text: #302d2a;
  --text-2: color-mix(in srgb, #302d2a 72%, #6c655e);
  --muted: #6c655e;
  --faint: color-mix(in srgb, #6c655e 62%, #fffcf7);
  --line: #ddd1c2;
  --line-2: color-mix(in srgb, #ddd1c2 78%, #302d2a);
  --accent: #ad543e;
  --accent-2: color-mix(in srgb, #ad543e 85%, #302d2a);
  --accent-soft: color-mix(in srgb, #ad543e 12%, #fffcf7);
  --accent-ink: color-mix(in oklab, #ad543e 70%, #302d2a);
  --action: #a54d37;
  --action-2: color-mix(in srgb, #a54d37 86%, #302d2a);
  --on-action: #ffffff;
  --green: #186a35;
  --green-soft: color-mix(in srgb, #186a35 13%, #fffcf7);
  --amber: #9a5b00;
  --amber-soft: color-mix(in srgb, #9a5b00 13%, #fffcf7);
  --red: #b3261e;
  --red-soft: color-mix(in srgb, #b3261e 13%, #fffcf7);
  --violet: color-mix(in oklab, #7356f0 78%, #302d2a);
  --violet-soft: color-mix(in srgb, #7356f0 13%, #fffcf7);
  --blue: color-mix(in oklab, #2a78e4 78%, #302d2a);
  --blue-soft: color-mix(in srgb, #2a78e4 13%, #fffcf7);
  --on-green: #ffffff;
  --on-red: #ffffff;
  --header: #fffcf7;
  --side: #332d2a;
  --side-solid: #332d2a;
  --side-text: #e8dfd1;
  --side-muted: color-mix(in srgb, #e8dfd1 64%, #332d2a);
  --side-hover: #50453d;
  --side-active: #e9b777;
  --side-active-text: #30271f;
  --side-accent: #cb7358;
  --side-line: color-mix(in srgb, #e8dfd1 14%, #332d2a);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px #4a302016;
  --shadow-3: 0 24px 60px -16px rgba(0, 0, 0, .3);
  --ring: 0 0 0 3px color-mix(in srgb, #cb7358 38%, transparent);
  color-scheme: light;
}
:root[data-palette="terra"][data-theme="dark"] {
  --bg: #1f1a17;
  --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #e58a6c 12%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #e9b777 7%, transparent) 0%, transparent 55%);
  --surface: #2c2521;
  --surface-2: color-mix(in srgb, #2c2521 55%, #352d28);
  --surface-3: #352d28;
  --text: #f2ebe1;
  --text-2: color-mix(in srgb, #f2ebe1 72%, #c2b5a5);
  --muted: #c2b5a5;
  --faint: color-mix(in srgb, #c2b5a5 62%, #2c2521);
  --line: #463b34;
  --line-2: color-mix(in srgb, #463b34 78%, #f2ebe1);
  --accent: #e58a6c;
  --accent-2: color-mix(in srgb, #e58a6c 85%, #f2ebe1);
  --accent-soft: color-mix(in srgb, #e58a6c 16%, #2c2521);
  --accent-ink: color-mix(in oklab, #e58a6c 70%, #f2ebe1);
  --action: #e58a6c;
  --action-2: color-mix(in srgb, #e58a6c 86%, #f2ebe1);
  --on-action: #2a1510;
  --green: #8fd49a;
  --green-soft: color-mix(in srgb, #8fd49a 16%, #2c2521);
  --amber: #f2c36b;
  --amber-soft: color-mix(in srgb, #f2c36b 16%, #2c2521);
  --red: #ff9d8f;
  --red-soft: color-mix(in srgb, #ff9d8f 16%, #2c2521);
  --violet: color-mix(in oklab, #a68cff 78%, #f2ebe1);
  --violet-soft: color-mix(in srgb, #a68cff 16%, #2c2521);
  --blue: color-mix(in oklab, #5ba3ff 78%, #f2ebe1);
  --blue-soft: color-mix(in srgb, #5ba3ff 16%, #2c2521);
  --on-green: #1f1a17;
  --on-red: #1f1a17;
  --header: #1b1714;
  --side: #15110f;
  --side-solid: #15110f;
  --side-text: #e8dfd1;
  --side-muted: color-mix(in srgb, #e8dfd1 64%, #15110f);
  --side-hover: #2c2521;
  --side-active: #3a302a;
  --side-active-text: #ffffff;
  --side-accent: #e9b777;
  --side-line: color-mix(in srgb, #e8dfd1 14%, #15110f);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px #00000055;
  --shadow-3: 0 30px 70px -20px rgba(0, 0, 0, .7);
  --ring: 0 0 0 3px color-mix(in srgb, #f0a385 38%, transparent);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="terra"]:not([data-theme="light"]) {
    --bg: #1f1a17;
    --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #e58a6c 12%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #e9b777 7%, transparent) 0%, transparent 55%);
    --surface: #2c2521;
    --surface-2: color-mix(in srgb, #2c2521 55%, #352d28);
    --surface-3: #352d28;
    --text: #f2ebe1;
    --text-2: color-mix(in srgb, #f2ebe1 72%, #c2b5a5);
    --muted: #c2b5a5;
    --faint: color-mix(in srgb, #c2b5a5 62%, #2c2521);
    --line: #463b34;
    --line-2: color-mix(in srgb, #463b34 78%, #f2ebe1);
    --accent: #e58a6c;
    --accent-2: color-mix(in srgb, #e58a6c 85%, #f2ebe1);
    --accent-soft: color-mix(in srgb, #e58a6c 16%, #2c2521);
    --accent-ink: color-mix(in oklab, #e58a6c 70%, #f2ebe1);
    --action: #e58a6c;
    --action-2: color-mix(in srgb, #e58a6c 86%, #f2ebe1);
    --on-action: #2a1510;
    --green: #8fd49a;
    --green-soft: color-mix(in srgb, #8fd49a 16%, #2c2521);
    --amber: #f2c36b;
    --amber-soft: color-mix(in srgb, #f2c36b 16%, #2c2521);
    --red: #ff9d8f;
    --red-soft: color-mix(in srgb, #ff9d8f 16%, #2c2521);
    --violet: color-mix(in oklab, #a68cff 78%, #f2ebe1);
    --violet-soft: color-mix(in srgb, #a68cff 16%, #2c2521);
    --blue: color-mix(in oklab, #5ba3ff 78%, #f2ebe1);
    --blue-soft: color-mix(in srgb, #5ba3ff 16%, #2c2521);
    --on-green: #1f1a17;
    --on-red: #1f1a17;
    --header: #1b1714;
    --side: #15110f;
    --side-solid: #15110f;
    --side-text: #e8dfd1;
    --side-muted: color-mix(in srgb, #e8dfd1 64%, #15110f);
    --side-hover: #2c2521;
    --side-active: #3a302a;
    --side-active-text: #ffffff;
    --side-accent: #e9b777;
    --side-line: color-mix(in srgb, #e8dfd1 14%, #15110f);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px #00000055;
    --shadow-3: 0 30px 70px -20px rgba(0, 0, 0, .7);
    --ring: 0 0 0 3px color-mix(in srgb, #f0a385 38%, transparent);
    color-scheme: dark;
  }
}

/* Snowdin */
:root[data-palette="nord"] {
  --bg: #e5e9f0;
  --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #46668f 9%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #88c0d0 7%, transparent) 0%, transparent 55%);
  --surface: #f8f9fb;
  --surface-2: color-mix(in srgb, #f8f9fb 55%, #e5e9f0);
  --surface-3: #e5e9f0;
  --text: #2e3440;
  --text-2: color-mix(in srgb, #2e3440 72%, #4c566a);
  --muted: #4c566a;
  --faint: color-mix(in srgb, #4c566a 62%, #f8f9fb);
  --line: #d8dee9;
  --line-2: color-mix(in srgb, #d8dee9 78%, #2e3440);
  --accent: #46668f;
  --accent-2: color-mix(in srgb, #46668f 85%, #2e3440);
  --accent-soft: color-mix(in srgb, #46668f 12%, #f8f9fb);
  --accent-ink: color-mix(in oklab, #46668f 70%, #2e3440);
  --action: #4f6f9b;
  --action-2: color-mix(in srgb, #4f6f9b 86%, #2e3440);
  --on-action: #ffffff;
  --green: #436a30;
  --green-soft: color-mix(in srgb, #436a30 13%, #f8f9fb);
  --amber: #9a5b00;
  --amber-soft: color-mix(in srgb, #9a5b00 13%, #f8f9fb);
  --red: #ad414b;
  --red-soft: color-mix(in srgb, #ad414b 13%, #f8f9fb);
  --violet: color-mix(in oklab, #7356f0 78%, #2e3440);
  --violet-soft: color-mix(in srgb, #7356f0 13%, #f8f9fb);
  --blue: color-mix(in oklab, #2a78e4 78%, #2e3440);
  --blue-soft: color-mix(in srgb, #2a78e4 13%, #f8f9fb);
  --on-green: #ffffff;
  --on-red: #ffffff;
  --header: #f8f9fb;
  --side: #2e3440;
  --side-solid: #2e3440;
  --side-text: #d8dee9;
  --side-muted: color-mix(in srgb, #d8dee9 64%, #2e3440);
  --side-hover: #3b4252;
  --side-active: #434c5e;
  --side-active-text: #eceff4;
  --side-accent: #88c0d0;
  --side-line: color-mix(in srgb, #d8dee9 14%, #2e3440);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px #2e344014;
  --shadow-3: 0 24px 60px -16px rgba(0, 0, 0, .3);
  --ring: 0 0 0 3px color-mix(in srgb, #5e81ac 38%, transparent);
  color-scheme: light;
}
:root[data-palette="nord"][data-theme="dark"] {
  --bg: #2e3440;
  --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #88c0d0 12%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #88c0d0 7%, transparent) 0%, transparent 55%);
  --surface: #3b4252;
  --surface-2: color-mix(in srgb, #3b4252 55%, #434c5e);
  --surface-3: #434c5e;
  --text: #eceff4;
  --text-2: color-mix(in srgb, #eceff4 72%, #b4bdcc);
  --muted: #b4bdcc;
  --faint: color-mix(in srgb, #b4bdcc 62%, #3b4252);
  --line: #434c5e;
  --line-2: color-mix(in srgb, #434c5e 78%, #eceff4);
  --accent: #88c0d0;
  --accent-2: color-mix(in srgb, #88c0d0 85%, #eceff4);
  --accent-soft: color-mix(in srgb, #88c0d0 16%, #3b4252);
  --accent-ink: color-mix(in oklab, #88c0d0 70%, #eceff4);
  --action: #88c0d0;
  --action-2: color-mix(in srgb, #88c0d0 86%, #eceff4);
  --on-action: #242933;
  --green: #b1cc98;
  --green-soft: color-mix(in srgb, #b1cc98 16%, #3b4252);
  --amber: #f2c36b;
  --amber-soft: color-mix(in srgb, #f2c36b 16%, #3b4252);
  --red: #edabb1;
  --red-soft: color-mix(in srgb, #edabb1 16%, #3b4252);
  --violet: color-mix(in oklab, #a68cff 78%, #eceff4);
  --violet-soft: color-mix(in srgb, #a68cff 16%, #3b4252);
  --blue: color-mix(in oklab, #5ba3ff 78%, #eceff4);
  --blue-soft: color-mix(in srgb, #5ba3ff 16%, #3b4252);
  --on-green: #2e3440;
  --on-red: #2e3440;
  --header: #272c36;
  --side: #272c36;
  --side-solid: #272c36;
  --side-text: #d8dee9;
  --side-muted: color-mix(in srgb, #d8dee9 64%, #272c36);
  --side-hover: #353c4a;
  --side-active: #3b4252;
  --side-active-text: #eceff4;
  --side-accent: #88c0d0;
  --side-line: color-mix(in srgb, #d8dee9 14%, #272c36);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px #1b1f2766;
  --shadow-3: 0 30px 70px -20px rgba(0, 0, 0, .7);
  --ring: 0 0 0 3px color-mix(in srgb, #8fbcbb 38%, transparent);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="nord"]:not([data-theme="light"]) {
    --bg: #2e3440;
    --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #88c0d0 12%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #88c0d0 7%, transparent) 0%, transparent 55%);
    --surface: #3b4252;
    --surface-2: color-mix(in srgb, #3b4252 55%, #434c5e);
    --surface-3: #434c5e;
    --text: #eceff4;
    --text-2: color-mix(in srgb, #eceff4 72%, #b4bdcc);
    --muted: #b4bdcc;
    --faint: color-mix(in srgb, #b4bdcc 62%, #3b4252);
    --line: #434c5e;
    --line-2: color-mix(in srgb, #434c5e 78%, #eceff4);
    --accent: #88c0d0;
    --accent-2: color-mix(in srgb, #88c0d0 85%, #eceff4);
    --accent-soft: color-mix(in srgb, #88c0d0 16%, #3b4252);
    --accent-ink: color-mix(in oklab, #88c0d0 70%, #eceff4);
    --action: #88c0d0;
    --action-2: color-mix(in srgb, #88c0d0 86%, #eceff4);
    --on-action: #242933;
    --green: #b1cc98;
    --green-soft: color-mix(in srgb, #b1cc98 16%, #3b4252);
    --amber: #f2c36b;
    --amber-soft: color-mix(in srgb, #f2c36b 16%, #3b4252);
    --red: #edabb1;
    --red-soft: color-mix(in srgb, #edabb1 16%, #3b4252);
    --violet: color-mix(in oklab, #a68cff 78%, #eceff4);
    --violet-soft: color-mix(in srgb, #a68cff 16%, #3b4252);
    --blue: color-mix(in oklab, #5ba3ff 78%, #eceff4);
    --blue-soft: color-mix(in srgb, #5ba3ff 16%, #3b4252);
    --on-green: #2e3440;
    --on-red: #2e3440;
    --header: #272c36;
    --side: #272c36;
    --side-solid: #272c36;
    --side-text: #d8dee9;
    --side-muted: color-mix(in srgb, #d8dee9 64%, #272c36);
    --side-hover: #353c4a;
    --side-active: #3b4252;
    --side-active-text: #eceff4;
    --side-accent: #88c0d0;
    --side-line: color-mix(in srgb, #d8dee9 14%, #272c36);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px #1b1f2766;
    --shadow-3: 0 30px 70px -20px rgba(0, 0, 0, .7);
    --ring: 0 0 0 3px color-mix(in srgb, #8fbcbb 38%, transparent);
    color-scheme: dark;
  }
}

/* Solaire */
:root[data-palette="solarized"] {
  --bg: #eee8d5;
  --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #1b679d 9%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #2aa198 7%, transparent) 0%, transparent 55%);
  --surface: #fdf6e3;
  --surface-2: color-mix(in srgb, #fdf6e3 55%, #f3edd9);
  --surface-3: #f3edd9;
  --text: #073642;
  --text-2: color-mix(in srgb, #073642 72%, #4f6369);
  --muted: #4f6369;
  --faint: color-mix(in srgb, #4f6369 62%, #fdf6e3);
  --line: #dfd8c2;
  --line-2: color-mix(in srgb, #dfd8c2 78%, #073642);
  --accent: #1b679d;
  --accent-2: color-mix(in srgb, #1b679d 85%, #073642);
  --accent-soft: color-mix(in srgb, #1b679d 12%, #fdf6e3);
  --accent-ink: color-mix(in oklab, #1b679d 70%, #073642);
  --action: #1e6fa9;
  --action-2: color-mix(in srgb, #1e6fa9 86%, #073642);
  --on-action: #ffffff;
  --green: #577000;
  --green-soft: color-mix(in srgb, #577000 13%, #fdf6e3);
  --amber: #8a6500;
  --amber-soft: color-mix(in srgb, #8a6500 13%, #fdf6e3);
  --red: #c22a27;
  --red-soft: color-mix(in srgb, #c22a27 13%, #fdf6e3);
  --violet: color-mix(in oklab, #7356f0 78%, #073642);
  --violet-soft: color-mix(in srgb, #7356f0 13%, #fdf6e3);
  --blue: color-mix(in oklab, #2a78e4 78%, #073642);
  --blue-soft: color-mix(in srgb, #2a78e4 13%, #fdf6e3);
  --on-green: #ffffff;
  --on-red: #ffffff;
  --header: #fdf6e3;
  --side: #002b36;
  --side-solid: #002b36;
  --side-text: #a3b0b0;
  --side-muted: color-mix(in srgb, #a3b0b0 64%, #002b36);
  --side-hover: #073642;
  --side-active: #0b4250;
  --side-active-text: #eee8d5;
  --side-accent: #2aa198;
  --side-line: color-mix(in srgb, #a3b0b0 14%, #002b36);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px #58472012;
  --shadow-3: 0 24px 60px -16px rgba(0, 0, 0, .3);
  --ring: 0 0 0 3px color-mix(in srgb, #268bd2 38%, transparent);
  color-scheme: light;
}
:root[data-palette="solarized"][data-theme="dark"] {
  --bg: #002b36;
  --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #5aa9e6 12%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #2aa198 7%, transparent) 0%, transparent 55%);
  --surface: #073642;
  --surface-2: color-mix(in srgb, #073642 55%, #0a3b47);
  --surface-3: #0a3b47;
  --text: #eee8d5;
  --text-2: color-mix(in srgb, #eee8d5 72%, #9fadac);
  --muted: #9fadac;
  --faint: color-mix(in srgb, #9fadac 62%, #073642);
  --line: #0f4655;
  --line-2: color-mix(in srgb, #0f4655 78%, #eee8d5);
  --accent: #5aa9e6;
  --accent-2: color-mix(in srgb, #5aa9e6 85%, #eee8d5);
  --accent-soft: color-mix(in srgb, #5aa9e6 16%, #073642);
  --accent-ink: color-mix(in oklab, #5aa9e6 70%, #eee8d5);
  --action: #4ea3e0;
  --action-2: color-mix(in srgb, #4ea3e0 86%, #eee8d5);
  --on-action: #002b36;
  --green: #a8bd2a;
  --green-soft: color-mix(in srgb, #a8bd2a 16%, #073642);
  --amber: #e0b11a;
  --amber-soft: color-mix(in srgb, #e0b11a 16%, #073642);
  --red: #f2857d;
  --red-soft: color-mix(in srgb, #f2857d 16%, #073642);
  --violet: color-mix(in oklab, #a68cff 78%, #eee8d5);
  --violet-soft: color-mix(in srgb, #a68cff 16%, #073642);
  --blue: color-mix(in oklab, #5ba3ff 78%, #eee8d5);
  --blue-soft: color-mix(in srgb, #5ba3ff 16%, #073642);
  --on-green: #002b36;
  --on-red: #002b36;
  --header: #00232c;
  --side: #001e26;
  --side-solid: #001e26;
  --side-text: #a3b0b0;
  --side-muted: color-mix(in srgb, #a3b0b0 64%, #001e26);
  --side-hover: #073642;
  --side-active: #0b4250;
  --side-active-text: #eee8d5;
  --side-accent: #2aa198;
  --side-line: color-mix(in srgb, #a3b0b0 14%, #001e26);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px #00000055;
  --shadow-3: 0 30px 70px -20px rgba(0, 0, 0, .7);
  --ring: 0 0 0 3px color-mix(in srgb, #2aa198 38%, transparent);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="solarized"]:not([data-theme="light"]) {
    --bg: #002b36;
    --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #5aa9e6 12%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #2aa198 7%, transparent) 0%, transparent 55%);
    --surface: #073642;
    --surface-2: color-mix(in srgb, #073642 55%, #0a3b47);
    --surface-3: #0a3b47;
    --text: #eee8d5;
    --text-2: color-mix(in srgb, #eee8d5 72%, #9fadac);
    --muted: #9fadac;
    --faint: color-mix(in srgb, #9fadac 62%, #073642);
    --line: #0f4655;
    --line-2: color-mix(in srgb, #0f4655 78%, #eee8d5);
    --accent: #5aa9e6;
    --accent-2: color-mix(in srgb, #5aa9e6 85%, #eee8d5);
    --accent-soft: color-mix(in srgb, #5aa9e6 16%, #073642);
    --accent-ink: color-mix(in oklab, #5aa9e6 70%, #eee8d5);
    --action: #4ea3e0;
    --action-2: color-mix(in srgb, #4ea3e0 86%, #eee8d5);
    --on-action: #002b36;
    --green: #a8bd2a;
    --green-soft: color-mix(in srgb, #a8bd2a 16%, #073642);
    --amber: #e0b11a;
    --amber-soft: color-mix(in srgb, #e0b11a 16%, #073642);
    --red: #f2857d;
    --red-soft: color-mix(in srgb, #f2857d 16%, #073642);
    --violet: color-mix(in oklab, #a68cff 78%, #eee8d5);
    --violet-soft: color-mix(in srgb, #a68cff 16%, #073642);
    --blue: color-mix(in oklab, #5ba3ff 78%, #eee8d5);
    --blue-soft: color-mix(in srgb, #5ba3ff 16%, #073642);
    --on-green: #002b36;
    --on-red: #002b36;
    --header: #00232c;
    --side: #001e26;
    --side-solid: #001e26;
    --side-text: #a3b0b0;
    --side-muted: color-mix(in srgb, #a3b0b0 64%, #001e26);
    --side-hover: #073642;
    --side-active: #0b4250;
    --side-active-text: #eee8d5;
    --side-accent: #2aa198;
    --side-line: color-mix(in srgb, #a3b0b0 14%, #001e26);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px #00000055;
    --shadow-3: 0 30px 70px -20px rgba(0, 0, 0, .7);
    --ring: 0 0 0 3px color-mix(in srgb, #2aa198 38%, transparent);
    color-scheme: dark;
  }
}

/* Tokyo-to */
:root[data-palette="tokyo"] {
  --bg: #d5d6db;
  --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #1b57b0 9%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #7aa2f7 7%, transparent) 0%, transparent 55%);
  --surface: #eef0f5;
  --surface-2: color-mix(in srgb, #eef0f5 55%, #e9e9ed);
  --surface-3: #e9e9ed;
  --text: #2e3a6e;
  --text-2: color-mix(in srgb, #2e3a6e 72%, #50598a);
  --muted: #50598a;
  --faint: color-mix(in srgb, #50598a 62%, #eef0f5);
  --line: #c8cad6;
  --line-2: color-mix(in srgb, #c8cad6 78%, #2e3a6e);
  --accent: #1b57b0;
  --accent-2: color-mix(in srgb, #1b57b0 85%, #2e3a6e);
  --accent-soft: color-mix(in srgb, #1b57b0 12%, #eef0f5);
  --accent-ink: color-mix(in oklab, #1b57b0 70%, #2e3a6e);
  --action: #1b57b0;
  --action-2: color-mix(in srgb, #1b57b0 86%, #2e3a6e);
  --on-action: #ffffff;
  --green: #46602d;
  --green-soft: color-mix(in srgb, #46602d 13%, #eef0f5);
  --amber: #9a5b00;
  --amber-soft: color-mix(in srgb, #9a5b00 13%, #eef0f5);
  --red: #c4194f;
  --red-soft: color-mix(in srgb, #c4194f 13%, #eef0f5);
  --violet: color-mix(in oklab, #7356f0 78%, #2e3a6e);
  --violet-soft: color-mix(in srgb, #7356f0 13%, #eef0f5);
  --blue: color-mix(in oklab, #2a78e4 78%, #2e3a6e);
  --blue-soft: color-mix(in srgb, #2a78e4 13%, #eef0f5);
  --on-green: #ffffff;
  --on-red: #ffffff;
  --header: #eef0f5;
  --side: #1a1b26;
  --side-solid: #1a1b26;
  --side-text: #a9b1d6;
  --side-muted: color-mix(in srgb, #a9b1d6 64%, #1a1b26);
  --side-hover: #24283b;
  --side-active: #292e42;
  --side-active-text: #c0caf5;
  --side-accent: #7aa2f7;
  --side-line: color-mix(in srgb, #a9b1d6 14%, #1a1b26);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px #2e3a6e14;
  --shadow-3: 0 24px 60px -16px rgba(0, 0, 0, .3);
  --ring: 0 0 0 3px color-mix(in srgb, #2e7de9 38%, transparent);
  color-scheme: light;
}
:root[data-palette="tokyo"][data-theme="dark"] {
  --bg: #1a1b26;
  --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #7aa2f7 12%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #7aa2f7 7%, transparent) 0%, transparent 55%);
  --surface: #1f2335;
  --surface-2: color-mix(in srgb, #1f2335 55%, #292e42);
  --surface-3: #292e42;
  --text: #c0caf5;
  --text-2: color-mix(in srgb, #c0caf5 72%, #9aa5ce);
  --muted: #9aa5ce;
  --faint: color-mix(in srgb, #9aa5ce 62%, #1f2335);
  --line: #2f354f;
  --line-2: color-mix(in srgb, #2f354f 78%, #c0caf5);
  --accent: #7aa2f7;
  --accent-2: color-mix(in srgb, #7aa2f7 85%, #c0caf5);
  --accent-soft: color-mix(in srgb, #7aa2f7 16%, #1f2335);
  --accent-ink: color-mix(in oklab, #7aa2f7 70%, #c0caf5);
  --action: #7aa2f7;
  --action-2: color-mix(in srgb, #7aa2f7 86%, #c0caf5);
  --on-action: #16161e;
  --green: #9ece6a;
  --green-soft: color-mix(in srgb, #9ece6a 16%, #1f2335);
  --amber: #f2c36b;
  --amber-soft: color-mix(in srgb, #f2c36b 16%, #1f2335);
  --red: #f7768e;
  --red-soft: color-mix(in srgb, #f7768e 16%, #1f2335);
  --violet: color-mix(in oklab, #a68cff 78%, #c0caf5);
  --violet-soft: color-mix(in srgb, #a68cff 16%, #1f2335);
  --blue: color-mix(in oklab, #5ba3ff 78%, #c0caf5);
  --blue-soft: color-mix(in srgb, #5ba3ff 16%, #1f2335);
  --on-green: #1a1b26;
  --on-red: #1a1b26;
  --header: #16161e;
  --side: #16161e;
  --side-solid: #16161e;
  --side-text: #a9b1d6;
  --side-muted: color-mix(in srgb, #a9b1d6 64%, #16161e);
  --side-hover: #1f2335;
  --side-active: #292e42;
  --side-active-text: #c0caf5;
  --side-accent: #7aa2f7;
  --side-line: color-mix(in srgb, #a9b1d6 14%, #16161e);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px #0000004d;
  --shadow-3: 0 30px 70px -20px rgba(0, 0, 0, .7);
  --ring: 0 0 0 3px color-mix(in srgb, #7dcfff 38%, transparent);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="tokyo"]:not([data-theme="light"]) {
    --bg: #1a1b26;
    --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #7aa2f7 12%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #7aa2f7 7%, transparent) 0%, transparent 55%);
    --surface: #1f2335;
    --surface-2: color-mix(in srgb, #1f2335 55%, #292e42);
    --surface-3: #292e42;
    --text: #c0caf5;
    --text-2: color-mix(in srgb, #c0caf5 72%, #9aa5ce);
    --muted: #9aa5ce;
    --faint: color-mix(in srgb, #9aa5ce 62%, #1f2335);
    --line: #2f354f;
    --line-2: color-mix(in srgb, #2f354f 78%, #c0caf5);
    --accent: #7aa2f7;
    --accent-2: color-mix(in srgb, #7aa2f7 85%, #c0caf5);
    --accent-soft: color-mix(in srgb, #7aa2f7 16%, #1f2335);
    --accent-ink: color-mix(in oklab, #7aa2f7 70%, #c0caf5);
    --action: #7aa2f7;
    --action-2: color-mix(in srgb, #7aa2f7 86%, #c0caf5);
    --on-action: #16161e;
    --green: #9ece6a;
    --green-soft: color-mix(in srgb, #9ece6a 16%, #1f2335);
    --amber: #f2c36b;
    --amber-soft: color-mix(in srgb, #f2c36b 16%, #1f2335);
    --red: #f7768e;
    --red-soft: color-mix(in srgb, #f7768e 16%, #1f2335);
    --violet: color-mix(in oklab, #a68cff 78%, #c0caf5);
    --violet-soft: color-mix(in srgb, #a68cff 16%, #1f2335);
    --blue: color-mix(in oklab, #5ba3ff 78%, #c0caf5);
    --blue-soft: color-mix(in srgb, #5ba3ff 16%, #1f2335);
    --on-green: #1a1b26;
    --on-red: #1a1b26;
    --header: #16161e;
    --side: #16161e;
    --side-solid: #16161e;
    --side-text: #a9b1d6;
    --side-muted: color-mix(in srgb, #a9b1d6 64%, #16161e);
    --side-hover: #1f2335;
    --side-active: #292e42;
    --side-active-text: #c0caf5;
    --side-accent: #7aa2f7;
    --side-line: color-mix(in srgb, #a9b1d6 14%, #16161e);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px #0000004d;
    --shadow-3: 0 30px 70px -20px rgba(0, 0, 0, .7);
    --ring: 0 0 0 3px color-mix(in srgb, #7dcfff 38%, transparent);
    color-scheme: dark;
  }
}

/* Vampire Killer */
:root[data-palette="dracula"] {
  --bg: #f3eed8;
  --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #644ac9 9%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #bd93f9 7%, transparent) 0%, transparent 55%);
  --surface: #fffdf4;
  --surface-2: color-mix(in srgb, #fffdf4 55%, #f5f0dc);
  --surface-3: #f5f0dc;
  --text: #1f1f1f;
  --text-2: color-mix(in srgb, #1f1f1f 72%, #6c664b);
  --muted: #6c664b;
  --faint: color-mix(in srgb, #6c664b 62%, #fffdf4);
  --line: #e3dcc2;
  --line-2: color-mix(in srgb, #e3dcc2 78%, #1f1f1f);
  --accent: #644ac9;
  --accent-2: color-mix(in srgb, #644ac9 85%, #1f1f1f);
  --accent-soft: color-mix(in srgb, #644ac9 12%, #fffdf4);
  --accent-ink: color-mix(in oklab, #644ac9 70%, #1f1f1f);
  --action: #644ac9;
  --action-2: color-mix(in srgb, #644ac9 86%, #1f1f1f);
  --on-action: #ffffff;
  --green: #14710a;
  --green-soft: color-mix(in srgb, #14710a 13%, #fffdf4);
  --amber: #9a5b00;
  --amber-soft: color-mix(in srgb, #9a5b00 13%, #fffdf4);
  --red: #b8321f;
  --red-soft: color-mix(in srgb, #b8321f 13%, #fffdf4);
  --violet: color-mix(in oklab, #7356f0 78%, #1f1f1f);
  --violet-soft: color-mix(in srgb, #7356f0 13%, #fffdf4);
  --blue: color-mix(in oklab, #2a78e4 78%, #1f1f1f);
  --blue-soft: color-mix(in srgb, #2a78e4 13%, #fffdf4);
  --on-green: #ffffff;
  --on-red: #ffffff;
  --header: #fffdf4;
  --side: #282a36;
  --side-solid: #282a36;
  --side-text: #e2e2dc;
  --side-muted: color-mix(in srgb, #e2e2dc 64%, #282a36);
  --side-hover: #343746;
  --side-active: #44475a;
  --side-active-text: #f8f8f2;
  --side-accent: #bd93f9;
  --side-line: color-mix(in srgb, #e2e2dc 14%, #282a36);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px #3a301414;
  --shadow-3: 0 24px 60px -16px rgba(0, 0, 0, .3);
  --ring: 0 0 0 3px color-mix(in srgb, #a3144d 38%, transparent);
  color-scheme: light;
}
:root[data-palette="dracula"][data-theme="dark"] {
  --bg: #21222c;
  --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #bd93f9 12%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #ff79c6 7%, transparent) 0%, transparent 55%);
  --surface: #303341;
  --surface-2: color-mix(in srgb, #303341 55%, #383b4c);
  --surface-3: #383b4c;
  --text: #f8f8f2;
  --text-2: color-mix(in srgb, #f8f8f2 72%, #b4b9d4);
  --muted: #b4b9d4;
  --faint: color-mix(in srgb, #b4b9d4 62%, #303341);
  --line: #44475a;
  --line-2: color-mix(in srgb, #44475a 78%, #f8f8f2);
  --accent: #bd93f9;
  --accent-2: color-mix(in srgb, #bd93f9 85%, #f8f8f2);
  --accent-soft: color-mix(in srgb, #bd93f9 16%, #303341);
  --accent-ink: color-mix(in oklab, #bd93f9 70%, #f8f8f2);
  --action: #bd93f9;
  --action-2: color-mix(in srgb, #bd93f9 86%, #f8f8f2);
  --on-action: #21222c;
  --green: #50fa7b;
  --green-soft: color-mix(in srgb, #50fa7b 16%, #303341);
  --amber: #f2c36b;
  --amber-soft: color-mix(in srgb, #f2c36b 16%, #303341);
  --red: #ff7f7f;
  --red-soft: color-mix(in srgb, #ff7f7f 16%, #303341);
  --violet: color-mix(in oklab, #a68cff 78%, #f8f8f2);
  --violet-soft: color-mix(in srgb, #a68cff 16%, #303341);
  --blue: color-mix(in oklab, #5ba3ff 78%, #f8f8f2);
  --blue-soft: color-mix(in srgb, #5ba3ff 16%, #303341);
  --on-green: #21222c;
  --on-red: #21222c;
  --header: #21222c;
  --side: #191a21;
  --side-solid: #191a21;
  --side-text: #e2e2dc;
  --side-muted: color-mix(in srgb, #e2e2dc 64%, #191a21);
  --side-hover: #282a36;
  --side-active: #44475a;
  --side-active-text: #f8f8f2;
  --side-accent: #ff79c6;
  --side-line: color-mix(in srgb, #e2e2dc 14%, #191a21);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px #0000004d;
  --shadow-3: 0 30px 70px -20px rgba(0, 0, 0, .7);
  --ring: 0 0 0 3px color-mix(in srgb, #ff79c6 38%, transparent);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="dracula"]:not([data-theme="light"]) {
    --bg: #21222c;
    --bg-tint: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, #bd93f9 12%, transparent) 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, #ff79c6 7%, transparent) 0%, transparent 55%);
    --surface: #303341;
    --surface-2: color-mix(in srgb, #303341 55%, #383b4c);
    --surface-3: #383b4c;
    --text: #f8f8f2;
    --text-2: color-mix(in srgb, #f8f8f2 72%, #b4b9d4);
    --muted: #b4b9d4;
    --faint: color-mix(in srgb, #b4b9d4 62%, #303341);
    --line: #44475a;
    --line-2: color-mix(in srgb, #44475a 78%, #f8f8f2);
    --accent: #bd93f9;
    --accent-2: color-mix(in srgb, #bd93f9 85%, #f8f8f2);
    --accent-soft: color-mix(in srgb, #bd93f9 16%, #303341);
    --accent-ink: color-mix(in oklab, #bd93f9 70%, #f8f8f2);
    --action: #bd93f9;
    --action-2: color-mix(in srgb, #bd93f9 86%, #f8f8f2);
    --on-action: #21222c;
    --green: #50fa7b;
    --green-soft: color-mix(in srgb, #50fa7b 16%, #303341);
    --amber: #f2c36b;
    --amber-soft: color-mix(in srgb, #f2c36b 16%, #303341);
    --red: #ff7f7f;
    --red-soft: color-mix(in srgb, #ff7f7f 16%, #303341);
    --violet: color-mix(in oklab, #a68cff 78%, #f8f8f2);
    --violet-soft: color-mix(in srgb, #a68cff 16%, #303341);
    --blue: color-mix(in oklab, #5ba3ff 78%, #f8f8f2);
    --blue-soft: color-mix(in srgb, #5ba3ff 16%, #303341);
    --on-green: #21222c;
    --on-red: #21222c;
    --header: #21222c;
    --side: #191a21;
    --side-solid: #191a21;
    --side-text: #e2e2dc;
    --side-muted: color-mix(in srgb, #e2e2dc 64%, #191a21);
    --side-hover: #282a36;
    --side-active: #44475a;
    --side-active-text: #f8f8f2;
    --side-accent: #ff79c6;
    --side-line: color-mix(in srgb, #e2e2dc 14%, #191a21);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px #0000004d;
    --shadow-3: 0 30px 70px -20px rgba(0, 0, 0, .7);
    --ring: 0 0 0 3px color-mix(in srgb, #ff79c6 38%, transparent);
    color-scheme: dark;
  }
}

/* picker previews */
.tprev[data-p="harbor-light"] { --p-side: #fbfcfe; --p-side-accent: #4361ee; --p-header: #fbfcfe; --p-bg: #f2f4f8; --p-surface: #ffffff; --p-line: #e3e8f0; --p-text: #111a2c; --p-action: #4361ee; }
.tprev[data-p="harbor-dark"] { --p-side: #121825; --p-side-accent: #7189ff; --p-header: #121825; --p-bg: #0b0f17; --p-surface: #161d2b; --p-line: #222b3c; --p-text: #e9eef7; --p-action: #7189ff; }
.tprev[data-p="dmg-light"] { --p-side: #0f380f; --p-side-accent: #9bbc0f; --p-header: #cfcbc8; --p-bg: #c6d09a; --p-surface: #e2e9be; --p-line: #b3bf7c; --p-text: #0f380f; --p-action: #8b1d57; }
.tprev[data-p="dmg-dark"] { --p-side: #081a08; --p-side-accent: #9bbc0f; --p-header: #0b1f0b; --p-bg: #0e240e; --p-surface: #173617; --p-line: #2a4f2a; --p-text: #e2e9be; --p-action: #e86aa6; }
.tprev[data-p="graphite-light"] { --p-side: #15191d; --p-side-accent: #b9e568; --p-header: #fbfcfb; --p-bg: #e9eceb; --p-surface: #fbfcfb; --p-line: #d6dcda; --p-text: #1b2320; --p-action: #a7d65e; }
.tprev[data-p="graphite-dark"] { --p-side: #101619; --p-side-accent: #c6ee7c; --p-header: #171b1e; --p-bg: #15191d; --p-surface: #242c31; --p-line: #3d4b4b; --p-text: #f0f5f2; --p-action: #a7d65e; }
.tprev[data-p="atlas-light"] { --p-side: #132d47; --p-side-accent: #18aab3; --p-header: #ffffff; --p-bg: #edf2f7; --p-surface: #ffffff; --p-line: #d5e0e9; --p-text: #162b3d; --p-action: #096c77; }
.tprev[data-p="atlas-dark"] { --p-side: #0a1520; --p-side-accent: #3cc6cf; --p-header: #0b1722; --p-bg: #0d1a26; --p-surface: #142637; --p-line: #27415a; --p-text: #e2edf5; --p-action: #3cc6cf; }
.tprev[data-p="rosepine-light"] { --p-side: #26233a; --p-side-accent: #ebbcba; --p-header: #fffaf3; --p-bg: #f2e9e1; --p-surface: #fffaf3; --p-line: #dfdad9; --p-text: #464261; --p-action: #286983; }
.tprev[data-p="rosepine-dark"] { --p-side: #12101b; --p-side-accent: #ebbcba; --p-header: #16141f; --p-bg: #191724; --p-surface: #1f1d2e; --p-line: #403d52; --p-text: #e0def4; --p-action: #9ccfd8; }
.tprev[data-p="gruvbox-light"] { --p-side: #282828; --p-side-accent: #fabd2f; --p-header: #f9f5d7; --p-bg: #f2e5bc; --p-surface: #f9f5d7; --p-line: #e0d0a8; --p-text: #3c3836; --p-action: #af3a03; }
.tprev[data-p="gruvbox-dark"] { --p-side: #1d2021; --p-side-accent: #fabd2f; --p-header: #1d2021; --p-bg: #282828; --p-surface: #32302f; --p-line: #504945; --p-text: #ebdbb2; --p-action: #fe8019; }
.tprev[data-p="contrast-light"] { --p-side: #000000; --p-side-accent: #ffd60a; --p-header: #ffffff; --p-bg: #ffffff; --p-surface: #ffffff; --p-line: #4d4d4d; --p-text: #000000; --p-action: #0037c4; }
.tprev[data-p="contrast-dark"] { --p-side: #000000; --p-side-accent: #ffd60a; --p-header: #000000; --p-bg: #000000; --p-surface: #0d0d0d; --p-line: #8c8c8c; --p-text: #ffffff; --p-action: #ffd60a; }
.tprev[data-p="snes-light"] { --p-side: #4b4b53; --p-side-accent: #ffcd29; --p-header: #ababb4; --p-bg: #cfcfd5; --p-surface: #ededf0; --p-line: #b9b9c1; --p-text: #2b2b31; --p-action: #2f4ba3; }
.tprev[data-p="snes-dark"] { --p-side: #1e1e22; --p-side-accent: #7d93ff; --p-header: #222227; --p-bg: #2a2a30; --p-surface: #34343b; --p-line: #46464f; --p-text: #ececf0; --p-action: #8c9eff; }
.tprev[data-p="terra-light"] { --p-side: #332d2a; --p-side-accent: #cb7358; --p-header: #fffcf7; --p-bg: #ebe6dc; --p-surface: #fffcf7; --p-line: #ddd1c2; --p-text: #302d2a; --p-action: #a54d37; }
.tprev[data-p="terra-dark"] { --p-side: #15110f; --p-side-accent: #e9b777; --p-header: #1b1714; --p-bg: #1f1a17; --p-surface: #2c2521; --p-line: #463b34; --p-text: #f2ebe1; --p-action: #e58a6c; }
.tprev[data-p="nord-light"] { --p-side: #2e3440; --p-side-accent: #88c0d0; --p-header: #f8f9fb; --p-bg: #e5e9f0; --p-surface: #f8f9fb; --p-line: #d8dee9; --p-text: #2e3440; --p-action: #4f6f9b; }
.tprev[data-p="nord-dark"] { --p-side: #272c36; --p-side-accent: #88c0d0; --p-header: #272c36; --p-bg: #2e3440; --p-surface: #3b4252; --p-line: #434c5e; --p-text: #eceff4; --p-action: #88c0d0; }
.tprev[data-p="solarized-light"] { --p-side: #002b36; --p-side-accent: #2aa198; --p-header: #fdf6e3; --p-bg: #eee8d5; --p-surface: #fdf6e3; --p-line: #dfd8c2; --p-text: #073642; --p-action: #1e6fa9; }
.tprev[data-p="solarized-dark"] { --p-side: #001e26; --p-side-accent: #2aa198; --p-header: #00232c; --p-bg: #002b36; --p-surface: #073642; --p-line: #0f4655; --p-text: #eee8d5; --p-action: #4ea3e0; }
.tprev[data-p="tokyo-light"] { --p-side: #1a1b26; --p-side-accent: #7aa2f7; --p-header: #eef0f5; --p-bg: #d5d6db; --p-surface: #eef0f5; --p-line: #c8cad6; --p-text: #2e3a6e; --p-action: #1b57b0; }
.tprev[data-p="tokyo-dark"] { --p-side: #16161e; --p-side-accent: #7aa2f7; --p-header: #16161e; --p-bg: #1a1b26; --p-surface: #1f2335; --p-line: #2f354f; --p-text: #c0caf5; --p-action: #7aa2f7; }
.tprev[data-p="dracula-light"] { --p-side: #282a36; --p-side-accent: #bd93f9; --p-header: #fffdf4; --p-bg: #f3eed8; --p-surface: #fffdf4; --p-line: #e3dcc2; --p-text: #1f1f1f; --p-action: #644ac9; }
.tprev[data-p="dracula-dark"] { --p-side: #191a21; --p-side-accent: #ff79c6; --p-header: #21222c; --p-bg: #21222c; --p-surface: #303341; --p-line: #44475a; --p-text: #f8f8f2; --p-action: #bd93f9; }