@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-code) {
  border-radius: var(--border-radius);
  outline-offset: 1px;
  display: inline-grid;
  grid-auto-columns: min-content;
  grid-auto-flow: column;
  gap: var(--raster-6p);
  align-items: stretch;
}
:host(qb-code) input {
  font-size: 1.5em;
  text-align: center;
  padding: 0 0.25ch;
}
:host(qb-overlay:not([open])) {
  display: none;
}
:host(qb-overlay) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-items: center;
  background: rgba(0, 0, 0, 0.7);
  z-index: 100000;
}
:host(qb-overlay) > div {
  border-radius: 0.3em;
  overflow: hidden;
  grid-area: 1/1/1/1;
  position: relative;
  min-width: 50vw;
  background-color: white;
  display: grid;
  grid-template-columns: 2em 1fr;
  grid-template-rows: 2em 1fr min-content;
  margin: 5vh 10vw;
  max-height: 90vh;
  align-items: stretch;
}
:host(qb-overlay) > div > button#close {
  grid-area: 1/1;
  border: var(--border);
  display: grid;
  place-items: center;
  background: var(--color-black40);
  padding: 0;
}
:host(qb-overlay) > div > button#close:before {
  content: "×️";
  border-bottom-right-radius: 0.3em;
  color: var(--color-white);
}
:host(qb-overlay) > div > header {
  border: var(--border);
  background: var(--color-black20);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  grid-area: 1/2;
  padding: 0 0.5em 0 0.25em;
  display: grid;
  align-items: center;
}
:host(qb-overlay) > div > header > * {
  font-size: var(--font-size-overlay, 1.2em);
}
:host(qb-overlay) > div > div {
  margin: 0.5em 1em 0.5em 0.25em;
  padding: 0.5em 1em;
  grid-area: 2/1/2/-1;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-color: transparent transparent;
}
:host(qb-overlay) > div > div::-webkit-scrollbar {
  display: none;
}
:host(qb-overlay) > div > nav {
  margin: 0.5em 0.5em;
  grid-area: 3/1/3/-1;
  display: flex;
  justify-content: space-evenly;
  white-space: nowrap;
}
:host(qb-overlay) > div > nav:empty {
  display: none;
}
:host(qb-rating) {
  display: inline-grid;
  grid-template-rows: 1em;
  grid-template-columns: min-content;
  line-height: 1em;
  user-select: none;
  white-space: nowrap;
  gap: var(--gap-2);
}
:host(qb-rating):not([readonly]), :host(qb-rating):not([readonly]) > * {
  cursor: pointer;
}
:host(qb-rating) > slot {
  grid-area: 1/1/1/1;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: stretch;
}
:host(qb-rating) > slot > * {
  display: none;
}
:host(qb-rating) > div {
  grid-area: 1/1/1/1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1.2ch;
  gap: 1px;
  place-items: center;
}
:host(qb-rating) > div > * {
  display: grid;
  place-items: center;
  filter: grayscale(1);
  opacity: 0.75;
}
:host(qb-rating) > div > *:before {
  grid-area: 1/1/1/1;
  content: attr(data-symbol);
}
:host(qb-rating) qb-rating-pos {
  color: gold;
}
:host(qb-rating) qb-rating-neg {
  color: var(--color-red);
}
:host(qb-rating) qb-rating-neg ~ qb-rating-pos {
  color: var(--color-green);
}
:host(qb-rating) > div > :not([selected]) {
  clip-path: none !important;
}
:host(qb-rating) > div > [selected],
:host(qb-rating) qb-rating-neg[selected] ~ qb-rating-neg,
:host(qb-rating) qb-rating-pos[selected] ~ qb-rating-pos {
  filter: grayscale(0);
  opacity: 1;
}
:host(qb-rating[disabled]) {
  pointer-events: none;
}
:host(qb-rating[disabled]) qb-rating-zero {
  visibility: hidden;
}
:host(qb-tags) {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--gap-2);
  max-width: 100%;
  font-size: var(--font-size-qb-tags, 0.7em);
}
:host(qb-tags) :focus-visible {
  background: purple;
  outline-offset: 0;
}
:host(qb-tags) > input {
  padding: 0 0.2ch;
  order: 1;
  min-width: 5ch;
  width: 5ch;
  max-width: 20ch;
  border: none;
  background-color: var(--color-blue30);
  color: var(--color-black100);
  border-radius: 0.3em;
  line-height: 1.2em;
  font-size: inherit !important;
  height: 1.3em;
}
:host(qb-tags[readonly]) input {
  display: none !important;
}
:host(qb-text) fieldset {
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: 1fr min-content min-content;
  grid-template-areas: "content remove";
  align-items: start;
  gap: var(--gap-3);
  z-index: 0;
  position: relative;
}
:host(qb-text) fieldset:not(:focus-within) button,
:host(qb-text) fieldset:not(:focus-within) input:not(.value) {
  display: none;
}
:host(qb-text) button {
  border: 0;
  background: transparent;
  font-size: inherit;
  padding: 0;
}
:host(qb-text) button[name=remove] {
  grid-area: remove;
}
:host(qb-text) fieldset > div {
  align-self: stretch;
  grid-area: content;
}
:host(qb-text) fieldset > div:focus-visible {
  border-top-left-radius: 0;
}
:host(qb-text) fieldset > div:focus-visible[data-characters]:after {
  font-size: 0.8em;
  padding-left: 1em;
  white-space: nowrap;
  content: "(" attr(data-characters) ")";
}
:host(qb-text) fieldset > div:not(:focus-visible) {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
:host(qb-text) fieldset > div:not(:focus-visible):empty ~ input, :host(qb-text) fieldset > div:not(:focus-visible):empty ~ button, :host(qb-text) fieldset > div:not(:focus-visible):empty ~ ul,
:host(qb-text) fieldset > div:not(:focus-visible) ~ span {
  display: none;
}
:host(qb-text) ul {
  font-size: 0.9em;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  position: relative;
  z-index: 100;
  grid-area: content;
  justify-self: left;
  box-shadow: 0 0 0.5em black;
  border: none;
  white-space: nowrap;
  --_translate-x: calc(var(--outline-width) + var(--outline-offset));
  --_translate-y: calc(100% + var(--outline-width) + var(--outline-offset));
  transform: translate(var(--_translate-x), var(--_translate-y));
  align-self: end;
  margin: 0;
  padding: 0;
  list-style-type: "📋";
}
:host(qb-text) ul:empty {
  display: none !important;
}
:host(qb-text) ul li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
:host(qb-text[readonly]) div[contenteditable]:empty, :host(qb-text[readonly]) div[contenteditable]:empty ~ * {
  display: none;
}
:host(qb-text:not([readonly])) div[contenteditable]:empty:not(:focus):before {
  opacity: 0.5;
  content: attr(placeholder);
}
:host(qb-text-note) fieldset {
  grid-template-columns: min-content 1fr min-content min-content;
  grid-template-areas: "date content remove";
  position: relative;
}
:host(qb-text-note) fieldset button[name=adddate] {
  grid-area: date;
  display: none;
}
:host(qb-text-note) fieldset input {
  justify-self: start;
  display: block;
  border: none;
  background: none;
  grid-area: date;
  place-self: start right;
}
:host(qb-text-note) fieldset input::-webkit-datetime-edit {
  margin-right: -1em;
}
:host(qb-text-note) fieldset input[readonly]::-webkit-datetime-edit {
  margin-right: -2.5em;
}
:host(qb-textinput) label {
  display: grid;
}
:host(qb-textinput) textarea {
  font: inherit;
  resize: none;
  overflow-y: hidden;
}
:host(qb-textinput) span[title]:before {
  display: block;
  margin-left: 0.5em;
}
:host(qb-textinput) span[data-max]:not([data-remaining]):after {
  content: "(" attr(data-max) " characters)";
}
:host(qb-textinput) span[data-length]:not([data-max]):after {
  content: "(" attr(data-length) " characters)";
}
:host(qb-textinput) span[data-remaining]:after {
  content: "(" attr(data-remaining) " characters)";
}
:host(qb-textinput) span[data-remaining^="-"] + textarea {
  color: red;
}
:host(qb-time) {
  display: inline-block;
  grid-auto-columns: max-content;
  grid-auto-flow: column dense;
  align-items: center;
  position: relative;
}
:host(qb-time) slot {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-items: stretch;
}
:host(qb-time) > span i {
  font-style: normal;
}
:host(qb-time) > span b {
  font-weight: normal;
}
:host(qb-time) SPAN:not([data-value]) i:empty:before {
  content: "-";
}
:host(qb-time) span[data-value=""] + span {
  display: none;
}
:host(qb-timeout) div {
  display: inline-grid;
  grid-template-columns: min-content min-content;
  gap: 0.25em;
}
:host(.qb-message) {
  margin-bottom: 0.5em;
  white-space: normal;
  pointer-events: all;
  align-self: end;
  background: var(--message-bg, var(--color-bg, white));
  color: var(--message-fg, var(--color-fg, white));
  border: 1px solid var(--message-bg, var(--color-blue80));
  display: grid;
  align-items: start;
  grid-template-columns: [from_] minmax(1em, max-content) [_from message_] 1fr [_message button_];
  grid-template-areas: "from message button";
  grid-auto-columns: min-content;
  gap: 0 0.25em;
}
:host(.qb-message) > span:not(.reply), :host(.qb-message) > qb-player:not(.reply), :host(.qb-message) > qb-mc:not(.reply) {
  margin: 2px 0 2px 2px;
  grid-column: from_/_from;
  grid-row: 1;
}
:host(.qb-message) > .reply {
  font-style: italic;
  align-self: center;
  background-color: var(--color-bg-l);
  user-select: none;
  grid-column: message_/_message;
  grid-row: 1;
  padding-right: 0.5ch;
}
:host(.qb-message) > .reply:before {
  content: "";
  padding-left: 0.5ch;
}
:host(.qb-message) > span:before {
  content: var(--message-icon, var(--icon-alert));
}
:host(.qb-message) > * {
  line-height: 1.2em;
}
:host(.qb-message) slot {
  align-self: stretch;
  grid-column: message_/_message;
  display: -webkit-box;
  -webkit-line-clamp: var(--line-clamp);
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 0.25em 0;
  user-select: text;
}
:host(.qb-message) > nav {
  margin: 1px 1px 0 0;
  display: var(--message-option, block);
  grid-area: button;
}
:host(.qb-message) > nav details {
  grid-area: button;
  position: relative;
  padding-right: 0.4em;
}
:host(.qb-message) > nav details[open] {
  background: var(--color-blue20);
}
:host(.qb-message) > nav details > * {
  padding: 2px;
}
:host(.qb-message) > nav details summary::-webkit-details-marker, :host(.qb-message) > nav details summary::marker {
  font-size: 1.2em;
  grid-area: button;
  content: var(--icon-menu);
}
:host(.qb-message) > nav details div {
  padding-right: 4px;
  padding-left: 4px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  transform: translateX(-100%);
  display: flex;
  flex-direction: row-reverse;
  gap: var(--gap-3);
  background: var(--color-blue20);
}
:host(.qb-message) button {
  display: grid;
  place-items: center;
  border: none;
  appearance: none;
  background: transparent;
  padding: 0;
}
:host(.qb-message) button:before {
  font-size: 0.75em;
  line-height: 1em;
}
:host(.qb-message) button.delete:before {
  display: var(--message-editable, none);
  content: var(--icon-remove);
}
:host(.qb-message) button.reply:before {
  content: var(--icon-reply);
}
:host(.qb-message) button.edit:before {
  display: var(--message-editable, none);
  content: var(--icon-edit);
}
:host(qb-message-notice.qb-message) {
  --message-icon: var(--icon-info);
  --message-bg: var(--color-message-notice-bg);
}
:host(qb-message-alert.qb-message) {
  --message-icon: var(--icon-warn);
  --message-bg: var(--color-message-alert-bg);
}
:host(qb-message-exception.qb-message) {
  --message-icon: var(--icon-exception);
  --message-bg: var(--color-message-exception-bg);
}
:host(qb-message-error.qb-message) {
  --message-icon: var(--icon-error);
  --message-bg: var(--color-message-error-bg);
}
:host(qb-message-progress[data-status=queued]) progress {
  display: none;
}
:host(qb-message-progress[data-status=finished]) progress,
:host(qb-message-progress[data-status=exists]) progress {
  display: none;
}
:host(qb-message-progress[data-status=finished]) header:before,
:host(qb-message-progress[data-status=exists]) header:before {
  content: var(--icon-check) " ";
}
:host(qb-message-progress.qb-message) {
  padding-left: 0.5em;
  grid-template-columns: [message_] 1fr [_message button_];
  grid-template-areas: "message button";
  --message-editable: block;
}
:host(qb-message-progress.qb-message) header[data-after]:after {
  content: attr(data-after);
}
:host(qb-message-progress.qb-message) img, :host(qb-message-progress.qb-message) video {
  max-height: var(--raster-2t);
  max-width: 100%;
}
:host(qb-message-progress.qb-message) audio {
  max-width: 100%;
  max-height: var(--raster-2p);
}
:host(qb-message-progress.qb-message) progress, :host(qb-message-progress.qb-message) details {
  grid-column: 1;
  width: 100%;
  justify-self: stretch;
}
:host(qb-chat) {
  grid-template-rows: var(--template-rows);
}
:host(qb-chat) > [part=button] {
  user-select: none;
  pointer-events: all;
  border-width: 1px;
  border-style: var(--_nav-border-top-style, none) var(--_nav-border-right-style, none) var(--_nav-border-bottom-style, none) var(--_nav-border-left-style, none);
  display: grid;
  place-items: stretch;
  grid-auto-flow: column;
}
:host(qb-chat) > [part=scroll] {
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-color: transparent transparent;
  pointer-events: none;
  position: relative;
}
:host(qb-chat) > [part=scroll]::-webkit-scrollbar {
  display: none;
}
:host(qb-chat) > [part=scroll] > slot {
  display: flex;
  flex-direction: column;
  align-items: start;
  min-height: 100%;
}
@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 animating-alert2 {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}
:host(qb-chat.new-message) button.open {
  animation: 2s animating-alert alternate linear infinite;
}
:host(qb-chat.new-message) button.open:before {
  animation: 1s animating-alert2 alternate linear infinite;
}
:host(qb-chat) {
  --_footer-height: minmax(var(--footer-height), max-content);
  pointer-events: none;
}
:host(qb-chat) > [part=scroll] {
  width: var(--message-width);
  align-self: stretch;
  grid-row: var(--chat-row-start, header_)/_main;
}
:host(qb-chat) > [part=scroll] > slot {
  display: grid !important;
  width: var(--message-width);
  --max-message-width: var(--aside-expandable-width);
  align-items: end;
  justify-items: start;
  grid-auto-rows: min-content;
  align-content: end;
}
:host(qb-chat) > [part=button] {
  --_nav-border-top-style: solid;
  grid-row: footer_/_footer;
  align-self: end;
  --article-width: calc(var(--message-width) - 1.5em - 3rem);
  background-color: var(--color-bg);
  color: var(--color-fg);
}
:host(qb-chat) > [part=button]:not(.open) {
  width: 3rem;
  grid-template-rows: 3rem;
  grid-template-columns: 3rem;
  grid-template-areas: "summary";
}
:host(qb-chat) > [part=button]:not(.open) > :not(button.open) {
  display: none;
}
:host(qb-chat) > [part=button].open {
  width: var(--message-width);
  max-width: var(--message-width);
  grid-template-rows: max-content minmax(3rem, max-content);
  grid-template-columns: 1.5em var(--article-width) 3rem;
  grid-template-areas: "picker picker picker" "button article summary";
}
:host(qb-chat) > [part=button] button.open {
  width: 3rem;
  aspect-ratio: 1;
  grid-area: summary;
}
:host(qb-chat) > [part=button] button.open:before {
  display: block;
  content: var(--icon-chat, "💬");
}
:host(qb-chat) > [part=button] button.emojitoggle {
  grid-area: button;
  padding: 0;
  background: transparent;
}
:host(qb-chat) > [part=button] > emoji-picker {
  max-height: 20em;
  grid-area: picker;
  --num-columns: 12;
}
:host(qb-chat) > [part=button] > emoji-picker:not(.open) {
  display: none;
}
@media screen and (max-width: 320px) {
  :host(qb-chat) > [part=button] > emoji-picker {
    --num-columns: 6;
    --category-emoji-size: 1.125rem;
  }
}
:host(qb-chat) > [part=button] > button {
  place-self: center;
  border: none !important;
  border-radius: 0 !important;
}
:host(qb-select) {
  position: relative;
}
:host(qb-select) details {
  line-height: 1.5em;
  position: relative;
}
:host(qb-select) details summary {
  user-select: none;
  cursor: context-menu;
  border: var(--input-border);
  list-style-type: none;
  text-align: center;
  white-space: nowrap;
  padding: 0 0.5em;
}
:host(qb-select) details > slot {
  position: absolute;
  z-index: 1000;
  bottom: 0;
  left: 0;
  transform: translateY(100%);
  background: var(--color-bg);
  border: var(--input-border);
  padding: 0.5em 0.25em;
}
:host(qb-select) ::slotted(input) {
  width: 1em;
}
:host(qb-select) ::slotted([type=checkbox]), :host(qb-select) ::slotted(.checkbox) {
  text-align: center;
}
:host(qb-select) ::slotted([type=radio]), :host(qb-select) ::slotted(.radio) {
  grid-column: radio;
  text-align: center;
  --input-border-radius: 2em;
  position: relative;
  z-index: 1001;
}
:host(qb-select) ::slotted([disabled]) {
  opacity: 0.3;
}
:host(qb-select) ::slotted(div) {
  grid-column: unit/_end;
}
:host(qb-decimal) {
  display: inline-grid;
  grid-template-colums: [input_ int] 1fr [frac] min-content [unit] min-content [scale] min-content [_input];
  font-family: var(--monospace, monospace);
}
:host(qb-decimal) > * {
  grid-row: 1;
}
:host(qb-decimal) slot {
  display: var(--editable-auto, none);
  grid-column: input_/_input;
  z-index: 1;
}
:host(qb-decimal) span:not(:first-child) {
  padding-left: 0.5ch;
}
:host(qb-decimal) [part=int] {
  grid-column: int;
  display: flex;
}
:host(qb-decimal) [part=int]:before {
  content: attr(sign);
}
:host(qb-decimal) [part=int]:empty:after {
  content: "0";
}
:host(qb-decimal) [part=frac] {
  grid-column: frac;
  display: flex;
}
:host(qb-decimal) [part=frac]:not(:empty):before {
  content: ".";
}
:host(qb-decimal) [part=frac] span:first-child {
  padding-left: 0;
}
:host(qb-decimal) [part=frac] span.periodic:after {
  content: "…";
}
:host(qb-decimal) [part=frac] span.periodic ~ span {
  display: none;
}
:host(qb-decimal) [part=frac] span:nth-of-type(n+30) {
  display: none;
}
:host(qb-decimal) [part=scale],
:host(qb-decimal) [part=unit] {
  padding-left: 1ch;
}
:host(qb-decimal) [part=scale]:empty,
:host(qb-decimal) [part=unit]:empty {
  display: none;
}
:host(qb-decimal) [part=unit] {
  grid-column: unit;
}
:host(qb-decimal) [part=scale] {
  grid-column: scale;
}
:host(qb-decimal) [part=scale]:before {
  content: "(E^";
}
:host(qb-decimal) [part=scale]:after {
  content: ")";
}
:root {
  --thumb-radius: 0;
  --track-radius: 0;
  --thumb-shadow-size: 0;
  --track-shadow-size: 0;
  --thumb-border-width: 1px;
  --thumb-border-color: black;
  --thumb-color: lightgray;
  --thumb-width: 1em;
  --thumb-height: 1em;
}
input[type=range] {
  outline: none;
  --_track-color: var(--track-color, #eceff1);
  --_thumb-color: var(--thumb-color, #607d8b);
  --_thumb-radius: var(--thumb-radius, 12px);
  --_thumb-height: var(--thumb-height, 24px);
  --_thumb-width: var(--thumb-width, 24px);
  --_thumb-shadow-size: var(--thumb-shadow-size, 4px);
  --_thumb-shadow-blur: var(--thumb-shadow-blur, 4px);
  --_thumb-shadow-color: var(--thumb-shadow-color, rgba(0, 0, 0, 0.2));
  --_thumb-shadow-lighten-color: var(--thumb-shadow-lighten-color, rgba(13, 13, 13, 0.2));
  --_thumb-border-style: var(--thumb-border-style, solid);
  --_thumb-border-width: var(--thumb-border-width, 2px);
  --_thumb-border-color: var(--thumb-border-color, #eceff1);
  --_thumb-margin: var(--thumb-margin, calc((var(--_track-border-width) * -2 + var(--_track-height)) / 2 - var(--_thumb-height) / 2));
  --_track-height: var(--track-height, 8px);
  --_track-shadow-size: var(--track-shadow-size, 1px);
  --_track-shadow-blur: var(--track-shadow-blur, 1px);
  --_track-shadow-color: var(--track-shadow-color, rgba(0, 0, 0, 0.2));
  --_track-shadow-lighten-color: var(--track-shadow-lighten-color, rgba(13, 13, 13, 0.2));
  --_track-border-style: var(--track-border-style, solid);
  --_track-padding: var(--track-padding);
  --_track-border-width: var(--track-border-width, 2px);
  --_track-border-color: var(--track-border-color, #cfd8dc);
  --_track-focus-color: var(--track-focus-color, transparent);
  --_track-lighten-color: var(--track-lighten-color, #fbfbfc);
  --_track-radius: var(--track-radius, 5px);
  --_track-width: calc(var(--track-width, 100%) - 2 * var(--_track-border-width));
  -webkit-appearance: none;
  background: transparent;
  margin: calc(var(--_thumb-height) / 2) 0;
  width: var(--_track-width);
}
input[type=range]::-moz-focus-outer {
  border: 0;
}
input[type=range]:focus {
  outline: 0;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: var(--_track-focus-color);
}
input[type=range]::-webkit-slider-runnable-track {
  cursor: default;
  height: var(--_track-height);
  transition: all 0.2s ease;
  width: var(--_track-width);
  box-shadow: var(--_track-shadow-size) var(--_track-shadow-size) var(--_track-shadow-blur) var(--_track-shadow-color), 0 0 var(--_track-shadow-size) var(--_track-shadow-lighten-color);
  background: var(--_track-color);
  border-color: var(--_track-border-color);
  border-width: var(--_track-border-width);
  border-style: var(--_track-border-style);
  border-radius: var(--_track-radius);
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: var(--_thumb-shadow-size) var(--_thumb-shadow-size) var(--_thumb-shadow-blur) var(--_thumb-shadow-color), 0 0 var(--_thumb-shadow-size) var(--_thumb-shadow-lighten-color);
  background: var(--_thumb-color);
  border-style: var(--_thumb-border-style);
  border-width: var(--_thumb-border-width);
  border-color: var(--_thumb-border-color);
  border-radius: var(--_thumb-radius);
  box-sizing: border-box;
  cursor: default;
  height: var(--_thumb-height);
  width: var(--_thumb-width);
  clip-path: var(--thumb-clip-path);
  transform: var(--thumb-transform);
  -webkit-appearance: none;
  margin-top: var(--_thumb-margin);
}
input[type=range]::slider-thumb {
  box-shadow: var(--_thumb-shadow-size) var(--_thumb-shadow-size) var(--_thumb-shadow-blur) var(--_thumb-shadow-color), 0 0 var(--_thumb-shadow-size) var(--_thumb-shadow-lighten-color);
  background: var(--_thumb-color);
  border-style: var(--_thumb-border-style);
  border-width: var(--_thumb-border-width);
  border-color: var(--_thumb-border-color);
  border-radius: var(--_thumb-radius);
  box-sizing: border-box;
  cursor: default;
  height: var(--_thumb-height);
  width: var(--_thumb-width);
  clip-path: var(--thumb-clip-path);
  transform: var(--thumb-transform);
  appearance: none;
  margin-top: var(--_thumb-margin);
}
input[type=range]::-moz-range-track {
  box-shadow: var(--_track-shadow-size) var(--_track-shadow-size) var(--_track-shadow-blur) var(--_track-shadow-color), 0 0 var(--_track-shadow-size) var(--_track-shadow-color);
  cursor: default;
  height: var(--_track-height);
  transition: all 0.2s ease;
  width: var(--_track-width);
  background: var(--_track-color);
  border-style: var(--_track-border-style);
  padding: var(--_track-padding);
  border-width: var(--_track-border-width);
  border-color: var(--_track-border-color);
  border-radius: var(--_track-radius);
  height: var(--_track-height);
}
input[type=range]::-moz-range-thumb {
  box-shadow: var(--_thumb-shadow-size) var(--_thumb-shadow-size) var(--_thumb-shadow-blur) var(--_thumb-shadow-color), 0 0 var(--_thumb-shadow-size) var(--_thumb-shadow-lighten-color);
  background: var(--_thumb-color);
  border-style: var(--_thumb-border-style);
  border-width: var(--_thumb-border-width);
  border-color: var(--_thumb-border-color);
  border-radius: var(--_thumb-radius);
  box-sizing: border-box;
  cursor: default;
  height: var(--_thumb-height);
  width: var(--_thumb-width);
  clip-path: var(--thumb-clip-path);
  transform: var(--thumb-transform);
}
input[type=range]::slider-track {
  box-shadow: var(--_track-shadow-size) var(--_track-shadow-size) var(--_track-shadow-blur) var(--_track-shadow-color), 0 0 var(--_track-shadow-size) var(--_track-shadow-color);
  cursor: default;
  height: var(--_track-height);
  transition: all 0.2s ease;
  width: var(--_track-width);
  background: var(--_track-color);
  border-style: var(--_track-border-style);
  padding: var(--_track-padding);
  border-width: var(--_track-border-width);
  border-color: var(--_track-border-color);
  border-radius: var(--_track-radius);
  height: calc(var(--_track-height) / 2);
}
input[type=range]::slider-fill {
  display: block !important;
  float: none !important;
  position: static !important;
  writing-mode: unset !important;
  direction: unset !important;
  width: 0.2em;
  height: 0.2em;
  user-select: none !important;
}
input[type=range]:disabled::-webkit-slider-thumb, input[type=range]:disabled::-moz-range-thumb, input[type=range]:disabled::-webkit-slider-runnable-track {
  cursor: not-allowed;
}