@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: 700;
  font-display: swap;
  src: url("/fonts/montserrat-normal-700.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 {
  --color-blue: #2870B0;
  --color-white: #ffffff;
  --color-red: #cc1017;
  --color-yellow: yellow;
  --color-orange: orange;
  --color-orange10: #ffb52e;
  --color-orange20: #ffb329;
  --color-orange30: #ffb224;
  --color-orange40: #ffb01f;
  --color-orange50: #ffae1a;
  --color-orange60: #ffac14;
  --color-orange70: #ffaa0f;
  --color-orange80: #ffa90a;
  --color-orange90: #ffa705;
  --color-green: darkgreen;
  --color-black: #000000;
  --color-black10: #e6e6e6;
  --color-black20: #cccccc;
  --color-black30: #b3b3b3;
  --color-black40: #999999;
  --color-black50: gray;
  --color-black60: #666666;
  --color-black70: #4d4d4d;
  --color-black80: #333333;
  --color-black90: #1a1a1a;
  --color-blue10: #cae0f3;
  --color-blue20: #b6d4ee;
  --color-blue30: #a1c7ea;
  --color-blue40: #8cbbe5;
  --color-blue50: #77afe0;
  --color-blue60: #63a3db;
  --color-blue70: #4e96d7;
  --color-blue80: #398ad2;
  --color-blue90: #2d7dc5;
  --color-red10: #fbc7c9;
  --color-red20: #f9afb2;
  --color-red30: #f7989b;
  --color-red40: #f58084;
  --color-red50: #f3686d;
  --color-red60: #f15157;
  --color-red70: #ef3940;
  --color-red80: #ee2129;
  --color-red90: #e4121a;
  --color-fg: #1a1a1a;
  --color-bg: #ffffff;
  --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-primary: #cc1017;
  --color-primary-fg: #ffffff;
  --color-accent: #2870B0;
  --color-accent-fg: #ffffff;
  --color-mute: #666666;
  --color-mute-fg: #ffffff;
  --color-bg-l: #e6e6e6;
  --color-media-bg: #1a1a1a;
  --color-outline: #2870B0;
  --color-highlight-bg: #2870B0;
  --color-highlight-fg: #ffffff;
  --color-logo-bg: #cc1017;
  --color-logo-fg: #ffffff;
  --color-wrong: #cc1017;
  --color-correct: darkgreen;
  --color-indecisive: #999999;
  --color-checked: #999999;
  --color-active-bg: orange;
  --color-active-fg: #000000;
  --color-unfinished: #cc1017;
  --color-todo-bg: purple;
  --color-todo-fg: #ffffff;
  --color-error-bg: #cc1017;
  --color-error-fg: #ffffff;
  --color-alert-bg: yellow;
  --color-alert-fg: #000000;
  --color-border: #999999;
  --color-input-border: #999999;
  --color-input-focus-border: #398ad2;
  --color-input-error-border: #cc1017;
  --color-input-bg: var(--color-bg);
  --color-input-fg: var(--color-fg);
  --input-choice-border-color: var(--color-input-border);
  --color-choice-fg: var(--color-fg);
  --color-choice-bg: var(--color-bg);
  --color-button-bg: #cc1017;
  --color-button-fg: #ffffff;
  --color-button-hbg: #a60d13;
  --color-button-hfg: #ffffff;
  --color-label-bg: #398ad2;
  --color-label-fg: #ffffff;
  --color-message-notice-bg: #cae0f3;
  --color-message-alert-bg: #ffffcc;
  --color-message-exception-bg: #fbc7c9;
  --color-message-error-bg: #fbc7c9;
  --color-selection-bg: #398ad2;
  --color-selection-fg: #ffffff;
  --color-input-choice-inactive: #ffffff;
  --color-warning: #cc1017;
  --color-main-bg: #ffffff;
  --color-even-fg: #333333;
  --color-even-bg: #cccccc;
  --color-main-menu-bg: #e6e6e6;
  --color-main-menu-fg: #1a1a1a;
}
:root[data-color-scheme=dark] {
  --color-fg: #ffffff;
  --color-bg: #1a1a1a;
  --color-bg-l: #666666;
  --color-media-bg: #ffffff;
  --color-indecisive: #666666;
  --color-border: #666666;
  --color-input-border: #cccccc;
  --color-bg-shader: rgba(128, 128, 128, 0.5);
  --color-main-bg: #1a1a1a;
  --color-main-menu-fg: #ffffff;
  --color-main-menu-bg: #4d4d4d;
}
: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-1: 18px/1.5 Montserrat, Helvetica, sans-serif;
  --font-h1: 700 var(--raster-2t)/1.1 Montserrat, Helvetica, sans-serif;
  --letter-spacing-h1: -0.5px;
  --font-h2: 600 var(--raster)/1.5 Montserrat, Helvetica, sans-serif;
  --letter-spacing-h2: 0;
  --font-h3: 600 var(--raster-23p)/1.5 Montserrat, Helvetica, sans-serif;
  --letter-spacing-h3: 0;
  --font-h4: 400 var(--raster-23p)/1.5 Montserrat, Helvetica, sans-serif;
  --letter-spacing-h4: 0;
  --font-h5: 400 var(--raster-23p)/1.5 Montserrat, Helvetica, sans-serif;
  --letter-spacing-h5: 0;
  --font-p: 100 var(--raster-23p)/1.7 Montserrat, Helvetica, sans-serif;
  --letter-spacing-p: 0;
  --font-l: 100 var(--raster-23p)/1.5 Montserrat, Helvetica, sans-serif;
  --letter-spacing-l: 0;
  --font-button: 600 var(--raster-23p)/1.7 Montserrat, Helvetica, sans-serif;
  --letter-spacing-button: 0;
  --raster-6t: 216px;
  --raster-4t: 144px;
  --raster-3t: 108px;
  --raster-2t: 72px;
  --raster-15t: 54px;
  --raster: 36px;
  --neg-raster: -36px;
  --raster-15p: 24px;
  --raster-2p: 18px;
  --raster-25p: 14.4px;
  --raster-23p: 24px;
  --raster-3p: 12px;
  --raster-4p: 9px;
  --raster-6p: 6px;
  --raster-8p: 4.5px;
  --raster-12p: 3px;
  --menu-width: 72px;
  --half-menu-width: 36px;
  --double-menu-width: 144px;
  --negative-double-menu-width: -144px;
  --negative-half-menu-width: -36px;
  --negative-menu-width: -72px;
  --menu-font-size: var(--raster-23p);
  --menu-font: var(--menu-font-size)/var(--menu-width) Montserrat, Helvetica, sans-serif;
  --menu-icon-size: var(--raster);
  --menu-height: var(--raster-2t);
  --chat-width: 432px;
  --main-padding: var(--raster-3p);
  --side-right-width: minmax(0,1fr);
  --right-width: var(--menu-width);
  --main-width: calc(var(--window-width) - var(--double-menu-width) - var(--chat-width));
  --task-width: calc(var(--main-width) - var(--main-padding) * 2);
  --header-height: var(--menu-width);
  --footer-height:var(--menu-width);
  --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;
  --font-ask: var(--font-ask);
  --label-line-height: var(--raster);
  --font-response-label: 400 var(--raster-23p)/var(--label-line-height) Montserrat, Helvetica, sans-serif;
  --font-response-label-size: var(--raster);
  --label-padding: 0 var(--raster-6p);
  --font-response-font: 100 var(--raster-23p)/1.5 Montserrat, Helvetica, sans-serif;
  --gap-1: 0.1rem;
  --gap-2: 0.25rem;
  --gap-3: 0.5rem;
  --visual-ratio-width: 3;
  --visual-ratio-height: 2;
  --visual-width: 27rem;
  --visual-height: 18rem;
  --task-row-gap: 1rem;
  --task-column-gap: 0.5rem;
  --task-columns: 12;
  --task-column-width: calc((var(--task-width) - 5.5rem) / 12);
}
@media screen and (max-width: 1776px) {
  :root {
    --main-width: calc(1200px - var(--main-padding) * 2);
  }
}
@media screen and (max-width: 1320px) {
  :root {
    --right-width: minmax(0, var(--menu-width));
  }
}
@media screen and (max-width: 1248px) {
  :root {
    --right-width: 0;
    --main-width: calc(var(--window-width) - var(--menu-width));
  }
}
:root * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
:root *::-webkit-scrollbar {
  display: none;
}
: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-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: "😎";
}
:root {
  --icon-category-knowledge: "💡";
  --icon-category-music: "💿";
  --icon-category-estimate: "≅";
}
html {
  scroll-behavior: smooth;
  hyphens: auto;
  color: var(--color-fg);
  background-color: var(--color-bg);
  --fieldset-border: 1px solid var(--color-blue80);
}
html * {
  box-sizing: border-box;
}
html body {
  overscroll-behavior: none;
  background-color: var(--color-main-menu-bg);
}
html main > section {
  margin-bottom: 4em;
}
html main > section:not(:first-of-type) {
  margin-top: 4em;
}
html h1 {
  font: var(--font-h1);
  letter-spacing: var(--letter-spacing-h1);
}
html h2 {
  font: var(--font-h2);
  letter-spacing: var(--letter-spacing-h2);
}
html h3 {
  font: var(--font-h3);
  letter-spacing: var(--letter-spacing-h3);
}
html h4 {
  font: var(--font-h4);
  letter-spacing: var(--letter-spacing-h4);
}
html h5 {
  font: var(--font-h5);
  letter-spacing: var(--letter-spacing-h5);
}
html h1:first-child, html h2:first-child, html h3:first-child, html h4:first-child, html h5:first-child, html h6:first-child {
  margin-top: 0;
}
html strong {
  font-weight: 600;
}
html p {
  font: var(--font-p);
  letter-spacing: var(--letter-spacing-p);
  margin-bottom: var(--raster-23p);
}
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-bg: 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 button.cta, 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 button.cta.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 button.cta.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 button.cta.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-radius: var(--button-border-radius);
}
html button.cta:hover, html .button.cta:hover, html button.cta.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-2p);
  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-bg);
}
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-bg);
  color: var(--color-selection-fg);
}
html fieldset {
  margin: 0;
  padding: 0;
  border: none;
}
html summary::-webkit-details-marker {
  display: none;
}
html.as-user {
  --color-logo-bg: blue;
}
:root {
  --color-blue: #2870B0;
  --color-white: #ffffff;
  --color-red: #cc1017;
  --color-yellow: yellow;
  --color-orange: orange;
  --color-orange10: #ffb52e;
  --color-orange20: #ffb329;
  --color-orange30: #ffb224;
  --color-orange40: #ffb01f;
  --color-orange50: #ffae1a;
  --color-orange60: #ffac14;
  --color-orange70: #ffaa0f;
  --color-orange80: #ffa90a;
  --color-orange90: #ffa705;
  --color-green: darkgreen;
  --color-black: #000000;
  --color-black10: #e6e6e6;
  --color-black20: #cccccc;
  --color-black30: #b3b3b3;
  --color-black40: #999999;
  --color-black50: gray;
  --color-black60: #666666;
  --color-black70: #4d4d4d;
  --color-black80: #333333;
  --color-black90: #1a1a1a;
  --color-blue10: #cae0f3;
  --color-blue20: #b6d4ee;
  --color-blue30: #a1c7ea;
  --color-blue40: #8cbbe5;
  --color-blue50: #77afe0;
  --color-blue60: #63a3db;
  --color-blue70: #4e96d7;
  --color-blue80: #398ad2;
  --color-blue90: #2d7dc5;
  --color-red10: #fbc7c9;
  --color-red20: #f9afb2;
  --color-red30: #f7989b;
  --color-red40: #f58084;
  --color-red50: #f3686d;
  --color-red60: #f15157;
  --color-red70: #ef3940;
  --color-red80: #ee2129;
  --color-red90: #e4121a;
  --color-fg: #1a1a1a;
  --color-bg: #ffffff;
  --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-primary: #cc1017;
  --color-primary-fg: #ffffff;
  --color-accent: #2870B0;
  --color-accent-fg: #ffffff;
  --color-mute: #666666;
  --color-mute-fg: #ffffff;
  --color-bg-l: #e6e6e6;
  --color-media-bg: #1a1a1a;
  --color-outline: #2870B0;
  --color-highlight-bg: #2870B0;
  --color-highlight-fg: #ffffff;
  --color-logo-bg: #cc1017;
  --color-logo-fg: #ffffff;
  --color-wrong: #cc1017;
  --color-correct: darkgreen;
  --color-indecisive: #999999;
  --color-checked: #999999;
  --color-active-bg: orange;
  --color-active-fg: #000000;
  --color-unfinished: #cc1017;
  --color-todo-bg: purple;
  --color-todo-fg: #ffffff;
  --color-error-bg: #cc1017;
  --color-error-fg: #ffffff;
  --color-alert-bg: yellow;
  --color-alert-fg: #000000;
  --color-border: #999999;
  --color-input-border: #999999;
  --color-input-focus-border: #398ad2;
  --color-input-error-border: #cc1017;
  --color-input-bg: var(--color-bg);
  --color-input-fg: var(--color-fg);
  --input-choice-border-color: var(--color-input-border);
  --color-choice-fg: var(--color-fg);
  --color-choice-bg: var(--color-bg);
  --color-button-bg: #cc1017;
  --color-button-fg: #ffffff;
  --color-button-hbg: #a60d13;
  --color-button-hfg: #ffffff;
  --color-label-bg: #398ad2;
  --color-label-fg: #ffffff;
  --color-message-notice-bg: #cae0f3;
  --color-message-alert-bg: #ffffcc;
  --color-message-exception-bg: #fbc7c9;
  --color-message-error-bg: #fbc7c9;
  --color-selection-bg: #398ad2;
  --color-selection-fg: #ffffff;
  --color-input-choice-inactive: #ffffff;
  --color-warning: #cc1017;
  --color-main-bg: #ffffff;
  --color-even-fg: #333333;
  --color-even-bg: #cccccc;
  --color-main-menu-bg: #e6e6e6;
  --color-main-menu-fg: #1a1a1a;
}
:root[data-color-scheme=dark] {
  --color-fg: #ffffff;
  --color-bg: #1a1a1a;
  --color-bg-l: #666666;
  --color-media-bg: #ffffff;
  --color-indecisive: #666666;
  --color-border: #666666;
  --color-input-border: #cccccc;
  --color-bg-shader: rgba(128, 128, 128, 0.5);
  --color-main-bg: #1a1a1a;
  --color-main-menu-fg: #ffffff;
  --color-main-menu-bg: #4d4d4d;
}
: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-1: 18px/1.5 Montserrat, Helvetica, sans-serif;
  --font-h1: 700 var(--raster-2t)/1.1 Montserrat, Helvetica, sans-serif;
  --letter-spacing-h1: -0.5px;
  --font-h2: 600 var(--raster)/1.5 Montserrat, Helvetica, sans-serif;
  --letter-spacing-h2: 0;
  --font-h3: 600 var(--raster-23p)/1.5 Montserrat, Helvetica, sans-serif;
  --letter-spacing-h3: 0;
  --font-h4: 400 var(--raster-23p)/1.5 Montserrat, Helvetica, sans-serif;
  --letter-spacing-h4: 0;
  --font-h5: 400 var(--raster-23p)/1.5 Montserrat, Helvetica, sans-serif;
  --letter-spacing-h5: 0;
  --font-p: 100 var(--raster-23p)/1.7 Montserrat, Helvetica, sans-serif;
  --letter-spacing-p: 0;
  --font-l: 100 var(--raster-23p)/1.5 Montserrat, Helvetica, sans-serif;
  --letter-spacing-l: 0;
  --font-button: 600 var(--raster-23p)/1.7 Montserrat, Helvetica, sans-serif;
  --letter-spacing-button: 0;
  --raster-6t: 216px;
  --raster-4t: 144px;
  --raster-3t: 108px;
  --raster-2t: 72px;
  --raster-15t: 54px;
  --raster: 36px;
  --neg-raster: -36px;
  --raster-15p: 24px;
  --raster-2p: 18px;
  --raster-25p: 14.4px;
  --raster-23p: 24px;
  --raster-3p: 12px;
  --raster-4p: 9px;
  --raster-6p: 6px;
  --raster-8p: 4.5px;
  --raster-12p: 3px;
  --menu-width: 72px;
  --half-menu-width: 36px;
  --double-menu-width: 144px;
  --negative-double-menu-width: -144px;
  --negative-half-menu-width: -36px;
  --negative-menu-width: -72px;
  --menu-font-size: var(--raster-23p);
  --menu-font: var(--menu-font-size)/var(--menu-width) Montserrat, Helvetica, sans-serif;
  --menu-icon-size: var(--raster);
  --menu-height: var(--raster-2t);
  --chat-width: 432px;
  --main-padding: var(--raster-3p);
  --side-right-width: minmax(0,1fr);
  --right-width: var(--menu-width);
  --main-width: calc(var(--window-width) - var(--double-menu-width) - var(--chat-width));
  --task-width: calc(var(--main-width) - var(--main-padding) * 2);
  --header-height: var(--menu-width);
  --footer-height:var(--menu-width);
  --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;
  --font-ask: var(--font-ask);
  --label-line-height: var(--raster);
  --font-response-label: 400 var(--raster-23p)/var(--label-line-height) Montserrat, Helvetica, sans-serif;
  --font-response-label-size: var(--raster);
  --label-padding: 0 var(--raster-6p);
  --font-response-font: 100 var(--raster-23p)/1.5 Montserrat, Helvetica, sans-serif;
  --gap-1: 0.1rem;
  --gap-2: 0.25rem;
  --gap-3: 0.5rem;
  --visual-ratio-width: 3;
  --visual-ratio-height: 2;
  --visual-width: 27rem;
  --visual-height: 18rem;
  --task-row-gap: 1rem;
  --task-column-gap: 0.5rem;
  --task-columns: 12;
  --task-column-width: calc((var(--task-width) - 5.5rem) / 12);
}
@media screen and (max-width: 1776px) {
  :root {
    --main-width: calc(1200px - var(--main-padding) * 2);
  }
}
@media screen and (max-width: 1320px) {
  :root {
    --right-width: minmax(0, var(--menu-width));
  }
}
@media screen and (max-width: 1248px) {
  :root {
    --right-width: 0;
    --main-width: calc(var(--window-width) - var(--menu-width));
  }
}
:root * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
:root *::-webkit-scrollbar {
  display: none;
}
:root {
  --color-blue: #2870B0;
  --color-white: #ffffff;
  --color-red: #cc1017;
  --color-yellow: yellow;
  --color-orange: orange;
  --color-orange10: #ffb52e;
  --color-orange20: #ffb329;
  --color-orange30: #ffb224;
  --color-orange40: #ffb01f;
  --color-orange50: #ffae1a;
  --color-orange60: #ffac14;
  --color-orange70: #ffaa0f;
  --color-orange80: #ffa90a;
  --color-orange90: #ffa705;
  --color-green: darkgreen;
  --color-black: #000000;
  --color-black10: #e6e6e6;
  --color-black20: #cccccc;
  --color-black30: #b3b3b3;
  --color-black40: #999999;
  --color-black50: gray;
  --color-black60: #666666;
  --color-black70: #4d4d4d;
  --color-black80: #333333;
  --color-black90: #1a1a1a;
  --color-blue10: #cae0f3;
  --color-blue20: #b6d4ee;
  --color-blue30: #a1c7ea;
  --color-blue40: #8cbbe5;
  --color-blue50: #77afe0;
  --color-blue60: #63a3db;
  --color-blue70: #4e96d7;
  --color-blue80: #398ad2;
  --color-blue90: #2d7dc5;
  --color-red10: #fbc7c9;
  --color-red20: #f9afb2;
  --color-red30: #f7989b;
  --color-red40: #f58084;
  --color-red50: #f3686d;
  --color-red60: #f15157;
  --color-red70: #ef3940;
  --color-red80: #ee2129;
  --color-red90: #e4121a;
  --color-fg: #1a1a1a;
  --color-bg: #ffffff;
  --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-primary: #cc1017;
  --color-primary-fg: #ffffff;
  --color-accent: #2870B0;
  --color-accent-fg: #ffffff;
  --color-mute: #666666;
  --color-mute-fg: #ffffff;
  --color-bg-l: #e6e6e6;
  --color-media-bg: #1a1a1a;
  --color-outline: #2870B0;
  --color-highlight-bg: #2870B0;
  --color-highlight-fg: #ffffff;
  --color-logo-bg: #cc1017;
  --color-logo-fg: #ffffff;
  --color-wrong: #cc1017;
  --color-correct: darkgreen;
  --color-indecisive: #999999;
  --color-checked: #999999;
  --color-active-bg: orange;
  --color-active-fg: #000000;
  --color-unfinished: #cc1017;
  --color-todo-bg: purple;
  --color-todo-fg: #ffffff;
  --color-error-bg: #cc1017;
  --color-error-fg: #ffffff;
  --color-alert-bg: yellow;
  --color-alert-fg: #000000;
  --color-border: #999999;
  --color-input-border: #999999;
  --color-input-focus-border: #398ad2;
  --color-input-error-border: #cc1017;
  --color-input-bg: var(--color-bg);
  --color-input-fg: var(--color-fg);
  --input-choice-border-color: var(--color-input-border);
  --color-choice-fg: var(--color-fg);
  --color-choice-bg: var(--color-bg);
  --color-button-bg: #cc1017;
  --color-button-fg: #ffffff;
  --color-button-hbg: #a60d13;
  --color-button-hfg: #ffffff;
  --color-label-bg: #398ad2;
  --color-label-fg: #ffffff;
  --color-message-notice-bg: #cae0f3;
  --color-message-alert-bg: #ffffcc;
  --color-message-exception-bg: #fbc7c9;
  --color-message-error-bg: #fbc7c9;
  --color-selection-bg: #398ad2;
  --color-selection-fg: #ffffff;
  --color-input-choice-inactive: #ffffff;
  --color-warning: #cc1017;
  --color-main-bg: #ffffff;
  --color-even-fg: #333333;
  --color-even-bg: #cccccc;
  --color-main-menu-bg: #e6e6e6;
  --color-main-menu-fg: #1a1a1a;
}
:root[data-color-scheme=dark] {
  --color-fg: #ffffff;
  --color-bg: #1a1a1a;
  --color-bg-l: #666666;
  --color-media-bg: #ffffff;
  --color-indecisive: #666666;
  --color-border: #666666;
  --color-input-border: #cccccc;
  --color-bg-shader: rgba(128, 128, 128, 0.5);
  --color-main-bg: #1a1a1a;
  --color-main-menu-fg: #ffffff;
  --color-main-menu-bg: #4d4d4d;
}
body {
  margin: 0;
  height: var(--window-height, 100dvh);
  display: grid;
  align-items: stretch;
  overflow: hidden;
  grid-template-rows: [header_ top_] var(--header-height) [_top _header mid_ main_] minmax(0, 1fr) [_main _mid footer_ bottom_] var(--footer-height) [_bottom _footer];
  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;
}
body:before {
  grid-area: side-left;
  content: "";
}
@media screen and (max-width: 1247px) {
  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];
    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;
    --chat-width: 100vw;
  }
}
body > main, body > main > .qb-show {
  grid-area: mid-center;
  grid-row: top_/_bottom;
}
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: 2;
}
body #mainMenuDrawer {
  grid-area: side-left;
  display: grid;
  column-gap: var(--raster-6p);
  grid-auto-rows: min-content;
  grid-template-columns: [left_] var(--menu-width) [_left center_] var(--menu-width) [_center right_] 1fr [_right];
}
body #mainMenuDrawer a {
  grid-column: left_/_right;
  order: 3;
}
body #mainMenuDrawer .profile-button {
  order: 1;
}
body #mainMenuDrawer .mode-dark-light {
  order: 2;
}
body #mainMenuButton {
  grid-area: top-left;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
@media screen and (max-width: 1752px) {
  body {
    --chat-non-open-display: none;
  }
  body qb-chat::part(open) {
    grid-area: send !important;
  }
}
body qb-chat {
  max-width: 100vw;
  z-index: 4;
  grid-area: var(--chat-area);
  display: grid;
  --chat-row-gap: var(--raster-6p);
  row-gap: var(--chat-row-gap);
  align-self: stretch;
  justify-self: end;
  --chat-input-column-width: calc(var(--chat-width) - var(--double-menu-width));
  grid-template-rows: 1fr min-content minmax(var(--menu-width), max-content);
  grid-template-columns: var(--menu-width) var(--chat-input-column-width) var(--menu-width);
  grid-template-areas: "messages messages messages" "picker . ." "emoji input send";
}
body qb-chat > .qb-message {
  --icon-size: calc(var(--raster) - var(--raster-6p));
}
body qb-chat::part(bottom) {
  display: contents;
}
body qb-chat::part(open) {
  grid-area: emoji;
  display: var(--chat-no-open);
}
body qb-chat::part(emoji) {
  grid-area: emoji;
}
body qb-chat::part(send) {
  grid-area: send;
  display: var(--chat-no-send);
}
body qb-chat::part(messages-scroll) {
  grid-area: messages;
}
body qb-chat::part(messages) {
  row-gap: var(--chat-row-gap);
}
body qb-chat.open {
  --chat-non-open-display: initial;
}
body qb-chat.open.has-input {
  --chat-no-open: none !important;
}
body qb-chat.open:not(.has-input) {
  --chat-no-send: none !important;
}
body qb-chat .input {
  grid-area: input;
  justify-self: stretch;
  min-width: 0;
}
body main > .qb-show {
  padding: 0 var(--main-padding);
  padding-bottom: var(--raster-4t);
}
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 {
  --icon-size: var(--menu-width);
}
body #timer {
  --_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-bg);
  display: grid;
  line-height: 1em;
  place-items: center;
  text-align: center;
}
body #timer.zero, body #timer:empty {
  display: none;
}
body #timer.tack::part(S):before {
  color: var(--color-blue);
}
body #timer[localtime]::part(S):before {
  content: ":";
}
body #timer::part(M), body #timer::part(S) {
  display: contents;
}
body > qb-nav, body > qb-chat {
  font: var(--menu-font);
}
body > qb-nav button, body > qb-chat button {
  border: none;
  padding: 0;
}
body #mainMenuButton {
  --icon-size: var(--menu-width);
  line-height: 1;
  background-color: transparent;
  color: var(--color-main-menu-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(name), body .profile-button qb-user::part(slot) {
  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(--menu-width);
  max-width: 0;
  overflow: hidden;
  background-color: var(--color-main-menu-bg);
  color: var(--color-main-menu-fg);
  transition: max-width 0.3s linear;
  white-space: nowrap;
}
body #mainMenuDrawer.open {
  max-width: 50vw;
}
body #mainMenuDrawer > a {
  margin: 0 var(--main-menu-margin);
}
body #mainMenuDrawer::backdrop {
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
}
body #mainMenuDrawer[open] {
  transform: translateX(0);
}
body dialog {
  font: var(--font-p);
}
body dialog.modal:not(.no-backdrop)::backdrop {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
}
body #emojiDialog {
  padding: 0;
  border: none;
}
body #emojiDialog qb-emoji-picker {
  --emoji-size: var(--raster);
  --category-emoji-size: var(--raster);
}
body #flashDialog {
  max-width: 50vw;
  min-width: calc(var(--raster) * 10);
  padding: 0;
  border: none;
}
body #flashDialog:has(div.alert) {
  outline: 2px solid var(--color-warn);
}
body #flashDialog > * {
  display: grid;
  gap: var(--raster-2p);
  padding: var(--raster);
}
body #profileDialog {
  border: none;
  max-width: 50vw;
  min-width: calc(var(--raster) * 10);
  padding: 0;
}
body #profileDialog > * {
  min-height: calc(var(--raster) * 8);
  padding: var(--raster);
}
[data-category=knowledge] {
  order: -10;
}
[data-category=music] {
  order: -9;
}
[data-category=scores] {
  display: none;
}
[data-category=estimate] {
  order: -8;
}
div.ranking {
  display: flex;
  gap: 1em;
  flex-wrap: nowrap;
}
body > qb-chat .input {
  resize: vertical;
  min-height: var(--menu-width);
  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 .input.edit-message:before {
  content: var(--icon-edit) " " !important;
  float: left;
}
body > qb-chat .input.reply-message {
  position: relative;
}
body > qb-chat .input.reply-message:before {
  padding-left: 1.5ch;
  content: "…" attr(data-reference) "…" !important;
  font-style: italic;
  display: block;
}
body > qb-chat .input.reply-message:after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: var(--slot-avatar);
  background-color: var(--slot-color);
  height: max-content;
  width: max-content;
}
body > qb-chat .my-message {
  --message-editable: block;
}
qb-participants {
  display: flex;
  flex-wrap: wrap;
  --slot-margin: calc(var(--raster-2p) + var(--raster-6p));
  margin-left: var(--slot-margin);
  gap: var(--raster-6p);
  --slot-icon-size: var(--raster-2p);
  --font-size: 1rem;
}
qb-participants .slot-join-token,
qb-participants button,
qb-participants label {
  display: flex;
  align-items: center;
  font: var(--font-1);
  gap: var(--gap-2);
  align-self: center;
}
qb-participants button:hover {
  outline: none;
}
qb-participants button,
qb-participants summary,
qb-participants label [type=radio] {
  width: 1em;
  height: 1em;
  min-width: 0;
}
qb-participants .slot-join-token {
  user-select: all;
  order: 1;
  cursor: copy;
}
qb-participants .slot-join-token:hover {
  color: var(--color-selection-fg);
  background-color: var(--color-selection-bg);
}
qb-participants .slot-join-token:before {
  content: "🔗 ";
}
qb-participants qb-slot,
qb-participants qb-mc,
qb-participants qb-player {
  position: relative;
}
qb-participants qb-slot > button,
qb-participants qb-mc > button,
qb-participants qb-player > button {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  width: 1.7em;
  aspect-ratio: 1;
}
qb-participants qb-slot .edit,
qb-participants qb-mc .edit,
qb-participants qb-player .edit {
  order: 10;
}
qb-participants qb-slot:not(:focus-within) .editNode,
qb-participants qb-mc:not(:focus-within) .editNode,
qb-participants qb-player:not(:focus-within) .editNode {
  display: none;
}
qb-participants qb-slot .editNode,
qb-participants qb-mc .editNode,
qb-participants qb-player .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-mc,
qb-participants qb-player {
  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-slot {
  --slot-avatar: var(--slot-index, "?");
  --slot-name: "No Team";
  margin-left: calc(var(--slot-margin) * -1);
  flex: 1 1 100%;
  justify-content: start;
}
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;
}
section[itemtype=Team] > div,
section#users {
  display: grid;
  gap: var(--raster-4p);
  grid-template-columns: [s_ rank_] min-content [_rank count_] min-content [_count avatar_] var(--raster) [_avatar nickname_] min-content [_nickname name_] 1fr [_name _e];
  grid-auto-rows: min-content;
  grid-auto-flow: dense;
  font: var(--font-p);
}
section[itemtype=Team] > div > *,
section#users > * {
  white-space: nowrap;
}
section#users h2,
section[itemtype=Team] h2 {
  cursor: context-menu;
}
section#users .rank,
section[itemtype=Team] .rank {
  justify-self: right;
}
section#users .rank:after,
section[itemtype=Team] .rank:after {
  content: ".";
}
section#users .rank,
section[itemtype=Team] .rank {
  grid-column: rank_/_rank;
}
section#users .avatar,
section[itemtype=Team] .avatar {
  grid-column: avatar_/_avatar;
  place-self: stretch;
  text-align: center;
  aspect-ratio: 1;
}
section#users .avatar:empty:before,
section[itemtype=Team] .avatar:empty:before {
  content: "👤";
}
section#users .nickname,
section[itemtype=Team] .nickname {
  grid-column: nickname_/_nickname;
}
section#users .name,
section[itemtype=Team] .name {
  grid-column: name_/_name;
}
section#users .count,
section[itemtype=Team] .count {
  grid-column: count_/_count;
}
section#users .count,
section[itemtype=Team] .count {
  justify-self: center;
}
section#users .count:after,
section[itemtype=Team] .count:after {
  content: "x";
}
@keyframes animating-alert {
  0%, 100% {
    background-color: var(--color-bg);
    color: var(--color-fg);
  }
  50% {
    background-color: var(--color-highlight-bg);
    color: var(--color-highlight-fg);
  }
}
@keyframes animation-static-bg {
  100% {
    background-color: var(--color-bg);
    color: var(--color-fg);
  }
}
@keyframes animation-static-active {
  100% {
    background-color: var(--color-active-bg);
    color: var(--color-active-fg);
  }
}
@keyframes animation-static-highlight {
  100% {
    background-color: var(--color-highlight-bg);
    color: var(--color-highlight-fg);
  }
}
@keyframes animation-static-todo {
  100% {
    background-color: var(--color-todo-bg);
    color: var(--color-todo-fg);
  }
}
html {
  --animate-static-highlight: animation-static-highlight 0s forwards;
  --animate-static-active: animation-static-active 0s forwards;
  --animate-static: var(--animate-static-active);
  --animate-static-todo: animation-static-todo 0s forwards;
  --animate-static-bg: animation-static-bg 0s forwards;
  --animate-alternate-highlight: 2s animating-alert alternate linear infinite;
}
.has-paused, .is-paused,
.alert-animate {
  --alert-animate: var(--animate-alternate-highlight);
}
.book {
  display: grid;
  row-gap: var(--raster-3p);
  column-gap: var(--raster-4p);
  grid-template-columns: [number] var(--raster-3p) [left_] max-content [_left right_] 1fr [_right];
  counter-reset: step;
}
@media screen and (max-width: 650px) {
  .book {
    grid-template-columns: [number] var(--raster-3p) [left_ right_] 1fr [_left _right];
  }
}
.book form, .book fieldset {
  display: contents;
}
.book .book-button {
  font: var(--font-2);
  justify-self: start;
}
.book legend {
  display: contents;
}
.book legend span {
  grid-column: number;
}
.book legend qb-gettext {
  grid-column: left_/_right;
}
.book form > fieldset > legend:before {
  counter-increment: step 1;
  grid-column: number;
  content: counter(step) ".";
}
.book input[type=submit] {
  grid-column: left_/_right;
}
.book .staff a:nth-of-type(odd) {
  grid-column: left_;
}
.book .staff a:nth-of-type(even) {
  grid-column: right_;
}
.book .slot label:nth-of-type(odd) {
  grid-column: left_;
}
.book .slot label:nth-of-type(even) {
  grid-column: right_;
}
.book .slot label.left {
  grid-column: left_;
}
.book .slot label.right {
  grid-column: right_;
}
.book .slot label > * {
  vertical-align: middle;
}
.book .slot label .active {
  color: var(--color-label-fg);
  background-color: var(--color-label-bg);
}
html {
  --header-height: var(--menu-width);
  --color-scheme-dark: none;
  --color-scheme-light: contents;
}
html body > header {
  gap: var(--raster-3p);
}
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(--menu-width);
}
html .mode-dark-light {
  aspect-ratio: 1;
}
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 {
  background-color: var(--color-main-bg);
  display: block;
  margin: 0 0 0 var(--negative-menu-width);
  padding: var(--header-height) var(--menu-width) var(--double-menu-width);
  overflow: auto;
}
html:not(.show) body > main > * {
  margin: 0 var(--negative-menu-width);
  padding: var(--menu-width) var(--menu-width);
}
section {
  padding: var(--raster-4t) 0;
}
section:nth-of-type(even) {
  background: var(--color-even-bg);
  color: var(--color-even-fg);
}
section:nth-of-type(odd) {
  background: var(--color-bg);
  color: var(--color-fg);
}
menu.cta,
.world-coverage {
  display: flex;
  justify-content: center;
  list-style-type: none;
  gap: var(--raster-2p);
  flex-wrap: wrap;
}
menu.cta {
  margin-top: var(--raster-2t);
  margin-bottom: var(--raster);
}
menu.cta:has(qb-show-card) {
  gap: var(--raster-2t);
}
menu.cta:has(qb-show-card) span {
  display: none;
}
section#hero h1 {
  line-height: 1.1;
  margin-bottom: var(--raster);
}
section#hero h4 {
  font: var(--font-h4);
  color: var(--color-muted);
}
section h3 {
  font-weight: 600;
  margin-bottom: var(--raster-4p);
}
section h4 {
  margin-top: var(--raster-2p);
  margin-bottom: var(--raster-6p);
}
menu.cta li {
  display: inline-block;
}
menu.cta li > a {
  padding: var(--raster-2p) var(--raster);
}
#players qb-show-card:nth-of-type(n+4) {
  display: none;
}
#microcta {
  --card-raster: var(--raster-15p);
}
.cta-secondary {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}
#players h3 {
  color: var(--color-accent);
}
#quizmasters h3 {
  color: var(--color-primary);
}
#businesses h3 {
  color: var(--color-fg);
}
ol.rank,
.locations {
  margin-top: var(--raster-2p);
  font-size: var(--raster);
  color: var(--color-muted);
}
.locations {
  list-style-type: none;
}
section > article {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--raster-2t);
}
.countries {
  margin-top: var(--raster-2p);
  display: flex;
  list-style-type: none;
  flex-wrap: wrap;
  font-size: var(--raster-2t);
  flex: 1 1 max(50%, 300px);
  line-height: 1;
  justify-content: end;
  align-items: start;
  gap: var(--raster-3p);
}
ol.rank {
  list-style-type: decimal;
}
.locations span {
  margin-left: var(--raster-3p);
}
ul.references {
  flex-wrap: wrap;
  list-style-type: none;
  display: flex;
  padding: 0;
  filter: grayscale(100%);
  justify-content: center;
  margin: var(--raster-2t) auto;
  gap: var(--raster);
}
ul.references img {
  height: var(--raster);
}
blockquote {
  font: var(--font-l);
  font-style: italic;
  margin: var(--raster-2t) 0;
  padding-left: var(--raster);
  border-left: 4px solid var(--color-accent);
}
blockquote div {
  margin-bottom: var(--raster-15p);
}
qb-profile-chooser {
  place-self: stretch;
  width: 100%;
}
qb-profile-chooser:not([itemid]) {
  display: none;
}
qb-auth {
  width: 100%;
  display: grid;
}
qb-show-card {
  --_card-raster: var(--card-raster, var(--raster));
  --_card-raster-23p: calc(var(--_card-raster) / 3 * 2);
  --_card-raster-4p: calc(var(--_card-raster) / 4);
  --_card-raster-6p: calc(var(--_card-raster) / 6);
  --_card-raster-8t: calc(var(--_card-raster) * 8);
  --_card-raster-12p: calc(var(--_card-raster) / 12);
  display: contents;
}
qb-show-card > a {
  background-color: var(--color-accent);
  color: var(--color-accent-fg) !important;
  --slot-name-color: var(--color-accent-fg) !important;
}
qb-show-card > div .badge-book {
  display: none;
}
qb-show-card > a {
  text-decoration: none;
}
qb-show-card > a:hover {
  background: var(--button-hbg) !important;
}
qb-show-card > a:hover > * {
  color: var(--button-hfg) !important;
}
qb-show-card > div {
  background-color: var(--color-mute);
  color: var(--color-mute-fg) !important;
  --slot-name-color: var(--color-mute-fg) !important;
}
qb-show-card > div, qb-show-card > a {
  margin: 0;
  border-radius: var(--_card-raster-12p);
  display: grid;
  gap: var(--_card-raster-6p);
  grid-template-columns: var(--_card-raster) minmax(1fr, var(--_card-raster-8t));
  grid-template-areas: "icon time" ". header" ". vendor" "team cta";
  grid-template-rows: min-content 1fr min-content min-content;
  font: 100 var(--_card-raster-23p)/1.7 var(--font-family);
  padding: var(--_card-raster-6p) var(--_card-raster-4p);
  --slot-avatar-display: none;
  --slot-icon-size: auto;
}
qb-show-card > div > svg, qb-show-card > a > svg {
  grid-area: icon;
  width: var(--_card-raster);
  place-self: stretch;
}
qb-show-card > div > header, qb-show-card > a > 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;
}
qb-show-card > div > .vendor, qb-show-card > a > .vendor {
  grid-area: vendor;
  font-size: 0.5em;
}
qb-show-card > div > qb-time, qb-show-card > a > qb-time {
  grid-area: time;
}
qb-show-card > div > .ranks, qb-show-card > a > .ranks {
  z-index: 1;
  grid-area: time;
  justify-self: end;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--raster);
  place-items: center;
}
qb-show-card > div > .ranks [data-category=feedback], qb-show-card > a > .ranks [data-category=feedback] {
  display: none;
}
qb-show-card > div > .ranks [data-rank] > span, qb-show-card > a > .ranks [data-rank] > span {
  color: transparent;
}
qb-show-card > div > .ranks [data-rank="1"]:before, qb-show-card > a > .ranks [data-rank="1"]:before {
  content: "🏆";
}
qb-show-card > div > .ranks [data-rank="2"]:before, qb-show-card > a > .ranks [data-rank="2"]:before {
  content: "🥈";
}
qb-show-card > div > .ranks [data-rank="3"]:before, qb-show-card > a > .ranks [data-rank="3"]:before {
  content: "🥉";
}
qb-show-card > div > qb-slot, qb-show-card > a > qb-slot {
  align-self: end;
  grid-area: team;
  justify-self: start;
}
qb-show-card > div > qb-slot::part(name), qb-show-card > a > qb-slot::part(name) {
  font: 100 var(--_card-raster-23p)/1.7 var(--font-family);
}
qb-show-card > div > nav, qb-show-card > a > nav {
  align-self: end;
  grid-area: cta;
  justify-self: end;
}
@media screen and (max-width: 768px) {
  html:not(.show) body > main {
    padding: 0 var(--half-menu-width) var(--double-menu-width);
  }
  html:not(.show) body > main > * {
    margin: 0 var(--negative-half-menu-width);
    padding: var(--half-menu-width);
  }
  body {
    max-width: 100vw;
  }
  body > main {
    max-width: 100vw;
  }
  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];
  }
  body > header .mode-dark-light,
  body > header .profile-button {
    display: none;
  }
  html ul, html ol {
    padding: var(--raster-3p);
    margin-left: var(--raster-3p);
  }
  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) {
  #players menu.cta {
    display: grid;
    justify-content: stretch;
  }
  dialog.modal {
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin: auto 0;
  }
  dialog.modal > div {
    padding: 0 !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);
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.9);
  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;
}