:root {
    --dfo-latte-rosewater: #dc8a78;
    --dfo-latte-rosewater-rgb: 220 138 120;
    --dfo-latte-rosewater-hsl: 10.8 58.824% 66.667%;
    --dfo-latte-rosewater-oklch: .7141 .1045 33.0967;
    --dfo-latte-flamingo: #dd7878;
    --dfo-latte-flamingo-rgb: 221 120 120;
    --dfo-latte-flamingo-hsl: 0 59.763% 66.863%;
    --dfo-latte-flamingo-oklch: .6856 .1259 20.867;
    --dfo-latte-pink: #ea76cb;
    --dfo-latte-pink-rgb: 234 118 203;
    --dfo-latte-pink-hsl: 316.034 73.418% 69.02%;
    --dfo-latte-pink-oklch: .7256 .1739 338.433;
    --dfo-latte-mauve: #8839ef;
    --dfo-latte-mauve-rgb: 136 57 239;
    --dfo-latte-mauve-hsl: 266.044 85.047% 58.039%;
    --dfo-latte-mauve-oklch: .5547 .2503 297.016;
    --dfo-latte-red: #d20f39;
    --dfo-latte-red-rgb: 210 15 57;
    --dfo-latte-red-hsl: 347.077 86.667% 44.118%;
    --dfo-latte-red-oklch: .5505 .2155 19.8095;
    --dfo-latte-maroon: #e64553;
    --dfo-latte-maroon-rgb: 230 69 83;
    --dfo-latte-maroon-hsl: 354.783 76.303% 58.627%;
    --dfo-latte-maroon-oklch: .6252 .1967 20.2724;
    --dfo-latte-peach: #fe640b;
    --dfo-latte-peach-rgb: 254 100 11;
    --dfo-latte-peach-hsl: 21.975 99.184% 51.961%;
    --dfo-latte-peach-oklch: .692 .2041 42.4293;
    --dfo-latte-yellow: #df8e1d;
    --dfo-latte-yellow-rgb: 223 142 29;
    --dfo-latte-yellow-hsl: 34.948 76.984% 49.412%;
    --dfo-latte-yellow-oklch: .714 .1494 67.7767;
    --dfo-latte-green: #40a02b;
    --dfo-latte-green-rgb: 64 160 43;
    --dfo-latte-green-hsl: 109.231 57.635% 39.804%;
    --dfo-latte-green-oklch: .625 .1772 140.445;
    --dfo-latte-teal: #179299;
    --dfo-latte-teal-rgb: 23 146 153;
    --dfo-latte-teal-hsl: 183.231 73.864% 34.51%;
    --dfo-latte-teal-oklch: .6023 .0981 201.105;
    --dfo-latte-sky: #04a5e5;
    --dfo-latte-sky-rgb: 4 165 229;
    --dfo-latte-sky-hsl: 197.067 96.567% 45.686%;
    --dfo-latte-sky-oklch: .682 .1448 235.382;
    --dfo-latte-sapphire: #209fb5;
    --dfo-latte-sapphire-rgb: 32 159 181;
    --dfo-latte-sapphire-hsl: 188.859 69.953% 41.765%;
    --dfo-latte-sapphire-oklch: .6477 .1068 212.889;
    --dfo-latte-blue: #1e66f5;
    --dfo-latte-blue-rgb: 30 102 245;
    --dfo-latte-blue-hsl: 219.907 91.489% 53.922%;
    --dfo-latte-blue-oklch: .5586 .2255 262.087;
    --dfo-latte-lavender: #7287fd;
    --dfo-latte-lavender-rgb: 114 135 253;
    --dfo-latte-lavender-hsl: 230.935 97.203% 71.961%;
    --dfo-latte-lavender-oklch: .6638 .1751 273.135;
    --dfo-latte-text: #4c4f69;
    --dfo-latte-text-rgb: 76 79 105;
    --dfo-latte-text-hsl: 233.793 16.022% 35.49%;
    --dfo-latte-text-oklch: .4355 .043 279.325;
    --dfo-latte-subtext1: #5c5f77;
    --dfo-latte-subtext1-rgb: 92 95 119;
    --dfo-latte-subtext1-hsl: 233.333 12.796% 41.373%;
    --dfo-latte-subtext1-oklch: .492 .0385 279.299;
    --dfo-latte-subtext0: #6c6f85;
    --dfo-latte-subtext0-rgb: 108 111 133;
    --dfo-latte-subtext0-hsl: 232.8 10.373% 47.255%;
    --dfo-latte-subtext0-oklch: .5471 .0343 279.084;
    --dfo-latte-overlay2: #7c7f93;
    --dfo-latte-overlay2-rgb: 124 127 147;
    --dfo-latte-overlay2-hsl: 232.174 9.623% 53.137%;
    --dfo-latte-overlay2-oklch: .6009 .0305 278.694;
    --dfo-latte-overlay1: #8c8fa1;
    --dfo-latte-overlay1-rgb: 140 143 161;
    --dfo-latte-overlay1-hsl: 231.429 10.048% 59.02%;
    --dfo-latte-overlay1-oklch: .6536 .0269 278.121;
    --dfo-latte-overlay0: #9ca0b0;
    --dfo-latte-overlay0-rgb: 156 160 176;
    --dfo-latte-overlay0-hsl: 228 11.236% 65.098%;
    --dfo-latte-overlay0-oklch: .7077 .0237 274.601;
    --dfo-latte-surface2: #acb0be;
    --dfo-latte-surface2-rgb: 172 176 190;
    --dfo-latte-surface2-hsl: 226.667 12.162% 70.98%;
    --dfo-latte-surface2-oklch: .7584 .0205 273.154;
    --dfo-latte-surface1: #bcc0cc;
    --dfo-latte-surface1-rgb: 188 192 204;
    --dfo-latte-surface1-hsl: 225 13.559% 76.863%;
    --dfo-latte-surface1-oklch: .8083 .0174 271.198;
    --dfo-latte-surface0: #ccd0da;
    --dfo-latte-surface0-rgb: 204 208 218;
    --dfo-latte-surface0-hsl: 222.857 15.909% 82.745%;
    --dfo-latte-surface0-oklch: .8575 .0145 268.476;
    --dfo-latte-base: #eff1f5;
    --dfo-latte-base-rgb: 239 241 245;
    --dfo-latte-base-hsl: 220 23.077% 94.902%;
    --dfo-latte-base-oklch: .9578 .0058 264.532;
    --dfo-latte-mantle: #e6e9ef;
    --dfo-latte-mantle-rgb: 230 233 239;
    --dfo-latte-mantle-hsl: 220 21.951% 91.961%;
    --dfo-latte-mantle-oklch: .9335 .0087 264.521;
    --dfo-latte-crust: #dce0e8;
    --dfo-latte-crust-rgb: 220 224 232;
    --dfo-latte-crust-hsl: 220 20.69% 88.627%;
    --dfo-latte-crust-oklch: .906 .0117 264.507;
    --dfo-frappe-rosewater: #f2d5cf;
    --dfo-frappe-rosewater-rgb: 242 213 207;
    --dfo-frappe-rosewater-hsl: 10.286 57.377% 88.039%;
    --dfo-frappe-rosewater-oklch: .8955 .0335 31.5996;
    --dfo-frappe-flamingo: #eebebe;
    --dfo-frappe-flamingo-rgb: 238 190 190;
    --dfo-frappe-flamingo-hsl: 0 58.537% 83.922%;
    --dfo-frappe-flamingo-oklch: .8439 .0553 18.3066;
    --dfo-frappe-pink: #f4b8e4;
    --dfo-frappe-pink-rgb: 244 184 228;
    --dfo-frappe-pink-hsl: 316 73.171% 83.922%;
    --dfo-frappe-pink-oklch: .8504 .0892 336.263;
    --dfo-frappe-mauve: #ca9ee6;
    --dfo-frappe-mauve-rgb: 202 158 230;
    --dfo-frappe-mauve-hsl: 276.667 59.016% 76.078%;
    --dfo-frappe-mauve-oklch: .7648 .1108 311.744;
    --dfo-frappe-red: #e78284;
    --dfo-frappe-red-rgb: 231 130 132;
    --dfo-frappe-red-hsl: 358.812 67.785% 70.784%;
    --dfo-frappe-red-oklch: .7171 .1244 19.3859;
    --dfo-frappe-maroon: #ea999c;
    --dfo-frappe-maroon-rgb: 234 153 156;
    --dfo-frappe-maroon-hsl: 357.778 65.854% 75.882%;
    --dfo-frappe-maroon-oklch: .7646 .0976 17.1771;
    --dfo-frappe-peach: #ef9f76;
    --dfo-frappe-peach-rgb: 239 159 118;
    --dfo-frappe-peach-hsl: 20.331 79.085% 70.0%;
    --dfo-frappe-peach-oklch: .7727 .1106 47.7264;
    --dfo-frappe-yellow: #e5c890;
    --dfo-frappe-yellow-rgb: 229 200 144;
    --dfo-frappe-yellow-hsl: 39.529 62.044% 73.137%;
    --dfo-frappe-yellow-oklch: .8443 .0795 83.4717;
    --dfo-frappe-green: #a6d189;
    --dfo-frappe-green-rgb: 166 209 137;
    --dfo-frappe-green-hsl: 95.833 43.902% 67.843%;
    --dfo-frappe-green-oklch: .8124 .1071 133.392;
    --dfo-frappe-teal: #81c8be;
    --dfo-frappe-teal-rgb: 129 200 190;
    --dfo-frappe-teal-hsl: 171.549 39.227% 64.51%;
    --dfo-frappe-teal-oklch: .783 .073 184.645;
    --dfo-frappe-sky: #99d1db;
    --dfo-frappe-sky-rgb: 153 209 219;
    --dfo-frappe-sky-hsl: 189.091 47.826% 72.941%;
    --dfo-frappe-sky-oklch: .8255 .0592 209.756;
    --dfo-frappe-sapphire: #85c1dc;
    --dfo-frappe-sapphire-rgb: 133 193 220;
    --dfo-frappe-sapphire-hsl: 198.621 55.414% 69.216%;
    --dfo-frappe-sapphire-oklch: .7796 .0727 227.88;
    --dfo-frappe-blue: #8caaee;
    --dfo-frappe-blue-rgb: 140 170 238;
    --dfo-frappe-blue-hsl: 221.633 74.242% 74.118%;
    --dfo-frappe-blue-oklch: .742 .1044 265.663;
    --dfo-frappe-lavender: #babbf1;
    --dfo-frappe-lavender-rgb: 186 187 241;
    --dfo-frappe-lavender-hsl: 238.909 66.265% 83.725%;
    --dfo-frappe-lavender-oklch: .8099 .0759 283.741;
    --dfo-frappe-text: #c6d0f5;
    --dfo-frappe-text-rgb: 198 208 245;
    --dfo-frappe-text-hsl: 227.234 70.149% 86.863%;
    --dfo-frappe-text-oklch: .8619 .0526 273.347;
    --dfo-frappe-subtext1: #b5bfe2;
    --dfo-frappe-subtext1-rgb: 181 191 226;
    --dfo-frappe-subtext1-hsl: 226.667 43.689% 79.804%;
    --dfo-frappe-subtext1-oklch: .8084 .0507 272.678;
    --dfo-frappe-subtext0: #a5adce;
    --dfo-frappe-subtext0-rgb: 165 173 206;
    --dfo-frappe-subtext0-hsl: 228.293 29.496% 72.745%;
    --dfo-frappe-subtext0-oklch: .7524 .0483 274.473;
    --dfo-frappe-overlay2: #949cbb;
    --dfo-frappe-overlay2-rgb: 148 156 187;
    --dfo-frappe-overlay2-hsl: 227.692 22.286% 65.686%;
    --dfo-frappe-overlay2-oklch: .697 .0464 273.777;
    --dfo-frappe-overlay1: #838ba7;
    --dfo-frappe-overlay1-rgb: 131 139 167;
    --dfo-frappe-overlay1-hsl: 226.667 16.981% 58.431%;
    --dfo-frappe-overlay1-oklch: .6401 .043 272.614;
    --dfo-frappe-overlay0: #737994;
    --dfo-frappe-overlay0-rgb: 115 121 148;
    --dfo-frappe-overlay0-hsl: 229.091 13.36% 51.569%;
    --dfo-frappe-overlay0-oklch: .5809 .0421 275.198;
    --dfo-frappe-surface2: #626880;
    --dfo-frappe-surface2-rgb: 98 104 128;
    --dfo-frappe-surface2-hsl: 228 13.274% 44.314%;
    --dfo-frappe-surface2-oklch: .5211 .0386 273.999;
    --dfo-frappe-surface1: #51576d;
    --dfo-frappe-surface1-rgb: 81 87 109;
    --dfo-frappe-surface1-hsl: 227.143 14.737% 37.255%;
    --dfo-frappe-surface1-oklch: .4601 .0367 272.966;
    --dfo-frappe-surface0: #414559;
    --dfo-frappe-surface0-rgb: 65 69 89;
    --dfo-frappe-surface0-hsl: 230 15.584% 30.196%;
    --dfo-frappe-surface0-oklch: .3949 .0342 275.9;
    --dfo-frappe-base: #303446;
    --dfo-frappe-base-rgb: 48 52 70;
    --dfo-frappe-base-hsl: 229.091 18.644% 23.137%;
    --dfo-frappe-base-oklch: .3291 .0324 274.758;
    --dfo-frappe-mantle: #292c3c;
    --dfo-frappe-mantle-rgb: 41 44 60;
    --dfo-frappe-mantle-hsl: 230.526 18.812% 19.804%;
    --dfo-frappe-mantle-oklch: .2973 .0294 276.214;
    --dfo-frappe-crust: #232634;
    --dfo-frappe-crust-rgb: 35 38 52;
    --dfo-frappe-crust-hsl: 229.412 19.54% 17.059%;
    --dfo-frappe-crust-oklch: .272 .0264 275.115;
    --dfo-macchiato-rosewater: #f4dbd6;
    --dfo-macchiato-rosewater-rgb: 244 219 214;
    --dfo-macchiato-rosewater-hsl: 10 57.692% 89.804%;
    --dfo-macchiato-rosewater-oklch: .9105 .0286 31.1326;
    --dfo-macchiato-flamingo: #f0c6c6;
    --dfo-macchiato-flamingo-rgb: 240 198 198;
    --dfo-macchiato-flamingo-hsl: 0 58.333% 85.882%;
    --dfo-macchiato-flamingo-oklch: .8629 .0479 18.1203;
    --dfo-macchiato-pink: #f5bde6;
    --dfo-macchiato-pink-rgb: 245 189 230;
    --dfo-macchiato-pink-hsl: 316.071 73.684% 85.098%;
    --dfo-macchiato-pink-oklch: .8608 .083 336.18;
    --dfo-macchiato-mauve: #c6a0f6;
    --dfo-macchiato-mauve-rgb: 198 160 246;
    --dfo-macchiato-mauve-hsl: 266.512 82.692% 79.608%;
    --dfo-macchiato-mauve-oklch: .7715 .1259 303.898;
    --dfo-macchiato-red: #ed8796;
    --dfo-macchiato-red-rgb: 237 135 150;
    --dfo-macchiato-red-hsl: 351.176 73.913% 72.941%;
    --dfo-macchiato-red-oklch: .737 .1252 11.1943;
    --dfo-macchiato-maroon: #ee99a0;
    --dfo-macchiato-maroon-rgb: 238 153 160;
    --dfo-macchiato-maroon-hsl: 355.059 71.429% 76.667%;
    --dfo-macchiato-maroon-oklch: .7702 .1024 14.3707;
    --dfo-macchiato-peach: #f5a97f;
    --dfo-macchiato-peach-rgb: 245 169 127;
    --dfo-macchiato-peach-hsl: 21.356 85.507% 72.941%;
    --dfo-macchiato-peach-oklch: .7988 .1061 49.6376;
    --dfo-macchiato-yellow: #eed49f;
    --dfo-macchiato-yellow-rgb: 238 212 159;
    --dfo-macchiato-yellow-hsl: 40.253 69.912% 77.843%;
    --dfo-macchiato-yellow-oklch: .879 .0744 84.751;
    --dfo-macchiato-green: #a6da95;
    --dfo-macchiato-green-rgb: 166 218 149;
    --dfo-macchiato-green-hsl: 105.217 48.252% 71.961%;
    --dfo-macchiato-green-oklch: .835 .1079 138.15;
    --dfo-macchiato-teal: #8bd5ca;
    --dfo-macchiato-teal-rgb: 139 213 202;
    --dfo-macchiato-teal-hsl: 171.081 46.835% 69.02%;
    --dfo-macchiato-teal-oklch: .8214 .0755 184.1;
    --dfo-macchiato-sky: #91d7e3;
    --dfo-macchiato-sky-rgb: 145 215 227;
    --dfo-macchiato-sky-hsl: 188.78 59.42% 72.941%;
    --dfo-macchiato-sky-oklch: .8369 .0719 209.366;
    --dfo-macchiato-sapphire: #7dc4e4;
    --dfo-macchiato-sapphire-rgb: 125 196 228;
    --dfo-macchiato-sapphire-hsl: 198.641 65.605% 69.216%;
    --dfo-macchiato-sapphire-oklch: .7851 .0845 228.378;
    --dfo-macchiato-blue: #8aadf4;
    --dfo-macchiato-blue-rgb: 138 173 244;
    --dfo-macchiato-blue-hsl: 220.189 82.813% 74.902%;
    --dfo-macchiato-blue-oklch: .7497 .1101 263.81;
    --dfo-macchiato-lavender: #b7bdf8;
    --dfo-macchiato-lavender-rgb: 183 189 248;
    --dfo-macchiato-lavender-hsl: 234.462 82.278% 84.51%;
    --dfo-macchiato-lavender-oklch: .8144 .0834 279.854;
    --dfo-macchiato-text: #cad3f5;
    --dfo-macchiato-text-rgb: 202 211 245;
    --dfo-macchiato-text-hsl: 227.442 68.254% 87.647%;
    --dfo-macchiato-text-oklch: .8708 .0481 273.665;
    --dfo-macchiato-subtext1: #b8c0e0;
    --dfo-macchiato-subtext1-rgb: 184 192 224;
    --dfo-macchiato-subtext1-hsl: 228 39.216% 80.0%;
    --dfo-macchiato-subtext1-oklch: .812 .0459 274.267;
    --dfo-macchiato-subtext0: #a5adcb;
    --dfo-macchiato-subtext0-rgb: 165 173 203;
    --dfo-macchiato-subtext0-hsl: 227.368 26.761% 72.157%;
    --dfo-macchiato-subtext0-oklch: .7513 .0441 273.533;
    --dfo-macchiato-overlay2: #939ab7;
    --dfo-macchiato-overlay2-rgb: 147 154 183;
    --dfo-macchiato-overlay2-hsl: 228.333 20.0% 64.706%;
    --dfo-macchiato-overlay2-oklch: .6905 .0433 274.539;
    --dfo-macchiato-overlay1: #8087a2;
    --dfo-macchiato-overlay1-rgb: 128 135 162;
    --dfo-macchiato-overlay1-hsl: 227.647 15.455% 56.863%;
    --dfo-macchiato-overlay1-oklch: .6272 .0415 273.733;
    --dfo-macchiato-overlay0: #6e738d;
    --dfo-macchiato-overlay0-rgb: 110 115 141;
    --dfo-macchiato-overlay0-hsl: 230.323 12.351% 49.216%;
    --dfo-macchiato-overlay0-oklch: .5608 .0407 276.475;
    --dfo-macchiato-surface2: #5b6078;
    --dfo-macchiato-surface2-rgb: 91 96 120;
    --dfo-macchiato-surface2-hsl: 229.655 13.744% 41.373%;
    --dfo-macchiato-surface2-oklch: .4939 .0389 275.683;
    --dfo-macchiato-surface1: #494d64;
    --dfo-macchiato-surface1-rgb: 73 77 100;
    --dfo-macchiato-surface1-hsl: 231.111 15.607% 33.922%;
    --dfo-macchiato-surface1-oklch: .4259 .0385 276.948;
    --dfo-macchiato-surface0: #363a4f;
    --dfo-macchiato-surface0-rgb: 54 58 79;
    --dfo-macchiato-surface0-hsl: 230.4 18.797% 26.078%;
    --dfo-macchiato-surface0-oklch: .3538 .0369 275.985;
    --dfo-macchiato-base: #24273a;
    --dfo-macchiato-base-rgb: 36 39 58;
    --dfo-macchiato-base-hsl: 231.818 23.404% 18.431%;
    --dfo-macchiato-base-oklch: .2788 .0353 276.937;
    --dfo-macchiato-mantle: #1e2030;
    --dfo-macchiato-mantle-rgb: 30 32 48;
    --dfo-macchiato-mantle-hsl: 233.333 23.077% 15.294%;
    --dfo-macchiato-mantle-oklch: .2493 .0305 278.435;
    --dfo-macchiato-crust: #181926;
    --dfo-macchiato-crust-rgb: 24 25 38;
    --dfo-macchiato-crust-hsl: 235.714 22.581% 12.157%;
    --dfo-macchiato-crust-oklch: .2188 .0255 280.657;
    --dfo-mocha-rosewater: #f5e0dc;
    --dfo-mocha-rosewater-rgb: 245 224 220;
    --dfo-mocha-rosewater-hsl: 9.6 55.556% 91.176%;
    --dfo-mocha-rosewater-oklch: .9226 .0238 30.4919;
    --dfo-mocha-flamingo: #f2cdcd;
    --dfo-mocha-flamingo-rgb: 242 205 205;
    --dfo-mocha-flamingo-hsl: 0 58.73% 87.647%;
    --dfo-mocha-flamingo-oklch: .8797 .0418 17.975;
    --dfo-mocha-pink: #f5c2e7;
    --dfo-mocha-pink-rgb: 245 194 231;
    --dfo-mocha-pink-hsl: 316.471 71.831% 86.078%;
    --dfo-mocha-pink-oklch: .87 .0752 336.304;
    --dfo-mocha-mauve: #cba6f7;
    --dfo-mocha-mauve-rgb: 203 166 247;
    --dfo-mocha-mauve-hsl: 267.407 83.505% 80.98%;
    --dfo-mocha-mauve-oklch: .7871 .1187 304.769;
    --dfo-mocha-red: #f38ba8;
    --dfo-mocha-red-rgb: 243 139 168;
    --dfo-mocha-red-hsl: 343.269 81.25% 74.902%;
    --dfo-mocha-red-oklch: .7556 .1297 2.7642;
    --dfo-mocha-maroon: #eba0ac;
    --dfo-mocha-maroon-rgb: 235 160 172;
    --dfo-mocha-maroon-hsl: 350.4 65.217% 77.451%;
    --dfo-mocha-maroon-oklch: .7821 .0903 8.8482;
    --dfo-mocha-peach: #fab387;
    --dfo-mocha-peach-rgb: 250 179 135;
    --dfo-mocha-peach-hsl: 22.957 92.0% 75.49%;
    --dfo-mocha-peach-oklch: .8237 .1015 52.6294;
    --dfo-mocha-yellow: #f9e2af;
    --dfo-mocha-yellow-rgb: 249 226 175;
    --dfo-mocha-yellow-hsl: 41.351 86.047% 83.137%;
    --dfo-mocha-yellow-oklch: .9193 .0704 86.5281;
    --dfo-mocha-green: #a6e3a1;
    --dfo-mocha-green-rgb: 166 227 161;
    --dfo-mocha-green-hsl: 115.455 54.098% 76.078%;
    --dfo-mocha-green-oklch: .8577 .1092 142.715;
    --dfo-mocha-teal: #94e2d5;
    --dfo-mocha-teal-rgb: 148 226 213;
    --dfo-mocha-teal-hsl: 170 57.353% 73.333%;
    --dfo-mocha-teal-oklch: .8585 .0792 182.75;
    --dfo-mocha-sky: #89dceb;
    --dfo-mocha-sky-rgb: 137 220 235;
    --dfo-mocha-sky-hsl: 189.184 71.014% 72.941%;
    --dfo-mocha-sky-oklch: .8467 .0833 210.255;
    --dfo-mocha-sapphire: #74c7ec;
    --dfo-mocha-sapphire-rgb: 116 199 236;
    --dfo-mocha-sapphire-hsl: 198.5 75.949% 69.02%;
    --dfo-mocha-sapphire-oklch: .7906 .0965 228.653;
    --dfo-mocha-blue: #89b4fa;
    --dfo-mocha-blue-rgb: 137 180 250;
    --dfo-mocha-blue-hsl: 217.168 91.87% 75.882%;
    --dfo-mocha-blue-oklch: .7664 .1113 259.885;
    --dfo-mocha-lavender: #b4befe;
    --dfo-mocha-lavender-rgb: 180 190 254;
    --dfo-mocha-lavender-hsl: 231.892 97.368% 85.098%;
    --dfo-mocha-lavender-oklch: .8166 .091 277.309;
    --dfo-mocha-text: #cdd6f4;
    --dfo-mocha-text-rgb: 205 214 244;
    --dfo-mocha-text-hsl: 226.154 63.934% 88.039%;
    --dfo-mocha-text-oklch: .8787 .0426 272.277;
    --dfo-mocha-subtext1: #bac2de;
    --dfo-mocha-subtext1-rgb: 186 194 222;
    --dfo-mocha-subtext1-hsl: 226.667 35.294% 80.0%;
    --dfo-mocha-subtext1-oklch: .8168 .0403 272.862;
    --dfo-mocha-subtext0: #a6adc8;
    --dfo-mocha-subtext0-rgb: 166 173 200;
    --dfo-mocha-subtext0-hsl: 227.647 23.611% 71.765%;
    --dfo-mocha-subtext0-oklch: .751 .0396 273.932;
    --dfo-mocha-overlay2: #9399b2;
    --dfo-mocha-overlay2-rgb: 147 153 178;
    --dfo-mocha-overlay2-hsl: 228.387 16.757% 63.725%;
    --dfo-mocha-overlay2-oklch: .6865 .0374 274.725;
    --dfo-mocha-overlay1: #7f849c;
    --dfo-mocha-overlay1-rgb: 127 132 156;
    --dfo-mocha-overlay1-hsl: 229.655 12.775% 55.49%;
    --dfo-mocha-overlay1-oklch: .6176 .0367 276.005;
    --dfo-mocha-overlay0: #6c7086;
    --dfo-mocha-overlay0-rgb: 108 112 134;
    --dfo-mocha-overlay0-hsl: 230.769 10.744% 47.451%;
    --dfo-mocha-overlay0-oklch: .5497 .0345 277.095;
    --dfo-mocha-surface2: #585b70;
    --dfo-mocha-surface2-rgb: 88 91 112;
    --dfo-mocha-surface2-hsl: 232.5 12.0% 39.216%;
    --dfo-mocha-surface2-oklch: .4765 .034 278.643;
    --dfo-mocha-surface1: #45475a;
    --dfo-mocha-surface1-rgb: 69 71 90;
    --dfo-mocha-surface1-hsl: 234.286 13.208% 31.176%;
    --dfo-mocha-surface1-oklch: .4037 .032 280.152;
    --dfo-mocha-surface0: #313244;
    --dfo-mocha-surface0-rgb: 49 50 68;
    --dfo-mocha-surface0-hsl: 236.842 16.239% 22.941%;
    --dfo-mocha-surface0-oklch: .324 .0319 281.978;
    --dfo-mocha-base: #1e1e2e;
    --dfo-mocha-base-rgb: 30 30 46;
    --dfo-mocha-base-hsl: 240 21.053% 14.902%;
    --dfo-mocha-base-oklch: .2429 .0304 283.911;
    --dfo-mocha-mantle: #181825;
    --dfo-mocha-mantle-rgb: 24 24 37;
    --dfo-mocha-mantle-hsl: 240 21.311% 11.961%;
    --dfo-mocha-mantle-oklch: .2155 .0254 284.065;
    --dfo-mocha-crust: #11111b;
    --dfo-mocha-crust-rgb: 17 17 27;
    --dfo-mocha-crust-hsl: 240 22.727% 8.627%;
    --dfo-mocha-crust-oklch: .1828 .0204 284.204
}

:root {
    --df-border-adjust: .1;
    --df-transition-time: .1s;

    @media (prefers-color-scheme:dark) {
        --df-border-adjust: -.05
    }

    --df-accent-color:var(--dfo-latte-mauve);
    --df-focus-color:var(--dfo-mocha-yellow);
    --df-white-color:#fff;
    --df-background-color-dark:var(--dfo-mocha-crust);
    --df-background-color-light:var(--dfo-latte-mantle);
    --df-background-color:light-dark(var(--df-background-color-light),
        var(--df-background-color-dark));
    --df-background-color-inverse:light-dark(var(--df-background-color-dark),
        var(--df-background-color-light));
    --df-secondary-background-color:light-dark(var(--dfo-latte-maroon:),
        var(--dfo-mocha-surface0));
    --df-secondary-border-color:light-dark(var(--dfo-latte-crust),
        var(--dfo-mocha-surface1));
    --df-card-background-color-dark:var(--dfo-mocha-base);
    --df-card-background-color-light:var(--dfo-latte-base);
    --df-card-background-color:light-dark(var(--df-card-background-color-light),
        var(--df-card-background-color-dark));
    --df-alert-background-color:var(--df-secondary-background-color);
    --df-blog-background-color:var(--dfo-mocha-peach);
    --df-card-secondary-background-color:light-dark(var(--dfo-latte-crust),
        var(--dfo-mocha-mantle));
    --df-download-logo-color:var(--dfo-latte-sky);
    --df-error-background-color:var(--dfo-latte-maroon);
    --df-highlight-background-color:var(--dfo-mocha-yellow);
    --df-info-background-color:var(--dfo-mocha-sapphire);
    --df-info-color:var(--dfo-latte-blue);
    --df-microblog-background-color:light-dark(rgb(var(--dfo-mocha-mauve-rgb) / .5),
        var(--dfo-mocha-mauve));
    --df-sponsor-background-color:var(--dfo-mocha-pink);
    --df-success-background-color:var(--dfo-mocha-green);
    --df-success-color:var(--dfo-latte-green);
    --df-tag-background-color:var(--df-secondary-background-color);
    --df-tag-border-color:var(--df-secondary-border-color);
    --df-warning-background-color:var(--dfo-mocha-yellow);
    --df-warning-color:var(--dfo-latte-yellow);
    --df-web-developer-background-color:var(--dfo-mocha-mauve);
    --df-text-color-dark:var(--dfo-latte-base);
    --df-text-color-light:var(--dfo-mocha-crust);
    --df-text-color:light-dark(var(--df-text-color-light),
        var(--df-text-color-dark));
    --df-text-color-inverse:light-dark(var(--df-text-color-dark),
        var(--df-text-color-light));
    --df-footer-text-color:light-dark(var(--dfo-mocha-surface1),
        var(--dfo-mocha-subtext0));
    --df-secondary-text-color:light-dark(var(--dfo-latte-text),
        var(--dfo-mocha-subtext0));
    --df-secondary-text-color-color-background:var(--dfo-mocha-base);
    --df-tag-text-color:light-dark(var(--dfo-mocha-surface1),
        var(--dfo-mocha-subtext1));
    --df-border-radius:round(.75rem,
        1px);
    --df-border-radius-small:round(.25rem,
        1px);
    --df-border-width:1px;
    --df-button-background-color-dark:var(--df-text-color-dark);
    --df-button-background-color-light:var(--df-text-color-light);
    --df-button-background-color:light-dark(var(--df-button-background-color-light),
        var(--df-button-background-color-dark));
    --df-button-text-color-dark:var(--df-text-color-light);
    --df-button-text-color-hover:var(--df-button-text-color-light);
    --df-button-text-color-light:var(--df-text-color-dark);
    --df-button-text-color:light-dark(var(--df-button-text-color-light),
        var(--df-button-text-color-dark));
    --df-buy-me-a-coffee-background-color:var(--dfo-mocha-yellow);
    --df-ko-fi-background-color:var(--dfo-mocha-blue);
    --df-paypal-background-color:var(--dfo-mocha-sapphire);
    --df-form-background-color:light-dark(var(--dfo-latte-base),
        var(--dfo-mocha-base));
    --df-form-border-color:light-dark(var(--dfo-latte-crust),
        var(--dfo-mocha-surface1));
    --df-invalid-color:var(--dfo-mocha-red);
    --df-placeholder-text-color:light-dark(var(--dfo-latte-surface1),
        var(--dfo-mocha-surface1));
    --df-gradient-progress-background:linear-gradient(to right,
        var(--dfo-mocha-red),
        var(--dfo-mocha-maroon),
        var(--dfo-mocha-peach),
        var(--dfo-mocha-yellow),
        var(--dfo-mocha-green),
        var(--dfo-mocha-teal),
        var(--dfo-mocha-sky),
        var(--dfo-mocha-blue),
        var(--dfo-mocha-lavender),
        var(--dfo-mocha-mauve));
    --df-gradient-progress-height:round(.25rem,
        1px);
    --df-gap-grid:round(1rem,
        1px);
    --df-gap-large:round(2rem,
        1px);
    --df-gap-small:round(1rem,
        1px);
    --df-line-length:round(40em,
        1px);
    --df-width-sidebar:round(12.5em + (var(--df-gap-small) * 2) + (var(--df-border-width) * 2),
        1px);
    --df-font-ui-monospace:ui-monospace,
    ui-monospace,
    monospace;
    --df-font-ui-monospace:ui-monospace,
    ui-monospace,
    monospace;
    --df-font-body:var(--df-font-ui-monospace);
    --df-font-heading:var(--df-font-ui-monospace);
    --df-font-monospace:var(--df-font-ui-monospace);
    --df-text-bold-weight:700;
    --df-text-normal-weight:300;
    --df-text-size-base:round(1.125rem,
        1px);
    --df-text-size-enormous:round(2rem,
        1px);
    --df-text-size-huge:round(1.75rem,
        1px);
    --df-text-size-larger:round(1.5rem,
        1px);
    --df-text-size-large:round(1.25rem,
        1px);
    --df-text-size-standard:round(1rem,
        1px);
    --df-text-size-monospace:round(.95rem,
        1px);
    --df-text-size-small:round(.75rem,
        1px);
    --df-text-size-tiny:round(.5rem,
        1px)
}




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

:root {
    background-color: var(--df-background-color);
    color: var(--df-text-color);
    color-scheme: light dark;
    font-family: var(--df-font-body);
    font-size: var(--df-text-size-base);
    -webkit-font-smoothing: antialiased;
    font-weight: var(--df-text-normal-weight);
    margin: round(var(--df-gap-small) / 2, 1px);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    line-height: 1.3
}

:focus-visible {
    outline: var(--df-focus-color) solid calc(var(--df-border-width) * 2);
    outline-offset: calc(var(--df-border-width) * 2)
}

::placeholder {
    color: var(--df-placeholder-text-color)
}

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

:target {
    scroll-margin: .5em
}

a {
    color: inherit;
    font-weight: var(--df-text-bold-weight);
    text-underline-offset: .15em;
    transition: text-underline-offset var(--df-transition-time);

    &:focus,
    &:hover {
        color: var(--df-accent-color);
        text-underline-offset: .25em
    }
}

blockquote {
    background-color: var(--df-secondary-background-color);
    border: var(--df-secondary-border-color) solid var(--df-border-width);
    border-radius: var(--df-border-radius);
    font-size: var(--df-text-size-large);
    font-style: italic;
    display: inline-block;

    & p {
        margin: 0
    }
}

blockquote,
pre {
    margin: var(--df-gap-small) var(--df-gap-large);
    padding: var(--df-gap-small)
}

body {
    margin: 0
}

button {
    cursor: pointer;
    padding: round(var(--df-gap-small) / 2, 1px) var(--df-gap-small);
    border-style: none;

    & img,
    & svg {
        vertical-align: text-bottom
    }
}

button,
input,
textarea {
    font: inherit
}

code {
    background-color: var(--df-secondary-background-color);
    border: var(--df-secondary-border-color) solid var(--df-border-width);
    border-radius: var(--df-border-radius-small);
    color: var(--df-text-color);
    font-family: var(--df-font-monospace);
    padding: round(var(--df-gap-small) / 8, 1px)
}

code,
pre {
    font-size: var(--df-text-size-monospace)
}

em {
    font-style: italic
}

footer {
    margin-top: var(--df-gap-large);
    container: footer/inline-size
}

form {
    margin: var(--df-gap-large) 0;
    text-align: end;

    &>button {
        margin-top: var(--df-gap-small)
    }
}

header {
    gap: var(--df-gap-small);
    margin-bottom: var(--df-gap-large);
    flex-wrap: wrap;
    justify-content: space-between;
    display: flex
}

h1 {
    font-size: var(--df-text-size-enormous);
    margin: 0 0 .5em
}

h1,
h2 {
    &:has(+small) {
        margin-bottom: 0
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--df-font-heading);
    font-weight: var(--df-text-bold-weight);
    letter-spacing: -1px;
    text-wrap: balance
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
textarea {
    max-width: var(--df-line-length);
    overflow-wrap: break-word
}

h2 {
    font-size: var(--df-text-size-huge)
}

h2,
h3,
h4,
h5,
h6 {
    margin: .5em 0
}

h3 {
    font-size: var(--df-text-size-larger)
}

h4 {
    font-size: var(--df-text-size-large)
}

h5,
h6 {
    font-size: var(--df-text-size-standard)
}

h6 {
    font-weight: var(--df-text-normal-weight)
}

hr {
    background-color: var(--df-secondary-border-color);
    height: var(--df-border-width);
    margin: var(--df-gap-large);
    border-style: none
}

img,
ol,
p,
ul,
video {
    &:first-child {
        margin-top: 0
    }

    &:last-child {
        margin-bottom: 0
    }
}

img,
video {
    border-radius: var(--df-border-radius-small);
    height: auto;
    margin: var(--df-gap-small) auto;
    max-width: 100%;
    display: block
}

input:user-invalid {
    outline: var(--df-invalid-color) solid calc(var(--df-border-width) * 2);
    outline-offset: calc(var(--df-border-width) * 2)
}

input,
pre,
textarea {
    background-color: var(--df-form-background-color);
    border: var(--df-form-border-color) solid var(--df-border-width);
    border-radius: var(--df-border-radius-small)
}

input,
textarea {
    margin: round(var(--df-gap-small) / 2, 1px) 0;
    padding: round(var(--df-gap-small) / 2, 1px);
    width: 100%;
    display: block
}

input+label {
    margin-top: var(--df-gap-large)
}

label {
    text-align: start;
    display: block
}

li {

    & ol,
    & ul {
        margin-top: 0;
        margin-bottom: 0
    }
}

nav {
    font-family: var(--df-font-heading);
    text-transform: uppercase;

    & li a {
        display: inline-block
    }
}

ol {
    list-style-type: decimal;

    & ol {
        margin-left: var(--df-gap-small);
        list-style-type: lower-alpha
    }
}

ol,
ul {
    margin: var(--df-gap-small) var(--df-gap-large);
    max-width: calc(var(--df-line-length) - (var(--df-gap-large) * 2));
    padding: 0
}

p {
    margin: var(--df-gap-small) 0;
    text-wrap: pretty
}

p,
ul {

    &+h1,
    &+h2 {
        margin-top: 1em
    }

    &+h3,
    &+h4,
    &+h5,
    &+h6 {
        margin-top: 1.5em
    }
}

pre {
    overflow-x: auto;

    & code {
        background-color: #0000;
        border-style: none;
        padding: 0
    }
}

small {
    color: var(--df-secondary-text-color);
    font-size: var(--df-text-size-small)
}

strong {
    font-weight: var(--df-text-bold-weight)
}

svg {
    fill: currentColor;
    width: 1em;
    height: 1em
}

table {
    border-collapse: collapse;
    margin: var(--df-gap-large) 0;
    min-width: 50%
}

tbody {
    vertical-align: top
}

td,
th {
    padding: round(var(--df-gap-small) / 2, 1px)
}

textarea {
    min-height: 10em
}

th {
    font-weight: var(--df-text-bold-weight);
    text-align: start
}

thead {
    background-color: var(--df-secondary-background-color);
    vertical-align: bottom
}

tr {
    border-color: var(--df-secondary-border-color);
    border-style: solid;
    border-width: var(--df-border-width) 0;

    &:focus,
    &:hover {
        background-color: var(--df-secondary-background-color)
    }
}

ul {
    list-style-type: disc;

    & ul {
        margin-left: var(--df-gap-small)
    }
}

@media (prefers-reduced-motion:reduce) {
    a {
        transition: none
    }
}

@view-transition {
    navigation: auto
}

.hidden {
    display: none
}

.visually-hidden:not(:active):not(:focus) {
    clip-path: inset(50%);
    white-space: nowrap;
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden
}

.visually-hidden+.card,
.visually-hidden+.row {
    margin-top: 0
}

.flex-break {
    flex: 100%
}

li img {
    margin: 0
}

a .border {
    border: var(--df-text-color) solid var(--df-border-width);
    box-sizing: content-box
}

a:focus,
a:hover {
    & .border {
        border-color: var(--df-accent-color)
    }
}

img.icon {
    width: 1em;
    height: 1em
}

.circle {
    border-radius: 50%
}

h2 .link-undecorated {
    font-weight: var(--df-text-bold-weight)
}

.link-undecorated {
    font-weight: var(--df-text-normal-weight);
    text-decoration: none;
    transition: none;

    &:focus,
    &:hover {
        text-decoration-line: underline
    }
}

.list-compact li {
    line-height: 1;
    margin-bottom: 0 !important
}

.list-inline {
    gap: round(var(--df-gap-small) / 2, 1px);
    margin: var(--df-gap-small) 0;
    max-width: unset;
    flex-wrap: wrap;
    display: flex
}

.list-inline,
.list-unstyled {
    list-style-type: none
}

.list-unstyled {
    margin: var(--df-gap-small) 0 round(var(--df-gap-small) / 2, 1px) 0;

    & li {
        margin: 0 0 round(var(--df-gap-small) / 2, 1px) 0
    }
}

.alert {

    &+h1,
    &+h2 {
        margin-top: 1em
    }

    &+h3,
    &+h4,
    &+h5,
    &+h6 {
        margin-top: 1.5em
    }
}

.enormous {
    font-size: var(--df-text-size-enormous)
}

.large {
    font-size: var(--df-text-size-large)
}

.secondary {
    color: var(--df-secondary-text-color)
}

.small {
    font-size: var(--df-text-size-small)
}

#content {
    grid-area: content;
    container: content/inline-size
}

#content>.alert:first-child,
#content>.card:first-child,
#content>.row:first-child,
#sidebar>.card:first-child {
    margin-top: 0
}

#content>.alert:last-child,
#content>.card:last-child,
#content>.row:last-child {
    margin-bottom: 0
}

#sidebar {
    grid-area: sidebar;
    container: sidebar/inline-size
}

#wrapper {
    max-width: calc(var(--df-line-length) + var(--df-gap-grid) + var(--df-width-sidebar));
    margin: 0 auto;
    container-type: inline-size
}

@media (width>=45em) {
    #layout:has(#sidebar) {
        gap: var(--df-gap-grid);
        grid-template-areas: "content sidebar";
        grid-template-columns: auto var(--df-width-sidebar);
        display: grid
    }

    #sidebar {
        top: var(--df-gap-grid);
        align-self: start;
        position: sticky
    }
}

@media (width>=45em) {
    #newsidebar {
        gap: var(--df-gap-grid);
        grid-template-areas: "content sidebar";
        grid-template-columns: auto var(--df-width-sidebar);
        display: grid
    }

    #newsidebar {
        top: var(--df-gap-grid);
        align-self: start;
        position: sticky
    }
}

.col,
.col-auto,
.col-auto-small,
.col-sidebar,
.col-small,
.col-wide {
    flex: 1 0 100%
}

.row {
    gap: var(--df-gap-grid);
    margin: var(--df-gap-grid) 0;
    flex-wrap: wrap;
    justify-content: space-between;
    display: flex;

    &>.card {
        flex: 1 0 100%;
        margin: 0
    }
}

@container (width>=35em) {
    .col {
        flex: 1 0
    }

    .col-auto {
        width: auto
    }

    .col-auto,
    .col-sidebar {
        flex: none
    }

    .col-auto-small {
        flex: none;
        width: auto
    }

    .col-small {
        flex: 1 0
    }

    .col-sidebar {
        width: var(--df-width-sidebar)
    }

    .col-wide {
        flex: 2 0
    }

    .row>.card {
        flex: 1 0
    }
}

footer {
    --df-footer-grid-icon-size: 1.2em;

    & a:focus,
    & a:hover {
        & svg {
            color: var(--df-accent-color)
        }
    }

    & button {
        background-color: var(--df-footer-text-color);
        margin-top: 0
    }

    & h2 {
        font-size: var(--df-text-size-small);
        text-transform: uppercase;
        position: relative;
        top: .1rem;

        &:has(a) {
            padding: 0
        }

        & a {
            width: fit-content;
            display: block
        }
    }

    & h2,
    & small,
    & .grid svg {
        color: var(--df-footer-text-color)
    }

    & h2,
    & small {
        margin-bottom: 0 !important
    }

    & h2,
    & h2 .link-undecorated {
        font-weight: var(--df-text-normal-weight)
    }

    & h2,
    & h2 a {
        padding: round(var(--df-gap-small) / 4, 1px) 0
    }

    & h2,
    & .list-inline,
    & .list-inline li {
        margin: 0
    }

    & h2+small a,
    & .list-inline a {
        padding: round((24px - var(--df-footer-grid-icon-size)) / 2, 1px);
        display: inline-flex
    }

    & input {
        display: inline-block
    }

    & small,
    & .list-inline {
        margin-top: 0
    }

    & .col-auto-small,
    & .col-small {
        flex: 1 0 100%
    }

    & .grid {
        align-items: center;
        gap: 0 var(--df-gap-small);
        grid-template-columns: auto 1fr;
        line-height: 1;

        & svg {
            height: round(var(--df-footer-grid-icon-size), 1px);
            vertical-align: middle;
            width: round(1.2em, 1px);
            display: inline-block
        }
    }

    & .grid {
        margin: 0
    }

    & .list-inline {
        gap: 0
    }

    & .row {
        gap: var(--df-gap-small);
        margin: 0
    }
}

#copyright {
    margin-top: var(--df-gap-small);
    display: block
}

@container footer (width>=30em) {
    footer {
        & .col-auto-small {
            flex: none;
            width: auto
        }

        & .col-small {
            flex: 1 0
        }
    }

    #copyright {
        text-align: end
    }
}

.grid {
    gap: var(--df-gap-grid);
    margin: var(--df-gap-grid) 0;
    display: grid;

    & .card {
        margin: 0
    }
}

@container (width>=35em) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

header svg {
    width: round(1.5em, 1px);
    height: round(1.5em, 1px);
    margin: round(16px - .75em, 1px) 0
}

#brand {
    font-family: var(--df-font-heading);
    text-transform: uppercase;
    flex-wrap: wrap;
    align-items: center;
    gap: .5ch;
    text-decoration: none;
    transition: none;
    display: inline-flex;

    &:focus,
    &:hover {
        text-decoration: underline
    }

    & img {
        border-radius: 50%;
        height: 32px;
        margin: 0;
        display: inline
    }
}

#search-form {
    gap: round(var(--df-gap-small) / 2, 1px);
    text-align: unset;
    margin: 0;
    display: flex;

    & button {
        flex: none;
        align-self: center;
        width: auto
    }
}

#search-query {
    flex: 1 0 auto;
    width: auto;
    max-width: 15em;
    margin: 0
}

#about {
    container: about/inline-size;

    & .col-auto-small {
        text-align: center;
        order: 1
    }

    & .col-small {
        order: 2
    }

    & .row {
        gap: var(--df-gap-small)
    }
}

@container about (width>=calc(12.5em + 1rem + 132px)) {
    #about {
        & .col-auto-small {
            flex: none;
            order: 2;
            width: auto
        }

        & .col-small {
            flex: 1 0;
            order: 1
        }
    }
}

.alert {
    background-color: var(--df-alert-background-color);
    border: oklch(from var(--df-alert-background-color) calc(l - var(--df-border-adjust)) c h) solid var(--df-border-width);
    border-radius: var(--df-border-radius);
    align-items: start;
    gap: var(--df-gap-small);
    margin: var(--df-gap-small) 0;
    padding: round(var(--df-gap-small) / 2, 1px);
    flex-wrap: wrap;
    display: flex;

    &>:first-child {
        margin-top: 0
    }

    &>:last-child {
        margin-bottom: 0
    }

    &>p {
        margin: 0
    }

    &>svg {
        flex: none;
        width: 2em;
        height: 2em
    }

    &+table {
        margin-top: 0
    }

    & div,
    & p {
        flex: 1 0
    }

    & div h1,
    & div h2 {
        font-size: var(--df-text-size-huge);
        margin-bottom: .25em;
        line-height: 1
    }

    & div h1,
    & div h2,
    & div p {
        margin-top: 0
    }

    small+& {
        margin-top: var(--df-gap-small)
    }
}

.alert-error {
    --df-alert-background-color: var(--df-error-background-color);
    color: var(--df-white-color);

    & a {
        color: var(--df-white-color)
    }
}

.alert-info {
    --df-alert-background-color: var(--df-info-background-color);

    &>svg {
        color: var(--df-info-color)
    }
}

.alert-info,
.alert-success,
.alert-warning {
    color: var(--df-text-color-light);

    & a {
        color: var(--df-text-color-light)
    }
}

.alert-secondary {
    --df-alert-background-color: var(--df-card-secondary-background-color)
}

.alert-small {
    gap: round(var(--df-gap-small) / 2, 1px);

    &>svg {
        width: 1rem;
        height: 1rem;
        top: .05em
    }

    & p {
        font-size: var(--df-text-size-small)
    }
}

.alert-success {
    --df-alert-background-color: var(--df-success-background-color);

    &>svg {
        color: var(--df-success-color)
    }
}

.alert-warning {
    --df-alert-background-color: var(--df-warning-background-color);

    &>svg {
        color: var(--df-warning-color)
    }
}

.bi-info-square {
    color: var(--df-warning-color);
    flex: none;
    width: 2em;
    height: 2em;

}

@media (width>=700px) {
    .alert {
        padding: var(--df-gap-small)
    }
}

.card {
    background-color: var(--df-card-background-color);
    border: oklch(from var(--df-card-background-color) calc(l - var(--df-border-adjust)) c h) solid var(--df-border-width);
    border-radius: var(--df-border-radius);
    margin: var(--df-gap-small) 0;
    padding: round(var(--df-gap-small) / 2, 1px);
    overflow: hidden;

    &>:first-child,
    &>.hidden+p {
        margin-top: 0;

        & img {
            margin-top: 0
        }
    }

    &>:last-child {
        margin-bottom: 0
    }

    & picture+h1 {
        margin-top: var(--df-gap-small)
    }
}

.card-image-crop {
    border-radius: var(--df-border-radius-small);
    max-height: 300px;
    overflow: clip;

    & img {
        width: 100%;
        height: auto
    }
}

.card-secondary {
    --df-card-background-color: var(--df-card-secondary-background-color)
}

@media (width>=700px) {
    .card {
        padding: var(--df-gap-small)
    }
}

#donate-label {
    line-height: 1
}

.card-blog {
    --df-card-background-color: var(--df-blog-background-color)
}

.card-blog,
.card-info,
.card-web-developer {
    color: var(--df-text-color-light);

    & a:not(.button) {
        color: var(--df-text-color-light)
    }
}

.card-download {
    align-items: center;
    gap: var(--df-gap-small);
    flex-wrap: wrap;
    display: flex;
    container: card-download/inline-size;

    & h2 {
        font-size: var(--df-text-size-large);
        line-height: 1.1
    }

    & h2,
    & p {
        margin: 0
    }

    & .button,
    & .logo {
        flex: none
    }

    & .description {
        flex: 1 0
    }

    & .logo {
        color: var(--df-download-logo-color);
        display: none
    }
}

.card-info {
    --df-card-background-color: var(--df-info-background-color)
}

.card-web-developer {
    --df-card-background-color: var(--df-web-developer-background-color);

    & hr {
        background-color: oklch(from var(--df-card-background-color) calc(l - var(--df-border-adjust)) c h);
        margin: var(--df-gap-small) var(--df-gap-large)
    }

    & .secondary {
        color: var(--df-secondary-text-color-color-background)
    }
}

@container card-download (width>=30em) {
    .card-download .logo {
        width: 3em;
        height: 3em;
        margin: 0;
        display: inline
    }

    .flex-break {
        flex: none
    }
}

@container card-download (width>=35em) {
    .card-download .logo {
        width: 4em;
        height: 4em
    }
}

.card-buy-me-a-coffee {
    --df-card-background-color: var(--df-buy-me-a-coffee-background-color)
}

.card-buy-me-a-coffee,
.card-donate,
.card-ko-fi,
.card-paypal {
    color: var(--df-text-color-light);

    & h2 {
        line-height: 1
    }

    & a:not(.button) {
        color: var(--df-text-color-light)
    }
}

.card-donate {
    --df-card-background-color: var(--df-success-background-color)
}

.card-ko-fi {
    --df-card-background-color: var(--df-ko-fi-background-color)
}

.card-paypal {
    --df-card-background-color: var(--df-paypal-background-color)
}

button,
.button {
    background-color: var(--df-button-background-color);
    color: var(--df-button-text-color);
    padding: round(var(--df-gap-small) / 2, 1px) round(var(--df-gap-small) / 1.25, 1px);
    border-radius: 2em;

    &:focus,
    &:hover {
        background-color: var(--df-accent-color);
        color: var(--df-button-text-color-hover)
    }

    &:active {
        position: relative;
        top: 1px
    }
}

.button {
    font-weight: var(--df-text-normal-weight);
    text-decoration: none;
    display: inline-block;

    & img,
    & svg {
        vertical-align: text-bottom
    }
}

.button-dark {
    background-color: var(--df-button-background-color-light);
    color: var(--df-button-text-color-light)
}

.icon {
    vertical-align: middle;
    align-items: center;
    gap: .5ch;
    line-height: 1;
    display: inline-flex
}

.rating {
    gap: 0;
    position: relative;
    top: round(-.1em, 1px)
}

nav {
    &:not(.pagination) {

        & li,
        & .active {

            & a:focus,
            & a:hover {
                border-bottom-color: var(--df-accent-color)
            }
        }

        & li a,
        & .active:has(>:not(a)) {
            border-bottom: transparent solid calc(var(--df-border-width) * 2)
        }

        & .active a,
        & .active:has(>:not(a)) {
            border-bottom-color: var(--df-background-color-inverse)
        }

        & .active:has(>:not(a)) {
            font-weight: var(--df-text-bold-weight)
        }
    }

    & .list-inline {
        column-gap: var(--df-gap-small)
    }
}

#sub-nav {
    font-size: var(--df-text-size-small)
}

#referral-airalo,
#referral-bunny-net,
#referral-monarch {
    --df-card-background-color: var(--dfo-mocha-peach)
}

#referral-backblaze,
#referral-hetzner {
    --df-card-background-color: var(--dfo-mocha-red)
}

#referral-digital-ocean,
#referral-fastmail,
#referral-visible {
    --df-card-background-color: var(--dfo-mocha-blue)
}

#referral-litter-robot {
    --df-card-background-color: var(--dfo-mocha-yellow)
}

#referral-omg-lol {
    --df-card-background-color: var(--dfo-mocha-pink)
}

#referral-readwise {
    --df-card-background-color: var(--df-card-background-color-light)
}

.referral {
    color: var(--df-text-color-light);

    & code {
        color: var(--df-text-color);
        font-size: var(--df-text-size-small)
    }

    & h2 {
        margin-bottom: 0;
        line-height: 1
    }

    & .small {
        margin-top: 0
    }
}

#sponsor {
    --df-card-background-color: var(--df-sponsor-background-color);
    padding: round(var(--df-gap-small) / 2, 1px);
    container: sponsor/inline-size;

    & a {
        color: var(--df-text-color-light);
        font-weight: var(--df-text-normal-weight)
    }

    & .carbon-img {
        background-color: unset;
        flex: none
    }

    & .carbon-poweredby {
        color: var(--df-secondary-text-color-color-background);
        font-size: var(--df-text-size-tiny);
        margin: var(--df-gap-small) 0 0 auto;
        text-transform: uppercase;
        width: fit-content;
        text-decoration: none;
        transition: none;
        display: block;

        &:focus,
        &:hover {
            text-decoration: underline
        }
    }

    & .carbon-text {
        flex: 1 0
    }

    & .carbon-wrap {
        align-items: flex-start;
        gap: round(var(--df-gap-small) / 2, 1px);
        flex-wrap: wrap;
        display: flex
    }
}

@media (width>=700px) {
    #sponsor {
        padding: var(--df-gap-small)
    }
}

@container sponsor (width<=340px) {
    #sponsor .carbon-text {
        flex: 1 0 100%
    }
}

@container (width>=35em) {
    #layout:not(:has(#sidebar)) #info {
        width: var(--df-width-sidebar);
        flex: none;

    }
}

@container (width>=35em) {
    #info {
        width: var(--df-width-sidebar);
        flex: none
    }
}

@container (width>=35em) {
    #info {
        width: var(--df-width-sidebar);
        flex: none
    }
}

@container (width>=35em) {
    #info {
        width: var(--df-width-sidebar);
        flex: none
    }
}

#info {
    --df-card-background-color: var(--df-highlight-background-color);
    padding: round(var(--df-gap-small) / 2, 1px);
    container: sponsor/inline-size;
    align-items: start;
    gap: var(--df-gap-small);
    padding: round(var(--df-gap-small) / 2, 1px);
    display: flex;

    & a {
        color: var(--df-text-color-light);
        font-weight: var(--df-text-normal-weight)
    }

    & .carbon-img {
        background-color: unset;
        flex: none
    }

    & .carbon-poweredby {
        color: var(--df-secondary-text-color-color-background);
        font-size: var(--df-text-size-tiny);
        margin: var(--df-gap-small) 0 0 auto;
        text-transform: uppercase;
        width: fit-content;
        text-decoration: none;
        transition: none;
        display: block;

        &:focus,
        &:hover {
            text-decoration: underline
        }
    }

    & .carbon-text {
        flex: 1 0
    }

    & .carbon-wrap {
        align-items: flex-start;
        gap: round(var(--df-gap-small) / 2, 1px);
        flex-wrap: wrap;
        display: flex;
    }
}

.tag {
    background-color: var(--df-tag-background-color);
    border: var(--df-tag-border-color) solid var(--df-border-width);
    border-radius: var(--df-border-radius-small);
    color: var(--df-tag-text-color);
    font-size: var(--df-text-size-small);
    font-weight: var(--df-text-normal-weight);
    padding: round(var(--df-gap-small) / 4, 1px);
    text-decoration: none
}

a.tag {

    &:focus,
    &:hover {
        --df-tag-background-color: var(--df-accent-color);
        --df-tag-border-color: var(--df-accent-color);
        color: var(--df-text-color-dark)
    }
}

small.tag {
    box-shadow: none;
    font-size: var(--df-text-size-tiny);
    position: relative;
    top: -.1rem
}

.tags {
    gap: round(var(--df-gap-small) / 2, 1px);
    flex-wrap: wrap;
    display: inline-flex
}

#languages {
    padding: 5%;
}

#source {

    & p,
    & ul {
        margin-bottom: round(var(--df-gap-small) / 2, 1px)
    }

    & h2 {
        font-size: var(--df-text-size-larger)
    }

    & small+small {
        margin-left: var(--df-gap-small)
    }

    & ul {
        gap: round(var(--df-gap-small) / 2, 1px);
        margin-top: 0
    }
}

#user-agent-xml {
    background-color: var(--df-secondary-background-color);
    font-family: var(--df-font-monospace);
    font-size: var(--df-text-size-small);
    max-width: 100%;
    min-height: 11em
}

.completed {
    text-decoration: line-through
}

.help .link-undecorated {
    font-weight: var(--df-text-bold-weight)
}

.help,
.history,
.issues,
.to-do {
    & :target {
        background-color: var(--df-highlight-background-color);
        border: oklch(from var(--df-highlight-background-color) calc(l - var(--df-border-adjust)) c h) solid var(--df-border-width);
        border-radius: var(--df-border-radius-small);
        color: var(--df-text-color-light);
        font-size: var(--df-text-size-larger);
        padding: calc(var(--df-gap-small) / 2);

        & a:focus,
        & a:hover {
            background-color: unset;
            color: var(--df-text-color-light);
            text-decoration: none
        }

        & .tag {
            top: -.2rem
        }
    }
}

.issues,
.to-do {
    & li {
        padding: round(var(--df-gap-small) / 8, 1px) 0
    }

    & .link-undecorated:focus,
    & .link-undecorated:hover {
        color: unset;
        text-decoration: none
    }
}