@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: rgb(13.9607843137%, 1.4117647059%, 1.8039215686%);
  --color-primary_1-contrast: #ffffff;
  --color-primary_2: rgb(27.9215686275%, 2.8235294118%, 3.6078431373%);
  --color-primary_2-contrast: #ffffff;
  --color-primary_3: rgb(41.8823529412%, 4.2352941176%, 5.4117647059%);
  --color-primary_3-contrast: #ffffff;
  --color-primary_4: rgb(55.8431372549%, 5.6470588235%, 7.2156862745%);
  --color-primary_4-contrast: #ffffff;
  --color-primary_5: #b21217;
  --color-primary_5-contrast: #ffffff;
  --color-primary_6: rgb(90.9531812725%, 10.5370148059%, 13.050020008%);
  --color-primary_6-contrast: #ffffff;
  --color-primary_7: rgb(93.2148859544%, 32.9027611044%, 34.787515006%);
  --color-primary_7-contrast: #111111;
  --color-primary_8: rgb(95.4765906363%, 55.268507403%, 56.525010004%);
  --color-primary_8-contrast: #111111;
  --color-primary_9: rgb(97.7382953181%, 77.6342537015%, 78.262505002%);
  --color-primary_9-contrast: #111111;
  --color-tone: rgb(94.3457382953%, 93.3405362145%, 93.3719487795%);
  --color-tone-contrast: #111111;
  --color-tone_1: rgb(20.3007603041%, 17.2364945978%, 17.3322529012%);
  --color-tone_1-contrast: #ffffff;
  --color-tone_2: rgb(40.6015206082%, 34.4729891957%, 34.6645058023%);
  --color-tone_2-contrast: #ffffff;
  --color-tone_3: rgb(59.8727490996%, 52.7390156062%, 52.9619447779%);
  --color-tone_3-contrast: #ffffff;
  --color-tone_4: rgb(77.1092436975%, 73.0397759104%, 73.1669467787%);
  --color-tone_4-contrast: #111111;
  --color-tone_5: rgb(94.3457382953%, 93.3405362145%, 93.3719487795%);
  --color-tone_5-contrast: #111111;
  --color-tone_6: rgb(95.4765906363%, 94.6724289716%, 94.6975590236%);
  --color-tone_6-contrast: #111111;
  --color-tone_7: rgb(96.6074429772%, 96.0043217287%, 96.0231692677%);
  --color-tone_7-contrast: #111111;
  --color-tone_8: rgb(97.7382953181%, 97.3362144858%, 97.3487795118%);
  --color-tone_8-contrast: #111111;
  --color-tone_9: rgb(98.8691476591%, 98.6681072429%, 98.6743897559%);
  --color-tone_9-contrast: #111111;
  --color-neutral: #808080;
  --color-neutral-contrast: #ffffff;
  --color-neutral_1: rgb(10.0392156863%, 10.0392156863%, 10.0392156863%);
  --color-neutral_1-contrast: #ffffff;
  --color-neutral_2: rgb(20.0784313725%, 20.0784313725%, 20.0784313725%);
  --color-neutral_2-contrast: #ffffff;
  --color-neutral_3: rgb(30.1176470588%, 30.1176470588%, 30.1176470588%);
  --color-neutral_3-contrast: #ffffff;
  --color-neutral_4: rgb(40.1568627451%, 40.1568627451%, 40.1568627451%);
  --color-neutral_4-contrast: #ffffff;
  --color-neutral_5: gray;
  --color-neutral_5-contrast: #ffffff;
  --color-neutral_6: rgb(60.1568627451%, 60.1568627451%, 60.1568627451%);
  --color-neutral_6-contrast: #111111;
  --color-neutral_7: rgb(70.1176470588%, 70.1176470588%, 70.1176470588%);
  --color-neutral_7-contrast: #111111;
  --color-neutral_8: rgb(80.0784313725%, 80.0784313725%, 80.0784313725%);
  --color-neutral_8-contrast: #111111;
  --color-neutral_9: rgb(90.0392156863%, 90.0392156863%, 90.0392156863%);
  --color-neutral_9-contrast: #111111;
  --color-muted: rgb(60.3921568627%, 16.4705882353%, 17.8431372549%);
  --color-muted-contrast: #ffffff;
  --color-muted_1: rgb(12.0784313725%, 3.2941176471%, 3.568627451%);
  --color-muted_1-contrast: #ffffff;
  --color-muted_2: rgb(24.1568627451%, 6.5882352941%, 7.137254902%);
  --color-muted_2-contrast: #ffffff;
  --color-muted_3: rgb(36.2352941176%, 9.8823529412%, 10.7058823529%);
  --color-muted_3-contrast: #ffffff;
  --color-muted_4: rgb(48.3137254902%, 13.1764705882%, 14.2745098039%);
  --color-muted_4-contrast: #ffffff;
  --color-muted_5: rgb(60.3921568627%, 16.4705882353%, 17.8431372549%);
  --color-muted_5-contrast: #ffffff;
  --color-muted_6: rgb(78.8907563025%, 22.5994397759%, 24.3585434174%);
  --color-muted_6-contrast: #ffffff;
  --color-muted_7: rgb(84.1680672269%, 41.9495798319%, 43.268907563%);
  --color-muted_7-contrast: #111111;
  --color-muted_8: rgb(89.4453781513%, 61.299719888%, 62.1792717087%);
  --color-muted_8-contrast: #111111;
  --color-muted_9: rgb(94.7226890756%, 80.649859944%, 81.0896358543%);
  --color-muted_9-contrast: #111111;
  --color-complement: rgb(7.0588235294%, 69.8039215686%, 62.614379085%);
  --color-complement-contrast: #ffffff;
  --color-complement_1: rgb(1.4117647059%, 13.9607843137%, 12.522875817%);
  --color-complement_1-contrast: #ffffff;
  --color-complement_2: rgb(2.8235294118%, 27.9215686275%, 25.045751634%);
  --color-complement_2-contrast: #ffffff;
  --color-complement_3: rgb(4.2352941176%, 41.8823529412%, 37.568627451%);
  --color-complement_3-contrast: #ffffff;
  --color-complement_4: rgb(5.6470588235%, 55.8431372549%, 50.091503268%);
  --color-complement_4-contrast: #ffffff;
  --color-complement_5: rgb(7.0588235294%, 69.8039215686%, 62.614379085%);
  --color-complement_5-contrast: #ffffff;
  --color-complement_6: rgb(10.5370148059%, 90.9531812725%, 81.7388288649%);
  --color-complement_6-contrast: #ffffff;
  --color-complement_7: rgb(32.9027611044%, 93.2148859544%, 86.3041216487%);
  --color-complement_7-contrast: #111111;
  --color-complement_8: rgb(55.268507403%, 95.4765906363%, 90.8694144324%);
  --color-complement_8-contrast: #111111;
  --color-complement_9: rgb(77.6342537015%, 97.7382953181%, 95.4347072162%);
  --color-complement_9-contrast: #111111;
  --color-analogous1: #b25d12;
  --color-analogous1-contrast: #ffffff;
  --color-analogous1_1: rgb(13.9607843137%, 7.2941176471%, 1.4117647059%);
  --color-analogous1_1-contrast: #ffffff;
  --color-analogous1_2: rgb(27.9215686275%, 14.5882352941%, 2.8235294118%);
  --color-analogous1_2-contrast: #ffffff;
  --color-analogous1_3: rgb(41.8823529412%, 21.8823529412%, 4.2352941176%);
  --color-analogous1_3-contrast: #ffffff;
  --color-analogous1_4: rgb(55.8431372549%, 29.1764705882%, 5.6470588235%);
  --color-analogous1_4-contrast: #ffffff;
  --color-analogous1_5: #b25d12;
  --color-analogous1_5-contrast: #ffffff;
  --color-analogous1_6: rgb(90.9531812725%, 48.2320928371%, 10.5370148059%);
  --color-analogous1_6-contrast: #ffffff;
  --color-analogous1_7: rgb(93.2148859544%, 61.1740696279%, 32.9027611044%);
  --color-analogous1_7-contrast: #111111;
  --color-analogous1_8: rgb(95.4765906363%, 74.1160464186%, 55.268507403%);
  --color-analogous1_8-contrast: #111111;
  --color-analogous1_9: rgb(97.7382953181%, 87.0580232093%, 77.6342537015%);
  --color-analogous1_9-contrast: #111111;
  --color-analogous2: #b21267;
  --color-analogous2-contrast: #ffffff;
  --color-analogous2_1: rgb(13.9607843137%, 1.4117647059%, 8.0784313725%);
  --color-analogous2_1-contrast: #ffffff;
  --color-analogous2_2: rgb(27.9215686275%, 2.8235294118%, 16.1568627451%);
  --color-analogous2_2-contrast: #ffffff;
  --color-analogous2_3: rgb(41.8823529412%, 4.2352941176%, 24.2352941176%);
  --color-analogous2_3-contrast: #ffffff;
  --color-analogous2_4: rgb(55.8431372549%, 5.6470588235%, 32.3137254902%);
  --color-analogous2_4-contrast: #ffffff;
  --color-analogous2_5: #b21267;
  --color-analogous2_5-contrast: #ffffff;
  --color-analogous2_6: rgb(90.9531812725%, 10.5370148059%, 53.2581032413%);
  --color-analogous2_6-contrast: #ffffff;
  --color-analogous2_7: rgb(93.2148859544%, 32.9027611044%, 64.943577431%);
  --color-analogous2_7-contrast: #111111;
  --color-analogous2_8: rgb(95.4765906363%, 55.268507403%, 76.6290516206%);
  --color-analogous2_8-contrast: #111111;
  --color-analogous2_9: rgb(97.7382953181%, 77.6342537015%, 88.3145258103%);
  --color-analogous2_9-contrast: #111111;
  --color-triad1: #17b212;
  --color-triad1-contrast: #ffffff;
  --color-triad1_1: rgb(1.8039215686%, 13.9607843137%, 1.4117647059%);
  --color-triad1_1-contrast: #ffffff;
  --color-triad1_2: rgb(3.6078431373%, 27.9215686275%, 2.8235294118%);
  --color-triad1_2-contrast: #ffffff;
  --color-triad1_3: rgb(5.4117647059%, 41.8823529412%, 4.2352941176%);
  --color-triad1_3-contrast: #ffffff;
  --color-triad1_4: rgb(7.2156862745%, 55.8431372549%, 5.6470588235%);
  --color-triad1_4-contrast: #ffffff;
  --color-triad1_5: #17b212;
  --color-triad1_5-contrast: #ffffff;
  --color-triad1_6: rgb(13.050020008%, 90.9531812725%, 10.5370148059%);
  --color-triad1_6-contrast: #ffffff;
  --color-triad1_7: rgb(34.787515006%, 93.2148859544%, 32.9027611044%);
  --color-triad1_7-contrast: #111111;
  --color-triad1_8: rgb(56.525010004%, 95.4765906363%, 55.268507403%);
  --color-triad1_8-contrast: #111111;
  --color-triad1_9: rgb(78.262505002%, 97.7382953181%, 77.6342537015%);
  --color-triad1_9-contrast: #111111;
  --color-triad2: #1217b2;
  --color-triad2-contrast: #ffffff;
  --color-triad2_1: rgb(1.4117647059%, 1.8039215686%, 13.9607843137%);
  --color-triad2_1-contrast: #ffffff;
  --color-triad2_2: rgb(2.8235294118%, 3.6078431373%, 27.9215686275%);
  --color-triad2_2-contrast: #ffffff;
  --color-triad2_3: rgb(4.2352941176%, 5.4117647059%, 41.8823529412%);
  --color-triad2_3-contrast: #ffffff;
  --color-triad2_4: rgb(5.6470588235%, 7.2156862745%, 55.8431372549%);
  --color-triad2_4-contrast: #ffffff;
  --color-triad2_5: #1217b2;
  --color-triad2_5-contrast: #ffffff;
  --color-triad2_6: rgb(10.5370148059%, 13.050020008%, 90.9531812725%);
  --color-triad2_6-contrast: #ffffff;
  --color-triad2_7: rgb(32.9027611044%, 34.787515006%, 93.2148859544%);
  --color-triad2_7-contrast: #111111;
  --color-triad2_8: rgb(55.268507403%, 56.525010004%, 95.4765906363%);
  --color-triad2_8-contrast: #111111;
  --color-triad2_9: rgb(77.6342537015%, 78.262505002%, 97.7382953181%);
  --color-triad2_9-contrast: #111111;
  --color-split1: #12b25d;
  --color-split1-contrast: #ffffff;
  --color-split1_1: rgb(1.4117647059%, 13.9607843137%, 7.2941176471%);
  --color-split1_1-contrast: #ffffff;
  --color-split1_2: rgb(2.8235294118%, 27.9215686275%, 14.5882352941%);
  --color-split1_2-contrast: #ffffff;
  --color-split1_3: rgb(4.2352941176%, 41.8823529412%, 21.8823529412%);
  --color-split1_3-contrast: #ffffff;
  --color-split1_4: rgb(5.6470588235%, 55.8431372549%, 29.1764705882%);
  --color-split1_4-contrast: #ffffff;
  --color-split1_5: #12b25d;
  --color-split1_5-contrast: #ffffff;
  --color-split1_6: rgb(10.5370148059%, 90.9531812725%, 48.2320928371%);
  --color-split1_6-contrast: #ffffff;
  --color-split1_7: rgb(32.9027611044%, 93.2148859544%, 61.1740696279%);
  --color-split1_7-contrast: #111111;
  --color-split1_8: rgb(55.268507403%, 95.4765906363%, 74.1160464186%);
  --color-split1_8-contrast: #111111;
  --color-split1_9: rgb(77.6342537015%, 97.7382953181%, 87.0580232093%);
  --color-split1_9-contrast: #111111;
  --color-split2: #1267b2;
  --color-split2-contrast: #ffffff;
  --color-split2_1: rgb(1.4117647059%, 8.0784313725%, 13.9607843137%);
  --color-split2_1-contrast: #ffffff;
  --color-split2_2: rgb(2.8235294118%, 16.1568627451%, 27.9215686275%);
  --color-split2_2-contrast: #ffffff;
  --color-split2_3: rgb(4.2352941176%, 24.2352941176%, 41.8823529412%);
  --color-split2_3-contrast: #ffffff;
  --color-split2_4: rgb(5.6470588235%, 32.3137254902%, 55.8431372549%);
  --color-split2_4-contrast: #ffffff;
  --color-split2_5: #1267b2;
  --color-split2_5-contrast: #ffffff;
  --color-split2_6: rgb(10.5370148059%, 53.2581032413%, 90.9531812725%);
  --color-split2_6-contrast: #ffffff;
  --color-split2_7: rgb(32.9027611044%, 64.943577431%, 93.2148859544%);
  --color-split2_7-contrast: #111111;
  --color-split2_8: rgb(55.268507403%, 76.6290516206%, 95.4765906363%);
  --color-split2_8-contrast: #111111;
  --color-split2_9: rgb(77.6342537015%, 88.3145258103%, 97.7382953181%);
  --color-split2_9-contrast: #111111;
  --color-tetra1: #67b212;
  --color-tetra1-contrast: #ffffff;
  --color-tetra1_1: rgb(8.0784313725%, 13.9607843137%, 1.4117647059%);
  --color-tetra1_1-contrast: #ffffff;
  --color-tetra1_2: rgb(16.1568627451%, 27.9215686275%, 2.8235294118%);
  --color-tetra1_2-contrast: #ffffff;
  --color-tetra1_3: rgb(24.2352941176%, 41.8823529412%, 4.2352941176%);
  --color-tetra1_3-contrast: #ffffff;
  --color-tetra1_4: rgb(32.3137254902%, 55.8431372549%, 5.6470588235%);
  --color-tetra1_4-contrast: #ffffff;
  --color-tetra1_5: #67b212;
  --color-tetra1_5-contrast: #ffffff;
  --color-tetra1_6: rgb(53.2581032413%, 90.9531812725%, 10.5370148059%);
  --color-tetra1_6-contrast: #ffffff;
  --color-tetra1_7: rgb(64.943577431%, 93.2148859544%, 32.9027611044%);
  --color-tetra1_7-contrast: #111111;
  --color-tetra1_8: rgb(76.6290516206%, 95.4765906363%, 55.268507403%);
  --color-tetra1_8-contrast: #111111;
  --color-tetra1_9: rgb(88.3145258103%, 97.7382953181%, 77.6342537015%);
  --color-tetra1_9-contrast: #111111;
  --color-tetra2: #5d12b2;
  --color-tetra2-contrast: #ffffff;
  --color-tetra2_1: rgb(7.2941176471%, 1.4117647059%, 13.9607843137%);
  --color-tetra2_1-contrast: #ffffff;
  --color-tetra2_2: rgb(14.5882352941%, 2.8235294118%, 27.9215686275%);
  --color-tetra2_2-contrast: #ffffff;
  --color-tetra2_3: rgb(21.8823529412%, 4.2352941176%, 41.8823529412%);
  --color-tetra2_3-contrast: #ffffff;
  --color-tetra2_4: rgb(29.1764705882%, 5.6470588235%, 55.8431372549%);
  --color-tetra2_4-contrast: #ffffff;
  --color-tetra2_5: #5d12b2;
  --color-tetra2_5-contrast: #ffffff;
  --color-tetra2_6: rgb(48.2320928371%, 10.5370148059%, 90.9531812725%);
  --color-tetra2_6-contrast: #ffffff;
  --color-tetra2_7: rgb(61.1740696279%, 32.9027611044%, 93.2148859544%);
  --color-tetra2_7-contrast: #111111;
  --color-tetra2_8: rgb(74.1160464186%, 55.268507403%, 95.4765906363%);
  --color-tetra2_8-contrast: #111111;
  --color-tetra2_9: rgb(87.0580232093%, 77.6342537015%, 97.7382953181%);
  --color-tetra2_9-contrast: #111111;
  --color-square1: #67b212;
  --color-square1-contrast: #ffffff;
  --color-square1_1: rgb(8.0784313725%, 13.9607843137%, 1.4117647059%);
  --color-square1_1-contrast: #ffffff;
  --color-square1_2: rgb(16.1568627451%, 27.9215686275%, 2.8235294118%);
  --color-square1_2-contrast: #ffffff;
  --color-square1_3: rgb(24.2352941176%, 41.8823529412%, 4.2352941176%);
  --color-square1_3-contrast: #ffffff;
  --color-square1_4: rgb(32.3137254902%, 55.8431372549%, 5.6470588235%);
  --color-square1_4-contrast: #ffffff;
  --color-square1_5: #67b212;
  --color-square1_5-contrast: #ffffff;
  --color-square1_6: rgb(53.2581032413%, 90.9531812725%, 10.5370148059%);
  --color-square1_6-contrast: #ffffff;
  --color-square1_7: rgb(64.943577431%, 93.2148859544%, 32.9027611044%);
  --color-square1_7-contrast: #111111;
  --color-square1_8: rgb(76.6290516206%, 95.4765906363%, 55.268507403%);
  --color-square1_8-contrast: #111111;
  --color-square1_9: rgb(88.3145258103%, 97.7382953181%, 77.6342537015%);
  --color-square1_9-contrast: #111111;
  --color-square3: #5d12b2;
  --color-square3-contrast: #ffffff;
  --color-square3_1: rgb(7.2941176471%, 1.4117647059%, 13.9607843137%);
  --color-square3_1-contrast: #ffffff;
  --color-square3_2: rgb(14.5882352941%, 2.8235294118%, 27.9215686275%);
  --color-square3_2-contrast: #ffffff;
  --color-square3_3: rgb(21.8823529412%, 4.2352941176%, 41.8823529412%);
  --color-square3_3-contrast: #ffffff;
  --color-square3_4: rgb(29.1764705882%, 5.6470588235%, 55.8431372549%);
  --color-square3_4-contrast: #ffffff;
  --color-square3_5: #5d12b2;
  --color-square3_5-contrast: #ffffff;
  --color-square3_6: rgb(48.2320928371%, 10.5370148059%, 90.9531812725%);
  --color-square3_6-contrast: #ffffff;
  --color-square3_7: rgb(61.1740696279%, 32.9027611044%, 93.2148859544%);
  --color-square3_7-contrast: #111111;
  --color-square3_8: rgb(74.1160464186%, 55.268507403%, 95.4765906363%);
  --color-square3_8-contrast: #111111;
  --color-square3_9: rgb(87.0580232093%, 77.6342537015%, 97.7382953181%);
  --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: rgb(97.3147659064%, 73.4460184074%, 74.1919167667%);
  --color-primary_1-contrast: #1a1a1a;
  --color-primary_2: rgb(94.6295318127%, 46.8920368147%, 48.3838335334%);
  --color-primary_2-contrast: #1a1a1a;
  --color-primary_3: rgb(91.9442977191%, 20.3380552221%, 22.5757503001%);
  --color-primary_3-contrast: #e8e8e8;
  --color-primary_4: rgb(75.4167266907%, 7.6264105642%, 9.7448579432%);
  --color-primary_4-contrast: #e8e8e8;
  --color-primary_5: rgb(48.862745098%, 4.9411764706%, 6.3137254902%);
  --color-primary_5-contrast: #e8e8e8;
  --color-primary_6: rgb(39.0901960784%, 3.9529411765%, 5.0509803922%);
  --color-primary_6-contrast: #e8e8e8;
  --color-primary_7: rgb(29.3176470588%, 2.9647058824%, 3.7882352941%);
  --color-primary_7-contrast: #e8e8e8;
  --color-primary_8: rgb(19.5450980392%, 1.9764705882%, 2.5254901961%);
  --color-primary_8-contrast: #e8e8e8;
  --color-primary_9: rgb(9.7725490196%, 0.9882352941%, 1.262745098%);
  --color-primary_9-contrast: #e8e8e8;
  --color-tone: rgb(94.3457382953%, 93.3405362145%, 93.3719487795%);
  --color-tone-contrast: #1a1a1a;
  --color-tone_1: rgb(93.6981992797%, 92.5778791517%, 92.6128891557%);
  --color-tone_1-contrast: #1a1a1a;
  --color-tone_2: rgb(87.3963985594%, 85.1557583033%, 85.2257783113%);
  --color-tone_2-contrast: #1a1a1a;
  --color-tone_3: rgb(81.0945978391%, 77.733637455%, 77.838667467%);
  --color-tone_3-contrast: #1a1a1a;
  --color-tone_4: rgb(74.7927971188%, 70.3115166066%, 70.4515566226%);
  --color-tone_4-contrast: #1a1a1a;
  --color-tone_5: rgb(68.4909963986%, 62.8893957583%, 63.0644457783%);
  --color-tone_5-contrast: #1a1a1a;
  --color-tone_6: rgb(56.4254501801%, 48.6788635454%, 48.9209443778%);
  --color-tone_6-contrast: #e8e8e8;
  --color-tone_7: rgb(42.6315966387%, 36.1966386555%, 36.3977310924%);
  --color-tone_7-contrast: #e8e8e8;
  --color-tone_8: rgb(28.4210644258%, 24.131092437%, 24.2651540616%);
  --color-tone_8-contrast: #e8e8e8;
  --color-tone_9: rgb(14.2105322129%, 12.0655462185%, 12.1325770308%);
  --color-tone_9-contrast: #e8e8e8;
  --color-neutral: #808080;
  --color-neutral-contrast: #e8e8e8;
  --color-neutral_1: rgb(87.0274509804%, 87.0274509804%, 87.0274509804%);
  --color-neutral_1-contrast: #1a1a1a;
  --color-neutral_2: rgb(74.0549019608%, 74.0549019608%, 74.0549019608%);
  --color-neutral_2-contrast: #1a1a1a;
  --color-neutral_3: rgb(61.0823529412%, 61.0823529412%, 61.0823529412%);
  --color-neutral_3-contrast: #1a1a1a;
  --color-neutral_4: rgb(48.1098039216%, 48.1098039216%, 48.1098039216%);
  --color-neutral_4-contrast: #e8e8e8;
  --color-neutral_5: rgb(35.137254902%, 35.137254902%, 35.137254902%);
  --color-neutral_5-contrast: #e8e8e8;
  --color-neutral_6: rgb(28.1098039216%, 28.1098039216%, 28.1098039216%);
  --color-neutral_6-contrast: #e8e8e8;
  --color-neutral_7: rgb(21.0823529412%, 21.0823529412%, 21.0823529412%);
  --color-neutral_7-contrast: #e8e8e8;
  --color-neutral_8: rgb(14.0549019608%, 14.0549019608%, 14.0549019608%);
  --color-neutral_8-contrast: #e8e8e8;
  --color-neutral_9: rgb(7.0274509804%, 7.0274509804%, 7.0274509804%);
  --color-neutral_9-contrast: #e8e8e8;
  --color-muted: rgb(60.3921568627%, 16.4705882353%, 17.8431372549%);
  --color-muted-contrast: #e8e8e8;
  --color-muted_1: rgb(93.7344537815%, 77.0263305322%, 77.5484593838%);
  --color-muted_1-contrast: #1a1a1a;
  --color-muted_2: rgb(87.468907563%, 54.0526610644%, 55.0969187675%);
  --color-muted_2-contrast: #1a1a1a;
  --color-muted_3: rgb(81.2033613445%, 31.0789915966%, 32.6453781513%);
  --color-muted_3-contrast: #e8e8e8;
  --color-muted_4: rgb(65.2481792717%, 17.7949579832%, 19.2778711485%);
  --color-muted_4-contrast: #e8e8e8;
  --color-muted_5: rgb(42.2745098039%, 11.5294117647%, 12.4901960784%);
  --color-muted_5-contrast: #e8e8e8;
  --color-muted_6: rgb(33.8196078431%, 9.2235294118%, 9.9921568627%);
  --color-muted_6-contrast: #e8e8e8;
  --color-muted_7: rgb(25.3647058824%, 6.9176470588%, 7.4941176471%);
  --color-muted_7-contrast: #e8e8e8;
  --color-muted_8: rgb(16.9098039216%, 4.6117647059%, 4.9960784314%);
  --color-muted_8-contrast: #e8e8e8;
  --color-muted_9: rgb(8.4549019608%, 2.3058823529%, 2.4980392157%);
  --color-muted_9-contrast: #e8e8e8;
  --color-complement: rgb(7.0588235294%, 69.8039215686%, 62.614379085%);
  --color-complement-contrast: #e8e8e8;
  --color-complement_1: rgb(73.4460184074%, 97.3147659064%, 94.5798052554%);
  --color-complement_1-contrast: #1a1a1a;
  --color-complement_2: rgb(46.8920368147%, 94.6295318127%, 89.1596105109%);
  --color-complement_2-contrast: #1a1a1a;
  --color-complement_3: rgb(20.3380552221%, 91.9442977191%, 83.7394157663%);
  --color-complement_3-contrast: #e8e8e8;
  --color-complement_4: rgb(7.6264105642%, 75.4167266907%, 67.6490863012%);
  --color-complement_4-contrast: #e8e8e8;
  --color-complement_5: rgb(4.9411764706%, 48.862745098%, 43.8300653595%);
  --color-complement_5-contrast: #e8e8e8;
  --color-complement_6: rgb(3.9529411765%, 39.0901960784%, 35.0640522876%);
  --color-complement_6-contrast: #e8e8e8;
  --color-complement_7: rgb(2.9647058824%, 29.3176470588%, 26.2980392157%);
  --color-complement_7-contrast: #e8e8e8;
  --color-complement_8: rgb(1.9764705882%, 19.5450980392%, 17.5320261438%);
  --color-complement_8-contrast: #e8e8e8;
  --color-complement_9: rgb(0.9882352941%, 9.7725490196%, 8.7660130719%);
  --color-complement_9-contrast: #e8e8e8;
  --color-analogous1: #b25d12;
  --color-analogous1-contrast: #e8e8e8;
  --color-analogous1_1: rgb(97.3147659064%, 84.6344937975%, 73.4460184074%);
  --color-analogous1_1-contrast: #1a1a1a;
  --color-analogous1_2: rgb(94.6295318127%, 69.268987595%, 46.8920368147%);
  --color-analogous1_2-contrast: #1a1a1a;
  --color-analogous1_3: rgb(91.9442977191%, 53.9034813926%, 20.3380552221%);
  --color-analogous1_3-contrast: #e8e8e8;
  --color-analogous1_4: rgb(75.4167266907%, 39.4031212485%, 7.6264105642%);
  --color-analogous1_4-contrast: #e8e8e8;
  --color-analogous1_5: rgb(48.862745098%, 25.5294117647%, 4.9411764706%);
  --color-analogous1_5-contrast: #e8e8e8;
  --color-analogous1_6: rgb(39.0901960784%, 20.4235294118%, 3.9529411765%);
  --color-analogous1_6-contrast: #e8e8e8;
  --color-analogous1_7: rgb(29.3176470588%, 15.3176470588%, 2.9647058824%);
  --color-analogous1_7-contrast: #e8e8e8;
  --color-analogous1_8: rgb(19.5450980392%, 10.2117647059%, 1.9764705882%);
  --color-analogous1_8-contrast: #e8e8e8;
  --color-analogous1_9: rgb(9.7725490196%, 5.1058823529%, 0.9882352941%);
  --color-analogous1_9-contrast: #e8e8e8;
  --color-analogous2: #b21267;
  --color-analogous2-contrast: #e8e8e8;
  --color-analogous2_1: rgb(97.3147659064%, 73.4460184074%, 86.1262905162%);
  --color-analogous2_1-contrast: #1a1a1a;
  --color-analogous2_2: rgb(94.6295318127%, 46.8920368147%, 72.2525810324%);
  --color-analogous2_2-contrast: #1a1a1a;
  --color-analogous2_3: rgb(91.9442977191%, 20.3380552221%, 58.3788715486%);
  --color-analogous2_3-contrast: #e8e8e8;
  --color-analogous2_4: rgb(75.4167266907%, 7.6264105642%, 43.6400160064%);
  --color-analogous2_4-contrast: #e8e8e8;
  --color-analogous2_5: rgb(48.862745098%, 4.9411764706%, 28.2745098039%);
  --color-analogous2_5-contrast: #e8e8e8;
  --color-analogous2_6: rgb(39.0901960784%, 3.9529411765%, 22.6196078431%);
  --color-analogous2_6-contrast: #e8e8e8;
  --color-analogous2_7: rgb(29.3176470588%, 2.9647058824%, 16.9647058824%);
  --color-analogous2_7-contrast: #e8e8e8;
  --color-analogous2_8: rgb(19.5450980392%, 1.9764705882%, 11.3098039216%);
  --color-analogous2_8-contrast: #e8e8e8;
  --color-analogous2_9: rgb(9.7725490196%, 0.9882352941%, 5.6549019608%);
  --color-analogous2_9-contrast: #e8e8e8;
  --color-triad1: #17b212;
  --color-triad1-contrast: #e8e8e8;
  --color-triad1_1: rgb(74.1919167667%, 97.3147659064%, 73.4460184074%);
  --color-triad1_1-contrast: #1a1a1a;
  --color-triad1_2: rgb(48.3838335334%, 94.6295318127%, 46.8920368147%);
  --color-triad1_2-contrast: #1a1a1a;
  --color-triad1_3: rgb(22.5757503001%, 91.9442977191%, 20.3380552221%);
  --color-triad1_3-contrast: #e8e8e8;
  --color-triad1_4: rgb(9.7448579432%, 75.4167266907%, 7.6264105642%);
  --color-triad1_4-contrast: #e8e8e8;
  --color-triad1_5: rgb(6.3137254902%, 48.862745098%, 4.9411764706%);
  --color-triad1_5-contrast: #e8e8e8;
  --color-triad1_6: rgb(5.0509803922%, 39.0901960784%, 3.9529411765%);
  --color-triad1_6-contrast: #e8e8e8;
  --color-triad1_7: rgb(3.7882352941%, 29.3176470588%, 2.9647058824%);
  --color-triad1_7-contrast: #e8e8e8;
  --color-triad1_8: rgb(2.5254901961%, 19.5450980392%, 1.9764705882%);
  --color-triad1_8-contrast: #e8e8e8;
  --color-triad1_9: rgb(1.262745098%, 9.7725490196%, 0.9882352941%);
  --color-triad1_9-contrast: #e8e8e8;
  --color-triad2: #1217b2;
  --color-triad2-contrast: #e8e8e8;
  --color-triad2_1: rgb(73.4460184074%, 74.1919167667%, 97.3147659064%);
  --color-triad2_1-contrast: #1a1a1a;
  --color-triad2_2: rgb(46.8920368147%, 48.3838335334%, 94.6295318127%);
  --color-triad2_2-contrast: #1a1a1a;
  --color-triad2_3: rgb(20.3380552221%, 22.5757503001%, 91.9442977191%);
  --color-triad2_3-contrast: #e8e8e8;
  --color-triad2_4: rgb(7.6264105642%, 9.7448579432%, 75.4167266907%);
  --color-triad2_4-contrast: #e8e8e8;
  --color-triad2_5: rgb(4.9411764706%, 6.3137254902%, 48.862745098%);
  --color-triad2_5-contrast: #e8e8e8;
  --color-triad2_6: rgb(3.9529411765%, 5.0509803922%, 39.0901960784%);
  --color-triad2_6-contrast: #e8e8e8;
  --color-triad2_7: rgb(2.9647058824%, 3.7882352941%, 29.3176470588%);
  --color-triad2_7-contrast: #e8e8e8;
  --color-triad2_8: rgb(1.9764705882%, 2.5254901961%, 19.5450980392%);
  --color-triad2_8-contrast: #e8e8e8;
  --color-triad2_9: rgb(0.9882352941%, 1.262745098%, 9.7725490196%);
  --color-triad2_9-contrast: #e8e8e8;
  --color-split1: #12b25d;
  --color-split1-contrast: #e8e8e8;
  --color-split1_1: rgb(73.4460184074%, 97.3147659064%, 84.6344937975%);
  --color-split1_1-contrast: #1a1a1a;
  --color-split1_2: rgb(46.8920368147%, 94.6295318127%, 69.268987595%);
  --color-split1_2-contrast: #1a1a1a;
  --color-split1_3: rgb(20.3380552221%, 91.9442977191%, 53.9034813926%);
  --color-split1_3-contrast: #e8e8e8;
  --color-split1_4: rgb(7.6264105642%, 75.4167266907%, 39.4031212485%);
  --color-split1_4-contrast: #e8e8e8;
  --color-split1_5: rgb(4.9411764706%, 48.862745098%, 25.5294117647%);
  --color-split1_5-contrast: #e8e8e8;
  --color-split1_6: rgb(3.9529411765%, 39.0901960784%, 20.4235294118%);
  --color-split1_6-contrast: #e8e8e8;
  --color-split1_7: rgb(2.9647058824%, 29.3176470588%, 15.3176470588%);
  --color-split1_7-contrast: #e8e8e8;
  --color-split1_8: rgb(1.9764705882%, 19.5450980392%, 10.2117647059%);
  --color-split1_8-contrast: #e8e8e8;
  --color-split1_9: rgb(0.9882352941%, 9.7725490196%, 5.1058823529%);
  --color-split1_9-contrast: #e8e8e8;
  --color-split2: #1267b2;
  --color-split2-contrast: #e8e8e8;
  --color-split2_1: rgb(73.4460184074%, 86.1262905162%, 97.3147659064%);
  --color-split2_1-contrast: #1a1a1a;
  --color-split2_2: rgb(46.8920368147%, 72.2525810324%, 94.6295318127%);
  --color-split2_2-contrast: #1a1a1a;
  --color-split2_3: rgb(20.3380552221%, 58.3788715486%, 91.9442977191%);
  --color-split2_3-contrast: #e8e8e8;
  --color-split2_4: rgb(7.6264105642%, 43.6400160064%, 75.4167266907%);
  --color-split2_4-contrast: #e8e8e8;
  --color-split2_5: rgb(4.9411764706%, 28.2745098039%, 48.862745098%);
  --color-split2_5-contrast: #e8e8e8;
  --color-split2_6: rgb(3.9529411765%, 22.6196078431%, 39.0901960784%);
  --color-split2_6-contrast: #e8e8e8;
  --color-split2_7: rgb(2.9647058824%, 16.9647058824%, 29.3176470588%);
  --color-split2_7-contrast: #e8e8e8;
  --color-split2_8: rgb(1.9764705882%, 11.3098039216%, 19.5450980392%);
  --color-split2_8-contrast: #e8e8e8;
  --color-split2_9: rgb(0.9882352941%, 5.6549019608%, 9.7725490196%);
  --color-split2_9-contrast: #e8e8e8;
  --color-tetra1: #67b212;
  --color-tetra1-contrast: #e8e8e8;
  --color-tetra1_1: rgb(86.1262905162%, 97.3147659064%, 73.4460184074%);
  --color-tetra1_1-contrast: #1a1a1a;
  --color-tetra1_2: rgb(72.2525810324%, 94.6295318127%, 46.8920368147%);
  --color-tetra1_2-contrast: #1a1a1a;
  --color-tetra1_3: rgb(58.3788715486%, 91.9442977191%, 20.3380552221%);
  --color-tetra1_3-contrast: #e8e8e8;
  --color-tetra1_4: rgb(43.6400160064%, 75.4167266907%, 7.6264105642%);
  --color-tetra1_4-contrast: #e8e8e8;
  --color-tetra1_5: rgb(28.2745098039%, 48.862745098%, 4.9411764706%);
  --color-tetra1_5-contrast: #e8e8e8;
  --color-tetra1_6: rgb(22.6196078431%, 39.0901960784%, 3.9529411765%);
  --color-tetra1_6-contrast: #e8e8e8;
  --color-tetra1_7: rgb(16.9647058824%, 29.3176470588%, 2.9647058824%);
  --color-tetra1_7-contrast: #e8e8e8;
  --color-tetra1_8: rgb(11.3098039216%, 19.5450980392%, 1.9764705882%);
  --color-tetra1_8-contrast: #e8e8e8;
  --color-tetra1_9: rgb(5.6549019608%, 9.7725490196%, 0.9882352941%);
  --color-tetra1_9-contrast: #e8e8e8;
  --color-tetra2: #5d12b2;
  --color-tetra2-contrast: #e8e8e8;
  --color-tetra2_1: rgb(84.6344937975%, 73.4460184074%, 97.3147659064%);
  --color-tetra2_1-contrast: #1a1a1a;
  --color-tetra2_2: rgb(69.268987595%, 46.8920368147%, 94.6295318127%);
  --color-tetra2_2-contrast: #1a1a1a;
  --color-tetra2_3: rgb(53.9034813926%, 20.3380552221%, 91.9442977191%);
  --color-tetra2_3-contrast: #e8e8e8;
  --color-tetra2_4: rgb(39.4031212485%, 7.6264105642%, 75.4167266907%);
  --color-tetra2_4-contrast: #e8e8e8;
  --color-tetra2_5: rgb(25.5294117647%, 4.9411764706%, 48.862745098%);
  --color-tetra2_5-contrast: #e8e8e8;
  --color-tetra2_6: rgb(20.4235294118%, 3.9529411765%, 39.0901960784%);
  --color-tetra2_6-contrast: #e8e8e8;
  --color-tetra2_7: rgb(15.3176470588%, 2.9647058824%, 29.3176470588%);
  --color-tetra2_7-contrast: #e8e8e8;
  --color-tetra2_8: rgb(10.2117647059%, 1.9764705882%, 19.5450980392%);
  --color-tetra2_8-contrast: #e8e8e8;
  --color-tetra2_9: rgb(5.1058823529%, 0.9882352941%, 9.7725490196%);
  --color-tetra2_9-contrast: #e8e8e8;
  --color-square1: #67b212;
  --color-square1-contrast: #e8e8e8;
  --color-square1_1: rgb(86.1262905162%, 97.3147659064%, 73.4460184074%);
  --color-square1_1-contrast: #1a1a1a;
  --color-square1_2: rgb(72.2525810324%, 94.6295318127%, 46.8920368147%);
  --color-square1_2-contrast: #1a1a1a;
  --color-square1_3: rgb(58.3788715486%, 91.9442977191%, 20.3380552221%);
  --color-square1_3-contrast: #e8e8e8;
  --color-square1_4: rgb(43.6400160064%, 75.4167266907%, 7.6264105642%);
  --color-square1_4-contrast: #e8e8e8;
  --color-square1_5: rgb(28.2745098039%, 48.862745098%, 4.9411764706%);
  --color-square1_5-contrast: #e8e8e8;
  --color-square1_6: rgb(22.6196078431%, 39.0901960784%, 3.9529411765%);
  --color-square1_6-contrast: #e8e8e8;
  --color-square1_7: rgb(16.9647058824%, 29.3176470588%, 2.9647058824%);
  --color-square1_7-contrast: #e8e8e8;
  --color-square1_8: rgb(11.3098039216%, 19.5450980392%, 1.9764705882%);
  --color-square1_8-contrast: #e8e8e8;
  --color-square1_9: rgb(5.6549019608%, 9.7725490196%, 0.9882352941%);
  --color-square1_9-contrast: #e8e8e8;
  --color-square3: #5d12b2;
  --color-square3-contrast: #e8e8e8;
  --color-square3_1: rgb(84.6344937975%, 73.4460184074%, 97.3147659064%);
  --color-square3_1-contrast: #1a1a1a;
  --color-square3_2: rgb(69.268987595%, 46.8920368147%, 94.6295318127%);
  --color-square3_2-contrast: #1a1a1a;
  --color-square3_3: rgb(53.9034813926%, 20.3380552221%, 91.9442977191%);
  --color-square3_3-contrast: #e8e8e8;
  --color-square3_4: rgb(39.4031212485%, 7.6264105642%, 75.4167266907%);
  --color-square3_4-contrast: #e8e8e8;
  --color-square3_5: rgb(25.5294117647%, 4.9411764706%, 48.862745098%);
  --color-square3_5-contrast: #e8e8e8;
  --color-square3_6: rgb(20.4235294118%, 3.9529411765%, 39.0901960784%);
  --color-square3_6-contrast: #e8e8e8;
  --color-square3_7: rgb(15.3176470588%, 2.9647058824%, 29.3176470588%);
  --color-square3_7-contrast: #e8e8e8;
  --color-square3_8: rgb(10.2117647059%, 1.9764705882%, 19.5450980392%);
  --color-square3_8-contrast: #e8e8e8;
  --color-square3_9: rgb(5.1058823529%, 0.9882352941%, 9.7725490196%);
  --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: rgb(79.3899782135%, 87.8213507625%, 95.3159041394%);
  --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: rgb(90%, 90%, 90%);
  --color-bg-alt: rgb(90%, 90%, 90%);
  --color-media-bg: rgb(10%, 10%, 10%);
  --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: rgb(65.1636363636%, 5.1108734403%, 7.3468805704%);
  --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-size: var(--raster_2);
  --font-h1: 600 var(--font-h1-size)/1.1 Montserrat, Helvetica, sans-serif;
  --letter-spacing-h1: -0.03em;
  --font-h2-size: var(--raster);
  --font-h2: 600 var(--font-h2-size)/1.1 Montserrat, Helvetica, sans-serif;
  --letter-spacing-h2: -0.03em;
  --font-h3-size: var(--raster_2_3);
  --font-h3: 500 var(--font-h3-size)/1.1 Montserrat, Helvetica, sans-serif;
  --letter-spacing-h3: -0.03em;
  --font-h4: 500 var(--font-h3-size)/1.1 Montserrat, Helvetica, sans-serif;
  --letter-spacing-h4: -0.03em;
  --font-h5: 400 var(--font-h3-size)/1.2 Montserrat, Helvetica, sans-serif;
  --letter-spacing-h5: 0;
  --font-p: 100 var(--font-h3-size)/1.4 Montserrat, Helvetica, sans-serif;
  --letter-spacing-p: 0;
  --font-l: 100 var(--font-h3-size)/1.4 Montserrat, Helvetica, sans-serif;
  --letter-spacing-l: 0;
  --font-button: 600 var(---font-h3-size)/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);
}
@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);
  }
}
:root {
  --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);
}
@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 {
  --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);
}

: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 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;
}
body:before {
  grid-area: side-left;
  content: "";
}
body {
  grid-template-rows: [header_ top_] var(--header-height) [_top _header mid_ main_] minmax(0, 1fr) [_main _mid footer_ bottom_] var(--footer-height) [_bottom _footer];
}
@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 > span {
  order: 4;
}
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;
}
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 #mainMenuDrawer .profile-button,
body #mainMenuDrawer .mode-dark-light {
  padding-left: 0;
  display: grid;
  grid-template-columns: var(--raster_2_3) 1fr;
  gap: var(--raster_1_6);
}
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 #timer[stopped], body #timer.zero {
  display: none;
}
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);
}
body #timer.tack::part(S):before {
  color: var(--color-blue);
}
body #timer[localtime]::part(S):before {
  content: ":";
}
body #timer {
  display: grid;
  place-items: center;
  text-align: center;
}
body #timer::part(M), body #timer::part(S) {
  display: contents;
}
body {
  --i-icon-size: var(--menu-width);
}
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);
}
body #mainMenuDrawer.open {
  max-width: 50vw;
}
body #mainMenuDrawer > div, body #mainMenuDrawer > span {
  padding: var(--raster) 0 var(--raster_1_4);
}
body #mainMenuDrawer > a, body #mainMenuDrawer > div, body #mainMenuDrawer > span {
  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 {
  transition: max-width 0.3s linear;
  white-space: nowrap;
}
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 qb-emoji-picker {
  --emoji-size: var(--raster);
  --category-emoji-size: var(--raster);
}
body #emojiDialog {
  padding: 0;
  border: none;
}
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;
}

html:not([data-app^=quizzes], [data-app^=shows]) body > qb-chat {
  display: none;
}

body > qb-chat {
  display: grid;
  line-height: 1.1em;
  max-width: calc(var(--window-width) - var(--menu-width));
  z-index: 4;
  --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";
}
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.has-input {
  --chat-no-open: none !important;
}
body > qb-chat.open:not(.has-input) {
  --chat-no-send: none !important;
}
body > qb-chat.open {
  --chat-non-open-display: initial;
}
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 {
  --border-radius: 0.25em;
}
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;
}
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]:empty {
  display: none;
}
body > qb-chat .qb-message [slot=reference] {
  overflow: hidden;
  text-overflow: ellipsis;
}
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 {
  margin-left: 0;
  margin-right: calc(var(--menu-width) / 2);
}
body > qb-chat .qb-message.my-message {
  margin-left: calc(var(--menu-width) / 2);
  margin-right: 0;
}
body > qb-chat .qb-message.my-message [slot=message]::part(name), body > qb-chat .qb-message.my-message [slot=message]::part(avatar) {
  display: none;
}
body > qb-chat .qb-message.my-message {
  --message-editable: block;
}

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:before {
  content: "[";
}
qb-participants .qb-entity-collection .join-code:after {
  content: "]";
}
qb-participants .qb-entity-collection .join-code {
  grid-column: 3;
}
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);
}
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 .qb-entity-collection input.play-pause, html[data-round="-0"] qb-participants .qb-entity-collection input.play-pause {
  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 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:after,
section[itemtype=Team] .rank:after {
  content: ".";
}
section#users .rank,
section[itemtype=Team] .rank {
  justify-self: right;
}
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];
}
@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 {
  counter-reset: step;
}
.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 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 {
  --color-scheme-dark: none;
  --color-scheme-light: contents;
}
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.show-cards:has(qb-show-card) > span {
  display: none;
}
menu.cta.show-cards:has(qb-show-card) {
  gap: var(--raster_2);
}

section#hero {
  display: grid;
  hyphens: none;
}
@media screen and (max-width: 1248px) {
  section#hero {
    grid-template-columns: 1fr;
    grid-template-areas: "h1" "players" "hosts" "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 hosts" "business business";
}
section#hero nav.box:has(> a:nth-child(4)) {
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "players hosts" "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$=hosts] {
  --theme-accent: var(--color-analogous1);
  --theme-muted: var(--color-analogous1_8);
  --theme-contrast: var(--color-analogous1-contrast);
  grid-area: hosts;
}
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 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 {
  grid-area: nav;
  align-self: start;
  overflow-y: scroll;
  margin: 0 var(--main-vertical-);
}
#players menu.show-cards hr {
  display: none;
}
#players menu.show-cards {
  display: flex !important;
  flex-wrap: nowrap;
}
#players menu.show-cards qb-show-card > div {
  margin-left: var(--card-raster);
}
#players menu.show-cards:after {
  content: "";
  margin-left: var(--card-raster);
}
#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);
}

#hosts 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.show-cards, menu.show-list {
  --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.show-cards > span:not(:first-child),
menu.show-cards > a:nth-child(2), menu.show-list > span:not(:first-child),
menu.show-list > a:nth-child(2) {
  display: none;
}
menu.show-cards > a, menu.show-cards > span, menu.show-list > a, menu.show-list > span {
  grid-column: 1/-1;
  font: var(--font-h4);
}
menu.show-cards > hr, menu.show-list > hr {
  visibility: hidden;
  grid-column: 1/-1;
}

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.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;
  aspect-ratio: 1;
  width: 2em;
}
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: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 {
  display: contents;
}
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 a {
  text-decoration: none;
  aspect-ratio: 1;
  min-width: 1em;
  margin: 0 0.2em -0.2em 0;
  fill: var(--color-show-contrast);
}
menu.show-cards qb-show-card > div .badge-book {
  display: none;
}
menu.show-cards qb-show-card.cancelled div > :not(qb-time) {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
menu.show-cards qb-show-card.cancelled div {
  --color-show: var(--color-neutral_9);
  --color-show-contrast: var(--color-neutral_6);
}
menu.show-cards qb-show-card.cancelled a.nav {
  display: none;
}
menu.show-cards qb-show-card > div {
  background: var(--color-mute);
  background: linear-gradient(135deg, var(--color-show) 30%, color-mix(in srgb, var(--color-show) 80%, white) 100%);
  color: var(--color-show-contrast) !important;
  --slot-name-color: var(--color-show-contrast) !important;
  margin: 0;
}
menu.show-cards qb-show-card > div, menu.show-cards qb-show-card > div:before {
  border-radius: var(--card-raster_1_6);
}
menu.show-cards qb-show-card > div {
  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 venue" "time cta";
  grid-template-rows: min-content min-content min-content 1fr;
  padding: var(--card-raster_1_6);
  padding-left: 0;
}
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 > .venue {
  grid-area: venue;
  font-size: 0.5em;
}
menu.show-cards qb-show-card > div > qb-time.sheet {
  grid-area: time;
  color: var(--color-show-contrast);
  border-right: 1px solid var(--color-show-contrast);
}
menu.show-cards qb-show-card > div {
  position: relative;
}
menu.show-cards qb-show-card > div:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  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(1.1 * var(--header-height)) var(--main-vertical);
  }
  html:not(.show) body > main > * {
    padding: var(--header-height) var(--main-vertical) calc(1.1 * 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(1.1 * var(--header-height));
  }
  html:not(.show) body > main > * {
    padding: var(--header-height) var(--main-vertical) calc(1.1 * 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;
  }
  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 {
    font-size: var(--raster_2_3);
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin: auto 0;
  }
  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;
}