@charset "UTF-8";
:host(qb-gettext) slot[name=edit] {
  position: relative;
  grid-column: 1/-1;
  display: var(--editable-block, none);
}
:host(qb-gettext) slot[name=edit]:before {
  position: absolute;
  left: 0;
  bottom: 0;
  content: var(--icon-edit);
  opacity: 0.5;
}
:host(qb-gettext) slot[name=edit]:hover:before {
  opacity: 1;
}
:host(qb-gettext.changed) slot[name=edit]:before {
  content: var(--icon-save);
  opacity: 1;
}
:host(qb-gettext-edit) {
  background-color: var(--color-bg);
  outline: 2px solid blue;
  outline-offset: 2px;
  position: absolute;
  overflow: visible !important;
  min-width: 300px;
}
:host(qb-gettext-edit) slot {
  display: block;
  white-space: pre-wrap; /* preserves newlines and wrapping */
  font-family: monospace;
}
:host(qb-gettext-edit) nav {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(-100%);
  font-size: var(--raster-2p);
  grid-template-columns: 2.5em 2.5em 1em;
  grid-template-rows: 1em;
  align-items: stretch;
}
:host(qb-gettext-edit) nav select {
  font-size: 0.5em;
}
:host(qb-gettext-edit) nav button {
  line-height: 1em;
  padding: 0;
}
:host(qb-gettext-edit) nav button:before {
  content: var(--icon-close);
}
:host(qb-gettext-edit:focus-within) nav {
  display: grid;
}
* {
  box-sizing: border-box;
}
body {
  background-color: var(--color-main-menu-bg);
}
main > section {
  margin-bottom: 4em;
}
main > section:not(:first-of-type) {
  margin-top: 4em;
}
h1 {
  font: var(--font-h1);
  letter-spacing: var(--letter-spacing-h1);
}
h2 {
  font: var(--font-h2);
  letter-spacing: var(--letter-spacing-h2);
}
h3 {
  font: var(--font-h3);
  letter-spacing: var(--letter-spacing-h3);
}
h4 {
  font: var(--font-h4);
  letter-spacing: var(--letter-spacing-h4);
}
h5 {
  font: var(--font-h5);
  letter-spacing: var(--letter-spacing-h5);
}
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
  margin-top: 0;
}
strong {
  font-weight: 600;
}
p {
  font: var(--font-p);
  letter-spacing: var(--letter-spacing-p);
  margin-bottom: var(--raster-23p);
}
ul, ol {
  font: var(--font-l);
  letter-spacing: var(--letter-spacing-l);
  margin: var(--raster) 0;
  padding-left: var(--raster);
}
a[href]:not(.button, .cta) {
  color: inherit;
  text-decoration-color: var(--color-outline);
}
a[href]:not(.button, .cta):hover {
  color: var(--color-outline);
  text-decoration-color: var(--color-outline);
}
a[href]:not(.button, .cta):focus-within {
  outline: none;
  background-color: inherit;
}
button, input[type=submit], input[type=reset] {
  appearance: none;
}
input:not([type=range], [type=checkbox], [type=radio], [type=submit]), select, textarea, [contenteditable], 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);
}
input:not([type=range], [type=checkbox], [type=radio], [type=submit]):focus-visible, select:focus-visible, textarea:focus-visible, [contenteditable]:focus-visible, 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);
}
button.field_with_errors, .button.field_with_errors, input.field_with_errors, select.field_with_errors, textarea.field_with_errors, [contenteditable].field_with_errors, 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;
}
button:has(.i-icon), input[type=submit]:has(.i-icon) {
  display: grid;
  place-items: stretch !important;
}
button:has(.i-icon) .i-icon, input[type=submit]:has(.i-icon) .i-icon {
  display: contents;
}
button, .button, button.cta, a.cta, input[type=submit], input[type=reset] {
  transition: 0.2s ease;
  user-select: none;
  align-content: center;
  text-align: center;
  text-decoration: none;
  display: grid;
}
button.nobutton, .button.nobutton, button.cta.nobutton, a.cta.nobutton, input[type=submit].nobutton, input[type=reset].nobutton {
  border: none;
  padding: 0;
  background: transparent;
}
button.nobutton:hover, .button.nobutton:hover, button.cta.nobutton:hover, a.cta.nobutton:hover, input[type=submit].nobutton:hover, input[type=reset].nobutton:hover {
  outline: var(--input-border-width) var(--input-border-style) var(--color-input-border, gray);
  background: transparent;
  border: none;
}
button.cta, .button.cta, button.cta.cta, a.cta.cta, input[type=submit].cta, 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);
}
button.cta:hover, .button.cta:hover, button.cta.cta:hover, a.cta.cta:hover, input[type=submit].cta:hover, 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);
}
input:not([type=range], [type=checkbox], [type=radio]), select, textarea, [contenteditable], 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);
}
input:not([type=range], [type=checkbox], [type=radio]):focus-visible, select:focus-visible, textarea:focus-visible, [contenteditable]:focus-visible, qb-time:has([name]):focus-visible {
  --color-input-border: var(--color-input-focus-border);
}
[type=radio], [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);
}
[type=radio]:checked, [type=checkbox]:checked {
  background: var(--color-label-bg);
}
[type=radio]:focus-visible, [type=checkbox]:focus-visible {
  --color-input-border: var(--color-input-focus-border);
}
.checked:not(input)[type=radio],
.checked:not(input)[type=checkbox] {
  background: var(--input-choice-border-color) !important;
}
[contenteditable] {
  overflow-wrap: anywhere;
  white-space: normal;
  align-self: stretch;
  overflow: hidden;
}
menu {
  margin: 0;
  padding: 0;
}
*::selection {
  background-color: var(--color-selection-bg);
  color: var(--color-selection-fg);
}
fieldset {
  margin: 0;
  padding: 0;
  border: none;
}
summary::-webkit-details-marker {
  display: none;
}
:host(qb-slot),
:host(qb-player),
:host(qb-user),
:host(qb-mc) {
  --_slot-icon-size: var(--slot-icon-size, var(--icon-size, 1.5rem));
  --_slot-font: var(--slot-font, inherit);
  --_slot-font-size: var(--slot-font-size, calc(0.8 * var(--_slot-icon-size)));
  --_slot-gap: var(--slot-gap, 0.25em);
  --_slot-name-column-width: var(--slot-name-column-width, max-content);
  --_slot-name-display: var(--slot-name-display, inline-block);
  --_slot-name-position: var(--slot-name-position);
  --_slot-name-pointer-events: var(--slot-name-pointer-events, auto);
  --_slot-name-slot-display: var(--slot-name-slot-display, none);
  --_slot-name-translate: var(--slot-name-translate, 0);
  --_slot-name-background: transparent;
  --_slot-name-color: var(--slot-name-color, var(--color-fg, #000000));
  --_slot-radius: var(--slot-radius, 0);
  --_slot-order: var(--slot-order);
  --_slot-color: var(--slot-color);
  --_slot-avatar: var(--slot-avatar, "😎");
  --_slot-avatar-background: var(--slot-avatar-background, var(--_slot-color));
  --_slot-avatar-color: var(--slot-avatar-color, white);
  --_slot-avatar-outline: var(--slot-avatar-outline, 0);
  font: var(--_slot-font);
  font-size: var(--_slot-font-size);
  order: var(--_slot-order);
  position: relative;
  display: inline-grid;
  place-self: start;
  grid-template-columns: [avatar_] var(--_slot-icon-size) [_avatar name_] max-content var(--slot-add-columns, [_name]);
  grid-auto-columns: max-content;
  grid-template-rows: var(--_slot-icon-size);
  grid-template-areas: "avatar name plus";
  grid-auto-flow: column;
  white-space: nowrap;
  gap: 0.25em 0.5em;
}
:host(qb-slot) [part=avatar],
:host(qb-slot) div.avatar,
:host(qb-player) [part=avatar],
:host(qb-player) div.avatar,
:host(qb-user) [part=avatar],
:host(qb-user) div.avatar,
:host(qb-mc) [part=avatar],
:host(qb-mc) div.avatar {
  grid-area: avatar;
  animation: var(--alert-animate);
  background: var(--_slot-avatar-background);
  color: var(--_slot-avatar-color);
  display: var(--slot-avatar-display, block);
  outline: var(--_slot-avatar-outline) solid;
  outline-offset: calc(-1 * var(--_slot-avatar-outline));
  place-self: stretch;
  text-align: center;
  width: var(--slot-icon-width, var(--_slot-icon-size));
  height: var(--slot-icon-height, var(--_slot-icon-size));
  border-radius: var(--_slot-radius);
}
:host(qb-slot) [part=avatar]:before,
:host(qb-slot) div.avatar:before,
:host(qb-player) [part=avatar]:before,
:host(qb-player) div.avatar:before,
:host(qb-user) [part=avatar]:before,
:host(qb-user) div.avatar:before,
:host(qb-mc) [part=avatar]:before,
:host(qb-mc) div.avatar:before {
  content: var(--_slot-avatar);
  line-height: 1em;
}
:host(qb-slot) [part=name],
:host(qb-slot) .name,
:host(qb-player) [part=name],
:host(qb-player) .name,
:host(qb-user) [part=name],
:host(qb-user) .name,
:host(qb-mc) [part=name],
:host(qb-mc) .name {
  grid-area: name;
  white-space: nowrap;
  place-self: center start;
  display: var(--_slot-name-display);
  position: var(--_slot-name-position);
  z-index: 10;
  pointer-events: var(--_slot-name-pointer-events);
  bottom: calc(var(--_slot-icon-size) * -1 * var(--_slot-name-translate));
  background: var(--_slot-name-background);
  color: var(--_slot-name-color);
  border-radius: var(--_slot-radius);
  line-height: 1em;
  margin: 0 0.5em 0 0;
}
:host(qb-slot) [part=name].right,
:host(qb-slot) .name.right,
:host(qb-player) [part=name].right,
:host(qb-player) .name.right,
:host(qb-user) [part=name].right,
:host(qb-user) .name.right,
:host(qb-mc) [part=name].right,
:host(qb-mc) .name.right {
  right: 0;
}
:host(qb-slot) [part=name]:not(.right),
:host(qb-slot) .name:not(.right),
:host(qb-player) [part=name]:not(.right),
:host(qb-player) .name:not(.right),
:host(qb-user) [part=name]:not(.right),
:host(qb-user) .name:not(.right),
:host(qb-mc) [part=name]:not(.right),
:host(qb-mc) .name:not(.right) {
  left: 0;
}
:host(qb-slot) [part=name]:before,
:host(qb-slot) .name:before,
:host(qb-player) [part=name]:before,
:host(qb-player) .name:before,
:host(qb-user) [part=name]:before,
:host(qb-user) .name:before,
:host(qb-mc) [part=name]:before,
:host(qb-mc) .name:before {
  content: var(--slot-name-prepend);
  padding-right: 0.5em;
}
:host(qb-slot) [part=name]:after,
:host(qb-slot) .name:after,
:host(qb-player) [part=name]:after,
:host(qb-player) .name:after,
:host(qb-user) [part=name]:after,
:host(qb-user) .name:after,
:host(qb-mc) [part=name]:after,
:host(qb-mc) .name:after {
  content: var(--slot-name);
}
:host(qb-slot) {
  --slot-avatar-background: var(--slot-color, var(--color-blue80));
  --slot-avatar: var(--slot-index);
  --slot-order: calc(var(--slot-index-num) * 2);
}
:host(qb-slot) div.avatar:before {
  line-height: 1em;
}
:host(qb-slot[index="0"]) {
  --slot-name: "No Team";
  --_slot-avatar: "👀";
  --slot-order: -1;
}
:host(qb-slot[index="-1"]) {
  --_slot-avatar: "🎤";
  --slot-order: -3;
}
:host(qb-player) {
  --_slot-avatar: var(--slot-avatar, "😎");
  --slot-order: calc(var(--slot-index-num) * 2 + 1);
}
:host(qb-user) {
  --_slot-avatar: var(--slot-avatar, "👤")!important;
}
:host(qb-mc) {
  --slot-order: -2 !important;
  --_slot-avatar: var(--slot-avatar, "🎓");
}
:host(qb-slot.avatar), :host(qb-player.avatar), :host(qb-mc.avatar) {
  --slot-name-display: none;
}
:host(qb-colab-input) {
  display: block;
  border: var(--input-border-width) var(--input-border-style) var(--color-input-border, gray);
  border-style: none;
  border-radius: var(--input-border-radius);
  outline: var(--input-border-width) none var(--color-border);
  outline-offset: var(--input-border-offset);
}
:host(qb-colab-input) slot[name=label] {
  float: left;
  white-space: nowrap;
  background: var(--_label-bg, var(--color-label-bg));
  color: var(--_label-fg, var(--color-label-fg));
  padding: var(--label-padding, 0 0.25em 0 0.5em);
  width: var(--label-width);
}
:host(qb-colab-input) div {
  clear: both;
  pointer-events: all;
  user-select: none;
  position: relative;
}
:host(qb-colab-input) div.reaction {
  border: 1px solid var(--color-selection-bg);
}
:host(qb-colab-input) div:not(.reaction) > nav {
  display: none;
}
:host(qb-colab-input) div .reaction-heart:before {
  content: var(--icon-reaction-heart);
}
:host(qb-colab-input) div .reaction-star:before {
  content: var(--icon-reaction-star);
}
:host(qb-colab-input) div .reaction-thumbsup:before {
  content: var(--icon-reaction-thumbsup);
}
:host(qb-colab-input) div .reaction-thumbsdown:before {
  content: var(--icon-reaction-thumbsdown);
}
:host(qb-colab-input) div .reaction-warn:before {
  content: var(--icon-reaction-warn);
}
:host(qb-colab-input) div .close {
  margin-left: auto;
}
:host(qb-colab-input) div .close:before {
  content: var(--icon-close);
}
:host(qb-colab-input) div .remove:before {
  content: var(--icon-recycle);
}
:host(qb-colab-input) div nav {
  outline: 1px solid var(--color-selection-bg);
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  background-color: var(--color-bg);
  padding: 0.5ch;
  gap: 0.5ch;
  z-index: 1;
}
:host(qb-colab-input) div nav > * {
  cursor: pointer;
}
:host(qb-colab-input) div > nav {
  right: 0;
}
:host(qb-colab-input) div blockquote {
  white-space: break-spaces;
  text-indent: 1.6em hanging;
  order: 1;
  margin: 0;
  flex: 1 1 100%;
}
:host(qb-colab-input) div blockquote:before {
  float: left;
  margin-right: 0.4em;
}
:host(qb-colab-input) div blockquote details {
  float: left;
  position: relative;
}
:host(qb-colab-input) div blockquote details summary::-webkit-details-marker {
  display: none;
}
:host(qb-colab-input) div blockquote details summary::marker {
  content: none;
}
:host(qb-colab-input) div blockquote details nav {
  left: -0.5ch;
}
:host(qb-colab-input) div blockquote:first-of-type {
  border-top: var(--input-border-width) dotted var(--color-border);
}
:host(qb-colab-input) div blockquote span {
  float: right;
}
:host(qb-colab-input:focus-within) {
  outline-color: var(--_label-bg, var(--color-label-bg));
}
:host(qb-media-video) div[part=media]:before,
:host(qb-media-picture) div[part=media]:before {
  content: var(--subindex-text);
  position: absolute;
  z-index: 1;
  width: 1rem;
  height: 1rem;
  background: var(--color-fg-shader);
  color: var(--color-bg);
  line-height: 1em;
  text-align: center;
}
:host(qb-media-video),
:host(qb-media-picture) {
  align-items: stretch;
}
:host(qb-media-video) video,
:host(qb-media-video) img, :host(qb-media-video) div[part=media],
:host(qb-media-picture) video,
:host(qb-media-picture) img,
:host(qb-media-picture) div[part=media] {
  width: 100%;
  height: 100%;
  min-width: 100%;
  max-width: 100%;
  min-height: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  background-color: var(--_color-media-bg);
}
:host(qb-media-video) figcaption,
:host(qb-media-picture) figcaption {
  align-self: end;
  grid-area: var(--grid-area-caption, caption);
}
:host(qb-media-video),
:host(qb-media-picture),
:host(qb-media-audio) {
  --_grid-area: var(--grid-area, 1/1/1/1);
  --grid-area-caption: 2 / 1 / 2 / 1;
  display: contents;
}
:host(qb-media-video) video, :host(qb-media-video) div[part=media], :host(qb-media-video) figcaption,
:host(qb-media-picture) video,
:host(qb-media-picture) div[part=media],
:host(qb-media-picture) figcaption,
:host(qb-media-audio) video,
:host(qb-media-audio) div[part=media],
:host(qb-media-audio) figcaption {
  grid-area: var(--_grid-area);
  z-index: var(--z-index, 0);
}
:host(qb-media-video) .switch-subindex:before,
:host(qb-media-picture) .switch-subindex:before,
:host(qb-media-audio) .switch-subindex:before {
  content: attr(value);
}
:host(qb-media-video) .switch-subindex[value="1"],
:host(qb-media-picture) .switch-subindex[value="1"],
:host(qb-media-audio) .switch-subindex[value="1"] {
  display: none;
}
:host(qb-media-video) figure,
:host(qb-media-picture) figure,
:host(qb-media-audio) figure {
  display: contents;
}
:host(qb-media-video) figure figcaption,
:host(qb-media-picture) figure figcaption,
:host(qb-media-audio) figure figcaption {
  display: var(--display-media-figcaption, none);
  position: relative;
}
:host(qb-media-video) figure figcaption > button,
:host(qb-media-picture) figure figcaption > button,
:host(qb-media-audio) figure figcaption > button {
  order: 3;
  place-self: var(--place-self-zoom-button, stretch end);
  aspect-ratio: var(--aspect-ratio-zoom-button, 1);
  border: none;
  background-color: var(--color-bg-shader);
  color: var(--color-fg);
}
:host(qb-media-video) figure figcaption > *,
:host(qb-media-picture) figure figcaption > *,
:host(qb-media-audio) figure figcaption > * {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}
:host(qb-media-video) figure figcaption:before,
:host(qb-media-picture) figure figcaption:before,
:host(qb-media-audio) figure figcaption:before {
  content: "";
  order: 2;
  flex: 1 1;
}
:host(qb-media-video) figure figcaption qb-media-control,
:host(qb-media-picture) figure figcaption qb-media-control,
:host(qb-media-audio) figure figcaption qb-media-control {
  --color-border: var(--color-input-border);
  --icon-size: var(--raster-2p);
  order: 0;
  flex: 1 1 100%;
}
:host(qb-media-video) figure figcaption qb-media-control:focus-within,
:host(qb-media-picture) figure figcaption qb-media-control:focus-within,
:host(qb-media-audio) figure figcaption qb-media-control:focus-within {
  --color-border: var(--color-highlight-bg);
}
:host(qb-media-video) figure figcaption.tools details, :host(qb-media-video) figure figcaption.caption details,
:host(qb-media-picture) figure figcaption.tools details,
:host(qb-media-picture) figure figcaption.caption details,
:host(qb-media-audio) figure figcaption.tools details,
:host(qb-media-audio) figure figcaption.caption details {
  display: contents;
}
:host(qb-media-video) figure figcaption.tools details summary, :host(qb-media-video) figure figcaption.caption details summary,
:host(qb-media-picture) figure figcaption.tools details summary,
:host(qb-media-picture) figure figcaption.caption details summary,
:host(qb-media-audio) figure figcaption.tools details summary,
:host(qb-media-audio) figure figcaption.caption details summary {
  display: block;
}
:host(qb-media-video) figure figcaption.caption details,
:host(qb-media-picture) figure figcaption.caption details,
:host(qb-media-audio) figure figcaption.caption details {
  display: contents;
}
:host(qb-media-video) figure figcaption:not(.caption).tools details,
:host(qb-media-picture) figure figcaption:not(.caption).tools details,
:host(qb-media-audio) figure figcaption:not(.caption).tools details {
  display: var(--editable-contents, none);
}
:host(qb-media-video) figure figcaption details,
:host(qb-media-picture) figure figcaption details,
:host(qb-media-audio) figure figcaption details {
  order: -1;
  display: none;
}
:host(qb-media-video) figure figcaption details:not(.tools) .tools, :host(qb-media-video) figure figcaption details:not(.caption) [itemprop=caption],
:host(qb-media-picture) figure figcaption details:not(.tools) .tools,
:host(qb-media-picture) figure figcaption details:not(.caption) [itemprop=caption],
:host(qb-media-audio) figure figcaption details:not(.tools) .tools,
:host(qb-media-audio) figure figcaption details:not(.caption) [itemprop=caption] {
  display: var(--editable-auto, none);
}
:host(qb-media-video) figure figcaption details summary,
:host(qb-media-picture) figure figcaption details summary,
:host(qb-media-audio) figure figcaption details summary {
  color: var(--color-fg);
  background-color: var(--color-bg);
  display: none;
  list-style-type: none;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: var(--raster);
}
:host(qb-media-video) figure figcaption details[open] summary,
:host(qb-media-picture) figure figcaption details[open] summary,
:host(qb-media-audio) figure figcaption details[open] summary {
  border-color: var(--color-input-focus-border);
}
:host(qb-media-video) figure figcaption details > div,
:host(qb-media-picture) figure figcaption details > div,
:host(qb-media-audio) figure figcaption details > div {
  background-color: var(--color-bg);
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 10;
  transform: translateY(100%);
  border-width: 1px;
  border-color: var(--color-input-focus-border);
  border-style: none solid solid;
}
:host(qb-media-container) input[type=range] {
  display: var(--tool-range-none);
}
:host(qb-media-audio) {
  --display-media-figcaption: flex;
  grid-template-rows: var(--raster);
}
:host(qb-media-audio) > * {
  grid-area: 1/1/1/1;
}
:host(qb-media-video) video, :host(qb-media-video) div[part=media], :host(qb-media-video) figcaption,
:host(qb-media-picture) video,
:host(qb-media-picture) div[part=media],
:host(qb-media-picture) figcaption {
  order: calc(var(--subindex) * -1);
}
:host(qb-media-video) {
  grid-template-rows: 1fr var(--raster);
}
:host(qb-media-video) video.playing {
  z-index: 2;
}
:host(qb-media-video) figure:before {
  width: 1em;
  aspect-ratio: 1;
  content: "▶️";
  font-size: 8em;
  grid-area: var(--_grid-area);
  place-self: center;
  z-index: 1;
  opacity: 0.8;
  pointer-events: none;
}
:host(qb-media-picture) {
  background: var(--_color-media-bg, var(--color-media-bg));
  --media-transform: var(--media-crop);
}
:host(qb-media-picture) input[type=color] {
  visibility: hidden;
  pointer-events: none;
  appearance: none;
  padding: 0;
  width: 0;
  height: 0;
}
:host(qb-media-picture) div[part=media] {
  overflow: hidden;
  pointer-events: var(--zoom, var(--editable-auto, var(--expanded-clickable, none)));
}
:host(qb-media-picture) div[part=media] img {
  transform: var(--media-transform);
}
:host(qb-media-picture) div[part=media] img.preview {
  display: initial;
}
:host(qb-media-picture) div[part=media] img.full:not(:only-child) {
  display: none;
}
:host(qb-media-picture) input[type=range] {
  display: var(--zoom, var(--editable-auto, none));
}
:host(.qb-media-visual.expanded) .i-icon {
  display: none;
}
:host(qb-media-picture.expanded) div[part=media] img.preview:not(:only-child) {
  display: none;
}
:host(qb-media-picture.expanded) div[part=media] img.full {
  display: initial !important;
}
:host(qb-media-uploader) {
  max-width: 100%;
  outline: 1px solid purple;
  outline-offset: -1px;
  grid-template-areas: "x";
  grid-area: var(--grid-area);
  display: var(--editable-grid, none);
  max-height: 100%;
}
:host(qb-media-uploader) div {
  background: var(--color-bg-shader);
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  grid-area: x;
  display: grid;
  cursor: move;
  grid-template-rows: 1fr min-content 1fr;
}
:host(qb-media-uploader) div input[type=text] {
  cursor: copy;
  grid-area: url;
  font-size: 0.8em;
  text-align: inherit;
  width: 100%;
  padding: 0.1em;
  justify-self: stretch;
}
:host(qb-media-uploader) div input[type=file] {
  visibility: hidden;
  width: 0;
  height: 0;
  position: absolute;
  display: none;
}
:host(qb-media-uploader) div button {
  font-size: 0.8em;
  grid-area: icon;
  align-self: end;
  padding: 0;
  aspect-ratio: 1;
}
:host(qb-media-uploader) div label {
  display: contents;
}
:host(qb-media-uploader) div label .i-icon {
  cursor: copy;
  grid-area: upload;
  align-self: start;
  font-size: var(--raster-3p);
}
:host(qb-media-uploader) div[data-subindex="1"] {
  justify-items: start;
  clip-path: polygon(0 0, 69.5% 0, 29.5% 100%, 0 100%);
  grid-template-columns: min-content 1fr 55%;
  grid-template-areas: "upload . ." ". url ." "icon . .";
}
:host(qb-media-uploader) div[data-subindex="2"] {
  text-align: right;
  justify-items: end;
  grid-template-columns: 55% 1fr min-content;
  grid-template-areas: ". . upload" ". url ." ". . icon";
}
:host(qb-media-control) {
  user-select: none;
  background: var(--color-bg);
  display: grid;
  grid-template-columns: var(--raster) 1fr;
  grid-template-rows: min-content var(--raster) min-content min-content;
  grid-template-areas: ". start" "control current" ". end" ". mark";
  align-items: stretch;
  --thumb-width: var(--raster-3p);
  position: relative;
}
:host(qb-media-control) > button {
  border-width: 1px;
  border-style: solid none solid solid;
  border-color: var(--color-border);
  grid-area: control;
  padding: 0;
  background: transparent;
  line-height: 0;
  font-size: 1.5em;
}
:host(qb-media-control) > button.playing i-play, :host(qb-media-control) > button:not(.playing) i-pause {
  display: none;
}
:host(qb-media-control) > button:focus-visible {
  outline: none;
}
:host(qb-media-control) > button:focus-visible:before {
  background-color: var(--color-selection-bg);
}
:host(qb-media-control):before {
  content: "";
  grid-area: start;
}
:host(qb-media-control) #durationTime {
  grid-area: duration;
}
:host(qb-media-control) > div {
  display: grid;
  z-index: 2;
  font-family: var(--monospace);
  font-style: var(--monospace);
  white-space: nowrap;
  pointer-events: none;
  font-size: 0.8rem;
  line-height: 1em;
}
:host(qb-media-control) > div:empty {
  display: none;
}
:host(qb-media-control) > div#startTime, :host(qb-media-control) > div#endTime, :host(qb-media-control) > div#markTime {
  gap: calc(var(--thumb-width) * 1.5);
  justify-items: end;
}
:host(qb-media-control) > div#startTime.right, :host(qb-media-control) > div#endTime.right, :host(qb-media-control) > div#markTime.right {
  justify-items: start;
}
:host(qb-media-control) > div#startTime.right:before, :host(qb-media-control) > div#endTime.right:before, :host(qb-media-control) > div#markTime.right:before {
  content: "";
}
:host(qb-media-control) > div#currentTime {
  padding: 0 var(--raster-6p);
  justify-content: right;
  display: flex;
  align-items: end;
  grid-area: current;
  color: var(--color-fg);
  z-index: 10;
}
:host(qb-media-control) > div#startTime {
  grid-area: start;
  display: var(--media-control-start-time, grid);
}
:host(qb-media-control) > div#endTime {
  grid-area: end;
  display: var(--media-control-end-time, grid);
  grid-template-columns: calc(99.5% - var(--thumb-width)) 1fr;
}
:host(qb-media-control) > div#markTime {
  grid-area: mark;
}
:host(qb-media-control) details summary {
  list-style-type: none;
  aspect-ratio: 1;
  width: var(--raster);
  cursor: pointer;
  line-height: var(--raster);
}
:host(qb-media-control) > input[type=range][part=volume] {
  margin: 0;
  position: absolute;
  grid-area: start;
  transform: translateY(-100%);
  width: var(--raster-2t);
  justify-self: end;
  --thumb-clip-path: polygon(9px 0%, 9px 100%, 8px 100%, 4px 80%, 0 80%, 0 20%, 4px 20%, 8px 0);
  --thumb-width: 9px;
  --thumb-height: var(--raster-3p);
  --thumb-border-style: none solid;
  --thumb-border-width: 0 4px 0 3px;
  --thumb-border-color: var(--color-fg);
  --track-border-color: var(--color-border);
  --track-color: var(--color-bg);
  --track-border-style: solid;
  --track-border-width: 1px;
  --track-height: var(--raster-6p);
  --_track-shadow-lighten-color: transparent;
}
:host(qb-media-control) > input[type=range][part=volume].mute {
  --thumb-border-color: var(--color-warning);
}
:host(qb-media-control) > input[type=range][part=volume]:focus-visible {
  --thumb-border-color: var(--color-label-bg) !important;
}
:host(qb-media-control) > input[type=range]:not([part=volume]) {
  margin: 0;
  grid-column: 2;
  --thumb-height: calc(var(--raster-3p) - 2px);
  --thumb-border-width: 0;
  --track-border-width: 0;
  --track-border-color: transparent;
  --track-border-style: none;
}
:host(qb-media-control) > input[type=range]:not([part=volume]):focus-visible {
  --thumb-color: var(--color-label-bg) !important;
}
:host(qb-media-control) > input[type=range]:not([part=volume])[name=current] {
  border-color: var(--color-border);
  border-style: solid solid solid none;
  border-width: 1px;
  grid-area: current;
  --track-color: var(--color-bg);
  --track-focus-color: var(--track-color);
  --track-padding: 1px;
  --thumb-color: var(--color-fg);
  --track-height: var(--raster-2p);
  --thumb-height: var(--raster-2p);
  --thumb-clip-path: polygon(5px 0, 7px 0, 7px 100%, 5px 100%);
  z-index: 3;
}
:host(qb-media-control) > input[type=range]:not([part=volume])[name=start], :host(qb-media-control) > input[type=range]:not([part=volume])[name=end] {
  z-index: 2;
  --track-color: transparent;
}
:host(qb-media-control) > input[type=range]:not([part=volume])[name=start] {
  grid-area: start;
  pointer-events: var(--editable-auto, none);
  display: var(--media-control-start-time);
  --thumb-color: var(--color-correct);
  --thumb-clip-path: polygon(10% 15%, 90% 15%, 50% 90%);
}
:host(qb-media-control) > input[type=range]:not([part=volume])[name=mark] {
  grid-area: mark;
  --thumb-color: var(--color-orange);
  --thumb-clip-path: polygon(90% 90%, 10% 90%, 50% 10%);
}
:host(qb-media-control) > input[type=range]:not([part=volume])[name=end] {
  grid-area: end;
  pointer-events: var(--editable-auto, none);
  display: var(--media-control-end-time);
  --thumb-color: var(--color-wrong);
  --thumb-clip-path: polygon(90% 90%, 10% 90%, 50% 10%);
}
:host(qb-media-control[data-playback=ended]) [name=play],
:host(qb-media-control[data-playback=paused]) [name=play] {
  display: block;
}
:host(qb-media-control[data-playback=started]) [name=pause] {
  display: block;
}
:host(qb-media-control:not([data-playback])) [name=play] {
  display: block;
}
:host(qb-media-container) {
  position: relative;
}
:host(qb-media-container) [part=tools] {
  grid-area: tools;
  max-height: var(--raster-2p);
  display: flex;
  justify-content: start;
  align-self: end;
  background-color: var(--color-black10);
}
:host(qb-media-container) [part=tools] > * {
  background-color: var(--color-bg);
  height: var(--raster-2p);
  padding: 0;
}
:host(qb-media-container) [part=tools] button, :host(qb-media-container) [part=tools] summary {
  width: var(--raster-2p);
  text-align: center;
  border: 1px solid;
  aspect-ratio: 1;
}
:host(qb-media-container) [part=tools] [part=close-expanded]:before {
  content: var(--icon-close);
}
:host(qb-media-container) [part=tools] [part=switch-subindex]:before {
  content: "1-2";
}
:host(qb-media-container) [part=tools] input[type=range] {
  display: var(--editable-auto, none);
  flex: 1 1;
  background: var(--color-bg);
  pointer-events: auto;
  background-color: var(--color-bg-shader);
  margin: 0;
  --track-border-width: 1px;
  --track-color: transparent;
  --track-height: var(--raster-2p);
  --track-width: auto;
  --thumb-width: var(--raster-6p);
  --thumb-height: var(--track-height);
}
:host(qb-media-container) [part=raster] {
  display: none;
}
:host(qb-media-container.expanded) [part=tools] {
  z-index: 10000;
  transform: none;
  width: var(--raster);
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-self: stretch;
  max-height: 100%;
}
:host(qb-media-container.expanded) [part=tools] button {
  height: var(--raster);
  width: auto;
}
:host(qb-media-container.expanded) [part=tools] input[type=range] {
  display: block;
  --track-width: var(--raster);
  --track-height: auto;
  --thumb-width: var(--track-width);
  --thumb-height: var(--track-width);
  --_thumb-color: url(/images/loupe.svg) no-repeat center;
  writing-mode: vertical-lr;
  direction: rtl;
}
:host(qb-media-container.edit-open) [part=raster] {
  display: contents;
}
:host(qb-media-container.auditive) [part=tools] {
  display: none !important;
}
:host(qb-media-container.visual) [part=tools]:has([part=raster-edit][open]) ~ [part=raster] > qb-media-uploader {
  z-index: 5000;
}
:host(qb-media-container.visual) [part=raster-edit] {
  margin-left: auto;
  display: var(--editable-auto, none) !important;
  order: 1;
  position: relative;
  cursor: pointer;
  user-select: none;
}
:host(qb-media-container.visual) [part=raster-edit] summary::marker {
  content: none;
}
:host(qb-media-container.visual) [part=raster-edit] summary:before {
  line-height: 0;
  max-height: 100%;
  content: var(--icon-edit);
}
:host(qb-media-container.visual) [part=raster-edit] div[part=raster-table] {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  transform: translateY(calc(-100% + 1px));
  z-index: 5000;
  background-color: var(--color-bg);
  font: 0.6em var(--monospace, monospace);
  grid-template-rows: repeat(4, var(--raster-2p));
  grid-template-columns: repeat(4, var(--raster-2p));
  place-items: stretch;
  border-style: solid solid none none;
  border-width: 1px;
}
:host(qb-media-container.visual) [part=raster-edit] div[part=raster-table] button {
  border-style: none none solid solid;
}
:host(qb-media-container.visual) [part=raster-edit] div[part=raster-table] button:disabled {
  opacity: 0.5;
}
:host(qb-media-container.visual) [part=raster-edit] div[part=raster-table] span {
  display: grid;
  place-content: center;
  border-color: var(--color-active-fg);
  border-style: none none solid solid;
  border-width: 1px;
}
:host(qb-media-container.visual) [part=raster-edit] div[part=raster-table] span:not([part]) {
  background-color: var(--color-black20);
  cursor: not-allowed;
}
:host(qb-media-container.visual) [part=raster-edit] div[part=raster-table] span[part]:hover {
  color: var(--color-active-fg);
  background-color: var(--color-active-bg);
}
:host(qb-confetti) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 10000;
}
:host(qb-confetti) canvas {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
:host(qb-confetti) div {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  font-size: var(--font-size-confetti, 2em);
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 80vw;
}
:host(qb-confetti) div > * {
  background-color: var(--color-bg-shader);
  color: var(--color-fg);
  padding: 1em;
}
:host(md-quiz) button[disabled],
:host(md-round) button[disabled],
:host(md-show) button[disabled],
:host(md-group) button[disabled] {
  opacity: 0.5;
}
:host(md-quiz) button,
:host(md-round) button,
:host(md-show) button,
:host(md-group) button {
  justify-self: start;
}
:host(md-quiz) div,
:host(md-round) div,
:host(md-show) div,
:host(md-group) div {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: block;
}
:host(md-quiz) div:empty:before,
:host(md-round) div:empty:before,
:host(md-show) div:empty:before,
:host(md-group) div:empty:before {
  color: var(--color-fg-shader);
}
:host(md-quiz) details:has(> div:empty) > summary::marker,
:host(md-round) details:has(> div:empty) > summary::marker,
:host(md-show) details:has(> div:empty) > summary::marker,
:host(md-group) details:has(> div:empty) > summary::marker {
  visibility: hidden;
}
:host(md-quiz) summary,
:host(md-round) summary,
:host(md-show) summary,
:host(md-group) summary {
  cursor: pointer;
}
:host(md-quiz) summary::marker,
:host(md-round) summary::marker,
:host(md-show) summary::marker,
:host(md-group) summary::marker {
  content: "✅ ";
}
:host(md-quiz) details:has(md-exception.bug) > summary::marker, :host(md-quiz) details:has(.bug) > summary::marker,
:host(md-round) details:has(md-exception.bug) > summary::marker,
:host(md-round) details:has(.bug) > summary::marker,
:host(md-show) details:has(md-exception.bug) > summary::marker,
:host(md-show) details:has(.bug) > summary::marker,
:host(md-group) details:has(md-exception.bug) > summary::marker,
:host(md-group) details:has(.bug) > summary::marker {
  content: "🪳 ";
}
:host(md-quiz) details:has(md-exception.error) > summary::marker, :host(md-quiz) details:has(.error) > summary::marker,
:host(md-round) details:has(md-exception.error) > summary::marker,
:host(md-round) details:has(.error) > summary::marker,
:host(md-show) details:has(md-exception.error) > summary::marker,
:host(md-show) details:has(.error) > summary::marker,
:host(md-group) details:has(md-exception.error) > summary::marker,
:host(md-group) details:has(.error) > summary::marker {
  content: "🚫 ";
}
:host(md-quiz) details:has(md-exception.ignored) > summary::marker, :host(md-quiz) details:has(.ignored) > summary::marker,
:host(md-round) details:has(md-exception.ignored) > summary::marker,
:host(md-round) details:has(.ignored) > summary::marker,
:host(md-show) details:has(md-exception.ignored) > summary::marker,
:host(md-show) details:has(.ignored) > summary::marker,
:host(md-group) details:has(md-exception.ignored) > summary::marker,
:host(md-group) details:has(.ignored) > summary::marker {
  content: "⚠️ ";
}
:host(md-quiz) md-exception.bug,
:host(md-round) md-exception.bug,
:host(md-show) md-exception.bug,
:host(md-group) md-exception.bug {
  color: var(--color-error-fg);
  background: var(--color-error-bg);
}
:host(md-quiz) md-exception.bug:before,
:host(md-round) md-exception.bug:before,
:host(md-show) md-exception.bug:before,
:host(md-group) md-exception.bug:before {
  content: "🪳 Bug: ";
}
:host(md-quiz) md-exception.error,
:host(md-round) md-exception.error,
:host(md-show) md-exception.error,
:host(md-group) md-exception.error {
  color: var(--color-error-fg);
  background: var(--color-error-bg);
}
:host(md-quiz) md-exception.error:before,
:host(md-round) md-exception.error:before,
:host(md-show) md-exception.error:before,
:host(md-group) md-exception.error:before {
  content: "🚫 Error: ";
}
:host(md-quiz) md-exception.ignored,
:host(md-round) md-exception.ignored,
:host(md-show) md-exception.ignored,
:host(md-group) md-exception.ignored {
  color: var(--color-alert-fg);
  background: var(--color-alert-bg);
}
:host(md-quiz) md-exception.ignored:before,
:host(md-round) md-exception.ignored:before,
:host(md-show) md-exception.ignored:before,
:host(md-group) md-exception.ignored:before {
  content: "⚠️ Ignored: ";
}
:host(md-quiz) md-id,
:host(md-round) md-id,
:host(md-show) md-id,
:host(md-group) md-id {
  width: 8ch;
  padding: 0;
  overflow: hidden;
  cursor: copy;
  display: inline-block;
  white-space: nowrap;
  --color-input-border: var(--color-label-bg) !important;
  color: var(--color-label-bg);
  background: var(--color-label-fg);
}
:host(md-quiz) md-id:hover,
:host(md-round) md-id:hover,
:host(md-show) md-id:hover,
:host(md-group) md-id:hover {
  width: auto;
}
:host(md-quiz) {
  display: grid;
  gap: var(--raster-2p);
}
:host(md-quiz) details > div:empty:before,
:host(md-show) details > div:empty:before,
:host(md-round) details > div:empty:before {
  content: "Comments not visible in the show";
}
:host(md-quiz) header,
:host(md-show) header,
:host(md-round) header {
  display: inline;
  font: var(--font-h3);
}
:host(md-show),
:host(md-round) {
  margin-top: var(--raster);
}
:host(md-group) {
  font-family: var(--monospace);
}
:host(md-group) div:empty:before {
  content: "Group settings";
}
:host(md-group:first-of-type) div:empty:before {
  content: "Round settings";
}
:host(qb-auth) {
  grid-template-columns: [s l_ c_] min-content [_c] min-content [_l f_] 1fr [_f e];
  grid-auto-rows: min-content;
  column-gap: var(--raster-2p);
  --color-choice-bg: var(--color-fg);
  position: relative;
}
:host(qb-auth) select {
  width: 100%;
}
:host(qb-auth) > div.container, :host(qb-auth) form, :host(qb-auth) fieldset {
  display: contents;
}
:host(qb-auth) > div.container header {
  transform: translateY(var(--neg-raster));
  margin: 0 var(--neg-raster);
  padding: 0 var(--raster);
  background-color: var(--color-primary);
  color: var(--color-primary-fg);
  grid-column: s/e;
}
:host(qb-auth) > div.container form:first-of-type header {
  grid-row: 1;
}
:host(qb-auth) > div.container form:not(:first-of-type) header {
  margin-top: var(--raster-2t);
}
:host(qb-auth) > div.container fieldset {
  display: contents;
}
:host(qb-auth) > div.container qb-profile-chooser,
:host(qb-auth) > div.container legend, :host(qb-auth) > div.container nav, :host(qb-auth) > div.container a {
  grid-column: s/e;
}
:host(qb-auth) > div.container label {
  white-space: nowrap;
  grid-column: l_/_l;
}
:host(qb-auth) > div.container label:has(input) {
  display: contents;
}
:host(qb-auth) > div.container p {
  grid-column: s/e;
  margin: var(--raster-2p) 0;
}
:host(qb-auth) > div.container div {
  grid-column: s/e;
}
:host(qb-auth) > div.container div.separator {
  margin: var(--raster) auto;
}
:host(qb-auth) > div.container input {
  align-self: start;
}
:host(qb-auth) > div.container input[type=radio], :host(qb-auth) > div.container input[type=checkbox] {
  grid-column: c_/_c;
  place-self: center;
  width: var(--raster-2p);
  aspect-ratio: 1;
}
:host(qb-auth) > div.container input:not([type=radio], [type=checkbox]) {
  grid-column: s/e;
  justify-self: stretch;
}
:host(qb-auth) > div.container [itemprop] {
  white-space: nowrap;
}
:host(qb-auth) > div.container nav {
  margin-top: var(--raster);
  display: flex;
  gap: var(--raster-2p) var(--raster-2p);
}
:host(qb-auth) > div.container nav label {
  display: flex;
  gap: 0.5em;
}
:host(qb-auth) > div.container nav:not(.links) {
  flex-direction: row-reverse;
  justify-content: space-between;
}
:host(qb-auth) > div.container nav.links {
  flex-direction: column;
  justify-content: space-between;
}
:host(qb-auth) > div.container ul {
  padding-left: 3ch;
  margin: 0;
}
:host(qb-auth) > div.container div[class=error_explanation] ul {
  list-style-type: "⚠️ ";
}