:root {
  --transparent: transparent;
  --black: #000000;
  --white: #ffffff;

  --red-cool-5: #f8eff1;
  --red-cool-10: #f3e1e4;
  --red-cool-20: #ecbec6;
  --red-cool-30: #e09aa6;
  --red-cool-40: #e16b80;
  --red-cool-50: #cd425b;
  --red-cool-60: #9e394b;
  --red-cool-70: #68363f;
  --red-cool-80: #40282c;
  --red-cool-90: #1e1517;
  --red-cool-5v: #fff2f5;
  --red-cool-10v: #f8dfe2;
  --red-cool-20v: #f8b9c5;
  --red-cool-30v: #fd8ba0;
  --red-cool-40v: #f45d79;
  --red-cool-50v: #e41d3d;
  --red-cool-60v: #b21d38;
  --red-cool-70v: #822133;
  --red-cool-80v: #4f1c24;

  --red-5: #f9eeee;
  --red-10: #f8e1de;
  --red-20: #f7bbb1;
  --red-30: #f2938c;
  --red-40: #e9695f;
  --red-50: #d83933;
  --red-60: #a23737;
  --red-70: #6f3331;
  --red-80: #3e2927;
  --red-90: #1b1616;
  --red-5v: #fff3f2;
  --red-10v: #fde0db;
  --red-20v: #fdb8ae;
  --red-30v: #ff8d7b;
  --red-40v: #fb5a47;
  --red-50v: #e52207;
  --red-60v: #b50909;
  --red-70v: #8b0a03;
  --red-80v: #5c1111;

  --red-warm-5: #f6efea;
  --red-warm-10: #f4e3db;
  --red-warm-20: #ecc0a7;
  --red-warm-30: #dca081;
  --red-warm-40: #d27a56;
  --red-warm-50: #c3512c;
  --red-warm-60: #805039;
  --red-warm-70: #524236;
  --red-warm-80: #332d29;
  --red-warm-90: #1f1c18;
  --red-warm-5v: #fff5ee;
  --red-warm-10v: #fce1d4;
  --red-warm-20v: #f6bd9c;
  --red-warm-30v: #f39268;
  --red-warm-40v: #ef5e25;
  --red-warm-50v: #d54309;
  --red-warm-60v: #9c3d10;
  --red-warm-70v: #63340f;
  --red-warm-80v: #3e2a1e;

  --orange-warm-5: #faeee5;
  --orange-warm-10: #fbe0d0;
  --orange-warm-20: #f7bca2;
  --orange-warm-30: #f3966d;
  --orange-warm-40: #e17141;
  --orange-warm-50: #bd5727;
  --orange-warm-60: #914734;
  --orange-warm-70: #633a32;
  --orange-warm-80: #3d2925;
  --orange-warm-90: #1c1615;
  --orange-warm-5v: #fff3ea;
  --orange-warm-10v: #ffe2d1;
  --orange-warm-20v: #fbbaa7;
  --orange-warm-30v: #fc906d;
  --orange-warm-40v: #ff580a;
  --orange-warm-50v: #cf4900;
  --orange-warm-60v: #a72f10;
  --orange-warm-70v: #782312;
  --orange-warm-80v: #3d231d;

  --orange-5: #f6efe9;
  --orange-10: #f2e4d4;
  --orange-20: #f3bf90;
  --orange-30: #f09860;
  --orange-40: #dd7533;
  --orange-50: #a86437;
  --orange-60: #775540;
  --orange-70: #524236;
  --orange-80: #332d27;
  --orange-90: #1b1614;
  --orange-5v: #fef2e4;
  --orange-10v: #fce2c5;
  --orange-20v: #ffbc78;
  --orange-30v: #fa9441;
  --orange-40v: #e66f0e;
  --orange-50v: #c05600;
  --orange-60v: #8c471c;
  --orange-70v: #5f3617;
  --orange-80v: #352313;

  --gold-5: #f5f0e6;
  --gold-10: #f1e5cd;
  --gold-20: #dec69a;
  --gold-30: #c7a97b;
  --gold-40: #ad8b65;
  --gold-50: #8e704f;
  --gold-60: #6b5947;
  --gold-70: #4d4438;
  --gold-80: #322d26;
  --gold-90: #191714;
  --gold-5v: #fef0c8;
  --gold-10v: #ffe396;
  --gold-20v: #ffbe2e;
  --gold-30v: #e5a000;
  --gold-40v: #c2850c;
  --gold-50v: #936f38;
  --gold-60v: #7a591a;
  --gold-70v: #5c410a;
  --gold-80v: #3b2b15;

  --yellow-5: #faf3d1;
  --yellow-10: #f5e6af;
  --yellow-20: #e6c74c;
  --yellow-30: #c9ab48;
  --yellow-40: #a88f48;
  --yellow-50: #8a7237;
  --yellow-60: #6b5a39;
  --yellow-70: #504332;
  --yellow-80: #332d27;
  --yellow-90: #1a1614;
  --yellow-5v: #fff5c2;
  --yellow-10v: #fee685;
  --yellow-20v: #face00;
  --yellow-30v: #ddaa01;
  --yellow-40v: #b38c00;
  --yellow-50v: #947100;
  --yellow-60v: #776017;
  --yellow-70v: #5c4809;
  --yellow-80v: #422d19;

  --green-warm-5: #f1f4d7;
  --green-warm-10: #e7eab7;
  --green-warm-20: #cbd17a;
  --green-warm-30: #a6b557;
  --green-warm-40: #8a984b;
  --green-warm-50: #6f7a41;
  --green-warm-60: #5a5f38;
  --green-warm-70: #45472f;
  --green-warm-80: #2d2f21;
  --green-warm-90: #171712;
  --green-warm-5v: #f5fbc1;
  --green-warm-10v: #e7f434;
  --green-warm-20v: #c5d30a;
  --green-warm-30v: #a3b72c;
  --green-warm-40v: #7e9c1d;
  --green-warm-50v: #6a7d00;
  --green-warm-60v: #5a6613;
  --green-warm-70v: #4b4e10;
  --green-warm-80v: #38380b;

  --green-5: #eaf4dd;
  --green-10: #dfeacd;
  --green-20: #b8d293;
  --green-30: #9bb672;
  --green-40: #7d9b4e;
  --green-50: #607f35;
  --green-60: #4c6424;
  --green-70: #3c4a29;
  --green-80: #293021;
  --green-90: #161814;
  --green-5v: #ddf9c7;
  --green-10v: #c5ee93;
  --green-20v: #98d035;
  --green-30v: #7fb135;
  --green-40v: #719f2a;
  --green-50v: #538200;
  --green-60v: #466c04;
  --green-70v: #2f4a0b;
  --green-80v: #243413;

  --green-cool-5: #ecf3ec;
  --green-cool-10: #dbebde;
  --green-cool-20: #b4d0b9;
  --green-cool-30: #86b98e;
  --green-cool-40: #5e9f69;
  --green-cool-50: #4d8055;
  --green-cool-60: #446443;
  --green-cool-70: #37493b;
  --green-cool-80: #28312a;
  --green-cool-90: #1a1f1a;
  --green-cool-5v: #e3f5e1;
  --green-cool-10v: #b7f5bd;
  --green-cool-20v: #70e17b;
  --green-cool-30v: #21c834;
  --green-cool-40v: #00a91c;
  --green-cool-50v: #008817;
  --green-cool-60v: #216e1f;
  --green-cool-70v: #154c21;
  --green-cool-80v: #19311e;

  --mint-5: #dbf6ed;
  --mint-10: #c7efe2;
  --mint-20: #92d9bb;
  --mint-30: #5abf95;
  --mint-40: #34a37e;
  --mint-50: #2e8367;
  --mint-60: #286846;
  --mint-70: #204e34;
  --mint-80: #193324;
  --mint-90: #0d1a12;
  --mint-5v: #c9fbeb;
  --mint-10v: #83fcd4;
  --mint-20v: #0ceda6;
  --mint-30v: #04c585;
  --mint-40v: #00a871;
  --mint-50v: #008659;
  --mint-60v: #146947;
  --mint-70v: #0c4e29;
  --mint-80v: #0d351e;

  --mint-cool-5: #e0f7f6;
  --mint-cool-10: #c4eeeb;
  --mint-cool-20: #9bd4cf;
  --mint-cool-30: #6fbab3;
  --mint-cool-40: #4f9e99;
  --mint-cool-50: #40807e;
  --mint-cool-60: #376462;
  --mint-cool-70: #2a4b45;
  --mint-cool-80: #203131;
  --mint-cool-90: #111818;
  --mint-cool-5v: #d5fbf3;
  --mint-cool-10v: #7efbe1;
  --mint-cool-20v: #29e1cb;
  --mint-cool-30v: #1dc2ae;
  --mint-cool-40v: #00a398;
  --mint-cool-50v: #008480;
  --mint-cool-60v: #0f6460;
  --mint-cool-70v: #0b4b3f;
  --mint-cool-80v: #123131;

  --cyan-5: #e7f6f8;
  --cyan-10: #ccecf2;
  --cyan-20: #99deea;
  --cyan-30: #5dc0d1;
  --cyan-40: #449dac;
  --cyan-50: #168092;
  --cyan-60: #2a646d;
  --cyan-70: #2c4a4e;
  --cyan-80: #203133;
  --cyan-90: #111819;
  --cyan-5v: #e5faff;
  --cyan-10v: #a8f2ff;
  --cyan-20v: #52daf2;
  --cyan-30v: #00bde3;
  --cyan-40v: #009ec1;
  --cyan-50v: #0081a1;
  --cyan-60v: #00687d;
  --cyan-70v: #0e4f5c;
  --cyan-80v: #093b44;

  --blue-cool-5: #e7f2f5;
  --blue-cool-10: #dae9ee;
  --blue-cool-20: #adcfdc;
  --blue-cool-30: #82b4c9;
  --blue-cool-40: #6499af;
  --blue-cool-50: #3a7d95;
  --blue-cool-60: #2e6276;
  --blue-cool-70: #224a58;
  --blue-cool-80: #14333d;
  --blue-cool-90: #0f191c;
  --blue-cool-5v: #e1f3f8;
  --blue-cool-10v: #c3ebfa;
  --blue-cool-20v: #97d4ea;
  --blue-cool-30v: #59b9de;
  --blue-cool-40v: #28a0cb;
  --blue-cool-50v: #0d7ea2;
  --blue-cool-60v: #07648d;
  --blue-cool-70v: #074b69;
  --blue-cool-80v: #002d3f;

  --blue-5: #eff6fb;
  --blue-10: #d9e8f6;
  --blue-20: #aacdec;
  --blue-30: #73b3e7;
  --blue-40: #4f97d1;
  --blue-50: #2378c3;
  --blue-60: #2c608a;
  --blue-70: #274863;
  --blue-80: #1f303e;
  --blue-90: #11181d;
  --blue-5v: #e8f5ff;
  --blue-10v: #cfe8ff;
  --blue-20v: #a1d3ff;
  --blue-30v: #58b4ff;
  --blue-40v: #2491ff;
  --blue-50v: #0076d6;
  --blue-60v: #005ea2;
  --blue-70v: #0b4778;
  --blue-80v: #112f4e;

  --blue-warm-5: #ecf1f7;
  --blue-warm-10: #e1e7f1;
  --blue-warm-20: #bbcae4;
  --blue-warm-30: #98afd2;
  --blue-warm-40: #7292c7;
  --blue-warm-50: #4a77b4;
  --blue-warm-60: #345d96;
  --blue-warm-70: #2f4668;
  --blue-warm-80: #252f3e;
  --blue-warm-90: #13171f;
  --blue-warm-5v: #edf5ff;
  --blue-warm-10v: #d4e5ff;
  --blue-warm-20v: #adcdff;
  --blue-warm-30v: #81aefc;
  --blue-warm-40v: #5994f6;
  --blue-warm-50v: #2672de;
  --blue-warm-60v: #0050d8;
  --blue-warm-70v: #1a4480;
  --blue-warm-80v: #162e51;

  --indigo-cool-5: #eef0f9;
  --indigo-cool-10: #e1e6f9;
  --indigo-cool-20: #bbc8f5;
  --indigo-cool-30: #96abee;
  --indigo-cool-40: #6b8ee8;
  --indigo-cool-50: #496fd8;
  --indigo-cool-60: #3f57a6;
  --indigo-cool-70: #374274;
  --indigo-cool-80: #292d42;
  --indigo-cool-90: #151622;
  --indigo-cool-5v: #edf0ff;
  --indigo-cool-10v: #dee5ff;
  --indigo-cool-20v: #b8c8ff;
  --indigo-cool-30v: #94adff;
  --indigo-cool-40v: #628ef4;
  --indigo-cool-50v: #4866ff;
  --indigo-cool-60v: #3e4ded;
  --indigo-cool-70v: #222fbf;
  --indigo-cool-80v: #1b2b85;

  --indigo-5: #efeff8;
  --indigo-10: #e5e4fa;
  --indigo-20: #c5c5f3;
  --indigo-30: #a5a8eb;
  --indigo-40: #8889db;
  --indigo-50: #676cc8;
  --indigo-60: #4d52af;
  --indigo-70: #3d4076;
  --indigo-80: #2b2c40;
  --indigo-90: #16171f;
  --indigo-5v: #f0f0ff;
  --indigo-10v: #e0e0ff;
  --indigo-20v: #ccceff;
  --indigo-30v: #a3a7fa;
  --indigo-40v: #8289ff;
  --indigo-50v: #656bd7;
  --indigo-60v: #4a50c4;
  --indigo-70v: #3333a3;
  --indigo-80v: #212463;

  --indigo-warm-5: #f1eff7;
  --indigo-warm-10: #e7e3fa;
  --indigo-warm-20: #cbc4f2;
  --indigo-warm-30: #afa5e8;
  --indigo-warm-40: #9287d8;
  --indigo-warm-50: #7665d1;
  --indigo-warm-60: #5e519e;
  --indigo-warm-70: #453c7b;
  --indigo-warm-80: #2e2c40;
  --indigo-warm-90: #18161d;
  --indigo-warm-5v: #f5f2ff;
  --indigo-warm-10v: #e4deff;
  --indigo-warm-20v: #cfc4fd;
  --indigo-warm-30v: #b69fff;
  --indigo-warm-40v: #967efb;
  --indigo-warm-50v: #745fe9;
  --indigo-warm-60v: #5942d2;
  --indigo-warm-70v: #3d2c9d;
  --indigo-warm-80v: #261f5b;

  --violet-5: #f4f1f9;
  --violet-10: #ebe3f9;
  --violet-20: #d0c3e9;
  --violet-30: #b8a2e3;
  --violet-40: #9d84d2;
  --violet-50: #8168b3;
  --violet-60: #665190;
  --violet-70: #4c3d69;
  --violet-80: #312b3f;
  --violet-90: #18161d;
  --violet-5v: #f7f2ff;
  --violet-10v: #ede3ff;
  --violet-20v: #d5bfff;
  --violet-30v: #c39deb;
  --violet-40v: #ad79e9;
  --violet-50v: #9355dc;
  --violet-60v: #783cb9;
  --violet-70v: #54278f;
  --violet-80v: #39215e;

  --violet-warm-5: #f8f0f9;
  --violet-warm-10: #f6dff8;
  --violet-warm-20: #e2bee4;
  --violet-warm-30: #d29ad8;
  --violet-warm-40: #bf77c8;
  --violet-warm-50: #b04abd;
  --violet-warm-60: #864381;
  --violet-warm-70: #5c395a;
  --violet-warm-80: #382936;
  --violet-warm-90: #1b151b;
  --violet-warm-5v: #fef2ff;
  --violet-warm-10v: #fbdcff;
  --violet-warm-20v: #f4b2ff;
  --violet-warm-30v: #ee83ff;
  --violet-warm-40v: #d85bef;
  --violet-warm-50v: #be32d0;
  --violet-warm-60v: #93348c;
  --violet-warm-70v: #711e6c;
  --violet-warm-80v: #481441;

  --magenta-5: #f9f0f2;
  --magenta-10: #f6e1e8;
  --magenta-20: #f0bbcc;
  --magenta-30: #e895b3;
  --magenta-40: #e0699f;
  --magenta-50: #c84281;
  --magenta-60: #8b4566;
  --magenta-70: #66364b;
  --magenta-80: #402731;
  --magenta-90: #1b1617;
  --magenta-5v: #fff2f5;
  --magenta-10v: #ffddea;
  --magenta-20v: #ffb4cf;
  --magenta-30v: #ff87b2;
  --magenta-40v: #fd4496;
  --magenta-50v: #d72d79;
  --magenta-60v: #ab2165;
  --magenta-70v: #731f44;
  --magenta-80v: #4f172e;

  --gray-cool-1: #fbfcfd;
  --gray-cool-2: #f7f9fa;
  --gray-cool-3: #f5f6f7;
  --gray-cool-4: #f1f3f6;
  --gray-cool-5: #edeff0;
  --gray-cool-10: #dfe1e2;
  --gray-cool-20: #c6cace;
  --gray-cool-30: #a9aeb1;
  --gray-cool-40: #8d9297;
  --gray-cool-50: #71767a;
  --gray-cool-60: #565c65;
  --gray-cool-70: #3d4551;
  --gray-cool-80: #2d2e2f;
  --gray-cool-90: #1c1d1f;

  --gray-1: #fcfcfc;
  --gray-2: #f9f9f9;
  --gray-3: #f6f6f6;
  --gray-4: #f3f3f3;
  --gray-5: #f0f0f0;
  --gray-10: #e6e6e6;
  --gray-20: #c9c9c9;
  --gray-30: #adadad;
  --gray-40: #919191;
  --gray-50: #757575;
  --gray-60: #5c5c5c;
  --gray-70: #454545;
  --gray-80: #2e2e2e;
  --gray-90: #1b1b1b;
  --gray-100: #000000;

  --gray-warm-1: #fcfcfb;
  --gray-warm-2: #f9f9f7;
  --gray-warm-3: #f6f6f2;
  --gray-warm-4: #f5f5f0;
  --gray-warm-5: #f0f0ec;
  --gray-warm-10: #e6e6e2;
  --gray-warm-20: #cac9c0;
  --gray-warm-30: #afaea2;
  --gray-warm-40: #929285;
  --gray-warm-50: #76766a;
  --gray-warm-60: #5d5d52;
  --gray-warm-70: #454540;
  --gray-warm-80: #2e2e2a;
  --gray-warm-90: rgb(23, 23, 22);

  --white-transparent-5: rgba(255, 255, 255, 0.01);
  --white-transparent-10: rgba(255, 255, 255, 0.1);
  --white-transparent-20: rgba(255, 255, 255, 0.2);
  --white-transparent-30: rgba(255, 255, 255, 0.3);
  --white-transparent-40: rgba(255, 255, 255, 0.4);
  --white-transparent-50: rgba(255, 255, 255, 0.5);
  --white-transparent-60: rgba(255, 255, 255, 0.6);
  --white-transparent-70: rgba(255, 255, 255, 0.7);
  --white-transparent-80: rgba(255, 255, 255, 0.8);
  --white-transparent-90: rgba(255, 255, 255, 0.9);

  --black-transparent-5: rgba(0, 0, 0, 0.01);
  --black-transparent-10: rgba(0, 0, 0, 0.1);
  --black-transparent-20: rgba(0, 0, 0, 0.2);
  --black-transparent-30: rgba(0, 0, 0, 0.3);
  --black-transparent-40: rgba(0, 0, 0, 0.4);
  --black-transparent-50: rgba(0, 0, 0, 0.5);
  --black-transparent-60: rgba(0, 0, 0, 0.6);
  --black-transparent-70: rgba(0, 0, 0, 0.7);
  --black-transparent-80: rgba(0, 0, 0, 0.8);
  --black-transparent-90: rgba(0, 0, 0, 0.9);

  --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --cubic-bezier: cubic-bezier(0.25, 1, 0.5, 1); /*(.25, .5, .5, 1);*/
  --elevation-0: 0px 0px 0px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 0px rgba(0, 0, 0, 0.07), 0px 0px 0px 0px rgba(0, 0, 0, 0.06);
  --elevation-1: 0px 2px 1px -1px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(0, 0, 0, 0.07), 0px 1px 3px 0px rgba(0, 0, 0, 0.06);
  --elevation-2: 0px 3px 3px -2px rgba(0, 0, 0, 0.1), 0px 3px 4px 0px rgba(0, 0, 0, 0.07), 0px 1px 8px 0px rgba(0, 0, 0, 0.06);
  --elevation-3: 0px 3px 5px -1px rgba(0, 0, 0, 0.1), 0px 6px 10px 0px rgba(0, 0, 0, 0.07), 0px 1px 18px 0px rgba(0, 0, 0, 0.06);
  --elevation-4: 0px 5px 5px -3px rgba(0, 0, 0, 0.1), 0px 8px 10px 1px rgba(0, 0, 0, 0.07), 0px 3px 14px 2px rgba(0, 0, 0, 0.06);
  --elevation-5: 0px 7px 8px -4px rgba(0, 0, 0, 0.1), 0px 12px 17px 2px rgba(0, 0, 0, 0.07), 0px 5px 22px 4px rgba(0, 0, 0, 0.06);
  --inset-0: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.1), inset 0px 0px 0px 0px rgba(0, 0, 0, 0.07), inset 0px 0px 0px 0px rgba(0, 0, 0, 0.06);
  --inset-1: inset 0px 2px 1px -1px rgba(0, 0, 0, 0.1), inset 0px 1px 1px 0px rgba(0, 0, 0, 0.07), inset 0px 1px 3px 0px rgba(0, 0, 0, 0.06);
  --inset-2: inset 0px 3px 3px -2px rgba(0, 0, 0, 0.1), inset 0px 3px 4px 0px rgba(0, 0, 0, 0.07), inset 0px 1px 8px 0px rgba(0, 0, 0, 0.06);
  --inset-3: inset 0px 3px 5px -1px rgba(0, 0, 0, 0.1), inset 0px 6px 10px 0px rgba(0, 0, 0, 0.07), inset 0px 1px 18px 0px rgba(0, 0, 0, 0.06);
  --inset-4: inset 0px 5px 5px -3px rgba(0, 0, 0, 0.1), inset 0px 8px 10px 1px rgba(0, 0, 0, 0.07), inset 0px 3px 14px 2px rgba(0, 0, 0, 0.06);
  --inset-5: inset 0px 7px 8px -4px rgba(0, 0, 0, 0.1), inset 0px 12px 17px 2px rgba(0, 0, 0, 0.07), inset 0px 5px 22px 4px rgba(0, 0, 0, 0.06);

  --preference-1: repeating-linear-gradient(45deg, var(--yellow-20v), var(--yellow-20v) 0.25em, var(--yellow-80) 0.25em, var(--yellow-80) 0.5em);
  --preference-2: var(--red-50);
  --preference-3: var(--red-30);
  --preference-4: var(--yellow-5);
  --preference-5: var(--green-cool-30);
  --preference-6: var(--green-cool-50v);
}

/* Custom Styles */
html {
  background: var(--gray-10);
}
html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
}

body {
  margin: 0.25rem;
  background-color: var(--gray-2);
  color: var(--gray-80);
  border-radius: 0.5rem;
  box-shadow: var(--elevation-2);
  border-width: 0.0625em;
  border-style: solid;
  border-color: var(--gray-5) var(--gray-10) var(--gray-10) var(--gray-5);
}

h2 {
  margin-bottom: 0.5em;
}

a {
  color: var(--blue-warm-60v);
}

a:hover,
a:focus {
  color: var(--blue-warm-70v);
}

input[type="text"],
input[type="number"] {
  font-family: var(--font-family);
  font-size: 1em;
  padding: 0.25em 0.5em;
  border: 1px solid var(--gray-50);
  border-radius: 0.25em;
  background: var(--black-transparent-10);
  color: var(--gray-80);
}

input[type="number"] {
  width: 10ch;
}

nav {
  padding: 0.5rem 1rem;
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-bottom: 2px solid var(--black-transparent-10);
  box-shadow: 0 2px 0 0 var(--white-transparent-90);
}

footer {
  text-align: center;
  font-size: 0.75em;
}

.a11y-skip-main {
  position: absolute;
  top: auto;
  left: -999px;
  z-index: -999;
  overflow: hidden;
  width: 1px;
  height: 1px;
  color: var(--white);
  background: var(--black);
  padding: 0.5em 1.5em;
}

.a11y-skip-main:focus,
.a11y-skip-main:active {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1050;
  overflow: auto;
  width: auto;
  height: auto;
  margin: 0.5rem;
  color: var(--white);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nav-brand {
  --text-shadow-color: var(--black);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  text-decoration: none;
  font-style: italic;
  font-size: 1.5em;
  text-shadow: 0.0625em 0.0625em var(--text-shadow-color), 0.125em 0.125em var(--text-shadow-color), 0.1875em 0.1875em var(--text-shadow-color), 0 0 0.125em var(--text-shadow-color);
  color: var(--white);
}

.nav-brand:hover,
.nav-brand:focus {
  --text-shadow-color: var(--red-warm-80);
  text-decoration: underline double;
  color: var(--red-warm-40v);
}

main {
  display: grid;
  margin: 0.5rem;
}

section {
  padding: 0.5rem;
  margin: 0.5rem;
}

.header {
  flex: 1 0 100%;
}

@keyframes dialog {
  0% {
    /* opacity: 0; */
    transform: translateY(-100%);
  }
  50% {
    transform: translateY(2%);
  }
  75% {
    transform: translateY(-2%);
  }
  100% {
    /* opacity: 1; */
    transform: translateY(0%);
  }
}

dialog {
  z-index: 1000;
  background: var(--gray-5);
  color: var(--gray-80);
  margin: 1.5rem auto;
  padding: 0.5rem 1rem 0;
  width: max-content;
  max-width: calc(100% - 3rem);
  border-radius: 0.5625em;
  box-shadow: var(--elevation-5);
  border-width: 0.0625em;
  border-style: solid;
  border-color: var(--black-transparent-40) var(--black-transparent-40) var(--black-transparent-70) var(--black-transparent-50);
}

dialog[open] {
  animation: dialog 0.4s cubic-bezier(0.25, 1, 0.5, 1) normal;
}

dialog.dialog--hide {
  animation: dialog 0.3s ease reverse once;
}

dialog::backdrop {
  /* can't use variables in backdrop */
  background-color: rgba(23, 23, 22, 0.25);
  backdrop-filter: blur(0.25rem);
  transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 0;
}

dialog[open]::backdrop {
  opacity: 1;
}

.dialog__inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dialog__inner__actions {
  flex: 0 0 100%;
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--body-bg);
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  padding: 0rem 1rem;
  margin-left: -1rem;
  margin-right: -1rem;
  margin-bottom: 0.5rem;
  color: var(--gray-70);
}

.dialog__inner__close {
}

error-dialog dialog {
  top: 0;
  background: var(--red-10);
  color: var(--red-80);
  border-color: var(--red-60);
  width: 100%;
  margin: 0;
  border-radius: 0;
  position: sticky;
  max-width: 100%;
  border-top: 0;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border-left: 0;
  border-right: 0;
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  box-shadow: var(--elevation-1);
  justify-content: space-between;
  gap: 1rem;
}

error-dialog dialog div {
  flex-grow: 1;
  text-align: center;
}

/* Editor Dialog */
.editor {
}

.editor__form {
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  width: 30em;
  max-width: 100%;
}

.editor__form__name {
  grid-column: 1 / 2;
}

.editor__form__name input {
  width: 100%;
}

.editor__form__slices {
  grid-column: 2/3;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;

  label {
    color: currentColor;
  }
}

.editor__form__sentiments {
  grid-column: 1 / 3;
}

.editor__form__sentiments summary {
  visibility: hidden;
  display: none;
}

.editor__form__sentiments__tabs.button-wrapper {
  width: 100%;
  flex-wrap: nowrap;
  margin-bottom: 1rem;
}

.editor__form__sentiments__tabs > button {
  flex: 1 1 33%;
}

.editor__form__options {
  padding: 1rem 2rem 1rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.editor__form__actions {
  grid-column: 1 / 3;
  border-top: 1px solid var(--white-transparent-30);
  box-shadow: 0 -0.4em 0.5em var(--black-transparent-10);
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--gray-80);
  display: flex;
  flex-direction: row-reverse;
  padding: 1rem;
  margin-left: -1rem;
  margin-right: -1rem;
}

.dialog__actions {
  grid-column: 1 / -1;
  border-top: 1px solid var(--white-transparent-30);
  box-shadow: 0 -0.4em 0.5em var(--black-transparent-10);
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--gray-80);
  display: flex;
  flex-direction: row-reverse;
  padding: 1rem;
  margin-top: 1rem;
  margin-left: -1rem;
  margin-right: -1rem;
}

.lobby {
}

.lobby__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.lobby__entries {
  display: grid;
  justify-content: flex-start;
  grid-template-columns: repeat(auto-fill, 14rem);
  gap: 0.125rem;
}

.lobby__entries:empty + .lobby__empty {
  display: block;
}

.lobby__empty {
  display: none;
}

.lobby__entry {
  --background-color: var(--gray-70);
  --text-color: var(--white);
  display: grid;
  grid-template-areas: "name name count" "visualization visualization visualization" "buttons buttons buttons";
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--gray-50);
  border-color: var(--gray-20) var(--gray-60) var(--gray-90) var(--gray-40);
  border-radius: 0.875rem;
  background: var(--background-color);
  color: var(--text-color);
  box-shadow: inset 0.0625em 0.0625em 0.0625em var(--white-transparent-60), var(--elevation-2);
}

.lobby__entry__name {
  grid-area: name;
  line-height: 1.1;
}

.lobby__entry__slices {
  grid-area: count;
  margin-left: auto;
  font-size: 1.25em;
  font-weight: 900;
  line-height: 1;
  color: var(--white-transparent-90);
  font-variant-numeric: tabular-nums;
}

.lobby__entry__buttons {
  grid-area: buttons;
  flex: 0 0 auto;
  justify-self: flex-end;
}

.lobby__entry__details {
  grid-area: details;
  text-align: right;
}

.lobby__entry__visualization {
  display: flex;
  height: 0.5rem;
  align-items: center;
  justify-content: center;
  color: var(--white);
  margin: 0 0.0625em;
  box-shadow: 0.0625em 0.0625em 0.0625em var(--white-transparent-60), var(--inset-1);
  grid-area: visualization;
  border-radius: 0.125rem;
  overflow: hidden;
  z-index: 1;
  position: relative;
}

.lobby__entry__visualization > div {
  flex: 0 0 auto;
  height: 100%;
  background: var(--preference-4);
  position: relative;
  z-index: 0;
}

.lobby__entry__visualization > div:nth-last-child(1) {
  background: var(--preference-6);
}

.lobby__entry__visualization > div:nth-last-child(2) {
  background: var(--preference-5);
}

.lobby__entry__visualization > div:nth-child(1) {
  background: var(--preference-1);
}

.lobby__entry__visualization > div:nth-child(2) {
  background: var(--preference-2);
}

.lobby__entry__visualization > div:nth-child(3) {
  background: var(--preference-3);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.05em;
}

label {
  text-transform: uppercase;
  letter-spacing: 0.025em;
  font-weight: 700;
  font-size: 0.875em;
  color: var(--gray-80);
}

/* Buttons */
.button-wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 0.125em;
  padding: 0.03125em 0.09275em 0.09275em 0.03125em;
  border: 0.125em solid transparent;
  border-radius: 0.25em;
  background-color: var(--gray-90);
  width: max-content;
  box-shadow: 0.0625em 0.0625em 0.0625em var(--white-transparent-60);
  position: relative;
}

.button-wrapper input[type="text"],
.button-wrapper input[type="number"] {
  border: 1px solid var(--black-transparent-40);
  border-radius: 0.25em;
  background: linear-gradient(rgba(255, 255, 255, 0.08) 49%, rgba(0, 0, 0, 0)) 0% 0%/100% 0.3em, linear-gradient(rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0)) 0% 0%/0.2em 100%, linear-gradient(rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0)) 0% 0%/1.2em 100%, linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)), linear-gradient(-45deg, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.08) 61%), linear-gradient(-45deg, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.08) 61%),
    linear-gradient(to right, #000, #1c1d1e, #000);
  color: var(--gray-5);
  font-size: 1.25em;
  padding: 0.25rem 0.5em;
  font-weight: 700;
  width: auto;
  appearance: none;
  position: relative;
}

.button-wrapper input[type="text"] {
  max-width: 10ch;
}

.button-wrapper input[type="number"] {
  max-width: 4ch;
  text-align: center;
}

input[type="button"],
input[type="submit"],
input[type="reset"],
button,
.button {
  --background-color: var(--gray-5);
  --background-color-active: var(--gray-10);
  --light-shadow-color: var(--gray-2);
  --dark-shadow-color: var(--gray-60);
  --text-color: var(--gray-90);
  --circle-background: linear-gradient(to right, var(--black-transparent-5) 1%, var(--white-transparent-10)), linear-gradient(145deg, var(--gray-5), var(--gray-10));
  --circle-box-shadow: 0.1725em -0.075em 0.1em 0em var(--white-transparent-20) inset, 0.3em 0.3em 0.5em #b7b9c1, 0.125em 0.125em 0.1em 0em var(--black-transparent-60), 0.15em 0.1em 0.2em var(--white-transparent-5) inset, -0.2em -0.2em 0.4em var(--gray-1), 0em 0.25em 0.2em var(--black-transparent-10) inset, 0em 0.1em 0.2em var(--white-transparent-20) inset;

  font-size: 0.75em;
  font-family: var(--font-family);
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  border-radius: 0.5625em;
  padding: 0.625em 0.75em;
  border: 0;
  line-height: 1;
  background-color: var(--background-color);
  box-shadow: inset 0.0625em 0.0625em 0.0625em var(--light-shadow-color), inset -0.0625em -0.0625em 0.0625em var(--dark-shadow-color), 0.125em 0.125em 0.25em var(--black);
  text-align: left;
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: 0.025em;
  color: var(--text-color);
  transition-property: transform, background-color, box-shadow;
  transition-duration: 0.15s;
  transition-timing-function: var(--cubic-bezier);
  touch-action: manipulation;
  user-select: none;
}

.button--circle {
  overflow: hidden;
  width: 2.25em;
  padding: 0.625em;
  align-items: center;
}

.button-circle {
  border-radius: 50em;
  padding-bottom: 0.125em;
  display: flex;
  width: 100%;
  font-size: 2em;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  background: var(--circle-background);
  box-shadow: var(--circle-box-shadow);
}

.button-icon {
  border-radius: 50em;
  padding: 0.0625em;
  display: flex;
  width: 100%;
  font-size: 1.75em;
  align-self: stretch;
  align-items: center;
  justify-content: center;
}

.button--dark {
  --background-color: var(--gray-80); /* #353535; */
  --background-color-active: var(--gray-90); /*#313030;*/
  --light-shadow-color: var(--gray-10); /*#a7a7a7;*/
  --dark-shadow-color: var(--black); /*#1c1c1c;*/
  --text-color: var(--white-transparent-90);
  --circle-background: var(--gray-80);
  --circle-box-shadow: 0.1725em -0.075em 0.1em 0em var(--white-transparent-20) inset, 0.3em 0.3em 0.5em #b7b9c1, 0.125em 0.125em 0.1em 0em var(--black-transparent-60), 0.15em 0.1em 0.2em var(--white-transparent-5) inset, -0.2em -0.2em 0.4em var(--red-warm-1), 0em 0.25em 0.2em var(--black-transparent-10) inset, 0em 0.1em 0.2em var(--white-transparent-20) inset;
}

.button--orange {
  --background-color: var(--red-warm-40v); /*#f05a22;*/
  --background-color-active: var(--red-warm-50v); /* #ee5529;*/
  --light-shadow-color: var(--red-warm-20v); /*#ffb147;*/
  --dark-shadow-color: var(--red-50v); /* #d72d12;*/
  --text-color: var(--white);
  --circle-background: linear-gradient(to right, var(--black-transparent-5) 1%, var(--white-transparent-10)), linear-gradient(145deg, var(--red-warm-40v), var(--red-warm-50v));
  --circle-box-shadow: 0.1725em -0.075em 0.1em 0em var(--white-transparent-20) inset, 0.3em 0.3em 0.5em #b7b9c1, 0.125em 0.125em 0.1em 0em var(--black-transparent-60), 0.15em 0.1em 0.2em var(--white-transparent-5) inset, -0.2em -0.2em 0.4em var(--red-warm-1), 0em 0.25em 0.2em var(--black-transparent-10) inset, 0em 0.1em 0.2em var(--white-transparent-20) inset;
  text-shadow: 0.0625em 0.0625em 0.0625em var(--black-transparent-50);
}

.button--light {
  --background-color: var(--gray-60);
  --background-color-active: var(--gray-70);
  --light-shadow-color: var(--gray-30);
  --dark-shadow-color: var(--gray-80);
  --text-color: var(--white-transparent-90);
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
button:focus {
  cursor: pointer;
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active,
.button:active,
input[type="button"].button--active,
input[type="submit"].button--active,
input[type="reset"].button--active,
button.button--active,
.button.button--active {
  transform: scale(0.98) translateY(0.125em);
  background: var(--background-color-active);
  box-shadow: inset 0 0 0.25em #000, inset 0.0625em 0.0625em 0.0625em transparent, inset -0.0625em -0.0625em 0.0625em transparent, 0.125em 0.125em 0.25em transparent;
}

.button.button--dark:active,
.button.button--dark.button--active,
.button.button--dark.button--active:disabled {
  color: var(--white);
  text-shadow: 0 0 2px var(--red-warm-50v), 0 0 6px var(--red-warm-10v), 0 0 18px var(--red-warm-50v);
  opacity: 1;
}

input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
button:disabled,
.button:disabled input[type="button"].button--disabled,
input[type="submit"].button--disabled,
input[type="reset"].button--disabled,
button.button--disabled,
.button.button--disabled {
  cursor: not-allowed;
  transform: scale(0.98) translateY(0.125em);
  background: var(--background-color-active);
  opacity: 0.75;
  box-shadow: inset 0 0 0.25em #000, inset 0.0625em 0.0625em 0.0625em transparent, inset -0.0625em -0.0625em 0.0625em transparent, 0.125em 0.125em 0.25em transparent;
}

.sentiment-range {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: row-reverse;
  gap: 0.25rem 0.5rem;
  font-size: 0.9em;
  margin-bottom: 0.5rem;
}

.sentiment-range__label {
  flex: 1 1 auto;
  display: flex;
  gap: 0 0.25em;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
}

.sentiment-range__label__content {
  font-size: 1.25em;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.05em;
}

.sentiment-range__label__current {
  border-radius: 0.25em;
  background: var(--black-transparent-10);
  padding: 0 0.33em;
}

.sentiment-range__input {
  opacity: 0;
  height: 0;
  display: block;
  user-select: none;
  pointer-events: none;
  flex-basis: 100%;
}

.sentiment-range__input:focus-visible {
  opacity: 1;
  height: auto;
  pointer-events: all;
  user-select: all;
}

.sentiment-range__buttons {
  flex: 1 0 auto;
}

.sentiment-range__button {
  padding: 0.5em;
  width: 100%;
}

.sentiment-range__button:nth-child(1).button--active {
  --background-color-active: var(--preference-1);
}

.sentiment-range__button:nth-child(2).button--active {
  --background-color-active: var(--preference-2);
}

.sentiment-range__button:nth-child(3).button--active {
  --background-color-active: var(--preference-3);
}

.sentiment-range__button.button--active {
  --background-color-active: var(--preference-4);
}

.sentiment-range__button:nth-last-child(2).button--active {
  --background-color-active: var(--preference-5);
}

.sentiment-range__button:nth-last-child(1).button--active {
  --background-color-active: var(--preference-6);
}

@media screen and (min-width: 510px) {
  .sentiment-range__label {
    flex-direction: column;
    align-items: flex-start;
  }
  .sentiment-range__buttons {
    flex: 0 0 auto;
    font-size: 1.2em;
  }
}