@charset "UTF-8";
* {
  box-sizing: border-box;
}
main > section {
  margin-bottom: 4em;
}
main > section:not(:first-of-type) {
  margin-top: 4em;
}
h1 {
  font: var(--font-h1);
  line-height: var(--line-height-h1);
}
h2 {
  font: var(--font-h2);
  line-height: var(--line-height-h2);
}
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
  margin-top: 0;
}
p, ul, ol {
  font: inherit;
}
a[href]:not(.button) {
  color: inherit;
  text-decoration-color: var(--color-outline);
}
a[href]:not(.button):hover {
  color: var(--color-outline);
  text-decoration-color: var(--color-outline);
}
a[href]:not(.button):focus-within {
  outline: none;
  background-color: inherit;
}
button, input[type=submit], input[type=reset] {
  appearance: none;
}
button, .button, input:not([type=range], [type=checkbox], [type=radio]), 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);
}
button:focus-visible, .button:focus-visible, 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);
  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, .button, input[type=submit], input[type=reset] {
  background-color: var(--button-background);
  padding-inline: 0.25em;
  padding-block: 0.25em;
  user-select: none;
  align-content: center;
  text-align: center;
}
button:hover, .button:hover, input[type=submit]:hover, input[type=reset]:hover {
  --color-input-border: var(--color-input-focus-border)!important;
  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;
}
fieldset legend {
  font-size: 1.2em;
}
summary::-webkit-details-marker {
  display: none;
}
:host(qb-slot),
:host(qb-player),
:host(qb-mc) {
  --_slot-icon-size: var(--slot-icon-size, 1.5rem);
  --_slot-font-size: var(--slot-font-size, 1rem);
  --_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-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-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);
  outline: var(--_slot-avatar-outline) solid;
  outline-offset: calc(-1 * var(--_slot-avatar-outline));
  place-self: stretch;
  text-align: center;
  width: var(--_slot-icon-size);
  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-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-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-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-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-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-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-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);
  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) .qb-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 .qb-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-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;
}
:host(qb-auth) {
  grid-template-columns: [s] minmax(var(--raster), 1fr) [c_] minmax(auto, 600px) [_c] minmax(var(--raster), 1fr) [e];
  grid-template-rows: [s] var(--raster) [c_] 1fr [_c] var(--raster) [e];
  --color-choice-bg: var(--color-fg);
  position: relative;
}
:host(qb-auth) select {
  width: 100%;
}
:host(qb-auth) > div.shade {
  grid-row: s/e;
  grid-column: s/e;
  display: var(--qb-auth-shade, none);
  background: var(--color-bg-shader);
  z-index: 3;
}
:host(qb-auth) > div.container {
  display: grid;
  grid-row: c_/_c;
  grid-column: c_/_c;
  background: var(--color-bg);
  color: var(--color-fg);
  justify-items: stretch;
  z-index: 5;
  grid-template-columns: [left_] min-content [_left right_] 1fr [_right];
  grid-auto-rows: min-content;
  row-gap: var(--raster-2p);
  column-gap: var(--raster-4p);
}
:host(qb-auth) > div.container > form {
  display: contents;
}
:host(qb-auth) > div.container fieldset {
  display: contents;
}
:host(qb-auth) > div.container fieldset input, :host(qb-auth) > div.container fieldset div {
  font: inherit !important;
}
:host(qb-auth) > div.container fieldset input {
  align-self: start;
}
:host(qb-auth) > div.container fieldset input:not([type=radio], [type=checkbox]) {
  justify-self: stretch;
}
:host(qb-auth) > div.container fieldset [itemprop] {
  white-space: nowrap;
}
:host(qb-auth) > div.container fieldset div:not(.field_with_errors) {
  text-align: left;
  grid-column: left_/_right;
  margin: 0;
}
:host(qb-auth) > div.container fieldset .span-columns {
  grid-column: left_/_right;
  display: flex;
  gap: var(--gap-3);
}
:host(qb-auth) > div.container fieldset legend, :host(qb-auth) > div.container fieldset nav {
  grid-column: left_/_right;
}
:host(qb-auth) > div.container fieldset nav {
  display: flex;
  gap: var(--raster-2p) var(--raster-2p);
}
:host(qb-auth) > div.container fieldset nav label {
  display: flex;
  gap: 0.5em;
}
:host(qb-auth) > div.container fieldset nav:not(.links) {
  flex-direction: row-reverse;
  justify-content: space-between;
}
:host(qb-auth) > div.container fieldset nav.links {
  flex-direction: column;
  justify-content: space-between;
}
:host(qb-auth) > div.container fieldset > a {
  grid-column: left_/_right;
  font-size: 0.8em !important;
}
:host(qb-auth) > div.container fieldset ul {
  padding-left: 3ch;
  margin: 0;
}
:host(qb-auth) > div.container fieldset div[class=error_explanation] ul {
  list-style-type: "⚠️ ";
}