@charset "UTF-8";
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm plex mono-normal-400.ttf") format("truetype");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/montserrat-normal-400.ttf") format("truetype");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/montserrat-normal-500.ttf") format("truetype");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/montserrat-normal-600.ttf") format("truetype");
}
@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/montserrat-italic-400.ttf") format("truetype");
}
@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/montserrat-italic-700.ttf") format("truetype");
}
@font-face {
  font-family: "Luckiest Guy";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/luckiest guy-normal-400.ttf") format("truetype");
}
@font-face {
  font-family: "OCR-B";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ocr-b-normal-400.ttf") format("truetype");
}
:root:not([data-color-scheme=dark]) {
  --color-light: #ffffff;
  --color-dark: #111111;
  --color-bg: #ffffff;
  --color-fg: #111111;
  --color-primary: #B21217;
  --color-primary-contrast: #ffffff;
  --color-primary_1: #240405;
  --color-primary_1-contrast: #ffffff;
  --color-primary_2: #470709;
  --color-primary_2-contrast: #ffffff;
  --color-primary_3: #6b0b0e;
  --color-primary_3-contrast: #ffffff;
  --color-primary_4: #8e0e12;
  --color-primary_4-contrast: #ffffff;
  --color-primary_5: #b21217;
  --color-primary_5-contrast: #ffffff;
  --color-primary_6: #e81b21;
  --color-primary_6-contrast: #ffffff;
  --color-primary_7: #ee5459;
  --color-primary_7-contrast: #111111;
  --color-primary_8: #f38d90;
  --color-primary_8-contrast: #111111;
  --color-primary_9: #f9c6c8;
  --color-primary_9-contrast: #111111;
  --color-tone: #f1eeee;
  --color-tone-contrast: #111111;
  --color-tone_1: #342c2c;
  --color-tone_1-contrast: #ffffff;
  --color-tone_2: #685858;
  --color-tone_2-contrast: #ffffff;
  --color-tone_3: #998687;
  --color-tone_3-contrast: #ffffff;
  --color-tone_4: #c5babb;
  --color-tone_4-contrast: #111111;
  --color-tone_5: #f1eeee;
  --color-tone_5-contrast: #111111;
  --color-tone_6: #f3f1f1;
  --color-tone_6-contrast: #111111;
  --color-tone_7: #f6f5f5;
  --color-tone_7-contrast: #111111;
  --color-tone_8: #f9f8f8;
  --color-tone_8-contrast: #111111;
  --color-tone_9: #fcfcfc;
  --color-tone_9-contrast: #111111;
  --color-neutral: #808080;
  --color-neutral-contrast: #ffffff;
  --color-neutral_1: #1a1a1a;
  --color-neutral_1-contrast: #ffffff;
  --color-neutral_2: #333333;
  --color-neutral_2-contrast: #ffffff;
  --color-neutral_3: #4d4d4d;
  --color-neutral_3-contrast: #ffffff;
  --color-neutral_4: #666666;
  --color-neutral_4-contrast: #ffffff;
  --color-neutral_5: gray;
  --color-neutral_5-contrast: #ffffff;
  --color-neutral_6: #999999;
  --color-neutral_6-contrast: #111111;
  --color-neutral_7: #b3b3b3;
  --color-neutral_7-contrast: #111111;
  --color-neutral_8: #cccccc;
  --color-neutral_8-contrast: #111111;
  --color-neutral_9: #e6e6e6;
  --color-neutral_9-contrast: #111111;
  --color-muted: #9a2a2e;
  --color-muted-contrast: #ffffff;
  --color-muted_1: #1f0809;
  --color-muted_1-contrast: #ffffff;
  --color-muted_2: #3e1112;
  --color-muted_2-contrast: #ffffff;
  --color-muted_3: #5c191b;
  --color-muted_3-contrast: #ffffff;
  --color-muted_4: #7b2224;
  --color-muted_4-contrast: #ffffff;
  --color-muted_5: #9a2a2e;
  --color-muted_5-contrast: #ffffff;
  --color-muted_6: #c93a3e;
  --color-muted_6-contrast: #ffffff;
  --color-muted_7: #d76b6e;
  --color-muted_7-contrast: #111111;
  --color-muted_8: #e49c9f;
  --color-muted_8-contrast: #111111;
  --color-muted_9: #f2cecf;
  --color-muted_9-contrast: #111111;
  --color-complement: #12b2a0;
  --color-complement-contrast: #ffffff;
  --color-complement_1: #042420;
  --color-complement_1-contrast: #ffffff;
  --color-complement_2: #074740;
  --color-complement_2-contrast: #ffffff;
  --color-complement_3: #0b6b60;
  --color-complement_3-contrast: #ffffff;
  --color-complement_4: #0e8e80;
  --color-complement_4-contrast: #ffffff;
  --color-complement_5: #12b2a0;
  --color-complement_5-contrast: #ffffff;
  --color-complement_6: #1be8d0;
  --color-complement_6-contrast: #ffffff;
  --color-complement_7: #54eedc;
  --color-complement_7-contrast: #111111;
  --color-complement_8: #8df3e8;
  --color-complement_8-contrast: #111111;
  --color-complement_9: #c6f9f3;
  --color-complement_9-contrast: #111111;
  --color-analogous1: #b25d12;
  --color-analogous1-contrast: #ffffff;
  --color-analogous1_1: #241304;
  --color-analogous1_1-contrast: #ffffff;
  --color-analogous1_2: #472507;
  --color-analogous1_2-contrast: #ffffff;
  --color-analogous1_3: #6b380b;
  --color-analogous1_3-contrast: #ffffff;
  --color-analogous1_4: #8e4a0e;
  --color-analogous1_4-contrast: #ffffff;
  --color-analogous1_5: #b25d12;
  --color-analogous1_5-contrast: #ffffff;
  --color-analogous1_6: #e87b1b;
  --color-analogous1_6-contrast: #ffffff;
  --color-analogous1_7: #ee9c54;
  --color-analogous1_7-contrast: #111111;
  --color-analogous1_8: #f3bd8d;
  --color-analogous1_8-contrast: #111111;
  --color-analogous1_9: #f9dec6;
  --color-analogous1_9-contrast: #111111;
  --color-analogous2: #b21267;
  --color-analogous2-contrast: #ffffff;
  --color-analogous2_1: #240415;
  --color-analogous2_1-contrast: #ffffff;
  --color-analogous2_2: #470729;
  --color-analogous2_2-contrast: #ffffff;
  --color-analogous2_3: #6b0b3e;
  --color-analogous2_3-contrast: #ffffff;
  --color-analogous2_4: #8e0e52;
  --color-analogous2_4-contrast: #ffffff;
  --color-analogous2_5: #b21267;
  --color-analogous2_5-contrast: #ffffff;
  --color-analogous2_6: #e81b88;
  --color-analogous2_6-contrast: #ffffff;
  --color-analogous2_7: #ee54a6;
  --color-analogous2_7-contrast: #111111;
  --color-analogous2_8: #f38dc3;
  --color-analogous2_8-contrast: #111111;
  --color-analogous2_9: #f9c6e1;
  --color-analogous2_9-contrast: #111111;
  --color-triad1: #17b212;
  --color-triad1-contrast: #ffffff;
  --color-triad1_1: #052404;
  --color-triad1_1-contrast: #ffffff;
  --color-triad1_2: #094707;
  --color-triad1_2-contrast: #ffffff;
  --color-triad1_3: #0e6b0b;
  --color-triad1_3-contrast: #ffffff;
  --color-triad1_4: #128e0e;
  --color-triad1_4-contrast: #ffffff;
  --color-triad1_5: #17b212;
  --color-triad1_5-contrast: #ffffff;
  --color-triad1_6: #21e81b;
  --color-triad1_6-contrast: #ffffff;
  --color-triad1_7: #59ee54;
  --color-triad1_7-contrast: #111111;
  --color-triad1_8: #90f38d;
  --color-triad1_8-contrast: #111111;
  --color-triad1_9: #c8f9c6;
  --color-triad1_9-contrast: #111111;
  --color-triad2: #1217b2;
  --color-triad2-contrast: #ffffff;
  --color-triad2_1: #040524;
  --color-triad2_1-contrast: #ffffff;
  --color-triad2_2: #070947;
  --color-triad2_2-contrast: #ffffff;
  --color-triad2_3: #0b0e6b;
  --color-triad2_3-contrast: #ffffff;
  --color-triad2_4: #0e128e;
  --color-triad2_4-contrast: #ffffff;
  --color-triad2_5: #1217b2;
  --color-triad2_5-contrast: #ffffff;
  --color-triad2_6: #1b21e8;
  --color-triad2_6-contrast: #ffffff;
  --color-triad2_7: #5459ee;
  --color-triad2_7-contrast: #111111;
  --color-triad2_8: #8d90f3;
  --color-triad2_8-contrast: #111111;
  --color-triad2_9: #c6c8f9;
  --color-triad2_9-contrast: #111111;
  --color-split1: #12b25d;
  --color-split1-contrast: #ffffff;
  --color-split1_1: #042413;
  --color-split1_1-contrast: #ffffff;
  --color-split1_2: #074725;
  --color-split1_2-contrast: #ffffff;
  --color-split1_3: #0b6b38;
  --color-split1_3-contrast: #ffffff;
  --color-split1_4: #0e8e4a;
  --color-split1_4-contrast: #ffffff;
  --color-split1_5: #12b25d;
  --color-split1_5-contrast: #ffffff;
  --color-split1_6: #1be87b;
  --color-split1_6-contrast: #ffffff;
  --color-split1_7: #54ee9c;
  --color-split1_7-contrast: #111111;
  --color-split1_8: #8df3bd;
  --color-split1_8-contrast: #111111;
  --color-split1_9: #c6f9de;
  --color-split1_9-contrast: #111111;
  --color-split2: #1267b2;
  --color-split2-contrast: #ffffff;
  --color-split2_1: #041524;
  --color-split2_1-contrast: #ffffff;
  --color-split2_2: #072947;
  --color-split2_2-contrast: #ffffff;
  --color-split2_3: #0b3e6b;
  --color-split2_3-contrast: #ffffff;
  --color-split2_4: #0e528e;
  --color-split2_4-contrast: #ffffff;
  --color-split2_5: #1267b2;
  --color-split2_5-contrast: #ffffff;
  --color-split2_6: #1b88e8;
  --color-split2_6-contrast: #ffffff;
  --color-split2_7: #54a6ee;
  --color-split2_7-contrast: #111111;
  --color-split2_8: #8dc3f3;
  --color-split2_8-contrast: #111111;
  --color-split2_9: #c6e1f9;
  --color-split2_9-contrast: #111111;
  --color-tetra1: #67b212;
  --color-tetra1-contrast: #ffffff;
  --color-tetra1_1: #152404;
  --color-tetra1_1-contrast: #ffffff;
  --color-tetra1_2: #294707;
  --color-tetra1_2-contrast: #ffffff;
  --color-tetra1_3: #3e6b0b;
  --color-tetra1_3-contrast: #ffffff;
  --color-tetra1_4: #528e0e;
  --color-tetra1_4-contrast: #ffffff;
  --color-tetra1_5: #67b212;
  --color-tetra1_5-contrast: #ffffff;
  --color-tetra1_6: #88e81b;
  --color-tetra1_6-contrast: #ffffff;
  --color-tetra1_7: #a6ee54;
  --color-tetra1_7-contrast: #111111;
  --color-tetra1_8: #c3f38d;
  --color-tetra1_8-contrast: #111111;
  --color-tetra1_9: #e1f9c6;
  --color-tetra1_9-contrast: #111111;
  --color-tetra2: #5d12b2;
  --color-tetra2-contrast: #ffffff;
  --color-tetra2_1: #130424;
  --color-tetra2_1-contrast: #ffffff;
  --color-tetra2_2: #250747;
  --color-tetra2_2-contrast: #ffffff;
  --color-tetra2_3: #380b6b;
  --color-tetra2_3-contrast: #ffffff;
  --color-tetra2_4: #4a0e8e;
  --color-tetra2_4-contrast: #ffffff;
  --color-tetra2_5: #5d12b2;
  --color-tetra2_5-contrast: #ffffff;
  --color-tetra2_6: #7b1be8;
  --color-tetra2_6-contrast: #ffffff;
  --color-tetra2_7: #9c54ee;
  --color-tetra2_7-contrast: #111111;
  --color-tetra2_8: #bd8df3;
  --color-tetra2_8-contrast: #111111;
  --color-tetra2_9: #dec6f9;
  --color-tetra2_9-contrast: #111111;
  --color-square1: #67b212;
  --color-square1-contrast: #ffffff;
  --color-square1_1: #152404;
  --color-square1_1-contrast: #ffffff;
  --color-square1_2: #294707;
  --color-square1_2-contrast: #ffffff;
  --color-square1_3: #3e6b0b;
  --color-square1_3-contrast: #ffffff;
  --color-square1_4: #528e0e;
  --color-square1_4-contrast: #ffffff;
  --color-square1_5: #67b212;
  --color-square1_5-contrast: #ffffff;
  --color-square1_6: #88e81b;
  --color-square1_6-contrast: #ffffff;
  --color-square1_7: #a6ee54;
  --color-square1_7-contrast: #111111;
  --color-square1_8: #c3f38d;
  --color-square1_8-contrast: #111111;
  --color-square1_9: #e1f9c6;
  --color-square1_9-contrast: #111111;
  --color-square3: #5d12b2;
  --color-square3-contrast: #ffffff;
  --color-square3_1: #130424;
  --color-square3_1-contrast: #ffffff;
  --color-square3_2: #250747;
  --color-square3_2-contrast: #ffffff;
  --color-square3_3: #380b6b;
  --color-square3_3-contrast: #ffffff;
  --color-square3_4: #4a0e8e;
  --color-square3_4-contrast: #ffffff;
  --color-square3_5: #5d12b2;
  --color-square3_5-contrast: #ffffff;
  --color-square3_6: #7b1be8;
  --color-square3_6-contrast: #ffffff;
  --color-square3_7: #9c54ee;
  --color-square3_7-contrast: #111111;
  --color-square3_8: #bd8df3;
  --color-square3_8-contrast: #111111;
  --color-square3_9: #dec6f9;
  --color-square3_9-contrast: #111111;
}
:root[data-color-scheme=dark] {
  --color-light: #e8e8e8;
  --color-dark: #1a1a1a;
  --color-bg: #1a1a1a;
  --color-fg: #e8e8e8;
  --color-primary: #B21217;
  --color-primary-contrast: #e8e8e8;
  --color-primary_1: #f8bbbd;
  --color-primary_1-contrast: #1a1a1a;
  --color-primary_2: #f1787b;
  --color-primary_2-contrast: #1a1a1a;
  --color-primary_3: #ea343a;
  --color-primary_3-contrast: #e8e8e8;
  --color-primary_4: #c01319;
  --color-primary_4-contrast: #e8e8e8;
  --color-primary_5: #7d0d10;
  --color-primary_5-contrast: #e8e8e8;
  --color-primary_6: #640a0d;
  --color-primary_6-contrast: #e8e8e8;
  --color-primary_7: #4b080a;
  --color-primary_7-contrast: #e8e8e8;
  --color-primary_8: #320506;
  --color-primary_8-contrast: #e8e8e8;
  --color-primary_9: #190303;
  --color-primary_9-contrast: #e8e8e8;
  --color-tone: #f1eeee;
  --color-tone-contrast: #1a1a1a;
  --color-tone_1: #efecec;
  --color-tone_1-contrast: #1a1a1a;
  --color-tone_2: #dfd9d9;
  --color-tone_2-contrast: #1a1a1a;
  --color-tone_3: #cfc6c6;
  --color-tone_3-contrast: #1a1a1a;
  --color-tone_4: #bfb3b4;
  --color-tone_4-contrast: #1a1a1a;
  --color-tone_5: #afa0a1;
  --color-tone_5-contrast: #1a1a1a;
  --color-tone_6: #907c7d;
  --color-tone_6-contrast: #e8e8e8;
  --color-tone_7: #6d5c5d;
  --color-tone_7-contrast: #e8e8e8;
  --color-tone_8: #483e3e;
  --color-tone_8-contrast: #e8e8e8;
  --color-tone_9: #241f1f;
  --color-tone_9-contrast: #e8e8e8;
  --color-neutral: #808080;
  --color-neutral-contrast: #e8e8e8;
  --color-neutral_1: #dedede;
  --color-neutral_1-contrast: #1a1a1a;
  --color-neutral_2: #bdbdbd;
  --color-neutral_2-contrast: #1a1a1a;
  --color-neutral_3: #9c9c9c;
  --color-neutral_3-contrast: #1a1a1a;
  --color-neutral_4: #7b7b7b;
  --color-neutral_4-contrast: #e8e8e8;
  --color-neutral_5: #5a5a5a;
  --color-neutral_5-contrast: #e8e8e8;
  --color-neutral_6: #484848;
  --color-neutral_6-contrast: #e8e8e8;
  --color-neutral_7: #363636;
  --color-neutral_7-contrast: #e8e8e8;
  --color-neutral_8: #242424;
  --color-neutral_8-contrast: #e8e8e8;
  --color-neutral_9: #121212;
  --color-neutral_9-contrast: #e8e8e8;
  --color-muted: #9a2a2e;
  --color-muted-contrast: #e8e8e8;
  --color-muted_1: #efc4c6;
  --color-muted_1-contrast: #1a1a1a;
  --color-muted_2: #df8a8c;
  --color-muted_2-contrast: #1a1a1a;
  --color-muted_3: #cf4f53;
  --color-muted_3-contrast: #e8e8e8;
  --color-muted_4: #a62d31;
  --color-muted_4-contrast: #e8e8e8;
  --color-muted_5: #6c1d20;
  --color-muted_5-contrast: #e8e8e8;
  --color-muted_6: #561819;
  --color-muted_6-contrast: #e8e8e8;
  --color-muted_7: #411213;
  --color-muted_7-contrast: #e8e8e8;
  --color-muted_8: #2b0c0d;
  --color-muted_8-contrast: #e8e8e8;
  --color-muted_9: #160606;
  --color-muted_9-contrast: #e8e8e8;
  --color-complement: #12b2a0;
  --color-complement-contrast: #e8e8e8;
  --color-complement_1: #bbf8f1;
  --color-complement_1-contrast: #1a1a1a;
  --color-complement_2: #78f1e3;
  --color-complement_2-contrast: #1a1a1a;
  --color-complement_3: #34ead6;
  --color-complement_3-contrast: #e8e8e8;
  --color-complement_4: #13c0ad;
  --color-complement_4-contrast: #e8e8e8;
  --color-complement_5: #0d7d70;
  --color-complement_5-contrast: #e8e8e8;
  --color-complement_6: #0a6459;
  --color-complement_6-contrast: #e8e8e8;
  --color-complement_7: #084b43;
  --color-complement_7-contrast: #e8e8e8;
  --color-complement_8: #05322d;
  --color-complement_8-contrast: #e8e8e8;
  --color-complement_9: #031916;
  --color-complement_9-contrast: #e8e8e8;
  --color-analogous1: #b25d12;
  --color-analogous1-contrast: #e8e8e8;
  --color-analogous1_1: #f8d8bb;
  --color-analogous1_1-contrast: #1a1a1a;
  --color-analogous1_2: #f1b178;
  --color-analogous1_2-contrast: #1a1a1a;
  --color-analogous1_3: #ea8934;
  --color-analogous1_3-contrast: #e8e8e8;
  --color-analogous1_4: #c06413;
  --color-analogous1_4-contrast: #e8e8e8;
  --color-analogous1_5: #7d410d;
  --color-analogous1_5-contrast: #e8e8e8;
  --color-analogous1_6: #64340a;
  --color-analogous1_6-contrast: #e8e8e8;
  --color-analogous1_7: #4b2708;
  --color-analogous1_7-contrast: #e8e8e8;
  --color-analogous1_8: #321a05;
  --color-analogous1_8-contrast: #e8e8e8;
  --color-analogous1_9: #190d03;
  --color-analogous1_9-contrast: #e8e8e8;
  --color-analogous2: #b21267;
  --color-analogous2-contrast: #e8e8e8;
  --color-analogous2_1: #f8bbdc;
  --color-analogous2_1-contrast: #1a1a1a;
  --color-analogous2_2: #f178b8;
  --color-analogous2_2-contrast: #1a1a1a;
  --color-analogous2_3: #ea3495;
  --color-analogous2_3-contrast: #e8e8e8;
  --color-analogous2_4: #c0136f;
  --color-analogous2_4-contrast: #e8e8e8;
  --color-analogous2_5: #7d0d48;
  --color-analogous2_5-contrast: #e8e8e8;
  --color-analogous2_6: #640a3a;
  --color-analogous2_6-contrast: #e8e8e8;
  --color-analogous2_7: #4b082b;
  --color-analogous2_7-contrast: #e8e8e8;
  --color-analogous2_8: #32051d;
  --color-analogous2_8-contrast: #e8e8e8;
  --color-analogous2_9: #19030e;
  --color-analogous2_9-contrast: #e8e8e8;
  --color-triad1: #17b212;
  --color-triad1-contrast: #e8e8e8;
  --color-triad1_1: #bdf8bb;
  --color-triad1_1-contrast: #1a1a1a;
  --color-triad1_2: #7bf178;
  --color-triad1_2-contrast: #1a1a1a;
  --color-triad1_3: #3aea34;
  --color-triad1_3-contrast: #e8e8e8;
  --color-triad1_4: #19c013;
  --color-triad1_4-contrast: #e8e8e8;
  --color-triad1_5: #107d0d;
  --color-triad1_5-contrast: #e8e8e8;
  --color-triad1_6: #0d640a;
  --color-triad1_6-contrast: #e8e8e8;
  --color-triad1_7: #0a4b08;
  --color-triad1_7-contrast: #e8e8e8;
  --color-triad1_8: #063205;
  --color-triad1_8-contrast: #e8e8e8;
  --color-triad1_9: #031903;
  --color-triad1_9-contrast: #e8e8e8;
  --color-triad2: #1217b2;
  --color-triad2-contrast: #e8e8e8;
  --color-triad2_1: #bbbdf8;
  --color-triad2_1-contrast: #1a1a1a;
  --color-triad2_2: #787bf1;
  --color-triad2_2-contrast: #1a1a1a;
  --color-triad2_3: #343aea;
  --color-triad2_3-contrast: #e8e8e8;
  --color-triad2_4: #1319c0;
  --color-triad2_4-contrast: #e8e8e8;
  --color-triad2_5: #0d107d;
  --color-triad2_5-contrast: #e8e8e8;
  --color-triad2_6: #0a0d64;
  --color-triad2_6-contrast: #e8e8e8;
  --color-triad2_7: #080a4b;
  --color-triad2_7-contrast: #e8e8e8;
  --color-triad2_8: #050632;
  --color-triad2_8-contrast: #e8e8e8;
  --color-triad2_9: #030319;
  --color-triad2_9-contrast: #e8e8e8;
  --color-split1: #12b25d;
  --color-split1-contrast: #e8e8e8;
  --color-split1_1: #bbf8d8;
  --color-split1_1-contrast: #1a1a1a;
  --color-split1_2: #78f1b1;
  --color-split1_2-contrast: #1a1a1a;
  --color-split1_3: #34ea89;
  --color-split1_3-contrast: #e8e8e8;
  --color-split1_4: #13c064;
  --color-split1_4-contrast: #e8e8e8;
  --color-split1_5: #0d7d41;
  --color-split1_5-contrast: #e8e8e8;
  --color-split1_6: #0a6434;
  --color-split1_6-contrast: #e8e8e8;
  --color-split1_7: #084b27;
  --color-split1_7-contrast: #e8e8e8;
  --color-split1_8: #05321a;
  --color-split1_8-contrast: #e8e8e8;
  --color-split1_9: #03190d;
  --color-split1_9-contrast: #e8e8e8;
  --color-split2: #1267b2;
  --color-split2-contrast: #e8e8e8;
  --color-split2_1: #bbdcf8;
  --color-split2_1-contrast: #1a1a1a;
  --color-split2_2: #78b8f1;
  --color-split2_2-contrast: #1a1a1a;
  --color-split2_3: #3495ea;
  --color-split2_3-contrast: #e8e8e8;
  --color-split2_4: #136fc0;
  --color-split2_4-contrast: #e8e8e8;
  --color-split2_5: #0d487d;
  --color-split2_5-contrast: #e8e8e8;
  --color-split2_6: #0a3a64;
  --color-split2_6-contrast: #e8e8e8;
  --color-split2_7: #082b4b;
  --color-split2_7-contrast: #e8e8e8;
  --color-split2_8: #051d32;
  --color-split2_8-contrast: #e8e8e8;
  --color-split2_9: #030e19;
  --color-split2_9-contrast: #e8e8e8;
  --color-tetra1: #67b212;
  --color-tetra1-contrast: #e8e8e8;
  --color-tetra1_1: #dcf8bb;
  --color-tetra1_1-contrast: #1a1a1a;
  --color-tetra1_2: #b8f178;
  --color-tetra1_2-contrast: #1a1a1a;
  --color-tetra1_3: #95ea34;
  --color-tetra1_3-contrast: #e8e8e8;
  --color-tetra1_4: #6fc013;
  --color-tetra1_4-contrast: #e8e8e8;
  --color-tetra1_5: #487d0d;
  --color-tetra1_5-contrast: #e8e8e8;
  --color-tetra1_6: #3a640a;
  --color-tetra1_6-contrast: #e8e8e8;
  --color-tetra1_7: #2b4b08;
  --color-tetra1_7-contrast: #e8e8e8;
  --color-tetra1_8: #1d3205;
  --color-tetra1_8-contrast: #e8e8e8;
  --color-tetra1_9: #0e1903;
  --color-tetra1_9-contrast: #e8e8e8;
  --color-tetra2: #5d12b2;
  --color-tetra2-contrast: #e8e8e8;
  --color-tetra2_1: #d8bbf8;
  --color-tetra2_1-contrast: #1a1a1a;
  --color-tetra2_2: #b178f1;
  --color-tetra2_2-contrast: #1a1a1a;
  --color-tetra2_3: #8934ea;
  --color-tetra2_3-contrast: #e8e8e8;
  --color-tetra2_4: #6413c0;
  --color-tetra2_4-contrast: #e8e8e8;
  --color-tetra2_5: #410d7d;
  --color-tetra2_5-contrast: #e8e8e8;
  --color-tetra2_6: #340a64;
  --color-tetra2_6-contrast: #e8e8e8;
  --color-tetra2_7: #27084b;
  --color-tetra2_7-contrast: #e8e8e8;
  --color-tetra2_8: #1a0532;
  --color-tetra2_8-contrast: #e8e8e8;
  --color-tetra2_9: #0d0319;
  --color-tetra2_9-contrast: #e8e8e8;
  --color-square1: #67b212;
  --color-square1-contrast: #e8e8e8;
  --color-square1_1: #dcf8bb;
  --color-square1_1-contrast: #1a1a1a;
  --color-square1_2: #b8f178;
  --color-square1_2-contrast: #1a1a1a;
  --color-square1_3: #95ea34;
  --color-square1_3-contrast: #e8e8e8;
  --color-square1_4: #6fc013;
  --color-square1_4-contrast: #e8e8e8;
  --color-square1_5: #487d0d;
  --color-square1_5-contrast: #e8e8e8;
  --color-square1_6: #3a640a;
  --color-square1_6-contrast: #e8e8e8;
  --color-square1_7: #2b4b08;
  --color-square1_7-contrast: #e8e8e8;
  --color-square1_8: #1d3205;
  --color-square1_8-contrast: #e8e8e8;
  --color-square1_9: #0e1903;
  --color-square1_9-contrast: #e8e8e8;
  --color-square3: #5d12b2;
  --color-square3-contrast: #e8e8e8;
  --color-square3_1: #d8bbf8;
  --color-square3_1-contrast: #1a1a1a;
  --color-square3_2: #b178f1;
  --color-square3_2-contrast: #1a1a1a;
  --color-square3_3: #8934ea;
  --color-square3_3-contrast: #e8e8e8;
  --color-square3_4: #6413c0;
  --color-square3_4-contrast: #e8e8e8;
  --color-square3_5: #410d7d;
  --color-square3_5-contrast: #e8e8e8;
  --color-square3_6: #340a64;
  --color-square3_6-contrast: #e8e8e8;
  --color-square3_7: #27084b;
  --color-square3_7-contrast: #e8e8e8;
  --color-square3_8: #1a0532;
  --color-square3_8-contrast: #e8e8e8;
  --color-square3_9: #0d0319;
  --color-square3_9-contrast: #e8e8e8;
}
:root {
  --color-incomplete: var(--color-analogous1_7);
  --color-correct: var(--color-triad1_3);
  --color-wrong: var(--color-primary_5);
  --color-wrong-contrast: var(--color-primary_5-contrast);
  --color-alert: var(--color-analogous1_7);
  --color-ranking: var(--color-bg);
  --color-ranking-contrast: var(--color-fg);
  --color-logo: var(--color-primary);
  --color-logo-contrast: var(--color-primary-contrast);
  --color-todo-bg: var(--color-tetra2);
  --color-todo-fg: var(--color-tetra2-contrast);
  --color-even-contrast: var(--color-tone_6-contrast);
  --color-even: var(--color-tone_6);
  --color-odd-contrast: var(--color-neutral_8-contrast);
  --color-odd: var(--color-neutral_8);
  --color-mainmenu: var(--color-neutral_9);
  --color-mainmenu-contrast: var(--color-neutral_9-contrast);
  --color-show-calendar: var(--color-square1);
  --color-show-calendar-contrast: var(--color-square1-contrast);
  --color-mute: var(--color-neutral_7);
  --color-mute-contrast: var(--color-neutral_7-contrast);
  --color-show1: var(--color-primary_5); /* Mon - red */
  --color-show1-contrast: var(--color-primary_5-contrast);
  --color-show2: var(--color-analogous1_5); /* Tue - orange */
  --color-show2-contrast: var(--color-analogous1_5-contrast);
  --color-show3: var(--color-analogous2_5); /* Wed - magenta/pink */
  --color-show3-contrast: var(--color-analogous2_5-contrast);
  --color-show4: var(--color-complement_5); /* Thu - teal */
  --color-show4-contrast: var(--color-complement_5-contrast);
  --color-show5: var(--color-split2_5); /* Fri - blue */
  --color-show5-contrast: var(--color-split2_5-contrast);
  --color-show6: var(--color-tetra2_5); /* Sat - purple */
  --color-show6-contrast: var(--color-tetra2_5-contrast);
  --color-show7: var(--color-triad1_5); /* Sun - green */
  --color-show7-contrast: var(--color-triad1_5-contrast);
  --color-show8: var(--color-split1_5); /* Special - emerald */
  --color-show8-contrast: var(--color-split1_5-contrast);
  --color-white: #FFFFFF;
  --color-blue: #2870B0;
  --color-blue10: #cae0f3;
  --color-blue80: #398ad2;
  --color-message-notice-bg: var(--color-blue10);
  --color-bg-shader: rgb(from var(--color-bg) r g b / 0.5);
  --color-fg-shader: rgb(from var(--color-fg) r g b / 0.5);
  --color-accent: #2870B0;
  --color-accent-contrast: #ffffff;
  --color-bg-l: #e6e6e6;
  --color-bg-alt: #e6e6e6;
  --color-media-bg: #1a1a1a;
  --color-outline: #2870B0;
  --color-highlight-bg: #2870B0;
  --color-highlight-fg: #ffffff;
  --color-indecisive: #999999;
  --color-checked: #999999;
  --color-active-bg: orange;
  --color-active-fg: #000000;
  --color-unfinished: #cc1017;
  --color-alert-bg: yellow;
  --color-alert-fg: #000000;
  --color-border: #999999;
  --color-input-border: #999999;
  --color-input-focus-border: var(--color-blue80);
  --color-input-error-border: var(--color-wrong);
  --color-input-bg: var(--color-bg);
  --color-input-fg: var(--color-fg);
  --input-choice-border-color: var(--color-input-border);
  --color-choice-fg: var(--color-fg);
  --color-choice-bg: var(--color-bg);
  --color-button-bg: #cc1017;
  --color-button-fg: #ffffff;
  --color-button-hbg: #a60d13;
  --color-button-hfg: #ffffff;
  --color-label: #398ad2;
  --color-label-contrast: #ffffff;
  --color-selection: #398ad2;
  --color-selection-contrast: #ffffff;
  --color-input-choice-inactive: #ffffff;
}
:root[data-color-scheme=dark] {
  --color-bg-l: #666666;
  --color-bg-alt: #666666;
  --color-media-bg: #ffffff;
  --color-indecisive: #666666;
  --color-border: #666666;
  --color-input-border: #cccccc;
  --color-bg-shader: rgba(128, 128, 128, 0.5);
}
:root {
  --font-family: Montserrat, Helvetica, sans-serif;
  font: 12px/1.2 var(--font-family);
  --monospace: IBM Plex Mono, monospace;
  --font-m3: 18px/1.5 IBM Plex Mono, monospace;
  --font-1: 12px/1.5 Montserrat, Helvetica, sans-serif;
  --font-h1: 600 var(--raster_2)/1.1 Montserrat, Helvetica, sans-serif;
  --letter-spacing-h1: -0.03em;
  --font-h2: 600 var(--raster)/1.1 Montserrat, Helvetica, sans-serif;
  --letter-spacing-h2: -0.03em;
  --font-h3: 500 var(--raster_2_3)/1.1 Montserrat, Helvetica, sans-serif;
  --letter-spacing-h3: -0.03em;
  --font-h4: 500 var(--raster_2_3)/1.1 Montserrat, Helvetica, sans-serif;
  --letter-spacing-h4: -0.03em;
  --font-h5: 400 var(--raster_2_3)/1.2 Montserrat, Helvetica, sans-serif;
  --letter-spacing-h5: 0;
  --font-p: 100 var(--raster_2_3)/1.2 Montserrat, Helvetica, sans-serif;
  --letter-spacing-p: 0;
  --font-l: 100 var(--raster_2_3)/1.4 Montserrat, Helvetica, sans-serif;
  --letter-spacing-l: 0;
  --font-button: 600 var(--raster_2_3)/1.5 Montserrat, Helvetica, sans-serif;
  --letter-spacing-button: 0;
  --font-ask: 100 var(--raster_2_3)/1.2 Montserrat, Helvetica, sans-serif;
  --letter-spacing-ask: 0;
  --fornt-response: var(--font-ask);
  --label-line-height: var(--raster);
  --font-response-label: 400 var(--raster_2_3)/var(--label-line-height) Montserrat, Helvetica, sans-serif;
  --font-response-label-size: var(--raster);
  --label-padding: 0 var(--raster_1_6);
  --raster_12: 432px;
  --raster_10: 360px;
  --raster_8: 288px;
  --raster_6: 216px;
  --raster_4: 144px;
  --raster_3: 108px;
  --raster_2: 72px;
  --raster-2: -72px;
  --raster_3_2: 54px;
  --raster: 36px;
  --raster_1: 36px;
  --raster_1_1: 36px;
  --raster-: -36px;
  --raster-1: -36px;
  --raster-1_1: -36px;
  --raster_1_2: 18px;
  --raster-1_2: -18px;
  --raster_2_3: 24px;
  --raster_2_5: 14.4px;
  --raster_1_3: 12px;
  --raster-1_3: -12px;
  --raster_1_4: 9px;
  --raster_1_6: 6px;
  --raster_1_8: 4.5px;
  --raster_1_12: 3px;
  --menu-width: 72px;
  --menu-width-: -72px;
  --menu-width_1_2: 36px;
  --menu-width-1_2: -36px;
  --menu-width_1_3: 24px;
  --menu-width_2: 144px;
  --menu-width-2: -72px;
  --menu-font-size: var(--raster_2_3);
  --menu-font: var(--menu-font-size)/var(--menu-width) Montserrat, Helvetica, sans-serif;
  --menu-icon-size: var(--raster);
  --menu-height: var(--raster_2);
  --chat-width: 432px;
  --header-height: 72px;
  --footer-height: 72px;
  --main-padding: var(--raster_1_3);
  --side-right-width: minmax(0,1fr);
  --task-width: calc(var(--main-width) - var(--main-padding) * 2);
  --response-column-gap: 0.25em;
  --row-gap: 0.5em;
  --border-radius: 0.3em;
  --input-border-width: 1px;
  --input-border-offset: -1px;
  --input-border-style: solid;
  --input-border: 1px solid var(--color-input-border);
  --input-border-radius: 1px;
  --input-padding-v: 0.1em;
  --input-padding-h: 0.5em;
  --input-padding: var(--input-padding-v) var(--input-padding-h);
  --button-border-radius: 0.2em;
  --button-border-width: 1px;
  --button-fg: var(--color-button-fg);
  --button-bg: var(--color-button-bg);
  --button-hfg: var(--color-button-hfg);
  --button-hbg: var(--color-button-hbg);
  --button-border: 1px solid var(--color-input-border);
  --input-choice-appearence: none;
  --input-choice-offset-width: 2px;
  --input-choice-border-color: var(--color-input-border);
  --color-input-choice-inactive: var(--color-bg);
  --input-choice-border: calc(var(--input-choice-offset-width) * 2) solid;
  --input-choice-focus-color: var(--color-outline);
  --column-height: 1.7em;
  --gap-1: 0.1rem;
  --gap-2: 0.25rem;
  --gap-3: 0.5rem;
  --visual-ratio-width: 3;
  --visual-ratio-height: 2;
  --visual-width: 27rem;
  --visual-height: 18rem;
  --task-row-gap: 1rem;
  --task-column-gap: 0.5rem;
  --task-columns: 12;
  --task-column-width: calc((var(--task-width) - 5.5rem) / 12);
}
@media only screen and (hover: none) and (pointer: coarse) {
  :root {
    --font-h1: 600 var(--raster_3_2)/1.1 Montserrat, Helvetica, sans-serif;
    --font-h2: 500 var(--raster)/1.1 var(--font-family);
    --font-h3: 400 var(--raster_1_2)/1.1 var(--font-family);
    --font-h4: 400 var(--raster_1_2)/1.1 var(--font-family);
    --font-h5: 400 var(--raster_1_2)/1.1 var(--font-family);
    --font-p: 100 var(--raster_1_2)/1.4 var(--font-family);
    --font-l: 100 var(--raster_1_2)/1.4 var(--font-family);
    --font-button: 600 var(--raster_1_2)/1.7 var(--font-family);
  }
}
@media screen and (min-width: 1776px) {
  :root {
    --right-width: var(--menu-width);
    --main-width: calc(1200px - var(--main-padding) * 2);
  }
}
@media screen and (min-width: 1320px) and (max-width: 1776px) {
  :root {
    --right-width: var(--menu-width);
    --main-width: calc(1200px - var(--main-padding) * 2);
  }
}
@media screen and (min-width: 1248px) and (max-width: 1320px) {
  :root {
    --right-width: minmax(0, var(--menu-width));
    --main-width: calc(1200px - var(--main-padding));
  }
}
@media screen and (max-width: 1248px) {
  :root {
    --right-width: 0;
    --main-width: calc(var(--window-width) - var(--menu-width));
  }
}
:root {
  --icon-connected: "❤️";
  --icon-dashboard: "📊";
  --icon-disconnected: "💔";
  --icon-invited: "↗️";
  --icon-queued: "⏳";
  --icon-requested: "↘️";
  --icon-segment: "🎯";
  --icon-visited: "👀";
  --icon-visible: "👀";
  --icon-album: "🖼";
  --icon-following: "🔈";
  --icon-cue: "🎤";
  --icon-mc: "🎤";
  --icon-show: "🎪";
  --icon-controls: "🎛️";
  --icon-follower_count: "📣";
  --icon-tasks: "🤖";
  --icon-textinvite: "💌";
  --icon-textmessage: "✉️";
  --icon-textnote: "📝";
  --icon-edit: "✏️";
  --icon-darkmode: "🕶️";
  --icon-lightmode: "👓";
  --icon-switch: "🔀";
  --icon-calendar: "📅";
  --icon-scan: "📸";
  --icon-list: "📋";
  --icon-colorchooser: "🎨";
  --icon-reply: "↩";
  --icon-back: "🔙";
  --icon-check: "✅";
  --icon-submit: "✔︎";
  --icon-save: "💾";
  --icon-picture: "🖼️";
  --icon-send: "📤";
  --icon-upload: "📤";
  --icon-download: "📥";
  --icon-faq: "❓";
  --icon-imprint: "📇";
  --icon-legal: "📝";
  --icon-messages: "📨";
  --icon-pause: "❙ ❙";
  --icon-recycle: "♻️";
  --icon-reload: "🔄";
  --icon-remove: "❌";
  --icon-remotecontrol: "📡";
  --icon-close: "✕";
  --icon-search: "👓";
  --icon-start: "▶";
  --icon-proceed: "◀";
  --icon-info: "ℹ️";
  --icon-openright: "▶";
  --icon-closeright: "◀";
  --icon-stop: "■︎";
  --icon-volume: "︎🔈";
  --icon-muted: "︎🔇";
  --icon-trash: "🗑";
  --icon-alert: "⚠️";
  --icon-exception: "🚨";
  --icon-error: "🐞";
  --icon-sleeping: "⏳";
  --icon-running: "🏃‍️";
  --icon-stopped: "⏸";
  --icon-info: "ℹ️";
  --icon-menu: "𑁔";
  --icon-chat: "💬";
  --icon-moderation-0: "🍻";
  --icon-round: "🎲";
  --icon-moderation-1: "✅";
  --icon-moderation-2: "🤓";
  --icon-moderation-3: "👀";
  --icon-moderation-4: "🏅";
  --icon-moderation-5: "🏁";
  --icon-reaction-heart:"❤️";
  --icon-reaction-thumbsup:"👍";
  --icon-reaction-thumbsdown:"👎️";
  --icon-reaction-star:"⭐️";
  --icon-reaction-warn:"⚠️️";
  --icon-reaction-correct:"✅";
  --icon-reaction-false:"❌";
  --icon-spyglass: "🔍";
  --icon-team: "👫";
  --icon-emoji: "😀";
  --svg-play: url("data:image/svg+xml;utf8,<svg viewBox='0 0 72 72' xmlns='http://www.w3.org/2000/svg' fill='black'><polygon points='12,8 12,64 60,36' /></svg>");
  --svg-stop: url("data:image/svg+xml;utf8,<svg viewBox='0 0 72 72' xmlns='http://www.w3.org/2000/svg' fill='black'><rect x='12' y='12' width='48' height='48' rx='6' ry='6' /></svg>");
  --svg-pause: url("data:image/svg+xml;utf8,<svg viewBox='0 0 72 72' xmlns='http://www.w3.org/2000/svg' fill='black'><rect x='14' y='12' width='16' height='48' rx='4' ry='4' /><rect x='42' y='12' width='16' height='48' rx='4' ry='4' /></svg>");
}
:root {
  --icon-category-knowledge: "💡";
  --icon-category-music: "💿";
  --icon-category-estimate: "≅";
}
html {
  scroll-behavior: smooth;
  hyphens: none;
  color: var(--color-fg);
  background-color: var(--color-bg);
}
html * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html *::-webkit-scrollbar {
  display: none;
}
html * {
  box-sizing: border-box;
}
html body {
  overscroll-behavior: none;
  background-color: var(--color-mainmenu);
}
html main > section {
  margin-bottom: 4em;
}
html main > section:not(:first-of-type) {
  margin-top: 4em;
}
html h1 {
  font: var(--font-h1);
  letter-spacing: var(--letter-spacing-h1);
}
html h2 {
  font: var(--font-h2);
  letter-spacing: var(--letter-spacing-h2);
}
html h3 {
  font: var(--font-h3);
  letter-spacing: var(--letter-spacing-h3);
}
html h4 {
  font: var(--font-h4);
  letter-spacing: var(--letter-spacing-h4);
}
html h5 {
  font: var(--font-h5);
  letter-spacing: var(--letter-spacing-h5);
}
html h1:first-child, html h2:first-child, html h3:first-child, html h4:first-child, html h5:first-child, html h6:first-child {
  margin-top: 0;
}
html strong {
  font-weight: 600;
}
html p {
  font: var(--font-p);
  letter-spacing: var(--letter-spacing-p);
  margin-bottom: var(--raster_2_3);
}
html ul, html ol {
  font: var(--font-l);
  letter-spacing: var(--letter-spacing-l);
  margin: var(--raster) 0;
  padding-left: var(--raster);
}
html a[href]:not(.button, .cta) {
  color: inherit;
  text-decoration-color: var(--color-outline);
}
html a[href]:not(.button, .cta):hover {
  color: var(--color-outline);
  text-decoration-color: var(--color-outline);
}
html a[href]:not(.button, .cta):focus-within {
  outline: none;
  background-color: inherit;
}
html button, html input[type=submit], html input[type=reset] {
  appearance: none;
}
html input:not([type=range], [type=checkbox], [type=radio], [type=submit]), html select, html textarea, html [contenteditable], html qb-time:has([name]) {
  font: inherit;
  display: inline-block;
  text-decoration: none;
  border: var(--input-border-width) var(--input-border-style, solid) var(--color-input-border, gray);
  color: var(--color-input-fg, inherit);
  background-color: var(--color-input-bg, inherit);
}
html input:not([type=range], [type=checkbox], [type=radio], [type=submit]):focus-visible, html select:focus-visible, html textarea:focus-visible, html [contenteditable]:focus-visible, html qb-time:has([name]):focus-visible {
  --color-input-border: var(--color-input-focus-border);
  outline: calc(var(--input-border-width) * 2) var(--input-border-style, solid);
  outline-color: var(--color-input-border);
  outline-offset: calc(var(--input-border-width) * -2);
  --input-choice-border-color: var(--color-input-border);
}
html button.field_with_errors, html .button.field_with_errors, html input.field_with_errors, html select.field_with_errors, html textarea.field_with_errors, html [contenteditable].field_with_errors, html qb-time:has([name]).field_with_errors {
  --color-input-border: var(--color-input-error-border) !important;
  --color-label: var(--color-input-error-border) !important;
}
html .i-icon {
  display: var(--i-icon-display, contents);
}
html button:has(.i-icon), html input[type=submit]:has(.i-icon) {
  display: var(--button-display, grid);
  place-items: stretch !important;
}
html button, html .button, html a.cta, html input[type=submit], html input[type=reset] {
  transition: 0.2s ease;
  user-select: none;
  align-content: center;
  text-align: center;
  text-decoration: none;
  display: grid;
}
html button.nobutton, html .button.nobutton, html a.cta.nobutton, html input[type=submit].nobutton, html input[type=reset].nobutton {
  border: none;
  padding: 0;
  background: transparent;
}
html button.nobutton:hover, html .button.nobutton:hover, html a.cta.nobutton:hover, html input[type=submit].nobutton:hover, html input[type=reset].nobutton:hover {
  outline: var(--input-border-width) var(--input-border-style) var(--color-input-border, gray);
  background: transparent;
  border: none;
}
html button.cta, html .button.cta, html a.cta.cta, html input[type=submit].cta, html input[type=reset].cta {
  font: var(--font-button);
  letter-spacing: var(--letter-spacing-button);
  background: var(--button-bg);
  color: var(--button-fg, inherit);
  padding: 0.5em 1em;
  border: none;
  border-radius: var(--button-border-radius);
}
html button.cta:hover, html .button.cta:hover, html a.cta.cta:hover, html input[type=submit].cta:hover, html input[type=reset].cta:hover {
  --color-input-border: var(--color-input-focus-border) !important;
  background: var(--button-hbg);
  color: var(--button-hfg);
  outline: calc(var(--input-border-width) * 2) var(--input-border-style, solid);
  outline-color: var(--color-input-border);
  outline-offset: calc(var(--input-border-width) * -2);
  --input-choice-border-color: var(--color-input-border);
}
html input:not([type=range], [type=checkbox], [type=radio]), html select, html textarea, html [contenteditable], html qb-time:has([name]) {
  border-style: none;
  outline: var(--input-border-width) var(--input-border-style) var(--color-input-border, gray);
  outline-offset: var(--input-border-offset);
  border-radius: var(--input-border-radius);
  padding: var(--input-padding);
}
html input:not([type=range], [type=checkbox], [type=radio]):focus-visible, html select:focus-visible, html textarea:focus-visible, html [contenteditable]:focus-visible, html qb-time:has([name]):focus-visible {
  --color-input-border: var(--color-input-focus-border);
}
html [type=radio], html [type=checkbox] {
  display: inline-block;
  appearance: var(--input-choice-appearence);
  aspect-ratio: 1;
  outline: var(--input-choice-offset-width) solid var(--color-bg);
  min-width: var(--raster_1_2);
  line-height: 1em;
  padding: 0 !important;
  margin: 0;
  border: var(--input-choice-offset-width) solid var(--input-choice-border-color, inherit);
  outline-offset: calc(var(--input-choice-offset-width) * -2);
  background: var(--color-bg, inherit);
}
html [type=radio]:checked, html [type=checkbox]:checked {
  background: var(--color-label);
}
html [type=radio]:focus-visible, html [type=checkbox]:focus-visible {
  --color-input-border: var(--color-input-focus-border);
}
html .checked:not(input)[type=radio],
html .checked:not(input)[type=checkbox] {
  background: var(--input-choice-border-color) !important;
}
html [contenteditable] {
  overflow-wrap: anywhere;
  white-space: normal;
  align-self: stretch;
  overflow: hidden;
}
html menu {
  margin: 0;
  padding: 0;
}
html *::selection {
  background-color: var(--color-selection);
  color: var(--color-selection-contrast);
}
html fieldset {
  margin: 0;
  padding: 0;
  border: none;
}
html summary::-webkit-details-marker {
  display: none;
}
html.as-user {
  --color-logo: blue;
}
body {
  margin: 0;
  height: var(--window-height, 100dvh);
  display: grid;
  align-items: stretch;
  overflow: hidden;
  grid-template-rows: [header_ top_] var(--header-height) [_top _header mid_ main_] minmax(0, 1fr) [_main _mid footer_ bottom_] var(--footer-height) [_bottom _footer];
}
body:before {
  grid-area: side-left;
  content: "";
}
@media screen and (min-width: 1248px) {
  body {
    grid-template-columns: [side-left_] max-content [_side-left page_ index_ left_] var(--menu-width) [_index _left center_ main_] var(--main-width) [_main _center right_] var(--right-width) [_right _page side-right_] var(--side-right-width) [_side-right];
    grid-template-areas: "side-left  top-left     top-center     top-right     ." "side-left  mid-left     mid-center     mid-right     side-right" "side-left  bottom-left  bottom-center  bottom-right  side-right";
    --chat-area: side-right;
  }
}
@media screen and (max-width: 1248px) {
  body {
    grid-template-columns: [side-left_] max-content [_side-left page_ index_ left_] var(--menu-width) [_index _left center_ main_] var(--main-width) [_main _center _page _right];
    grid-template-areas: "side-left top-left top-center" "side-left mid-left mid-center" "side-left bottom-left bottom-center";
    --chat-area: top_ / center_ / _bottom / _center;
  }
}
body > main, body > main > .qb-show {
  grid-area: mid-center;
  grid-row: top_/_bottom;
}
body > main {
  background-color: var(--color-bg);
}
body > main > section,
body > main > .qb-show {
  max-width: 100vw;
}
body > main > .qb-show {
  overflow: auto;
  z-index: 1;
}
body > header {
  max-width: 100vw;
  z-index: 3;
  grid-row: top_/_top;
  grid-column: side-left_/_right;
  margin-left: var(--menu-width);
  display: grid;
  grid-template-columns: [icon_] var(--menu-width) [_icon logo_] 1fr [_logo dark_] var(--menu-width) [_dark profile_] var(--menu-width) [_profile];
  align-content: stretch;
  justify-content: left;
}
body > header #logo {
  align-self: start;
}
body > header .mode-dark-light {
  place-items: center;
}
body > header .profile-button {
  align-self: start;
  grid-column: profile_/_profile;
}
body footer {
  grid-area: bottom-center;
}
body > qb-nav {
  display: contents;
}
body > qb-nav > * {
  z-index: 3;
}
body #mainMenuDrawer {
  grid-area: side-left;
  display: grid;
  column-gap: var(--raster-6p);
  grid-template-rows: repeat(auto-fill, minmax(0, min-content));
  padding-top: var(--raster);
  --i-icon-size: var(--raster);
  --i-icon-font-size: var(--raster_2_3);
  --i-icon-letter-spacing: 0.5em;
}
body #mainMenuDrawer > a, body #mainMenuDrawer > div {
  order: 3;
}
body #mainMenuDrawer .profile-button {
  order: 1;
}
body #mainMenuDrawer .mode-dark-light {
  order: 2;
}
body #mainMenuDrawer > a {
  padding-left: calc(var(--raster_2_3) + var(--raster_1_6));
}
body #mainMenuDrawer .profile-button,
body #mainMenuDrawer .mode-dark-light {
  text-decoration: none;
  padding-left: 0;
  display: grid;
  grid-template-columns: var(--raster_2_3) 1fr;
  gap: var(--raster_1_6);
}
body #mainMenuDrawer .profile-button qb-user,
body #mainMenuDrawer .mode-dark-light qb-user {
  --slot-name-background: var(--color-mainmenu);
  --slot-name-color: var(--color-mainmenu-contrast);
  --slot-font-size: 1em;
}
body #mainMenuButton {
  grid-area: top-left;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
@media screen and (max-width: 1776px) {
  body {
    --chat-non-open-display: none;
  }
  body qb-chat::part(open) {
    grid-area: send !important;
  }
}
@media screen and (min-width: 1776px) {
  body qb-chat::part(open) {
    display: none !important;
  }
  body qb-chat {
    margin-left: var(--raster_2);
    padding-left: var(--raster_1_2);
    margin-right: var(--raster_1_2);
  }
}
body qb-chat {
  grid-area: var(--chat-area);
}
body main > .qb-show {
  padding-bottom: var(--raster_4);
}
body > header, body > footer {
  pointer-events: none;
}
body > header > *, body > footer > * {
  pointer-events: auto;
}
body > header:empty, body > footer:empty {
  display: none;
}
body > header:not(:empty) ~ main {
  padding-top: var(--header-height);
}
body footer:not(:empty) ~ main {
  padding-bottom: var(--footer-height);
}
body {
  --i-icon-size: var(--menu-width);
}
body #timer {
  order: 1;
  padding: 0 0.25em;
  --_nav-border-top-style: solid;
  grid-template-columns: 1ch 1ch min-content 1ch 1ch;
  font: var(--font-h2);
  line-height: 1em;
  text-shadow: 0 0 5px var(--color-dark);
  display: grid;
  place-items: center;
  text-align: center;
}
body #timer[stopped], body #timer.zero {
  display: none;
}
body #timer.tack::part(S):before {
  color: var(--color-blue);
}
body #timer[localtime]::part(S):before {
  content: ":";
}
body #timer::part(M), body #timer::part(S) {
  display: contents;
}
body > qb-nav, body > qb-chat {
  font: var(--menu-font);
}
body > qb-nav button, body > qb-chat button {
  border: none;
  padding: 0;
}
body #mainMenuButton {
  --i-icon-size: var(--menu-width);
  line-height: 1;
  background-color: transparent;
  color: var(--color-fg);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
body .profile-button {
  display: grid;
}
body .profile-button qb-user {
  display: contents;
}
body .profile-button qb-user::part(avatar) {
  height: 100%;
  width: auto;
  aspect-ratio: 1;
}
body .profile-button qb-user::part(slot) {
  display: none;
}
body .profile-button qb-user::part(name) {
  --slot-font: var(--menu-font);
  --slot-name-background: transparent!important;
}
body .profile-button span.sign-in {
  display: none;
}
body .profile-button qb-user[itemid=""]::part(name) {
  display: none;
}
body .profile-button qb-user[itemid=""] ~ span.sign-in {
  display: initial;
}
body .profile-button qb-user[itemid=""] ~ span.profile {
  display: none;
}
body qb-chat::part(scroll) {
  grid-area: messages;
  z-index: 1;
}
body #mainMenuDrawer {
  --main-menu-margin: var(--menu-width);
  border: none;
  margin-top: var(--header-height);
  max-width: 0;
  overflow: hidden;
  --color-outline: var(--color-mainmenu-contrast);
  background-color: var(--color-mainmenu);
  color: var(--color-mainmenu-contrast);
  transition: max-width 0.3s linear;
  white-space: nowrap;
}
body #mainMenuDrawer.open {
  max-width: 50vw;
}
body #mainMenuDrawer > div {
  padding: var(--raster) 0 var(--raster_1_4);
}
body #mainMenuDrawer > a, body #mainMenuDrawer > div {
  line-height: 1.2em;
  margin: 0 var(--main-menu-margin);
}
body #mainMenuDrawer .language-switch {
  padding: 0;
}
body #mainMenuDrawer .language-switch > a::before {
  content: var(--flag);
}
body #mainMenuDrawer .language-switch > a[aria-current=true] {
  text-decoration: none;
  pointer-events: none;
}
body #mainMenuDrawer::backdrop {
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
}
body #mainMenuDrawer[open] {
  transform: translateX(0);
}
body #mainMenuDrawer .mode-dark-light .i-icon::part(icon),
body #mainMenuDrawer .profile-button qb-user::part(avatar) {
  height: auto;
  width: auto;
  aspect-ratio: auto;
}
body dialog {
  background-color: var(--color-bg);
  color: var(--color-fg);
  font: var(--font-p);
}
body dialog.modal:not(.no-backdrop)::backdrop {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
}
body #emojiDialog {
  padding: 0;
  border: none;
}
body #emojiDialog qb-emoji-picker {
  --emoji-size: var(--raster);
  --category-emoji-size: var(--raster);
}
body #flashDialog {
  max-width: 50vw;
  min-width: calc(var(--raster) * 10);
  padding: 0;
  border: none;
}
body #flashDialog:has(div.alert) {
  outline: 2px solid var(--color-warn);
}
body #flashDialog > * {
  display: grid;
  gap: var(--raster_1_2);
  padding: var(--raster);
}
body #profileDialog {
  border: none;
  max-width: 50vw;
  min-width: calc(var(--raster) * 10);
  padding: 0;
}
body #profileDialog > * {
  min-height: calc(var(--raster) * 8);
  padding: var(--raster);
}
[data-category=knowledge] {
  order: -10;
}
[data-category=music] {
  order: -9;
}
[data-category=scores] {
  display: none;
}
[data-category=estimate] {
  order: -8;
}
div.ranking {
  display: flex;
  gap: 1em;
  flex-wrap: nowrap;
}
body > qb-chat {
  line-height: 1.1em;
  max-width: calc(var(--window-width) - var(--menu-width));
  z-index: 4;
  display: grid;
  --chat-row-gap: var(--raster_1_6);
  row-gap: var(--chat-row-gap);
  align-self: stretch;
  justify-self: end;
  --chat-input-column-width: calc(var(--chat-width) - var(--menu-width_2));
  grid-template-rows: 1fr min-content minmax(var(--footer-height), max-content);
  grid-template-columns: var(--menu-width) minmax(10ch, calc(var(--window-width) - var(--menu-width) * 2)) var(--menu-width);
  grid-template-areas: "messages messages messages" "picker picker picker" "emoji input send";
  --border-radius: 0.25em;
}
body > qb-chat > .qb-message {
  --i-icon-size: calc(var(--raster) - var(--raster_1_6));
}
body > qb-chat::part(bottom) {
  display: contents;
}
body > qb-chat::part(bottom):focus-within {
  --chat-no-open: none;
  --chat-no-send: block;
}
body > qb-chat::part(open) {
  grid-area: send;
  display: var(--chat-no-open);
}
body > qb-chat::part(emoji) {
  grid-area: emoji;
}
body > qb-chat::part(notice) {
  grid-area: picker;
}
body > qb-chat::part(send) {
  grid-area: send;
  display: var(--chat-no-send);
}
body > qb-chat::part(messages-scroll) {
  grid-area: messages;
}
body > qb-chat::part(messages) {
  row-gap: var(--chat-row-gap);
}
body > qb-chat.open {
  --chat-non-open-display: initial;
}
body > qb-chat.open.has-input {
  --chat-no-open: none !important;
}
body > qb-chat.open:not(.has-input) {
  --chat-no-send: none !important;
}
body > qb-chat .input {
  grid-area: input;
  justify-self: stretch;
  resize: vertical;
  min-height: var(--footer-height);
  max-height: 50vh;
  z-index: 10;
  font: var(--font-p) !important;
  line-height: 1.1em !important;
  white-space: normal;
  border: none !important;
}
body > qb-chat .qb-message {
  border: var(--input-border);
  border-radius: var(--border-radius);
  color: var(--slot-color-fg);
  background: var(--slot-color);
  --slot-name-color: var(--slot-color-fg);
  line-height: 1.1em;
  margin-left: 0;
  margin-right: calc(var(--menu-width) / 2);
}
body > qb-chat .qb-message:after {
  z-index: -1;
  place-self: stretch;
  content: "";
  background: var(--color-white);
  grid-column: s_/_s;
  grid-row: message_/_message;
  border-radius: var(--border-radius);
}
body > qb-chat .qb-message:has([slot=reference]:not(:empty)):after {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
body > qb-chat .qb-message:has([slot=reference]:not(:empty)) [slot=message]::part(avatar) {
  border-top-left-radius: 0 !important;
}
body > qb-chat .qb-message:before {
  z-index: -1;
  place-self: stretch;
  content: "";
  background: var(--color-bg-shader);
  grid-column: s_/_s;
  grid-row: reference_/_reference;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}
body > qb-chat .qb-message > ::part(slot) {
  grid-area: message;
  display: block;
  color: var(--color-fg);
  background: var(--color-bg);
}
body > qb-chat .qb-message [slot=message] {
  white-space: normal;
  --slot-name-prefix: "@" var(--slot-index);
}
body > qb-chat .qb-message [slot=message]::part(avatar) {
  grid-area: avatar;
  border-top-left-radius: var(--border-radius);
}
body > qb-chat .qb-message [slot=message]::part(name) {
  grid-area: from;
}
body > qb-chat .qb-message [slot=message]::part(slot) {
  grid-area: message;
  padding: var(--border-radius) calc(var(--border-radius) * 2) var(--border-radius);
}
body > qb-chat .qb-message [slot=reference] {
  overflow: hidden;
  text-overflow: ellipsis;
}
body > qb-chat .qb-message [slot=reference]:empty {
  display: none;
}
body > qb-chat .qb-message [slot=reference]::part(avatar) {
  grid-area: r-avatar;
  overflow: hidden;
  border-top-left-radius: var(--border-radius);
}
body > qb-chat .qb-message [slot=reference]::part(name) {
  grid-area: r-from;
}
body > qb-chat .qb-message [slot=reference]::part(slot) {
  grid-area: reference;
}
body > qb-chat .qb-message.my-message {
  margin-left: calc(var(--menu-width) / 2);
  margin-right: 0;
  --message-editable: block;
}
body > qb-chat .qb-message.my-message [slot=message]::part(name), body > qb-chat .qb-message.my-message [slot=message]::part(avatar) {
  display: none;
}
qb-participants {
  display: flex;
  flex-wrap: wrap;
  --slot-margin: calc(var(--raster_1_2) + var(--raster_1_6));
  margin-left: var(--slot-margin);
  gap: var(--raster_1_6);
  --slot-icon-size: var(--raster_1_2);
  --i-icon-size: var(--raster_1_2);
}
qb-participants .qb-entity-person {
  position: relative;
}
qb-participants .qb-entity-person > button {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  width: 1.7em;
  aspect-ratio: 1;
}
qb-participants .qb-entity-person .edit {
  order: 10;
}
qb-participants .qb-entity-person:not(:focus-within) .editNode {
  display: none;
}
qb-participants .qb-entity-person .editNode {
  z-index: 11;
  position: absolute;
  top: 0;
  left: 0;
}
qb-participants qb-player[index="0"] .leave-team {
  display: none;
}
qb-participants button.leave {
  order: 11;
}
qb-participants button.leave::before {
  content: var(--icon-remove);
}
qb-participants .qb-entity-person {
  overflow: visible;
}
qb-participants:before {
  order: -1000;
  content: var(--icon-mc);
  margin-left: calc(var(--slot-margin) * -1);
  justify-content: start;
  background: var(--slot-color, var(--color-blue80));
  color: var(--slot-avatar-color);
  outline: var(--slot-avatar-outline) solid;
  width: var(--slot-icon-size);
  height: var(--slot-icon-size);
}
qb-participants .qb-entity-collection {
  flex: 1 1 100%;
  margin-left: calc(var(--slot-margin) * -1);
  justify-content: start;
  --display-slot-select: none;
}
qb-participants .qb-entity-collection label[htmlFor^=slot-], qb-participants .qb-entity-collection input[name^=slot-] {
  display: var(--display-slot-select);
}
qb-participants .qb-entity-collection:not(.admin) button.edit {
  display: none;
}
qb-participants .qb-entity-collection .join-code {
  grid-column: 3;
}
qb-participants .qb-entity-collection .join-code:before {
  content: "[";
}
qb-participants .qb-entity-collection .join-code:after {
  content: "]";
}
qb-participants qb-slot {
  --slot-avatar: var(--slot-index, "?");
  --slot-name: "No Team";
}
qb-participants qb-slot.dragging {
  outline: 2px solid var(--color-outline);
}
qb-participants qb-slot label.join {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
}
qb-participants qb-slot label.join input:checked, qb-participants qb-slot label.join input:checked + * {
  display: none;
}
html[data-round="0"] qb-participants .qb-entity-collection, html[data-round="-0"] qb-participants .qb-entity-collection {
  --display-slot-select: initial;
}
html[data-round="0"] qb-participants .qb-entity-collection:has(label[for^=slot])::part(name), html[data-round="-0"] qb-participants .qb-entity-collection:has(label[for^=slot])::part(name) {
  display: none;
}
html[data-round="0"] qb-participants .qb-entity-collection[data-index="0"] .join-team,
html[data-round="0"] qb-participants .qb-entity-collection[data-index="0"] input[name=slot], html[data-round="-0"] qb-participants .qb-entity-collection[data-index="0"] .join-team,
html[data-round="-0"] qb-participants .qb-entity-collection[data-index="0"] input[name=slot] {
  display: none;
}
html[data-round="0"] qb-participants .qb-entity-collection::part(name),
html[data-round="0"] qb-participants .qb-entity-collection label[for^=slot], html[data-round="-0"] qb-participants .qb-entity-collection::part(name),
html[data-round="-0"] qb-participants .qb-entity-collection label[for^=slot] {
  grid-column: 3;
}
html[data-round="0"] qb-participants .qb-entity-collection input[name^=slot], html[data-round="-0"] qb-participants .qb-entity-collection input[name^=slot] {
  grid-column: 2;
}
html[data-round="0"] qb-participants .qb-entity-collection button.edit, html[data-round="-0"] qb-participants .qb-entity-collection button.edit {
  grid-column: 5;
}
html[data-round="0"] qb-participants .qb-entity-collection .join-code, html[data-round="-0"] qb-participants .qb-entity-collection .join-code {
  grid-column: 6;
}
html[data-round="0"] qb-participants .qb-entity-collection:not(.member-only) .join-team, html[data-round="-0"] qb-participants .qb-entity-collection:not(.member-only) .join-team {
  display: none;
}
html[data-round="0"] qb-participants .qb-entity-collection input.play-pause, html[data-round="-0"] qb-participants .qb-entity-collection input.play-pause {
  grid-column: 5;
  --mask: var(--svg-play);
  background-color: var(--color-fg);
  -webkit-mask: var(--mask) center/contain no-repeat;
  mask: var(--mask) center/contain no-repeat;
}
html[data-round="0"] qb-participants .qb-entity-collection input.play-pause:checked, html[data-round="-0"] qb-participants .qb-entity-collection input.play-pause:checked {
  --mask: var(--svg-pause);
}
html[data-round="0"] qb-participants nav, html[data-round="-0"] qb-participants nav {
  flex: 1 1 100%;
  margin-top: var(--raster_1_2);
  order: 1000;
}
section[itemtype=Team] > div,
section#users {
  display: grid;
  gap: var(--raster_1_4);
  grid-template-columns: [s_ rank_] min-content [_rank count_] min-content [_count avatar_] var(--raster) [_avatar nickname_] min-content [_nickname name_] 1fr [_name _e];
  grid-auto-rows: min-content;
  grid-auto-flow: dense;
  font: var(--font-p);
}
section[itemtype=Team] > div > *,
section#users > * {
  white-space: nowrap;
}
section#users h2,
section[itemtype=Team] h2 {
  cursor: context-menu;
}
section#users .rank,
section[itemtype=Team] .rank {
  justify-self: right;
}
section#users .rank:after,
section[itemtype=Team] .rank:after {
  content: ".";
}
section#users .rank,
section[itemtype=Team] .rank {
  grid-column: rank_/_rank;
}
section#users .avatar,
section[itemtype=Team] .avatar {
  grid-column: avatar_/_avatar;
  place-self: stretch;
  text-align: center;
  aspect-ratio: 1;
}
section#users .avatar:empty:before,
section[itemtype=Team] .avatar:empty:before {
  content: "👤";
}
section#users .nickname,
section[itemtype=Team] .nickname {
  grid-column: nickname_/_nickname;
}
section#users .name,
section[itemtype=Team] .name {
  grid-column: name_/_name;
}
section#users .count,
section[itemtype=Team] .count {
  grid-column: count_/_count;
}
section#users .count,
section[itemtype=Team] .count {
  justify-self: center;
}
section#users .count:after,
section[itemtype=Team] .count:after {
  content: "x";
}
@keyframes animating-alert {
  0%, 100% {
    background-color: var(--color-bg);
    color: var(--color-fg);
  }
  50% {
    background-color: var(--color-highlight-bg);
    color: var(--color-highlight-fg);
  }
}
@keyframes animation-static-bg {
  100% {
    background-color: var(--color-bg);
    color: var(--color-fg);
  }
}
@keyframes animation-static-active {
  100% {
    background-color: var(--color-active-bg);
    color: var(--color-active-fg);
  }
}
@keyframes animation-static-highlight {
  100% {
    background-color: var(--color-highlight-bg);
    color: var(--color-highlight-fg);
  }
}
@keyframes animation-static-todo {
  100% {
    background-color: var(--color-todo-bg);
    color: var(--color-todo-fg);
  }
}
html {
  --animate-static-highlight: animation-static-highlight 0s forwards;
  --animate-static-active: animation-static-active 0s forwards;
  --animate-static: var(--animate-static-active);
  --animate-static-todo: animation-static-todo 0s forwards;
  --animate-static-bg: animation-static-bg 0s forwards;
  --animate-alternate-highlight: 2s animating-alert alternate linear infinite;
}
.has-paused, .is-paused,
.alert-animate {
  --alert-animate: var(--animate-alternate-highlight);
}
.book {
  display: grid;
  row-gap: var(--raster_1_3);
  column-gap: var(--raster_1_4);
  grid-template-columns: [number] var(--raster_1_3) [left_] max-content [_left right_] 1fr [_right];
  counter-reset: step;
}
@media screen and (max-width: 650px) {
  .book {
    grid-template-columns: [number] var(--raster_1_3) [left_ right_] 1fr [_left _right];
  }
}
.book form, .book fieldset {
  display: contents;
}
.book .book-button {
  font: var(--font-2);
  justify-self: start;
}
.book legend {
  display: contents;
}
.book legend span {
  grid-column: number;
}
.book legend qb-gettext {
  grid-column: left_/_right;
}
.book form > fieldset > legend:before {
  counter-increment: step 1;
  grid-column: number;
  content: counter(step) ".";
}
.book input[type=submit] {
  grid-column: left_/_right;
}
.book .staff a:nth-of-type(odd) {
  grid-column: left_;
}
.book .staff a:nth-of-type(even) {
  grid-column: right_;
}
.book .slot label:nth-of-type(odd) {
  grid-column: left_;
}
.book .slot label:nth-of-type(even) {
  grid-column: right_;
}
.book .slot label.left {
  grid-column: left_;
}
.book .slot label.right {
  grid-column: right_;
}
.book .slot label > * {
  vertical-align: middle;
}
.book .slot label .active {
  color: var(--color-label-contrast);
  background-color: var(--color-label);
}
html {
  --color-scheme-dark: none;
  --color-scheme-light: contents;
}
html body > header {
  white-space: nowrap;
  gap: var(--raster_1_3);
}
html body > header #logo {
  text-decoration: none; /* removes underline */
  color: inherit; /* keeps the text color of parent */
  cursor: pointer; /* ensures pointer on hover */
}
html body > header #headline {
  font: var(--font-h2);
  line-height: var(--header-height);
}
html[data-color-scheme=dark] {
  --color-scheme-dark: contents;
  --color-scheme-light: none;
}
html .mode-dark-light {
  text-decoration: none;
}
html .mode-dark-light i-darkmode {
  --i-icon-display: var(--color-scheme-light, none) ;
}
html .mode-dark-light i-lightmode {
  --i-icon-display: var(--color-scheme-dark, none) ;
}
html:not(.show) body > main {
  grid-column: left_/_right;
  grid-row: top_/_bottom;
  background-color: var(--color-bg);
  display: block;
  overflow: auto;
}
section {
  padding: var(--raster_4) 0;
}
section:nth-of-type(even) {
  background: var(--color-even);
  color: var(--color-even-contrast);
}
section:nth-of-type(odd) {
  background: var(--color-bg);
  color: var(--color-fg);
}
menu.cta {
  display: flex;
  justify-content: center;
  list-style-type: none;
  gap: var(--raster_1_2);
  flex-wrap: wrap;
  margin-top: var(--raster_2);
  margin-bottom: var(--raster);
}
menu.cta:has(qb-show-card) {
  gap: var(--raster_2);
}
menu.cta:has(qb-show-card) > span {
  display: none;
}
section#hero {
  display: grid;
  hyphens: none;
  padding-bottom: 0;
}
@media screen and (max-width: 1248px) {
  section#hero {
    grid-template-columns: 1fr;
    grid-template-areas: "h1" "players" "quizmasters" "business" "h4" "menu";
  }
  section#hero nav.box {
    display: contents !important;
  }
  section#hero nav.box > * {
    margin: 0 var(--main-vertical-) 0;
  }
}
@media screen and (min-width: 1248px) {
  section#hero {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "h1 nav" "h4 nav" "menu nav";
    grid-template-rows: 1fr min-content min-content;
  }
  section#hero h1, section#hero h4 {
    margin-right: calc(var(--menu-width) + var(--raster));
  }
}
section#hero h1 {
  line-height: 1.1;
  margin-bottom: var(--raster);
  grid-area: h1;
}
section#hero h2 {
  grid-area: h4;
  margin-bottom: var(--raster_1_4);
}
section#hero div.show-cards {
  grid-area: menu;
}
section#hero nav.box {
  margin: 0 var(--main-vertical-) 0 var(--main-vertical);
  grid-area: nav;
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "players quizmasters" "business business";
}
section#hero nav.box:has(> a:nth-child(4)) {
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "players quizmasters" "business education";
}
section#hero nav.box > a {
  background: linear-gradient(135deg, var(--theme-accent) 0%, var(--theme-muted) 100%);
  color: var(--theme-contrast);
  padding: var(--raster_2_3) var(--raster_2_3) var(--raster_1_2);
  font: var(--font-p);
  text-decoration: none;
  position: relative;
}
section#hero nav.box > a:not(:hover)::after {
  opacity: 0.6;
}
section#hero nav.box > a::after {
  content: "⌄";
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  font-size: 2em;
  transform: translateX(-50%) scale(2, 1);
}
section#hero nav.box > a[href$=players] {
  --theme-accent: var(--color-primary);
  --theme-muted: var(--color-primary_8);
  --theme-contrast: var(--color-primary-contrast);
  grid-area: players;
}
section#hero nav.box > a[href$=quizmasters] {
  --theme-accent: var(--color-analogous1);
  --theme-muted: var(--color-analogous1_8);
  --theme-contrast: var(--color-analogous1-contrast);
  grid-area: quizmasters;
}
section#hero nav.box > a[href$=businesses] {
  --theme-accent: var(--color-triad2);
  --theme-muted: var(--color-triad2_8);
  --theme-contrast: var(--color-triad2-contrast);
  grid-area: business;
}
section#hero nav.box > a[href$=education] {
  background-color: var(--color-);
  grid-area: education;
}
section h3 {
  font-weight: 600;
  margin-bottom: var(--raster_1_4);
}
section h4 {
  margin-top: var(--raster_1_2);
  margin-bottom: var(--raster_1_6);
}
menu.cta li {
  display: inline-block;
}
menu.cta li > a {
  padding: var(--raster_1_2) var(--raster);
}
#players {
  display: grid;
  hyphens: none;
}
@media screen and (max-width: 1248px) {
  #players {
    grid-template-columns: 1fr;
    grid-template-areas: "h3" "h2" "p" "ul" "nav" "code" "menu" "community-h" "community";
  }
  #players .community {
    margin: 0 var(--main-vertical-);
  }
}
@media screen and (min-width: 1248px) {
  #players {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "h3 community-h" "h2 community" "p community" "ul community" "menu menu" "nav nav" "code code";
  }
  #players .community {
    margin: 0 var(--main-vertical-) 0 var(--main-vertical);
    grid-template-rows: 1fr 1fr;
  }
  #players p.code {
    margin: var(--raster_2) 0 var(--raster-2);
  }
}
#players ul.community {
  align-self: start;
  list-style-type: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
#players ul.community ol {
  margin-top: var(--raster_1_2);
  margin-bottom: 0;
  font-size: var(--raster_1_2);
  list-style-type: decimal;
}
#players ul.community > li {
  padding: var(--raster_1_2);
}
#players ul.community li > span.name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: bottom;
}
#players ul.community .box-where-we-play {
  background: linear-gradient(135deg, var(--color-primary_3), var(--color-primary_5));
  color: var(--color-primary_5-contrast);
}
#players ul.community .box-where-we-play ol {
  padding-left: 4ch;
}
#players ul.community .box-where-we-play li::marker {
  content: counter(list-item) " ";
}
#players ul.community .box-where-we-play .countries {
  display: grid;
  grid-template-columns: repeat(8, min-content);
  justify-content: center;
  list-style-type: none;
}
#players ul.community .box-by-the-numbers {
  background: linear-gradient(135deg, var(--color-muted_3), var(--color-muted_5));
  color: var(--color-muted_5-contrast);
}
#players ul.community .box-by-the-numbers ol {
  padding-left: 6ch;
}
#players ul.community .box-by-the-numbers li::marker {
  content: counter(list-item) " ";
}
#players ul.community .box-top-players {
  background: linear-gradient(135deg, var(--color-analogous1_3), var(--color-analogous1_5));
  color: var(--color-analogous1_5-contrast);
}
#players ul.community .box-top-teams {
  background: linear-gradient(135deg, var(--color-analogous2_3), var(--color-analogous2_5));
  color: var(--color-analogous2_5-contrast);
}
#players menu.show-cards {
  gap: 1px;
  grid-area: nav;
  align-self: start;
  overflow-y: scroll;
  margin: 0 var(--main-vertical-);
  display: flex !important;
  flex-wrap: nowrap;
}
#players menu.show-cards hr {
  display: none;
}
#players menu.show-cards qb-show-card > * {
  flex: 0 0 var(--raster_8);
}
#players menu.cta {
  grid-area: menu;
}
#players h3 {
  margin-bottom: var(--raster);
  grid-area: h3;
}
#players h2.headline {
  margin-bottom: var(--raster);
  grid-area: h2;
}
#players p.text {
  grid-area: p;
}
#players ul.bullets {
  grid-area: ul;
}
#players h4.community {
  grid-area: community-h;
}
#players ul.community {
  grid-area: community;
}
#players p.code {
  grid-area: code;
  justify-self: center;
}
#microcta {
  --card-raster: var(--raster_2_3);
}
.cta-secondary {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}
#players h3 {
  color: var(--color-accent);
}
#quizmasters h3 {
  color: var(--color-primary);
}
#businesses h3 {
  color: var(--color-fg);
}
:root[data-color-scheme=dark] img {
  filter: invert(100%);
}
ul.references {
  flex-wrap: wrap;
  list-style-type: none;
  display: flex;
  padding: 0;
  filter: grayscale(100%);
  justify-content: center;
  margin: var(--raster_2) auto;
  gap: var(--raster);
}
ul.references img {
  height: var(--raster);
}
blockquote {
  font: var(--font-l);
  font-style: italic;
  margin: var(--raster_2) 0;
  padding-left: var(--raster);
  border-left: 4px solid var(--color-accent);
}
blockquote div {
  margin-bottom: var(--raster_2_3);
}
qb-profile-chooser {
  place-self: stretch;
  width: 100%;
}
qb-profile-chooser:not([itemid]) {
  display: none;
}
qb-auth {
  width: 100%;
  display: grid;
}
qb-time.sheet {
  display: grid;
  grid-template-columns: 1fr min-content 1fr;
  grid-template-areas: "a a a" "d d d" "b b b" "H _2 M" "Z Z Z";
  justify-items: center;
  line-height: 1.2em;
  grid-template-rows: repeat(5, min-content) 1fr;
}
qb-time.sheet::part(a) {
  grid-area: a;
}
qb-time.sheet::part(d) {
  grid-area: d;
}
qb-time.sheet::part(d) {
  font-size: 1.5em;
}
qb-time.sheet::part(_1) {
  display: none;
}
qb-time.sheet::part(b) {
  grid-area: b;
}
qb-time.sheet::part(H) {
  grid-area: H;
  justify-self: end;
}
qb-time.sheet::part(M) {
  grid-area: M;
  justify-self: start;
}
qb-time.sheet::part(_2) {
  grid-area: _2;
}
qb-time.sheet::part(H), qb-time.sheet::part(M), qb-time.sheet::part(_2) {
  font-size: 0.9em;
  line-height: 1;
}
qb-time.sheet::part(Z) {
  grid-area: Z;
  font-size: 0.5em;
  line-height: 1;
}
menu:has(qb-show-card) {
  --card-raster: var(--raster);
  --card-raster_2_1: calc(var(--card-raster) * 2);
  --card-raster_2_3: calc(var(--card-raster) / 3 * 2);
  --card-raster_1_3: calc(var(--card-raster) / 3);
  --card-raster_1_4: calc(var(--card-raster) / 4);
  --card-raster_1_2: calc(var(--card-raster) / 2);
  --card-raster_1_6: calc(var(--card-raster) / 6);
  --card-raster_8_1: calc(var(--card-raster) * 8);
  --card-raster_12_1: calc(var(--card-raster) * 12);
  --card-raster_1_12: calc(var(--card-raster) / 12);
}
menu:has(qb-show-card) > span {
  display: none;
}
qb-show-card {
  display: contents;
  font: 100 var(--card-raster_2_3)/1.2 var(--font-family);
}
qb-show-card.show-day-1 {
  --color-show: var(--color-show1);
  --color-show-contrast: var(--color-show1-contrast);
}
qb-show-card.show-day-2 {
  --color-show: var(--color-show2);
  --color-show-contrast: var(--color-show2-contrast);
}
qb-show-card.show-day-3 {
  --color-show: var(--color-show3);
  --color-show-contrast: var(--color-show3-contrast);
}
qb-show-card.show-day-4 {
  --color-show: var(--color-show4);
  --color-show-contrast: var(--color-show4-contrast);
}
qb-show-card.show-day-5 {
  --color-show: var(--color-show5);
  --color-show-contrast: var(--color-show5-contrast);
}
qb-show-card.show-day-6 {
  --color-show: var(--color-show6);
  --color-show-contrast: var(--color-show6-contrast);
}
qb-show-card.show-day-7 {
  --color-show: var(--color-show7);
  --color-show-contrast: var(--color-show7-contrast);
}
qb-show-card.show-day-8 {
  --color-show: var(--color-show8);
  --color-show-contrast: var(--color-show8-contrast);
}
qb-show-card [data-category=feedback] {
  display: none;
}
qb-show-card .ranks {
  display: flex;
  gap: 0.5em;
  grid-column: ranks_/_ranks;
}
qb-show-card [data-rank]:after {
  content: attr(data-rank);
}
qb-show-card [data-rank="1"]:after {
  content: "🥇";
}
qb-show-card [data-rank="2"]:after {
  content: "🥈";
}
qb-show-card [data-rank="3"]:after {
  content: "🥉";
}
qb-show-card .vendor > span[lang]:before {
  content: var(--flag);
}
menu:has(qb-show-card) hr {
  visibility: hidden;
  grid-column: 1/-1;
}
menu.show-list:has(qb-show-card) {
  display: grid;
  grid-template-columns: [time_] min-content [_time header_] minmax(min-content, 1fr) [_header vendor_] max-content [_vendor nav_] min-content [_nav];
}
menu.show-list:has(qb-show-card) qb-show-card:nth-child(even) {
  --color-current-bg: var(--color-even);
  --color-current-fg: var(--color-even-contrast);
}
menu.show-list:has(qb-show-card) qb-show-card:nth-child(odd) {
  --color-current-bg: var(--color-odd);
  --color-current-fg: var(--color-odd-contrast);
}
menu.show-list:has(qb-show-card) qb-show-card > div {
  display: contents;
}
menu.show-list:has(qb-show-card) qb-show-card > div > * {
  padding: var(--raster_1_4) var(--raster_1_4);
  background: var(--color-current-bg);
  color: var(--color-current-fg);
  grid-row: calc(2 * var(--show-card-counter) - 1);
}
menu.show-list:has(qb-show-card) qb-show-card > div > header {
  grid-column: header_/_header;
}
menu.show-list:has(qb-show-card) qb-show-card > div > qb-time {
  grid-column: time_/_time;
}
menu.show-list:has(qb-show-card) qb-show-card > div > .vendor {
  grid-column: vendor_/_vendor;
}
menu.show-list:has(qb-show-card) qb-show-card > div .nav {
  grid-column: nav_/_nav;
  text-align: right;
}
menu.show-list:has(qb-show-card) qb-show-card > div ul.slots {
  padding-top: 0;
  padding-left: 10ch;
  list-style-type: none;
  grid-column: 1/-1;
  grid-row: calc(2 * var(--show-card-counter));
  display: grid;
  grid-template-columns: [team_] max-content [_team trophy_] var(--raster) [_trophy ranks_] 1fr [_ranks];
  margin: 0;
}
menu.show-list:has(qb-show-card) qb-show-card > div ul.slots .name {
  grid-column: team_/_team;
}
menu.show-list:has(qb-show-card) qb-show-card > div ul.slots .trophy {
  grid-column: trophy_/_trophy;
  justify-self: center;
}
menu.show-list:has(qb-show-card) qb-show-card > div ul.slots li {
  display: contents;
}
menu.show-list:has(qb-show-card) qb-show-card > div ul.slots li:has(.ranks > *):not(:has(.ranks > :not([data-rank="1"]))) .trophy:before {
  content: "🏆";
}
menu.show-list:has(qb-show-card) qb-show-card > div ul.slots li > * {
  order: var(--order);
}
menu.show-list:has(qb-show-card) qb-show-card > div ul.slots li .category {
  text-transform: capitalize;
}
menu.show-cards {
  display: grid;
  gap: var(--card-raster_1_2);
  grid-template-columns: repeat(auto-fit, var(--card-raster_8_1));
}
menu.show-cards qb-show-card > div .badge-book {
  display: none;
}
menu.show-cards qb-show-card > div {
  background: var(--color-mute);
  color: var(--color-mute-contrast) !important;
  --slot-name-color: var(--color-mute-contrast) !important;
  --color-outline: var(--color-mute-contrast);
  margin: 0;
  border-radius: var(--card-raster_1_12);
  display: grid;
  gap: var(--card-raster_1_6) var(--card-raster_1_3);
  grid-template-columns: var(--card-raster_2_1) 1fr;
  grid-template-areas: "time header" "time vendor" "time cta";
  grid-template-rows: min-content 1fr min-content min-content;
  padding: var(--card-raster_1_6);
  padding-left: 0;
  position: relative;
}
menu.show-cards qb-show-card > div:has(a.nav) {
  text-decoration: none;
  background-color: var(--color-accent);
  color: var(--color-accent-contrast) !important;
  --slot-name-color: var(--color-accent-contrast) !important;
}
menu.show-cards qb-show-card > div:has(a.nav):hover {
  background: var(--button-hbg) !important;
}
menu.show-cards qb-show-card > div:has(a.nav):hover > * {
  color: var(--button-hfg) !important;
}
menu.show-cards qb-show-card > div > svg {
  grid-area: icon;
  width: var(--card-raster);
  place-self: stretch;
  display: none;
}
menu.show-cards qb-show-card > div > ul {
  display: none;
}
menu.show-cards qb-show-card > div > header {
  grid-area: header;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Number of lines to show */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
menu.show-cards qb-show-card > div > .vendor {
  grid-area: vendor;
  font-size: 0.5em;
}
menu.show-cards qb-show-card > div > qb-time.sheet {
  grid-area: time;
  color: var(--color-show-contrast);
}
menu.show-cards qb-show-card > div:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: var(--color-show);
  width: var(--card-raster_2_1);
}
menu.show-cards qb-show-card > div > .nav {
  align-self: end;
  grid-area: cta;
  justify-self: end;
}
menu.show-cards qb-show-card > div > .nav:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
@media screen and (min-width: 768px) {
  html:not(.show) {
    --main-vertical: var(--menu-width);
    --main-vertical-: var(--menu-width-);
  }
  html:not(.show) body > main {
    margin: 0 var(--main-vertical-);
    padding: var(--header-height) 0 calc(2 * var(--header-height)) var(--main-vertical);
  }
  html:not(.show) body > main > * {
    padding: var(--header-height) var(--main-vertical) calc(2 * var(--header-height));
  }
}
@media screen and (max-width: 768px) {
  html:not(.show) {
    --main-vertical: var(--raster_1);
    --main-vertical-: var(--raster-1);
    --menu-width: var(--raster_3_2);
    --menu-width-: calc(-1 * var(--menu-width));
    --header-height: var(--raster_3_2);
  }
  html:not(.show) body > main {
    margin: 0;
    padding: var(--header-height) 0 calc(2 * var(--header-height));
  }
  html:not(.show) body > main > * {
    padding: var(--header-height) var(--main-vertical) calc(2 * var(--header-height));
  }
  body #mainMenuDrawer {
    --main-menu-margin: var(--raster);
  }
  body #mainMenuDrawer.open {
    max-width: 100vw;
  }
  body > header {
    grid-template-columns: [icon_] var(--menu-width) [_icon logo_] 1fr [_logo];
  }
  html ul, html ol {
    padding: var(--raster_1_3);
    margin-left: var(--raster_1_3);
  }
  html menu.cta {
    gap: var(--raster);
  }
  html .world-coverage {
    gap: var(--raster);
    justify-content: start;
  }
  html .world-coverage .countries {
    justify-content: center;
    padding: 0;
    margin: 0;
  }
}
@media only screen and (hover: none) and (pointer: coarse) {
  body .qb-show > header {
    grid-template-columns: 1fr;
  }
  #players menu.cta {
    display: grid;
    justify-content: stretch;
  }
  dialog.modal {
    position: relative;
    font-size: var(--raster_2_3);
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin: auto 0;
  }
  dialog.modal:before {
    position: absolute;
    top: 0;
    right: 0;
    content: var(--icon-close);
    z-index: 100;
    height: 1em;
    padding: 0.25em;
    line-height: 1em;
    aspect-ratio: 1;
    text-align: center;
    background: var(--color-bg-shader);
    color: var(--color-bg);
  }
  dialog.modal > div {
    padding: var(--raster) !important;
  }
}
.scroll-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-height);
  max-width: 100vw;
  display: grid;
  grid-template-columns: [logo] var(--menu-width) [title] 1fr [dark-light] var(--menu-width) [profile] var(--menu-width);
  backdrop-filter: blur(10px);
  transform: translateY(0);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
  will-change: transform;
  z-index: 1000;
}
.scroll-header.hidden {
  transform: translateY(-100%);
}
.scroll-header.scrolled {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.scroll-header #logo {
  grid-column: logo;
}
.scroll-header #headline {
  grid-column: title;
}
.scroll-header .mode-dark-light {
  display: none;
  grid-column: dark-light;
}
.scroll-header .profile-button {
  display: none;
  grid-column: profile;
}
qb-gettext span > :first-child:not(br) {
  margin-top: 0;
}
qb-gettext span > :last-child:not(br) {
  margin-bottom: 0;
}
qb-gettext:not(.show, [edit]) span:nth-child(n+2) {
  display: none;
}
qb-gettext.show span[lang], qb-gettext[edit] span[lang] {
  padding-left: 2.4ch !important;
}
qb-gettext.show span[lang]:before, qb-gettext[edit] span[lang]:before {
  margin-left: -2.2ch;
  content: var(--flag);
}
qb-gettext.show span > div:first-child, qb-gettext[edit] span > div:first-child {
  display: contents;
}
qb-gettext qb-gettext-edit {
  outline: 2px solid blue;
  position: absolute;
  z-index: 100000;
  left: 0;
  right: 0;
  cursor: text;
}
:root.edit qb-gettext {
  cursor: context-menu;
}
html.development .anchor, html.development .focus {
  border-width: 1px;
}
html.development .anchor.focus {
  border-color: purple;
}
html.development .anchor:not(.focus) {
  border-color: blue;
}
html.development .focus:not(.anchor) {
  border-color: orange;
}
html.development .selection-left {
  border-left-style: solid;
}
html.development .selection-right {
  border-right-style: solid;
}