:root,
:root[data-theme="default"] {
    --kc-page-bg-start: #1a1f1a;
    --kc-page-bg-end: #0f130f;
    --kc-page-glow-primary: rgba(0, 255, 0, .05);
    --kc-page-glow-secondary: rgba(0, 180, 0, .04);
    --kc-shell-bg: #0c1f17;
    --kc-shell-hover: #11292e;
    --kc-shell-border: #004400;
    --kc-shell-inset-border: rgba(22, 44, 22, .2);
    --kc-surface-bg: #1b211b;
    --kc-surface-bg-soft: rgba(27, 33, 27, .9);
    --kc-panel-bg-start: #1a211a;
    --kc-panel-bg-end: #111611;
    --kc-panel-glow-start: #1b291f;
    --kc-panel-glow-end: #101712;
    --kc-accent: #4b5320;
    --kc-primary: #1b6ec2;
    --kc-primary-border: #1861ac;
    --kc-lcd-background: rgba(210, 255, 57, .9);
    --kc-lcd-scanline: rgba(20, 28, 10, .025);
    --kc-lcd-color: #222f16;
    --kc-lobby-filter: none;
    --kc-content-picture-overlay: rgba(75, 83, 32, 0.27);
}

:root[data-theme="olive"] {
    --kc-page-bg-start: #24291b;
    --kc-page-bg-end: #11150c;
    --kc-page-glow-primary: rgba(151, 174, 88, .1);
    --kc-page-glow-secondary: rgba(83, 105, 46, .1);
    --kc-shell-bg: #273018;
    --kc-shell-hover: #354222;
    --kc-shell-border: #657a35;
    --kc-shell-inset-border: rgba(91, 111, 48, .28);
    --kc-surface-bg: #242b1b;
    --kc-surface-bg-soft: rgba(36, 43, 27, .92);
    --kc-panel-bg-start: #2c341f;
    --kc-panel-bg-end: #161b10;
    --kc-panel-glow-start: #303b20;
    --kc-panel-glow-end: #141a0e;
    --kc-accent: #667c35;
    --kc-primary: #667c35;
    --kc-primary-border: #52652a;
    --kc-lcd-background: rgba(193, 218, 108, .92);
    --kc-lcd-scanline: rgba(35, 48, 16, .035);
    --kc-lcd-color: #283517;
    --kc-lobby-filter: brightness(.88) saturate(1.05) sepia(.22) hue-rotate(35deg);
    --kc-content-picture-overlay: rgba(102, 124, 53, 0.27);
}

:root[data-theme="desert"] {
    --kc-page-bg-start: #30261b;
    --kc-page-bg-end: #17110c;
    --kc-page-glow-primary: rgba(214, 165, 92, .1);
    --kc-page-glow-secondary: rgba(135, 88, 48, .1);
    --kc-shell-bg: #3b2b1a;
    --kc-shell-hover: #503823;
    --kc-shell-border: #8b5e2d;
    --kc-shell-inset-border: rgba(121, 80, 39, .3);
    --kc-surface-bg: #302419;
    --kc-surface-bg-soft: rgba(48, 36, 25, .92);
    --kc-panel-bg-start: #3a2b1d;
    --kc-panel-bg-end: #1c140d;
    --kc-panel-glow-start: #422f1d;
    --kc-panel-glow-end: #1d140c;
    --kc-accent: #8a5e2f;
    --kc-primary: #a56d32;
    --kc-primary-border: #835426;
    --kc-lcd-background: rgba(242, 190, 82, .92);
    --kc-lcd-scanline: rgba(68, 38, 8, .035);
    --kc-lcd-color: #3b260c;
    --kc-lobby-filter: brightness(.9) saturate(1.08) sepia(.38) hue-rotate(345deg);
    --kc-content-picture-overlay: rgba(138, 94, 47, 0.27);
}

:root[data-theme="steel"] {
    --kc-page-bg-start: #20272d;
    --kc-page-bg-end: #0e1317;
    --kc-page-glow-primary: rgba(147, 188, 211, .09);
    --kc-page-glow-secondary: rgba(75, 112, 135, .09);
    --kc-shell-bg: #1d2a32;
    --kc-shell-hover: #293b46;
    --kc-shell-border: #436b80;
    --kc-shell-inset-border: rgba(65, 102, 122, .28);
    --kc-surface-bg: #1b252b;
    --kc-surface-bg-soft: rgba(27, 37, 43, .92);
    --kc-panel-bg-start: #26343c;
    --kc-panel-bg-end: #11191e;
    --kc-panel-glow-start: #283b45;
    --kc-panel-glow-end: #111b20;
    --kc-accent: #466f84;
    --kc-primary: #467a98;
    --kc-primary-border: #365f77;
    --kc-lcd-background: rgba(150, 205, 225, .92);
    --kc-lcd-scanline: rgba(14, 43, 55, .035);
    --kc-lcd-color: #162b34;
    --kc-lobby-filter: brightness(.88) saturate(.8) grayscale(.22) sepia(.08) hue-rotate(155deg);
    --kc-content-picture-overlay: rgba(70, 111, 132, 0.27);
}

:root[data-theme="night"] {
    --kc-page-bg-start: #171923;
    --kc-page-bg-end: #08090e;
    --kc-page-glow-primary: rgba(104, 91, 190, .1);
    --kc-page-glow-secondary: rgba(54, 65, 126, .1);
    --kc-shell-bg: #141625;
    --kc-shell-hover: #22263d;
    --kc-shell-border: #454d8c;
    --kc-shell-inset-border: rgba(66, 73, 132, .3);
    --kc-surface-bg: #171925;
    --kc-surface-bg-soft: rgba(23, 25, 37, .93);
    --kc-panel-bg-start: #202337;
    --kc-panel-bg-end: #0d0f19;
    --kc-panel-glow-start: #252943;
    --kc-panel-glow-end: #0d101c;
    --kc-accent: #4f579e;
    --kc-primary: #4f579e;
    --kc-primary-border: #3c437c;
    --kc-lcd-background: rgba(139, 154, 230, .9);
    --kc-lcd-scanline: rgba(20, 24, 67, .04);
    --kc-lcd-color: #151a38;
    --kc-lobby-filter: brightness(.7) saturate(.95) sepia(.12) hue-rotate(185deg);
    --kc-content-picture-overlay: rgba(79, 87, 158, 0.29);
}

:root[data-theme="lily"] {
    --kc-page-bg-start: #302038;
    --kc-page-bg-end: #140d18;
    --kc-page-glow-primary: rgba(190, 122, 218, .11);
    --kc-page-glow-secondary: rgba(112, 70, 142, .1);
    --kc-shell-bg: #35213f;
    --kc-shell-hover: #4a2e58;
    --kc-shell-border: #81529a;
    --kc-shell-inset-border: rgba(132, 82, 157, .3);
    --kc-surface-bg: #2b1d33;
    --kc-surface-bg-soft: rgba(43, 29, 51, .92);
    --kc-panel-bg-start: #392442;
    --kc-panel-bg-end: #1b1120;
    --kc-panel-glow-start: #43294e;
    --kc-panel-glow-end: #1b1021;
    --kc-accent: #80519a;
    --kc-primary: #8956a3;
    --kc-primary-border: #69407e;
    --kc-lcd-background: rgba(214, 167, 235, .92);
    --kc-lcd-scanline: rgba(61, 25, 76, .035);
    --kc-lcd-color: #361b42;
    --kc-lobby-filter: brightness(.78) saturate(.92) sepia(.08) hue-rotate(225deg);
    --kc-content-picture-overlay: rgba(128, 81, 154, 0.29);
}

:root[data-theme="candy"] {
    --kc-page-bg-start: #3a202e;
    --kc-page-bg-end: #180c12;
    --kc-page-glow-primary: rgba(233, 126, 170, .11);
    --kc-page-glow-secondary: rgba(151, 70, 108, .1);
    --kc-shell-bg: #472637;
    --kc-shell-hover: #603149;
    --kc-shell-border: #98506f;
    --kc-shell-inset-border: rgba(155, 78, 111, .3);
    --kc-surface-bg: #38202d;
    --kc-surface-bg-soft: rgba(56, 32, 45, .92);
    --kc-panel-bg-start: #462636;
    --kc-panel-bg-end: #211018;
    --kc-panel-glow-start: #522a3c;
    --kc-panel-glow-end: #220f19;
    --kc-accent: #9d4f72;
    --kc-primary: #aa557b;
    --kc-primary-border: #853d5e;
    --kc-lcd-background: rgba(243, 168, 200, .92);
    --kc-lcd-scanline: rgba(75, 24, 46, .035);
    --kc-lcd-color: #461a2d;
    --kc-lobby-filter: brightness(.82) saturate(.95) sepia(.12) hue-rotate(285deg);
    --kc-content-picture-overlay: rgba(157, 79, 114, 0.29);
}

:root[data-theme="phone"] {
    --kc-page-bg-start: #350b2a;
    --kc-page-bg-end: #12030e;
    --kc-page-glow-primary: rgba(255, 0, 161, .14);
    --kc-page-glow-secondary: rgba(170, 0, 107, .11);
    --kc-shell-bg: #441036;
    --kc-shell-hover: #64164f;
    --kc-shell-border: #a8227d;
    --kc-shell-inset-border: rgba(180, 33, 132, .32);
    --kc-surface-bg: #340d2b;
    --kc-surface-bg-soft: rgba(52, 13, 43, .93);
    --kc-panel-bg-start: #481039;
    --kc-panel-bg-end: #1d0617;
    --kc-panel-glow-start: #571146;
    --kc-panel-glow-end: #1d0518;
    --kc-accent: #b32284;
    --kc-primary: #c32491;
    --kc-primary-border: #96176d;
    --kc-lcd-background: rgba(255, 85, 200, .93);
    --kc-lcd-scanline: rgba(80, 0, 51, .045);
    --kc-lcd-color: #3f082f;
    --kc-lobby-filter: brightness(.72) saturate(1.15) sepia(.08) hue-rotate(275deg);
    --kc-content-picture-overlay: rgba(179, 34, 132, 0.29);
}

:root[data-theme="wolf"] {
    --kc-page-bg-start: #282c30;
    --kc-page-bg-end: #0e1012;
    --kc-page-glow-primary: rgba(174, 184, 193, .08);
    --kc-page-glow-secondary: rgba(102, 111, 120, .08);
    --kc-shell-bg: #24282c;
    --kc-shell-hover: #353b40;
    --kc-shell-border: #596168;
    --kc-shell-inset-border: rgba(100, 108, 115, .28);
    --kc-surface-bg: #202326;
    --kc-surface-bg-soft: rgba(32, 35, 38, .93);
    --kc-panel-bg-start: #2b2f33;
    --kc-panel-bg-end: #141619;
    --kc-panel-glow-start: #31363a;
    --kc-panel-glow-end: #131619;
    --kc-accent: #626b72;
    --kc-primary: #68727a;
    --kc-primary-border: #50585f;
    --kc-lcd-background: rgba(184, 192, 199, .92);
    --kc-lcd-scanline: rgba(22, 25, 28, .035);
    --kc-lcd-color: #252a2e;
    --kc-lobby-filter: brightness(.68) saturate(.25) grayscale(.7) contrast(1.05);
    --kc-content-picture-overlay: rgba(98, 107, 114, 0.29);
}

html,
body {
    background:
        radial-gradient(circle at 30% 20%, var(--kc-page-glow-primary), transparent 25%),
        radial-gradient(circle at 70% 80%, var(--kc-page-glow-secondary), transparent 35%),
        linear-gradient(180deg, var(--kc-page-bg-start), var(--kc-page-bg-end));
}

header {
    background-color: var(--kc-shell-bg);
}

.btn-primary {
    background-color: var(--kc-primary);
    border-color: var(--kc-primary-border);
}