@charset "UTF-8";
/* line 1, app/assets/stylesheets/lab/reset.scss */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* line 7, app/assets/stylesheets/lab/reset.scss */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* line 20, app/assets/stylesheets/lab/reset.scss */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* line 29, app/assets/stylesheets/lab/reset.scss */
input,
button,
textarea,
select {
  font: inherit;
}

/* line 36, app/assets/stylesheets/lab/reset.scss */
#root,
#__next {
  isolation: isolate;
}

/* line 41, app/assets/stylesheets/lab/reset.scss */
body,
html {
  color-scheme: light;
  background-color: #F4F2F1;
  color: #1E1E1E;
  scroll-behavior: auto;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 10px;
  height: 100dvh;
  scroll-padding: var(--container-gutter);
  scroll-padding-top: calc(var(--container-sticky-top-height, 0px) + var(--container-gutter));
  scroll-padding-bottom: calc( var(--sticky-footer-nav-height, 1.6rem) + 11.2rem);
  text-wrap: pretty;
}

/* line 67, app/assets/stylesheets/lab/reset.scss */
:focus-visible {
  border-radius: var(--control-border-radius, 0.4rem);
  outline-offset: 0.4rem;
}

/* line 71, app/assets/stylesheets/lab/reset.scss */
:focus-visible:not(:disabled):not([disabled]) {
  outline: 0.2rem solid var(--link-color);
}

/* line 76, app/assets/stylesheets/lab/reset.scss */
dialog:focus-visible {
  outline-offset: 0;
}

/* line 80, app/assets/stylesheets/lab/reset.scss */
html,
body {
  scrollbar-width: thin;
  scrollbar-color: rgba(68, 68, 68, 0.2) transparent;
}

/* line 86, app/assets/stylesheets/lab/reset.scss */
::-webkit-scrollbar {
  width: 0.6rem;
}

/* line 90, app/assets/stylesheets/lab/reset.scss */
::-webkit-scrollbar-track {
  background: transparent;
}

/* line 94, app/assets/stylesheets/lab/reset.scss */
::-webkit-scrollbar-thumb {
  background: rgba(68, 68, 68, 0.2);
  border-radius: 0.6rem;
}

/* line 99, app/assets/stylesheets/lab/reset.scss */
:root {
  --page-gutter: 1.2rem;
  --container-gutter: var(--page-gutter);
  --container-gutter-vertical: var(--page-gutter);
  --container-gutter-horizontal: var(--page-gutter);
  --container-page-gutter: 0px;
  --avoid-support-bottom: var(--sticky-footer-nav-height, 0px);
  --contained-adornment-size: 2.4rem;
  --sticky-top-root: 0px;
  --sticky-masthead-height: 0px;
  --sticky-footer-nav-height: 0px;
  --container-sticky-top-height: calc(max(var(--sticky-masthead-height), var(--sticky-top-root)));
  --container-sticky-bottom-height: var(--sticky-footer-nav-height);
  --safe-area-inset-top: 0px;
  --safe-area-inset-bottom: 0px;
  --safe-area-inset-left: 0px;
  --safe-area-inset-right: 0px;
}

@media (min-width: 768px) and (min-height: 580px) {
  /* line 99, app/assets/stylesheets/lab/reset.scss */
  :root {
    --page-gutter: 2.4rem;
  }
}

@supports (top: constant(safe-area-inset-top)) {
  /* line 99, app/assets/stylesheets/lab/reset.scss */
  :root {
    --safe-area-inset-top: constant(safe-area-inset-top);
    --safe-area-inset-bottom: constant(safe-area-inset-bottom);
    --safe-area-inset-left: constant(safe-area-inset-left);
    --safe-area-inset-right: constant(safe-area-inset-right);
  }
}

@supports (top: env(safe-area-inset-top)) {
  /* line 99, app/assets/stylesheets/lab/reset.scss */
  :root {
    --safe-area-inset-top: env(safe-area-inset-top);
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
    --safe-area-inset-left: env(safe-area-inset-left);
    --safe-area-inset-right: env(safe-area-inset-right);
  }
}

/* line 4, app/assets/stylesheets/lab/typography.scss */
.vivid-lab {
  font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  font-style: normal;
  font-size: 1.6rem;
  font-optical-sizing: auto;
  line-height: 2.4rem;
  --link-color: #184BCD;
}

/* line 13, app/assets/stylesheets/lab/typography.scss */
.vivid-lab hr {
  margin: 1.6rem 0;
  border: none;
  height: 0.1rem;
  background-color: var(--surface-trim-color);
}

/* line 20, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .hr--divider {
  margin: 0;
}

/* line 24, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .hr--compact {
  margin: 0.8rem 0;
}

/* line 28, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .hr--loose {
  margin: 3.2rem 0;
}

/* line 32, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .hr--choked {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
}

/* line 38, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .hr--weight-heavy {
  height: 0.4rem;
  border-radius: 0.4rem;
}

/* line 43, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .hr--bleed {
  margin-left: calc(var(--container-gutter) * -1);
  margin-right: calc(var(--container-gutter) * -1);
  border-radius: 0;
}

/* line 51, app/assets/stylesheets/lab/typography.scss */
.vivid-lab a {
  color: var(--link-color);
  -webkit-touch-callout: none;
  transition: outline 0.125s ease-in-out;
  outline: 0.2rem solid transparent;
  outline-offset: 0.4rem;
  border-radius: var(--control-border-radius, 0.4rem);
}

/* line 60, app/assets/stylesheets/lab/typography.scss */
.vivid-lab a[disabled] {
  pointer-events: none;
}

/* line 64, app/assets/stylesheets/lab/typography.scss */
.vivid-lab a[name] {
  scroll-margin-bottom: 22.4rem;
}

/* line 69, app/assets/stylesheets/lab/typography.scss */
.vivid-lab q {
  quotes: "“" "”" "‘" "’";
}

/* line 73, app/assets/stylesheets/lab/typography.scss */
.vivid-lab b,
.vivid-lab strong {
  font-weight: 600;
}

/* line 78, app/assets/stylesheets/lab/typography.scss */
.vivid-lab time,
.vivid-lab .time--short {
  white-space: nowrap;
}

/* line 83, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .anchor--plain {
  color: inherit;
}

/* line 87, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .anchor--emphasized {
  text-decoration: underline;
}

/* line 91, app/assets/stylesheets/lab/typography.scss */
.vivid-lab a.anchor--deemphasized {
  color: inherit;
  text-decoration: underline;
}

/* line 96, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .anchor--adorned,
.vivid-lab .anchor--composite {
  display: block;
  flex: 1;
  border-radius: var(--control-border-radius, 0.4rem);
  outline-offset: 0.2rem;
}

/* line 104, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .anchor--adorned, .vivid-lab .anchor--adorned:hover,
.vivid-lab .anchor--composite,
.vivid-lab .anchor--composite:hover {
  text-decoration: none;
}

/* line 110, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .anchor--composite {
  color: inherit;
}

/* line 114, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .anchor-trimmed {
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
  flex-wrap: wrap;
  width: auto;
  text-decoration: none;
  font-weight: 300;
}

/* line 124, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--wrap-none .anchor-trimmed {
  flex-wrap: nowrap;
}

/* line 128, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .anchor-trimmed__path,
.vivid-lab .anchor-trimmed__host {
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 135, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .anchor-trimmed__host {
  font-weight: 600;
  flex: 0 0 min-content;
}

/* line 140, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .anchor-trimmed__path {
  flex: 0 5 max-content;
  opacity: 0.92;
  text-decoration: none;
  min-width: 0.5ch;
}

/* line 146, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .anchor-trimmed__path:last-of-type {
  flex-shrink: 1;
}

/* line 151, app/assets/stylesheets/lab/typography.scss */
.vivid-lab h1,
.vivid-lab .h1,
.vivid-lab h2,
.vivid-lab .h2,
.vivid-lab h3,
.vivid-lab .h3,
.vivid-lab h4,
.vivid-lab .h4,
.vivid-lab h5,
.vivid-lab .h5,
.vivid-lab h6,
.vivid-lab .h6 {
  font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-style: normal;
  line-height: 1.3333333333;
  text-rendering: optimizeLegibility;
  text-wrap: balance;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  margin: 0;
}

/* line 173, app/assets/stylesheets/lab/typography.scss */
.vivid-lab h1:not(:last-child),
.vivid-lab .h1:not(:last-child),
.vivid-lab h2:not(:last-child),
.vivid-lab .h2:not(:last-child),
.vivid-lab h3:not(:last-child),
.vivid-lab .h3:not(:last-child),
.vivid-lab h4:not(:last-child),
.vivid-lab .h4:not(:last-child),
.vivid-lab h5:not(:last-child),
.vivid-lab .h5:not(:last-child),
.vivid-lab h6:not(:last-child),
.vivid-lab .h6:not(:last-child) {
  margin-bottom: 0.8rem;
}

/* line 177, app/assets/stylesheets/lab/typography.scss */
.vivid-lab h1.header--label.header--label,
.vivid-lab .h1.header--label.header--label,
.vivid-lab h2.header--label.header--label,
.vivid-lab .h2.header--label.header--label,
.vivid-lab h3.header--label.header--label,
.vivid-lab .h3.header--label.header--label,
.vivid-lab h4.header--label.header--label,
.vivid-lab .h4.header--label.header--label,
.vivid-lab h5.header--label.header--label,
.vivid-lab .h5.header--label.header--label,
.vivid-lab h6.header--label.header--label,
.vivid-lab .h6.header--label.header--label {
  margin-bottom: 0;
  text-wrap: pretty;
}

/* line 182, app/assets/stylesheets/lab/typography.scss */
.vivid-lab h1 strong,
.vivid-lab .h1 strong,
.vivid-lab h2 strong,
.vivid-lab .h2 strong,
.vivid-lab h3 strong,
.vivid-lab .h3 strong,
.vivid-lab h4 strong,
.vivid-lab .h4 strong,
.vivid-lab h5 strong,
.vivid-lab .h5 strong,
.vivid-lab h6 strong,
.vivid-lab .h6 strong {
  font-weight: 900;
}

/* line 186, app/assets/stylesheets/lab/typography.scss */
.vivid-lab h1 small,
.vivid-lab .h1 small,
.vivid-lab h2 small,
.vivid-lab .h2 small,
.vivid-lab h3 small,
.vivid-lab .h3 small,
.vivid-lab h4 small,
.vivid-lab .h4 small,
.vivid-lab h5 small,
.vivid-lab .h5 small,
.vivid-lab h6 small,
.vivid-lab .h6 small {
  color: var(--surface-deemphasized-color);
  font-size: 0.58em;
  line-height: 1.3333333333;
}

/* line 192, app/assets/stylesheets/lab/typography.scss */
.vivid-lab h1 small .text--deemphasized,
.vivid-lab .h1 small .text--deemphasized,
.vivid-lab h2 small .text--deemphasized,
.vivid-lab .h2 small .text--deemphasized,
.vivid-lab h3 small .text--deemphasized,
.vivid-lab .h3 small .text--deemphasized,
.vivid-lab h4 small .text--deemphasized,
.vivid-lab .h4 small .text--deemphasized,
.vivid-lab h5 small .text--deemphasized,
.vivid-lab .h5 small .text--deemphasized,
.vivid-lab h6 small .text--deemphasized,
.vivid-lab .h6 small .text--deemphasized {
  opacity: unset;
}

/* line 197, app/assets/stylesheets/lab/typography.scss */
.vivid-lab h1.skeleton,
.vivid-lab .h1.skeleton,
.vivid-lab h2.skeleton,
.vivid-lab .h2.skeleton,
.vivid-lab h3.skeleton,
.vivid-lab .h3.skeleton,
.vivid-lab h4.skeleton,
.vivid-lab .h4.skeleton,
.vivid-lab h5.skeleton,
.vivid-lab .h5.skeleton,
.vivid-lab h6.skeleton,
.vivid-lab .h6.skeleton {
  min-height: 1lh;
  width: 18ch;
}

/* line 201, app/assets/stylesheets/lab/typography.scss */
.vivid-lab h1.skeleton:after,
.vivid-lab .h1.skeleton:after,
.vivid-lab h2.skeleton:after,
.vivid-lab .h2.skeleton:after,
.vivid-lab h3.skeleton:after,
.vivid-lab .h3.skeleton:after,
.vivid-lab h4.skeleton:after,
.vivid-lab .h4.skeleton:after,
.vivid-lab h5.skeleton:after,
.vivid-lab .h5.skeleton:after,
.vivid-lab h6.skeleton:after,
.vivid-lab .h6.skeleton:after {
  min-width: 12ch;
  min-height: 1em;
  top: calc((1lh - 1em) / 2);
}

/* line 209, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .subheading {
  margin-top: -0.6rem;
}

/* line 213, app/assets/stylesheets/lab/typography.scss */
.vivid-lab h1,
.vivid-lab .h1 {
  --contained-adornment-size: 2.4rem;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 3.2rem;
}

/* line 221, app/assets/stylesheets/lab/typography.scss */
.vivid-lab h1.header--display,
.vivid-lab .h1.header--display {
  font-size: 3.2rem;
  line-height: 1.3333333333;
}

/* line 227, app/assets/stylesheets/lab/typography.scss */
.vivid-lab h2,
.vivid-lab .h2 {
  --contained-adornment-size: 2.4rem;
  font-size: 2rem;
  font-weight: 600;
  line-height: 2.8rem;
}

/* line 235, app/assets/stylesheets/lab/typography.scss */
.vivid-lab h2 small,
.vivid-lab .h2 small {
  font-weight: 600;
}

/* line 240, app/assets/stylesheets/lab/typography.scss */
.vivid-lab h3,
.vivid-lab .h3 {
  --contained-adornment-size: 2rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2.4rem;
}

/* line 248, app/assets/stylesheets/lab/typography.scss */
.vivid-lab h3 small,
.vivid-lab .h3 small {
  font-size: 0.7em;
  font-weight: 600;
}

/* line 254, app/assets/stylesheets/lab/typography.scss */
.vivid-lab h4,
.vivid-lab .h4 {
  --contained-adornment-size: 2rem;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 2rem;
}

/* line 262, app/assets/stylesheets/lab/typography.scss */
.vivid-lab h4 small,
.vivid-lab .h4 small {
  font-size: 0.8em;
  font-weight: 500;
}

/* line 268, app/assets/stylesheets/lab/typography.scss */
.vivid-lab h5,
.vivid-lab .h5 {
  --contained-adornment-size: 1.6rem;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.6rem;
}

/* line 276, app/assets/stylesheets/lab/typography.scss */
.vivid-lab h5 small,
.vivid-lab .h5 small {
  font-size: 0.875em;
}

/* line 281, app/assets/stylesheets/lab/typography.scss */
.vivid-lab h6,
.vivid-lab .h6 {
  --contained-adornment-size: 1.6rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6rem;
}

/* line 289, app/assets/stylesheets/lab/typography.scss */
.vivid-lab h6 small,
.vivid-lab .h6 small {
  font-size: 1em;
}

/* line 296, app/assets/stylesheets/lab/typography.scss */
.vivid-lab p > small,
.vivid-lab div > small {
  font-size: 0.8em;
  font-weight: 400;
  line-height: 1;
  color: var(--surface-deemphasized-color);
}

/* line 307, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .subheading,
.vivid-lab .header--subheading,
.vivid-lab .header--light-weight,
.vivid-lab .circle-progress__text {
  font-weight: 400;
}

/* line 312, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .header--heavy-weight {
  font-weight: 900;
}

/* line 316, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .callout {
  font-size: 2rem;
  line-height: 3.2rem;
  text-wrap: pretty;
}

/* line 322, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .callout--size-large {
  font-size: 2.4rem;
  line-height: 3.2rem;
  font-weight: 400;
}

/* line 328, app/assets/stylesheets/lab/typography.scss */
.vivid-lab p,
.vivid-lab ul,
.vivid-lab ol {
  --contained-adornment-size: 1lh;
  margin: 0;
  overflow-wrap: break-word;
}

/* line 336, app/assets/stylesheets/lab/typography.scss */
.vivid-lab p:not(:last-child),
.vivid-lab ul:not(:last-child),
.vivid-lab ol:not(:last-child) {
  margin-bottom: 1.2rem;
}

/* line 340, app/assets/stylesheets/lab/typography.scss */
.vivid-lab p + h1,
.vivid-lab p + h2,
.vivid-lab p + h3,
.vivid-lab ul + h1,
.vivid-lab ul + h2,
.vivid-lab ul + h3,
.vivid-lab ol + h1,
.vivid-lab ol + h2,
.vivid-lab ol + h3 {
  margin-top: 2.4rem;
}

/* line 347, app/assets/stylesheets/lab/typography.scss */
.vivid-lab mark.skeleton,
.vivid-lab p.skeleton {
  display: block;
  background: transparent;
  min-height: 1lh;
}

/* line 353, app/assets/stylesheets/lab/typography.scss */
.vivid-lab mark.skeleton:after,
.vivid-lab p.skeleton:after {
  top: calc((1lh - 1em) / 4);
  bottom: calc((1lh - 1em) / 4);
}

/* line 358, app/assets/stylesheets/lab/typography.scss */
.vivid-lab mark.skeleton.skeleton--paragraph,
.vivid-lab p.skeleton.skeleton--paragraph {
  min-height: 3lh;
}

/* line 364, app/assets/stylesheets/lab/typography.scss */
.vivid-lab span.skeleton:not(.surface):not(.subsurface) {
  display: table;
}

/* line 367, app/assets/stylesheets/lab/typography.scss */
.vivid-lab span.skeleton:not(.surface):not(.subsurface):after {
  top: calc((1lh - 1em) / 4);
  bottom: calc((1lh - 1em) / 4);
}

/* line 374, app/assets/stylesheets/lab/typography.scss */
.vivid-lab mark.skeleton {
  max-width: 20ch;
}

/* line 378, app/assets/stylesheets/lab/typography.scss */
.vivid-lab ol.list-discrete,
.vivid-lab ol.list-cozy {
  padding: 0 0 0 1.5em;
  margin-left: 0;
}

/* line 383, app/assets/stylesheets/lab/typography.scss */
.vivid-lab ol.list-discrete > li + li,
.vivid-lab ol.list-cozy > li + li {
  margin-top: 0.6rem;
}

/* line 389, app/assets/stylesheets/lab/typography.scss */
.vivid-lab ol.list-cozy > li + li {
  margin-top: 0.3rem;
}

/* line 394, app/assets/stylesheets/lab/typography.scss */
.vivid-lab ul.list-unstyled {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* line 400, app/assets/stylesheets/lab/typography.scss */
.vivid-lab ul.list-checked,
.vivid-lab ul.list-discrete,
.vivid-lab ul.list-cozy {
  padding: 0 0 0 2.5em;
  margin-left: 0;
  list-style: none;
}

/* line 407, app/assets/stylesheets/lab/typography.scss */
.vivid-lab ul.list-checked > li,
.vivid-lab ul.list-discrete > li,
.vivid-lab ul.list-cozy > li {
  position: relative;
}

/* line 411, app/assets/stylesheets/lab/typography.scss */
.vivid-lab ul.list-checked > li.list-checked_item--neutral:before,
.vivid-lab ul.list-discrete > li.list-checked_item--neutral:before,
.vivid-lab ul.list-cozy > li.list-checked_item--neutral:before {
  content: none;
}

/* line 416, app/assets/stylesheets/lab/typography.scss */
.vivid-lab ul.list-checked > li:before,
.vivid-lab ul.list-discrete > li:before,
.vivid-lab ul.list-cozy > li:before {
  content: "\25cf";
  content: "\25cf"/ "";
  display: block;
  margin-left: -2em;
  float: left;
  width: 1em;
  text-align: center;
  scale: 1.1;
}

/* line 432, app/assets/stylesheets/lab/typography.scss */
.vivid-lab ul.list-checked > li + li,
.vivid-lab ul.list-discrete > li + li {
  margin-top: 1.2rem;
}

/* line 437, app/assets/stylesheets/lab/typography.scss */
.vivid-lab ul.list-discrete,
.vivid-lab ul.list-cozy {
  padding-left: 2em;
}

/* line 442, app/assets/stylesheets/lab/typography.scss */
.vivid-lab ul.list-discrete > li:before,
.vivid-lab ul.list-cozy > li:before {
  transform: scale(0.7);
}

/* line 449, app/assets/stylesheets/lab/typography.scss */
.vivid-lab ul.list-checked.list-checked--cozy {
  padding-left: 1.5em;
}

/* line 453, app/assets/stylesheets/lab/typography.scss */
.vivid-lab ul.list-checked.list-checked--cozy > li:before {
  margin-left: -1.5em;
}

/* line 458, app/assets/stylesheets/lab/typography.scss */
.vivid-lab ul.list-checked.list-checked--cozy > li + li {
  margin-top: 0.3rem;
}

/* line 464, app/assets/stylesheets/lab/typography.scss */
.vivid-lab ul.list-checked > li:before {
  content: "\2713";
  font-weight: 900;
  scale: 1.3;
}

/* line 470, app/assets/stylesheets/lab/typography.scss */
.vivid-lab ul.list-checked > li.list-checked_item--negative {
  text-decoration: line-through;
}

/* line 473, app/assets/stylesheets/lab/typography.scss */
.vivid-lab ul.list-checked > li.list-checked_item--negative:before {
  opacity: var(--surface-deemphasized-color);
  content: "\2298";
  font-weight: 900;
  scale: 1.3;
  transform: translateY(-0.0825em);
}

/* line 484, app/assets/stylesheets/lab/typography.scss */
.vivid-lab ul.list-checked > li.list-checked_item--negative-but-positive:before {
  opacity: var(--surface-deemphasized-color);
  content: "\2715";
  font-weight: 900;
  scale: 1.3;
}

/* line 494, app/assets/stylesheets/lab/typography.scss */
.vivid-lab ul.list-none,
.vivid-lab ul.list-cozy {
  padding-left: 1.5em;
}

/* line 499, app/assets/stylesheets/lab/typography.scss */
.vivid-lab ul.list-none > li:before,
.vivid-lab ul.list-cozy > li:before {
  margin-left: -1.5em;
}

/* line 504, app/assets/stylesheets/lab/typography.scss */
.vivid-lab ul.list-none > li + li,
.vivid-lab ul.list-cozy > li + li {
  margin-top: 0.3rem;
}

/* line 509, app/assets/stylesheets/lab/typography.scss */
.vivid-lab ul.list-none {
  list-style: none;
  padding-inline-start: 1.6rem;
}

/* line 514, app/assets/stylesheets/lab/typography.scss */
.vivid-lab ol.list-steps {
  list-style: none;
  counter-reset: list-steps;
  text-align: left;
  padding: 0;
}

/* line 520, app/assets/stylesheets/lab/typography.scss */
.vivid-lab ol.list-steps > li::before {
  content: counter(list-steps);
  content: counter(list-steps)/"";
  display: flex;
  border-radius: 10rem;
  border: 0.1rem solid currentcolor;
  margin-right: 1.6rem;
  width: 5.6rem;
  height: 5.6rem;
  font-size: 1.5em;
  font-weight: 900;
  flex: 0 0 5.6rem;
  align-items: center;
  justify-content: center;
}

/* line 536, app/assets/stylesheets/lab/typography.scss */
.vivid-lab ol.list-steps > li {
  counter-increment: list-steps;
  display: flex;
  align-items: center;
}

/* line 541, app/assets/stylesheets/lab/typography.scss */
.vivid-lab ol.list-steps > li.list-step--align-top {
  align-items: flex-start;
}

/* line 547, app/assets/stylesheets/lab/typography.scss */
.vivid-lab ol.list-steps > li + li,
.vivid-lab ol.list-steps + ol.list-steps > li {
  margin-top: 1.2rem;
}

/* line 553, app/assets/stylesheets/lab/typography.scss */
.vivid-lab ol.list-steps--emphasized > li::before {
  color: var(--surface-emphasis-color, #184BCD);
}

/* line 559, app/assets/stylesheets/lab/typography.scss */
.vivid-lab ol.list-steps--bold > li::before {
  color: var(--surface-emphasis-reverse-color, #E0EAFF);
  border-color: var(--surface-emphasis-color, #184BCD);
  background-color: var(--surface-emphasis-color, #184BCD);
}

/* line 567, app/assets/stylesheets/lab/typography.scss */
.vivid-lab ol.list-steps--size-small > li::before {
  width: 4rem;
  height: 4rem;
  font-size: 1.15em;
  font-weight: 700;
  flex: 0 0 4rem;
  margin: 0.1rem 1.28rem 0.1rem 0;
}

/* line 578, app/assets/stylesheets/lab/typography.scss */
.vivid-lab ol.list-steps--size-xsmall > li {
  align-items: flex-start;
  line-height: 1.3333333333;
}

/* line 582, app/assets/stylesheets/lab/typography.scss */
.vivid-lab ol.list-steps--size-xsmall > li + li {
  margin-top: 1.2rem;
}

/* line 587, app/assets/stylesheets/lab/typography.scss */
.vivid-lab ol.list-steps--size-xsmall > li::before {
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1em;
  font-weight: 700;
  flex: 0 0 2.4rem;
  margin: 0 0.5em 0 0;
}

/* line 597, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .blank-state-block {
  color: var(--surface-deemphasized-color);
  margin-bottom: 0;
  font-style: italic;
}

/* line 602, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .blank-state-block a:not(.btn) {
  color: inherit;
  text-decoration: underline;
}

/* line 608, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--tip,
.vivid-lab .text--caption {
  font-size: 1.4rem;
  line-height: 2rem;
  text-rendering: optimizeLegibility;
  text-wrap: initial;
}

/* line 615, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--tip.text--emphasized,
.vivid-lab .text--caption.text--emphasized {
  font-weight: 500;
  opacity: reset;
}

/* line 622, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--tip .icon--sax-tip {
  color: var(--surface-deemphasized-color);
  opacity: 0.7;
}

/* line 628, app/assets/stylesheets/lab/typography.scss */
.vivid-lab small {
  font-size: 0.875em;
  text-rendering: optimizeLegibility;
}

/* line 633, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .help-block,
.vivid-lab .text--help {
  color: var(--surface-deemphasized-color, var(--surface-color));
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2rem;
  text-rendering: optimizeLegibility;
}

/* line 641, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .help-block a,
.vivid-lab .text--help a {
  font-weight: 500;
}

/* line 645, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .help-block a:not(.anchor--surface),
.vivid-lab .text--help a:not(.anchor--surface) {
  color: inherit;
  text-decoration: none;
  border-bottom: 0.1rem dotted;
}

/* line 652, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .help-block {
  margin-top: 0.8rem;
}

/* line 656, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--tip,
.vivid-lab .text--caption,
.vivid-lab .text--help,
.vivid-lab .help-block {
  --contained-adornment-size: 1.6rem;
}

/* line 663, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--disclaimer, .vivid-lab .text--footnote {
  --contained-adornment-size: 1.6rem;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.6rem;
  text-rendering: optimizeLegibility;
}

/* line 671, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--disclaimer a:not(.anchor--surface), .vivid-lab .text--footnote a:not(.anchor--surface) {
  text-decoration: none;
  border-bottom: 0.1rem dotted;
  border-radius: var(--control-border-radius, 0px);
}

/* line 678, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--normal {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.4rem;
  letter-spacing: auto;
  word-break: auto-phrase;
  text-wrap: initial;
}

/* line 687, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--color-plain {
  color: initial;
}

/* line 691, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--status-deemphasized,
.vivid-lab .text--caption,
.vivid-lab .text--deemphasized {
  color: var(--surface-deemphasized-color);
}

/* line 697, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--subdued {
  color: var(--surface-deemphasized-color);
  opacity: 0.7;
}

/* line 702, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--quiet {
  opacity: 0.35;
}

/* line 705, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--quiet .text--quiet {
  opacity: 1;
}

/* line 710, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--whisper {
  opacity: 0.175;
}

/* line 713, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--whisper .text--quiet {
  opacity: 1;
}

/* line 718, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--striked {
  text-decoration: line-through;
}

/* line 722, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--strikethrough {
  text-decoration: line-through;
}

/* line 726, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--light-weight {
  font-weight: 300;
}

/* line 730, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--heavy-weight {
  font-weight: 900;
}

/* line 733, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--heavy-weight b,
.vivid-lab .text--heavy-weight strong {
  font-weight: 900;
}

/* line 739, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--medium-weight {
  font-weight: 500;
}

/* line 742, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--medium-weight b,
.vivid-lab .text--medium-weight strong {
  font-weight: 600;
}

/* line 748, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--strong-weight {
  font-weight: 700;
}

/* line 751, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--strong-weight b,
.vivid-lab .text--strong-weight strong {
  font-weight: 700;
}

/* line 757, app/assets/stylesheets/lab/typography.scss */
.vivid-lab mark,
.vivid-lab .text--status-highlighted {
  background-color: mark;
  background-color: #FFF3D1;
  color: #8E6801;
  border-radius: 0.2rem;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}

/* line 767, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--machine-id {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  letter-spacing: 0.5px;
}

/* line 771, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--machine-id wbr + span {
  opacity: var(--surface-deemphasized-color);
}

/* line 775, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--machine-id span {
  font-size: smaller;
}

/* line 780, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--break-word-allowed {
  word-break: break-word;
}

/* line 785, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--url > span:nth-last-child(-n + 4) {
  font-weight: 700;
}

/* line 790, app/assets/stylesheets/lab/typography.scss */
.vivid-lab pre.text--break-word-allowed {
  white-space: pre-wrap;
}

/* line 794, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--wrap.text--wrap {
  white-space: initial;
}

/* line 798, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--wrap-none {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* line 804, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--clamp-2 {
  max-height: 2lh;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
  text-wrap: pretty;
}

/* line 815, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--clamp-3 {
  max-height: 3lh;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
  text-wrap: pretty;
}

/* line 826, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--eyebrow {
  text-transform: uppercase;
  opacity: var(--surface-deemphasized-color);
  letter-spacing: 0.1em;
  margin-bottom: 0;
  font-weight: 900;
  font-size: 0.875em;
}

/* line 835, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--eyebrow-emphasized {
  text-transform: uppercase;
  margin-bottom: 0;
  font-weight: 700;
  opacity: 1;
}

/* line 842, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--elevation-1 {
  text-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.02);
}

/* line 846, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--elevation-2 {
  text-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.02);
}

/* line 850, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--elevation-4 {
  text-shadow: 0 0.4rem 0.4rem rgba(0, 0, 0, 0.02);
}

/* line 854, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--footnote {
  opacity: var(--surface-deemphasized-color);
  text-rendering: optimizeLegibility;
}

/* line 860, app/assets/stylesheets/lab/typography.scss */
.vivid-lab code,
.vivid-lab pre,
.vivid-lab .text--code,
.vivid-lab .text--formatted {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 0.95em;
}

/* line 867, app/assets/stylesheets/lab/typography.scss */
.vivid-lab code.text--size-small,
.vivid-lab pre.text--size-small,
.vivid-lab .text--code.text--size-small,
.vivid-lab .text--formatted.text--size-small {
  font-size: 0.75em;
}

/* line 872, app/assets/stylesheets/lab/typography.scss */
.vivid-lab code {
  color: #B21919;
  background-color: #FFEBEB;
  padding-left: 0.25em;
  padding-right: 0.25em;
  border-radius: 0.25em;
}

/* line 880, app/assets/stylesheets/lab/typography.scss */
.vivid-lab pre.source {
  font-size: 1.2rem;
  line-height: 1.3333333333;
  border-radius: 0.8rem;
}

/* line 886, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--formatted {
  white-space: pre-wrap;
}

/* line 890, app/assets/stylesheets/lab/typography.scss */
.vivid-lab blockquote {
  padding: 0.8rem 1.6rem;
  border-left: 0.4rem solid var(--surface-trim-color);
  margin: 0;
}

/* line 897, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--align-center {
  text-align: center;
}

/* line 901, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--align-right {
  text-align: right;
}

/* line 905, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--align-left {
  text-align: left;
}

/* line 911, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--size-xxsmall {
  font-size: 1rem;
  line-height: 1.6rem;
  text-rendering: optimizeLegibility;
}

/* line 917, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--size-xsmall,
.vivid-lab .text--size-tiny {
  font-size: 1.2rem;
  line-height: 1.6rem;
  text-rendering: optimizeLegibility;
}

/* line 923, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--size-small {
  font-size: 1.4rem;
  line-height: 2rem;
  text-rendering: optimizeLegibility;
}

/* line 929, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--size-normal {
  font-size: 1.6rem;
  line-height: 2.4rem;
  text-rendering: optimizeSpeed;
}

/* line 935, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--size-large {
  font-size: 2rem;
  line-height: 2.8rem;
  text-rendering: optimizeLegibility;
}

/* line 941, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--size-xlarge {
  font-size: 2.4rem;
  line-height: 3.2rem;
  text-rendering: optimizeLegibility;
}

/* line 947, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--size-xxlarge {
  font-size: 2.8rem;
  line-height: 3.2rem;
  text-rendering: optimizeLegibility;
}

@media (min-width: 480px) {
  /* line 897, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--align-center-xs {
    text-align: center;
  }
  /* line 901, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--align-right-xs {
    text-align: right;
  }
  /* line 905, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--align-left-xs {
    text-align: left;
  }
  /* line 911, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--size-xxsmall-xs {
    font-size: 1rem;
    line-height: 1.6rem;
    text-rendering: optimizeLegibility;
  }
  /* line 917, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--size-xsmall-xs,
.vivid-lab .text--size-tiny-xs {
    font-size: 1.2rem;
    line-height: 1.6rem;
    text-rendering: optimizeLegibility;
  }
  /* line 923, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--size-small-xs {
    font-size: 1.4rem;
    line-height: 2rem;
    text-rendering: optimizeLegibility;
  }
  /* line 929, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--size-normal-xs {
    font-size: 1.6rem;
    line-height: 2.4rem;
    text-rendering: optimizeSpeed;
  }
  /* line 935, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--size-large-xs {
    font-size: 2rem;
    line-height: 2.8rem;
    text-rendering: optimizeLegibility;
  }
  /* line 941, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--size-xlarge-xs {
    font-size: 2.4rem;
    line-height: 3.2rem;
    text-rendering: optimizeLegibility;
  }
  /* line 947, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--size-xxlarge-xs {
    font-size: 2.8rem;
    line-height: 3.2rem;
    text-rendering: optimizeLegibility;
  }
}

@media (min-width: 768px) {
  /* line 897, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--align-center-sm {
    text-align: center;
  }
  /* line 901, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--align-right-sm {
    text-align: right;
  }
  /* line 905, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--align-left-sm {
    text-align: left;
  }
  /* line 911, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--size-xxsmall-sm {
    font-size: 1rem;
    line-height: 1.6rem;
    text-rendering: optimizeLegibility;
  }
  /* line 917, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--size-xsmall-sm,
.vivid-lab .text--size-tiny-sm {
    font-size: 1.2rem;
    line-height: 1.6rem;
    text-rendering: optimizeLegibility;
  }
  /* line 923, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--size-small-sm {
    font-size: 1.4rem;
    line-height: 2rem;
    text-rendering: optimizeLegibility;
  }
  /* line 929, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--size-normal-sm {
    font-size: 1.6rem;
    line-height: 2.4rem;
    text-rendering: optimizeSpeed;
  }
  /* line 935, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--size-large-sm {
    font-size: 2rem;
    line-height: 2.8rem;
    text-rendering: optimizeLegibility;
  }
  /* line 941, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--size-xlarge-sm {
    font-size: 2.4rem;
    line-height: 3.2rem;
    text-rendering: optimizeLegibility;
  }
  /* line 947, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--size-xxlarge-sm {
    font-size: 2.8rem;
    line-height: 3.2rem;
    text-rendering: optimizeLegibility;
  }
}

@media (min-width: 992px) {
  /* line 897, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--align-center-md {
    text-align: center;
  }
  /* line 901, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--align-right-md {
    text-align: right;
  }
  /* line 905, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--align-left-md {
    text-align: left;
  }
  /* line 911, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--size-xxsmall-md {
    font-size: 1rem;
    line-height: 1.6rem;
    text-rendering: optimizeLegibility;
  }
  /* line 917, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--size-xsmall-md,
.vivid-lab .text--size-tiny-md {
    font-size: 1.2rem;
    line-height: 1.6rem;
    text-rendering: optimizeLegibility;
  }
  /* line 923, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--size-small-md {
    font-size: 1.4rem;
    line-height: 2rem;
    text-rendering: optimizeLegibility;
  }
  /* line 929, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--size-normal-md {
    font-size: 1.6rem;
    line-height: 2.4rem;
    text-rendering: optimizeSpeed;
  }
  /* line 935, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--size-large-md {
    font-size: 2rem;
    line-height: 2.8rem;
    text-rendering: optimizeLegibility;
  }
  /* line 941, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--size-xlarge-md {
    font-size: 2.4rem;
    line-height: 3.2rem;
    text-rendering: optimizeLegibility;
  }
  /* line 947, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--size-xxlarge-md {
    font-size: 2.8rem;
    line-height: 3.2rem;
    text-rendering: optimizeLegibility;
  }
}

@media (min-width: 1200px) {
  /* line 897, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--align-center-lg {
    text-align: center;
  }
  /* line 901, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--align-right-lg {
    text-align: right;
  }
  /* line 905, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--align-left-lg {
    text-align: left;
  }
  /* line 911, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--size-xxsmall-lg {
    font-size: 1rem;
    line-height: 1.6rem;
    text-rendering: optimizeLegibility;
  }
  /* line 917, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--size-xsmall-lg,
.vivid-lab .text--size-tiny-lg {
    font-size: 1.2rem;
    line-height: 1.6rem;
    text-rendering: optimizeLegibility;
  }
  /* line 923, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--size-small-lg {
    font-size: 1.4rem;
    line-height: 2rem;
    text-rendering: optimizeLegibility;
  }
  /* line 929, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--size-normal-lg {
    font-size: 1.6rem;
    line-height: 2.4rem;
    text-rendering: optimizeSpeed;
  }
  /* line 935, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--size-large-lg {
    font-size: 2rem;
    line-height: 2.8rem;
    text-rendering: optimizeLegibility;
  }
  /* line 941, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--size-xlarge-lg {
    font-size: 2.4rem;
    line-height: 3.2rem;
    text-rendering: optimizeLegibility;
  }
  /* line 947, app/assets/stylesheets/lab/typography.scss */
  .vivid-lab .text--size-xxlarge-lg {
    font-size: 2.8rem;
    line-height: 3.2rem;
    text-rendering: optimizeLegibility;
  }
}

/* line 973, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--status-pause-rules.text--status-pause-rules,
.vivid-lab .text--status-danger.text--status-danger {
  color: #B21919;
}

/* line 978, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--status-off.text--status-off {
  color: #E12D2D;
}

/* line 982, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--status-on.text--status-on {
  color: #019854;
}

/* line 986, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--status-important.text--status-important {
  color: #018284;
}

/* line 990, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--status-now.text--status-now,
.vivid-lab .text--status-urgent.text--status-urgent {
  color: #B21919;
}

/* line 995, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--status-critical.text--status-critical {
  color: #C8225F;
}

/* line 999, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--status-success.text--status-success {
  color: #016538;
}

/* line 1003, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--status-warning.text--status-warning,
.vivid-lab .text--status-caution.text--status-caution {
  color: #D66600;
}

/* line 1008, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--status-tip.text--status-tip {
  color: #F5CD99;
}

/* line 1012, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--status-bedtime-rules.text--status-bedtime-rules {
  color: #5C35FD;
}

/* line 1016, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--status-free-time-rules.text--status-free-time-rules {
  color: #D66600;
}

/* line 1020, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--status-brand.text--status-brand,
.vivid-lab .text--status-default-rules.text--status-default-rules {
  color: #184BCD;
}

/* line 1025, app/assets/stylesheets/lab/typography.scss */
.vivid-lab .text--status-info.text--status-info,
.vivid-lab .text--status-trusted.text--status-trusted,
.vivid-lab .text--status-school-rules.text--status-school-rules {
  color: #018284;
}

/* line 107, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  min-width: 0;
  max-width: calc(100% + var(--grid-gutter) * 2);
}

/* line 2, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid .grid__cell--natural,
.vivid-lab .grid .grid__cell--minimum {
  flex-basis: auto;
  width: auto;
  max-width: 100%;
}

/* line 8, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid .grid__cell--minimum {
  flex-basis: fit-content;
  flex-grow: 0;
  flex-shrink: 0;
  min-width: 0;
  max-width: 100%;
}

/* line 16, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid .grid__cell--auto {
  flex-basis: fit-content;
  flex-grow: 1;
  flex-shrink: 100;
  min-width: 0;
  max-width: 100%;
}

/* line 24, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid .grid__cell--fill {
  flex-basis: 0;
  flex-shrink: 1;
  flex-grow: 100;
  min-width: 0;
  max-width: 100%;
}

/* line 32, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid .grid__cell--full {
  flex-basis: 100%;
  flex-shrink: 0;
  max-width: 100%;
  min-width: 0;
}

/* line 39, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid .grid__cell--half {
  flex-basis: 50%;
  max-width: 50%;
  min-width: 50%;
}

/* line 45, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid .grid__cell--quarter {
  flex-basis: 25%;
  max-width: 25%;
  min-width: 25%;
}

/* line 51, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid .grid__cell--three_quarters {
  flex-basis: 75%;
  max-width: 75%;
  min-width: 75%;
}

/* line 57, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid .grid__cell--third {
  flex-basis: 33.333333%;
  max-width: 33.333333%;
  min-width: 33.333333%;
}

/* line 63, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid .grid__cell--two_thirds {
  flex-basis: 66.666666%;
  max-width: 66.666666%;
  min-width: 66.666666%;
}

/* line 69, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid .grid__cell--sixth {
  flex-basis: 16.666666%;
  max-width: 16.666666%;
  min-width: 16.666666%;
}

/* line 75, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid .grid__cell--five-sixths {
  flex-basis: 83.333333%;
  max-width: 83.333333%;
  min-width: 83.333333%;
}

/* line 81, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid .grid__cell--fifth {
  flex-basis: 20%;
  max-width: 20%;
  min-width: 20%;
}

/* line 87, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid .grid__cell--two_fifths {
  flex-basis: 40%;
  max-width: 40%;
  min-width: 40%;
}

/* line 93, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid .grid__cell--three_fifths {
  flex-basis: 60%;
  max-width: 60%;
  min-width: 60%;
}

/* line 99, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid .grid__cell--four_fifths {
  flex-basis: 80%;
  max-width: 80%;
  min-width: 80%;
}

@media (min-width: 768px) {
  /* line 2, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--natural-sm,
.vivid-lab .grid .grid__cell--minimum-sm {
    flex-basis: auto;
    width: auto;
    max-width: 100%;
  }
  /* line 8, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--minimum-sm {
    flex-basis: fit-content;
    flex-grow: 0;
    flex-shrink: 0;
    min-width: 0;
    max-width: 100%;
  }
  /* line 16, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--auto-sm {
    flex-basis: fit-content;
    flex-grow: 1;
    flex-shrink: 100;
    min-width: 0;
    max-width: 100%;
  }
  /* line 24, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--fill-sm {
    flex-basis: 0;
    flex-shrink: 1;
    flex-grow: 100;
    min-width: 0;
    max-width: 100%;
  }
  /* line 32, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--full-sm {
    flex-basis: 100%;
    flex-shrink: 0;
    max-width: 100%;
    min-width: 0;
  }
  /* line 39, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--half-sm {
    flex-basis: 50%;
    max-width: 50%;
    min-width: 50%;
  }
  /* line 45, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--quarter-sm {
    flex-basis: 25%;
    max-width: 25%;
    min-width: 25%;
  }
  /* line 51, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--three_quarters-sm {
    flex-basis: 75%;
    max-width: 75%;
    min-width: 75%;
  }
  /* line 57, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--third-sm {
    flex-basis: 33.333333%;
    max-width: 33.333333%;
    min-width: 33.333333%;
  }
  /* line 63, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--two_thirds-sm {
    flex-basis: 66.666666%;
    max-width: 66.666666%;
    min-width: 66.666666%;
  }
  /* line 69, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--sixth-sm {
    flex-basis: 16.666666%;
    max-width: 16.666666%;
    min-width: 16.666666%;
  }
  /* line 75, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--five-sixths-sm {
    flex-basis: 83.333333%;
    max-width: 83.333333%;
    min-width: 83.333333%;
  }
  /* line 81, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--fifth-sm {
    flex-basis: 20%;
    max-width: 20%;
    min-width: 20%;
  }
  /* line 87, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--two_fifths-sm {
    flex-basis: 40%;
    max-width: 40%;
    min-width: 40%;
  }
  /* line 93, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--three_fifths-sm {
    flex-basis: 60%;
    max-width: 60%;
    min-width: 60%;
  }
  /* line 99, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--four_fifths-sm {
    flex-basis: 80%;
    max-width: 80%;
    min-width: 80%;
  }
}

@media (min-width: 992px) {
  /* line 2, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--natural-md,
.vivid-lab .grid .grid__cell--minimum-md {
    flex-basis: auto;
    width: auto;
    max-width: 100%;
  }
  /* line 8, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--minimum-md {
    flex-basis: fit-content;
    flex-grow: 0;
    flex-shrink: 0;
    min-width: 0;
    max-width: 100%;
  }
  /* line 16, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--auto-md {
    flex-basis: fit-content;
    flex-grow: 1;
    flex-shrink: 100;
    min-width: 0;
    max-width: 100%;
  }
  /* line 24, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--fill-md {
    flex-basis: 0;
    flex-shrink: 1;
    flex-grow: 100;
    min-width: 0;
    max-width: 100%;
  }
  /* line 32, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--full-md {
    flex-basis: 100%;
    flex-shrink: 0;
    max-width: 100%;
    min-width: 0;
  }
  /* line 39, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--half-md {
    flex-basis: 50%;
    max-width: 50%;
    min-width: 50%;
  }
  /* line 45, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--quarter-md {
    flex-basis: 25%;
    max-width: 25%;
    min-width: 25%;
  }
  /* line 51, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--three_quarters-md {
    flex-basis: 75%;
    max-width: 75%;
    min-width: 75%;
  }
  /* line 57, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--third-md {
    flex-basis: 33.333333%;
    max-width: 33.333333%;
    min-width: 33.333333%;
  }
  /* line 63, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--two_thirds-md {
    flex-basis: 66.666666%;
    max-width: 66.666666%;
    min-width: 66.666666%;
  }
  /* line 69, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--sixth-md {
    flex-basis: 16.666666%;
    max-width: 16.666666%;
    min-width: 16.666666%;
  }
  /* line 75, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--five-sixths-md {
    flex-basis: 83.333333%;
    max-width: 83.333333%;
    min-width: 83.333333%;
  }
  /* line 81, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--fifth-md {
    flex-basis: 20%;
    max-width: 20%;
    min-width: 20%;
  }
  /* line 87, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--two_fifths-md {
    flex-basis: 40%;
    max-width: 40%;
    min-width: 40%;
  }
  /* line 93, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--three_fifths-md {
    flex-basis: 60%;
    max-width: 60%;
    min-width: 60%;
  }
  /* line 99, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--four_fifths-md {
    flex-basis: 80%;
    max-width: 80%;
    min-width: 80%;
  }
}

@media (min-width: 1200px) {
  /* line 2, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--natural-lg,
.vivid-lab .grid .grid__cell--minimum-lg {
    flex-basis: auto;
    width: auto;
    max-width: 100%;
  }
  /* line 8, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--minimum-lg {
    flex-basis: fit-content;
    flex-grow: 0;
    flex-shrink: 0;
    min-width: 0;
    max-width: 100%;
  }
  /* line 16, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--auto-lg {
    flex-basis: fit-content;
    flex-grow: 1;
    flex-shrink: 100;
    min-width: 0;
    max-width: 100%;
  }
  /* line 24, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--fill-lg {
    flex-basis: 0;
    flex-shrink: 1;
    flex-grow: 100;
    min-width: 0;
    max-width: 100%;
  }
  /* line 32, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--full-lg {
    flex-basis: 100%;
    flex-shrink: 0;
    max-width: 100%;
    min-width: 0;
  }
  /* line 39, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--half-lg {
    flex-basis: 50%;
    max-width: 50%;
    min-width: 50%;
  }
  /* line 45, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--quarter-lg {
    flex-basis: 25%;
    max-width: 25%;
    min-width: 25%;
  }
  /* line 51, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--three_quarters-lg {
    flex-basis: 75%;
    max-width: 75%;
    min-width: 75%;
  }
  /* line 57, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--third-lg {
    flex-basis: 33.333333%;
    max-width: 33.333333%;
    min-width: 33.333333%;
  }
  /* line 63, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--two_thirds-lg {
    flex-basis: 66.666666%;
    max-width: 66.666666%;
    min-width: 66.666666%;
  }
  /* line 69, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--sixth-lg {
    flex-basis: 16.666666%;
    max-width: 16.666666%;
    min-width: 16.666666%;
  }
  /* line 75, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--five-sixths-lg {
    flex-basis: 83.333333%;
    max-width: 83.333333%;
    min-width: 83.333333%;
  }
  /* line 81, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--fifth-lg {
    flex-basis: 20%;
    max-width: 20%;
    min-width: 20%;
  }
  /* line 87, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--two_fifths-lg {
    flex-basis: 40%;
    max-width: 40%;
    min-width: 40%;
  }
  /* line 93, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--three_fifths-lg {
    flex-basis: 60%;
    max-width: 60%;
    min-width: 60%;
  }
  /* line 99, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid .grid__cell--four_fifths-lg {
    flex-basis: 80%;
    max-width: 80%;
    min-width: 80%;
  }
}

/* line 128, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid__cell {
  flex-grow: 1;
  flex-basis: 100%;
  max-width: 100%;
  min-width: 0;
  justify-content: flex-start;
  align-items: flex-start;
}

/* line 138, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid__break {
  flex-basis: 100%;
  flex-shrink: 0;
  max-width: 100%;
  min-width: 0;
}

/* line 145, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid__divider {
  --grid-divider-weight: 0.1rem;
  position: relative;
}

/* line 149, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid__divider:before {
  position: absolute;
  content: "";
  background: var(--surface-trim-color, rgba(30, 30, 30, 0.1));
}

/* line 156, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid__divider--orientation-vertical {
  flex: 0;
}

/* line 159, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid__divider--orientation-vertical:before {
  width: var(--grid-divider-weight, 0.1rem);
  left: 50%;
  top: 0;
  bottom: 0;
  border-radius: inherit;
}

/* line 168, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid__divider--orientation-horizontal {
  flex: 100%;
}

/* line 171, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid__divider--orientation-horizontal:before {
  height: var(--grid-divider-weight, 0.1rem);
  left: 0;
  right: 0;
  top: 50%;
  border-radius: inherit;
}

/* line 180, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid__divider--weight-heavy {
  --grid-divider-weight: 0.4rem;
  border-radius: 0.4rem;
}

/* line 186, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid__divider--weight-heavy.grid__divider--orientation-vertical:before {
  margin-left: -0.2rem;
}

/* line 192, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid__divider--weight-heavy.grid__divider--orientation-horizontal:before {
  margin-top: -0.2rem;
}

/* line 198, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid--align-justify {
  justify-content: stretch;
}

/* line 201, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid--align-justify > .grid__cell {
  display: flex;
  align-items: normal;
  justify-content: normal;
}

/* line 208, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid--align-center {
  justify-content: center;
}

/* line 212, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid--align-right {
  justify-content: flex-end;
}

/* line 216, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid--align-middle {
  align-items: center;
}

/* line 220, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid--align-bottom {
  align-items: flex-end;
}

/* line 224, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid--align-even {
  justify-content: space-evenly;
}

/* line 227, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid--align-even > .grid__cell {
  display: flex;
}

/* line 232, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid__cell--align-middle {
  align-self: center;
}

/* line 236, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid__cell--align-bottom {
  align-self: flex-end;
}

/* line 240, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid__cell--align-top {
  align-self: flex-start;
}

/* line 244, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid__cell--align-center {
  justify-self: center;
}

/* line 248, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid__cell--align-right {
  justify-self: flex-end;
}

/* line 252, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid__cell--display-flex {
  display: flex;
}

/* line 256, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid__cell--display-block {
  display: block;
}

/* line 261, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid--gutters-normal {
  --grid-gutter: 1.6rem;
  margin: -0.8rem;
}

/* line 266, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid--gutters-normal > .grid__cell {
  padding: 0.8rem;
}

/* line 271, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid--gutters-none {
  --grid-gutter: 0;
  margin: 0;
}

/* line 276, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid--gutters-none > .grid__cell {
  padding: 0;
}

/* line 281, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid--gutters-cozy {
  --grid-gutter: 0.4rem;
  margin: -0.2rem;
}

/* line 286, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid--gutters-cozy > .grid__cell {
  padding: 0.2rem;
}

/* line 291, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid--gutters-compact {
  --grid-gutter: 0.8rem;
  margin: -0.4rem;
}

/* line 296, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid--gutters-compact > .grid__cell {
  padding: 0.4rem;
}

/* line 301, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid--gutters-tiny {
  --grid-gutter: 0.2rem;
  margin: -0.2rem;
}

/* line 306, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid--gutters-tiny > .grid__cell {
  padding: 0.2rem;
}

/* line 311, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid--gutters-loose {
  --grid-gutter: 3.2rem;
  margin: -1.6rem;
}

/* line 316, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid--gutters-loose > .grid__cell {
  padding: 1.6rem;
}

/* line 321, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid--gutters-medium {
  --grid-gutter: 6.4rem;
  margin: -1.6rem;
}

/* line 326, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid--gutters-medium > .grid__cell {
  padding: 3.2rem;
}

/* line 331, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid--gutters-large {
  --grid-gutter: 12.8rem;
  margin: -1.6rem;
}

/* line 336, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid--gutters-large > .grid__cell {
  padding: 6.4rem;
}

/* line 341, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid--wrap-none {
  flex-wrap: nowrap;
}

/* line 347, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid__divider--gutters-full.grid__divider--orientation-vertical:before {
  top: 0;
  bottom: 0;
}

/* line 353, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid__divider--gutters-full.grid__divider--orientation-horizontal:before {
  left: 0;
  right: 0;
}

/* line 362, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid__divider--gutters-none.grid__divider--orientation-vertical:before {
  top: calc(var(--grid-gutter, 1.6rem) / 2);
  bottom: calc(var(--grid-gutter, 1.6rem) / 2);
}

/* line 368, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid__divider--gutters-none.grid__divider--orientation-horizontal:before {
  left: calc(var(--grid-gutter, 1.6rem) / 2);
  right: calc(var(--grid-gutter, 1.6rem) / 2);
}

/* line 377, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid__divider--gutters-compact.grid__divider--orientation-vertical:before {
  top: calc(var(--grid-gutter, 1.6rem) / 4);
  bottom: calc(var(--grid-gutter, 1.6rem) / 4);
}

/* line 383, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid__divider--gutters-compact.grid__divider--orientation-horizontal:before {
  left: calc(var(--grid-gutter, 1.6rem) / 4);
  right: calc(var(--grid-gutter, 1.6rem) / 4);
}

/* line 392, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid__divider--gutters-inset.grid__divider--orientation-vertical:before {
  top: calc(var(--grid-gutter, 1.6rem) / 1);
  bottom: calc(var(--grid-gutter, 1.6rem) / 1);
}

/* line 398, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .grid__divider--gutters-inset.grid__divider--orientation-horizontal:before {
  left: calc(var(--grid-gutter, 1.6rem) / 1);
  right: calc(var(--grid-gutter, 1.6rem) / 1);
}

@media (min-width: 768px) {
  /* line 261, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-normal-sm {
    --grid-gutter: 1.6rem;
    margin: -0.8rem;
  }
  /* line 266, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-normal-sm > .grid__cell {
    padding: 0.8rem;
  }
  /* line 271, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-none-sm {
    --grid-gutter: 0;
    margin: 0;
  }
  /* line 276, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-none-sm > .grid__cell {
    padding: 0;
  }
  /* line 281, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-cozy-sm {
    --grid-gutter: 0.4rem;
    margin: -0.2rem;
  }
  /* line 286, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-cozy-sm > .grid__cell {
    padding: 0.2rem;
  }
  /* line 291, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-compact-sm {
    --grid-gutter: 0.8rem;
    margin: -0.4rem;
  }
  /* line 296, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-compact-sm > .grid__cell {
    padding: 0.4rem;
  }
  /* line 301, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-tiny-sm {
    --grid-gutter: 0.2rem;
    margin: -0.2rem;
  }
  /* line 306, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-tiny-sm > .grid__cell {
    padding: 0.2rem;
  }
  /* line 311, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-loose-sm {
    --grid-gutter: 3.2rem;
    margin: -1.6rem;
  }
  /* line 316, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-loose-sm > .grid__cell {
    padding: 1.6rem;
  }
  /* line 321, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-medium-sm {
    --grid-gutter: 6.4rem;
    margin: -1.6rem;
  }
  /* line 326, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-medium-sm > .grid__cell {
    padding: 3.2rem;
  }
  /* line 331, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-large-sm {
    --grid-gutter: 12.8rem;
    margin: -1.6rem;
  }
  /* line 336, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-large-sm > .grid__cell {
    padding: 6.4rem;
  }
  /* line 341, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--wrap-none-sm {
    flex-wrap: nowrap;
  }
  /* line 347, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid__divider--gutters-full-sm.grid__divider--orientation-vertical:before {
    top: 0;
    bottom: 0;
  }
  /* line 353, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid__divider--gutters-full-sm.grid__divider--orientation-horizontal:before {
    left: 0;
    right: 0;
  }
  /* line 362, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid__divider--gutters-none-sm.grid__divider--orientation-vertical:before {
    top: calc(var(--grid-gutter, 1.6rem) / 2);
    bottom: calc(var(--grid-gutter, 1.6rem) / 2);
  }
  /* line 368, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid__divider--gutters-none-sm.grid__divider--orientation-horizontal:before {
    left: calc(var(--grid-gutter, 1.6rem) / 2);
    right: calc(var(--grid-gutter, 1.6rem) / 2);
  }
  /* line 377, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid__divider--gutters-compact-sm.grid__divider--orientation-vertical:before {
    top: calc(var(--grid-gutter, 1.6rem) / 4);
    bottom: calc(var(--grid-gutter, 1.6rem) / 4);
  }
  /* line 383, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid__divider--gutters-compact-sm.grid__divider--orientation-horizontal:before {
    left: calc(var(--grid-gutter, 1.6rem) / 4);
    right: calc(var(--grid-gutter, 1.6rem) / 4);
  }
  /* line 392, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid__divider--gutters-inset-sm.grid__divider--orientation-vertical:before {
    top: calc(var(--grid-gutter, 1.6rem) / 1);
    bottom: calc(var(--grid-gutter, 1.6rem) / 1);
  }
  /* line 398, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid__divider--gutters-inset-sm.grid__divider--orientation-horizontal:before {
    left: calc(var(--grid-gutter, 1.6rem) / 1);
    right: calc(var(--grid-gutter, 1.6rem) / 1);
  }
}

@media (min-width: 992px) {
  /* line 261, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-normal-md {
    --grid-gutter: 1.6rem;
    margin: -0.8rem;
  }
  /* line 266, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-normal-md > .grid__cell {
    padding: 0.8rem;
  }
  /* line 271, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-none-md {
    --grid-gutter: 0;
    margin: 0;
  }
  /* line 276, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-none-md > .grid__cell {
    padding: 0;
  }
  /* line 281, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-cozy-md {
    --grid-gutter: 0.4rem;
    margin: -0.2rem;
  }
  /* line 286, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-cozy-md > .grid__cell {
    padding: 0.2rem;
  }
  /* line 291, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-compact-md {
    --grid-gutter: 0.8rem;
    margin: -0.4rem;
  }
  /* line 296, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-compact-md > .grid__cell {
    padding: 0.4rem;
  }
  /* line 301, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-tiny-md {
    --grid-gutter: 0.2rem;
    margin: -0.2rem;
  }
  /* line 306, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-tiny-md > .grid__cell {
    padding: 0.2rem;
  }
  /* line 311, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-loose-md {
    --grid-gutter: 3.2rem;
    margin: -1.6rem;
  }
  /* line 316, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-loose-md > .grid__cell {
    padding: 1.6rem;
  }
  /* line 321, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-medium-md {
    --grid-gutter: 6.4rem;
    margin: -1.6rem;
  }
  /* line 326, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-medium-md > .grid__cell {
    padding: 3.2rem;
  }
  /* line 331, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-large-md {
    --grid-gutter: 12.8rem;
    margin: -1.6rem;
  }
  /* line 336, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-large-md > .grid__cell {
    padding: 6.4rem;
  }
  /* line 341, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--wrap-none-md {
    flex-wrap: nowrap;
  }
  /* line 347, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid__divider--gutters-full-md.grid__divider--orientation-vertical:before {
    top: 0;
    bottom: 0;
  }
  /* line 353, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid__divider--gutters-full-md.grid__divider--orientation-horizontal:before {
    left: 0;
    right: 0;
  }
  /* line 362, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid__divider--gutters-none-md.grid__divider--orientation-vertical:before {
    top: calc(var(--grid-gutter, 1.6rem) / 2);
    bottom: calc(var(--grid-gutter, 1.6rem) / 2);
  }
  /* line 368, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid__divider--gutters-none-md.grid__divider--orientation-horizontal:before {
    left: calc(var(--grid-gutter, 1.6rem) / 2);
    right: calc(var(--grid-gutter, 1.6rem) / 2);
  }
  /* line 377, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid__divider--gutters-compact-md.grid__divider--orientation-vertical:before {
    top: calc(var(--grid-gutter, 1.6rem) / 4);
    bottom: calc(var(--grid-gutter, 1.6rem) / 4);
  }
  /* line 383, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid__divider--gutters-compact-md.grid__divider--orientation-horizontal:before {
    left: calc(var(--grid-gutter, 1.6rem) / 4);
    right: calc(var(--grid-gutter, 1.6rem) / 4);
  }
  /* line 392, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid__divider--gutters-inset-md.grid__divider--orientation-vertical:before {
    top: calc(var(--grid-gutter, 1.6rem) / 1);
    bottom: calc(var(--grid-gutter, 1.6rem) / 1);
  }
  /* line 398, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid__divider--gutters-inset-md.grid__divider--orientation-horizontal:before {
    left: calc(var(--grid-gutter, 1.6rem) / 1);
    right: calc(var(--grid-gutter, 1.6rem) / 1);
  }
}

@media (min-width: 1200px) {
  /* line 261, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-normal-lg {
    --grid-gutter: 1.6rem;
    margin: -0.8rem;
  }
  /* line 266, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-normal-lg > .grid__cell {
    padding: 0.8rem;
  }
  /* line 271, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-none-lg {
    --grid-gutter: 0;
    margin: 0;
  }
  /* line 276, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-none-lg > .grid__cell {
    padding: 0;
  }
  /* line 281, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-cozy-lg {
    --grid-gutter: 0.4rem;
    margin: -0.2rem;
  }
  /* line 286, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-cozy-lg > .grid__cell {
    padding: 0.2rem;
  }
  /* line 291, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-compact-lg {
    --grid-gutter: 0.8rem;
    margin: -0.4rem;
  }
  /* line 296, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-compact-lg > .grid__cell {
    padding: 0.4rem;
  }
  /* line 301, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-tiny-lg {
    --grid-gutter: 0.2rem;
    margin: -0.2rem;
  }
  /* line 306, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-tiny-lg > .grid__cell {
    padding: 0.2rem;
  }
  /* line 311, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-loose-lg {
    --grid-gutter: 3.2rem;
    margin: -1.6rem;
  }
  /* line 316, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-loose-lg > .grid__cell {
    padding: 1.6rem;
  }
  /* line 321, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-medium-lg {
    --grid-gutter: 6.4rem;
    margin: -1.6rem;
  }
  /* line 326, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-medium-lg > .grid__cell {
    padding: 3.2rem;
  }
  /* line 331, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-large-lg {
    --grid-gutter: 12.8rem;
    margin: -1.6rem;
  }
  /* line 336, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--gutters-large-lg > .grid__cell {
    padding: 6.4rem;
  }
  /* line 341, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid--wrap-none-lg {
    flex-wrap: nowrap;
  }
  /* line 347, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid__divider--gutters-full-lg.grid__divider--orientation-vertical:before {
    top: 0;
    bottom: 0;
  }
  /* line 353, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid__divider--gutters-full-lg.grid__divider--orientation-horizontal:before {
    left: 0;
    right: 0;
  }
  /* line 362, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid__divider--gutters-none-lg.grid__divider--orientation-vertical:before {
    top: calc(var(--grid-gutter, 1.6rem) / 2);
    bottom: calc(var(--grid-gutter, 1.6rem) / 2);
  }
  /* line 368, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid__divider--gutters-none-lg.grid__divider--orientation-horizontal:before {
    left: calc(var(--grid-gutter, 1.6rem) / 2);
    right: calc(var(--grid-gutter, 1.6rem) / 2);
  }
  /* line 377, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid__divider--gutters-compact-lg.grid__divider--orientation-vertical:before {
    top: calc(var(--grid-gutter, 1.6rem) / 4);
    bottom: calc(var(--grid-gutter, 1.6rem) / 4);
  }
  /* line 383, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid__divider--gutters-compact-lg.grid__divider--orientation-horizontal:before {
    left: calc(var(--grid-gutter, 1.6rem) / 4);
    right: calc(var(--grid-gutter, 1.6rem) / 4);
  }
  /* line 392, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid__divider--gutters-inset-lg.grid__divider--orientation-vertical:before {
    top: calc(var(--grid-gutter, 1.6rem) / 1);
    bottom: calc(var(--grid-gutter, 1.6rem) / 1);
  }
  /* line 398, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .grid__divider--gutters-inset-lg.grid__divider--orientation-horizontal:before {
    left: calc(var(--grid-gutter, 1.6rem) / 1);
    right: calc(var(--grid-gutter, 1.6rem) / 1);
  }
}

/* line 417, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .block-container {
  --container-max-width: 115.2rem;
  width: auto;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  flex: 1;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* line 431, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .block-container--size-medium {
  --container-max-width: 70ch;
}

/* line 435, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .block-container--size-form,
.vivid-lab .block-container--size-product {
  --container-max-width: 80rem;
}

/* line 440, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .block-container--size-mobile {
  --container-max-width: 48rem;
}

/* line 444, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .block-container--size-fluid {
  --container-max-width: 409.6rem;
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}

/* line 452, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .block-container--with-scrim {
  position: relative;
}

/* line 456, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .block-container--banner {
  text-align: center;
}

/* line 461, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .block-container--clear:before, .vivid-lab .block-container--clear:after {
  content: "";
  display: table;
}

/* line 468, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .block-container--overflow-hidden {
  overflow: hidden;
}

/* line 472, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .block-container--page-gutters {
  --container-page-gutter: var(--page-gutter);
  --container-gutter: var(--page-gutter);
  padding-left: var(--container-page-gutter);
  padding-right: var(--container-page-gutter);
}

/* line 479, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .block-container--page-gutters .block-container--page-gutters {
  --container-page-gutter: 0px;
}

/* line 484, app/assets/stylesheets/lab/grid.scss */
.vivid-lab .block-container--page-gutters-inset {
  --container-gutter: $container-gutter-horizontal;
  padding-left: 1.6rem;
  padding-right: 1.6rem;
}

@media (min-width: 768px) {
  /* line 484, app/assets/stylesheets/lab/grid.scss */
  .vivid-lab .block-container--page-gutters-inset {
    padding-left: 2.4rem;
    padding-right: 2.4rem;
  }
}

/* line 27, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .gutter-none {
  margin-bottom: 0;
  margin-top: 0;
}

/* line 31, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .gutter-bottom--none {
  margin-bottom: 0;
}

/* line 35, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .gutter-top--none {
  margin-top: 0;
}

/* line 39, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .gutter-bottom {
  margin-bottom: 1.6rem;
}

/* line 43, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .gutter-top {
  margin-top: 1.6rem;
}

/* line 47, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .gutter-bottom--xsmall {
  margin-bottom: 0.4rem;
}

/* line 51, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .gutter-top--xsmall {
  margin-top: 0.4rem;
}

/* line 55, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .gutter-bottom--compact {
  margin-bottom: 0.8rem;
}

/* line 59, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .gutter-top--compact {
  margin-top: 0.8rem;
}

/* line 63, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .gutter-bottom--loose {
  margin-bottom: 2.4rem;
}

/* line 67, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .gutter-top--loose {
  margin-top: 2.4rem;
}

/* line 71, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .gutter-bottom--medium {
  margin-bottom: 3.2rem;
}

/* line 75, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .gutter-top--medium {
  margin-top: 3.2rem;
}

/* line 79, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .gutter-bottom--large {
  margin-bottom: 6.4rem;
}

/* line 83, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .gutter-top--large {
  margin-top: 6.4rem;
}

/* line 87, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .gutter-top--xlarge {
  margin-top: 12.8rem;
}

/* line 91, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .gutter-bottom--xlarge {
  margin-bottom: 12.8rem;
}

/* line 95, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .gutter-top--ornament_large {
  margin-top: -4rem;
}

/* line 99, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .gutter-bottom--ornament_large {
  margin-bottom: -4rem;
}

/* line 103, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .gutter-inset {
  margin-left: 1.6rem;
  margin-right: 1.6rem;
}

/* line 108, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .gutter-inset--none {
  margin-left: 0;
  margin-right: 0;
}

/* line 113, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .gutter-inset--loose {
  margin-left: 3.2rem;
  margin-right: 3.2rem;
}

/* line 118, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .gutter-inset--large {
  margin-left: 6.4rem;
  margin-right: 6.4rem;
}

/* line 125, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .order--first {
  order: -1000;
}

/* line 129, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .order--second {
  order: 2;
}

/* line 133, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .order--third {
  order: 3;
}

/* line 137, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .order--fourth {
  order: 4;
}

/* line 141, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .order--last {
  order: 1000;
}

/* line 145, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .order--natural {
  order: unset;
}

@media (min-width: 768px) {
  /* line 27, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-none-sm {
    margin-bottom: 0;
    margin-top: 0;
  }
  /* line 31, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-bottom--none-sm {
    margin-bottom: 0;
  }
  /* line 35, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-top--none-sm {
    margin-top: 0;
  }
  /* line 39, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-bottom-sm {
    margin-bottom: 1.6rem;
  }
  /* line 43, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-top-sm {
    margin-top: 1.6rem;
  }
  /* line 47, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-bottom--xsmall-sm {
    margin-bottom: 0.4rem;
  }
  /* line 51, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-top--xsmall-sm {
    margin-top: 0.4rem;
  }
  /* line 55, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-bottom--compact-sm {
    margin-bottom: 0.8rem;
  }
  /* line 59, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-top--compact-sm {
    margin-top: 0.8rem;
  }
  /* line 63, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-bottom--loose-sm {
    margin-bottom: 2.4rem;
  }
  /* line 67, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-top--loose-sm {
    margin-top: 2.4rem;
  }
  /* line 71, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-bottom--medium-sm {
    margin-bottom: 3.2rem;
  }
  /* line 75, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-top--medium-sm {
    margin-top: 3.2rem;
  }
  /* line 79, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-bottom--large-sm {
    margin-bottom: 6.4rem;
  }
  /* line 83, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-top--large-sm {
    margin-top: 6.4rem;
  }
  /* line 87, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-top--xlarge-sm {
    margin-top: 12.8rem;
  }
  /* line 91, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-bottom--xlarge-sm {
    margin-bottom: 12.8rem;
  }
  /* line 95, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-top--ornament_large-sm {
    margin-top: -4rem;
  }
  /* line 99, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-bottom--ornament_large-sm {
    margin-bottom: -4rem;
  }
  /* line 103, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-inset-sm {
    margin-left: 1.6rem;
    margin-right: 1.6rem;
  }
  /* line 108, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-inset--none-sm {
    margin-left: 0;
    margin-right: 0;
  }
  /* line 113, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-inset--loose-sm {
    margin-left: 3.2rem;
    margin-right: 3.2rem;
  }
  /* line 118, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-inset--large-sm {
    margin-left: 6.4rem;
    margin-right: 6.4rem;
  }
  /* line 125, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .order--first-sm {
    order: -1000;
  }
  /* line 129, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .order--second-sm {
    order: 2;
  }
  /* line 133, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .order--third-sm {
    order: 3;
  }
  /* line 137, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .order--fourth-sm {
    order: 4;
  }
  /* line 141, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .order--last-sm {
    order: 1000;
  }
  /* line 145, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .order--natural-sm {
    order: unset;
  }
}

@media (min-width: 992px) {
  /* line 27, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-none-md {
    margin-bottom: 0;
    margin-top: 0;
  }
  /* line 31, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-bottom--none-md {
    margin-bottom: 0;
  }
  /* line 35, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-top--none-md {
    margin-top: 0;
  }
  /* line 39, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-bottom-md {
    margin-bottom: 1.6rem;
  }
  /* line 43, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-top-md {
    margin-top: 1.6rem;
  }
  /* line 47, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-bottom--xsmall-md {
    margin-bottom: 0.4rem;
  }
  /* line 51, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-top--xsmall-md {
    margin-top: 0.4rem;
  }
  /* line 55, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-bottom--compact-md {
    margin-bottom: 0.8rem;
  }
  /* line 59, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-top--compact-md {
    margin-top: 0.8rem;
  }
  /* line 63, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-bottom--loose-md {
    margin-bottom: 2.4rem;
  }
  /* line 67, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-top--loose-md {
    margin-top: 2.4rem;
  }
  /* line 71, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-bottom--medium-md {
    margin-bottom: 3.2rem;
  }
  /* line 75, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-top--medium-md {
    margin-top: 3.2rem;
  }
  /* line 79, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-bottom--large-md {
    margin-bottom: 6.4rem;
  }
  /* line 83, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-top--large-md {
    margin-top: 6.4rem;
  }
  /* line 87, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-top--xlarge-md {
    margin-top: 12.8rem;
  }
  /* line 91, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-bottom--xlarge-md {
    margin-bottom: 12.8rem;
  }
  /* line 95, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-top--ornament_large-md {
    margin-top: -4rem;
  }
  /* line 99, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-bottom--ornament_large-md {
    margin-bottom: -4rem;
  }
  /* line 103, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-inset-md {
    margin-left: 1.6rem;
    margin-right: 1.6rem;
  }
  /* line 108, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-inset--none-md {
    margin-left: 0;
    margin-right: 0;
  }
  /* line 113, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-inset--loose-md {
    margin-left: 3.2rem;
    margin-right: 3.2rem;
  }
  /* line 118, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-inset--large-md {
    margin-left: 6.4rem;
    margin-right: 6.4rem;
  }
  /* line 125, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .order--first-md {
    order: -1000;
  }
  /* line 129, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .order--second-md {
    order: 2;
  }
  /* line 133, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .order--third-md {
    order: 3;
  }
  /* line 137, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .order--fourth-md {
    order: 4;
  }
  /* line 141, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .order--last-md {
    order: 1000;
  }
  /* line 145, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .order--natural-md {
    order: unset;
  }
}

@media (min-width: 1200px) {
  /* line 27, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-none-lg {
    margin-bottom: 0;
    margin-top: 0;
  }
  /* line 31, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-bottom--none-lg {
    margin-bottom: 0;
  }
  /* line 35, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-top--none-lg {
    margin-top: 0;
  }
  /* line 39, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-bottom-lg {
    margin-bottom: 1.6rem;
  }
  /* line 43, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-top-lg {
    margin-top: 1.6rem;
  }
  /* line 47, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-bottom--xsmall-lg {
    margin-bottom: 0.4rem;
  }
  /* line 51, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-top--xsmall-lg {
    margin-top: 0.4rem;
  }
  /* line 55, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-bottom--compact-lg {
    margin-bottom: 0.8rem;
  }
  /* line 59, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-top--compact-lg {
    margin-top: 0.8rem;
  }
  /* line 63, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-bottom--loose-lg {
    margin-bottom: 2.4rem;
  }
  /* line 67, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-top--loose-lg {
    margin-top: 2.4rem;
  }
  /* line 71, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-bottom--medium-lg {
    margin-bottom: 3.2rem;
  }
  /* line 75, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-top--medium-lg {
    margin-top: 3.2rem;
  }
  /* line 79, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-bottom--large-lg {
    margin-bottom: 6.4rem;
  }
  /* line 83, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-top--large-lg {
    margin-top: 6.4rem;
  }
  /* line 87, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-top--xlarge-lg {
    margin-top: 12.8rem;
  }
  /* line 91, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-bottom--xlarge-lg {
    margin-bottom: 12.8rem;
  }
  /* line 95, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-top--ornament_large-lg {
    margin-top: -4rem;
  }
  /* line 99, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-bottom--ornament_large-lg {
    margin-bottom: -4rem;
  }
  /* line 103, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-inset-lg {
    margin-left: 1.6rem;
    margin-right: 1.6rem;
  }
  /* line 108, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-inset--none-lg {
    margin-left: 0;
    margin-right: 0;
  }
  /* line 113, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-inset--loose-lg {
    margin-left: 3.2rem;
    margin-right: 3.2rem;
  }
  /* line 118, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .gutter-inset--large-lg {
    margin-left: 6.4rem;
    margin-right: 6.4rem;
  }
  /* line 125, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .order--first-lg {
    order: -1000;
  }
  /* line 129, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .order--second-lg {
    order: 2;
  }
  /* line 133, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .order--third-lg {
    order: 3;
  }
  /* line 137, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .order--fourth-lg {
    order: 4;
  }
  /* line 141, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .order--last-lg {
    order: 1000;
  }
  /* line 145, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .order--natural-lg {
    order: unset;
  }
}

/* line 165, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .collapse--with-overflow {
  padding-left: 2.4rem;
  padding-right: 2.4rem;
  margin-right: -2.4rem;
  margin-left: -2.4rem;
}

/* line 173, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .collapse__margin-container {
  overflow: hidden;
}

/* line 178, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .collapse.in .collapse__margin-container {
  overflow: visible;
}

/* line 182, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .display--flex {
  display: flex;
}

/* line 186, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .display--flex-inline {
  display: inline-flex;
}

/* line 190, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .display--inline {
  display: inline;
}

/* line 194, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .display--block {
  display: block;
}

@media (max-width: 767px) {
  /* line 203, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .hidden-device {
    display: none !important;
  }
}

@media (max-width: 767px) {
  /* line 209, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .visible-device {
    display: block !important;
  }
}

@media (min-width: 768px) {
  /* line 215, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .hidden-desktop {
    display: none !important;
  }
}

@media (min-width: 768px) {
  /* line 221, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .visible-desktop {
    display: block !important;
  }
}

@media (max-width: 374px) {
  /* line 228, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .hidden-xxsmall,
.vivid-lab .hidden-extra-small {
    display: none !important;
  }
}

@media (min-width: 375px) {
  /* line 236, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .visible-xxsmall,
.vivid-lab .visible-extra-small {
    display: none !important;
  }
}

/* line 243, app/assets/stylesheets/lab/utilities.scss */
.vivid-lab .visible-xs,
.vivid-lab .visible-xs-block,
.vivid-lab .visible-xs-inline,
.vivid-lab .visible-xs-inline-block,
.vivid-lab .visible-sm,
.vivid-lab .visible-sm-block,
.vivid-lab .visible-sm-inline,
.vivid-lab .visible-sm-inline-block,
.vivid-lab .visible-md,
.vivid-lab .visible-md-block,
.vivid-lab .visible-md-inline,
.vivid-lab .visible-md-inline-block,
.vivid-lab .visible-lg,
.vivid-lab .visible-lg-block,
.vivid-lab .visible-lg-inline,
.vivid-lab .visible-lg-inline-block {
  display: none !important;
}

@media (max-width: 374px) {
  /* line 5, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .visible-xxs {
    display: block !important;
  }
  /* line 8, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab table.visible-xxs {
    display: table !important;
  }
  /* line 11, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab tr.visible-xxs {
    display: table-row !important;
  }
  /* line 14, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab th.visible-xxs,
.vivid-lab td.visible-xxs {
    display: table-cell !important;
  }
}

@media (max-width: 374px) {
  /* line 265, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .visible-xxs-block {
    display: block !important;
  }
}

@media (max-width: 374px) {
  /* line 270, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .visible-xxs-inline {
    display: inline !important;
  }
}

@media (max-width: 374px) {
  /* line 275, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .visible-xxs-inline-block {
    display: inline-block !important;
  }
}

@media (max-width: 767px) {
  /* line 5, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .visible-xs {
    display: block !important;
  }
  /* line 8, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab table.visible-xs {
    display: table !important;
  }
  /* line 11, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab tr.visible-xs {
    display: table-row !important;
  }
  /* line 14, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab th.visible-xs,
.vivid-lab td.visible-xs {
    display: table-cell !important;
  }
}

@media (max-width: 767px) {
  /* line 284, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .visible-xs-block {
    display: block !important;
  }
}

@media (max-width: 767px) {
  /* line 289, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .visible-xs-inline {
    display: inline !important;
  }
}

@media (max-width: 767px) {
  /* line 294, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .visible-xs-inline-block {
    display: inline-block !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  /* line 5, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .visible-sm {
    display: block !important;
  }
  /* line 8, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab table.visible-sm {
    display: table !important;
  }
  /* line 11, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab tr.visible-sm {
    display: table-row !important;
  }
  /* line 14, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab th.visible-sm,
.vivid-lab td.visible-sm {
    display: table-cell !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  /* line 303, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .visible-sm-block {
    display: block !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  /* line 308, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .visible-sm-inline {
    display: inline !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  /* line 313, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .visible-sm-inline-block {
    display: inline-block !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  /* line 5, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .visible-md {
    display: block !important;
  }
  /* line 8, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab table.visible-md {
    display: table !important;
  }
  /* line 11, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab tr.visible-md {
    display: table-row !important;
  }
  /* line 14, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab th.visible-md,
.vivid-lab td.visible-md {
    display: table-cell !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  /* line 322, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .visible-md-block {
    display: block !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  /* line 327, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .visible-md-inline {
    display: inline !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  /* line 332, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .visible-md-inline-block {
    display: inline-block !important;
  }
}

@media (min-width: 1200px) {
  /* line 5, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .visible-lg {
    display: block !important;
  }
  /* line 8, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab table.visible-lg {
    display: table !important;
  }
  /* line 11, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab tr.visible-lg {
    display: table-row !important;
  }
  /* line 14, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab th.visible-lg,
.vivid-lab td.visible-lg {
    display: table-cell !important;
  }
}

@media (min-width: 1200px) {
  /* line 341, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .visible-lg-block {
    display: block !important;
  }
}

@media (min-width: 1200px) {
  /* line 346, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .visible-lg-inline {
    display: inline !important;
  }
}

@media (min-width: 1200px) {
  /* line 351, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .visible-lg-inline-block {
    display: inline-block !important;
  }
}

@media (max-width: 374px) {
  /* line 21, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .hidden-xxs {
    display: none !important;
  }
}

@media (max-width: 767px) {
  /* line 21, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .hidden-xs {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  /* line 21, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .hidden-sm {
    display: none !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  /* line 21, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .hidden-md {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  /* line 21, app/assets/stylesheets/lab/utilities.scss */
  .vivid-lab .hidden-lg {
    display: none !important;
  }
}

/* line 382, app/assets/stylesheets/lab/utilities.scss */
.can-share .without-sharing {
  display: none !important;
}

/* line 387, app/assets/stylesheets/lab/utilities.scss */
.can-share body.mobile .without-sharing--mobile {
  display: none !important;
}

/* line 393, app/assets/stylesheets/lab/utilities.scss */
.can-share body:not(.mobile) .with-sharing--mobile {
  display: none !important;
}

/* line 400, app/assets/stylesheets/lab/utilities.scss */
.cannot-share .with-sharing,
.cannot-share .with-sharing--mobile {
  display: none !important;
}

/* line 409, app/assets/stylesheets/lab/utilities.scss */
.hide {
  display: none;
}

/* line 413, app/assets/stylesheets/lab/utilities.scss */
.force-hide {
  display: none !important;
}

/* line 2, app/assets/stylesheets/lab/pagination.scss */
.vivid-lab .pagination {
  display: flex;
  padding: 0;
  margin: 0;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* line 10, app/assets/stylesheets/lab/pagination.scss */
.vivid-lab .pagination > li {
  display: inline-block;
  position: relative;
}

/* line 14, app/assets/stylesheets/lab/pagination.scss */
.vivid-lab .pagination > li > a {
  display: block;
  width: 100%;
}

/* line 19, app/assets/stylesheets/lab/pagination.scss */
.vivid-lab .pagination > li > a:focus {
  position: relative;
  z-index: 1;
}

/* line 25, app/assets/stylesheets/lab/pagination.scss */
.vivid-lab .pagination > li:not(.disabled) + li {
  margin-left: -2px;
}

/* line 31, app/assets/stylesheets/lab/pagination.scss */
.vivid-lab .pagination > li:not(:last-child) > a {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* line 38, app/assets/stylesheets/lab/pagination.scss */
.vivid-lab .pagination > li:not(:first-child) > a {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* line 46, app/assets/stylesheets/lab/pagination.scss */
.vivid-lab .pagination > li.disabled > a.button {
  background-color: transparent;
}

/* line 2, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .subsurface.surface--color,
.vivid-lab .surface.surface--color {
  --surface-scrim-opacity: 0.5;
  background-color: var(--surface-background-color, #F4F2F1);
  border-color: var(--surface-outline-color, #019854);
  background-size: cover;
  background-position: 50% 50%;
}

/* line 11, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .subsurface.surface--color,
.vivid-lab .subsurface.surface--color .surface__text.surface__text,
.vivid-lab .surface.surface--color,
.vivid-lab .surface.surface--color .surface__text.surface__text {
  color: var(--surface-color);
}

/* line 16, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .subsurface.surface--color h1,
.vivid-lab .subsurface.surface--color .h1,
.vivid-lab .subsurface.surface--color h2,
.vivid-lab .subsurface.surface--color .h2,
.vivid-lab .surface.surface--color h1,
.vivid-lab .surface.surface--color .h1,
.vivid-lab .surface.surface--color h2,
.vivid-lab .surface.surface--color .h2 {
  color: var(--surface-header-color);
}

/* line 23, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .subsurface.surface--color.surface__background-element,
.vivid-lab .surface.surface--color.surface__background-element {
  color: var(--surface-background-color);
  fill: var(--surface-background-color);
  background: transparent;
}

/* line 29, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .subsurface.surface--color .surface__trim-element,
.vivid-lab .surface.surface--color .surface__trim-element {
  color: var(--surface-trim-color);
}

/* line 33, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .subsurface.surface--color .surface--outlined,
.vivid-lab .surface.surface--color .surface--outlined {
  border-width: var(--surface-border-width);
  border-style: solid;
  border-color: var(--surface-outline-color);
}

/* line 39, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .subsurface.surface--color .surface--outlined-heavy,
.vivid-lab .surface.surface--color .surface--outlined-heavy {
  border-width: 0.4rem;
}

/* line 43, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .subsurface.surface--color .surface--outlined.surface--outlined-container,
.vivid-lab .surface.surface--color .surface--outlined.surface--outlined-container {
  --surface-outline-color: var(--surface-container-outline-color);
}

/* line 47, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .subsurface.surface--color .surface--outlined.surface--outlined-background,
.vivid-lab .surface.surface--color .surface--outlined.surface--outlined-background {
  --surface-outline-color: var(--surface-container-background-color);
}

/* line 51, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .subsurface.surface--color.surface--trimmed,
.vivid-lab .surface.surface--color.surface--trimmed {
  border-color: var(--surface-trim-color);
}

/* line 58, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface .surface--outlined,
.vivid-lab .subsurface .surface--outlined {
  --surface-border-width: 0.1rem;
}

/* line 63, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface__body {
  flex: 1 1 auto;
}

/* line 67, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--elevation-1 {
  --surface-elevation: 1;
  box-shadow: 0 0.1rem 0.1rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 0.2rem 0.4rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 0.3rem 0.8rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity, 0.02));
}

/* line 71, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--elevation-1-up {
  --surface-elevation: 1;
  box-shadow: 0 -0.1rem 0.1rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 -0.2rem 0.4rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 -0.3rem 0.8rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity, 0.02));
}

/* line 75, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--elevation--1 {
  box-shadow: inset 0 0.2rem 0.1rem -0.1rem rgba(var(--surface-inset-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity) * 0.1)), inset 0 0.1rem 0.1rem 0 rgba(var(--surface-inset-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity) * 0.5)), inset 0 0.1rem 0.3rem 0 rgba(var(--surface-inset-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity) * 0.4));
}

/* line 85, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--elevation-2, .vivid-lab .captured-screen__header__container.sticky-top--stuck, .vivid-lab .surface--stickable.sticky-top--stuck {
  --surface-elevation: 2;
  box-shadow: 0 0.2rem 0.2rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 0.4rem 0.8rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 0.6rem 1.6rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity, 0.02));
}

/* line 89, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--elevation-2-up {
  --surface-elevation: 2;
  box-shadow: 0 -0.2rem 0.2rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 -0.4rem 0.8rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 -0.6rem 1.6rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity, 0.02));
}

/* line 93, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--elevation--2 {
  box-shadow: inset 0 0.3rem 0.1rem -0.2rem rgba(var(--surface-inset-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity) * 0.1)), inset 0 0.2rem 0.2rem 0 rgba(var(--surface-inset-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity) * 0.5)), inset 0 0.1rem 0.5rem 0 rgba(var(--surface-inset-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity) * 0.4));
}

/* line 103, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--elevation-4 {
  --surface-elevation: 4;
  box-shadow: 0 0.4rem 0.4rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 0.8rem 1.6rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 1.2rem 3.2rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity, 0.02));
}

/* line 107, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--elevation-4-up {
  --surface-elevation: 4;
  box-shadow: 0 -0.4rem 0.4rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 -0.8rem 1.6rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 -1.2rem 3.2rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity, 0.02));
}

/* line 111, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--elevation-8 {
  --surface-elevation: 8;
  box-shadow: 0 0.8rem 0.8rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 1.6rem 3.2rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 2.4rem 6.4rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity, 0.02));
}

/* line 115, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--elevation-8-up {
  --surface-elevation: 8;
  box-shadow: 0 -0.8rem 0.8rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 -1.6rem 3.2rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 -2.4rem 6.4rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity, 0.02));
}

/* line 119, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--elevation-12 {
  --surface-elevation: 12;
  box-shadow: 0 1.2rem 1.2rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 2.4rem 4.8rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 3.6rem 9.6rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity, 0.02));
}

/* line 123, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--elevation-12-up {
  --surface-elevation: 12;
  box-shadow: 0 -1.2rem 1.2rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 -2.4rem 4.8rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 -3.6rem 9.6rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity, 0.02));
}

/* line 127, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--elevation-16 {
  --surface-elevation: 16;
  box-shadow: 0 1.6rem 1.6rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 3.2rem 6.4rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 4.8rem 12.8rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity, 0.02));
}

/* line 131, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--elevation-16-up {
  --surface-elevation: 16;
  box-shadow: 0 -1.6rem 1.6rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 -3.2rem 6.4rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 -4.8rem 12.8rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity, 0.02));
}

/* line 135, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--elevation-24 {
  --surface-elevation: 24;
  box-shadow: 0 2.4rem 2.4rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 4.8rem 9.6rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 7.2rem 19.2rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity, 0.02));
}

/* line 139, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--elevation-24-up {
  --surface-elevation: 24;
  box-shadow: 0 -2.4rem 2.4rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 -4.8rem 9.6rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 -7.2rem 19.2rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity, 0.02));
}

/* line 151, app/assets/stylesheets/lab/surface.scss */
.vivid-lab a.anchor--surface,
.vivid-lab a.anchor--surface:visited {
  --link-color: var(--surface-link-color);
}

/* line 162, app/assets/stylesheets/lab/surface.scss */
:root,
.vivid-lab .surface--color-canvas,
.vivid-lab .surface--color-grey.surface--color-bold,
.vivid-lab .surface--color-mid.surface--color-bold {
  --surface-background-color: #F4F2F1;
  --surface-color: #1E1E1E;
  --surface-deemphasized-color: #676B79;
  --surface-emphasis-color: #184BCD;
  --surface-emphasis-reverse-color: #FFFFFF;
  --surface-header-color: #0A0A0A;
  --surface-link-color: #184BCD;
  --surface-trim-color: #D2D2D2;
  --surface-outline-color: #D2D2D2;
  --surface-glass-color: #FFFFFF;
  --surface-shade-color: #E3E3E3;
  --surface-greek-color: #D2D2D2;
  --surface-greek-highlight-color: #F4F2F1;
  --surface-shadow-opacity: 0.02;
  --surface-inset-shadow-color: 25.8505, 23.7165,
    22.6495;
  --surface-focus-color: #D2D2D2;
  --link-color: var(--surface-link-color, #184BCD);
}

/* line 38, app/assets/stylesheets/lab/surface_mixins.scss */
:root > *,
.vivid-lab .surface--color-canvas > *,
.vivid-lab .surface--color-grey.surface--color-bold > *,
.vivid-lab .surface--color-mid.surface--color-bold > * {
  --surface-shadow-color: 25.8505, 23.7165, 22.6495;
  --surface-container-outline-color: #D2D2D2;
  --surface-container-input-outline-color: #D2D2D2;
  --surface-container-background-color: #F4F2F1;
  --surface-container-color: #1E1E1E;
  --surface-container-shade-color: #E3E3E3;
}

/* line 185, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color-grey,
.vivid-lab .surface--color-mid {
  --surface-background-color: #D2D2D2;
  --surface-color: #1E1E1E;
  --surface-deemphasized-color: #676B79;
  --surface-emphasis-color: #184BCD;
  --surface-emphasis-reverse-color: #D2D2D2;
  --surface-header-color: #0A0A0A;
  --surface-link-color: #184BCD;
  --surface-trim-color: #C1C1C1;
  --surface-outline-color: #C1C1C1;
  --surface-glass-color: #E3E3E3;
  --surface-shade-color: #C1C1C1;
  --surface-greek-color: #C9C9C9;
  --surface-greek-highlight-color: #F4F2F1;
  --surface-shadow-opacity: 0.02;
  --surface-inset-shadow-color: 21, 21,
    21;
  --surface-focus-color: rgba(30, 30, 30, 0.5);
}

/* line 38, app/assets/stylesheets/lab/surface_mixins.scss */
.vivid-lab .surface--color-grey > *,
.vivid-lab .surface--color-mid > * {
  --surface-shadow-color: 21, 21, 21;
  --surface-container-outline-color: #C1C1C1;
  --surface-container-input-outline-color: #676B79;
  --surface-container-background-color: #D2D2D2;
  --surface-container-color: #1E1E1E;
  --surface-container-shade-color: #C1C1C1;
}

/* line 205, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color-default {
  --surface-background-color: #E3E3E3;
  --surface-color: #1E1E1E;
  --surface-deemphasized-color: #676B79;
  --surface-emphasis-color: #184BCD;
  --surface-emphasis-reverse-color: #E3E3E3;
  --surface-header-color: #0A0A0A;
  --surface-link-color: #184BCD;
  --surface-trim-color: #C1C1C1;
  --surface-outline-color: #D2D2D2;
  --surface-glass-color: #F4F2F1;
  --surface-shade-color: #D2D2D2;
  --surface-greek-color: #D2D2D2;
  --surface-greek-highlight-color: #F4F2F1;
  --surface-shadow-opacity: 0.02;
  --surface-inset-shadow-color: 22.7, 22.7,
    22.7;
  --surface-focus-color: #676B79;
}

/* line 38, app/assets/stylesheets/lab/surface_mixins.scss */
.vivid-lab .surface--color-default > * {
  --surface-shadow-color: 22.7, 22.7, 22.7;
  --surface-container-outline-color: #D2D2D2;
  --surface-container-input-outline-color: #C1C1C1;
  --surface-container-background-color: #E3E3E3;
  --surface-container-color: #1E1E1E;
  --surface-container-shade-color: #D2D2D2;
}

/* line 220, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color-default.surface--color-bold {
  --surface-background-color: #FFFFFF;
  --surface-color: #1E1E1E;
  --surface-deemphasized-color: #616161;
  --surface-emphasis-color: #184BCD;
  --surface-emphasis-reverse-color: #FFFFFF;
  --surface-header-color: #0A0A0A;
  --surface-link-color: #184BCD;
  --surface-trim-color: #E3E3E3;
  --surface-outline-color: #E3E3E3;
  --surface-glass-color: #F4F2F1;
  --surface-shade-color: #E3E3E3;
  --surface-greek-color: #E3E3E3;
  --surface-greek-highlight-color: #FFFFFF;
  --surface-shadow-opacity: 0.02;
  --surface-inset-shadow-color: 25.5, 25.5,
    25.5;
  --surface-focus-color: rgba(30, 30, 30, 0.5);
}

/* line 38, app/assets/stylesheets/lab/surface_mixins.scss */
.vivid-lab .surface--color-default.surface--color-bold > * {
  --surface-shadow-color: 25.5, 25.5, 25.5;
  --surface-container-outline-color: #E3E3E3;
  --surface-container-input-outline-color: #D2D2D2;
  --surface-container-background-color: #FFFFFF;
  --surface-container-color: #1E1E1E;
  --surface-container-shade-color: #E3E3E3;
}

/* line 239, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color-default-rules,
.vivid-lab .surface--color-blue,
.vivid-lab .surface--color-brand {
  --surface-background-color: #D1DFFF;
  --surface-color: #184BCD;
  --surface-deemphasized-color: #6286e1;
  --surface-emphasis-color: #184BCD;
  --surface-emphasis-reverse-color: #D1DFFF;
  --surface-header-color: #1a45b4;
  --surface-link-color: #184BCD;
  --surface-trim-color: #B8CEFF;
  --surface-outline-color: #B8CEFF;
  --surface-glass-color: #E0EAFF;
  --surface-shade-color: #B8CEFF;
  --surface-greek-color: #B8CEFF;
  --surface-greek-highlight-color: #E0EAFF;
  --surface-shadow-opacity: 0.02;
  --surface-inset-shadow-color: 10.44, 18.2069565217,
    35.96;
  --surface-focus-color: #0C50FD;
}

/* line 38, app/assets/stylesheets/lab/surface_mixins.scss */
.vivid-lab .surface--color-default-rules > *,
.vivid-lab .surface--color-blue > *,
.vivid-lab .surface--color-brand > * {
  --surface-shadow-color: 10.44, 18.2069565217, 35.96;
  --surface-container-outline-color: #B8CEFF;
  --surface-container-input-outline-color: #B8CEFF;
  --surface-container-background-color: #D1DFFF;
  --surface-container-color: #184BCD;
  --surface-container-shade-color: #B8CEFF;
}

/* line 253, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color-default-rules.surface--color-bold,
.vivid-lab .surface--color-blue.surface--color-bold,
.vivid-lab .surface--color-brand.surface--color-bold {
  --surface-background-color: #184BCD;
  --surface-color: #E0EAFF;
  --surface-deemphasized-color: #B8CEFF;
  --surface-emphasis-color: #FFFFFF;
  --surface-emphasis-reverse-color: #184BCD;
  --surface-header-color: #FFFFFF;
  --surface-link-color: #E0EAFF;
  --surface-trim-color: #15317a;
  --surface-outline-color: #15317a;
  --surface-glass-color: #1b54e6;
  --surface-shade-color: #1a42a8;
  --surface-greek-color: #1a42a8;
  --surface-greek-highlight-color: #B8CEFF;
  --surface-shadow-opacity: 0.1;
  --surface-inset-shadow-color: 6.4725, 9.2775,
    16.4275;
  --surface-focus-color: #15317a;
}

/* line 38, app/assets/stylesheets/lab/surface_mixins.scss */
.vivid-lab .surface--color-default-rules.surface--color-bold > *,
.vivid-lab .surface--color-blue.surface--color-bold > *,
.vivid-lab .surface--color-brand.surface--color-bold > * {
  --surface-shadow-color: 6.4725, 9.2775, 16.4275;
  --surface-container-outline-color: #15317a;
  --surface-container-input-outline-color: #15317a;
  --surface-container-background-color: #184BCD;
  --surface-container-color: #E0EAFF;
  --surface-container-shade-color: #1a42a8;
}

/* line 265, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color-green,
.vivid-lab .surface--color-success,
.vivid-lab .surface--color-positive {
  --surface-background-color: #BBEDC8;
  --surface-color: #016538;
  --surface-deemphasized-color: #4b9b72;
  --surface-emphasis-color: #035932;
  --surface-emphasis-reverse-color: #BBEDC8;
  --surface-header-color: #035932;
  --surface-link-color: #016538;
  --surface-trim-color: #A0E3B3;
  --surface-outline-color: #A0E3B3;
  --surface-glass-color: #D6FADF;
  --surface-shade-color: #A0E3B3;
  --surface-greek-color: #A0E3B3;
  --surface-greek-highlight-color: #D6FADF;
  --surface-shadow-opacity: 0.02;
  --surface-inset-shadow-color: 14.4209302326, 27.9790697674,
    17.9460465116;
  --surface-focus-color: #019854;
}

/* line 38, app/assets/stylesheets/lab/surface_mixins.scss */
.vivid-lab .surface--color-green > *,
.vivid-lab .surface--color-success > *,
.vivid-lab .surface--color-positive > * {
  --surface-shadow-color: 14.4209302326, 27.9790697674, 17.9460465116;
  --surface-container-outline-color: #A0E3B3;
  --surface-container-input-outline-color: #A0E3B3;
  --surface-container-background-color: #BBEDC8;
  --surface-container-color: #016538;
  --surface-container-shade-color: #A0E3B3;
}

/* line 278, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color-green.surface--color-bold,
.vivid-lab .surface--color-success.surface--color-bold,
.vivid-lab .surface--color-positive.surface--color-bold {
  --surface-background-color: #016538;
  --surface-color: #D6FADF;
  --surface-deemphasized-color: #81be9c;
  --surface-emphasis-color: #FFFFFF;
  --surface-emphasis-reverse-color: #016538;
  --surface-header-color: #FFFFFF;
  --surface-link-color: #D6FADF;
  --surface-trim-color: #043c23;
  --surface-outline-color: #043c23;
  --surface-glass-color: #018d4e;
  --surface-shade-color: #04532f;
  --surface-greek-color: #04532f;
  --surface-greek-highlight-color: #018d4e;
  --surface-shadow-opacity: 0.1;
  --surface-inset-shadow-color: 2.35, 7.85,
    5.375;
  --surface-focus-color: #043c23;
}

/* line 38, app/assets/stylesheets/lab/surface_mixins.scss */
.vivid-lab .surface--color-green.surface--color-bold > *,
.vivid-lab .surface--color-success.surface--color-bold > *,
.vivid-lab .surface--color-positive.surface--color-bold > * {
  --surface-shadow-color: 2.35, 7.85, 5.375;
  --surface-container-outline-color: #043c23;
  --surface-container-input-outline-color: #043c23;
  --surface-container-background-color: #016538;
  --surface-container-color: #D6FADF;
  --surface-container-shade-color: #04532f;
}

/* line 288, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color-on {
  --surface-background-color: #D6FADF;
  --surface-color: #019854;
  --surface-deemphasized-color: #56bf8c;
  --surface-emphasis-color: #016538;
  --surface-emphasis-reverse-color: #D6FADF;
  --surface-header-color: #016538;
  --surface-link-color: #019854;
  --surface-trim-color: #BBEDC8;
  --surface-outline-color: #BBEDC8;
  --surface-glass-color: #eafdef;
  --surface-shade-color: #aef3c0;
  --surface-greek-color: #aef3c0;
  --surface-greek-highlight-color: #eafdef;
  --surface-shadow-opacity: 0.02;
  --surface-inset-shadow-color: 13.2139130435, 33.1860869565,
    18.2069565217;
  --surface-focus-color: #019854;
}

/* line 38, app/assets/stylesheets/lab/surface_mixins.scss */
.vivid-lab .surface--color-on > * {
  --surface-shadow-color: 13.2139130435, 33.1860869565, 18.2069565217;
  --surface-container-outline-color: #BBEDC8;
  --surface-container-input-outline-color: #BBEDC8;
  --surface-container-background-color: #D6FADF;
  --surface-container-color: #019854;
  --surface-container-shade-color: #aef3c0;
}

/* line 299, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color-on.surface--color-bold {
  --surface-background-color: #019854;
  --surface-color: #D6FADF;
  --surface-deemphasized-color: #81d3a7;
  --surface-emphasis-color: #FFFFFF;
  --surface-emphasis-reverse-color: #019854;
  --surface-header-color: #FFFFFF;
  --surface-link-color: #D6FADF;
  --surface-trim-color: #055a34;
  --surface-outline-color: #055a34;
  --surface-glass-color: #01bc68;
  --surface-shade-color: #067c47;
  --surface-greek-color: #067c47;
  --surface-greek-highlight-color: #01bc68;
  --surface-shadow-opacity: 0.1;
  --surface-inset-shadow-color: 3.4975, 11.8025,
    8.0625;
  --surface-focus-color: #055a34;
}

/* line 38, app/assets/stylesheets/lab/surface_mixins.scss */
.vivid-lab .surface--color-on.surface--color-bold > * {
  --surface-shadow-color: 3.4975, 11.8025, 8.0625;
  --surface-container-outline-color: #055a34;
  --surface-container-input-outline-color: #055a34;
  --surface-container-background-color: #019854;
  --surface-container-color: #D6FADF;
  --surface-container-shade-color: #067c47;
}

/* line 309, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color-urgent,
.vivid-lab .surface--color-off {
  --surface-background-color: #FFD6D6;
  --surface-color: #E12D2D;
  --surface-deemphasized-color: #ed7171;
  --surface-emphasis-color: #B21919;
  --surface-emphasis-reverse-color: #FFD6D6;
  --surface-header-color: #B21919;
  --surface-link-color: #E12D2D;
  --surface-trim-color: #FFD6D6;
  --surface-outline-color: #FFD6D6;
  --surface-glass-color: #fff7f7;
  --surface-shade-color: #FFC2C2;
  --surface-greek-color: #FFC2C2;
  --surface-greek-highlight-color: #fff7f7;
  --surface-shadow-opacity: 0.02;
  --surface-inset-shadow-color: 36.3475, 10.5525,
    10.5525;
  --surface-focus-color: #FFD6D6;
  font-weight: 500;
}

/* line 38, app/assets/stylesheets/lab/surface_mixins.scss */
.vivid-lab .surface--color-urgent > *,
.vivid-lab .surface--color-off > * {
  --surface-shadow-color: 36.3475, 10.5525, 10.5525;
  --surface-container-outline-color: #FFD6D6;
  --surface-container-input-outline-color: #FFD6D6;
  --surface-container-background-color: #FFD6D6;
  --surface-container-color: #E12D2D;
  --surface-container-shade-color: #FFC2C2;
}

/* line 320, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color-urgent.surface--color-bold,
.vivid-lab .surface--color-off.surface--color-bold {
  --surface-background-color: #E12D2D;
  --surface-color: #FFEBEB;
  --surface-deemphasized-color: #FFD6D6;
  --surface-emphasis-color: #FFFFFF;
  --surface-emphasis-reverse-color: #E12D2D;
  --surface-header-color: #FFFFFF;
  --surface-link-color: #FFEBEB;
  --surface-trim-color: #8d1b1b;
  --surface-outline-color: #8d1b1b;
  --surface-glass-color: #ed6969;
  --surface-shade-color: #9d1a1a;
  --surface-greek-color: #9d1a1a;
  --surface-greek-highlight-color: #FFC2C2;
  --surface-shadow-opacity: 0.1;
  --surface-inset-shadow-color: 19.06875, 7.93125,
    7.93125;
  --surface-focus-color: #8d1b1b;
}

/* line 38, app/assets/stylesheets/lab/surface_mixins.scss */
.vivid-lab .surface--color-urgent.surface--color-bold > *,
.vivid-lab .surface--color-off.surface--color-bold > * {
  --surface-shadow-color: 19.06875, 7.93125, 7.93125;
  --surface-container-outline-color: #8d1b1b;
  --surface-container-input-outline-color: #8d1b1b;
  --surface-container-background-color: #E12D2D;
  --surface-container-color: #FFEBEB;
  --surface-container-shade-color: #9d1a1a;
}

/* line 335, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color-pause-rules,
.vivid-lab .surface--color-error,
.vivid-lab .surface--color-danger,
.vivid-lab .surface--color-red {
  --surface-background-color: #FFD6D6;
  --surface-color: #B21919;
  --surface-deemphasized-color: #d16565;
  --surface-emphasis-color: #B21919;
  --surface-emphasis-reverse-color: #FFD6D6;
  --surface-header-color: #9d1a1a;
  --surface-link-color: #B21919;
  --surface-trim-color: #FFC2C2;
  --surface-outline-color: #FFC2C2;
  --surface-glass-color: #FFEBEB;
  --surface-shade-color: #FFC2C2;
  --surface-greek-color: #FFC2C2;
  --surface-greek-highlight-color: #FFEBEB;
  --surface-shadow-opacity: 0.02;
  --surface-inset-shadow-color: 36.3475, 10.5525,
    10.5525;
  --surface-focus-color: #FFC2C2;
}

/* line 38, app/assets/stylesheets/lab/surface_mixins.scss */
.vivid-lab .surface--color-pause-rules > *,
.vivid-lab .surface--color-error > *,
.vivid-lab .surface--color-danger > *,
.vivid-lab .surface--color-red > * {
  --surface-shadow-color: 36.3475, 10.5525, 10.5525;
  --surface-container-outline-color: #FFC2C2;
  --surface-container-input-outline-color: #FFC2C2;
  --surface-container-background-color: #FFD6D6;
  --surface-container-color: #B21919;
  --surface-container-shade-color: #FFC2C2;
}

/* line 349, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color-pause-rules.surface--color-bold,
.vivid-lab .surface--color-error.surface--color-bold,
.vivid-lab .surface--color-danger.surface--color-bold,
.vivid-lab .surface--color-red.surface--color-bold {
  --surface-background-color: #B21919;
  --surface-color: #FFEBEB;
  --surface-deemphasized-color: #FFC2C2;
  --surface-emphasis-color: #FFFFFF;
  --surface-emphasis-reverse-color: #B21919;
  --surface-header-color: #FFFFFF;
  --surface-link-color: #FFEBEB;
  --surface-trim-color: #6a1414;
  --surface-outline-color: #6a1414;
  --surface-glass-color: #dd1c1c;
  --surface-shade-color: #9d1a1a;
  --surface-greek-color: #9d1a1a;
  --surface-greek-highlight-color: #dd1c1c;
  --surface-shadow-opacity: 0.1;
  --surface-inset-shadow-color: 14.3575, 5.9425,
    5.9425;
  --surface-focus-color: #6a1414;
  font-weight: 500;
}

/* line 38, app/assets/stylesheets/lab/surface_mixins.scss */
.vivid-lab .surface--color-pause-rules.surface--color-bold > *,
.vivid-lab .surface--color-error.surface--color-bold > *,
.vivid-lab .surface--color-danger.surface--color-bold > *,
.vivid-lab .surface--color-red.surface--color-bold > * {
  --surface-shadow-color: 14.3575, 5.9425, 5.9425;
  --surface-container-outline-color: #6a1414;
  --surface-container-input-outline-color: #6a1414;
  --surface-container-background-color: #B21919;
  --surface-container-color: #FFEBEB;
  --surface-container-shade-color: #9d1a1a;
}

/* line 364, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color-free-time-rules,
.vivid-lab .surface--color-mustard {
  --surface-background-color: #FBDBB1;
  --surface-color: #944600;
  --surface-deemphasized-color: #bd8247;
  --surface-emphasis-color: #823f03;
  --surface-emphasis-reverse-color: #FBDBB1;
  --surface-header-color: #823f03;
  --surface-link-color: #944600;
  --surface-trim-color: #e89323;
  --surface-outline-color: #e89323;
  --surface-glass-color: #FFEDD1;
  --surface-shade-color: #F5CD99;
  --surface-greek-color: #F5CD99;
  --surface-greek-highlight-color: #FFEDD1;
  --surface-shadow-opacity: 0.02;
  --surface-inset-shadow-color: 32.0217073171, 22.8353658537,
    10.7782926829;
  --surface-focus-color: #e89323;
}

/* line 38, app/assets/stylesheets/lab/surface_mixins.scss */
.vivid-lab .surface--color-free-time-rules > *,
.vivid-lab .surface--color-mustard > * {
  --surface-shadow-color: 32.0217073171, 22.8353658537, 10.7782926829;
  --surface-container-outline-color: #e89323;
  --surface-container-input-outline-color: #e89323;
  --surface-container-background-color: #FBDBB1;
  --surface-container-color: #944600;
  --surface-container-shade-color: #F5CD99;
}

/* line 374, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color-free-time-rules.surface--color-bold,
.vivid-lab .surface--color-mustard.surface--color-bold {
  --surface-background-color: #D66600;
  --surface-color: #FFEDD1;
  --surface-deemphasized-color: #efb77d;
  --surface-emphasis-color: #FFFFFF;
  --surface-emphasis-reverse-color: #D66600;
  --surface-header-color: #FFFFFF;
  --surface-link-color: #FFEDD1;
  --surface-trim-color: #7f4007;
  --surface-outline-color: #7f4007;
  --surface-glass-color: #ff7b03;
  --surface-shade-color: #af5707;
  --surface-greek-color: #af5707;
  --surface-greek-highlight-color: #ff7b03;
  --surface-shadow-opacity: 0.1;
  --surface-inset-shadow-color: 16.585, 10.425,
    4.815;
  --surface-focus-color: #7f4007;
}

/* line 38, app/assets/stylesheets/lab/surface_mixins.scss */
.vivid-lab .surface--color-free-time-rules.surface--color-bold > *,
.vivid-lab .surface--color-mustard.surface--color-bold > * {
  --surface-shadow-color: 16.585, 10.425, 4.815;
  --surface-container-outline-color: #7f4007;
  --surface-container-input-outline-color: #7f4007;
  --surface-container-background-color: #D66600;
  --surface-container-color: #FFEDD1;
  --surface-container-shade-color: #af5707;
}

/* line 386, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color-school-rules,
.vivid-lab .surface--color-teal,
.vivid-lab .surface--color-trusted,
.vivid-lab .surface--color-info {
  --surface-background-color: #DDFAFA;
  --surface-color: #018284;
  --surface-deemphasized-color: #59b2b3;
  --surface-emphasis-color: #066364;
  --surface-emphasis-reverse-color: #DDFAFA;
  --surface-header-color: #066364;
  --surface-link-color: #018284;
  --surface-trim-color: #adefef;
  --surface-outline-color: #adefef;
  --surface-glass-color: #f1fefe;
  --surface-shade-color: #c1f5f5;
  --surface-greek-color: #c1f5f5;
  --surface-greek-highlight-color: #f1fefe;
  --surface-shadow-opacity: 0.02;
  --surface-inset-shadow-color: 13.9186538462, 33.1813461538,
    33.1813461538;
  --surface-focus-color: #adefef;
}

/* line 38, app/assets/stylesheets/lab/surface_mixins.scss */
.vivid-lab .surface--color-school-rules > *,
.vivid-lab .surface--color-teal > *,
.vivid-lab .surface--color-trusted > *,
.vivid-lab .surface--color-info > * {
  --surface-shadow-color: 13.9186538462, 33.1813461538, 33.1813461538;
  --surface-container-outline-color: #adefef;
  --surface-container-input-outline-color: #adefef;
  --surface-container-background-color: #DDFAFA;
  --surface-container-color: #018284;
  --surface-container-shade-color: #c1f5f5;
}

/* line 399, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color-school-rules.surface--color-bold,
.vivid-lab .surface--color-teal.surface--color-bold,
.vivid-lab .surface--color-trusted.surface--color-bold,
.vivid-lab .surface--color-info.surface--color-bold {
  --surface-background-color: #018284;
  --surface-color: #DDFAFA;
  --surface-deemphasized-color: #85cacb;
  --surface-emphasis-color: #FFFFFF;
  --surface-emphasis-reverse-color: #018284;
  --surface-header-color: #FFFFFF;
  --surface-link-color: #DDFAFA;
  --surface-trim-color: #054d4e;
  --surface-outline-color: #054d4e;
  --surface-glass-color: #01a7a9;
  --surface-shade-color: #056a6c;
  --surface-greek-color: #056a6c;
  --surface-greek-highlight-color: #01a7a9;
  --surface-shadow-opacity: 0.1;
  --surface-inset-shadow-color: 3.0475, 10.1425,
    10.2525;
  --surface-focus-color: #054d4e;
}

/* line 38, app/assets/stylesheets/lab/surface_mixins.scss */
.vivid-lab .surface--color-school-rules.surface--color-bold > *,
.vivid-lab .surface--color-teal.surface--color-bold > *,
.vivid-lab .surface--color-trusted.surface--color-bold > *,
.vivid-lab .surface--color-info.surface--color-bold > * {
  --surface-shadow-color: 3.0475, 10.1425, 10.2525;
  --surface-container-outline-color: #054d4e;
  --surface-container-input-outline-color: #054d4e;
  --surface-container-background-color: #018284;
  --surface-container-color: #DDFAFA;
  --surface-container-shade-color: #056a6c;
}

/* line 409, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color-critical,
.vivid-lab .surface--color-burgundy {
  --surface-background-color: #FFE8F0;
  --surface-color: #C8225F;
  --surface-deemphasized-color: #de7199;
  --surface-emphasis-color: #b02256;
  --surface-emphasis-reverse-color: #FFE8F0;
  --surface-header-color: #b02256;
  --surface-link-color: #C8225F;
  --surface-trim-color: #fbafca;
  --surface-outline-color: #fbafca;
  --surface-glass-color: #fff4f8;
  --surface-shade-color: #fed0e0;
  --surface-greek-color: #fed0e0;
  --surface-greek-highlight-color: #fff4f8;
  --surface-shadow-opacity: 0.02;
  --surface-inset-shadow-color: 37.7425, 10.9575,
    20.2740217391;
  --surface-focus-color: #fbafca;
}

/* line 38, app/assets/stylesheets/lab/surface_mixins.scss */
.vivid-lab .surface--color-critical > *,
.vivid-lab .surface--color-burgundy > * {
  --surface-shadow-color: 37.7425, 10.9575, 20.2740217391;
  --surface-container-outline-color: #fbafca;
  --surface-container-input-outline-color: #fbafca;
  --surface-container-background-color: #FFE8F0;
  --surface-container-color: #C8225F;
  --surface-container-shade-color: #fed0e0;
}

/* line 420, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color-critical.surface--color-bold,
.vivid-lab .surface--color-burgundy.surface--color-bold {
  --surface-background-color: #C8225F;
  --surface-color: #FFE8F0;
  --surface-deemphasized-color: #e999b6;
  --surface-emphasis-color: #FFFFFF;
  --surface-emphasis-reverse-color: #C8225F;
  --surface-header-color: #FFFFFF;
  --surface-link-color: #FFE8F0;
  --surface-trim-color: #781a3d;
  --surface-outline-color: #781a3d;
  --surface-glass-color: #df3473;
  --surface-shade-color: #b02256;
  --surface-greek-color: #b02256;
  --surface-greek-highlight-color: #df3473;
  --surface-shadow-opacity: 0.1;
  --surface-inset-shadow-color: 16.265, 7.135,
    10.49;
  --surface-focus-color: #781a3d;
  font-weight: 500;
}

/* line 38, app/assets/stylesheets/lab/surface_mixins.scss */
.vivid-lab .surface--color-critical.surface--color-bold > *,
.vivid-lab .surface--color-burgundy.surface--color-bold > * {
  --surface-shadow-color: 16.265, 7.135, 10.49;
  --surface-container-outline-color: #781a3d;
  --surface-container-input-outline-color: #781a3d;
  --surface-container-background-color: #C8225F;
  --surface-container-color: #FFE8F0;
  --surface-container-shade-color: #b02256;
}

/* line 434, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color-discover,
.vivid-lab .surface--color-bedtime-rules,
.vivid-lab .surface--color-purple,
.vivid-lab .surface--color-neutral {
  --surface-background-color: #E2DCFF;
  --surface-color: #5C35FD;
  --surface-deemphasized-color: #9278fe;
  --surface-emphasis-color: #390ee6;
  --surface-emphasis-reverse-color: #E2DCFF;
  --surface-header-color: #390ee6;
  --surface-link-color: #5C35FD;
  --surface-trim-color: #b4a5fa;
  --surface-outline-color: #b4a5fa;
  --surface-glass-color: #ebe7ff;
  --surface-shade-color: #cfc5fe;
  --surface-greek-color: #cfc5fe;
  --surface-greek-highlight-color: #ebe7ff;
  --surface-shadow-opacity: 0.02;
  --surface-inset-shadow-color: 15.1660714286, 10.6875,
    36.8125;
  --surface-focus-color: #b4a5fa;
}

/* line 38, app/assets/stylesheets/lab/surface_mixins.scss */
.vivid-lab .surface--color-discover > *,
.vivid-lab .surface--color-bedtime-rules > *,
.vivid-lab .surface--color-purple > *,
.vivid-lab .surface--color-neutral > * {
  --surface-shadow-color: 15.1660714286, 10.6875, 36.8125;
  --surface-container-outline-color: #b4a5fa;
  --surface-container-input-outline-color: #b4a5fa;
  --surface-container-background-color: #E2DCFF;
  --surface-container-color: #5C35FD;
  --surface-container-shade-color: #cfc5fe;
}

/* line 447, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color-discover.surface--color-bold,
.vivid-lab .surface--color-bedtime-rules.surface--color-bold,
.vivid-lab .surface--color-purple.surface--color-bold,
.vivid-lab .surface--color-neutral.surface--color-bold {
  --surface-background-color: #5C35FD;
  --surface-color: #E2DCFF;
  --surface-deemphasized-color: #ac99fe;
  --surface-emphasis-color: #FFFFFF;
  --surface-emphasis-reverse-color: #5C35FD;
  --surface-header-color: #FFFFFF;
  --surface-link-color: #E2DCFF;
  --surface-trim-color: #2c0bb4;
  --surface-outline-color: #2c0bb4;
  --surface-glass-color: #7453fd;
  --surface-shade-color: #3d11f3;
  --surface-greek-color: #3d11f3;
  --surface-greek-highlight-color: #7453fd;
  --surface-shadow-opacity: 0.1;
  --surface-inset-shadow-color: 10.2675, 7.05,
    23.55;
  --surface-focus-color: #2c0bb4;
}

/* line 38, app/assets/stylesheets/lab/surface_mixins.scss */
.vivid-lab .surface--color-discover.surface--color-bold > *,
.vivid-lab .surface--color-bedtime-rules.surface--color-bold > *,
.vivid-lab .surface--color-purple.surface--color-bold > *,
.vivid-lab .surface--color-neutral.surface--color-bold > * {
  --surface-shadow-color: 10.2675, 7.05, 23.55;
  --surface-container-outline-color: #2c0bb4;
  --surface-container-input-outline-color: #2c0bb4;
  --surface-container-background-color: #5C35FD;
  --surface-container-color: #E2DCFF;
  --surface-container-shade-color: #3d11f3;
}

/* line 459, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color-warning,
.vivid-lab .surface--color-connection-setup-rules,
.vivid-lab .surface--color-tip,
.vivid-lab .surface--color-gold {
  --surface-background-color: #FFF3D1;
  --surface-color: #8E6801;
  --surface-deemphasized-color: #bba054;
  --surface-emphasis-color: #6c5106;
  --surface-emphasis-reverse-color: #FFF3D1;
  --surface-header-color: #6c5106;
  --surface-link-color: #8E6801;
  --surface-trim-color: #f8d981;
  --surface-outline-color: #f8d981;
  --surface-glass-color: #fffaed;
  --surface-shade-color: #fde9b0;
  --surface-greek-color: #fde9b0;
  --surface-greek-highlight-color: #fffaed;
  --surface-shadow-opacity: 0.02;
  --surface-inset-shadow-color: 35.96, 29.3026086957,
    10.44;
  --surface-focus-color: #f8d981;
}

/* line 38, app/assets/stylesheets/lab/surface_mixins.scss */
.vivid-lab .surface--color-warning > *,
.vivid-lab .surface--color-connection-setup-rules > *,
.vivid-lab .surface--color-tip > *,
.vivid-lab .surface--color-gold > * {
  --surface-shadow-color: 35.96, 29.3026086957, 10.44;
  --surface-container-outline-color: #f8d981;
  --surface-container-input-outline-color: #f8d981;
  --surface-container-background-color: #FFF3D1;
  --surface-container-color: #8E6801;
  --surface-container-shade-color: #fde9b0;
}

/* line 472, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color-warning.surface--color-bold,
.vivid-lab .surface--color-connection-setup-rules.surface--color-bold,
.vivid-lab .surface--color-tip.surface--color-bold,
.vivid-lab .surface--color-gold.surface--color-bold {
  --surface-background-color: #8E6801;
  --surface-color: #FFF3D1;
  --surface-deemphasized-color: #d2bb7e;
  --surface-emphasis-color: #FFFFFF;
  --surface-emphasis-reverse-color: #8E6801;
  --surface-header-color: #FFFFFF;
  --surface-link-color: #FFF3D1;
  --surface-trim-color: #543f05;
  --surface-outline-color: #543f05;
  --surface-glass-color: #b38301;
  --surface-shade-color: #745605;
  --surface-greek-color: #745605;
  --surface-greek-highlight-color: #b38301;
  --surface-shadow-opacity: 0.1;
  --surface-inset-shadow-color: 11.0275, 8.9375,
    3.2725;
  --surface-focus-color: #543f05;
}

/* line 38, app/assets/stylesheets/lab/surface_mixins.scss */
.vivid-lab .surface--color-warning.surface--color-bold > *,
.vivid-lab .surface--color-connection-setup-rules.surface--color-bold > *,
.vivid-lab .surface--color-tip.surface--color-bold > *,
.vivid-lab .surface--color-gold.surface--color-bold > * {
  --surface-shadow-color: 11.0275, 8.9375, 3.2725;
  --surface-container-outline-color: #543f05;
  --surface-container-input-outline-color: #543f05;
  --surface-container-background-color: #8E6801;
  --surface-container-color: #FFF3D1;
  --surface-container-shade-color: #745605;
}

/* line 482, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color-inverse,
.vivid-lab .surface--color-graphite {
  --surface-background-color: #676B79;
  --surface-color: #FFFFFF;
  --surface-deemphasized-color: #c2c4c9;
  --surface-emphasis-color: #FFFFFF;
  --surface-emphasis-reverse-color: #676B79;
  --surface-header-color: #FFFFFF;
  --surface-link-color: #FFFFFF;
  --surface-trim-color: #a2a2a2;
  --surface-outline-color: #a2a2a2;
  --surface-glass-color: rgba(255, 255, 255, 0.1);
  --surface-shade-color: rgba(10, 10, 10, 0.1);
  --surface-greek-color: rgba(10, 10, 10, 0.1);
  --surface-greek-highlight-color: rgba(255, 255, 255, 0.1);
  --surface-shadow-opacity: 0.1;
  --surface-inset-shadow-color: 10, 10,
    10;
  --surface-focus-color: #a2a2a2;
}

/* line 38, app/assets/stylesheets/lab/surface_mixins.scss */
.vivid-lab .surface--color-inverse > *,
.vivid-lab .surface--color-graphite > * {
  --surface-shadow-color: 10, 10, 10;
  --surface-container-outline-color: #a2a2a2;
  --surface-container-input-outline-color: #a2a2a2;
  --surface-container-background-color: #676B79;
  --surface-container-color: #FFFFFF;
  --surface-container-shade-color: rgba(10, 10, 10, 0.1);
}

/* line 495, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color-inverse.surface--color-bold,
.vivid-lab .surface--color-graphite.surface--color-bold {
  --surface-background-color: #1E1E1E;
  --surface-color: #F4F2F1;
  --surface-deemphasized-color: #9e9d9d;
  --surface-emphasis-color: #FFFFFF;
  --surface-emphasis-reverse-color: #1E1E1E;
  --surface-header-color: #FFFFFF;
  --surface-link-color: #F5CD99;
  --surface-trim-color: #000000;
  --surface-outline-color: #000000;
  --surface-glass-color: #373232;
  --surface-shade-color: #000000;
  --surface-greek-color: #000000;
  --surface-greek-highlight-color: #373232;
  --surface-shadow-opacity: 0.1;
  --surface-inset-shadow-color: 3, 3,
    3;
  --surface-focus-color: #000000;
}

/* line 38, app/assets/stylesheets/lab/surface_mixins.scss */
.vivid-lab .surface--color-inverse.surface--color-bold > *,
.vivid-lab .surface--color-graphite.surface--color-bold > * {
  --surface-shadow-color: 3, 3, 3;
  --surface-container-outline-color: #000000;
  --surface-container-input-outline-color: #000000;
  --surface-container-background-color: #1E1E1E;
  --surface-container-color: #F4F2F1;
  --surface-container-shade-color: #000000;
}

/* line 508, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .subsurface.surface--color.surface--color-reverse,
.vivid-lab .surface.surface--color.surface--color-reverse {
  --surface-background-color: var(--surface-container-color);
  --surface-color: var(--surface-container-background-color);
}

/* line 514, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color-selected,
.vivid-lab .surface--color-selected.surface--color-bold {
  --surface-background-color: #444444;
  --surface-color: #FFFFFF;
  --surface-deemphasized-color: #b4b4b4;
  --surface-emphasis-color: #FFFFFF;
  --surface-emphasis-reverse-color: #444444;
  --surface-header-color: #FFFFFF;
  --surface-link-color: #FFFFFF;
  --surface-trim-color: #a2a2a2;
  --surface-outline-color: #a2a2a2;
  --surface-glass-color: rgba(255, 255, 255, 0.1);
  --surface-shade-color: rgba(10, 10, 10, 0.1);
  --surface-greek-color: rgba(10, 10, 10, 0.1);
  --surface-greek-highlight-color: #D1DFFF;
  --surface-shadow-opacity: 0.1;
  --surface-inset-shadow-color: 10, 10,
    10;
  --surface-focus-color: #a2a2a2;
}

/* line 38, app/assets/stylesheets/lab/surface_mixins.scss */
.vivid-lab .surface--color-selected > *,
.vivid-lab .surface--color-selected.surface--color-bold > * {
  --surface-shadow-color: 10, 10, 10;
  --surface-container-outline-color: #a2a2a2;
  --surface-container-input-outline-color: #a2a2a2;
  --surface-container-background-color: #444444;
  --surface-container-color: #FFFFFF;
  --surface-container-shade-color: rgba(10, 10, 10, 0.1);
}

/* line 529, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color.surface--color-glass {
  --surface-background-color: var(--surface-glass-color);
  color: inherit;
}

/* line 534, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color.surface--color-shade {
  --surface-background-color: var(--surface-shade-color);
  color: inherit;
}

/* line 540, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color.surface--color-frosted {
  background: rgba(var(--surface-background-color), 0.5);
  backdrop-filter: blur(1.6rem);
  -webkit-backdrop-filter: blur(1.6rem);
}

@media (prefers-reduced-transparency) {
  /* line 540, app/assets/stylesheets/lab/surface.scss */
  .vivid-lab .surface--color.surface--color-frosted {
    background: var(--surface-background-color);
  }
}

/* line 544, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color.surface--color-container {
  --surface-background-color: var(
      --surface-container-background-color,
      rgba(201, 201, 201, 0.2)
    );
  color: inherit;
}

/* line 553, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color-trim {
  background-color: var(--surface-trim-color);
  color: var(--surface-trim-text-color);
  border-color: transparent;
}

/* line 559, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color-radial {
  background-size: cover;
  background-position: 50% 50%;
  background-image: radial-gradient(circle 200vw at 50% 30%, var(--surface-background-color), var(--surface-trim-color));
}

/* line 570, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color-radial-tight {
  background-size: cover;
  background-position: 50% 50%;
  background-image: radial-gradient(circle 70vw at 50% 30%, var(--surface-background-color), var(--surface-trim-color));
}

/* line 581, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface.surface--elevation-bold {
  --surface-shadow-opacity: 0.1;
}

/* line 585, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--bleed {
  margin-left: calc(var(--container-gutter) * -1);
  margin-right: calc(var(--container-gutter) * -1);
  padding-left: var(--container-gutter);
  padding-right: var(--container-gutter);
}

/* line 592, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--bleed-hard {
  margin-left: calc(var(--container-gutter) * -1);
  margin-right: calc(var(--container-gutter) * -1);
}

/* line 598, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color-inherit {
  background-color: inherit;
  border-color: inherit;
  color: inherit;
}

/* line 604, app/assets/stylesheets/lab/surface.scss */
.vivid-lab .surface--color-none {
  background-color: initial;
  border-color: initial;
  color: initial;
}

@media (min-width: 768px) {
  /* line 598, app/assets/stylesheets/lab/surface.scss */
  .vivid-lab .surface--color-inherit-sm {
    background-color: inherit;
    border-color: inherit;
    color: inherit;
  }
  /* line 604, app/assets/stylesheets/lab/surface.scss */
  .vivid-lab .surface--color-none-sm {
    background-color: initial;
    border-color: initial;
    color: initial;
  }
}

@media (min-width: 992px) {
  /* line 598, app/assets/stylesheets/lab/surface.scss */
  .vivid-lab .surface--color-inherit-md {
    background-color: inherit;
    border-color: inherit;
    color: inherit;
  }
  /* line 604, app/assets/stylesheets/lab/surface.scss */
  .vivid-lab .surface--color-none-md {
    background-color: initial;
    border-color: initial;
    color: initial;
  }
}

@media (min-width: 1200px) {
  /* line 598, app/assets/stylesheets/lab/surface.scss */
  .vivid-lab .surface--color-inherit-lg {
    background-color: inherit;
    border-color: inherit;
    color: inherit;
  }
  /* line 604, app/assets/stylesheets/lab/surface.scss */
  .vivid-lab .surface--color-none-lg {
    background-color: initial;
    border-color: initial;
    color: initial;
  }
}

/* line 19, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button_to {
  display: inline;
  position: relative;
  cursor: pointer;
}

/* line 25, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button_to button:not(.button) {
  padding: 0;
  padding-block: 0;
  padding-inline: 0;
  border: 0;
  text-align: unset;
  font: inherit;
  background: unset;
  cursor: pointer;
}

/* line 35, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button_to button.disabled:not(.button), .vivid-lab .button_to button[disabled]:not(.button), .vivid-lab .button_to button[inactive]:not(.button), .vivid-lab .button_to button[busy]:not(.button), fieldset[disabled] .vivid-lab .button_to button:not(.button), form[aria-busy] .vivid-lab .button_to button:not(.button) {
  cursor: not-allowed;
  opacity: 0.4;
}

/* line 46, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button_to.button_to--composite {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

/* line 51, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button_to.button_to--composite button {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  cursor: pointer;
  color: inherit;
}

/* line 58, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button_to.button_to--composite button > .card,
.vivid-lab .button_to.button_to--composite button > .rich-header {
  width: 100%;
}

/* line 65, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button_to.button_to--anchor {
  display: inline;
}

/* line 68, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button_to.button_to--anchor button {
  display: inline;
}

/* line 73, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button {
  --border-radius: calc(var(--natural-button-height, 5.6rem) / 2);
  appearance: none;
  margin: 0;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: none;
  text-wrap: wrap;
  text-wrap: pretty;
  letter-spacing: initial;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
  font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 600;
  letter-spacing: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  width: fit-content;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--border-radius);
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-x pan-y;
  transition: opacity 0.125s ease-in-out, outline 0.125s ease-in-out, background-color 0.125s ease-in-out, filter 0.125s ease-in-out;
  filter: none;
  outline-offset: 0.2rem;
  outline: 0.2rem solid transparent;
}

/* line 115, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button.disabled, .vivid-lab .button[disabled], .vivid-lab .button[inactive], .vivid-lab .button[busy], .vivid-lab .button.button--state-disabled, fieldset[disabled] .vivid-lab .button, form[aria-busy] .vivid-lab .button {
  cursor: not-allowed;
  opacity: 0.4;
}

/* line 126, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button.button--shape-circle {
  padding: 0;
  text-align: center;
  justify-content: center;
  min-width: 0;
}

/* line 133, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button > h1,
.vivid-lab .button > h2,
.vivid-lab .button > h3,
.vivid-lab .button > h4 {
  margin-bottom: 0;
}

/* line 139, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button > h1:not(:first-child),
.vivid-lab .button > h2:not(:first-child),
.vivid-lab .button > h3:not(:first-child),
.vivid-lab .button > h4:not(:first-child) {
  margin-left: 0.8rem;
}

/* line 143, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button > h1:not(:last-child),
.vivid-lab .button > h2:not(:last-child),
.vivid-lab .button > h3:not(:last-child),
.vivid-lab .button > h4:not(:last-child) {
  margin-right: 0.8rem;
}

/* line 147, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button > h1.text--wrap-none,
.vivid-lab .button > h2.text--wrap-none,
.vivid-lab .button > h3.text--wrap-none,
.vivid-lab .button > h4.text--wrap-none {
  line-height: normal;
}

/* line 153, app/assets/stylesheets/lab/button.scss */
.vivid-lab a.button,
.vivid-lab button.button,
.vivid-lab input.button {
  cursor: pointer;
  -webkit-touch-callout: none;
}

/* line 158, app/assets/stylesheets/lab/button.scss */
.vivid-lab a.button svg,
.vivid-lab button.button svg,
.vivid-lab input.button svg {
  pointer-events: none;
}

@media (hover: hover) {
  /* line 163, app/assets/stylesheets/lab/button.scss */
  .vivid-lab a.button:hover, .vivid-lab a.button.button--state-hover,
.vivid-lab button.button:hover,
.vivid-lab button.button.button--state-hover,
.vivid-lab input.button:hover,
.vivid-lab input.button.button--state-hover {
    filter: brightness(98%) saturate(105%);
  }
}

/* line 169, app/assets/stylesheets/lab/button.scss */
.vivid-lab a.button:focus-visible, .vivid-lab a.button.button--state-focus,
.vivid-lab button.button:focus-visible,
.vivid-lab button.button.button--state-focus,
.vivid-lab input.button:focus-visible,
.vivid-lab input.button.button--state-focus {
  outline-offset: 0.2rem;
}

/* line 173, app/assets/stylesheets/lab/button.scss */
.vivid-lab a.button:focus-visible:not(:disabled):not([disabled]), .vivid-lab a.button.button--state-focus:not(:disabled):not([disabled]),
.vivid-lab button.button:focus-visible:not(:disabled):not([disabled]),
.vivid-lab button.button.button--state-focus:not(:disabled):not([disabled]),
.vivid-lab input.button:focus-visible:not(:disabled):not([disabled]),
.vivid-lab input.button.button--state-focus:not(:disabled):not([disabled]) {
  outline: 0.2rem solid var(--link-color);
  isolation: isolate;
}

/* line 181, app/assets/stylesheets/lab/button.scss */
.vivid-lab a.button:active:not(:disabled):not([disabled]), .vivid-lab a.button.button--state-active:not(:disabled):not([disabled]),
.vivid-lab button.button:active:not(:disabled):not([disabled]),
.vivid-lab button.button.button--state-active:not(:disabled):not([disabled]),
.vivid-lab input.button:active:not(:disabled):not([disabled]),
.vivid-lab input.button.button--state-active:not(:disabled):not([disabled]) {
  filter: brightness(95%) saturate(115%);
}

@media (hover: none) {
  /* line 153, app/assets/stylesheets/lab/button.scss */
  .vivid-lab a.button,
.vivid-lab button.button,
.vivid-lab input.button {
    -webkit-tap-highlight-color: var(--surface-shade);
  }
}

/* line 193, app/assets/stylesheets/lab/button.scss */
.vivid-lab a.button.surface--color-bold,
.vivid-lab button.button.surface--color-bold,
.vivid-lab input.button.surface--color-bold {
  font-weight: 600;
}

/* line 198, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button--size-large {
  --contained-adornment-size: 2.4rem;
  --button-height: calc(7.2rem - var(--surface-border-width, 0rem) * 2);
  --natural-button-height: 7.2rem;
  min-height: 7.2rem;
  padding: calc((var(--button-height) - 2.8rem) / 2) 2.8rem;
  line-height: 2.8rem;
  font-size: 2rem;
}

/* line 207, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button--size-default {
  --contained-adornment-size: 2rem;
  --button-height: calc(5.6rem - var(--surface-border-width, 0rem) * 2);
  --natural-button-height: 5.6rem;
  min-height: 5.6rem;
  padding: calc((var(--button-height) - 2.4rem) / 2) 2.4rem;
  line-height: 2.4rem;
  font-size: 1.6rem;
}

/* line 212, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button--size-medium {
  --contained-adornment-size: 2rem;
  --button-height: calc(4rem - var(--surface-border-width, 0rem) * 2);
  --natural-button-height: 4rem;
  min-height: 4rem;
  padding: calc((var(--button-height) - 2rem) / 2) 2rem;
  line-height: 2rem;
  font-size: 1.4rem;
}

/* line 222, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button--size-small {
  --contained-adornment-size: 1.6rem;
  --button-height: calc(3.2rem - var(--surface-border-width, 0rem) * 2);
  --natural-button-height: 3.2rem;
  min-height: 3.2rem;
  padding: calc((var(--button-height) - 1.6rem) / 2) 1.6rem;
  line-height: 1.6rem;
  font-size: 1.2rem;
}

/* line 232, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button--size-xsmall {
  --contained-adornment-size: 1.6rem;
  min-width: 6ch;
  --button-height: calc(2.4rem - var(--surface-border-width, 0rem) * 2);
  --natural-button-height: 2.4rem;
  min-height: 2.4rem;
  padding: calc((var(--button-height) - 1.6rem) / 2) 1.2rem;
  line-height: 1.6rem;
  font-size: 1.2rem;
}

/* line 244, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button--shape-composite {
  --border-radius: 0.8rem;
  background-color: transparent;
  padding: 0;
  overflow: visible;
  display: flex;
  flex: 1 1 auto;
  text-align: unset;
  font-weight: initial;
  min-height: 0;
  color: inherit;
  text-decoration: none;
  align-items: stretch;
  width: 100%;
  hyphens: initial;
}

/* line 261, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button--shape-composite:has(> .card--size-default) {
  border-radius: 2rem;
}

/* line 265, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button--shape-composite:has(> .card--size-medium) {
  border-radius: 1.2rem;
}

/* line 269, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button--shape-composite:has(> .card--size-small) {
  border-radius: 1.2rem;
}

/* line 273, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button--shape-composite.button--state-selected {
  box-shadow: none;
}

/* line 276, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button--shape-composite.button--state-selected > div {
  outline: none;
  box-shadow: 0 0 0 0.2rem var(--surface-container-background-color), 0 0 0 0.4rem #444444;
}

/* line 285, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button--wrap-none {
  text-wrap: nowrap;
}

/* line 289, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button--wrap-none:not(:has(*)) {
  display: block;
}

/* line 293, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button--wrap-none > .adorn > .adorn__body {
  text-wrap: nowrap;
  overflow: hidden;
}

/* line 298, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button--wrap-none > span {
  overflow: hidden;
  text-wrap: nowrap;
  text-overflow: ellipsis;
}

/* line 305, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button--wrap-allow,
.vivid-lab .button--wrap {
  min-width: min-content;
}

/* line 309, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button--wrap-allow > .adorn,
.vivid-lab .button--wrap > .adorn {
  text-align: inherit;
}

/* line 312, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button--wrap-allow > .adorn > .adorn__body,
.vivid-lab .button--wrap > .adorn > .adorn__body {
  text-align: inherit;
}

/* line 318, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button--padding-none {
  padding: 0;
}

/* line 322, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button--display-flex,
.vivid-lab .button--display-block {
  display: block;
  width: 100%;
  width: -webkit-fill-available;
  flex: 1 1 auto;
  justify-content: center;
}

/* line 333, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button--display-flex {
  display: flex;
}

/* line 337, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button--flex-column {
  flex-direction: column;
}

/* line 341, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button--flex-fill {
  flex: 1;
}

/* line 345, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button:has(.avatar):not(.button--shape-composite),
.vivid-lab .button:has(.avatar-stack):not(.button--shape-composite) {
  padding-top: 0;
  padding-bottom: 0;
  overflow: visible;
}

/* line 351, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button:has(.avatar):not(.button--shape-composite) .avatar,
.vivid-lab .button:has(.avatar-stack):not(.button--shape-composite) .avatar {
  --avatar-size: var(--button-height);
}

/* line 356, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button.surface--outlined:has(> .avatar),
.vivid-lab .button.surface--outlined:has(> .avatar-stack) {
  --avatar-size: calc(var(--button-height) - var(--surface-border-width) * 2);
}

/* line 361, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button:has(.adorn--layout-left:first-child .adorn__adornment):not(.button--shape-composite) {
  padding-left: calc(var(--button-height) / 3);
}

/* line 365, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button:has(.adorn--layout-right:first-child .adorn__adornment):not(.button--shape-composite) {
  padding-right: calc(var(--button-height) / 3);
}

/* line 369, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button:has(.adorn--layout-above:first-child):not(.button--shape-composite) {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.3333333333;
  align-items: center;
}

/* line 376, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button.button.button.button--has-leading-avatar:has(.avatar),
.vivid-lab .button:has(> .avatar:first-child):not(.button--shape-composite),
.vivid-lab .button:has(> .avatar-stack:first-child):not(.button--shape-composite) {
  padding-left: 0;
}

/* line 382, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button.button--has-trailing-avatar,
.vivid-lab .button:has(> .avatar:last-child):not(.button--shape-composite),
.vivid-lab .button:has(> .avatar-stack:last-child):not(.button--shape-composite) {
  padding-right: 0;
}

/* line 388, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button .avatar-stack {
  max-width: 100%;
  overflow-x: clip;
  overflow-y: visible;
  border-radius: var(--border-radius);
}

/* line 395, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button:not(.button--shape-circle):has(> .icon:last-child) {
  padding-right: calc(var(--button-height) / 4);
}

/* line 399, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button--shape-circle {
  --border-radius: 50%;
  width: var(--natural-button-height);
  height: var(--natural-button-height);
}

/* line 406, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button_to--anchor button,
.vivid-lab .button--anchor,
.vivid-lab .button--shape-anchor,
.vivid-lab .button--shape-link {
  --contained-adornment-size: 1em;
  padding: 0 !important;
  min-height: 0;
  background-color: transparent;
  color: inherit;
  cursor: pointer;
}

/* line 419, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button--shape-anchor {
  text-decoration: underline;
  border-radius: 0;
  display: inline;
}

/* line 425, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button--shape-menu-item {
  --border-radius: 0;
  text-align: inherit;
  padding-left: var(--container-gutter-horizontal, 1.2rem);
  padding-right: var(--container-gutter-horizontal, 1.2rem);
  margin-left: calc( var(--container-gutter-horizontal, 1.2rem) * -1);
  margin-right: calc( var(--container-gutter-horizontal, 1.2rem) * -1);
  max-width: none;
  width: calc( 100% + var(--container-gutter-horizontal, 1.2rem) * 2);
  display: block;
}

/* line 443, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button_to--anchor button,
.vivid-lab .button--anchor {
  color: var(--link-color);
  text-decoration: underline;
  font: inherit;
  line-height: inherit;
}

/* line 451, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button--cozy {
  padding-left: calc(var(--natural-button-height) / 4);
  padding-right: calc(var(--natural-button-height) / 4);
}

/* line 456, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button:has(.button__ornament) {
  position: relative;
  overflow: visible;
}

/* line 461, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button__ornament {
  position: absolute;
  top: calc( ((var(--natural-button-height) / 2) - (var(--control-height, 0px)) / 2) - ((var(--natural-button-height) / 2) * 0.70710678));
  right: calc( ((var(--natural-button-height) / 2) - (var(--control-width, 0px)) / 2) - ((var(--natural-button-height) / 2) * 0.70710678));
}

/* line 475, app/assets/stylesheets/lab/button.scss */
.vivid-lab .surface .button.surface--color-deemphasized {
  color: var(--surface-header-color);
  background-color: transparent;
  border-color: var(--surface-container-outline-color);
}

/* line 481, app/assets/stylesheets/lab/button.scss */
.vivid-lab .button.surface--color.skeleton {
  background: transparent;
}

/* line 486, app/assets/stylesheets/lab/button.scss */
#amazon-pay-button {
  justify-content: center;
  height: 60px;
}

/* line 491, app/assets/stylesheets/lab/button.scss */
#payment-request-button:empty {
  display: none;
}

/* line 2, app/assets/stylesheets/lab/button-set.scss */
.vivid-lab .button-set {
  max-width: 100%;
}

/* line 6, app/assets/stylesheets/lab/button-set.scss */
.vivid-lab .button-set--stacked,
.vivid-lab .button-set--stacked-panel,
.vivid-lab .button-set--stacked-compact {
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
}

/* line 13, app/assets/stylesheets/lab/button-set.scss */
.vivid-lab .button-set--stacked .button-set__buttons,
.vivid-lab .button-set--stacked-panel .button-set__buttons,
.vivid-lab .button-set--stacked-compact .button-set__buttons {
  display: flex;
  flex-direction: column;
  flex: 0 1 0;
  gap: 0.8rem;
  align-items: center;
  justify-content: center;
}

/* line 21, app/assets/stylesheets/lab/button-set.scss */
.vivid-lab .button-set--stacked .button-set__buttons .button,
.vivid-lab .button-set--stacked .button-set__buttons .button_to,
.vivid-lab .button-set--stacked-panel .button-set__buttons .button,
.vivid-lab .button-set--stacked-panel .button-set__buttons .button_to,
.vivid-lab .button-set--stacked-compact .button-set__buttons .button,
.vivid-lab .button-set--stacked-compact .button-set__buttons .button_to {
  width: 33.6rem;
}

/* line 29, app/assets/stylesheets/lab/button-set.scss */
.vivid-lab .button-set--stacked-compact {
  margin-right: 0;
}

/* line 31, app/assets/stylesheets/lab/button-set.scss */
.vivid-lab .button-set--stacked-compact .button-set__buttons {
  flex-direction: row-reverse;
  flex-wrap: wrap;
}

/* line 35, app/assets/stylesheets/lab/button-set.scss */
.vivid-lab .button-set--stacked-compact .button-set__buttons .button,
.vivid-lab .button-set--stacked-compact .button-set__buttons .button_to {
  width: auto;
  flex: 1 1 auto;
  min-width: 10ch;
}

/* line 43, app/assets/stylesheets/lab/button-set.scss */
.vivid-lab .button-set--stacked-compact .button-set__buttons form.button_to {
  width: auto;
}

/* line 47, app/assets/stylesheets/lab/button-set.scss */
.vivid-lab .button-set--stacked-compact .button-set__buttons .button_to .button {
  width: 100%;
}

/* line 52, app/assets/stylesheets/lab/button-set.scss */
.vivid-lab .button-set--stacked-compact.button-set--align-left {
  margin-left: 0;
  margin-right: auto;
}

/* line 56, app/assets/stylesheets/lab/button-set.scss */
.vivid-lab .button-set--stacked-compact.button-set--align-left .button-set__buttons {
  flex-direction: row;
}

/* line 62, app/assets/stylesheets/lab/button-set.scss */
.vivid-lab .button-set--banner {
  display: flex;
  justify-content: center;
}

/* line 66, app/assets/stylesheets/lab/button-set.scss */
.vivid-lab .button-set--banner .button-set__buttons {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  max-width: 100%;
  gap: 0.8rem;
  align-items: center;
  justify-content: center;
}

/* line 75, app/assets/stylesheets/lab/button-set.scss */
.vivid-lab .button-set--banner .button-set__buttons .button,
.vivid-lab .button-set--banner .button-set__buttons .button_to {
  max-width: 30ch;
}

/* line 84, app/assets/stylesheets/lab/button-set.scss */
.vivid-lab .button-set .button-set__buttons form.button_to {
  flex: 1 1 auto;
  width: auto;
  max-width: 100%;
}

/* line 91, app/assets/stylesheets/lab/button-set.scss */
.vivid-lab .button-set--inline {
  max-width: max-content;
}

/* line 94, app/assets/stylesheets/lab/button-set.scss */
.vivid-lab .button-set--inline .button-set__buttons {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  max-width: 100%;
  gap: 0.8rem;
}

/* line 101, app/assets/stylesheets/lab/button-set.scss */
.vivid-lab .button-set--inline .button-set__buttons .button,
.vivid-lab .button-set--inline .button-set__buttons form.button_to {
  display: block;
}

/* line 106, app/assets/stylesheets/lab/button-set.scss */
.vivid-lab .button-set--inline .button-set__buttons .button,
.vivid-lab .button-set--inline .button-set__buttons form.button_to .button {
  max-width: calc(min(100%, 30ch));
}

/* line 2, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card {
  flex: auto;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  position: relative;
  text-align: unset;
  border-radius: var(--card-border-radius);
  page-break-inside: avoid;
}

/* line 3, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card > div {
  --container-gutter: var(--card-horizontal-padding);
  --container-gutter-horizontal: var(--card-horizontal-padding);
  --container-gutter-vertical: var(--card-vertical-padding);
  --container-border-radius: var(--card-border-radius);
}

/* line 20, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card[href] {
  cursor: pointer;
}

/* line 28, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card > .subsurface:empty,
.vivid-lab .card__collapsible-container > .subsurface:empty {
  display: none;
}

/* line 32, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card > .subsurface:not(.surface--color) + :not(.surface--color),
.vivid-lab .card__collapsible-container > .subsurface:not(.surface--color) + :not(.surface--color) {
  padding-top: 0;
}

/* line 39, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card > .subsurface,
.vivid-lab .card > .card__collapsible-container > .subsurface,
.vivid-lab .card__collapsible-container > .subsurface,
.vivid-lab .card__collapsible-container > .card__collapsible-container > .subsurface {
  padding: var(--card-vertical-padding) var(--card-horizontal-padding);
  scroll-padding: var(--card-vertical-padding) var(--card-horizontal-padding);
}

/* line 46, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card__body {
  flex: 1 1 auto;
}

@media (prefers-reduced-motion: no-preference) {
  /* line 46, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card__body {
    scroll-behavior: smooth;
  }
}

/* line 54, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card__media {
  flex: 0 0 auto;
  transform: scale(1);
}

/* line 60, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card__media--size-cover {
  align-self: stretch;
  display: flex;
  flex: 1 1 auto;
}

/* line 65, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card__media--size-cover .card__media__content {
  display: flex;
  flex: 1 1 auto;
}

/* line 71, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card > .subsurface.card__media {
  padding: 0;
  overflow: hidden;
  overflow: clip;
}

/* line 77, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card__header,
.vivid-lab .card__ribbon,
.vivid-lab .card__footer {
  flex: 0 0 auto;
}

/* line 83, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card__header--banner {
  text-align: center;
  align-items: center;
}

/* line 88, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card .card__dismiss {
  padding-bottom: 0;
}

/* line 91, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card .card__dismiss > .card__dismiss__content {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.8rem;
  align-items: center;
  justify-content: flex-end;
}

/* line 100, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card .card__dismiss.card__dismiss--layout-overlay {
  background: transparent;
  width: 100%;
  position: absolute;
}

/* line 107, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card__edge.card__edge.subsurface {
  height: 2.4rem;
  flex: 0 0 2.4rem;
  order: 100;
  padding-top: 0;
}

/* line 113, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card__edge.card__edge.subsurface:empty {
  display: block;
}

/* line 118, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card > .card__surface.subsurface {
  padding: 0;
}

/* line 122, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card > .card__subsurface--gutters-none,
.vivid-lab .card > .card--size-medium .card__subsurface--gutters-none {
  padding-left: 0;
  padding-right: 0;
}

/* line 127, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card > .card__subsurface--gutters-none:last-child,
.vivid-lab .card > .card--size-medium .card__subsurface--gutters-none:last-child {
  padding-bottom: 0;
}

/* line 132, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card.surface--outlined-container,
.vivid-lab .card.surface--outlined,
.vivid-lab .card.surface--trimmed {
  border-width: 0.1rem;
  border-style: solid;
}

/* line 138, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card.surface--outlined-container > .subsurface,
.vivid-lab .card.surface--outlined > .subsurface,
.vivid-lab .card.surface--trimmed > .subsurface {
  border-radius: 0;
}

/* line 143, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card--overflow-visible {
  overflow: visible;
}

/* line 147, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card--overflow-scroll {
  overflow: auto;
}

/* line 151, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card--with-scrim {
  position: relative;
}

/* line 155, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card--align-middle > .card__subsurface {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* line 161, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card--display-inline {
  display: inline-flex;
}

/* line 165, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card__controls {
  position: absolute;
  right: var(--card-horizontal-padding, 1.6rem);
  top: var(--card-vertical-padding, 1.6rem);
}

/* line 171, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card.skeleton:empty {
  min-height: 3lh;
}

/* line 173, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card.skeleton:empty:after {
  top: 0;
  bottom: 0;
}

/* line 180, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card--size-large {
  --card-border-radius: 2.4rem;
  --card-vertical-padding: 2.4rem;
  --card-horizontal-padding: 2.4rem;
}

/* line 186, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card--size-default {
  --card-border-radius: 2rem;
  --card-vertical-padding: 1.6rem;
  --card-horizontal-padding: 1.6rem;
}

/* line 192, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card--size-medium {
  --card-border-radius: 1.2rem;
  --card-vertical-padding: 1.2rem;
  --card-horizontal-padding: 1.2rem;
}

/* line 198, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card--size-small {
  --card-border-radius: 1.2rem;
  --card-vertical-padding: 0.8rem;
  --card-horizontal-padding: 1rem;
}

/* line 204, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card--size-xsmall {
  --card-border-radius: 1rem;
  --card-vertical-padding: 0.4rem;
  --card-horizontal-padding: 0.8rem;
}

/* line 212, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card.card--layout-vertical,
.vivid-lab .card--layout-vertical.card__collapsible-container {
  flex-direction: column;
  align-items: initial;
}

/* line 216, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card.card--layout-vertical > .subsurface,
.vivid-lab .card.card--layout-vertical > .card__media,
.vivid-lab .card--layout-vertical.card__collapsible-container > .subsurface,
.vivid-lab .card--layout-vertical.card__collapsible-container > .card__media {
  border-radius: 0;
}

/* line 224, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card.card--layout-vertical.card--overflow-visible > .subsurface:first-child,
.vivid-lab .card.card--layout-vertical.card--overflow-visible > .card__media:first-child,
.vivid-lab .card--layout-vertical.card__collapsible-container.card--overflow-visible > .subsurface:first-child,
.vivid-lab .card--layout-vertical.card__collapsible-container.card--overflow-visible > .card__media:first-child {
  border-top-left-radius: var(--card-border-radius, 2rem);
  border-top-right-radius: var(--card-border-radius, 2rem);
}

/* line 229, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card.card--layout-vertical.card--overflow-visible > .subsurface:last-child,
.vivid-lab .card.card--layout-vertical.card--overflow-visible > .card__media:last-child,
.vivid-lab .card--layout-vertical.card__collapsible-container.card--overflow-visible > .subsurface:last-child,
.vivid-lab .card--layout-vertical.card__collapsible-container.card--overflow-visible > .card__media:last-child {
  border-bottom-left-radius: var(--card-border-radius, 2rem);
  border-bottom-right-radius: var(--card-border-radius, 2rem);
}

/* line 237, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card.card--layout-vertical-reverse,
.vivid-lab .card--layout-vertical-reverse.card__collapsible-container {
  flex-direction: column-reverse;
  align-items: initial;
}

/* line 241, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card.card--layout-vertical-reverse > .subsurface,
.vivid-lab .card.card--layout-vertical-reverse > .card__media,
.vivid-lab .card--layout-vertical-reverse.card__collapsible-container > .subsurface,
.vivid-lab .card--layout-vertical-reverse.card__collapsible-container > .card__media {
  border-radius: 0;
}

/* line 249, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card.card--layout-vertical-reverse.card--overflow-visible > .subsurface:last-child,
.vivid-lab .card.card--layout-vertical-reverse.card--overflow-visible > .card__media:last-child,
.vivid-lab .card--layout-vertical-reverse.card__collapsible-container.card--overflow-visible > .subsurface:last-child,
.vivid-lab .card--layout-vertical-reverse.card__collapsible-container.card--overflow-visible > .card__media:last-child {
  border-top-left-radius: var(--card-border-radius, 2rem);
  border-top-right-radius: var(--card-border-radius, 2rem);
}

/* line 254, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card.card--layout-vertical-reverse.card--overflow-visible > .subsurface:first-child,
.vivid-lab .card.card--layout-vertical-reverse.card--overflow-visible > .card__media:first-child,
.vivid-lab .card--layout-vertical-reverse.card__collapsible-container.card--overflow-visible > .subsurface:first-child,
.vivid-lab .card--layout-vertical-reverse.card__collapsible-container.card--overflow-visible > .card__media:first-child {
  border-bottom-left-radius: var(--card-border-radius, 2rem);
  border-bottom-right-radius: var(--card-border-radius, 2rem);
}

/* line 262, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card.card--layout-horizontal,
.vivid-lab .card--layout-horizontal.card__collapsible-container {
  flex-direction: row;
  align-items: stretch;
}

/* line 269, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card.card--layout-horizontal.card--overflow-visible > .subsurface:first-child,
.vivid-lab .card.card--layout-horizontal.card--overflow-visible > .card__media:first-child,
.vivid-lab .card--layout-horizontal.card__collapsible-container.card--overflow-visible > .subsurface:first-child,
.vivid-lab .card--layout-horizontal.card__collapsible-container.card--overflow-visible > .card__media:first-child {
  border-top-left-radius: var(--card-border-radius, 2rem);
  border-bottom-left-radius: var(--card-border-radius, 2rem);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* line 276, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card.card--layout-horizontal.card--overflow-visible > .subsurface:last-child,
.vivid-lab .card.card--layout-horizontal.card--overflow-visible > .card__media:last-child,
.vivid-lab .card--layout-horizontal.card__collapsible-container.card--overflow-visible > .subsurface:last-child,
.vivid-lab .card--layout-horizontal.card__collapsible-container.card--overflow-visible > .card__media:last-child {
  border-top-right-radius: var(--card-border-radius, 2rem);
  border-bottom-right-radius: var(--card-border-radius, 2rem);
}

/* line 282, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card.card--layout-horizontal.card--overflow-visible > .card__media.card__media--size-cover,
.vivid-lab .card--layout-horizontal.card__collapsible-container.card--overflow-visible > .card__media.card__media--size-cover {
  width: 50%;
  flex: 1 0 auto;
}

/* line 289, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card.card--layout-horizontal-reverse,
.vivid-lab .card--layout-horizontal-reverse.card__collapsible-container {
  flex-direction: row-reverse;
  align-items: stretch;
}

/* line 296, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card.card--layout-horizontal-reverse.card--overflow-visible > .subsurface:first-child,
.vivid-lab .card.card--layout-horizontal-reverse.card--overflow-visible > .card__media:first-child,
.vivid-lab .card--layout-horizontal-reverse.card__collapsible-container.card--overflow-visible > .subsurface:first-child,
.vivid-lab .card--layout-horizontal-reverse.card__collapsible-container.card--overflow-visible > .card__media:first-child {
  border-top-right-radius: var(--card-border-radius, 2rem);
  border-bottom-right-radius: var(--card-border-radius, 2rem);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* line 309, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card.card--layout-horizontal-reverse.card--overflow-visible > .card__media.card__media--size-cover,
.vivid-lab .card--layout-horizontal-reverse.card__collapsible-container.card--overflow-visible > .card__media.card__media--size-cover {
  width: 50%;
  flex: 1 0 auto;
}

@media (min-width: 768px) {
  /* line 180, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card--size-large-sm {
    --card-border-radius: 2.4rem;
    --card-vertical-padding: 2.4rem;
    --card-horizontal-padding: 2.4rem;
  }
  /* line 186, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card--size-default-sm {
    --card-border-radius: 2rem;
    --card-vertical-padding: 1.6rem;
    --card-horizontal-padding: 1.6rem;
  }
  /* line 192, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card--size-medium-sm {
    --card-border-radius: 1.2rem;
    --card-vertical-padding: 1.2rem;
    --card-horizontal-padding: 1.2rem;
  }
  /* line 198, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card--size-small-sm {
    --card-border-radius: 1.2rem;
    --card-vertical-padding: 0.8rem;
    --card-horizontal-padding: 1rem;
  }
  /* line 204, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card--size-xsmall-sm {
    --card-border-radius: 1rem;
    --card-vertical-padding: 0.4rem;
    --card-horizontal-padding: 0.8rem;
  }
  /* line 212, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-vertical-sm,
.vivid-lab .card--layout-vertical-sm.card__collapsible-container {
    flex-direction: column;
    align-items: initial;
  }
  /* line 216, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-vertical-sm > .subsurface,
.vivid-lab .card.card--layout-vertical-sm > .card__media,
.vivid-lab .card--layout-vertical-sm.card__collapsible-container > .subsurface,
.vivid-lab .card--layout-vertical-sm.card__collapsible-container > .card__media {
    border-radius: 0;
  }
  /* line 224, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-vertical-sm.card--overflow-visible > .subsurface:first-child,
.vivid-lab .card.card--layout-vertical-sm.card--overflow-visible > .card__media:first-child,
.vivid-lab .card--layout-vertical-sm.card__collapsible-container.card--overflow-visible > .subsurface:first-child,
.vivid-lab .card--layout-vertical-sm.card__collapsible-container.card--overflow-visible > .card__media:first-child {
    border-top-left-radius: var(--card-border-radius, 2rem);
    border-top-right-radius: var(--card-border-radius, 2rem);
  }
  /* line 229, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-vertical-sm.card--overflow-visible > .subsurface:last-child,
.vivid-lab .card.card--layout-vertical-sm.card--overflow-visible > .card__media:last-child,
.vivid-lab .card--layout-vertical-sm.card__collapsible-container.card--overflow-visible > .subsurface:last-child,
.vivid-lab .card--layout-vertical-sm.card__collapsible-container.card--overflow-visible > .card__media:last-child {
    border-bottom-left-radius: var(--card-border-radius, 2rem);
    border-bottom-right-radius: var(--card-border-radius, 2rem);
  }
  /* line 237, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-vertical-reverse-sm,
.vivid-lab .card--layout-vertical-reverse-sm.card__collapsible-container {
    flex-direction: column-reverse;
    align-items: initial;
  }
  /* line 241, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-vertical-reverse-sm > .subsurface,
.vivid-lab .card.card--layout-vertical-reverse-sm > .card__media,
.vivid-lab .card--layout-vertical-reverse-sm.card__collapsible-container > .subsurface,
.vivid-lab .card--layout-vertical-reverse-sm.card__collapsible-container > .card__media {
    border-radius: 0;
  }
  /* line 249, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-vertical-reverse-sm.card--overflow-visible > .subsurface:last-child,
.vivid-lab .card.card--layout-vertical-reverse-sm.card--overflow-visible > .card__media:last-child,
.vivid-lab .card--layout-vertical-reverse-sm.card__collapsible-container.card--overflow-visible > .subsurface:last-child,
.vivid-lab .card--layout-vertical-reverse-sm.card__collapsible-container.card--overflow-visible > .card__media:last-child {
    border-top-left-radius: var(--card-border-radius, 2rem);
    border-top-right-radius: var(--card-border-radius, 2rem);
  }
  /* line 254, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-vertical-reverse-sm.card--overflow-visible > .subsurface:first-child,
.vivid-lab .card.card--layout-vertical-reverse-sm.card--overflow-visible > .card__media:first-child,
.vivid-lab .card--layout-vertical-reverse-sm.card__collapsible-container.card--overflow-visible > .subsurface:first-child,
.vivid-lab .card--layout-vertical-reverse-sm.card__collapsible-container.card--overflow-visible > .card__media:first-child {
    border-bottom-left-radius: var(--card-border-radius, 2rem);
    border-bottom-right-radius: var(--card-border-radius, 2rem);
  }
  /* line 262, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-horizontal-sm,
.vivid-lab .card--layout-horizontal-sm.card__collapsible-container {
    flex-direction: row;
    align-items: stretch;
  }
  /* line 269, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-horizontal-sm.card--overflow-visible > .subsurface:first-child,
.vivid-lab .card.card--layout-horizontal-sm.card--overflow-visible > .card__media:first-child,
.vivid-lab .card--layout-horizontal-sm.card__collapsible-container.card--overflow-visible > .subsurface:first-child,
.vivid-lab .card--layout-horizontal-sm.card__collapsible-container.card--overflow-visible > .card__media:first-child {
    border-top-left-radius: var(--card-border-radius, 2rem);
    border-bottom-left-radius: var(--card-border-radius, 2rem);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  /* line 276, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-horizontal-sm.card--overflow-visible > .subsurface:last-child,
.vivid-lab .card.card--layout-horizontal-sm.card--overflow-visible > .card__media:last-child,
.vivid-lab .card--layout-horizontal-sm.card__collapsible-container.card--overflow-visible > .subsurface:last-child,
.vivid-lab .card--layout-horizontal-sm.card__collapsible-container.card--overflow-visible > .card__media:last-child {
    border-top-right-radius: var(--card-border-radius, 2rem);
    border-bottom-right-radius: var(--card-border-radius, 2rem);
  }
  /* line 282, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-horizontal-sm.card--overflow-visible > .card__media.card__media--size-cover,
.vivid-lab .card--layout-horizontal-sm.card__collapsible-container.card--overflow-visible > .card__media.card__media--size-cover {
    width: 50%;
    flex: 1 0 auto;
  }
  /* line 289, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-horizontal-reverse-sm,
.vivid-lab .card--layout-horizontal-reverse-sm.card__collapsible-container {
    flex-direction: row-reverse;
    align-items: stretch;
  }
  /* line 296, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-horizontal-reverse-sm.card--overflow-visible > .subsurface:first-child,
.vivid-lab .card.card--layout-horizontal-reverse-sm.card--overflow-visible > .card__media:first-child,
.vivid-lab .card--layout-horizontal-reverse-sm.card__collapsible-container.card--overflow-visible > .subsurface:first-child,
.vivid-lab .card--layout-horizontal-reverse-sm.card__collapsible-container.card--overflow-visible > .card__media:first-child {
    border-top-right-radius: var(--card-border-radius, 2rem);
    border-bottom-right-radius: var(--card-border-radius, 2rem);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  /* line 309, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-horizontal-reverse-sm.card--overflow-visible > .card__media.card__media--size-cover,
.vivid-lab .card--layout-horizontal-reverse-sm.card__collapsible-container.card--overflow-visible > .card__media.card__media--size-cover {
    width: 50%;
    flex: 1 0 auto;
  }
}

@media (min-width: 992px) {
  /* line 180, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card--size-large-md {
    --card-border-radius: 2.4rem;
    --card-vertical-padding: 2.4rem;
    --card-horizontal-padding: 2.4rem;
  }
  /* line 186, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card--size-default-md {
    --card-border-radius: 2rem;
    --card-vertical-padding: 1.6rem;
    --card-horizontal-padding: 1.6rem;
  }
  /* line 192, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card--size-medium-md {
    --card-border-radius: 1.2rem;
    --card-vertical-padding: 1.2rem;
    --card-horizontal-padding: 1.2rem;
  }
  /* line 198, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card--size-small-md {
    --card-border-radius: 1.2rem;
    --card-vertical-padding: 0.8rem;
    --card-horizontal-padding: 1rem;
  }
  /* line 204, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card--size-xsmall-md {
    --card-border-radius: 1rem;
    --card-vertical-padding: 0.4rem;
    --card-horizontal-padding: 0.8rem;
  }
  /* line 212, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-vertical-md,
.vivid-lab .card--layout-vertical-md.card__collapsible-container {
    flex-direction: column;
    align-items: initial;
  }
  /* line 216, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-vertical-md > .subsurface,
.vivid-lab .card.card--layout-vertical-md > .card__media,
.vivid-lab .card--layout-vertical-md.card__collapsible-container > .subsurface,
.vivid-lab .card--layout-vertical-md.card__collapsible-container > .card__media {
    border-radius: 0;
  }
  /* line 224, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-vertical-md.card--overflow-visible > .subsurface:first-child,
.vivid-lab .card.card--layout-vertical-md.card--overflow-visible > .card__media:first-child,
.vivid-lab .card--layout-vertical-md.card__collapsible-container.card--overflow-visible > .subsurface:first-child,
.vivid-lab .card--layout-vertical-md.card__collapsible-container.card--overflow-visible > .card__media:first-child {
    border-top-left-radius: var(--card-border-radius, 2rem);
    border-top-right-radius: var(--card-border-radius, 2rem);
  }
  /* line 229, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-vertical-md.card--overflow-visible > .subsurface:last-child,
.vivid-lab .card.card--layout-vertical-md.card--overflow-visible > .card__media:last-child,
.vivid-lab .card--layout-vertical-md.card__collapsible-container.card--overflow-visible > .subsurface:last-child,
.vivid-lab .card--layout-vertical-md.card__collapsible-container.card--overflow-visible > .card__media:last-child {
    border-bottom-left-radius: var(--card-border-radius, 2rem);
    border-bottom-right-radius: var(--card-border-radius, 2rem);
  }
  /* line 237, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-vertical-reverse-md,
.vivid-lab .card--layout-vertical-reverse-md.card__collapsible-container {
    flex-direction: column-reverse;
    align-items: initial;
  }
  /* line 241, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-vertical-reverse-md > .subsurface,
.vivid-lab .card.card--layout-vertical-reverse-md > .card__media,
.vivid-lab .card--layout-vertical-reverse-md.card__collapsible-container > .subsurface,
.vivid-lab .card--layout-vertical-reverse-md.card__collapsible-container > .card__media {
    border-radius: 0;
  }
  /* line 249, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-vertical-reverse-md.card--overflow-visible > .subsurface:last-child,
.vivid-lab .card.card--layout-vertical-reverse-md.card--overflow-visible > .card__media:last-child,
.vivid-lab .card--layout-vertical-reverse-md.card__collapsible-container.card--overflow-visible > .subsurface:last-child,
.vivid-lab .card--layout-vertical-reverse-md.card__collapsible-container.card--overflow-visible > .card__media:last-child {
    border-top-left-radius: var(--card-border-radius, 2rem);
    border-top-right-radius: var(--card-border-radius, 2rem);
  }
  /* line 254, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-vertical-reverse-md.card--overflow-visible > .subsurface:first-child,
.vivid-lab .card.card--layout-vertical-reverse-md.card--overflow-visible > .card__media:first-child,
.vivid-lab .card--layout-vertical-reverse-md.card__collapsible-container.card--overflow-visible > .subsurface:first-child,
.vivid-lab .card--layout-vertical-reverse-md.card__collapsible-container.card--overflow-visible > .card__media:first-child {
    border-bottom-left-radius: var(--card-border-radius, 2rem);
    border-bottom-right-radius: var(--card-border-radius, 2rem);
  }
  /* line 262, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-horizontal-md,
.vivid-lab .card--layout-horizontal-md.card__collapsible-container {
    flex-direction: row;
    align-items: stretch;
  }
  /* line 269, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-horizontal-md.card--overflow-visible > .subsurface:first-child,
.vivid-lab .card.card--layout-horizontal-md.card--overflow-visible > .card__media:first-child,
.vivid-lab .card--layout-horizontal-md.card__collapsible-container.card--overflow-visible > .subsurface:first-child,
.vivid-lab .card--layout-horizontal-md.card__collapsible-container.card--overflow-visible > .card__media:first-child {
    border-top-left-radius: var(--card-border-radius, 2rem);
    border-bottom-left-radius: var(--card-border-radius, 2rem);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  /* line 276, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-horizontal-md.card--overflow-visible > .subsurface:last-child,
.vivid-lab .card.card--layout-horizontal-md.card--overflow-visible > .card__media:last-child,
.vivid-lab .card--layout-horizontal-md.card__collapsible-container.card--overflow-visible > .subsurface:last-child,
.vivid-lab .card--layout-horizontal-md.card__collapsible-container.card--overflow-visible > .card__media:last-child {
    border-top-right-radius: var(--card-border-radius, 2rem);
    border-bottom-right-radius: var(--card-border-radius, 2rem);
  }
  /* line 282, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-horizontal-md.card--overflow-visible > .card__media.card__media--size-cover,
.vivid-lab .card--layout-horizontal-md.card__collapsible-container.card--overflow-visible > .card__media.card__media--size-cover {
    width: 50%;
    flex: 1 0 auto;
  }
  /* line 289, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-horizontal-reverse-md,
.vivid-lab .card--layout-horizontal-reverse-md.card__collapsible-container {
    flex-direction: row-reverse;
    align-items: stretch;
  }
  /* line 296, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-horizontal-reverse-md.card--overflow-visible > .subsurface:first-child,
.vivid-lab .card.card--layout-horizontal-reverse-md.card--overflow-visible > .card__media:first-child,
.vivid-lab .card--layout-horizontal-reverse-md.card__collapsible-container.card--overflow-visible > .subsurface:first-child,
.vivid-lab .card--layout-horizontal-reverse-md.card__collapsible-container.card--overflow-visible > .card__media:first-child {
    border-top-right-radius: var(--card-border-radius, 2rem);
    border-bottom-right-radius: var(--card-border-radius, 2rem);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  /* line 309, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-horizontal-reverse-md.card--overflow-visible > .card__media.card__media--size-cover,
.vivid-lab .card--layout-horizontal-reverse-md.card__collapsible-container.card--overflow-visible > .card__media.card__media--size-cover {
    width: 50%;
    flex: 1 0 auto;
  }
}

@media (min-width: 1200px) {
  /* line 180, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card--size-large-lg {
    --card-border-radius: 2.4rem;
    --card-vertical-padding: 2.4rem;
    --card-horizontal-padding: 2.4rem;
  }
  /* line 186, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card--size-default-lg {
    --card-border-radius: 2rem;
    --card-vertical-padding: 1.6rem;
    --card-horizontal-padding: 1.6rem;
  }
  /* line 192, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card--size-medium-lg {
    --card-border-radius: 1.2rem;
    --card-vertical-padding: 1.2rem;
    --card-horizontal-padding: 1.2rem;
  }
  /* line 198, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card--size-small-lg {
    --card-border-radius: 1.2rem;
    --card-vertical-padding: 0.8rem;
    --card-horizontal-padding: 1rem;
  }
  /* line 204, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card--size-xsmall-lg {
    --card-border-radius: 1rem;
    --card-vertical-padding: 0.4rem;
    --card-horizontal-padding: 0.8rem;
  }
  /* line 212, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-vertical-lg,
.vivid-lab .card--layout-vertical-lg.card__collapsible-container {
    flex-direction: column;
    align-items: initial;
  }
  /* line 216, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-vertical-lg > .subsurface,
.vivid-lab .card.card--layout-vertical-lg > .card__media,
.vivid-lab .card--layout-vertical-lg.card__collapsible-container > .subsurface,
.vivid-lab .card--layout-vertical-lg.card__collapsible-container > .card__media {
    border-radius: 0;
  }
  /* line 224, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-vertical-lg.card--overflow-visible > .subsurface:first-child,
.vivid-lab .card.card--layout-vertical-lg.card--overflow-visible > .card__media:first-child,
.vivid-lab .card--layout-vertical-lg.card__collapsible-container.card--overflow-visible > .subsurface:first-child,
.vivid-lab .card--layout-vertical-lg.card__collapsible-container.card--overflow-visible > .card__media:first-child {
    border-top-left-radius: var(--card-border-radius, 2rem);
    border-top-right-radius: var(--card-border-radius, 2rem);
  }
  /* line 229, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-vertical-lg.card--overflow-visible > .subsurface:last-child,
.vivid-lab .card.card--layout-vertical-lg.card--overflow-visible > .card__media:last-child,
.vivid-lab .card--layout-vertical-lg.card__collapsible-container.card--overflow-visible > .subsurface:last-child,
.vivid-lab .card--layout-vertical-lg.card__collapsible-container.card--overflow-visible > .card__media:last-child {
    border-bottom-left-radius: var(--card-border-radius, 2rem);
    border-bottom-right-radius: var(--card-border-radius, 2rem);
  }
  /* line 237, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-vertical-reverse-lg,
.vivid-lab .card--layout-vertical-reverse-lg.card__collapsible-container {
    flex-direction: column-reverse;
    align-items: initial;
  }
  /* line 241, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-vertical-reverse-lg > .subsurface,
.vivid-lab .card.card--layout-vertical-reverse-lg > .card__media,
.vivid-lab .card--layout-vertical-reverse-lg.card__collapsible-container > .subsurface,
.vivid-lab .card--layout-vertical-reverse-lg.card__collapsible-container > .card__media {
    border-radius: 0;
  }
  /* line 249, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-vertical-reverse-lg.card--overflow-visible > .subsurface:last-child,
.vivid-lab .card.card--layout-vertical-reverse-lg.card--overflow-visible > .card__media:last-child,
.vivid-lab .card--layout-vertical-reverse-lg.card__collapsible-container.card--overflow-visible > .subsurface:last-child,
.vivid-lab .card--layout-vertical-reverse-lg.card__collapsible-container.card--overflow-visible > .card__media:last-child {
    border-top-left-radius: var(--card-border-radius, 2rem);
    border-top-right-radius: var(--card-border-radius, 2rem);
  }
  /* line 254, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-vertical-reverse-lg.card--overflow-visible > .subsurface:first-child,
.vivid-lab .card.card--layout-vertical-reverse-lg.card--overflow-visible > .card__media:first-child,
.vivid-lab .card--layout-vertical-reverse-lg.card__collapsible-container.card--overflow-visible > .subsurface:first-child,
.vivid-lab .card--layout-vertical-reverse-lg.card__collapsible-container.card--overflow-visible > .card__media:first-child {
    border-bottom-left-radius: var(--card-border-radius, 2rem);
    border-bottom-right-radius: var(--card-border-radius, 2rem);
  }
  /* line 262, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-horizontal-lg,
.vivid-lab .card--layout-horizontal-lg.card__collapsible-container {
    flex-direction: row;
    align-items: stretch;
  }
  /* line 269, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-horizontal-lg.card--overflow-visible > .subsurface:first-child,
.vivid-lab .card.card--layout-horizontal-lg.card--overflow-visible > .card__media:first-child,
.vivid-lab .card--layout-horizontal-lg.card__collapsible-container.card--overflow-visible > .subsurface:first-child,
.vivid-lab .card--layout-horizontal-lg.card__collapsible-container.card--overflow-visible > .card__media:first-child {
    border-top-left-radius: var(--card-border-radius, 2rem);
    border-bottom-left-radius: var(--card-border-radius, 2rem);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  /* line 276, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-horizontal-lg.card--overflow-visible > .subsurface:last-child,
.vivid-lab .card.card--layout-horizontal-lg.card--overflow-visible > .card__media:last-child,
.vivid-lab .card--layout-horizontal-lg.card__collapsible-container.card--overflow-visible > .subsurface:last-child,
.vivid-lab .card--layout-horizontal-lg.card__collapsible-container.card--overflow-visible > .card__media:last-child {
    border-top-right-radius: var(--card-border-radius, 2rem);
    border-bottom-right-radius: var(--card-border-radius, 2rem);
  }
  /* line 282, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-horizontal-lg.card--overflow-visible > .card__media.card__media--size-cover,
.vivid-lab .card--layout-horizontal-lg.card__collapsible-container.card--overflow-visible > .card__media.card__media--size-cover {
    width: 50%;
    flex: 1 0 auto;
  }
  /* line 289, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-horizontal-reverse-lg,
.vivid-lab .card--layout-horizontal-reverse-lg.card__collapsible-container {
    flex-direction: row-reverse;
    align-items: stretch;
  }
  /* line 296, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-horizontal-reverse-lg.card--overflow-visible > .subsurface:first-child,
.vivid-lab .card.card--layout-horizontal-reverse-lg.card--overflow-visible > .card__media:first-child,
.vivid-lab .card--layout-horizontal-reverse-lg.card__collapsible-container.card--overflow-visible > .subsurface:first-child,
.vivid-lab .card--layout-horizontal-reverse-lg.card__collapsible-container.card--overflow-visible > .card__media:first-child {
    border-top-right-radius: var(--card-border-radius, 2rem);
    border-bottom-right-radius: var(--card-border-radius, 2rem);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  /* line 309, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.card--layout-horizontal-reverse-lg.card--overflow-visible > .card__media.card__media--size-cover,
.vivid-lab .card--layout-horizontal-reverse-lg.card__collapsible-container.card--overflow-visible > .card__media.card__media--size-cover {
    width: 50%;
    flex: 1 0 auto;
  }
}

/* line 332, app/assets/stylesheets/lab/card.scss */
.vivid-lab .card.surface--bleed {
  --card-border-radius: 0px;
}

@media print {
  /* line 339, app/assets/stylesheets/lab/card.scss */
  .vivid-lab .card.surface--color[class*="surface--elevation-"] {
    box-shadow: none;
    border: solid 0.1rem;
  }
}

/* line 12, app/assets/stylesheets/lab/icon.scss */
.vivid-lab .icon {
  display: flex;
  height: 1em;
  width: 1em;
  height: 1lh;
  width: 1lh;
  height: var(--icon-size, 1lh);
  width: var(--icon-size, 1lh);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* line 28, app/assets/stylesheets/lab/icon.scss */
.vivid-lab .icon > svg {
  shape-rendering: geometricPrecision;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* line 36, app/assets/stylesheets/lab/icon.scss */
.vivid-lab .icon--display-block {
  display: flex;
}

/* line 40, app/assets/stylesheets/lab/icon.scss */
.vivid-lab .icon--display-inline {
  display: inline-flex;
}

/* line 44, app/assets/stylesheets/lab/icon.scss */
.vivid-lab .icon--size-xxlarge {
  --icon-size: 8rem;
}

/* line 48, app/assets/stylesheets/lab/icon.scss */
.vivid-lab .icon--size-xlarge {
  --icon-size: 6.4rem;
}

/* line 52, app/assets/stylesheets/lab/icon.scss */
.vivid-lab .icon--size-large {
  --icon-size: 5.6rem;
}

/* line 56, app/assets/stylesheets/lab/icon.scss */
.vivid-lab .icon--size-medium {
  --icon-size: 4.8rem;
}

/* line 60, app/assets/stylesheets/lab/icon.scss */
.vivid-lab .icon--size-small {
  --icon-size: 4rem;
}

/* line 64, app/assets/stylesheets/lab/icon.scss */
.vivid-lab .icon--size-petite {
  --icon-size: 3.2rem;
}

/* line 68, app/assets/stylesheets/lab/icon.scss */
.vivid-lab .icon--size-inline {
  --icon-size: 2.4rem;
}

/* line 72, app/assets/stylesheets/lab/icon.scss */
.vivid-lab .icon--size-tool {
  --icon-size: 2rem;
}

/* line 76, app/assets/stylesheets/lab/icon.scss */
.vivid-lab .icon--size-tiny {
  --icon-size: 1.6rem;
}

/* line 80, app/assets/stylesheets/lab/icon.scss */
.vivid-lab .icon--size-teeny {
  --icon-size: 1.2rem;
}

/* line 84, app/assets/stylesheets/lab/icon.scss */
.vivid-lab .icon--size-indicator {
  --icon-size: 0.6rem;
}

/* line 89, app/assets/stylesheets/lab/icon.scss */
.vivid-lab .icon--size-contained {
  --icon-size: var(--contained-adornment-size);
}

/* line 94, app/assets/stylesheets/lab/icon.scss */
.vivid-lab .icon--size-text {
  --icon-size: 1em;
}

/* line 98, app/assets/stylesheets/lab/icon.scss */
.vivid-lab .icon--transform-spin,
.vivid-lab .icon--sax-spinner {
  animation: icon-spin 1s linear infinite;
}

/* line 103, app/assets/stylesheets/lab/icon.scss */
.vivid-lab .icon--transform-rotate-180,
.vivid-lab .icon--sax-collapse {
  transition: transform ease-in-out 0.125s;
  transform: rotate(-180deg);
  transform-origin: 50% 50%;
}

/* line 109, app/assets/stylesheets/lab/icon.scss */
.vivid-lab .icon--sax-recommend_play > svg {
  overflow: visible;
}

/* line 112, app/assets/stylesheets/lab/icon.scss */
.vivid-lab .icon--sax-recommend_play > svg > g > path {
  animation: icon-ping-pong 0.65s linear alternate infinite;
}

/* line 116, app/assets/stylesheets/lab/icon.scss */
.vivid-lab .icon--sax-recommend_play > svg > g > path:nth-child(0) {
  animation-direction: alternate-reverse;
}

/* line 120, app/assets/stylesheets/lab/icon.scss */
.vivid-lab .icon--sax-recommend_play > svg > g > path:nth-child(1) {
  animation-duration: 0.75s;
}

/* line 124, app/assets/stylesheets/lab/icon.scss */
.vivid-lab .icon--sax-recommend_play > svg > g > path:nth-child(2) {
  animation-duration: 0.5s;
}

/* line 128, app/assets/stylesheets/lab/icon.scss */
.vivid-lab .icon--sax-recommend_play > svg > g > path:nth-child(3) {
  animation-duration: 0.7s;
}

/* line 135, app/assets/stylesheets/lab/icon.scss */
.vivid-lab .icon--sax-none svg {
  width: 100%;
  height: 100%;
  display: none;
}

/* line 142, app/assets/stylesheets/lab/icon.scss */
.vivid-lab .collapse--collapsed .icon--sax-collapse {
  transform: none;
}

/* line 147, app/assets/stylesheets/lab/icon.scss */
.vivid-lab span.icon.icon--sax.skeleton:after {
  top: 0;
  bottom: 0;
}

@keyframes icon-spin {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes icon-ping-pong {
  0% {
    transform: translateX(8%);
  }
  100% {
    transform: translateX(-8%);
  }
}

/* line 2, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar {
  --avatar-size: 4rem;
  --avatar-border-width: 0px;
  position: relative;
  border-radius: calc(var(--avatar-size) / 2);
  width: var(--avatar-size);
  height: var(--avatar-size);
  display: flex;
  flex-direction: column;
  vertical-align: initial;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--avatar-size);
  transition: background-color 0.125s ease-in-out, opacity 0.25s ease-in-out;
}

/* line 5, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar > * {
  --contained-adornment-size: 1.6rem;
}

/* line 24, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar img {
  vertical-align: initial;
  border-radius: inherit;
  border: none;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: cover;
  transition: background-color 0.125s ease-in-out, opacity 0.25s ease-in-out;
}

/* line 38, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar img::before {
  content: "";
  width: 100%;
  height: calc(100%);
  background-color: var(--surface-glass-color);
  border-radius: inherit;
  position: absolute;
  left: 0;
  top: 0;
  transition: background-color 0.125s ease-in-out;
}

/* line 52, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar.subsurface.surface--outlined {
  border-width: var(--avatar-border-width);
}

/* line 56, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar.skeleton {
  background-color: var(--surface-container-background-color);
}

/* line 61, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar.avatar--initials > svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* line 69, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar.avatar--fun {
  overflow: visible;
}

/* line 72, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar.avatar--fun > svg {
  width: 100%;
  height: 100%;
  transform: scale(1.165);
  transform-origin: bottom;
}

/* line 84, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar.avatar--illustration {
  overflow: visible;
}

/* line 87, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar.avatar--illustration img {
  transform: scale(1.25);
  transform-origin: bottom;
}

/* line 93, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar.avatar--location {
  overflow: hidden;
}

/* line 95, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar.avatar--location img {
  width: calc(var(--avatar-size) + 2.8rem);
  max-width: none;
}

/* line 101, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar.avatar--provider:not(.skeleton) {
  color: var(--surface-color);
  background-color: var(--surface-glass-color);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* line 109, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar.avatar--provider:not(.skeleton) > svg {
  object-fit: cover;
  border-radius: inherit;
}

/* line 115, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar.avatar--mobile-app, .vivid-lab .avatar.avatar--app {
  background-color: var(--surface-glass-color);
}

/* line 120, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar.avatar--mobile-app {
  border-radius: 35%;
}

/* line 124, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar.avatar--disabled {
  filter: saturate(0);
}

/* line 129, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar:not(.skeleton):has(.broken-image),
.vivid-lab .avatar:not(.skeleton):has(.broken-image) img:before {
  background-color: #E0EAFF;
}

/* line 135, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar img.broken-image {
  width: var(--contained-adornment-size);
  height: var(--contained-adornment-size);
  mix-blend-mode: overlay;
  opacity: 0;
}

/* line 142, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar img.broken-image--swapped {
  opacity: 0.8;
  transition: background-color 0.25s ease-in-out, opacity 0.25s ease-in;
}

/* line 150, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar__ornament,
.vivid-lab .avatar__badge {
  display: flex;
  min-width: 0;
  position: absolute;
  align-items: center;
  justify-content: flex-start;
}

/* line 160, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar__ornament > .button_to, .vivid-lab .avatar__ornament > .button_to button,
.vivid-lab .avatar__badge > .button_to,
.vivid-lab .avatar__badge > .button_to button {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
}

/* line 171, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar__ornament > .chip.chip,
.vivid-lab .avatar__ornament > .avatar.avatar,
.vivid-lab .avatar__badge > .chip.chip,
.vivid-lab .avatar__badge > .avatar.avatar {
  margin: 0;
}

/* line 177, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar__ornament {
  border-radius: var(--contained-adornment-size);
  top: calc( ( var(--avatar-size) / 2 + ( ((var(--avatar-size) - var(--avatar-border-width)) / 2) * 0.70710678 ) - var(--contained-adornment-size) / 2 - var(--avatar-border-width) ));
  left: calc( ( var(--avatar-size) / 2 + ( ((var(--avatar-size) - var(--avatar-border-width)) / 2) * 0.70710678 ) - var(--contained-adornment-size) / 2 - var(--avatar-border-width) ));
  width: var(--contained-adornment-size);
  height: var(--contained-adornment-size);
}

/* line 195, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar__badge:has(.button--size-xsmall) {
  --contained-adornment-size: ${$control-height-xsmall};
}

/* line 200, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar__badge--position-below-right {
  top: calc( ( var(--avatar-size) / 2 + ( ((var(--avatar-size) - var(--avatar-border-width)) / 2) * 0.70710678 ) - var(--contained-adornment-size) / 2 - var(--avatar-border-width) ));
  left: calc( ( var(--avatar-size) / 2 + ( ((var(--avatar-size) - var(--avatar-border-width)) / 2) * 0.70710678 ) - var(--contained-adornment-size) / 2 - var(--avatar-border-width) ));
}

/* line 213, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar__badge--position-above-right {
  bottom: calc( ( var(--avatar-size) / 2 + ( ((var(--avatar-size) - var(--avatar-border-width)) / 2) * 0.70710678 ) - var(--contained-adornment-size) / 2 - var(--avatar-border-width) ));
  left: calc( ( var(--avatar-size) / 2 + ( ((var(--avatar-size) - var(--avatar-border-width)) / 2) * 0.70710678 ) - var(--contained-adornment-size) / 2 - var(--avatar-border-width) ));
}

/* line 226, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar__badge--position-below-left {
  top: calc( ( var(--avatar-size) / 2 + ( ((var(--avatar-size) - var(--avatar-border-width)) / 2) * 0.70710678 ) - var(--contained-adornment-size) / 2 - var(--avatar-border-width) ));
  right: calc( ( var(--avatar-size) / 2 + ( ((var(--avatar-size) - var(--avatar-border-width)) / 2) * 0.70710678 ) - var(--contained-adornment-size) / 2 - var(--avatar-border-width) ));
}

/* line 239, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar__badge--position-above-left {
  bottom: calc( ( var(--avatar-size) / 2 + ( ((var(--avatar-size) - var(--avatar-border-width)) / 2) * 0.70710678 ) - var(--contained-adornment-size) / 2 - var(--avatar-border-width) ));
  right: calc( ( var(--avatar-size) / 2 + ( ((var(--avatar-size) - var(--avatar-border-width)) / 2) * 0.70710678 ) - var(--contained-adornment-size) / 2 - var(--avatar-border-width) ));
}

/* line 252, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar__trend,
.vivid-lab .avatar__stat {
  line-height: 1;
}

/* line 258, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar__trend > .icon {
  position: absolute;
  margin-left: calc(var(--contained-adornment-size) / -2);
}

/* line 264, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-xxlarge {
  --avatar-size: 8rem;
}

/* line 266, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-xxlarge > * {
  --contained-adornment-size: 3.2rem;
}

/* line 270, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-xxlarge.surface--outlined {
  --avatar-border-width: 0.4rem;
}

/* line 273, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-xxlarge > .avatar__badge,
.vivid-lab .avatar--size-xxlarge > .avatar__ornament {
  --contained-adornment-size: 4rem;
}

/* line 278, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-xxlarge > .avatar__stat {
  font-size: 2.4rem;
}

/* line 282, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-xxlarge > .avatar__trend {
  --contained-adornment-size: 1.6rem;
}

/* line 287, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-xlarge {
  --avatar-size: 6.4rem;
}

/* line 289, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-xlarge > * {
  --contained-adornment-size: 2.4rem;
}

/* line 293, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-xlarge.surface--outlined {
  --avatar-border-width: 0.4rem;
}

/* line 296, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-xlarge > .avatar__badge,
.vivid-lab .avatar--size-xlarge > .avatar__ornament {
  --contained-adornment-size: 3.2rem;
}

/* line 300, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-xlarge > .avatar__stat {
  font-size: 2rem;
}

/* line 304, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-xlarge > .avatar__trend {
  --contained-adornment-size: 1.6rem;
}

/* line 309, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-large {
  --avatar-size: 5.6rem;
}

/* line 311, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-large > * {
  --contained-adornment-size: 2rem;
}

/* line 315, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-large.surface--outlined {
  --avatar-border-width: 0.4rem;
}

/* line 318, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-large > .avatar__badge,
.vivid-lab .avatar--size-large > .avatar__ornament {
  --contained-adornment-size: 2.4rem;
}

/* line 322, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-large > .avatar__stat {
  font-size: 1.4rem;
}

/* line 326, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-large > .avatar__trend {
  --contained-adornment-size: 1.2rem;
}

/* line 331, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-medium {
  --avatar-size: 4.8rem;
}

/* line 333, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-medium > * {
  --contained-adornment-size: 2rem;
}

/* line 337, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-medium.surface--outlined {
  --avatar-border-width: 0.4rem;
}

/* line 340, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-medium > .avatar__badge,
.vivid-lab .avatar--size-medium > .avatar__ornament {
  --contained-adornment-size: 2rem;
}

/* line 344, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-medium > .avatar__stat {
  font-size: 1.2rem;
}

/* line 348, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-medium > .avatar__trend {
  --contained-adornment-size: 1.2rem;
}

/* line 353, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-small {
  --avatar-size: 4rem;
}

/* line 355, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-small > * {
  --contained-adornment-size: 1.6rem;
}

/* line 359, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-small.surface--outlined {
  --avatar-border-width: 0.2rem;
}

/* line 362, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-small > .avatar__badge,
.vivid-lab .avatar--size-small > .avatar__ornament {
  --contained-adornment-size: 2rem;
}

/* line 367, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-small > .avatar__stat {
  font-size: 1rem;
}

/* line 371, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-small > .avatar__trend {
  --contained-adornment-size: 0.8rem;
}

/* line 376, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-petite {
  --avatar-size: 3.2rem;
}

/* line 378, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-petite > * {
  --contained-adornment-size: 1.6rem;
}

/* line 382, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-petite.surface--outlined {
  --avatar-border-width: 0.2rem;
}

/* line 385, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-petite > .avatar__badge,
.vivid-lab .avatar--size-petite > .avatar__ornament {
  --contained-adornment-size: 1.6rem;
}

/* line 389, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-petite > .avatar__stat {
  font-size: 1rem;
}

/* line 393, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-petite > .avatar__trend {
  --contained-adornment-size: 0.6rem;
}

/* line 398, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-inline {
  --avatar-size: 2.4rem;
}

/* line 400, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-inline > * {
  --contained-adornment-size: 1.6rem;
}

/* line 404, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-inline.surface--outlined {
  --avatar-border-width: 0.2rem;
}

/* line 407, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-inline > .avatar__badge,
.vivid-lab .avatar--size-inline > .avatar__ornament {
  --contained-adornment-size: 1.2rem;
}

/* line 411, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-inline > .avatar__stat {
  font-size: 1rem;
}

/* line 415, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-inline > .avatar__trend {
  --contained-adornment-size: 0.6rem;
}

/* line 420, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-tool {
  --avatar-size: 2rem;
}

/* line 422, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-tool > * {
  --contained-adornment-size: 1.2rem;
}

/* line 426, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-tool.surface--outlined {
  --avatar-border-width: 0.2rem;
}

/* line 429, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-tool > .avatar__badge,
.vivid-lab .avatar--size-tool > .avatar__ornament {
  --contained-adornment-size: 1.2rem;
}

/* line 433, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-tool > .avatar__stat {
  font-size: 1rem;
}

/* line 437, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-tool > .avatar__trend {
  --contained-adornment-size: 0.6rem;
}

/* line 442, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-tiny {
  --avatar-size: 1.6rem;
}

/* line 444, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-tiny > * {
  --contained-adornment-size: 1.4rem;
}

/* line 448, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-tiny > .avatar__badge,
.vivid-lab .avatar--size-tiny > .avatar__ornament {
  --contained-adornment-size: 0.6rem;
}

/* line 452, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-tiny > .avatar__stat {
  font-size: 1.2rem;
}

/* line 456, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-tiny > .avatar__trend {
  --contained-adornment-size: 0.6rem;
}

/* line 461, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-teeny {
  --avatar-size: 1.2rem;
}

/* line 463, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-teeny > * {
  --contained-adornment-size: 0.8rem;
}

/* line 467, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-teeny > .avatar__badge,
.vivid-lab .avatar--size-teeny > .avatar__ornament {
  --contained-adornment-size: 0.6rem;
}

/* line 471, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-teeny > .avatar__stat {
  font-size: 1.2rem;
}

/* line 475, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-teeny > .avatar__trend {
  --contained-adornment-size: 0.6rem;
}

/* line 480, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-indicator {
  --avatar-size: 0.6rem;
}

/* line 482, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-indicator > * {
  --contained-adornment-size: 0.2rem;
}

/* line 486, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-indicator > .avatar__badge,
.vivid-lab .avatar--size-indicator > .avatar__ornament {
  --contained-adornment-size: 0.6rem;
}

/* line 490, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-indicator > .avatar__stat {
  font-size: 1.2rem;
}

/* line 494, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-indicator > .avatar__trend {
  --contained-adornment-size: 0.6rem;
}

/* line 499, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-contained {
  --avatar-size: var(--contained-adornment-size);
}

/* line 501, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--size-contained > * {
  --contained-adornment-size: calc(var(--avatar-size) * 0.75);
}

/* line 506, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--display-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* line 512, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--display-inline {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

/* line 521, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--elevation-1 .avatar__ornament,
.vivid-lab .avatar--elevation-1 .avatar__badge,
.vivid-lab .avatar--elevation-2 .avatar__ornament,
.vivid-lab .avatar--elevation-2 .avatar__badge,
.vivid-lab .avatar--elevation-4 .avatar__ornament,
.vivid-lab .avatar--elevation-4 .avatar__badge {
  box-shadow: none;
}

/* line 527, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar-stack {
  display: flex;
  flex-wrap: nowrap;
  max-width: max-content;
}

/* line 532, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar-stack > .avatar {
  flex-shrink: 0;
}

/* line 538, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar-stack--outset .avatar:first-child {
  margin-left: calc(var(--avatar-border-width) * -1);
}

/* line 541, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar-stack--outset .avatar:last-child {
  margin-right: calc(var(--avatar-border-width) * -1);
}

/* line 547, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar-stack--order-ascending > .avatar + .avatar {
  margin-left: calc(var(--avatar-size) / -3);
}

/* line 552, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar-stack--order-descending {
  flex-direction: row-reverse;
}

/* line 555, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar-stack--order-descending > .avatar + .avatar {
  margin-right: calc(var(--avatar-size) / -3);
}

/* line 560, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--elevation-1 {
  --surface-elevation: 1;
  -webkit-backdrop-filter: drop-shadow(0 0.1rem 0.1rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 0.2rem 0.4rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 0.3rem 0.8rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity)));
  filter: drop-shadow(0 0.1rem 0.1rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 0.2rem 0.4rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 0.3rem 0.8rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity)));
}

/* line 564, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--elevation-2 {
  --surface-elevation: 2;
  -webkit-backdrop-filter: drop-shadow(0 0.2rem 0.2rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 0.4rem 0.8rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 0.6rem 1.6rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity)));
  filter: drop-shadow(0 0.2rem 0.2rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 0.4rem 0.8rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 0.6rem 1.6rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity)));
}

/* line 568, app/assets/stylesheets/lab/avatar.scss */
.vivid-lab .avatar--elevation-4 {
  --surface-elevation: 4;
  -webkit-backdrop-filter: drop-shadow(0 0.4rem 0.4rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 0.8rem 1.6rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 1.2rem 3.2rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity)));
  filter: drop-shadow(0 0.4rem 0.4rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 0.8rem 1.6rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 1.2rem 3.2rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity)));
}

/* line 2, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* line 10, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media video,
.vivid-lab .inline-media img {
  vertical-align: baseline;
  display: block;
  min-width: 0;
}

/* line 17, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media.object-cover-left {
  height: 100%;
}

/* line 20, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media.object-cover-left img {
  object-position: left;
  height: 100%;
  object-fit: cover;
}

/* line 27, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media.object-cover-left.align-start img {
  align-self: flex-start;
}

/* line 33, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media svg {
  float: left;
  min-width: 0;
}

/* line 39, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media iframe {
  background-color: var(--surface-glass-color);
  width: 100%;
  display: block;
}

/* line 45, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media video {
  position: absolute;
  background-color: var(--surface-glass-color);
  width: 100%;
  height: 100%;
}

/* line 52, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media audio {
  border-radius: 2rem;
}

/* line 56, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media audio::-webkit-media-controls-enclosure {
  background-color: var(--surface-glass-color);
  color: var(--surface-color);
}

/* line 62, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media__content {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: block;
  z-index: 1;
}

/* line 70, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media__wrapper {
  display: block;
  background-size: cover;
  background-position: 50% 50%;
  width: 100%;
  height: 100%;
}

/* line 79, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--ratio-natural img,
.vivid-lab .inline-media--ratio-natural svg,
.vivid-lab .inline-media--ratio-natural video,
.vivid-lab .inline-media--ratio-natural iframe {
  max-width: var(--media-size, 100%);
  max-height: var(--media-size, 100%);
  position: static;
}

/* line 90, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--ratio-contain .inline-media__wrapper {
  background-size: contain;
  background-repeat: no-repeat;
}

/* line 97, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--ratio-square .inline-media__wrapper {
  padding-bottom: 100%;
}

/* line 103, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--ratio-landscape .inline-media__wrapper {
  padding-bottom: 75%;
}

/* line 109, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--ratio-portrait .inline-media__wrapper {
  padding-bottom: 133.3333333333%;
}

/* line 115, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--ratio-widescreen .inline-media__wrapper {
  padding-bottom: 56.25%;
}

/* line 120, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--with-video {
  width: 100%;
  justify-content: flex-start;
  align-items: flex-start;
  transform: scale(1);
  isolation: isolate;
}

/* line 128, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--with-video .inline-media__wrapper {
  width: auto;
  height: auto;
}

/* line 135, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--with-image .inline-media__wrapper {
  font-size: 0;
  line-height: 0;
}

/* line 139, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--with-image .inline-media__wrapper > img,
.vivid-lab .inline-media--with-image .inline-media__wrapper > svg {
  visibility: hidden;
  height: 0;
}

/* line 149, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media:not(.inline-media--with-image):not(.inline-media--ratio-natural) .inline-media__wrapper > img,
.vivid-lab .inline-media:not(.inline-media--with-image):not(.inline-media--ratio-natural) .inline-media__wrapper > svg,
.vivid-lab .inline-media:not(.inline-media--with-image):not(.inline-media--ratio-natural) .inline-media__wrapper > iframe {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
}

/* line 162, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--variant-screenshot-clipped {
  clip-path: inset(-3.2rem -3.2rem 0 -3.2rem);
  -webkit-clip-path: inset(-3.2rem -3.2rem 0 -3.2rem);
}

/* line 167, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--variant-screenshot,
.vivid-lab .inline-media--variant-active-screenshot {
  overflow: visible;
  transition: filter ease-in-out 0.15s;
}

/* line 173, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--variant-screenshot,
.vivid-lab .active .inline-media--variant-active-screenshot {
  --surface-shadow-opacity: 0.1;
  --surface-elevation: 8;
  -webkit-backdrop-filter: drop-shadow(0 0.8rem 0.8rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 1.6rem 3.2rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 2.4rem 6.4rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity)));
  filter: drop-shadow(0 0.8rem 0.8rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 1.6rem 3.2rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 2.4rem 6.4rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity)));
}

/* line 180, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--shape-round {
  border-radius: 50%;
  isolation: isolate;
}

/* line 185, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--shape-round > svg,
.vivid-lab .inline-media--shape-round > img,
.vivid-lab .inline-media--shape-round > span,
.vivid-lab .inline-media--shape-round > video,
.vivid-lab .inline-media--shape-round > iframe,
.vivid-lab .inline-media--shape-round > .inline-media__wrapper > svg,
.vivid-lab .inline-media--shape-round > .inline-media__wrapper > img,
.vivid-lab .inline-media--shape-round > .inline-media__wrapper > span,
.vivid-lab .inline-media--shape-round > .inline-media__wrapper > video,
.vivid-lab .inline-media--shape-round > .inline-media__wrapper > iframe {
  border-radius: inherit;
}

/* line 198, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--shape-rounded {
  border-radius: 0.6rem;
  isolation: isolate;
}

/* line 203, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--shape-rounded > svg,
.vivid-lab .inline-media--shape-rounded > img,
.vivid-lab .inline-media--shape-rounded > span,
.vivid-lab .inline-media--shape-rounded > video,
.vivid-lab .inline-media--shape-rounded > iframe,
.vivid-lab .inline-media--shape-rounded > .inline-media__wrapper > svg,
.vivid-lab .inline-media--shape-rounded > .inline-media__wrapper > img,
.vivid-lab .inline-media--shape-rounded > .inline-media__wrapper > span,
.vivid-lab .inline-media--shape-rounded > .inline-media__wrapper > video,
.vivid-lab .inline-media--shape-rounded > .inline-media__wrapper > iframe {
  border-radius: inherit;
}

/* line 216, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--shape-rounded-large {
  border-radius: 1.2rem;
  isolation: isolate;
}

/* line 221, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--shape-rounded-large > svg,
.vivid-lab .inline-media--shape-rounded-large > img,
.vivid-lab .inline-media--shape-rounded-large > span,
.vivid-lab .inline-media--shape-rounded-large > video,
.vivid-lab .inline-media--shape-rounded-large > iframe,
.vivid-lab .inline-media--shape-rounded-large > .inline-media__wrapper > svg,
.vivid-lab .inline-media--shape-rounded-large > .inline-media__wrapper > img,
.vivid-lab .inline-media--shape-rounded-large > .inline-media__wrapper > span,
.vivid-lab .inline-media--shape-rounded-large > .inline-media__wrapper > video,
.vivid-lab .inline-media--shape-rounded-large > .inline-media__wrapper > iframe {
  border-radius: inherit;
}

/* line 234, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--size-cover {
  --media-size: 100%;
  flex: 1 1 auto;
}

/* line 242, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--size-cover .inline-media__wrapper > img,
.vivid-lab .inline-media--size-cover .inline-media__wrapper > svg,
.vivid-lab .inline-media--size-cover .inline-media__wrapper > span,
.vivid-lab .inline-media--size-cover .inline-media__wrapper > iframe, .vivid-lab .inline-media--size-cover.inline-media--with-image .inline-media__wrapper > img,
.vivid-lab .inline-media--size-cover.inline-media--with-image .inline-media__wrapper > svg,
.vivid-lab .inline-media--size-cover.inline-media--with-image .inline-media__wrapper > span,
.vivid-lab .inline-media--size-cover.inline-media--with-image .inline-media__wrapper > iframe {
  max-width: 100%;
  max-height: 100%;
  height: auto;
}

/* line 254, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--size-xxlarge {
  --media-size: 8rem;
}

/* line 257, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--size-xxlarge:not(.inline-media--ratio-natural) {
  width: 8rem;
  height: 8rem;
}

/* line 262, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--size-xlarge {
  --media-size: 6.4rem;
}

/* line 265, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--size-xlarge:not(.inline-media--ratio-natural) {
  width: 6.4rem;
  height: 6.4rem;
}

/* line 271, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--size-large {
  --media-size: 5.6rem;
}

/* line 274, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--size-large:not(.inline-media--ratio-natural) {
  width: 5.6rem;
  height: 5.6rem;
}

/* line 280, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--size-medium {
  --media-size: 4.8rem;
}

/* line 283, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--size-medium:not(.inline-media--ratio-natural) {
  width: 4.8rem;
  height: 4.8rem;
}

/* line 289, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--size-small {
  --media-size: 4rem;
}

/* line 292, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--size-small:not(.inline-media--ratio-natural) {
  width: 4rem;
  height: 4rem;
}

/* line 298, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--size-petite {
  --media-size: 3.2rem;
}

/* line 301, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--size-petite:not(.inline-media--ratio-natural) {
  width: 3.2rem;
  height: 3.2rem;
}

/* line 307, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--size-inline {
  --media-size: 2.4rem;
}

/* line 310, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--size-inline:not(.inline-media--ratio-natural) {
  width: 2.4rem;
  height: 2.4rem;
}

/* line 316, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--size-natural {
  --media-size: 1lh;
  --media-size: 1lh;
}

/* line 320, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--size-natural.inline-media--ratio-natural {
  max-width: 1lh;
  max-height: 1lh;
}

/* line 325, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--size-natural:not(.inline-media--ratio-natural) {
  width: 1lh;
  height: 1lh;
}

/* line 331, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--size-tool {
  --media-size: 2rem;
}

/* line 334, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--size-tool:not(.inline-media--ratio-natural) {
  width: 2rem;
  height: 2rem;
}

/* line 340, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--size-tiny {
  --media-size: 1.6rem;
}

/* line 343, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--size-tiny:not(.inline-media--ratio-natural) {
  width: 1.6rem;
  height: 1.6rem;
}

/* line 349, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--size-teeny {
  --media-size: 1.2rem;
}

/* line 352, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--size-teeny:not(.inline-media--ratio-natural) {
  width: 1.2rem;
  height: 1.2rem;
}

/* line 358, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--size-indicator {
  --media-size: 0.6rem;
}

/* line 361, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--size-indicator:not(.inline-media--ratio-natural) {
  width: 0.6rem;
  height: 0.6rem;
}

/* line 367, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--size-fill {
  width: 100%;
  height: auto;
}

/* line 373, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--size-explicit > img {
  width: auto;
  height: auto;
}

/* line 379, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--outlined {
  border: 0.1rem solid var(--surface-container-outline-color);
  overflow: hidden;
}

/* line 383, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--outlined img {
  border-radius: 0;
}

/* line 388, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--display-inline {
  display: inline-flex;
  width: fit-content;
  justify-content: flex-start;
  align-items: flex-start;
}

/* line 395, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--display-block {
  display: flex;
  flex: 1 1 auto;
}

/* line 400, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--skeleton {
  background-color: var(--surface-control-color);
}

/* line 406, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--elevation-1.inline-media--with-svg svg {
  --surface-elevation: 1;
  -webkit-backdrop-filter: drop-shadow(0 0.1rem 0.1rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 0.2rem 0.4rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 0.3rem 0.8rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity)));
  filter: drop-shadow(0 0.1rem 0.1rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 0.2rem 0.4rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 0.3rem 0.8rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity)));
}

/* line 410, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--elevation-1:not(.inline-media--with-svg) {
  --surface-elevation: 1;
  -webkit-backdrop-filter: drop-shadow(0 0.1rem 0.1rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 0.2rem 0.4rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 0.3rem 0.8rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity)));
  filter: drop-shadow(0 0.1rem 0.1rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 0.2rem 0.4rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 0.3rem 0.8rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity)));
}

/* line 417, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--elevation-2.inline-media--with-svg svg {
  --surface-elevation: 2;
  -webkit-backdrop-filter: drop-shadow(0 0.2rem 0.2rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 0.4rem 0.8rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 0.6rem 1.6rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity)));
  filter: drop-shadow(0 0.2rem 0.2rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 0.4rem 0.8rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 0.6rem 1.6rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity)));
}

/* line 421, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--elevation-2:not(.inline-media--with-svg) {
  --surface-elevation: 2;
  -webkit-backdrop-filter: drop-shadow(0 0.2rem 0.2rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 0.4rem 0.8rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 0.6rem 1.6rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity)));
  filter: drop-shadow(0 0.2rem 0.2rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 0.4rem 0.8rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 0.6rem 1.6rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity)));
}

/* line 428, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--elevation-4.inline-media--with-svg svg {
  --surface-elevation: 4;
  -webkit-backdrop-filter: drop-shadow(0 0.4rem 0.4rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 0.8rem 1.6rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 1.2rem 3.2rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity)));
  filter: drop-shadow(0 0.4rem 0.4rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 0.8rem 1.6rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 1.2rem 3.2rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity)));
}

/* line 432, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--elevation-4:not(.inline-media--with-svg) {
  --surface-elevation: 4;
  -webkit-backdrop-filter: drop-shadow(0 0.4rem 0.4rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 0.8rem 1.6rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 1.2rem 3.2rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity)));
  filter: drop-shadow(0 0.4rem 0.4rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 0.8rem 1.6rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 1.2rem 3.2rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity)));
}

/* line 437, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--elevation-8 {
  --surface-shadow-opacity: 0.1;
}

/* line 441, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--elevation-8.inline-media--with-svg svg {
  --surface-elevation: 8;
  -webkit-backdrop-filter: drop-shadow(0 0.8rem 0.8rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 1.6rem 3.2rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 2.4rem 6.4rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity)));
  filter: drop-shadow(0 0.8rem 0.8rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 1.6rem 3.2rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 2.4rem 6.4rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity)));
}

/* line 445, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--elevation-8:not(.inline-media--with-svg) {
  --surface-elevation: 8;
  -webkit-backdrop-filter: drop-shadow(0 0.8rem 0.8rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 1.6rem 3.2rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 2.4rem 6.4rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity)));
  filter: drop-shadow(0 0.8rem 0.8rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 1.6rem 3.2rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 2.4rem 6.4rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity)));
}

/* line 450, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--elevation-16 {
  --surface-shadow-opacity: 0.1;
}

/* line 454, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--elevation-16.inline-media--with-svg svg {
  --surface-elevation: 16;
  -webkit-backdrop-filter: drop-shadow(0 1.6rem 1.6rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 3.2rem 6.4rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 4.8rem 12.8rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity)));
  filter: drop-shadow(0 1.6rem 1.6rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 3.2rem 6.4rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 4.8rem 12.8rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity)));
}

/* line 458, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--elevation-16:not(.inline-media--with-svg) {
  --surface-elevation: 16;
  -webkit-backdrop-filter: drop-shadow(0 1.6rem 1.6rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 3.2rem 6.4rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 4.8rem 12.8rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity)));
  filter: drop-shadow(0 1.6rem 1.6rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 3.2rem 6.4rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 4.8rem 12.8rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity)));
}

/* line 463, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media--bleed {
  margin-left: calc(var(--container-gutter) * -1);
  margin-right: calc(var(--container-gutter) * -1);
  max-width: none;
}

/* line 469, app/assets/stylesheets/lab/media.scss */
.vivid-lab .qr-code {
  max-width: 100%;
}

/* line 472, app/assets/stylesheets/lab/media.scss */
.vivid-lab .qr-code > svg {
  width: 100%;
}

/* line 477, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media-pile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
}

/* line 486, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media-pile .inline-media {
  height: auto;
}

/* line 491, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media-pile__media {
  position: absolute;
}

/* line 495, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media-pile--size-xlarge {
  width: 6.4rem;
  height: 6.4rem;
}

/* line 499, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media-pile--size-xlarge .inline-media-pile__media,
.vivid-lab .inline-media-pile--size-xlarge .inline-media {
  max-height: 6.4rem;
}

/* line 505, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media-pile--size-large {
  width: 5.6rem;
  height: 5.6rem;
}

/* line 509, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media-pile--size-large .inline-media-pile__media,
.vivid-lab .inline-media-pile--size-large .inline-media {
  max-height: 5.6rem;
}

/* line 515, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media-pile--size-medium {
  width: 4.8rem;
  height: 4.8rem;
}

/* line 519, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media-pile--size-medium .inline-media-pile__media,
.vivid-lab .inline-media-pile--size-medium .inline-media {
  max-height: 4.8rem;
}

/* line 525, app/assets/stylesheets/lab/media.scss */
.vivid-lab .inline-media-pile.inline-media--display-inline {
  display: inline-flex;
}

/* line 529, app/assets/stylesheets/lab/media.scss */
.vivid-lab .image--slow {
  opacity: 0;
  transition: opacity 0.25s ease-in;
}

/* line 534, app/assets/stylesheets/lab/media.scss */
.vivid-lab .image--slow.image--slow-loaded {
  opacity: 1;
}

/* line 2, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn {
  display: flex;
  max-width: 100%;
  min-width: 0;
}

/* line 8, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn__body {
  flex: 1 1 auto;
  width: 100%;
  position: relative;
  min-width: 0;
  text-overflow: ellipsis;
}

/* line 18, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab a > .adorn,
.vivid-lab button > .adorn {
  text-decoration: inherit;
}

/* line 20, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab a > .adorn > .adorn__body,
.vivid-lab button > .adorn > .adorn__body {
  text-decoration: inherit;
}

/* line 26, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn__adornment {
  flex: 0 0 auto;
  text-align: center;
  position: relative;
  min-width: 0;
}

/* line 32, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn__adornment > .icon--size-contained {
  margin: calc((1lh - var(--contained-adornment-size)) / 2) 0;
}

/* line 36, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn__adornment > img,
.vivid-lab .adorn__adornment > div img {
  float: left;
}

/* line 44, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--size-xlarge > .adorn__adornment {
  width: 6.4rem;
  max-height: 6.4rem;
}

/* line 51, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--size-large > .adorn__adornment {
  width: 5.6rem;
  max-height: 5.6rem;
}

/* line 58, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--size-medium > .adorn__adornment {
  width: 4.8rem;
  max-height: 4.8rem;
}

/* line 65, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--size-small > .adorn__adornment {
  width: 4rem;
  max-height: 4rem;
}

/* line 72, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--size-petite > .adorn__adornment {
  width: 3.2rem;
  max-height: 3.2rem;
}

/* line 79, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--size-inline > .adorn__adornment {
  width: 2.4rem;
  max-height: 2.4rem;
}

/* line 86, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--layout-left {
  flex-direction: row;
}

/* line 89, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--layout-left > .adorn__adornment {
  margin: 0 0.8rem 0 0;
}

/* line 94, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--layout-left.adorn--gutters-none > .adorn__adornment {
  margin: 0;
}

/* line 100, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--layout-left.adorn--gutters-compact > .adorn__adornment {
  margin: 0 0.4rem 0 0;
}

/* line 106, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--layout-left.adorn--gutters-loose > .adorn__adornment {
  margin: 0 1.6rem 0 0;
}

/* line 112, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--layout-left.adorn--gutters-large > .adorn__adornment {
  margin: 0 3.2rem 0 0;
}

/* line 118, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--layout-left.adorn--inline > .adorn__adornment {
  margin: 0 0.225em 0 0;
}

/* line 123, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--layout-left > .adorn__body {
  text-align: left;
}

/* line 128, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--layout-right {
  flex-direction: row-reverse;
}

/* line 131, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--layout-right > .adorn__adornment {
  margin: 0 0 0 1.6rem;
}

/* line 136, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--layout-right.adorn--gutters-none > .adorn__adornment {
  margin: 0;
}

/* line 142, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--layout-right.adorn--gutters-compact > .adorn__adornment {
  margin: 0 0 0 0.8rem;
}

/* line 148, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--layout-right.adorn--gutters-loose > .adorn__adornment {
  margin: 0 0 0 3.2rem;
}

/* line 154, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--layout-right.adorn--gutters-large > .adorn__adornment {
  margin: 0 0 0 6.4rem;
}

/* line 160, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--layout-right.adorn--inline > .adorn__adornment {
  margin: 0 0 0 0.225em;
}

/* line 165, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--layout-right > .adorn__body {
  text-align: inherit;
}

/* line 170, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--layout-above {
  flex-direction: column;
}

/* line 173, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--layout-above > .adorn__adornment {
  margin: 0 0 1.6rem 0;
}

/* line 178, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--layout-above.adorn--gutters-none > .adorn__adornment {
  margin: 0;
}

/* line 184, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--layout-above.adorn--gutters-compact > .adorn__adornment {
  margin: 0 0 0.8rem 0;
}

/* line 190, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--layout-above.adorn--gutters-loose > .adorn__adornment {
  margin: 0 0 3.2rem 0;
}

/* line 196, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--layout-above.adorn--gutters-large > .adorn__adornment {
  margin: 0 0 6.4rem 0;
}

/* line 202, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--layout-above.adorn--inline > .adorn__adornment {
  margin: 0 0 0.225em 0;
}

/* line 208, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--layout-below {
  flex-direction: column-reverse;
}

/* line 211, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--layout-below > .adorn__adornment {
  margin: 1.6rem 0 0 0;
}

/* line 216, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--layout-below.adorn--gutters-none > .adorn__adornment {
  margin: 0;
}

/* line 222, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--layout-below.adorn--gutters-compact > .adorn__adornment {
  margin: 0.8rem 0 0 0;
}

/* line 228, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--layout-below.adorn--gutters-loose > .adorn__adornment {
  margin: 3.2rem 0 0 0;
}

/* line 234, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--layout-below.adorn--gutters-large > .adorn__adornment {
  margin: 6.4rem 0 0 0;
}

/* line 240, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--layout-below.adorn--inline > .adorn__adornment {
  margin: 0.225em 0 0 0;
}

/* line 246, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--align-top,
.vivid-lab .adorn--align-left {
  align-items: flex-start;
  text-align: inherit;
}

/* line 251, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--align-middle,
.vivid-lab .adorn--align-center {
  align-items: center;
}

/* line 255, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--align-center {
  text-align: center;
}

/* line 259, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--align-bottom,
.vivid-lab .adorn--align-right {
  align-items: flex-end;
  text-align: inherit;
}

/* line 264, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--align-baseline {
  align-items: baseline;
}

/* line 268, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--align-center {
  text-align: center;
}

/* line 272, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--align-right {
  text-align: right;
}

@media (min-width: 768px) {
  /* line 86, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-left-sm {
    flex-direction: row;
  }
  /* line 89, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-left-sm > .adorn__adornment {
    margin: 0 0.8rem 0 0;
  }
  /* line 94, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-left-sm.adorn--gutters-none > .adorn__adornment {
    margin: 0;
  }
  /* line 100, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-left-sm.adorn--gutters-compact > .adorn__adornment {
    margin: 0 0.4rem 0 0;
  }
  /* line 106, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-left-sm.adorn--gutters-loose > .adorn__adornment {
    margin: 0 1.6rem 0 0;
  }
  /* line 112, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-left-sm.adorn--gutters-large > .adorn__adornment {
    margin: 0 3.2rem 0 0;
  }
  /* line 118, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-left-sm.adorn--inline > .adorn__adornment {
    margin: 0 0.225em 0 0;
  }
  /* line 123, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-left-sm > .adorn__body {
    text-align: left;
  }
  /* line 128, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-right-sm {
    flex-direction: row-reverse;
  }
  /* line 131, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-right-sm > .adorn__adornment {
    margin: 0 0 0 1.6rem;
  }
  /* line 136, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-right-sm.adorn--gutters-none > .adorn__adornment {
    margin: 0;
  }
  /* line 142, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-right-sm.adorn--gutters-compact > .adorn__adornment {
    margin: 0 0 0 0.8rem;
  }
  /* line 148, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-right-sm.adorn--gutters-loose > .adorn__adornment {
    margin: 0 0 0 3.2rem;
  }
  /* line 154, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-right-sm.adorn--gutters-large > .adorn__adornment {
    margin: 0 0 0 6.4rem;
  }
  /* line 160, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-right-sm.adorn--inline > .adorn__adornment {
    margin: 0 0 0 0.225em;
  }
  /* line 165, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-right-sm > .adorn__body {
    text-align: inherit;
  }
  /* line 170, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-above-sm {
    flex-direction: column;
  }
  /* line 173, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-above-sm > .adorn__adornment {
    margin: 0 0 1.6rem 0;
  }
  /* line 178, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-above-sm.adorn--gutters-none > .adorn__adornment {
    margin: 0;
  }
  /* line 184, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-above-sm.adorn--gutters-compact > .adorn__adornment {
    margin: 0 0 0.8rem 0;
  }
  /* line 190, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-above-sm.adorn--gutters-loose > .adorn__adornment {
    margin: 0 0 3.2rem 0;
  }
  /* line 196, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-above-sm.adorn--gutters-large > .adorn__adornment {
    margin: 0 0 6.4rem 0;
  }
  /* line 202, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-above-sm.adorn--inline > .adorn__adornment {
    margin: 0 0 0.225em 0;
  }
  /* line 208, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-below-sm {
    flex-direction: column-reverse;
  }
  /* line 211, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-below-sm > .adorn__adornment {
    margin: 1.6rem 0 0 0;
  }
  /* line 216, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-below-sm.adorn--gutters-none > .adorn__adornment {
    margin: 0;
  }
  /* line 222, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-below-sm.adorn--gutters-compact > .adorn__adornment {
    margin: 0.8rem 0 0 0;
  }
  /* line 228, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-below-sm.adorn--gutters-loose > .adorn__adornment {
    margin: 3.2rem 0 0 0;
  }
  /* line 234, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-below-sm.adorn--gutters-large > .adorn__adornment {
    margin: 6.4rem 0 0 0;
  }
  /* line 240, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-below-sm.adorn--inline > .adorn__adornment {
    margin: 0.225em 0 0 0;
  }
  /* line 246, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--align-top-sm,
.vivid-lab .adorn--align-left-sm {
    align-items: flex-start;
    text-align: inherit;
  }
  /* line 251, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--align-middle-sm,
.vivid-lab .adorn--align-center-sm {
    align-items: center;
  }
  /* line 255, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--align-center-sm {
    text-align: center;
  }
  /* line 259, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--align-bottom-sm,
.vivid-lab .adorn--align-right-sm {
    align-items: flex-end;
    text-align: inherit;
  }
  /* line 264, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--align-baseline-sm {
    align-items: baseline;
  }
  /* line 268, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--align-center-sm {
    text-align: center;
  }
  /* line 272, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--align-right-sm {
    text-align: right;
  }
}

@media (min-width: 992px) {
  /* line 86, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-left-md {
    flex-direction: row;
  }
  /* line 89, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-left-md > .adorn__adornment {
    margin: 0 0.8rem 0 0;
  }
  /* line 94, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-left-md.adorn--gutters-none > .adorn__adornment {
    margin: 0;
  }
  /* line 100, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-left-md.adorn--gutters-compact > .adorn__adornment {
    margin: 0 0.4rem 0 0;
  }
  /* line 106, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-left-md.adorn--gutters-loose > .adorn__adornment {
    margin: 0 1.6rem 0 0;
  }
  /* line 112, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-left-md.adorn--gutters-large > .adorn__adornment {
    margin: 0 3.2rem 0 0;
  }
  /* line 118, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-left-md.adorn--inline > .adorn__adornment {
    margin: 0 0.225em 0 0;
  }
  /* line 123, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-left-md > .adorn__body {
    text-align: left;
  }
  /* line 128, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-right-md {
    flex-direction: row-reverse;
  }
  /* line 131, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-right-md > .adorn__adornment {
    margin: 0 0 0 1.6rem;
  }
  /* line 136, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-right-md.adorn--gutters-none > .adorn__adornment {
    margin: 0;
  }
  /* line 142, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-right-md.adorn--gutters-compact > .adorn__adornment {
    margin: 0 0 0 0.8rem;
  }
  /* line 148, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-right-md.adorn--gutters-loose > .adorn__adornment {
    margin: 0 0 0 3.2rem;
  }
  /* line 154, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-right-md.adorn--gutters-large > .adorn__adornment {
    margin: 0 0 0 6.4rem;
  }
  /* line 160, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-right-md.adorn--inline > .adorn__adornment {
    margin: 0 0 0 0.225em;
  }
  /* line 165, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-right-md > .adorn__body {
    text-align: inherit;
  }
  /* line 170, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-above-md {
    flex-direction: column;
  }
  /* line 173, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-above-md > .adorn__adornment {
    margin: 0 0 1.6rem 0;
  }
  /* line 178, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-above-md.adorn--gutters-none > .adorn__adornment {
    margin: 0;
  }
  /* line 184, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-above-md.adorn--gutters-compact > .adorn__adornment {
    margin: 0 0 0.8rem 0;
  }
  /* line 190, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-above-md.adorn--gutters-loose > .adorn__adornment {
    margin: 0 0 3.2rem 0;
  }
  /* line 196, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-above-md.adorn--gutters-large > .adorn__adornment {
    margin: 0 0 6.4rem 0;
  }
  /* line 202, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-above-md.adorn--inline > .adorn__adornment {
    margin: 0 0 0.225em 0;
  }
  /* line 208, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-below-md {
    flex-direction: column-reverse;
  }
  /* line 211, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-below-md > .adorn__adornment {
    margin: 1.6rem 0 0 0;
  }
  /* line 216, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-below-md.adorn--gutters-none > .adorn__adornment {
    margin: 0;
  }
  /* line 222, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-below-md.adorn--gutters-compact > .adorn__adornment {
    margin: 0.8rem 0 0 0;
  }
  /* line 228, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-below-md.adorn--gutters-loose > .adorn__adornment {
    margin: 3.2rem 0 0 0;
  }
  /* line 234, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-below-md.adorn--gutters-large > .adorn__adornment {
    margin: 6.4rem 0 0 0;
  }
  /* line 240, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-below-md.adorn--inline > .adorn__adornment {
    margin: 0.225em 0 0 0;
  }
  /* line 246, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--align-top-md,
.vivid-lab .adorn--align-left-md {
    align-items: flex-start;
    text-align: inherit;
  }
  /* line 251, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--align-middle-md,
.vivid-lab .adorn--align-center-md {
    align-items: center;
  }
  /* line 255, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--align-center-md {
    text-align: center;
  }
  /* line 259, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--align-bottom-md,
.vivid-lab .adorn--align-right-md {
    align-items: flex-end;
    text-align: inherit;
  }
  /* line 264, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--align-baseline-md {
    align-items: baseline;
  }
  /* line 268, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--align-center-md {
    text-align: center;
  }
  /* line 272, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--align-right-md {
    text-align: right;
  }
}

@media (min-width: 1200px) {
  /* line 86, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-left-lg {
    flex-direction: row;
  }
  /* line 89, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-left-lg > .adorn__adornment {
    margin: 0 0.8rem 0 0;
  }
  /* line 94, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-left-lg.adorn--gutters-none > .adorn__adornment {
    margin: 0;
  }
  /* line 100, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-left-lg.adorn--gutters-compact > .adorn__adornment {
    margin: 0 0.4rem 0 0;
  }
  /* line 106, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-left-lg.adorn--gutters-loose > .adorn__adornment {
    margin: 0 1.6rem 0 0;
  }
  /* line 112, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-left-lg.adorn--gutters-large > .adorn__adornment {
    margin: 0 3.2rem 0 0;
  }
  /* line 118, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-left-lg.adorn--inline > .adorn__adornment {
    margin: 0 0.225em 0 0;
  }
  /* line 123, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-left-lg > .adorn__body {
    text-align: left;
  }
  /* line 128, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-right-lg {
    flex-direction: row-reverse;
  }
  /* line 131, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-right-lg > .adorn__adornment {
    margin: 0 0 0 1.6rem;
  }
  /* line 136, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-right-lg.adorn--gutters-none > .adorn__adornment {
    margin: 0;
  }
  /* line 142, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-right-lg.adorn--gutters-compact > .adorn__adornment {
    margin: 0 0 0 0.8rem;
  }
  /* line 148, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-right-lg.adorn--gutters-loose > .adorn__adornment {
    margin: 0 0 0 3.2rem;
  }
  /* line 154, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-right-lg.adorn--gutters-large > .adorn__adornment {
    margin: 0 0 0 6.4rem;
  }
  /* line 160, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-right-lg.adorn--inline > .adorn__adornment {
    margin: 0 0 0 0.225em;
  }
  /* line 165, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-right-lg > .adorn__body {
    text-align: inherit;
  }
  /* line 170, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-above-lg {
    flex-direction: column;
  }
  /* line 173, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-above-lg > .adorn__adornment {
    margin: 0 0 1.6rem 0;
  }
  /* line 178, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-above-lg.adorn--gutters-none > .adorn__adornment {
    margin: 0;
  }
  /* line 184, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-above-lg.adorn--gutters-compact > .adorn__adornment {
    margin: 0 0 0.8rem 0;
  }
  /* line 190, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-above-lg.adorn--gutters-loose > .adorn__adornment {
    margin: 0 0 3.2rem 0;
  }
  /* line 196, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-above-lg.adorn--gutters-large > .adorn__adornment {
    margin: 0 0 6.4rem 0;
  }
  /* line 202, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-above-lg.adorn--inline > .adorn__adornment {
    margin: 0 0 0.225em 0;
  }
  /* line 208, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-below-lg {
    flex-direction: column-reverse;
  }
  /* line 211, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-below-lg > .adorn__adornment {
    margin: 1.6rem 0 0 0;
  }
  /* line 216, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-below-lg.adorn--gutters-none > .adorn__adornment {
    margin: 0;
  }
  /* line 222, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-below-lg.adorn--gutters-compact > .adorn__adornment {
    margin: 0.8rem 0 0 0;
  }
  /* line 228, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-below-lg.adorn--gutters-loose > .adorn__adornment {
    margin: 3.2rem 0 0 0;
  }
  /* line 234, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-below-lg.adorn--gutters-large > .adorn__adornment {
    margin: 6.4rem 0 0 0;
  }
  /* line 240, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--layout-below-lg.adorn--inline > .adorn__adornment {
    margin: 0.225em 0 0 0;
  }
  /* line 246, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--align-top-lg,
.vivid-lab .adorn--align-left-lg {
    align-items: flex-start;
    text-align: inherit;
  }
  /* line 251, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--align-middle-lg,
.vivid-lab .adorn--align-center-lg {
    align-items: center;
  }
  /* line 255, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--align-center-lg {
    text-align: center;
  }
  /* line 259, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--align-bottom-lg,
.vivid-lab .adorn--align-right-lg {
    align-items: flex-end;
    text-align: inherit;
  }
  /* line 264, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--align-baseline-lg {
    align-items: baseline;
  }
  /* line 268, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--align-center-lg {
    text-align: center;
  }
  /* line 272, app/assets/stylesheets/lab/adorn.scss */
  .vivid-lab .adorn--align-right-lg {
    text-align: right;
  }
}

/* line 288, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--inline,
.vivid-lab .adorn--display-inline {
  display: inline-flex;
  vertical-align: bottom;
  max-width: 100%;
}

/* line 295, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--block,
.vivid-lab .adorn--display-block {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

/* line 301, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--block > .adorn__body,
.vivid-lab .adorn--display-block > .adorn__body {
  display: flex;
  flex-direction: column;
}

/* line 307, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--wrap-none {
  white-space: nowrap;
  flex-wrap: nowrap;
}

/* line 311, app/assets/stylesheets/lab/adorn.scss */
.vivid-lab .adorn--wrap-none > .adorn__body {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* line 2, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header,
.vivid-lab .rich-header__content-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  min-width: 0;
  flex: 1 1 auto;
}

/* line 11, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header {
  --rich-header-adornment-size: 2.4rem;
  isolation: isolate;
}

/* line 16, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header__content-wrapper {
  flex-wrap: nowrap;
  flex: 0 1 100%;
  max-width: 100%;
  gap: 0.8rem;
}

/* line 22, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header__content-wrapper:not(:last-child) {
  margin-bottom: 0;
}

/* line 27, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header.rich-header--h4,
.vivid-lab .rich-header.rich-header--plain {
  --rich-header-adornment-size: 2.4rem;
  --contained-adornment-size: 2.4rem;
}

/* line 33, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header:has(.avatar--size-petite) {
  --rich-header-adornment-size: 3.2rem;
}

/* line 37, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header:has(.avatar--size-small),
.vivid-lab .rich-header:has(.button--size-medium) {
  --rich-header-adornment-size: 4rem;
}

/* line 42, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header:has(.avatar--size-medium) {
  --rich-header-adornment-size: 4.8rem;
}

/* line 46, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header:has(.avatar--size-xlarge) {
  --rich-header-adornment-size: 6.4rem;
}

/* line 50, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header.rich-header--caption,
.vivid-lab .rich-header.rich-header--xsmall {
  --rich-header-adornment-size: 2rem;
  --contained-adornment-size: 2rem;
  color: var(--surface-deemphasized-color);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2rem;
  text-rendering: optimizeLegibility;
}

/* line 62, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header.rich-header--xsmall {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.6rem;
}

/* line 68, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header__prefix,
.vivid-lab .rich-header__icon {
  flex: 0 0 0;
  min-height: var(--rich-header-adornment-size);
}

/* line 75, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header__prefix .avatar:not([class*="avatar--size"]) {
  --avatar-size: var(--rich-header-adornment-size);
}

/* line 80, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* line 87, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header__title.skeleton {
  width: 12ch;
  max-width: 100%;
  height: 1lh;
}

/* line 94, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header__subtitle {
  flex: 1 0 100%;
  row-gap: -0.4rem;
  text-wrap: pretty;
}

/* line 99, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header__subtitle.skeleton {
  width: 20ch;
  max-width: 100%;
  min-height: 1lh;
}

/* line 106, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header__caption {
  font-weight: 400;
}

/* line 110, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header__note {
  flex-basis: fit-content;
  flex-grow: 0;
  flex-shrink: 0;
  min-width: 0;
  max-width: 100%;
}

/* line 117, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header__note.skeleton {
  flex-basis: 6ch;
  width: 6ch;
  max-width: 100%;
  min-height: 1lh;
}

/* line 126, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header__prefix .avatar {
  margin-top: calc((var(--rich-header-adornment-size) - var(--avatar-size)) / 2);
}

/* line 131, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header__toolbar.toolbar {
  flex: 0 0 auto;
  min-height: var(--rich-header-adornment-size);
}

/* line 135, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header__toolbar.toolbar:has(.button--size-medium), .vivid-lab .rich-header__toolbar.toolbar:has(.avatar) {
  margin-top: calc( min(0px, (var(--rich-header-adornment-size) - 4rem) / 2));
}

/* line 142, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header__toolbar.toolbar:has(.button--size-small) {
  margin-top: calc( min(0px, (var(--rich-header-adornment-size) - 3.2rem) / 2));
}

/* line 152, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header:last-child:not(:has(.rich-header__subheading)) .rich-header__toolbar:has(.button--size-medium), .vivid-lab .rich-header:last-child:not(:has(.rich-header__subheading)) .rich-header__toolbar:has(.avatar),
.vivid-lab .rich-header:has(.rich-header__subheading) .rich-header__toolbar:has(.button--size-medium),
.vivid-lab .rich-header:has(.rich-header__subheading) .rich-header__toolbar:has(.avatar) {
  margin-bottom: calc( min(0px, (var(--rich-header-adornment-size) - 4rem) / 2));
}

/* line 159, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header:last-child:not(:has(.rich-header__subheading)) .rich-header__toolbar:has(.button--size-small),
.vivid-lab .rich-header:has(.rich-header__subheading) .rich-header__toolbar:has(.button--size-small) {
  margin-bottom: calc( min(0px, (var(--rich-header-adornment-size) - 3.2rem) / 2));
}

/* line 168, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header__prefix .chip {
  margin-top: calc((var(--rich-header-adornment-size) - var(--control-height)) / 2);
  margin-bottom: calc((var(--rich-header-adornment-size) - var(--control-height)) / 2);
}

/* line 174, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header__title-container {
  flex: 1 0 0;
  min-width: 0;
}

/* line 178, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header__title-container > .rich-header__title-wrapper {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.8rem;
  row-gap: 0.4rem;
}

/* line 189, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header__title-container:not(:first-child) > .rich-header__title-wrapper, .vivid-lab .rich-header__title-container:not(:last-child) > .rich-header__title-wrapper {
  margin-top: calc((var(--rich-header-adornment-size) - 1lh) / 2);
}

/* line 194, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header__title-container:first-child:last-child > .rich-header__title-wrapper {
  margin-top: 0;
}

/* line 200, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header__subheading {
  flex: 0 0 100%;
  margin-top: 0.4rem;
}

/* line 204, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header__subheading.skeleton {
  width: 20ch;
  max-width: 100%;
  min-height: 1lh;
}

/* line 212, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header--align-middle .rich-header__content-wrapper {
  align-items: center;
}

/* line 217, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header--align-center {
  justify-content: center;
  text-align: center;
}

/* line 221, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header--align-center .rich-header__title-wrapper,
.vivid-lab .rich-header--align-center .rich-header__content-wrapper {
  justify-content: center;
  flex-basis: auto;
}

/* line 229, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header--wrap-none .rich-header__title,
.vivid-lab .rich-header--wrap-none .rich-header__subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: nowrap;
}

/* line 238, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header.text--align-center {
  justify-content: center;
}

/* line 241, app/assets/stylesheets/lab/rich_header.scss */
.vivid-lab .rich-header.text--align-center .rich-header__content-wrapper {
  flex-basis: auto;
}

/* line 2, app/assets/stylesheets/lab/toolbar.scss */
.vivid-lab .toolbar {
  display: flex;
  align-items: stretch;
  gap: var(--toolbar-gutter);
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 100%;
  min-width: 0;
  flex: 1 1 0;
}

/* line 14, app/assets/stylesheets/lab/toolbar.scss */
.vivid-lab .toolbar__fragment {
  display: flex;
  gap: inherit;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 100%;
  min-width: 0;
}

/* line 24, app/assets/stylesheets/lab/toolbar.scss */
.vivid-lab .toolbar__tool {
  display: flex;
  align-items: center;
  max-width: 100%;
  flex-wrap: wrap;
  flex: 0 1 auto;
}

/* line 31, app/assets/stylesheets/lab/toolbar.scss */
.vivid-lab .toolbar__tool > .button {
  flex: 100%;
}

/* line 35, app/assets/stylesheets/lab/toolbar.scss */
.vivid-lab .toolbar__tool:has(.stimulus--reveal:empty) {
  display: none;
}

/* line 40, app/assets/stylesheets/lab/toolbar.scss */
.vivid-lab .toolbar--wrap-none {
  flex-wrap: nowrap;
}

/* line 46, app/assets/stylesheets/lab/toolbar.scss */
.vivid-lab .toolbar.rich-header__toolbar.toolbar--wrap-none.toolbar--gutters-normal.toolbar--wrap-none {
  flex-wrap: wrap !important;
}

/* line 50, app/assets/stylesheets/lab/toolbar.scss */
.vivid-lab .toolbar--display-block {
  display: flex;
  flex: 1 0 100%;
  width: 100%;
}

/* line 56, app/assets/stylesheets/lab/toolbar.scss */
.vivid-lab .toolbar--display-inline {
  display: flex;
  flex: 0 0 auto;
  width: auto;
}

/* line 62, app/assets/stylesheets/lab/toolbar.scss */
.vivid-lab .toolbar__tool--position-end {
  order: 100;
}

/* line 66, app/assets/stylesheets/lab/toolbar.scss */
.vivid-lab .toolbar__tool--position-end:first-child,
.vivid-lab .toolbar__tool:not(.toolbar__tool--position-end) + .toolbar__tool--position-end {
  margin-left: auto;
}

/* line 71, app/assets/stylesheets/lab/toolbar.scss */
.vivid-lab .toolbar--align-right {
  justify-content: flex-end;
}

/* line 75, app/assets/stylesheets/lab/toolbar.scss */
.vivid-lab .toolbar--variant-floating {
  position: absolute;
  padding: 0.6rem 0.6rem;
  width: 100%;
}

/* line 82, app/assets/stylesheets/lab/toolbar.scss */
.vivid-lab .toolbar--gutters-compact {
  --toolbar-gutter: 0.4rem;
}

/* line 86, app/assets/stylesheets/lab/toolbar.scss */
.vivid-lab .toolbar--gutters-normal {
  --toolbar-gutter: 0.8rem;
}

/* line 90, app/assets/stylesheets/lab/toolbar.scss */
.vivid-lab .toolbar--gutters-loose {
  --toolbar-gutter: 1.6rem;
}

@media (min-width: 768px) {
  /* line 82, app/assets/stylesheets/lab/toolbar.scss */
  .vivid-lab .toolbar--gutters-compact-sm {
    --toolbar-gutter: 0.4rem;
  }
  /* line 86, app/assets/stylesheets/lab/toolbar.scss */
  .vivid-lab .toolbar--gutters-normal-sm {
    --toolbar-gutter: 0.8rem;
  }
  /* line 90, app/assets/stylesheets/lab/toolbar.scss */
  .vivid-lab .toolbar--gutters-loose-sm {
    --toolbar-gutter: 1.6rem;
  }
}

@media (min-width: 992px) {
  /* line 82, app/assets/stylesheets/lab/toolbar.scss */
  .vivid-lab .toolbar--gutters-compact-md {
    --toolbar-gutter: 0.4rem;
  }
  /* line 86, app/assets/stylesheets/lab/toolbar.scss */
  .vivid-lab .toolbar--gutters-normal-md {
    --toolbar-gutter: 0.8rem;
  }
  /* line 90, app/assets/stylesheets/lab/toolbar.scss */
  .vivid-lab .toolbar--gutters-loose-md {
    --toolbar-gutter: 1.6rem;
  }
}

@media (min-width: 1200px) {
  /* line 82, app/assets/stylesheets/lab/toolbar.scss */
  .vivid-lab .toolbar--gutters-compact-lg {
    --toolbar-gutter: 0.4rem;
  }
  /* line 86, app/assets/stylesheets/lab/toolbar.scss */
  .vivid-lab .toolbar--gutters-normal-lg {
    --toolbar-gutter: 0.8rem;
  }
  /* line 90, app/assets/stylesheets/lab/toolbar.scss */
  .vivid-lab .toolbar--gutters-loose-lg {
    --toolbar-gutter: 1.6rem;
  }
}

/* line 2, app/assets/stylesheets/lab/list_view.scss */
.vivid-lab .list-view {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* line 7, app/assets/stylesheets/lab/list_view.scss */
.vivid-lab .list-view + .list-view {
  margin-top: var(--list-view-gutter);
}

/* line 12, app/assets/stylesheets/lab/list_view.scss */
.vivid-lab .list-view__divider {
  background: var(--surface-container-outline-color);
  height: 0.1rem;
}

/* line 17, app/assets/stylesheets/lab/list_view.scss */
.vivid-lab .list-view__divider--weight-medium {
  height: 0.2rem;
  border-radius: 0.2rem;
}

/* line 22, app/assets/stylesheets/lab/list_view.scss */
.vivid-lab .list-view__divider--weight-heavy {
  height: 0.4rem;
  border-radius: 0.4rem;
}

/* line 27, app/assets/stylesheets/lab/list_view.scss */
.vivid-lab .list-view__divider--weight-deemphasized {
  opacity: 0.7;
}

/* line 31, app/assets/stylesheets/lab/list_view.scss */
.vivid-lab .list-view__divider--weight-subdued {
  opacity: 0.35;
}

/* line 35, app/assets/stylesheets/lab/list_view.scss */
.vivid-lab .list-view__item--bleed {
  margin-left: calc(var(--container-gutter) * -1);
  margin-right: calc(var(--container-gutter) * -1);
  padding-left: var(--container-gutter);
  padding-right: var(--container-gutter);
}

/* line 42, app/assets/stylesheets/lab/list_view.scss */
.vivid-lab .list-view__divider--bleed {
  border-radius: 0;
}

/* line 46, app/assets/stylesheets/lab/list_view.scss */
.vivid-lab .list-view__item.surface--color:not(.list-view__divider) {
  padding-top: var(--list-view-gutter);
  padding-bottom: var(--list-view-gutter);
}

/* line 52, app/assets/stylesheets/lab/list_view.scss */
.vivid-lab .list-view__item.surface--color + .list-view__item.surface--color {
  margin-top: 0;
}

/* line 57, app/assets/stylesheets/lab/list_view.scss */
.vivid-lab .list-view__fragment,
.vivid-lab .list-view__item {
  min-width: 0;
  display: block;
}

/* line 64, app/assets/stylesheets/lab/list_view.scss */
.vivid-lab .list-view__fragment + .list-view__item:not(:empty),
.vivid-lab .list-view__fragment + .list-view__fragment > .list-view__item:first-child:not(:empty),
.vivid-lab .list-view__item + .list-view__item:not(:empty),
.vivid-lab .list-view__item + .list-view__fragment > .list-view__item:first-child:not(:empty) {
  margin-top: var(--list-view-gutter);
}

/* line 69, app/assets/stylesheets/lab/list_view.scss */
.vivid-lab .list-view__fragment + .list-view__divider,
.vivid-lab .list-view__item + .list-view__divider {
  margin-top: var(--list-view-gutter);
}

/* line 74, app/assets/stylesheets/lab/list_view.scss */
.vivid-lab a.list-view__item {
  text-decoration: none;
}

/* line 81, app/assets/stylesheets/lab/list_view.scss */
.vivid-lab .list-view__item .button_to--composite button:focus-visible,
.vivid-lab .list-view__item .anchor--composite:focus-visible {
  outline-offset: 0.6rem;
}

/* line 87, app/assets/stylesheets/lab/list_view.scss */
.vivid-lab .list-view__item.list-view__item--sub-item {
  margin-top: 0;
  padding-top: 0;
}

/* line 96, app/assets/stylesheets/lab/list_view.scss */
.vivid-lab .list-view__fragment + .list-view__fragment > .list-view__item--start-section:first-child:not(:empty),
.vivid-lab .list-view__fragment + .list-view__item--start-section:not(:empty),
.vivid-lab .list-view__item + .list-view__fragment > .list-view__item--start-section:first-child:not(:empty),
.vivid-lab .list-view__item + .list-view__item--start-section:not(:empty) {
  margin-top: calc(var(--list-view-gutter) * 3);
}

/* line 105, app/assets/stylesheets/lab/list_view.scss */
.vivid-lab .list-view__item--end-section + .list-view__fragment > .list-view__item:first-child:not(:empty),
.vivid-lab .list-view__item--end-section + .list-view__item:not(:empty) {
  margin-top: calc(var(--list-view-gutter) * 3);
}

/* line 112, app/assets/stylesheets/lab/list_view.scss */
.vivid-lab .list-view--gutters-none {
  --list-view-gutter: 0;
}

/* line 116, app/assets/stylesheets/lab/list_view.scss */
.vivid-lab .list-view--gutters-cozy {
  --list-view-gutter: 0.4rem;
}

/* line 120, app/assets/stylesheets/lab/list_view.scss */
.vivid-lab .list-view--gutters-compact {
  --list-view-gutter: 0.8rem;
}

/* line 124, app/assets/stylesheets/lab/list_view.scss */
.vivid-lab .list-view--gutters-inherit {
  --list-view-gutter: inherit;
}

/* line 128, app/assets/stylesheets/lab/list_view.scss */
.vivid-lab .list-view--gutters-normal {
  --list-view-gutter: 1.6rem;
}

/* line 132, app/assets/stylesheets/lab/list_view.scss */
.vivid-lab .list-view--gutters-loose {
  --list-view-gutter: 2.4rem;
}

/* line 136, app/assets/stylesheets/lab/list_view.scss */
.vivid-lab .list-view--gutters-medium {
  --list-view-gutter: 3.2rem;
}

/* line 140, app/assets/stylesheets/lab/list_view.scss */
.vivid-lab .list-view--gutters-large {
  --list-view-gutter: 6.4rem;
}

@media (min-width: 768px) {
  /* line 112, app/assets/stylesheets/lab/list_view.scss */
  .vivid-lab .list-view--gutters-none-sm {
    --list-view-gutter: 0;
  }
  /* line 116, app/assets/stylesheets/lab/list_view.scss */
  .vivid-lab .list-view--gutters-cozy-sm {
    --list-view-gutter: 0.4rem;
  }
  /* line 120, app/assets/stylesheets/lab/list_view.scss */
  .vivid-lab .list-view--gutters-compact-sm {
    --list-view-gutter: 0.8rem;
  }
  /* line 124, app/assets/stylesheets/lab/list_view.scss */
  .vivid-lab .list-view--gutters-inherit-sm {
    --list-view-gutter: inherit;
  }
  /* line 128, app/assets/stylesheets/lab/list_view.scss */
  .vivid-lab .list-view--gutters-normal-sm {
    --list-view-gutter: 1.6rem;
  }
  /* line 132, app/assets/stylesheets/lab/list_view.scss */
  .vivid-lab .list-view--gutters-loose-sm {
    --list-view-gutter: 2.4rem;
  }
  /* line 136, app/assets/stylesheets/lab/list_view.scss */
  .vivid-lab .list-view--gutters-medium-sm {
    --list-view-gutter: 3.2rem;
  }
  /* line 140, app/assets/stylesheets/lab/list_view.scss */
  .vivid-lab .list-view--gutters-large-sm {
    --list-view-gutter: 6.4rem;
  }
}

@media (min-width: 992px) {
  /* line 112, app/assets/stylesheets/lab/list_view.scss */
  .vivid-lab .list-view--gutters-none-md {
    --list-view-gutter: 0;
  }
  /* line 116, app/assets/stylesheets/lab/list_view.scss */
  .vivid-lab .list-view--gutters-cozy-md {
    --list-view-gutter: 0.4rem;
  }
  /* line 120, app/assets/stylesheets/lab/list_view.scss */
  .vivid-lab .list-view--gutters-compact-md {
    --list-view-gutter: 0.8rem;
  }
  /* line 124, app/assets/stylesheets/lab/list_view.scss */
  .vivid-lab .list-view--gutters-inherit-md {
    --list-view-gutter: inherit;
  }
  /* line 128, app/assets/stylesheets/lab/list_view.scss */
  .vivid-lab .list-view--gutters-normal-md {
    --list-view-gutter: 1.6rem;
  }
  /* line 132, app/assets/stylesheets/lab/list_view.scss */
  .vivid-lab .list-view--gutters-loose-md {
    --list-view-gutter: 2.4rem;
  }
  /* line 136, app/assets/stylesheets/lab/list_view.scss */
  .vivid-lab .list-view--gutters-medium-md {
    --list-view-gutter: 3.2rem;
  }
  /* line 140, app/assets/stylesheets/lab/list_view.scss */
  .vivid-lab .list-view--gutters-large-md {
    --list-view-gutter: 6.4rem;
  }
}

@media (min-width: 1200px) {
  /* line 112, app/assets/stylesheets/lab/list_view.scss */
  .vivid-lab .list-view--gutters-none-lg {
    --list-view-gutter: 0;
  }
  /* line 116, app/assets/stylesheets/lab/list_view.scss */
  .vivid-lab .list-view--gutters-cozy-lg {
    --list-view-gutter: 0.4rem;
  }
  /* line 120, app/assets/stylesheets/lab/list_view.scss */
  .vivid-lab .list-view--gutters-compact-lg {
    --list-view-gutter: 0.8rem;
  }
  /* line 124, app/assets/stylesheets/lab/list_view.scss */
  .vivid-lab .list-view--gutters-inherit-lg {
    --list-view-gutter: inherit;
  }
  /* line 128, app/assets/stylesheets/lab/list_view.scss */
  .vivid-lab .list-view--gutters-normal-lg {
    --list-view-gutter: 1.6rem;
  }
  /* line 132, app/assets/stylesheets/lab/list_view.scss */
  .vivid-lab .list-view--gutters-loose-lg {
    --list-view-gutter: 2.4rem;
  }
  /* line 136, app/assets/stylesheets/lab/list_view.scss */
  .vivid-lab .list-view--gutters-medium-lg {
    --list-view-gutter: 3.2rem;
  }
  /* line 140, app/assets/stylesheets/lab/list_view.scss */
  .vivid-lab .list-view--gutters-large-lg {
    --list-view-gutter: 6.4rem;
  }
}

/* line 2, app/assets/stylesheets/lab/embedded_map.scss */
.vivid-lab .embedded-map {
  --surface-outline-color: var(--surface-background-color);
  --surface-trim-color: rgba(var(--surface-bg-color), 0.5);
  border-radius: inherit;
  flex: 1 1 auto;
  position: relative;
  height: 100%;
}

/* line 12, app/assets/stylesheets/lab/embedded_map.scss */
.vivid-lab .embedded-map.surface--outlined, .vivid-lab .embedded-map.surface--trimmed {
  border-width: 0.1rem;
  border-style: solid;
}

/* line 20, app/assets/stylesheets/lab/embedded_map.scss */
.vivid-lab .embedded-map:focus-within [style~="pointer-events:"] {
  border: none !important;
}

/* line 26, app/assets/stylesheets/lab/embedded_map.scss */
.vivid-lab .embedded-map__marker {
  transition: transform 0.25s;
}

/* line 29, app/assets/stylesheets/lab/embedded_map.scss */
.vivid-lab .embedded-map__marker .family-map__map-icon__beacon,
.vivid-lab .embedded-map__marker .avatar {
  transform: translate(0px, 50%);
}

/* line 36, app/assets/stylesheets/lab/embedded_map.scss */
.vivid-lab .embedded-map--gesturing .embedded-map__marker {
  transition: none;
}

/* line 41, app/assets/stylesheets/lab/embedded_map.scss */
.vivid-lab .embedded-map__container {
  flex: 1 1 100%;
  display: flex;
  height: 100%;
  --horizontal-drawer-width: calc(min(33dvw, 33.6rem));
  --drawer-animation-duration: 300ms;
  --drawer-animation-timing: cubic-bezier(0.215, 0.61, 0.355, 1);
  position: relative;
  overflow: hidden;
}

/* line 53, app/assets/stylesheets/lab/embedded_map.scss */
.vivid-lab .embedded-map__container .surface__body {
  display: flex;
}

/* line 58, app/assets/stylesheets/lab/embedded_map.scss */
.vivid-lab .embedded-map__container--on-canvas {
  --canvas-map-height: calc(min(45vh, 45rem));
  --canvas-map-clearance-height: 5.6rem;
  flex: 0 0 auto;
  width: 100%;
  height: var(--canvas-map-height);
  flex-shrink: 0;
  flex-basis: var(--canvas-map-height);
  overflow: visible;
  display: block;
  outline: 0.1rem solid var(--surface-container-outline-color);
}

@media (min-width: 768px) {
  /* line 58, app/assets/stylesheets/lab/embedded_map.scss */
  .vivid-lab .embedded-map__container--on-canvas {
    --canvas-map-height: calc(min(40vh, 30rem));
    max-width: calc(80rem - var(--page-gutter) * 2);
    margin: var(--container-gutter) auto 0 auto;
    border-radius: 2rem;
  }
}

@media (max-width: 767px) {
  /* line 58, app/assets/stylesheets/lab/embedded_map.scss */
  .vivid-lab .embedded-map__container--on-canvas {
    margin: -2rem auto calc(var(--canvas-map-clearance-height) * -1) auto;
    border-radius: 2rem;
  }
}

/* line 83, app/assets/stylesheets/lab/embedded_map.scss */
.vivid-lab .embedded-map__container--on-canvas .embedded-map {
  border-radius: inherit;
  height: var(--canvas-map-height);
}

/* line 87, app/assets/stylesheets/lab/embedded_map.scss */
.vivid-lab .embedded-map__container--on-canvas .embedded-map .embedded-map__body {
  height: var(--canvas-map-height);
}

@media (max-width: 767px) {
  /* line 83, app/assets/stylesheets/lab/embedded_map.scss */
  .vivid-lab .embedded-map__container--on-canvas .embedded-map {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

@media (max-width: 767px) {
  /* line 97, app/assets/stylesheets/lab/embedded_map.scss */
  .vivid-lab .embedded-map__container--on-canvas .embedded-map__controls {
    top: calc( var(--vertical-padding, 0.8rem) + 2rem);
  }
}

/* line 106, app/assets/stylesheets/lab/embedded_map.scss */
.vivid-lab .embedded-map__drawer {
  --drawer-mobile-open-height: 100vh;
  background: rgba(244, 242, 241, 0.5);
  backdrop-filter: brightness(1.1) blur(1.6rem);
  -webkit-backdrop-filter: brightness(1.1) blur(1.6rem);
  touch-action: none;
  padding: 0.8rem 1rem 1.6rem;
  position: absolute;
  display: flex;
  overflow: hidden;
  min-width: 0;
}

@media (prefers-reduced-transparency) {
  /* line 106, app/assets/stylesheets/lab/embedded_map.scss */
  .vivid-lab .embedded-map__drawer {
    background: #F4F2F1;
  }
}

/* line 118, app/assets/stylesheets/lab/embedded_map.scss */
.vivid-lab .embedded-map__drawer > .list-view {
  flex: 1 1 100%;
  padding-bottom: 1.6rem;
}

/* line 123, app/assets/stylesheets/lab/embedded_map.scss */
.vivid-lab .embedded-map__drawer.open .hidden-open {
  display: none;
}

/* line 127, app/assets/stylesheets/lab/embedded_map.scss */
.vivid-lab .embedded-map__drawer.closed .hidden-closed {
  display: none;
}

/* line 131, app/assets/stylesheets/lab/embedded_map.scss */
.vivid-lab .embedded-map__drawer.open > .list-view {
  overflow-y: auto;
}

/* line 135, app/assets/stylesheets/lab/embedded_map.scss */
.vivid-lab .embedded-map__drawer.open--instant {
  transition: none;
}

@media screen and (min-width: 768px) {
  /* line 140, app/assets/stylesheets/lab/embedded_map.scss */
  .vivid-lab .embedded-map__drawer {
    right: calc( ((var(--horizontal-drawer-width)) * -1) + 3.6rem);
    width: var(--horizontal-drawer-width);
    top: calc(var(--page-gutter) / 2);
    bottom: calc(var(--page-gutter) / 2);
    flex-direction: row;
    transition: right var(--drawer-animation-duration) var(--drawer-animation-timing);
    border-radius: 2rem;
  }
  /* line 154, app/assets/stylesheets/lab/embedded_map.scss */
  .vivid-lab .embedded-map__drawer.open {
    right: calc(var(--page-gutter) / 2);
  }
}

@media (max-width: 767px) {
  /* line 160, app/assets/stylesheets/lab/embedded_map.scss */
  .vivid-lab .embedded-map__drawer {
    padding-top: 0.4rem;
    padding-left: calc(var(--page-gutter));
    padding-right: calc(var(--page-gutter));
    border-top: solid 0.1rem var(--surface-trim-color);
    flex-direction: column;
    transition: height var(--drawer-animation-duration) var(--drawer-animation-timing);
    bottom: 0;
    width: 100%;
    height: 21.6rem;
    max-height: calc( 100vh - var(--sticky-footer-height, 10vh) - var(--sticky-max-nav-height, 10vh) - 3.2rem);
    border-radius: 2rem 2rem 0 0;
  }
  /* line 179, app/assets/stylesheets/lab/embedded_map.scss */
  .vivid-lab .embedded-map__drawer:after {
    content: "";
    display: block;
    clear: both;
    height: 1px;
    flex: 1 0 auto;
  }
  /* line 188, app/assets/stylesheets/lab/embedded_map.scss */
  .vivid-lab .embedded-map__drawer.open {
    height: var(--drawer-mobile-open-height);
  }
}

/* line 193, app/assets/stylesheets/lab/embedded_map.scss */
.vivid-lab .embedded-map__drawer .embedded-map__drawer-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
}

@media screen and (max-width: 767px) {
  /* line 193, app/assets/stylesheets/lab/embedded_map.scss */
  .vivid-lab .embedded-map__drawer .embedded-map__drawer-toggle {
    margin-top: -0.5rem;
    padding-top: 0;
    padding-bottom: 0.5rem;
  }
}

@media screen and (min-width: 768px) {
  /* line 207, app/assets/stylesheets/lab/embedded_map.scss */
  .vivid-lab .embedded-map__drawer .embedded-map__drawer-toggle {
    height: 100%;
    width: 3.6rem;
    flex: 0 0 3.6rem;
    margin-left: -1rem;
  }
}

/* line 216, app/assets/stylesheets/lab/embedded_map.scss */
.vivid-lab .embedded-map__drawer .embedded-map__drawer-toggle .icon--sax-chevron-up {
  transition: transform ease-in-out 0.15s;
  transform-origin: 50% 45%;
}

@media screen and (max-width: 767px) {
  /* line 222, app/assets/stylesheets/lab/embedded_map.scss */
  .vivid-lab .embedded-map__drawer.open .embedded-map__drawer-toggle .icon--sax-chevron-up {
    transform: rotate(180deg) translateY(-0.2em);
  }
}

@media screen and (min-width: 768px) {
  /* line 228, app/assets/stylesheets/lab/embedded_map.scss */
  .vivid-lab .embedded-map__drawer .embedded-map__drawer-toggle .icon--sax-chevron-up {
    transform: rotate(-90deg) translateY(-0.2em);
  }
  /* line 232, app/assets/stylesheets/lab/embedded_map.scss */
  .vivid-lab .embedded-map__drawer.open .embedded-map__drawer-toggle .icon--sax-chevron-up {
    transform: rotate(90deg) translateY(-0.2em);
  }
}

/* line 239, app/assets/stylesheets/lab/embedded_map.scss */
.vivid-lab .card__media:not(:last-child) .embedded-map.surface--outlined, .vivid-lab .card__media:not(:last-child) .embedded-map.surface--trimmed {
  border-bottom: none;
}

/* line 245, app/assets/stylesheets/lab/embedded_map.scss */
.vivid-lab .embedded-map__body {
  border-radius: inherit;
  flex: 1 1 auto;
  height: 100%;
}

/* line 252, app/assets/stylesheets/lab/embedded_map.scss */
.vivid-lab .embedded-map--ratio-square .embedded-map__body {
  padding-bottom: 100%;
}

/* line 258, app/assets/stylesheets/lab/embedded_map.scss */
.vivid-lab .embedded-map--ratio-landscape .embedded-map__body {
  padding-bottom: 75%;
}

/* line 264, app/assets/stylesheets/lab/embedded_map.scss */
.vivid-lab .embedded-map--ratio-portrait .embedded-map__body {
  padding-bottom: 133.3333333333%;
}

/* line 270, app/assets/stylesheets/lab/embedded_map.scss */
.vivid-lab .embedded-map--ratio-widescreen .embedded-map__body {
  padding-bottom: 56.25%;
}

/* line 276, app/assets/stylesheets/lab/embedded_map.scss */
.vivid-lab .embedded-map--ratio-masthead .embedded-map__body {
  padding-bottom: 42.8571428571%;
}

/* line 282, app/assets/stylesheets/lab/embedded_map.scss */
.vivid-lab .embedded-map--ratio-ribbon .embedded-map__body {
  padding-bottom: 30%;
}

/* line 287, app/assets/stylesheets/lab/embedded_map.scss */
.vivid-lab .embedded-map--ratio-fill {
  flex: 1 1 100%;
  height: 100%;
}

/* line 292, app/assets/stylesheets/lab/embedded_map.scss */
.vivid-lab .embedded-map--shape-rounded {
  border-radius: 1.6rem;
  overflow: hidden;
  isolation: isolate;
}

/* line 299, app/assets/stylesheets/lab/embedded_map.scss */
.vivid-lab .embedded-map--shape-rounded-large {
  border-radius: 2rem;
  overflow: hidden;
  isolation: isolate;
}

/* line 306, app/assets/stylesheets/lab/embedded_map.scss */
.vivid-lab .embedded-map__controls {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: var(--vertical-padding, 0.8rem) var(--horizontal-padding, 1rem);
}

/* line 315, app/assets/stylesheets/lab/embedded_map.scss */
.vivid-lab .embedded-map__controls .embedded-map__controls__body {
  margin: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* line 321, app/assets/stylesheets/lab/embedded_map.scss */
.vivid-lab .embedded-map__controls .embedded-map__controls__body > .card {
  flex: 0 0 auto;
}

/* line 2, app/assets/stylesheets/lab/tabs.scss */
.vivid-lab .tabs {
  padding: 0;
  display: flex;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  border-radius: calc(var(--control-height) / 2);
  color: inherit;
  max-width: 100%;
  overflow: visible;
}

/* line 13, app/assets/stylesheets/lab/tabs.scss */
.vivid-lab .tabs.surface {
  background-color: var(--surface-container-shade-color);
  border: solid 0.2rem transparent;
}

/* line 18, app/assets/stylesheets/lab/tabs.scss */
.vivid-lab .tabs .tab {
  display: inline-flex;
  border-radius: calc(var(--button-height, 5.6rem) / 2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* line 26, app/assets/stylesheets/lab/tabs.scss */
.vivid-lab .tabs .tab:not(.tab--active) {
  color: inherit;
  color: var(--surface-deemphasized-color, inherit);
  background-color: transparent;
}

/* line 33, app/assets/stylesheets/lab/tabs.scss */
.vivid-lab .tabs .tab__icon:not(:last-child) {
  margin-right: 0.225em;
}

/* line 37, app/assets/stylesheets/lab/tabs.scss */
.vivid-lab .tabs .tab__chip:not(:first-child) {
  margin-left: 0.8rem;
}

/* line 41, app/assets/stylesheets/lab/tabs.scss */
.vivid-lab .tabs .tab__label {
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: nowrap;
}

/* line 48, app/assets/stylesheets/lab/tabs.scss */
.vivid-lab .tabs--size-large {
  --control-height: 5.6rem;
  border-width: 0.4rem;
}

/* line 53, app/assets/stylesheets/lab/tabs.scss */
.vivid-lab .tabs--size-large .tab {
  --button-height: calc(4.8rem - var(--surface-border-width, 0rem) * 2);
  --natural-button-height: 4.8rem;
  min-height: 4.8rem;
  padding: calc((var(--button-height) - 2.4rem) / 2) 2.4rem;
  line-height: 2.4rem;
  font-size: 1.6rem;
}

/* line 58, app/assets/stylesheets/lab/tabs.scss */
.vivid-lab .tabs--size-medium {
  --control-height: 4rem;
}

/* line 61, app/assets/stylesheets/lab/tabs.scss */
.vivid-lab .tabs--size-medium .tab {
  --button-height: calc(3.6rem - var(--surface-border-width, 0rem) * 2);
  --natural-button-height: 3.6rem;
  min-height: 3.6rem;
  padding: calc((var(--button-height) - 2rem) / 2) 2rem;
  line-height: 2rem;
  font-size: 1.4rem;
}

/* line 70, app/assets/stylesheets/lab/tabs.scss */
.vivid-lab .tabs--size-small {
  --control-height: 3.2rem;
}

/* line 73, app/assets/stylesheets/lab/tabs.scss */
.vivid-lab .tabs--size-small .tab {
  --button-height: calc(2.8rem - var(--surface-border-width, 0rem) * 2);
  --natural-button-height: 2.8rem;
  min-height: 2.8rem;
  padding: calc((var(--button-height) - 1.6rem) / 2) 1.2rem;
  line-height: 1.6rem;
  font-size: 1.2rem;
  justify-content: center;
}

/* line 85, app/assets/stylesheets/lab/tabs.scss */
.vivid-lab .tabs--shape-circle .tab {
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}

/* line 94, app/assets/stylesheets/lab/tabs.scss */
.vivid-lab .tabs--layout-left .tab {
  flex: 0 1 auto;
}

/* line 99, app/assets/stylesheets/lab/tabs.scss */
.vivid-lab .tabs--layout-right {
  justify-content: flex-end;
}

/* line 102, app/assets/stylesheets/lab/tabs.scss */
.vivid-lab .tabs--layout-right .tab {
  flex: 0 1 auto;
}

/* line 108, app/assets/stylesheets/lab/tabs.scss */
.vivid-lab .tabs--layout-justify .tab {
  flex: 1 1 0;
}

/* line 113, app/assets/stylesheets/lab/tabs.scss */
.vivid-lab .tabs--layout-inline {
  display: inline-flex;
}

/* line 116, app/assets/stylesheets/lab/tabs.scss */
.vivid-lab .tabs--layout-inline .tab {
  flex: 0 1 auto;
}

/* line 121, app/assets/stylesheets/lab/tabs.scss */
.vivid-lab .tabs--layout-vertical {
  flex-direction: column;
}

/* line 124, app/assets/stylesheets/lab/tabs.scss */
.vivid-lab .tabs--layout-vertical .tab {
  flex: 1 1 0;
  width: auto;
}

@media (min-width: 768px) {
  /* line 94, app/assets/stylesheets/lab/tabs.scss */
  .vivid-lab .tabs--layout-left-sm .tab {
    flex: 0 1 auto;
  }
  /* line 99, app/assets/stylesheets/lab/tabs.scss */
  .vivid-lab .tabs--layout-right-sm {
    justify-content: flex-end;
  }
  /* line 102, app/assets/stylesheets/lab/tabs.scss */
  .vivid-lab .tabs--layout-right-sm .tab {
    flex: 0 1 auto;
  }
  /* line 108, app/assets/stylesheets/lab/tabs.scss */
  .vivid-lab .tabs--layout-justify-sm .tab {
    flex: 1 1 0;
  }
  /* line 113, app/assets/stylesheets/lab/tabs.scss */
  .vivid-lab .tabs--layout-inline-sm {
    display: inline-flex;
  }
  /* line 116, app/assets/stylesheets/lab/tabs.scss */
  .vivid-lab .tabs--layout-inline-sm .tab {
    flex: 0 1 auto;
  }
  /* line 121, app/assets/stylesheets/lab/tabs.scss */
  .vivid-lab .tabs--layout-vertical-sm {
    flex-direction: column;
  }
  /* line 124, app/assets/stylesheets/lab/tabs.scss */
  .vivid-lab .tabs--layout-vertical-sm .tab {
    flex: 1 1 0;
    width: auto;
  }
}

@media (min-width: 992px) {
  /* line 94, app/assets/stylesheets/lab/tabs.scss */
  .vivid-lab .tabs--layout-left-md .tab {
    flex: 0 1 auto;
  }
  /* line 99, app/assets/stylesheets/lab/tabs.scss */
  .vivid-lab .tabs--layout-right-md {
    justify-content: flex-end;
  }
  /* line 102, app/assets/stylesheets/lab/tabs.scss */
  .vivid-lab .tabs--layout-right-md .tab {
    flex: 0 1 auto;
  }
  /* line 108, app/assets/stylesheets/lab/tabs.scss */
  .vivid-lab .tabs--layout-justify-md .tab {
    flex: 1 1 0;
  }
  /* line 113, app/assets/stylesheets/lab/tabs.scss */
  .vivid-lab .tabs--layout-inline-md {
    display: inline-flex;
  }
  /* line 116, app/assets/stylesheets/lab/tabs.scss */
  .vivid-lab .tabs--layout-inline-md .tab {
    flex: 0 1 auto;
  }
  /* line 121, app/assets/stylesheets/lab/tabs.scss */
  .vivid-lab .tabs--layout-vertical-md {
    flex-direction: column;
  }
  /* line 124, app/assets/stylesheets/lab/tabs.scss */
  .vivid-lab .tabs--layout-vertical-md .tab {
    flex: 1 1 0;
    width: auto;
  }
}

@media (min-width: 1200px) {
  /* line 94, app/assets/stylesheets/lab/tabs.scss */
  .vivid-lab .tabs--layout-left-lg .tab {
    flex: 0 1 auto;
  }
  /* line 99, app/assets/stylesheets/lab/tabs.scss */
  .vivid-lab .tabs--layout-right-lg {
    justify-content: flex-end;
  }
  /* line 102, app/assets/stylesheets/lab/tabs.scss */
  .vivid-lab .tabs--layout-right-lg .tab {
    flex: 0 1 auto;
  }
  /* line 108, app/assets/stylesheets/lab/tabs.scss */
  .vivid-lab .tabs--layout-justify-lg .tab {
    flex: 1 1 0;
  }
  /* line 113, app/assets/stylesheets/lab/tabs.scss */
  .vivid-lab .tabs--layout-inline-lg {
    display: inline-flex;
  }
  /* line 116, app/assets/stylesheets/lab/tabs.scss */
  .vivid-lab .tabs--layout-inline-lg .tab {
    flex: 0 1 auto;
  }
  /* line 121, app/assets/stylesheets/lab/tabs.scss */
  .vivid-lab .tabs--layout-vertical-lg {
    flex-direction: column;
  }
  /* line 124, app/assets/stylesheets/lab/tabs.scss */
  .vivid-lab .tabs--layout-vertical-lg .tab {
    flex: 1 1 0;
    width: auto;
  }
}

/* line 3, app/assets/stylesheets/lab/pop_up_menu.scss */
.vivid-lab .pop-up-menu.pop-up-menu--variant-normal .pop-up-menu__menu[open] {
  opacity: 1;
  transform: translateY(0);
}

/* line 8, app/assets/stylesheets/lab/pop_up_menu.scss */
.vivid-lab .pop-up-menu.pop-up-menu--variant-normal .pop-up-menu__menu[open]::backdrop {
  opacity: 1;
}

/* line 13, app/assets/stylesheets/lab/pop_up_menu.scss */
.vivid-lab .pop-up-menu.pop-up-menu--variant-normal .pop-up-menu__menu {
  --container-gutter-vertical: 1.6rem;
  --container-gutter-horizontal: 1.6rem;
  --container-border-radius: 1.2rem;
  padding: 1.6rem 1.6rem;
  border-radius: 1.2rem;
  margin: 0;
  outline-color: var(--surface-focus-color);
  user-select: none;
  overflow-y: auto;
  overflow-x: clip;
  overscroll-behavior: contain;
  overflow-anchor: none;
  transition-property: opacity, transform, overlay, display;
  transition-behavior: allow-discrete;
  transition-timing-function: ease-in-out;
  transition-duration: 0.125s;
  opacity: 0;
  transform: translateY(-0.8rem);
  max-height: 95svh;
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  /* line 13, app/assets/stylesheets/lab/pop_up_menu.scss */
  .vivid-lab .pop-up-menu.pop-up-menu--variant-normal .pop-up-menu__menu {
    transition-duration: 0.00001s;
  }
}

/* line 45, app/assets/stylesheets/lab/pop_up_menu.scss */
.vivid-lab .pop-up-menu.pop-up-menu--variant-normal .pop-up-menu__menu::backdrop {
  opacity: 0;
  background: transparent;
}

@starting-style {
  /* line 52, app/assets/stylesheets/lab/pop_up_menu.scss */
  .vivid-lab .pop-up-menu.pop-up-menu--variant-normal .pop-up-menu__menu[open] {
    opacity: 0;
    transform: translateY(0.8rem);
  }
  /* line 57, app/assets/stylesheets/lab/pop_up_menu.scss */
  .vivid-lab .pop-up-menu.pop-up-menu--variant-normal .pop-up-menu__menu[open]::backdrop {
    opacity: 0;
  }
}

/* line 66, app/assets/stylesheets/lab/pop_up_menu.scss */
.vivid-lab .pop-up-menu.pop-up-menu--variant-normal .pop-up-menu__menu[closing] {
  opacity: 0;
  transform: translateY(0.8rem);
}

/* line 71, app/assets/stylesheets/lab/pop_up_menu.scss */
.vivid-lab .pop-up-menu.pop-up-menu--variant-normal .pop-up-menu__menu[closing]::backdrop {
  opacity: 0;
}

/* line 76, app/assets/stylesheets/lab/pop_up_menu.scss */
.vivid-lab .pop-up-menu.pop-up-menu--variant-normal .pop-up-menu__menu.popup-menu__menu--measuring {
  display: block;
  opacity: 0;
  top: 0;
  left: 0;
}

/* line 83, app/assets/stylesheets/lab/pop_up_menu.scss */
.vivid-lab .pop-up-menu.pop-up-menu--variant-normal .pop-up-menu__menu turbo-frame[loading="lazy"] {
  display: none;
}

/* line 89, app/assets/stylesheets/lab/pop_up_menu.scss */
.vivid-lab .pop-up-menu.pop-up-menu--variant-normal.pop-up-menu--width-normal .pop-up-menu__menu {
  max-width: calc(min(30ch, 100% - 2.4rem));
}

/* line 95, app/assets/stylesheets/lab/pop_up_menu.scss */
.vivid-lab .pop-up-menu.pop-up-menu--variant-normal.pop-up-menu--width-wide .pop-up-menu__menu {
  max-width: calc(min(50ch, 100% - 2.4rem));
}

/* line 101, app/assets/stylesheets/lab/pop_up_menu.scss */
.vivid-lab .pop-up-menu.pop-up-menu--variant-normal.pop-up-menu--width-auto .pop-up-menu__menu {
  max-width: none;
}

/* line 106, app/assets/stylesheets/lab/pop_up_menu.scss */
.vivid-lab .pop-up-menu.pop-up-menu--variant-normal .pop-up-menu__menu__dismiss {
  display: none;
}

/* line 114, app/assets/stylesheets/lab/pop_up_menu.scss */
.vivid-lab .pop-up-menu.pop-up-menu--variant-custom .pop-up-menu__menu[open],
.vivid-lab .pop-up-menu.pop-up-menu--variant-picker .pop-up-menu__menu[open] {
  opacity: 1;
  transform: translateY(0);
}

/* line 118, app/assets/stylesheets/lab/pop_up_menu.scss */
.vivid-lab .pop-up-menu.pop-up-menu--variant-custom .pop-up-menu__menu[open]::backdrop,
.vivid-lab .pop-up-menu.pop-up-menu--variant-picker .pop-up-menu__menu[open]::backdrop {
  opacity: 1;
}

/* line 123, app/assets/stylesheets/lab/pop_up_menu.scss */
.vivid-lab .pop-up-menu.pop-up-menu--variant-custom .pop-up-menu__menu,
.vivid-lab .pop-up-menu.pop-up-menu--variant-picker .pop-up-menu__menu {
  --container-gutter-vertical: 1.6rem;
  --container-gutter-horizontal: 1.6rem;
  --container-border-radius: 1.2rem;
  padding: 1.6rem 1.6rem;
  border-radius: 1.2rem;
}

/* line 132, app/assets/stylesheets/lab/pop_up_menu.scss */
.vivid-lab .pop-up-menu.pop-up-menu--variant-custom .pop-up-menu__menu,
.vivid-lab .pop-up-menu.pop-up-menu--variant-picker .pop-up-menu__menu {
  margin: 0;
  outline-color: var(--surface-focus-color);
  user-select: none;
  overflow-y: auto;
  overflow-x: clip;
  overscroll-behavior: contain;
  -webkit-tap-highlight-color: transparent;
  transition-property: opacity, transform, overlay, display;
  transition-behavior: allow-discrete;
  transition-timing-function: ease-in-out;
  transition-duration: 0.125s;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  /* line 132, app/assets/stylesheets/lab/pop_up_menu.scss */
  .vivid-lab .pop-up-menu.pop-up-menu--variant-custom .pop-up-menu__menu,
.vivid-lab .pop-up-menu.pop-up-menu--variant-picker .pop-up-menu__menu {
    transition-duration: 0.00001s;
  }
}

@media (max-width: 767px) {
  /* line 132, app/assets/stylesheets/lab/pop_up_menu.scss */
  .vivid-lab .pop-up-menu.pop-up-menu--variant-custom .pop-up-menu__menu,
.vivid-lab .pop-up-menu.pop-up-menu--variant-picker .pop-up-menu__menu {
    top: auto;
    width: auto;
    max-width: unset;
    max-height: 85svh;
    min-height: 11.2rem;
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0;
    outline: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-top: 3.2rem;
    padding-bottom: calc(max(1.6rem, var(--safe-area-inset-bottom)));
    transform: translateY(6.4rem);
    transition-duration: 0.25s;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  /* line 132, app/assets/stylesheets/lab/pop_up_menu.scss */
  .vivid-lab .pop-up-menu.pop-up-menu--variant-custom .pop-up-menu__menu,
.vivid-lab .pop-up-menu.pop-up-menu--variant-picker .pop-up-menu__menu {
    transition-duration: 0.00001s;
  }
}

@media (min-width: 768px) {
  /* line 132, app/assets/stylesheets/lab/pop_up_menu.scss */
  .vivid-lab .pop-up-menu.pop-up-menu--variant-custom .pop-up-menu__menu,
.vivid-lab .pop-up-menu.pop-up-menu--variant-picker .pop-up-menu__menu {
    max-height: 95svh;
    transform: translateY(-0.8rem);
  }
}

/* line 185, app/assets/stylesheets/lab/pop_up_menu.scss */
.vivid-lab .pop-up-menu.pop-up-menu--variant-custom .pop-up-menu__menu::backdrop,
.vivid-lab .pop-up-menu.pop-up-menu--variant-picker .pop-up-menu__menu::backdrop {
  opacity: 0;
}

@media (min-width: 768px) {
  /* line 185, app/assets/stylesheets/lab/pop_up_menu.scss */
  .vivid-lab .pop-up-menu.pop-up-menu--variant-custom .pop-up-menu__menu::backdrop,
.vivid-lab .pop-up-menu.pop-up-menu--variant-picker .pop-up-menu__menu::backdrop {
    background: transparent;
  }
}

@media (max-width: 767px) {
  /* line 185, app/assets/stylesheets/lab/pop_up_menu.scss */
  .vivid-lab .pop-up-menu.pop-up-menu--variant-custom .pop-up-menu__menu::backdrop,
.vivid-lab .pop-up-menu.pop-up-menu--variant-picker .pop-up-menu__menu::backdrop {
    background: rgba(244, 242, 241, 0.5);
    backdrop-filter: brightness(1.1) blur(1.6rem);
    -webkit-backdrop-filter: brightness(1.1) blur(1.6rem);
    opacity: 0;
    transition-property: opacity, transform, overlay, display;
    transition-behavior: allow-discrete;
    transition-timing-function: ease-in-out;
    transition-duration: 0.125s;
  }
}

@media (max-width: 767px) and (prefers-reduced-transparency) {
  /* line 185, app/assets/stylesheets/lab/pop_up_menu.scss */
  .vivid-lab .pop-up-menu.pop-up-menu--variant-custom .pop-up-menu__menu::backdrop,
.vivid-lab .pop-up-menu.pop-up-menu--variant-picker .pop-up-menu__menu::backdrop {
    background: #F4F2F1;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  /* line 185, app/assets/stylesheets/lab/pop_up_menu.scss */
  .vivid-lab .pop-up-menu.pop-up-menu--variant-custom .pop-up-menu__menu::backdrop,
.vivid-lab .pop-up-menu.pop-up-menu--variant-picker .pop-up-menu__menu::backdrop {
    transition-duration: 0.00001s;
  }
}

@starting-style {
  /* line 209, app/assets/stylesheets/lab/pop_up_menu.scss */
  .vivid-lab .pop-up-menu.pop-up-menu--variant-custom .pop-up-menu__menu[open],
.vivid-lab .pop-up-menu.pop-up-menu--variant-picker .pop-up-menu__menu[open] {
    opacity: 0;
  }
  @media (max-width: 767px) {
    /* line 209, app/assets/stylesheets/lab/pop_up_menu.scss */
    .vivid-lab .pop-up-menu.pop-up-menu--variant-custom .pop-up-menu__menu[open],
.vivid-lab .pop-up-menu.pop-up-menu--variant-picker .pop-up-menu__menu[open] {
      top: auto;
      width: auto;
      transform: translateY(6.4rem);
    }
  }
  @media (min-width: 768px) {
    /* line 209, app/assets/stylesheets/lab/pop_up_menu.scss */
    .vivid-lab .pop-up-menu.pop-up-menu--variant-custom .pop-up-menu__menu[open],
.vivid-lab .pop-up-menu.pop-up-menu--variant-picker .pop-up-menu__menu[open] {
      transform: translateY(-0.8rem);
    }
  }
  /* line 222, app/assets/stylesheets/lab/pop_up_menu.scss */
  .vivid-lab .pop-up-menu.pop-up-menu--variant-custom .pop-up-menu__menu[open]::backdrop,
.vivid-lab .pop-up-menu.pop-up-menu--variant-picker .pop-up-menu__menu[open]::backdrop {
    opacity: 0;
  }
}

/* line 231, app/assets/stylesheets/lab/pop_up_menu.scss */
.vivid-lab .pop-up-menu.pop-up-menu--variant-custom .pop-up-menu__menu[closing],
.vivid-lab .pop-up-menu.pop-up-menu--variant-picker .pop-up-menu__menu[closing] {
  opacity: 0;
  transform: translateY(6.4rem);
}

@media (min-width: 768px) {
  /* line 231, app/assets/stylesheets/lab/pop_up_menu.scss */
  .vivid-lab .pop-up-menu.pop-up-menu--variant-custom .pop-up-menu__menu[closing],
.vivid-lab .pop-up-menu.pop-up-menu--variant-picker .pop-up-menu__menu[closing] {
    transform: translateY(1.6rem);
  }
}

/* line 239, app/assets/stylesheets/lab/pop_up_menu.scss */
.vivid-lab .pop-up-menu.pop-up-menu--variant-custom .pop-up-menu__menu[closing]::backdrop,
.vivid-lab .pop-up-menu.pop-up-menu--variant-picker .pop-up-menu__menu[closing]::backdrop {
  opacity: 0;
}

/* line 244, app/assets/stylesheets/lab/pop_up_menu.scss */
.vivid-lab .pop-up-menu.pop-up-menu--variant-custom .pop-up-menu__menu.popup-menu__menu--measuring,
.vivid-lab .pop-up-menu.pop-up-menu--variant-picker .pop-up-menu__menu.popup-menu__menu--measuring {
  display: block;
  opacity: 0;
  top: 0;
  left: 0;
}

@media (max-width: 767px) {
  /* line 252, app/assets/stylesheets/lab/pop_up_menu.scss */
  .vivid-lab .pop-up-menu.pop-up-menu--variant-custom .pop-up-menu__menu__dismiss,
.vivid-lab .pop-up-menu.pop-up-menu--variant-picker .pop-up-menu__menu__dismiss {
    position: absolute;
    top: 0.8rem;
    height: 0.6rem;
    width: 4.8rem;
    left: calc((100% - 4.8rem) / 2);
    border-radius: 0.6rem;
    border: none;
    background-color: var(--surface-outline-color);
    padding: 0;
    display: block;
  }
}

@media (min-width: 768px) {
  /* line 252, app/assets/stylesheets/lab/pop_up_menu.scss */
  .vivid-lab .pop-up-menu.pop-up-menu--variant-custom .pop-up-menu__menu__dismiss,
.vivid-lab .pop-up-menu.pop-up-menu--variant-picker .pop-up-menu__menu__dismiss {
    display: none;
  }
}

@media (min-width: 768px) {
  /* line 274, app/assets/stylesheets/lab/pop_up_menu.scss */
  .vivid-lab .pop-up-menu.pop-up-menu--variant-picker.pop-up-menu--width-normal .pop-up-menu__menu {
    max-width: calc(min(30ch, 100% - 2.4rem));
  }
  /* line 280, app/assets/stylesheets/lab/pop_up_menu.scss */
  .vivid-lab .pop-up-menu.pop-up-menu--variant-picker.pop-up-menu--width-medium .pop-up-menu__menu {
    max-width: calc(min(40ch, 100% - 2.4rem));
  }
  /* line 286, app/assets/stylesheets/lab/pop_up_menu.scss */
  .vivid-lab .pop-up-menu.pop-up-menu--variant-picker.pop-up-menu--width-large .pop-up-menu__menu {
    max-width: calc(min(50ch, 100% - 2.4rem));
  }
  /* line 292, app/assets/stylesheets/lab/pop_up_menu.scss */
  .vivid-lab .pop-up-menu.pop-up-menu--variant-picker.pop-up-menu--fixed-width .pop-up-menu__menu {
    width: auto;
  }
  /* line 298, app/assets/stylesheets/lab/pop_up_menu.scss */
  .vivid-lab .pop-up-menu.pop-up-menu--variant-picker.pop-up-menu--width-auto .pop-up-menu__menu {
    max-width: none;
  }
}

/* line 306, app/assets/stylesheets/lab/pop_up_menu.scss */
.vivid-lab .pop-up-menu.pop-up-menu--variant-normal.pop-up-menu--width-normal .pop-up-menu__menu {
  max-width: calc(min(30ch, 100% - 2.4rem));
}

/* line 312, app/assets/stylesheets/lab/pop_up_menu.scss */
.vivid-lab .pop-up-menu.pop-up-menu--variant-normal.pop-up-menu--width-medium .pop-up-menu__menu {
  max-width: calc(min(40ch, 100% - 2.4rem));
}

/* line 318, app/assets/stylesheets/lab/pop_up_menu.scss */
.vivid-lab .pop-up-menu.pop-up-menu--variant-normal.pop-up-menu--width-large .pop-up-menu__menu {
  max-width: calc(min(50ch, 100% - 2.4rem));
}

/* line 324, app/assets/stylesheets/lab/pop_up_menu.scss */
.vivid-lab .pop-up-menu.pop-up-menu--variant-normal.pop-up-menu--fixed-width .pop-up-menu__menu {
  width: auto;
}

/* line 330, app/assets/stylesheets/lab/pop_up_menu.scss */
.vivid-lab .pop-up-menu.pop-up-menu--variant-normal.pop-up-menu--width-auto .pop-up-menu__menu {
  max-width: none;
}

/* line 337, app/assets/stylesheets/lab/pop_up_menu.scss */
.vivid-lab .pop-up-menu.pop-up-menu--variant-custom > .pop-up-menu__menu {
  --container-gutter-vertical: 0;
  --container-gutter-horizontal: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  max-width: none;
}

/* line 348, app/assets/stylesheets/lab/pop_up_menu.scss */
.vivid-lab .pop-up-menu__menu.popup-menu__menu--repositioning[open] {
  transition-property: opacity, transform, top, overlay, display;
}

/* line 2, app/assets/stylesheets/lab/chip.scss */
.vivid-lab .chip {
  --contained-adornment-size: calc(1.6rem - var(--surface-border-width, 0px));
  --control-height: 2.4rem;
  --control-width: 2.4rem;
  --control-padding-vertical: 0.3rem;
  --control-padding-horizontal: 0.8rem;
  border-radius: var(--control-border-radius);
  max-width: 100%;
  min-width: var(--control-width);
  min-height: var(--control-height);
  padding: var(--control-padding-vertical) var(--control-padding-horizontal);
  text-align: center;
  text-wrap: balance;
  word-break: break-word;
  hyphens: auto;
  text-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-top: calc(var(--control-padding-vertical) * -1);
  margin-bottom: calc(var(--control-padding-vertical) * -1);
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
  touch-action: manipulation;
}

/* line 9, app/assets/stylesheets/lab/chip.scss */
.vivid-lab .chip.surface {
  --surface-border-width: 0px;
  font-size: 1.2rem;
  line-height: 1.6rem;
  font-weight: 600;
}

/* line 16, app/assets/stylesheets/lab/chip.scss */
.vivid-lab .chip.surface.surface--outlined {
  --surface-border-width: 0.2rem;
}

/* line 45, app/assets/stylesheets/lab/chip.scss */
.vivid-lab .chip.skeleton {
  min-width: 7ch;
  background-color: initial;
  height: var(--control-height);
}

/* line 50, app/assets/stylesheets/lab/chip.scss */
.vivid-lab .chip.skeleton:before {
  top: 0;
  bottom: 0;
}

/* line 57, app/assets/stylesheets/lab/chip.scss */
.vivid-lab .chip__body {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  justify-content: center;
}

/* line 63, app/assets/stylesheets/lab/chip.scss */
.vivid-lab .chip__body > .chip__icon {
  display: block;
}

/* line 65, app/assets/stylesheets/lab/chip.scss */
.vivid-lab .chip__body > .chip__icon > .icon {
  margin-left: calc( var(--control-padding-horizontal) * -1 + (var(--control-width) - var(--icon-size)) / 2);
  margin-right: calc( var(--control-padding-horizontal) * -1 + (var(--control-width) - var(--icon-size)) / 2);
}

/* line 75, app/assets/stylesheets/lab/chip.scss */
.vivid-lab .chip__body > .adorn.adorn--layout-left > .adorn__adornment > .chip__icon > .icon {
  margin-left: calc( var(--control-padding-horizontal) * -1 + (var(--control-width) - var(--icon-size)) / 2);
}

/* line 81, app/assets/stylesheets/lab/chip.scss */
.vivid-lab .chip__body > .adorn.adorn--layout-right > .adorn__adornment > .chip__icon > .icon {
  margin-right: calc( var(--control-padding-horizontal) * -1 + (var(--control-width) - var(--icon-size)) / 2);
}

/* line 88, app/assets/stylesheets/lab/chip.scss */
.vivid-lab .chip--wrap-none {
  text-wrap: nowrap;
}

/* line 91, app/assets/stylesheets/lab/chip.scss */
.vivid-lab .chip--wrap-none > .chip__body > .chip__label {
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* line 97, app/assets/stylesheets/lab/chip.scss */
.vivid-lab .chip--wrap-none > .chip__body > .adorn > .adorn__body {
  text-wrap: none;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* line 104, app/assets/stylesheets/lab/chip.scss */
.vivid-lab .chip--display-inline {
  display: inline-flex;
}

/* line 108, app/assets/stylesheets/lab/chip.scss */
.vivid-lab .chip--display-block {
  display: flex;
}

/* line 112, app/assets/stylesheets/lab/chip.scss */
.vivid-lab .toolbar .chip {
  display: flex;
}

/* line 116, app/assets/stylesheets/lab/chip.scss */
.vivid-lab .chip--size-small {
  --contained-adornment-size: 1.6rem;
  --control-height: 2rem;
  --control-width: 2rem;
  --control-padding-vertical: 0.1rem;
  --control-padding-horizontal: 0.55rem;
  --control-border-radius: 0.6rem;
}

/* line 124, app/assets/stylesheets/lab/chip.scss */
.vivid-lab .chip--size-small.surface {
  font-size: 1rem;
  line-height: 1.6rem;
}

/* line 130, app/assets/stylesheets/lab/chip.scss */
.vivid-lab .chip--size-large {
  --contained-adornment-size: 2rem;
  --control-height: 3.2rem;
  --control-width: 3.2rem;
  --control-padding-vertical: 0.5rem;
  --control-padding-horizontal: 1rem;
  --control-border-radius: 0.8rem;
}

/* line 138, app/assets/stylesheets/lab/chip.scss */
.vivid-lab .chip--size-large.surface {
  font-size: 1.4rem;
  line-height: 2rem;
}

/* line 144, app/assets/stylesheets/lab/chip.scss */
.vivid-lab .chip--shape-rounded {
  --control-border-radius: 0.6rem;
}

/* line 148, app/assets/stylesheets/lab/chip.scss */
.vivid-lab .chip--shape-pill {
  --control-border-radius: calc(var(--control-height) / 2);
}

/* line 151, app/assets/stylesheets/lab/chip.scss */
.vivid-lab .chip--shape-pill .chip__body {
  justify-content: center;
}

/* line 155, app/assets/stylesheets/lab/chip.scss */
.vivid-lab .chip--shape-pill.skeleton {
  min-width: 4ch;
}

/* line 160, app/assets/stylesheets/lab/chip.scss */
.vivid-lab .chip--shape-circle {
  --control-border-radius: calc(var(--control-height) / 2);
  width: var(--control-width);
  height: var(--control-width);
  padding-left: 0;
  padding-right: 0;
}

/* line 166, app/assets/stylesheets/lab/chip.scss */
.vivid-lab .chip--shape-circle .chip__body {
  justify-content: center;
}

/* line 170, app/assets/stylesheets/lab/chip.scss */
.vivid-lab .chip--shape-circle.skeleton {
  min-width: var(--control-width);
}

/* line 2, app/assets/stylesheets/lab/modal.scss */
.vivid-lab .modal:not([open]) {
  display: none;
}

/* line 7, app/assets/stylesheets/lab/modal.scss */
.vivid-lab .modal[open] {
  opacity: 1;
  transform: translateY(0);
  z-index: 1;
}

/* line 12, app/assets/stylesheets/lab/modal.scss */
.vivid-lab .modal[open]::backdrop {
  opacity: 1;
}

/* line 17, app/assets/stylesheets/lab/modal.scss */
.vivid-lab .modal {
  --container-sticky-top-height: 0px;
  --container-sticky-bottom-height: 0px;
  --container-gutter-vertical: 0px;
  --container-gutter-horizontal: 0px;
  --container-border-radius: 2rem;
  position: fixed;
  height: fit-content;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: none;
  border-radius: 2rem;
  background: transparent;
  min-width: calc(min(30ch, 100dvw));
  overflow: visible;
  transition-property: opacity, transform, overlay, display;
  transition-behavior: allow-discrete;
  transition-timing-function: cubic-bezier(0.37, 1.22, 0.6, 1.61);
  transition-duration: 0.25s;
  opacity: 0;
  transform: translateY(-1.6rem);
  -webkit-tap-highlight-color: transparent;
}

/* line 43, app/assets/stylesheets/lab/modal.scss */
.vivid-lab .modal .card__dismiss [data-action~="modal#dismiss"] {
  pointer-events: auto;
  z-index: 1;
}

/* line 49, app/assets/stylesheets/lab/modal.scss */
.vivid-lab .modal > turbo-frame {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1 1 auto;
}

/* line 56, app/assets/stylesheets/lab/modal.scss */
.vivid-lab .modal > turbo-frame > .card.card--height-fixed,
.vivid-lab .modal > .card.card--height-fixed {
  height: calc(min(75dvh, 67.2rem));
  min-height: calc(min(75dvh, 67.2rem));
  max-height: calc(min(75dvh, 67.2rem));
  flex: 0 0 calc(min(75dvh, 67.2rem));
}

@media (prefers-reduced-motion: reduce) {
  /* line 17, app/assets/stylesheets/lab/modal.scss */
  .vivid-lab .modal {
    transition-duration: 0.00001s;
  }
}

/* line 74, app/assets/stylesheets/lab/modal.scss */
.vivid-lab .modal::backdrop {
  background: rgba(244, 242, 241, 0.5);
  backdrop-filter: brightness(1.1) blur(1.6rem);
  -webkit-backdrop-filter: brightness(1.1) blur(1.6rem);
  transition-property: opacity, transform, overlay, display;
  transition-behavior: allow-discrete;
  transition-timing-function: ease-in-out;
  transition-duration: 0.125s;
  opacity: 0;
}

@media (prefers-reduced-transparency) {
  /* line 74, app/assets/stylesheets/lab/modal.scss */
  .vivid-lab .modal::backdrop {
    background: #F4F2F1;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 74, app/assets/stylesheets/lab/modal.scss */
  .vivid-lab .modal::backdrop {
    transition-duration: 0.00001s;
  }
}

/* line 89, app/assets/stylesheets/lab/modal.scss */
.vivid-lab .modal > turbo-frame > .card,
.vivid-lab .modal > .card {
  outline-color: var(--surface-focus-color);
  height: fit-content;
  width: 100%;
  flex: 0 1 min-content;
  transition: max-height 0.125s ease-in-out, min-height 0.125s ease-in-out;
  max-height: 100dvh;
  min-height: 0;
}

/* line 103, app/assets/stylesheets/lab/modal.scss */
.vivid-lab .modal > turbo-frame > .card > .card__body,
.vivid-lab .modal > .card > .card__body {
  overflow: auto;
  overscroll-behavior: contain;
  flex: 1 1 auto;
}

/* line 110, app/assets/stylesheets/lab/modal.scss */
.vivid-lab .modal > turbo-frame > .card.modal--height-transition > .card__body,
.vivid-lab .modal > .card.modal--height-transition > .card__body {
  overflow: hidden;
}

@starting-style {
  /* line 118, app/assets/stylesheets/lab/modal.scss */
  .vivid-lab .modal[open] {
    opacity: 0;
    transform: translateY(-1.6rem);
  }
  /* line 122, app/assets/stylesheets/lab/modal.scss */
  .vivid-lab .modal[open]::backdrop {
    opacity: 0;
  }
}

/* line 131, app/assets/stylesheets/lab/modal.scss */
.vivid-lab .modal[closing] {
  opacity: 0;
  transform: translateY(-1.6rem);
}

/* line 136, app/assets/stylesheets/lab/modal.scss */
.vivid-lab .modal[closing]::backdrop {
  opacity: 0;
}

/* line 142, app/assets/stylesheets/lab/modal.scss */
.vivid-lab .modal--type-overlay,
.vivid-lab .modal--type-confirmation,
.vivid-lab .modal--type-confirmation_sheet,
.vivid-lab .modal--type-sheet,
.vivid-lab .modal--type-dialog {
  --dialog-width: 57.6rem;
  max-width: calc(min(100dvw, var(--dialog-width)) - var(--page-gutter) * 2);
  margin-left: auto;
  margin-right: auto;
  width: var(--dialog-width, auto);
}

/* line 151, app/assets/stylesheets/lab/modal.scss */
.vivid-lab .modal--type-overlay,
.vivid-lab .modal--type-overlay > turbo-frame,
.vivid-lab .modal--type-confirmation,
.vivid-lab .modal--type-confirmation > turbo-frame,
.vivid-lab .modal--type-confirmation_sheet,
.vivid-lab .modal--type-confirmation_sheet > turbo-frame,
.vivid-lab .modal--type-sheet,
.vivid-lab .modal--type-sheet > turbo-frame,
.vivid-lab .modal--type-dialog,
.vivid-lab .modal--type-dialog > turbo-frame {
  max-height: calc(100dvh - var(--page-gutter) * 2 - var(--safe-area-inset-top));
}

/* line 160, app/assets/stylesheets/lab/modal.scss */
.vivid-lab .modal--type-overlay > turbo-frame,
.vivid-lab .modal--type-confirmation > turbo-frame,
.vivid-lab .modal--type-confirmation_sheet > turbo-frame,
.vivid-lab .modal--type-sheet > turbo-frame,
.vivid-lab .modal--type-dialog > turbo-frame {
  align-items: flex-end;
}

@media (min-width: 768px) {
  /* line 142, app/assets/stylesheets/lab/modal.scss */
  .vivid-lab .modal--type-overlay,
.vivid-lab .modal--type-confirmation,
.vivid-lab .modal--type-confirmation_sheet,
.vivid-lab .modal--type-sheet,
.vivid-lab .modal--type-dialog {
    align-self: center;
    justify-self: center;
  }
  /* line 165, app/assets/stylesheets/lab/modal.scss */
  .vivid-lab .modal--type-overlay > turbo-frame,
.vivid-lab .modal--type-confirmation > turbo-frame,
.vivid-lab .modal--type-confirmation_sheet > turbo-frame,
.vivid-lab .modal--type-sheet > turbo-frame,
.vivid-lab .modal--type-dialog > turbo-frame {
    align-items: center;
  }
}

/* line 176, app/assets/stylesheets/lab/modal.scss */
.vivid-lab .modal--type-confirmation .button-set--stacked .button-set__buttons .button,
.vivid-lab .modal--type-confirmation .button-set--stacked-panel .button-set__buttons .button {
  width: 25ch;
}

/* line 182, app/assets/stylesheets/lab/modal.scss */
.vivid-lab .modal--type-confirmation {
  --dialog-width: 374px;
}

/* line 186, app/assets/stylesheets/lab/modal.scss */
.vivid-lab .modal--type-sheet {
  --dialog-width: 76.8rem;
}

/* line 190, app/assets/stylesheets/lab/modal.scss */
.vivid-lab .modal--type-overlay {
  --dialog-width: 100%;
}

/* line 194, app/assets/stylesheets/lab/modal.scss */
.vivid-lab .modal--type-cover {
  max-height: none;
  max-width: none;
  margin: 0;
  width: 100%;
  height: 100%;
}

/* line 201, app/assets/stylesheets/lab/modal.scss */
.vivid-lab .modal--type-cover .card__dismiss__content {
  padding-top: var(--safe-area-inset-top);
}

/* line 205, app/assets/stylesheets/lab/modal.scss */
.vivid-lab .modal--type-cover > turbo-frame > .card,
.vivid-lab .modal--type-cover > .card {
  flex: 1 0 100%;
  width: 100%;
  border: none;
  background: transparent;
  border-radius: 0;
  pointer-events: none;
}

/* line 214, app/assets/stylesheets/lab/modal.scss */
.vivid-lab .modal--type-cover > turbo-frame > .card > .card__subsurface,
.vivid-lab .modal--type-cover > .card > .card__subsurface {
  background: transparent;
  pointer-events: none;
}

/* line 218, app/assets/stylesheets/lab/modal.scss */
.vivid-lab .modal--type-cover > turbo-frame > .card > .card__subsurface > div,
.vivid-lab .modal--type-cover > .card > .card__subsurface > div {
  pointer-events: auto;
}

/* line 223, app/assets/stylesheets/lab/modal.scss */
.vivid-lab .modal--type-cover > turbo-frame > .card > .card__body,
.vivid-lab .modal--type-cover > .card > .card__body {
  display: grid;
  align-items: center;
  justify-content: center;
}

/* line 231, app/assets/stylesheets/lab/modal.scss */
.vivid-lab .modal--catch-tap {
  pointer-events: none;
  touch-action: none;
  cursor: wait;
}

@media (max-width: 767px) {
  /* line 239, app/assets/stylesheets/lab/modal.scss */
  .vivid-lab .modal > turbo-frame > .card.card--height-fixed,
.vivid-lab .modal > .card.card--height-fixed {
    height: calc(100dvh - var(--page-gutter) * 4 - var(--safe-area-inset-bottom));
    min-height: calc(100dvh - var(--page-gutter) * 4 - var(--safe-area-inset-bottom));
    max-height: calc(100dvh - var(--page-gutter) * 4 - var(--safe-area-inset-bottom));
    flex: 0 0 calc(100dvh - var(--page-gutter) * 4 - var(--safe-area-inset-bottom));
  }
  /* line 248, app/assets/stylesheets/lab/modal.scss */
  .vivid-lab .modal.modal--type-sheet,
.vivid-lab .modal.modal--type-confirmation_sheet {
    margin-top: auto;
    margin-bottom: 0;
    max-width: 100dvw;
    width: 100dvw;
  }
  /* line 255, app/assets/stylesheets/lab/modal.scss */
  .vivid-lab .modal.modal--type-sheet > turbo-frame > .card,
.vivid-lab .modal.modal--type-sheet > .card,
.vivid-lab .modal.modal--type-confirmation_sheet > turbo-frame > .card,
.vivid-lab .modal.modal--type-confirmation_sheet > .card {
    width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0;
  }
  /* line 264, app/assets/stylesheets/lab/modal.scss */
  .vivid-lab .modal--type-sheet,
.vivid-lab .modal--type-confirmation_sheet {
    transition-duration: 0.25s;
    transform: translateY(1.6rem);
  }
  /* line 266, app/assets/stylesheets/lab/modal.scss */
  .vivid-lab .modal--type-sheet[open],
.vivid-lab .modal--type-confirmation_sheet[open] {
    transform: translateY(0);
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  /* line 264, app/assets/stylesheets/lab/modal.scss */
  .vivid-lab .modal--type-sheet,
.vivid-lab .modal--type-confirmation_sheet {
    transition-duration: 0.00001s;
  }
}

@media (max-width: 767px) {
  @starting-style {
    /* line 280, app/assets/stylesheets/lab/modal.scss */
    .vivid-lab .modal--type-sheet[open],
.vivid-lab .modal--type-confirmation_sheet[open] {
      transform: translateY(1.6rem);
    }
  }
  /* line 288, app/assets/stylesheets/lab/modal.scss */
  .vivid-lab .modal--type-sheet[closing],
.vivid-lab .modal--type-confirmation_sheet[closing] {
    transform: translateY(1.6rem);
  }
  /* line 294, app/assets/stylesheets/lab/modal.scss */
  .vivid-lab .modal--type-sheet > turbo-frame > .card > .card__subsurface:last-child,
.vivid-lab .modal--type-sheet > .card > .card__subsurface:last-child,
.vivid-lab .modal--type-confirmation_sheet > turbo-frame > .card > .card__subsurface:last-child,
.vivid-lab .modal--type-confirmation_sheet > .card > .card__subsurface:last-child {
    padding-bottom: calc(max(var(--card-vertical-padding), var(--safe-area-inset-bottom)));
  }
}

/* line 301, app/assets/stylesheets/lab/modal.scss */
.vivid-lab #modals,
.vivid-lab #active-modals {
  position: absolute;
  overflow: clip;
  height: 0;
  width: 0;
}

/* line 2, app/assets/stylesheets/lab/circle_progress.scss */
.vivid-lab .circle-progress {
  --progress-value: var(--progress);
  --size: 10rem;
  --half-size: calc(var(--size) / 2);
  --stroke-width: 5px;
  --radius: calc((var(--size) - var(--stroke-width)) / 2);
  --circumference: calc(var(--radius) * pi * 2);
  --dash: calc((var(--progress-value) * var(--circumference)) / 100);
}

/* line 11, app/assets/stylesheets/lab/circle_progress.scss */
.vivid-lab .circle-progress--animated {
  animation: progress-animation 0.1s linear 0s 1 forwards;
}

/* line 15, app/assets/stylesheets/lab/circle_progress.scss */
.vivid-lab .circle-progress circle {
  cx: var(--half-size);
  cy: var(--half-size);
  r: var(--radius);
  stroke-width: var(--stroke-width);
  fill: none;
  stroke-linecap: round;
}

/* line 24, app/assets/stylesheets/lab/circle_progress.scss */
.vivid-lab .circle-progress__background {
  stroke: var(--surface-shade-color);
}

/* line 28, app/assets/stylesheets/lab/circle_progress.scss */
.vivid-lab .circle-progress__foreground {
  transform: rotate(-90deg);
  transform-origin: var(--half-size) var(--half-size);
  stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
  transition: stroke-dasharray 0.3s linear 0s;
  stroke: var(--surface-shade-color);
}

/* line 36, app/assets/stylesheets/lab/circle_progress.scss */
.vivid-lab .circle-progress__text {
  fill: currentColor;
}

/* line 40, app/assets/stylesheets/lab/circle_progress.scss */
.vivid-lab .circle-progress__text--numeric {
  font-size: 3rem;
}

/* line 44, app/assets/stylesheets/lab/circle_progress.scss */
.vivid-lab .circle-progress__text--non-numeric {
  font-size: 1.2rem;
}

/* line 49, app/assets/stylesheets/lab/circle_progress.scss */
.vivid-lab .circle-progress--variant-brand {
  stroke: #184BCD;
}

/* line 53, app/assets/stylesheets/lab/circle_progress.scss */
.vivid-lab .circle-progress--variant-positive {
  stroke: #016538;
}

/* line 57, app/assets/stylesheets/lab/circle_progress.scss */
.vivid-lab .circle-progress--variant-warning {
  stroke: #944600;
}

/* line 61, app/assets/stylesheets/lab/circle_progress.scss */
.vivid-lab .circle-progress--variant-negative {
  stroke: #B21919;
}

@property --progress-value {
  /* line 1, app/assets/stylesheets/lab/circle_progress.scss */
  .vivid-lab {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
  }
}

@keyframes progress-animation {
  from {
    --progress-value: 0;
  }
  to {
    --progress-value: var(--progress);
  }
}

/* line 2, app/assets/stylesheets/lab/progress_bar.scss */
.vivid-lab .progress-bar {
  --progress-bar-height: 3.64rem;
  --progress-bar-border-radius: 0.6rem;
  --progress-bar-border-width: 0.1rem;
  position: relative;
}

/* line 9, app/assets/stylesheets/lab/progress_bar.scss */
.vivid-lab .progress-bar.skeleton .progress-bar__bar_wrapper {
  visibility: hidden;
}

/* line 14, app/assets/stylesheets/lab/progress_bar.scss */
.vivid-lab .progress-bar__bar_wrapper {
  border-radius: inherit;
  position: relative;
  overflow: hidden;
}

/* line 20, app/assets/stylesheets/lab/progress_bar.scss */
.vivid-lab .progress-bar__bar_wrapper.surface--outlined.surface--color {
  border-width: var(--progress-bar-border-width);
}

/* line 24, app/assets/stylesheets/lab/progress_bar.scss */
.vivid-lab .progress-bar__bar {
  border-radius: inherit;
  height: var(--progress-bar-height);
}

/* line 30, app/assets/stylesheets/lab/progress_bar.scss */
.vivid-lab .progress-bar--size-xxsmall {
  --progress-bar-height: 0.66rem;
}

/* line 34, app/assets/stylesheets/lab/progress_bar.scss */
.vivid-lab .progress-bar--size-xsmall {
  --progress-bar-height: 0.792rem;
}

/* line 38, app/assets/stylesheets/lab/progress_bar.scss */
.vivid-lab .progress-bar--size-small {
  --progress-bar-height: 1.056rem;
}

/* line 42, app/assets/stylesheets/lab/progress_bar.scss */
.vivid-lab .progress-bar--size-medium {
  --progress-bar-height: 1.32rem;
  --progress-bar-border-width: 0.2rem;
}

/* line 47, app/assets/stylesheets/lab/progress_bar.scss */
.vivid-lab .progress-bar--size-large {
  --progress-bar-height: 2.376rem;
  --progress-bar-border-width: 0.2rem;
}

@media (min-width: 768px) {
  /* line 30, app/assets/stylesheets/lab/progress_bar.scss */
  .vivid-lab .progress-bar--size-xxsmall-sm {
    --progress-bar-height: 0.66rem;
  }
  /* line 34, app/assets/stylesheets/lab/progress_bar.scss */
  .vivid-lab .progress-bar--size-xsmall-sm {
    --progress-bar-height: 0.792rem;
  }
  /* line 38, app/assets/stylesheets/lab/progress_bar.scss */
  .vivid-lab .progress-bar--size-small-sm {
    --progress-bar-height: 1.056rem;
  }
  /* line 42, app/assets/stylesheets/lab/progress_bar.scss */
  .vivid-lab .progress-bar--size-medium-sm {
    --progress-bar-height: 1.32rem;
    --progress-bar-border-width: 0.2rem;
  }
  /* line 47, app/assets/stylesheets/lab/progress_bar.scss */
  .vivid-lab .progress-bar--size-large-sm {
    --progress-bar-height: 2.376rem;
    --progress-bar-border-width: 0.2rem;
  }
}

@media (min-width: 992px) {
  /* line 30, app/assets/stylesheets/lab/progress_bar.scss */
  .vivid-lab .progress-bar--size-xxsmall-md {
    --progress-bar-height: 0.66rem;
  }
  /* line 34, app/assets/stylesheets/lab/progress_bar.scss */
  .vivid-lab .progress-bar--size-xsmall-md {
    --progress-bar-height: 0.792rem;
  }
  /* line 38, app/assets/stylesheets/lab/progress_bar.scss */
  .vivid-lab .progress-bar--size-small-md {
    --progress-bar-height: 1.056rem;
  }
  /* line 42, app/assets/stylesheets/lab/progress_bar.scss */
  .vivid-lab .progress-bar--size-medium-md {
    --progress-bar-height: 1.32rem;
    --progress-bar-border-width: 0.2rem;
  }
  /* line 47, app/assets/stylesheets/lab/progress_bar.scss */
  .vivid-lab .progress-bar--size-large-md {
    --progress-bar-height: 2.376rem;
    --progress-bar-border-width: 0.2rem;
  }
}

@media (min-width: 1200px) {
  /* line 30, app/assets/stylesheets/lab/progress_bar.scss */
  .vivid-lab .progress-bar--size-xxsmall-lg {
    --progress-bar-height: 0.66rem;
  }
  /* line 34, app/assets/stylesheets/lab/progress_bar.scss */
  .vivid-lab .progress-bar--size-xsmall-lg {
    --progress-bar-height: 0.792rem;
  }
  /* line 38, app/assets/stylesheets/lab/progress_bar.scss */
  .vivid-lab .progress-bar--size-small-lg {
    --progress-bar-height: 1.056rem;
  }
  /* line 42, app/assets/stylesheets/lab/progress_bar.scss */
  .vivid-lab .progress-bar--size-medium-lg {
    --progress-bar-height: 1.32rem;
    --progress-bar-border-width: 0.2rem;
  }
  /* line 47, app/assets/stylesheets/lab/progress_bar.scss */
  .vivid-lab .progress-bar--size-large-lg {
    --progress-bar-height: 2.376rem;
    --progress-bar-border-width: 0.2rem;
  }
}

/* line 64, app/assets/stylesheets/lab/progress_bar.scss */
.vivid-lab .progress-bar--shape-square {
  border-radius: var(--progress-bar-border-radius);
}

/* line 67, app/assets/stylesheets/lab/progress_bar.scss */
.vivid-lab .progress-bar--shape-square .progress-bar__bar {
  border-radius: calc(var(--progress-bar-border-radius) - var(--progress-bar-border-width));
}

/* line 72, app/assets/stylesheets/lab/progress_bar.scss */
.vivid-lab .progress-bar--shape-round {
  border-radius: 50vh;
}

/* line 75, app/assets/stylesheets/lab/progress_bar.scss */
.vivid-lab .progress-bar--shape-round .progress-bar__bar {
  border-radius: 50vh 0 0 50vh;
}

/* line 80, app/assets/stylesheets/lab/progress_bar.scss */
.vivid-lab .progress-bar__milestone_hashes {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
}

/* line 89, app/assets/stylesheets/lab/progress_bar.scss */
.vivid-lab .progress-bar__milestone__hash {
  position: absolute;
  min-height: 100%;
  margin-left: -0.1rem;
  width: 0.2rem;
  background: var(--surface-outline-color);
}

/* line 97, app/assets/stylesheets/lab/progress_bar.scss */
.vivid-lab .progress-bar__milestone_labels {
  position: relative;
  background: transparent;
  margin-top: 0.25lh;
}

/* line 102, app/assets/stylesheets/lab/progress_bar.scss */
.vivid-lab .progress-bar__milestone_labels:after {
  content: "\0000a0";
}

/* line 107, app/assets/stylesheets/lab/progress_bar.scss */
.vivid-lab .progress-bar__milestone_label {
  background: transparent;
  color: var(--surface-deemphasized-color);
  position: absolute;
}

/* line 113, app/assets/stylesheets/lab/progress_bar.scss */
.vivid-lab .progress-bar__milestone_label__content {
  margin-left: -50%;
}

/* line 4, app/assets/stylesheets/lab/carousel.scss */
.vivid-lab .carousel {
  --carousel-escape-padding: 0px;
  --carousel-lead-padding: calc(
      max(
        (100cqw - var(--container-max-width)) / 2 + var(--container-gutter),
        var(--container-gutter)
      )
    );
  margin-left: calc(var(--container-gutter) * -1);
  margin-right: calc(var(--container-gutter) * -1);
  cursor: grab;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* line 21, app/assets/stylesheets/lab/carousel.scss */
.vivid-lab .carousel__items {
  scroll-padding: var(--container-gutter);
  padding-right: var(--container-gutter);
  padding-left: var(--carousel-lead-padding);
  scroll-padding-left: var(--carousel-lead-padding);
  padding-right: var(--carousel-lead-padding);
  scroll-padding-right: var(--carousel-lead-padding);
  padding-bottom: 0.4rem;
  margin-bottom: -0.4rem;
  padding-top: 0.4rem;
  margin-top: -0.4rem;
  display: flex;
  gap: var(--carousel-gutter);
  flex-wrap: nowrap;
  overflow-x: scroll;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
}

@media (prefers-reduced-motion: no-preference) {
  /* line 21, app/assets/stylesheets/lab/carousel.scss */
  .vivid-lab .carousel__items {
    scroll-behavior: smooth;
  }
}

/* line 51, app/assets/stylesheets/lab/carousel.scss */
.vivid-lab .carousel__items::-webkit-scrollbar {
  /* WebKit */
  -webkit-appearance: none;
  appearance: none;
  width: 0;
  height: 0;
  display: none;
}

/* line 62, app/assets/stylesheets/lab/carousel.scss */
.vivid-lab .carousel--shadow-allowed + * {
  isolation: isolate;
}

/* line 72, app/assets/stylesheets/lab/carousel.scss */
.vivid-lab .carousel--shadow-allowed .carousel__items {
  margin-top: -3.6rem;
  padding-top: 3.6rem;
  margin-bottom: -7.2rem;
  padding-bottom: 7.2rem;
}

/* line 78, app/assets/stylesheets/lab/carousel.scss */
.vivid-lab .carousel--shadow-allowed .carousel__items .carousel__item {
  position: relative;
}

/* line 85, app/assets/stylesheets/lab/carousel.scss */
.vivid-lab .carousel[swiping] .carousel--swiping {
  cursor: grabbing;
  scroll-snap-type: none;
}

/* line 89, app/assets/stylesheets/lab/carousel.scss */
.vivid-lab .carousel[swiping] .carousel--swiping .carousel__item {
  scroll-snap-stop: normal;
}

/* line 96, app/assets/stylesheets/lab/carousel.scss */
.vivid-lab .carousel--snap .carousel__items {
  scroll-snap-type: x mandatory;
}

/* line 100, app/assets/stylesheets/lab/carousel.scss */
.vivid-lab .carousel--snap .carousel__item {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* line 106, app/assets/stylesheets/lab/carousel.scss */
.vivid-lab .carousel__controls {
  margin-top: calc(var(--carousel-gutter) * 2);
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 0.8rem;
  cursor: auto;
}

/* line 115, app/assets/stylesheets/lab/carousel.scss */
.vivid-lab .carousel__control {
  height: 0.4rem;
  width: 0.4rem;
  border-radius: 0.4rem;
  background-color: var(--surface-trim-color);
  padding: 0;
  border: none;
  transition: all 0.125s linear;
  cursor: pointer;
}

/* line 126, app/assets/stylesheets/lab/carousel.scss */
.vivid-lab .carousel__control[aria-pressed="true"] {
  width: 1.6rem;
}

/* line 130, app/assets/stylesheets/lab/carousel.scss */
.vivid-lab .carousel__item {
  display: flex;
}

/* line 135, app/assets/stylesheets/lab/carousel.scss */
.vivid-lab .carousel--layout-fill .carousel__item {
  flex: 0 1 fit-content;
  max-width: calc(100% - var(--container-gutter));
  min-width: calc(100% - var(--container-gutter));
}

/* line 140, app/assets/stylesheets/lab/carousel.scss */
.vivid-lab .carousel--layout-fill .carousel__item > div {
  max-width: 100%;
  flex: 1 1 auto;
}

/* line 148, app/assets/stylesheets/lab/carousel.scss */
.vivid-lab .carousel--layout-natural .carousel__item {
  flex: 0 0 max-content;
}

/* line 151, app/assets/stylesheets/lab/carousel.scss */
.vivid-lab .carousel--layout-natural .carousel__item > div {
  max-width: 100%;
}

/* line 157, app/assets/stylesheets/lab/carousel.scss */
.vivid-lab .carousel--fade {
  position: relative;
}

/* line 160, app/assets/stylesheets/lab/carousel.scss */
.vivid-lab .carousel--fade:after {
  pointer-events: none;
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: linear-gradient(90deg, var(--surface-container-background-color), transparent calc(var(--container-gutter) * 1.5) 25%, transparent calc(100% - var(--container-gutter) * 1.5) 25%, var(--surface-container-background-color));
}

/* line 180, app/assets/stylesheets/lab/carousel.scss */
.vivid-lab .carousel--escape {
  --carousel-escape-padding: calc(max((100cqw - 100%) / 2, 0px));
  --carousel-lead-padding: calc(
      max(
        (100cqw - var(--container-max-width)) / 2 + var(--container-gutter),
        var(--container-gutter)
      )
    );
  margin-left: calc(var(--carousel-escape-padding) * -1);
  margin-right: calc(var(--carousel-escape-padding) * -1);
}

/* line 192, app/assets/stylesheets/lab/carousel.scss */
.vivid-lab .block-container .surface--color .carousel--escape {
  --carousel-lead-padding: calc(
      max(
        (100cqw - var(--container-max-width)) / 2 + var(--container-gutter) +
          var(--container-page-gutter),
        var(--container-gutter)
      )
    );
}

/* line 203, app/assets/stylesheets/lab/carousel.scss */
.vivid-lab .carousel--gutters-compact {
  --carousel-gutter: 0.4rem;
}

/* line 207, app/assets/stylesheets/lab/carousel.scss */
.vivid-lab .carousel--gutters-normal {
  --carousel-gutter: 0.8rem;
}

/* line 211, app/assets/stylesheets/lab/carousel.scss */
.vivid-lab .carousel--gutters-loose {
  --carousel-gutter: 1.6rem;
}

@media (min-width: 768px) {
  /* line 203, app/assets/stylesheets/lab/carousel.scss */
  .vivid-lab .carousel--gutters-compact-sm {
    --carousel-gutter: 0.4rem;
  }
  /* line 207, app/assets/stylesheets/lab/carousel.scss */
  .vivid-lab .carousel--gutters-normal-sm {
    --carousel-gutter: 0.8rem;
  }
  /* line 211, app/assets/stylesheets/lab/carousel.scss */
  .vivid-lab .carousel--gutters-loose-sm {
    --carousel-gutter: 1.6rem;
  }
}

@media (min-width: 992px) {
  /* line 203, app/assets/stylesheets/lab/carousel.scss */
  .vivid-lab .carousel--gutters-compact-md {
    --carousel-gutter: 0.4rem;
  }
  /* line 207, app/assets/stylesheets/lab/carousel.scss */
  .vivid-lab .carousel--gutters-normal-md {
    --carousel-gutter: 0.8rem;
  }
  /* line 211, app/assets/stylesheets/lab/carousel.scss */
  .vivid-lab .carousel--gutters-loose-md {
    --carousel-gutter: 1.6rem;
  }
}

@media (min-width: 1200px) {
  /* line 203, app/assets/stylesheets/lab/carousel.scss */
  .vivid-lab .carousel--gutters-compact-lg {
    --carousel-gutter: 0.4rem;
  }
  /* line 207, app/assets/stylesheets/lab/carousel.scss */
  .vivid-lab .carousel--gutters-normal-lg {
    --carousel-gutter: 0.8rem;
  }
  /* line 211, app/assets/stylesheets/lab/carousel.scss */
  .vivid-lab .carousel--gutters-loose-lg {
    --carousel-gutter: 1.6rem;
  }
}

/* line 227, app/assets/stylesheets/lab/carousel.scss */
.vivid-lab .carousel--container-size-normal {
  --container-max-width: 115.2rem;
}

/* line 231, app/assets/stylesheets/lab/carousel.scss */
.vivid-lab .carousel--container-size-medium {
  --container-max-width: 70ch;
}

/* line 235, app/assets/stylesheets/lab/carousel.scss */
.vivid-lab .carousel--container-size-form,
.vivid-lab .carousel--container-size-product {
  --container-max-width: 80rem;
}

/* line 240, app/assets/stylesheets/lab/carousel.scss */
.vivid-lab .carousel--container-size-mobile {
  --container-max-width: 48rem;
}

/* line 244, app/assets/stylesheets/lab/carousel.scss */
.vivid-lab .carousel--container-size-fluid {
  --container-max-width: 409.6rem;
}

/* line 248, app/assets/stylesheets/lab/carousel.scss */
.vivid-lab .carousel__preceding,
.vivid-lab .carousel__succeeding {
  position: relative;
  z-index: 1;
}

/* line 2, app/assets/stylesheets/lab/collapse.scss */
.vivid-lab .collapse {
  min-width: 0;
}

/* line 6, app/assets/stylesheets/lab/collapse.scss */
.vivid-lab .collapse__details {
  min-width: 0;
  transition: height 0.125s;
}

@media (prefers-reduced-motion: reduce) {
  /* line 6, app/assets/stylesheets/lab/collapse.scss */
  .vivid-lab .collapse__details {
    transition-duration: 0.00001s;
  }
}

/* line 17, app/assets/stylesheets/lab/collapse.scss */
.vivid-lab .collapse--collapsed .collapse__details {
  height: 0;
}

/* line 23, app/assets/stylesheets/lab/collapse.scss */
.vivid-lab .collapse--collapsed:not(.collapse--collapsing) .collapse__details {
  display: none;
}

/* line 29, app/assets/stylesheets/lab/collapse.scss */
.vivid-lab .collapse--collapsing .collapse__details,
.vivid-lab .collapse--collapsing .collapse__body {
  overflow: hidden;
}

/* line 36, app/assets/stylesheets/lab/collapse.scss */
.vivid-lab .collapse--expanding .collapse__details {
  height: 0;
}

/* line 40, app/assets/stylesheets/lab/collapse.scss */
.vivid-lab .collapse--expanding .collapse__details,
.vivid-lab .collapse--expanding .collapse__body {
  overflow: hidden;
}

/* line 46, app/assets/stylesheets/lab/collapse.scss */
.vivid-lab .collapse__body {
  display: grid;
  min-width: 0;
}

/* line 50, app/assets/stylesheets/lab/collapse.scss */
.vivid-lab .collapse__body .block-container {
  margin-left: 0;
  margin-right: 0;
}

/* line 56, app/assets/stylesheets/lab/collapse.scss */
.vivid-lab .collapse__trigger {
  width: 100%;
  text-align: start;
  color: inherit;
  background: transparent;
  border: none;
  padding: 0;
  appearance: none;
  display: block;
  cursor: pointer;
  transition: height 0.125s;
}

@media (prefers-reduced-motion: reduce) {
  /* line 56, app/assets/stylesheets/lab/collapse.scss */
  .vivid-lab .collapse__trigger {
    transition-duration: 0.00001s;
  }
}

/* line 72, app/assets/stylesheets/lab/collapse.scss */
.vivid-lab .collapse__trigger:not(:has(.rich-header)) {
  align-items: center;
}

/* line 77, app/assets/stylesheets/lab/collapse.scss */
.vivid-lab .collapse__label {
  flex: 1 1 auto;
}

/* line 81, app/assets/stylesheets/lab/collapse.scss */
.vivid-lab .collapse__disclosure {
  flex: 0 0 min-content;
}

/* line 84, app/assets/stylesheets/lab/collapse.scss */
.vivid-lab .collapse__disclosure .skeleton .icon--sax {
  opacity: 0.4;
}

/* line 90, app/assets/stylesheets/lab/collapse.scss */
.vivid-lab .collapse--revealed:not(.collapse--revealing) .collapse__trigger {
  display: none;
}

/* line 96, app/assets/stylesheets/lab/collapse.scss */
.vivid-lab .collapse--revealing .collapse__trigger {
  overflow: hidden;
}

/* line 102, app/assets/stylesheets/lab/collapse.scss */
.vivid-lab .collapse__disclosure--bold .button {
  --contained-adornment-size: 2.4rem;
  transition: background 0.125s;
}

@media (prefers-reduced-motion: reduce) {
  /* line 102, app/assets/stylesheets/lab/collapse.scss */
  .vivid-lab .collapse__disclosure--bold .button {
    transition-duration: 0.00001s;
  }
}

/* line 115, app/assets/stylesheets/lab/collapse.scss */
.vivid-lab .collapse:not(.collapse--collapsed) .collapse__disclosure--bold .button {
  --surface-background-color: #444444;
  --surface-color: #FFFFFF;
}

/* line 123, app/assets/stylesheets/lab/collapse.scss */
.vivid-lab .collapse--align-right .rich-header__title-container {
  flex: 0 1 auto;
}

/* line 127, app/assets/stylesheets/lab/collapse.scss */
.vivid-lab .collapse--align-right .rich-header__content-wrapper {
  justify-content: flex-end;
}

/* line 133, app/assets/stylesheets/lab/collapse.scss */
.vivid-lab .collapse--align-cozy .rich-header__title-container {
  flex: 0 1 auto;
}

/* line 2, app/assets/stylesheets/lab/timeline.scss */
.vivid-lab .timeline {
  display: grid;
  width: 100%;
  grid-template-columns: 12ch 2.4rem 1fr;
  gap: 2.4rem 1.6rem;
}

/* line 9, app/assets/stylesheets/lab/timeline.scss */
.vivid-lab .timeline__event {
  display: contents;
}

/* line 13, app/assets/stylesheets/lab/timeline.scss */
.vivid-lab .timeline__event__timestamp {
  --contained-adornment-size: 2rem;
  color: var(--surface-deemphasized-color);
  opacity: 0.7;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 2rem;
  text-rendering: optimizeLegibility;
  margin-top: 0.2rem;
}

/* line 25, app/assets/stylesheets/lab/timeline.scss */
.vivid-lab .timeline__event__icon {
  --contained-adornment-size: 2.4rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* line 36, app/assets/stylesheets/lab/timeline.scss */
.vivid-lab .timeline__event:not(:last-child) .timeline__event__icon::after {
  content: "";
  display: block;
  width: 0.2rem;
  top: calc(var(--contained-adornment-size) + 1.2rem);
  height: calc(100% - var(--contained-adornment-size));
  background: var(--surface-trim-color);
  position: absolute;
  border-radius: 0.2rem;
}

@media (max-width: 767px) {
  /* line 50, app/assets/stylesheets/lab/timeline.scss */
  .vivid-lab .timeline {
    grid-template-columns: 2.4rem 1fr;
  }
  /* line 54, app/assets/stylesheets/lab/timeline.scss */
  .vivid-lab .timeline__event__timestamp {
    grid-column-start: 2;
    margin-bottom: -3.2rem;
  }
  /* line 61, app/assets/stylesheets/lab/timeline.scss */
  .vivid-lab .timeline__event:not(:last-child) .timeline__event__icon::after {
    width: 0.2rem;
    height: auto;
    bottom: -3.6rem;
  }
}

/* line 2, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table {
  width: 100%;
  max-width: 100%;
  border-color: var(--surface-trim-color);
  border-collapse: collapse;
}

/* line 11, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table > thead > tr > td,
.vivid-lab .table > thead > tr > th,
.vivid-lab .table > tbody > tr > td,
.vivid-lab .table > tbody > tr > th {
  padding: var(--table-padding-vertical) var(--table-padding-horizontal);
  vertical-align: top;
  text-align: left;
  border-top: 0.1rem solid var(--surface-trim-color);
}

/* line 19, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table > thead > tr > td.table__cell--border-none,
.vivid-lab .table > thead > tr > th.table__cell--border-none,
.vivid-lab .table > tbody > tr > td.table__cell--border-none,
.vivid-lab .table > tbody > tr > th.table__cell--border-none {
  border-color: transparent;
}

/* line 26, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table > tbody + tbody {
  border-top: 0.2rem solid var(--surface-trim-color);
}

/* line 32, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 0.2rem solid var(--surface-trim-color);
}

/* line 41, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table > thead > tr > th,
.vivid-lab .table > thead > tr > td {
  border-top: 0;
}

/* line 50, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--striped tbody tr:nth-child(odd):not(.surface--color) {
  background-color: var(--surface-stripe-color, var(--surface-glass-color));
}

/* line 56, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--pin-striped tr td:nth-child(odd):not(.surface--color),
.vivid-lab .table--pin-striped tr th:nth-child(odd):not(.surface--color) {
  background-color: var(--surface-stripe-color, var(--surface-glass-color));
}

/* line 62, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--shape-rounded {
  overflow: hidden;
  border-radius: 0.8rem;
}

/* line 67, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--shape-rounded-large {
  overflow: hidden;
  border-radius: 2rem;
}

/* line 171, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--natural {
  max-width: unset;
  min-width: unset;
  width: unset;
}

/* line 177, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--minimum {
  max-width: 100%;
  width: 0;
}

/* line 182, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--fill {
  max-width: 100%;
  width: 100%;
}

/* line 187, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--half {
  max-width: 50%;
  width: 50%;
}

/* line 192, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--quarter {
  max-width: 25%;
  width: 25%;
}

/* line 197, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--three_quarters {
  max-width: 75%;
  width: 75%;
}

/* line 202, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--third {
  max-width: 33.333333%;
  width: 33.333333%;
}

/* line 207, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--two_thirds {
  max-width: 66.666666%;
  width: 66.666666%;
}

/* line 212, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--fifth {
  max-width: 20%;
  width: 20%;
}

/* line 217, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--two_fifths {
  max-width: 40%;
  width: 40%;
}

/* line 222, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--three_fifths {
  max-width: 60%;
  width: 60%;
}

/* line 227, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--four_fifths {
  max-width: 80%;
  width: 80%;
}

/* line 232, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--sixth {
  max-width: 16.666666%;
  width: 16.666666%;
}

/* line 237, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--five-sixths {
  max-width: 83.333333%;
  width: 83.333333%;
}

/* line 242, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--twelfth {
  max-width: 8.333333%;
  width: 8.333333%;
}

/* line 247, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--five_twelfths {
  max-width: 41.666666%;
  width: 41.666666%;
}

/* line 252, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--seven_twelfths {
  max-width: 58.333333%;
  width: 58.333333%;
}

/* line 257, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--eleven_twelfths {
  max-width: 91.666666%;
  width: 91.666666%;
}

/* line 263, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--bleed:first-child {
  padding-left: 0;
}

/* line 267, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--bleed:last-child {
  padding-right: 0;
}

/* line 274, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--gutters-normal {
  --table-padding-vertical: 0.8rem;
  --table-padding-horizontal: 0.8rem;
}

/* line 279, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--gutters-compact {
  --table-padding-vertical: 0.4rem;
  --table-padding-horizontal: 0.4rem;
}

/* line 284, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--gutters-loose {
  --table-padding-vertical: 1.6rem;
  --table-padding-horizontal: 1.6rem;
}

/* line 99, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--layout-normal {
  table-layout: auto;
}

/* line 104, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--layout-normal > tbody > tr,
.vivid-lab .table--layout-normal > thead > tr {
  display: table-row;
}

/* line 107, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--layout-normal > tbody > tr > td,
.vivid-lab .table--layout-normal > thead > tr > td {
  padding-top: var(--table-padding-vertical);
  padding-bottom: var(--table-padding-vertical);
}

/* line 111, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--layout-normal > tbody > tr > td > .table__cell__label,
.vivid-lab .table--layout-normal > thead > tr > td > .table__cell__label {
  display: none;
}

/* line 119, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--layout-fixed {
  table-layout: auto;
}

/* line 124, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--layout-fixed > tbody > tr,
.vivid-lab .table--layout-fixed > thead > tr {
  display: table-row;
}

/* line 127, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--layout-fixed > tbody > tr > td,
.vivid-lab .table--layout-fixed > thead > tr > td {
  padding-top: var(--table-padding-vertical);
  padding-bottom: var(--table-padding-vertical);
}

/* line 131, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--layout-fixed > tbody > tr > td > .table__cell__label,
.vivid-lab .table--layout-fixed > thead > tr > td > .table__cell__label {
  display: none;
}

/* line 139, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--layout-flex {
  table-layout: auto;
}

/* line 144, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--layout-flex > tbody > tr,
.vivid-lab .table--layout-flex > thead > tr {
  display: flex;
  flex-wrap: wrap;
}

/* line 148, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--layout-flex > tbody > tr > td,
.vivid-lab .table--layout-flex > thead > tr > td {
  border: 0;
  flex-basis: 100%;
  padding-top: 0;
  padding-bottom: 0;
}

/* line 158, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--layout-flex > tbody > tr {
  padding-top: var(--table-padding-vertical);
  padding-bottom: var(--table-padding-vertical);
}

/* line 162, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--layout-flex > tbody > tr + tr {
  border-top: 0.1rem solid var(--surface-trim-color);
}

/* line 73, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--align-middle > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-middle,
.vivid-lab table > tbody > tr > .table__cell--align-middle {
  vertical-align: middle;
}

/* line 77, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--align-top > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-top,
.vivid-lab table > tbody > tr > .table__cell--align-top {
  vertical-align: top;
}

/* line 81, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--align-bottom > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-bottom,
.vivid-lab table > tbody > tr > .table__cell--align-bottom {
  vertical-align: bottom;
}

/* line 85, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--align-center > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-center,
.vivid-lab table > tbody > tr > .table__cell--align-center {
  text-align: center;
}

/* line 89, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--align-right > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-right,
.vivid-lab table > tbody > tr > .table__cell--align-right {
  text-align: right;
}

/* line 93, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--align-left > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-left,
.vivid-lab table > tbody > tr > .table__cell--align-left {
  text-align: left;
}

@media (min-width: 768px) {
  /* line 171, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--natural-sm {
    max-width: unset;
    min-width: unset;
    width: unset;
  }
  /* line 177, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--minimum-sm {
    max-width: 100%;
    width: 0;
  }
  /* line 182, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--fill-sm {
    max-width: 100%;
    width: 100%;
  }
  /* line 187, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--half-sm {
    max-width: 50%;
    width: 50%;
  }
  /* line 192, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--quarter-sm {
    max-width: 25%;
    width: 25%;
  }
  /* line 197, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--three_quarters-sm {
    max-width: 75%;
    width: 75%;
  }
  /* line 202, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--third-sm {
    max-width: 33.333333%;
    width: 33.333333%;
  }
  /* line 207, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--two_thirds-sm {
    max-width: 66.666666%;
    width: 66.666666%;
  }
  /* line 212, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--fifth-sm {
    max-width: 20%;
    width: 20%;
  }
  /* line 217, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--two_fifths-sm {
    max-width: 40%;
    width: 40%;
  }
  /* line 222, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--three_fifths-sm {
    max-width: 60%;
    width: 60%;
  }
  /* line 227, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--four_fifths-sm {
    max-width: 80%;
    width: 80%;
  }
  /* line 232, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--sixth-sm {
    max-width: 16.666666%;
    width: 16.666666%;
  }
  /* line 237, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--five-sixths-sm {
    max-width: 83.333333%;
    width: 83.333333%;
  }
  /* line 242, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--twelfth-sm {
    max-width: 8.333333%;
    width: 8.333333%;
  }
  /* line 247, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--five_twelfths-sm {
    max-width: 41.666666%;
    width: 41.666666%;
  }
  /* line 252, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--seven_twelfths-sm {
    max-width: 58.333333%;
    width: 58.333333%;
  }
  /* line 257, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--eleven_twelfths-sm {
    max-width: 91.666666%;
    width: 91.666666%;
  }
  /* line 263, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--bleed-sm:first-child {
    padding-left: 0;
  }
  /* line 267, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--bleed-sm:last-child {
    padding-right: 0;
  }
  /* line 274, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--gutters-normal-sm {
    --table-padding-vertical: 0.8rem;
    --table-padding-horizontal: 0.8rem;
  }
  /* line 279, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--gutters-compact-sm {
    --table-padding-vertical: 0.4rem;
    --table-padding-horizontal: 0.4rem;
  }
  /* line 284, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--gutters-loose-sm {
    --table-padding-vertical: 1.6rem;
    --table-padding-horizontal: 1.6rem;
  }
  /* line 99, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-normal-sm {
    table-layout: auto;
  }
  /* line 104, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-normal-sm > tbody > tr,
.vivid-lab .table--layout-normal-sm > thead > tr {
    display: table-row;
  }
  /* line 107, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-normal-sm > tbody > tr > td,
.vivid-lab .table--layout-normal-sm > thead > tr > td {
    padding-top: var(--table-padding-vertical);
    padding-bottom: var(--table-padding-vertical);
  }
  /* line 111, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-normal-sm > tbody > tr > td > .table__cell__label,
.vivid-lab .table--layout-normal-sm > thead > tr > td > .table__cell__label {
    display: none;
  }
  /* line 119, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-fixed-sm {
    table-layout: auto;
  }
  /* line 124, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-fixed-sm > tbody > tr,
.vivid-lab .table--layout-fixed-sm > thead > tr {
    display: table-row;
  }
  /* line 127, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-fixed-sm > tbody > tr > td,
.vivid-lab .table--layout-fixed-sm > thead > tr > td {
    padding-top: var(--table-padding-vertical);
    padding-bottom: var(--table-padding-vertical);
  }
  /* line 131, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-fixed-sm > tbody > tr > td > .table__cell__label,
.vivid-lab .table--layout-fixed-sm > thead > tr > td > .table__cell__label {
    display: none;
  }
  /* line 139, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-flex-sm {
    table-layout: auto;
  }
  /* line 144, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-flex-sm > tbody > tr,
.vivid-lab .table--layout-flex-sm > thead > tr {
    display: flex;
    flex-wrap: wrap;
  }
  /* line 148, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-flex-sm > tbody > tr > td,
.vivid-lab .table--layout-flex-sm > thead > tr > td {
    border: 0;
    flex-basis: 100%;
    padding-top: 0;
    padding-bottom: 0;
  }
  /* line 158, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-flex-sm > tbody > tr {
    padding-top: var(--table-padding-vertical);
    padding-bottom: var(--table-padding-vertical);
  }
  /* line 162, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-flex-sm > tbody > tr + tr {
    border-top: 0.1rem solid var(--surface-trim-color);
  }
  /* line 73, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-middle-sm > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-middle-sm,
.vivid-lab table > tbody > tr > .table__cell--align-middle-sm {
    vertical-align: middle;
  }
  /* line 77, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-top-sm > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-top-sm,
.vivid-lab table > tbody > tr > .table__cell--align-top-sm {
    vertical-align: top;
  }
  /* line 81, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-bottom-sm > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-bottom-sm,
.vivid-lab table > tbody > tr > .table__cell--align-bottom-sm {
    vertical-align: bottom;
  }
  /* line 85, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-center-sm > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-center-sm,
.vivid-lab table > tbody > tr > .table__cell--align-center-sm {
    text-align: center;
  }
  /* line 89, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-right-sm > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-right-sm,
.vivid-lab table > tbody > tr > .table__cell--align-right-sm {
    text-align: right;
  }
  /* line 93, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-left-sm > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-left-sm,
.vivid-lab table > tbody > tr > .table__cell--align-left-sm {
    text-align: left;
  }
}

@media (min-width: 992px) {
  /* line 171, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--natural-md {
    max-width: unset;
    min-width: unset;
    width: unset;
  }
  /* line 177, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--minimum-md {
    max-width: 100%;
    width: 0;
  }
  /* line 182, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--fill-md {
    max-width: 100%;
    width: 100%;
  }
  /* line 187, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--half-md {
    max-width: 50%;
    width: 50%;
  }
  /* line 192, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--quarter-md {
    max-width: 25%;
    width: 25%;
  }
  /* line 197, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--three_quarters-md {
    max-width: 75%;
    width: 75%;
  }
  /* line 202, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--third-md {
    max-width: 33.333333%;
    width: 33.333333%;
  }
  /* line 207, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--two_thirds-md {
    max-width: 66.666666%;
    width: 66.666666%;
  }
  /* line 212, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--fifth-md {
    max-width: 20%;
    width: 20%;
  }
  /* line 217, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--two_fifths-md {
    max-width: 40%;
    width: 40%;
  }
  /* line 222, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--three_fifths-md {
    max-width: 60%;
    width: 60%;
  }
  /* line 227, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--four_fifths-md {
    max-width: 80%;
    width: 80%;
  }
  /* line 232, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--sixth-md {
    max-width: 16.666666%;
    width: 16.666666%;
  }
  /* line 237, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--five-sixths-md {
    max-width: 83.333333%;
    width: 83.333333%;
  }
  /* line 242, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--twelfth-md {
    max-width: 8.333333%;
    width: 8.333333%;
  }
  /* line 247, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--five_twelfths-md {
    max-width: 41.666666%;
    width: 41.666666%;
  }
  /* line 252, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--seven_twelfths-md {
    max-width: 58.333333%;
    width: 58.333333%;
  }
  /* line 257, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--eleven_twelfths-md {
    max-width: 91.666666%;
    width: 91.666666%;
  }
  /* line 263, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--bleed-md:first-child {
    padding-left: 0;
  }
  /* line 267, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--bleed-md:last-child {
    padding-right: 0;
  }
  /* line 274, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--gutters-normal-md {
    --table-padding-vertical: 0.8rem;
    --table-padding-horizontal: 0.8rem;
  }
  /* line 279, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--gutters-compact-md {
    --table-padding-vertical: 0.4rem;
    --table-padding-horizontal: 0.4rem;
  }
  /* line 284, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--gutters-loose-md {
    --table-padding-vertical: 1.6rem;
    --table-padding-horizontal: 1.6rem;
  }
  /* line 99, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-normal-md {
    table-layout: auto;
  }
  /* line 104, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-normal-md > tbody > tr,
.vivid-lab .table--layout-normal-md > thead > tr {
    display: table-row;
  }
  /* line 107, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-normal-md > tbody > tr > td,
.vivid-lab .table--layout-normal-md > thead > tr > td {
    padding-top: var(--table-padding-vertical);
    padding-bottom: var(--table-padding-vertical);
  }
  /* line 111, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-normal-md > tbody > tr > td > .table__cell__label,
.vivid-lab .table--layout-normal-md > thead > tr > td > .table__cell__label {
    display: none;
  }
  /* line 119, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-fixed-md {
    table-layout: auto;
  }
  /* line 124, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-fixed-md > tbody > tr,
.vivid-lab .table--layout-fixed-md > thead > tr {
    display: table-row;
  }
  /* line 127, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-fixed-md > tbody > tr > td,
.vivid-lab .table--layout-fixed-md > thead > tr > td {
    padding-top: var(--table-padding-vertical);
    padding-bottom: var(--table-padding-vertical);
  }
  /* line 131, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-fixed-md > tbody > tr > td > .table__cell__label,
.vivid-lab .table--layout-fixed-md > thead > tr > td > .table__cell__label {
    display: none;
  }
  /* line 139, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-flex-md {
    table-layout: auto;
  }
  /* line 144, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-flex-md > tbody > tr,
.vivid-lab .table--layout-flex-md > thead > tr {
    display: flex;
    flex-wrap: wrap;
  }
  /* line 148, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-flex-md > tbody > tr > td,
.vivid-lab .table--layout-flex-md > thead > tr > td {
    border: 0;
    flex-basis: 100%;
    padding-top: 0;
    padding-bottom: 0;
  }
  /* line 158, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-flex-md > tbody > tr {
    padding-top: var(--table-padding-vertical);
    padding-bottom: var(--table-padding-vertical);
  }
  /* line 162, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-flex-md > tbody > tr + tr {
    border-top: 0.1rem solid var(--surface-trim-color);
  }
  /* line 73, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-middle-md > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-middle-md,
.vivid-lab table > tbody > tr > .table__cell--align-middle-md {
    vertical-align: middle;
  }
  /* line 77, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-top-md > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-top-md,
.vivid-lab table > tbody > tr > .table__cell--align-top-md {
    vertical-align: top;
  }
  /* line 81, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-bottom-md > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-bottom-md,
.vivid-lab table > tbody > tr > .table__cell--align-bottom-md {
    vertical-align: bottom;
  }
  /* line 85, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-center-md > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-center-md,
.vivid-lab table > tbody > tr > .table__cell--align-center-md {
    text-align: center;
  }
  /* line 89, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-right-md > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-right-md,
.vivid-lab table > tbody > tr > .table__cell--align-right-md {
    text-align: right;
  }
  /* line 93, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-left-md > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-left-md,
.vivid-lab table > tbody > tr > .table__cell--align-left-md {
    text-align: left;
  }
}

@media (min-width: 1200px) {
  /* line 171, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--natural-lg {
    max-width: unset;
    min-width: unset;
    width: unset;
  }
  /* line 177, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--minimum-lg {
    max-width: 100%;
    width: 0;
  }
  /* line 182, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--fill-lg {
    max-width: 100%;
    width: 100%;
  }
  /* line 187, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--half-lg {
    max-width: 50%;
    width: 50%;
  }
  /* line 192, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--quarter-lg {
    max-width: 25%;
    width: 25%;
  }
  /* line 197, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--three_quarters-lg {
    max-width: 75%;
    width: 75%;
  }
  /* line 202, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--third-lg {
    max-width: 33.333333%;
    width: 33.333333%;
  }
  /* line 207, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--two_thirds-lg {
    max-width: 66.666666%;
    width: 66.666666%;
  }
  /* line 212, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--fifth-lg {
    max-width: 20%;
    width: 20%;
  }
  /* line 217, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--two_fifths-lg {
    max-width: 40%;
    width: 40%;
  }
  /* line 222, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--three_fifths-lg {
    max-width: 60%;
    width: 60%;
  }
  /* line 227, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--four_fifths-lg {
    max-width: 80%;
    width: 80%;
  }
  /* line 232, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--sixth-lg {
    max-width: 16.666666%;
    width: 16.666666%;
  }
  /* line 237, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--five-sixths-lg {
    max-width: 83.333333%;
    width: 83.333333%;
  }
  /* line 242, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--twelfth-lg {
    max-width: 8.333333%;
    width: 8.333333%;
  }
  /* line 247, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--five_twelfths-lg {
    max-width: 41.666666%;
    width: 41.666666%;
  }
  /* line 252, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--seven_twelfths-lg {
    max-width: 58.333333%;
    width: 58.333333%;
  }
  /* line 257, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--eleven_twelfths-lg {
    max-width: 91.666666%;
    width: 91.666666%;
  }
  /* line 263, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--bleed-lg:first-child {
    padding-left: 0;
  }
  /* line 267, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--bleed-lg:last-child {
    padding-right: 0;
  }
  /* line 274, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--gutters-normal-lg {
    --table-padding-vertical: 0.8rem;
    --table-padding-horizontal: 0.8rem;
  }
  /* line 279, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--gutters-compact-lg {
    --table-padding-vertical: 0.4rem;
    --table-padding-horizontal: 0.4rem;
  }
  /* line 284, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--gutters-loose-lg {
    --table-padding-vertical: 1.6rem;
    --table-padding-horizontal: 1.6rem;
  }
  /* line 99, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-normal-lg {
    table-layout: auto;
  }
  /* line 104, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-normal-lg > tbody > tr,
.vivid-lab .table--layout-normal-lg > thead > tr {
    display: table-row;
  }
  /* line 107, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-normal-lg > tbody > tr > td,
.vivid-lab .table--layout-normal-lg > thead > tr > td {
    padding-top: var(--table-padding-vertical);
    padding-bottom: var(--table-padding-vertical);
  }
  /* line 111, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-normal-lg > tbody > tr > td > .table__cell__label,
.vivid-lab .table--layout-normal-lg > thead > tr > td > .table__cell__label {
    display: none;
  }
  /* line 119, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-fixed-lg {
    table-layout: auto;
  }
  /* line 124, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-fixed-lg > tbody > tr,
.vivid-lab .table--layout-fixed-lg > thead > tr {
    display: table-row;
  }
  /* line 127, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-fixed-lg > tbody > tr > td,
.vivid-lab .table--layout-fixed-lg > thead > tr > td {
    padding-top: var(--table-padding-vertical);
    padding-bottom: var(--table-padding-vertical);
  }
  /* line 131, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-fixed-lg > tbody > tr > td > .table__cell__label,
.vivid-lab .table--layout-fixed-lg > thead > tr > td > .table__cell__label {
    display: none;
  }
  /* line 139, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-flex-lg {
    table-layout: auto;
  }
  /* line 144, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-flex-lg > tbody > tr,
.vivid-lab .table--layout-flex-lg > thead > tr {
    display: flex;
    flex-wrap: wrap;
  }
  /* line 148, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-flex-lg > tbody > tr > td,
.vivid-lab .table--layout-flex-lg > thead > tr > td {
    border: 0;
    flex-basis: 100%;
    padding-top: 0;
    padding-bottom: 0;
  }
  /* line 158, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-flex-lg > tbody > tr {
    padding-top: var(--table-padding-vertical);
    padding-bottom: var(--table-padding-vertical);
  }
  /* line 162, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-flex-lg > tbody > tr + tr {
    border-top: 0.1rem solid var(--surface-trim-color);
  }
  /* line 73, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-middle-lg > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-middle-lg,
.vivid-lab table > tbody > tr > .table__cell--align-middle-lg {
    vertical-align: middle;
  }
  /* line 77, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-top-lg > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-top-lg,
.vivid-lab table > tbody > tr > .table__cell--align-top-lg {
    vertical-align: top;
  }
  /* line 81, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-bottom-lg > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-bottom-lg,
.vivid-lab table > tbody > tr > .table__cell--align-bottom-lg {
    vertical-align: bottom;
  }
  /* line 85, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-center-lg > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-center-lg,
.vivid-lab table > tbody > tr > .table__cell--align-center-lg {
    text-align: center;
  }
  /* line 89, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-right-lg > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-right-lg,
.vivid-lab table > tbody > tr > .table__cell--align-right-lg {
    text-align: right;
  }
  /* line 93, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-left-lg > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-left-lg,
.vivid-lab table > tbody > tr > .table__cell--align-left-lg {
    text-align: left;
  }
}

/* line 317, app/assets/stylesheets/lab/table.scss */
.vivid-lab table.table--list > tbody > tr > td:first-child,
.vivid-lab table.table--list > tbody > tr > th:first-child,
.vivid-lab table.table--list > thead > tr > td:first-child,
.vivid-lab table.table--list > thead > tr > th:first-child {
  padding-left: 0;
}

/* line 322, app/assets/stylesheets/lab/table.scss */
.vivid-lab table.table--list > tbody > tr > td:last-child,
.vivid-lab table.table--list > tbody > tr > th:last-child,
.vivid-lab table.table--list > thead > tr > td:last-child,
.vivid-lab table.table--list > thead > tr > th:last-child {
  padding-right: 0;
}

/* line 330, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table-container {
  position: relative;
}

/* line 333, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table-container.surface--bleed {
  padding-left: 0;
  padding-right: 0;
}

/* line 341, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table-container.surface--bleed > table > tbody > tr > td:first-child,
.vivid-lab .table-container.surface--bleed > table > tbody > tr > th:first-child,
.vivid-lab .table-container.surface--bleed > table > thead > tr > td:first-child,
.vivid-lab .table-container.surface--bleed > table > thead > tr > th:first-child {
  padding-left: var(--container-gutter);
}

/* line 346, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table-container.surface--bleed > table > tbody > tr > td:last-child,
.vivid-lab .table-container.surface--bleed > table > tbody > tr > th:last-child,
.vivid-lab .table-container.surface--bleed > table > thead > tr > td:last-child,
.vivid-lab .table-container.surface--bleed > table > thead > tr > th:last-child {
  padding-left: var(--container-gutter);
}

/* line 356, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table-container.surface--bleed-container {
  margin-bottom: calc(var(--container-gutter-vertical) * -1);
}

/* line 360, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table-container.surface--bleed-container {
  margin-top: calc(var(--container-gutter-vertical) * -1);
}

/* line 364, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table-container.surface--outlined,
.vivid-lab .table-container.surface--trimmed {
  border-width: 0.1rem;
  border-style: solid;
}

/* line 370, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--overflow-scroll {
  overflow: auto;
}

/* line 374, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--overflow-hidden {
  overflow: hidden;
}

/* line 378, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell__label {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 2rem;
  display: block;
  margin: 0;
  color: var(--surface-deemphasized-color);
}

/* line 2, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table {
  width: 100%;
  max-width: 100%;
  border-color: var(--surface-trim-color);
  border-collapse: collapse;
}

/* line 11, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table > thead > tr > td,
.vivid-lab .table > thead > tr > th,
.vivid-lab .table > tbody > tr > td,
.vivid-lab .table > tbody > tr > th {
  padding: var(--table-padding-vertical) var(--table-padding-horizontal);
  vertical-align: top;
  text-align: left;
  border-top: 0.1rem solid var(--surface-trim-color);
}

/* line 19, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table > thead > tr > td.table__cell--border-none,
.vivid-lab .table > thead > tr > th.table__cell--border-none,
.vivid-lab .table > tbody > tr > td.table__cell--border-none,
.vivid-lab .table > tbody > tr > th.table__cell--border-none {
  border-color: transparent;
}

/* line 26, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table > tbody + tbody {
  border-top: 0.2rem solid var(--surface-trim-color);
}

/* line 32, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 0.2rem solid var(--surface-trim-color);
}

/* line 41, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table > thead > tr > th,
.vivid-lab .table > thead > tr > td {
  border-top: 0;
}

/* line 50, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--striped tbody tr:nth-child(odd):not(.surface--color) {
  background-color: var(--surface-stripe-color, var(--surface-glass-color));
}

/* line 56, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--pin-striped tr td:nth-child(odd):not(.surface--color),
.vivid-lab .table--pin-striped tr th:nth-child(odd):not(.surface--color) {
  background-color: var(--surface-stripe-color, var(--surface-glass-color));
}

/* line 62, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--shape-rounded {
  overflow: hidden;
  border-radius: 0.8rem;
}

/* line 67, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--shape-rounded-large {
  overflow: hidden;
  border-radius: 2rem;
}

/* line 171, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--natural {
  max-width: unset;
  min-width: unset;
  width: unset;
}

/* line 177, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--minimum {
  max-width: 100%;
  width: 0;
}

/* line 182, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--fill {
  max-width: 100%;
  width: 100%;
}

/* line 187, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--half {
  max-width: 50%;
  width: 50%;
}

/* line 192, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--quarter {
  max-width: 25%;
  width: 25%;
}

/* line 197, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--three_quarters {
  max-width: 75%;
  width: 75%;
}

/* line 202, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--third {
  max-width: 33.333333%;
  width: 33.333333%;
}

/* line 207, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--two_thirds {
  max-width: 66.666666%;
  width: 66.666666%;
}

/* line 212, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--fifth {
  max-width: 20%;
  width: 20%;
}

/* line 217, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--two_fifths {
  max-width: 40%;
  width: 40%;
}

/* line 222, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--three_fifths {
  max-width: 60%;
  width: 60%;
}

/* line 227, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--four_fifths {
  max-width: 80%;
  width: 80%;
}

/* line 232, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--sixth {
  max-width: 16.666666%;
  width: 16.666666%;
}

/* line 237, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--five-sixths {
  max-width: 83.333333%;
  width: 83.333333%;
}

/* line 242, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--twelfth {
  max-width: 8.333333%;
  width: 8.333333%;
}

/* line 247, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--five_twelfths {
  max-width: 41.666666%;
  width: 41.666666%;
}

/* line 252, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--seven_twelfths {
  max-width: 58.333333%;
  width: 58.333333%;
}

/* line 257, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--eleven_twelfths {
  max-width: 91.666666%;
  width: 91.666666%;
}

/* line 263, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--bleed:first-child {
  padding-left: 0;
}

/* line 267, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell--bleed:last-child {
  padding-right: 0;
}

/* line 274, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--gutters-normal {
  --table-padding-vertical: 0.8rem;
  --table-padding-horizontal: 0.8rem;
}

/* line 279, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--gutters-compact {
  --table-padding-vertical: 0.4rem;
  --table-padding-horizontal: 0.4rem;
}

/* line 284, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--gutters-loose {
  --table-padding-vertical: 1.6rem;
  --table-padding-horizontal: 1.6rem;
}

/* line 99, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--layout-normal {
  table-layout: auto;
}

/* line 104, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--layout-normal > tbody > tr,
.vivid-lab .table--layout-normal > thead > tr {
  display: table-row;
}

/* line 107, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--layout-normal > tbody > tr > td,
.vivid-lab .table--layout-normal > thead > tr > td {
  padding-top: var(--table-padding-vertical);
  padding-bottom: var(--table-padding-vertical);
}

/* line 111, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--layout-normal > tbody > tr > td > .table__cell__label,
.vivid-lab .table--layout-normal > thead > tr > td > .table__cell__label {
  display: none;
}

/* line 119, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--layout-fixed {
  table-layout: auto;
}

/* line 124, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--layout-fixed > tbody > tr,
.vivid-lab .table--layout-fixed > thead > tr {
  display: table-row;
}

/* line 127, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--layout-fixed > tbody > tr > td,
.vivid-lab .table--layout-fixed > thead > tr > td {
  padding-top: var(--table-padding-vertical);
  padding-bottom: var(--table-padding-vertical);
}

/* line 131, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--layout-fixed > tbody > tr > td > .table__cell__label,
.vivid-lab .table--layout-fixed > thead > tr > td > .table__cell__label {
  display: none;
}

/* line 139, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--layout-flex {
  table-layout: auto;
}

/* line 144, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--layout-flex > tbody > tr,
.vivid-lab .table--layout-flex > thead > tr {
  display: flex;
  flex-wrap: wrap;
}

/* line 148, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--layout-flex > tbody > tr > td,
.vivid-lab .table--layout-flex > thead > tr > td {
  border: 0;
  flex-basis: 100%;
  padding-top: 0;
  padding-bottom: 0;
}

/* line 158, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--layout-flex > tbody > tr {
  padding-top: var(--table-padding-vertical);
  padding-bottom: var(--table-padding-vertical);
}

/* line 162, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--layout-flex > tbody > tr + tr {
  border-top: 0.1rem solid var(--surface-trim-color);
}

/* line 73, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--align-middle > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-middle,
.vivid-lab table > tbody > tr > .table__cell--align-middle {
  vertical-align: middle;
}

/* line 77, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--align-top > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-top,
.vivid-lab table > tbody > tr > .table__cell--align-top {
  vertical-align: top;
}

/* line 81, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--align-bottom > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-bottom,
.vivid-lab table > tbody > tr > .table__cell--align-bottom {
  vertical-align: bottom;
}

/* line 85, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--align-center > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-center,
.vivid-lab table > tbody > tr > .table__cell--align-center {
  text-align: center;
}

/* line 89, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--align-right > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-right,
.vivid-lab table > tbody > tr > .table__cell--align-right {
  text-align: right;
}

/* line 93, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--align-left > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-left,
.vivid-lab table > tbody > tr > .table__cell--align-left {
  text-align: left;
}

@media (min-width: 768px) {
  /* line 171, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--natural-sm {
    max-width: unset;
    min-width: unset;
    width: unset;
  }
  /* line 177, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--minimum-sm {
    max-width: 100%;
    width: 0;
  }
  /* line 182, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--fill-sm {
    max-width: 100%;
    width: 100%;
  }
  /* line 187, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--half-sm {
    max-width: 50%;
    width: 50%;
  }
  /* line 192, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--quarter-sm {
    max-width: 25%;
    width: 25%;
  }
  /* line 197, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--three_quarters-sm {
    max-width: 75%;
    width: 75%;
  }
  /* line 202, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--third-sm {
    max-width: 33.333333%;
    width: 33.333333%;
  }
  /* line 207, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--two_thirds-sm {
    max-width: 66.666666%;
    width: 66.666666%;
  }
  /* line 212, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--fifth-sm {
    max-width: 20%;
    width: 20%;
  }
  /* line 217, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--two_fifths-sm {
    max-width: 40%;
    width: 40%;
  }
  /* line 222, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--three_fifths-sm {
    max-width: 60%;
    width: 60%;
  }
  /* line 227, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--four_fifths-sm {
    max-width: 80%;
    width: 80%;
  }
  /* line 232, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--sixth-sm {
    max-width: 16.666666%;
    width: 16.666666%;
  }
  /* line 237, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--five-sixths-sm {
    max-width: 83.333333%;
    width: 83.333333%;
  }
  /* line 242, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--twelfth-sm {
    max-width: 8.333333%;
    width: 8.333333%;
  }
  /* line 247, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--five_twelfths-sm {
    max-width: 41.666666%;
    width: 41.666666%;
  }
  /* line 252, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--seven_twelfths-sm {
    max-width: 58.333333%;
    width: 58.333333%;
  }
  /* line 257, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--eleven_twelfths-sm {
    max-width: 91.666666%;
    width: 91.666666%;
  }
  /* line 263, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--bleed-sm:first-child {
    padding-left: 0;
  }
  /* line 267, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--bleed-sm:last-child {
    padding-right: 0;
  }
  /* line 274, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--gutters-normal-sm {
    --table-padding-vertical: 0.8rem;
    --table-padding-horizontal: 0.8rem;
  }
  /* line 279, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--gutters-compact-sm {
    --table-padding-vertical: 0.4rem;
    --table-padding-horizontal: 0.4rem;
  }
  /* line 284, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--gutters-loose-sm {
    --table-padding-vertical: 1.6rem;
    --table-padding-horizontal: 1.6rem;
  }
  /* line 99, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-normal-sm {
    table-layout: auto;
  }
  /* line 104, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-normal-sm > tbody > tr,
.vivid-lab .table--layout-normal-sm > thead > tr {
    display: table-row;
  }
  /* line 107, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-normal-sm > tbody > tr > td,
.vivid-lab .table--layout-normal-sm > thead > tr > td {
    padding-top: var(--table-padding-vertical);
    padding-bottom: var(--table-padding-vertical);
  }
  /* line 111, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-normal-sm > tbody > tr > td > .table__cell__label,
.vivid-lab .table--layout-normal-sm > thead > tr > td > .table__cell__label {
    display: none;
  }
  /* line 119, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-fixed-sm {
    table-layout: auto;
  }
  /* line 124, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-fixed-sm > tbody > tr,
.vivid-lab .table--layout-fixed-sm > thead > tr {
    display: table-row;
  }
  /* line 127, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-fixed-sm > tbody > tr > td,
.vivid-lab .table--layout-fixed-sm > thead > tr > td {
    padding-top: var(--table-padding-vertical);
    padding-bottom: var(--table-padding-vertical);
  }
  /* line 131, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-fixed-sm > tbody > tr > td > .table__cell__label,
.vivid-lab .table--layout-fixed-sm > thead > tr > td > .table__cell__label {
    display: none;
  }
  /* line 139, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-flex-sm {
    table-layout: auto;
  }
  /* line 144, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-flex-sm > tbody > tr,
.vivid-lab .table--layout-flex-sm > thead > tr {
    display: flex;
    flex-wrap: wrap;
  }
  /* line 148, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-flex-sm > tbody > tr > td,
.vivid-lab .table--layout-flex-sm > thead > tr > td {
    border: 0;
    flex-basis: 100%;
    padding-top: 0;
    padding-bottom: 0;
  }
  /* line 158, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-flex-sm > tbody > tr {
    padding-top: var(--table-padding-vertical);
    padding-bottom: var(--table-padding-vertical);
  }
  /* line 162, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-flex-sm > tbody > tr + tr {
    border-top: 0.1rem solid var(--surface-trim-color);
  }
  /* line 73, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-middle-sm > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-middle-sm,
.vivid-lab table > tbody > tr > .table__cell--align-middle-sm {
    vertical-align: middle;
  }
  /* line 77, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-top-sm > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-top-sm,
.vivid-lab table > tbody > tr > .table__cell--align-top-sm {
    vertical-align: top;
  }
  /* line 81, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-bottom-sm > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-bottom-sm,
.vivid-lab table > tbody > tr > .table__cell--align-bottom-sm {
    vertical-align: bottom;
  }
  /* line 85, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-center-sm > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-center-sm,
.vivid-lab table > tbody > tr > .table__cell--align-center-sm {
    text-align: center;
  }
  /* line 89, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-right-sm > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-right-sm,
.vivid-lab table > tbody > tr > .table__cell--align-right-sm {
    text-align: right;
  }
  /* line 93, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-left-sm > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-left-sm,
.vivid-lab table > tbody > tr > .table__cell--align-left-sm {
    text-align: left;
  }
}

@media (min-width: 992px) {
  /* line 171, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--natural-md {
    max-width: unset;
    min-width: unset;
    width: unset;
  }
  /* line 177, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--minimum-md {
    max-width: 100%;
    width: 0;
  }
  /* line 182, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--fill-md {
    max-width: 100%;
    width: 100%;
  }
  /* line 187, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--half-md {
    max-width: 50%;
    width: 50%;
  }
  /* line 192, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--quarter-md {
    max-width: 25%;
    width: 25%;
  }
  /* line 197, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--three_quarters-md {
    max-width: 75%;
    width: 75%;
  }
  /* line 202, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--third-md {
    max-width: 33.333333%;
    width: 33.333333%;
  }
  /* line 207, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--two_thirds-md {
    max-width: 66.666666%;
    width: 66.666666%;
  }
  /* line 212, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--fifth-md {
    max-width: 20%;
    width: 20%;
  }
  /* line 217, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--two_fifths-md {
    max-width: 40%;
    width: 40%;
  }
  /* line 222, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--three_fifths-md {
    max-width: 60%;
    width: 60%;
  }
  /* line 227, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--four_fifths-md {
    max-width: 80%;
    width: 80%;
  }
  /* line 232, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--sixth-md {
    max-width: 16.666666%;
    width: 16.666666%;
  }
  /* line 237, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--five-sixths-md {
    max-width: 83.333333%;
    width: 83.333333%;
  }
  /* line 242, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--twelfth-md {
    max-width: 8.333333%;
    width: 8.333333%;
  }
  /* line 247, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--five_twelfths-md {
    max-width: 41.666666%;
    width: 41.666666%;
  }
  /* line 252, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--seven_twelfths-md {
    max-width: 58.333333%;
    width: 58.333333%;
  }
  /* line 257, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--eleven_twelfths-md {
    max-width: 91.666666%;
    width: 91.666666%;
  }
  /* line 263, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--bleed-md:first-child {
    padding-left: 0;
  }
  /* line 267, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--bleed-md:last-child {
    padding-right: 0;
  }
  /* line 274, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--gutters-normal-md {
    --table-padding-vertical: 0.8rem;
    --table-padding-horizontal: 0.8rem;
  }
  /* line 279, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--gutters-compact-md {
    --table-padding-vertical: 0.4rem;
    --table-padding-horizontal: 0.4rem;
  }
  /* line 284, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--gutters-loose-md {
    --table-padding-vertical: 1.6rem;
    --table-padding-horizontal: 1.6rem;
  }
  /* line 99, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-normal-md {
    table-layout: auto;
  }
  /* line 104, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-normal-md > tbody > tr,
.vivid-lab .table--layout-normal-md > thead > tr {
    display: table-row;
  }
  /* line 107, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-normal-md > tbody > tr > td,
.vivid-lab .table--layout-normal-md > thead > tr > td {
    padding-top: var(--table-padding-vertical);
    padding-bottom: var(--table-padding-vertical);
  }
  /* line 111, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-normal-md > tbody > tr > td > .table__cell__label,
.vivid-lab .table--layout-normal-md > thead > tr > td > .table__cell__label {
    display: none;
  }
  /* line 119, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-fixed-md {
    table-layout: auto;
  }
  /* line 124, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-fixed-md > tbody > tr,
.vivid-lab .table--layout-fixed-md > thead > tr {
    display: table-row;
  }
  /* line 127, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-fixed-md > tbody > tr > td,
.vivid-lab .table--layout-fixed-md > thead > tr > td {
    padding-top: var(--table-padding-vertical);
    padding-bottom: var(--table-padding-vertical);
  }
  /* line 131, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-fixed-md > tbody > tr > td > .table__cell__label,
.vivid-lab .table--layout-fixed-md > thead > tr > td > .table__cell__label {
    display: none;
  }
  /* line 139, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-flex-md {
    table-layout: auto;
  }
  /* line 144, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-flex-md > tbody > tr,
.vivid-lab .table--layout-flex-md > thead > tr {
    display: flex;
    flex-wrap: wrap;
  }
  /* line 148, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-flex-md > tbody > tr > td,
.vivid-lab .table--layout-flex-md > thead > tr > td {
    border: 0;
    flex-basis: 100%;
    padding-top: 0;
    padding-bottom: 0;
  }
  /* line 158, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-flex-md > tbody > tr {
    padding-top: var(--table-padding-vertical);
    padding-bottom: var(--table-padding-vertical);
  }
  /* line 162, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-flex-md > tbody > tr + tr {
    border-top: 0.1rem solid var(--surface-trim-color);
  }
  /* line 73, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-middle-md > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-middle-md,
.vivid-lab table > tbody > tr > .table__cell--align-middle-md {
    vertical-align: middle;
  }
  /* line 77, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-top-md > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-top-md,
.vivid-lab table > tbody > tr > .table__cell--align-top-md {
    vertical-align: top;
  }
  /* line 81, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-bottom-md > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-bottom-md,
.vivid-lab table > tbody > tr > .table__cell--align-bottom-md {
    vertical-align: bottom;
  }
  /* line 85, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-center-md > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-center-md,
.vivid-lab table > tbody > tr > .table__cell--align-center-md {
    text-align: center;
  }
  /* line 89, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-right-md > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-right-md,
.vivid-lab table > tbody > tr > .table__cell--align-right-md {
    text-align: right;
  }
  /* line 93, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-left-md > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-left-md,
.vivid-lab table > tbody > tr > .table__cell--align-left-md {
    text-align: left;
  }
}

@media (min-width: 1200px) {
  /* line 171, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--natural-lg {
    max-width: unset;
    min-width: unset;
    width: unset;
  }
  /* line 177, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--minimum-lg {
    max-width: 100%;
    width: 0;
  }
  /* line 182, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--fill-lg {
    max-width: 100%;
    width: 100%;
  }
  /* line 187, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--half-lg {
    max-width: 50%;
    width: 50%;
  }
  /* line 192, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--quarter-lg {
    max-width: 25%;
    width: 25%;
  }
  /* line 197, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--three_quarters-lg {
    max-width: 75%;
    width: 75%;
  }
  /* line 202, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--third-lg {
    max-width: 33.333333%;
    width: 33.333333%;
  }
  /* line 207, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--two_thirds-lg {
    max-width: 66.666666%;
    width: 66.666666%;
  }
  /* line 212, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--fifth-lg {
    max-width: 20%;
    width: 20%;
  }
  /* line 217, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--two_fifths-lg {
    max-width: 40%;
    width: 40%;
  }
  /* line 222, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--three_fifths-lg {
    max-width: 60%;
    width: 60%;
  }
  /* line 227, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--four_fifths-lg {
    max-width: 80%;
    width: 80%;
  }
  /* line 232, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--sixth-lg {
    max-width: 16.666666%;
    width: 16.666666%;
  }
  /* line 237, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--five-sixths-lg {
    max-width: 83.333333%;
    width: 83.333333%;
  }
  /* line 242, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--twelfth-lg {
    max-width: 8.333333%;
    width: 8.333333%;
  }
  /* line 247, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--five_twelfths-lg {
    max-width: 41.666666%;
    width: 41.666666%;
  }
  /* line 252, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--seven_twelfths-lg {
    max-width: 58.333333%;
    width: 58.333333%;
  }
  /* line 257, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--eleven_twelfths-lg {
    max-width: 91.666666%;
    width: 91.666666%;
  }
  /* line 263, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--bleed-lg:first-child {
    padding-left: 0;
  }
  /* line 267, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table__cell--bleed-lg:last-child {
    padding-right: 0;
  }
  /* line 274, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--gutters-normal-lg {
    --table-padding-vertical: 0.8rem;
    --table-padding-horizontal: 0.8rem;
  }
  /* line 279, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--gutters-compact-lg {
    --table-padding-vertical: 0.4rem;
    --table-padding-horizontal: 0.4rem;
  }
  /* line 284, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--gutters-loose-lg {
    --table-padding-vertical: 1.6rem;
    --table-padding-horizontal: 1.6rem;
  }
  /* line 99, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-normal-lg {
    table-layout: auto;
  }
  /* line 104, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-normal-lg > tbody > tr,
.vivid-lab .table--layout-normal-lg > thead > tr {
    display: table-row;
  }
  /* line 107, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-normal-lg > tbody > tr > td,
.vivid-lab .table--layout-normal-lg > thead > tr > td {
    padding-top: var(--table-padding-vertical);
    padding-bottom: var(--table-padding-vertical);
  }
  /* line 111, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-normal-lg > tbody > tr > td > .table__cell__label,
.vivid-lab .table--layout-normal-lg > thead > tr > td > .table__cell__label {
    display: none;
  }
  /* line 119, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-fixed-lg {
    table-layout: auto;
  }
  /* line 124, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-fixed-lg > tbody > tr,
.vivid-lab .table--layout-fixed-lg > thead > tr {
    display: table-row;
  }
  /* line 127, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-fixed-lg > tbody > tr > td,
.vivid-lab .table--layout-fixed-lg > thead > tr > td {
    padding-top: var(--table-padding-vertical);
    padding-bottom: var(--table-padding-vertical);
  }
  /* line 131, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-fixed-lg > tbody > tr > td > .table__cell__label,
.vivid-lab .table--layout-fixed-lg > thead > tr > td > .table__cell__label {
    display: none;
  }
  /* line 139, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-flex-lg {
    table-layout: auto;
  }
  /* line 144, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-flex-lg > tbody > tr,
.vivid-lab .table--layout-flex-lg > thead > tr {
    display: flex;
    flex-wrap: wrap;
  }
  /* line 148, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-flex-lg > tbody > tr > td,
.vivid-lab .table--layout-flex-lg > thead > tr > td {
    border: 0;
    flex-basis: 100%;
    padding-top: 0;
    padding-bottom: 0;
  }
  /* line 158, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-flex-lg > tbody > tr {
    padding-top: var(--table-padding-vertical);
    padding-bottom: var(--table-padding-vertical);
  }
  /* line 162, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--layout-flex-lg > tbody > tr + tr {
    border-top: 0.1rem solid var(--surface-trim-color);
  }
  /* line 73, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-middle-lg > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-middle-lg,
.vivid-lab table > tbody > tr > .table__cell--align-middle-lg {
    vertical-align: middle;
  }
  /* line 77, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-top-lg > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-top-lg,
.vivid-lab table > tbody > tr > .table__cell--align-top-lg {
    vertical-align: top;
  }
  /* line 81, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-bottom-lg > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-bottom-lg,
.vivid-lab table > tbody > tr > .table__cell--align-bottom-lg {
    vertical-align: bottom;
  }
  /* line 85, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-center-lg > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-center-lg,
.vivid-lab table > tbody > tr > .table__cell--align-center-lg {
    text-align: center;
  }
  /* line 89, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-right-lg > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-right-lg,
.vivid-lab table > tbody > tr > .table__cell--align-right-lg {
    text-align: right;
  }
  /* line 93, app/assets/stylesheets/lab/table.scss */
  .vivid-lab .table--align-left-lg > tbody > tr > td,
.vivid-lab table > thead > tr > .table__cell--align-left-lg,
.vivid-lab table > tbody > tr > .table__cell--align-left-lg {
    text-align: left;
  }
}

/* line 317, app/assets/stylesheets/lab/table.scss */
.vivid-lab table.table--list > tbody > tr > td:first-child,
.vivid-lab table.table--list > tbody > tr > th:first-child,
.vivid-lab table.table--list > thead > tr > td:first-child,
.vivid-lab table.table--list > thead > tr > th:first-child {
  padding-left: 0;
}

/* line 322, app/assets/stylesheets/lab/table.scss */
.vivid-lab table.table--list > tbody > tr > td:last-child,
.vivid-lab table.table--list > tbody > tr > th:last-child,
.vivid-lab table.table--list > thead > tr > td:last-child,
.vivid-lab table.table--list > thead > tr > th:last-child {
  padding-right: 0;
}

/* line 330, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table-container {
  position: relative;
}

/* line 333, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table-container.surface--bleed {
  padding-left: 0;
  padding-right: 0;
}

/* line 341, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table-container.surface--bleed > table > tbody > tr > td:first-child,
.vivid-lab .table-container.surface--bleed > table > tbody > tr > th:first-child,
.vivid-lab .table-container.surface--bleed > table > thead > tr > td:first-child,
.vivid-lab .table-container.surface--bleed > table > thead > tr > th:first-child {
  padding-left: var(--container-gutter);
}

/* line 346, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table-container.surface--bleed > table > tbody > tr > td:last-child,
.vivid-lab .table-container.surface--bleed > table > tbody > tr > th:last-child,
.vivid-lab .table-container.surface--bleed > table > thead > tr > td:last-child,
.vivid-lab .table-container.surface--bleed > table > thead > tr > th:last-child {
  padding-left: var(--container-gutter);
}

/* line 356, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table-container.surface--bleed-container {
  margin-bottom: calc(var(--container-gutter-vertical) * -1);
}

/* line 360, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table-container.surface--bleed-container {
  margin-top: calc(var(--container-gutter-vertical) * -1);
}

/* line 364, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table-container.surface--outlined,
.vivid-lab .table-container.surface--trimmed {
  border-width: 0.1rem;
  border-style: solid;
}

/* line 370, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--overflow-scroll {
  overflow: auto;
}

/* line 374, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table--overflow-hidden {
  overflow: hidden;
}

/* line 378, app/assets/stylesheets/lab/table.scss */
.vivid-lab .table__cell__label {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 2rem;
  display: block;
  margin: 0;
  color: var(--surface-deemphasized-color);
}

/* line 2, app/assets/stylesheets/lab/scrim.scss */
.vivid-lab .scrim {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--container-border-radius);
  display: flex;
  flex-direction: column;
  overflow: clip;
}

/* line 19, app/assets/stylesheets/lab/scrim.scss */
.vivid-lab .scrim__body,
.vivid-lab .scrim__header,
.vivid-lab .scrim__footer {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* line 27, app/assets/stylesheets/lab/scrim.scss */
.vivid-lab .scrim__body {
  flex: 1;
  flex-direction: column;
}

/* line 32, app/assets/stylesheets/lab/scrim.scss */
.vivid-lab .scrim--variant-frosted {
  background: rgba(244, 242, 241, 0.5);
  backdrop-filter: brightness(1.1) blur(1.6rem);
  -webkit-backdrop-filter: brightness(1.1) blur(1.6rem);
}

@media (prefers-reduced-transparency) {
  /* line 32, app/assets/stylesheets/lab/scrim.scss */
  .vivid-lab .scrim--variant-frosted {
    background: #F4F2F1;
  }
}

/* line 36, app/assets/stylesheets/lab/scrim.scss */
.vivid-lab .scrim--variant-glass {
  background: rgba(244, 242, 241, 0.1);
  backdrop-filter: brightness(1.1) blur(0.2rem);
  -webkit-backdrop-filter: brightness(1.1) blur(0.2rem);
}

@media (prefers-reduced-transparency) {
  /* line 36, app/assets/stylesheets/lab/scrim.scss */
  .vivid-lab .scrim--variant-glass {
    background: #F4F2F1;
  }
}

/* line 40, app/assets/stylesheets/lab/scrim.scss */
.vivid-lab .scrim--variant-shade {
  background-color: rgb(from var(--surface-shade-color) r g b / var(--surface-scrim-opacity));
}

/* line 2, app/assets/stylesheets/lab/stats.scss */
.vivid-lab .stat {
  flex: auto;
  display: flex;
  text-align: center;
  max-width: 100%;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  border-radius: 1.6rem;
  padding: 1.5rem 1.6rem;
}

/* line 15, app/assets/stylesheets/lab/stats.scss */
.vivid-lab .stat__value {
  font-weight: 700;
  line-height: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
}

/* line 23, app/assets/stylesheets/lab/stats.scss */
.vivid-lab .stat__body {
  line-height: 1.3333333333;
  word-spacing: 0;
  margin-top: 0.5em;
  max-width: 100%;
  color: var(--text-color-deemphasized);
}

/* line 30, app/assets/stylesheets/lab/stats.scss */
.vivid-lab .stat__body:empty {
  display: none;
}

/* line 35, app/assets/stylesheets/lab/stats.scss */
.vivid-lab .stat--gutters-none {
  padding: 0;
}

/* line 39, app/assets/stylesheets/lab/stats.scss */
.vivid-lab .stat--display-inline {
  padding: 0;
  display: inline-flex;
}

/* line 43, app/assets/stylesheets/lab/stats.scss */
.vivid-lab .stat--display-inline[class*="stat--size-"] {
  vertical-align: middle;
}

/* line 49, app/assets/stylesheets/lab/stats.scss */
.vivid-lab .stat--size-xlarge .stat__value {
  font-size: 6.4rem;
  max-height: 6.4rem;
}

/* line 53, app/assets/stylesheets/lab/stats.scss */
.vivid-lab .stat--size-xlarge .stat__value .inline-media {
  max-height: 6.4rem;
}

/* line 57, app/assets/stylesheets/lab/stats.scss */
.vivid-lab .stat--size-xlarge .stat__value > span {
  float: left;
}

/* line 62, app/assets/stylesheets/lab/stats.scss */
.vivid-lab .stat--size-xlarge .stat__body {
  font-size: 2.4rem;
}

/* line 49, app/assets/stylesheets/lab/stats.scss */
.vivid-lab .stat--size-large .stat__value {
  font-size: 5.6rem;
  max-height: 5.6rem;
}

/* line 53, app/assets/stylesheets/lab/stats.scss */
.vivid-lab .stat--size-large .stat__value .inline-media {
  max-height: 5.6rem;
}

/* line 57, app/assets/stylesheets/lab/stats.scss */
.vivid-lab .stat--size-large .stat__value > span {
  float: left;
}

/* line 62, app/assets/stylesheets/lab/stats.scss */
.vivid-lab .stat--size-large .stat__body {
  font-size: 2rem;
}

/* line 49, app/assets/stylesheets/lab/stats.scss */
.vivid-lab .stat--size-medium .stat__value {
  font-size: 4.8rem;
  max-height: 4.8rem;
}

/* line 53, app/assets/stylesheets/lab/stats.scss */
.vivid-lab .stat--size-medium .stat__value .inline-media {
  max-height: 4.8rem;
}

/* line 57, app/assets/stylesheets/lab/stats.scss */
.vivid-lab .stat--size-medium .stat__value > span {
  float: left;
}

/* line 62, app/assets/stylesheets/lab/stats.scss */
.vivid-lab .stat--size-medium .stat__body {
  font-size: 1.6rem;
}

/* line 49, app/assets/stylesheets/lab/stats.scss */
.vivid-lab .stat--size-small .stat__value {
  font-size: 4rem;
  max-height: 4rem;
}

/* line 53, app/assets/stylesheets/lab/stats.scss */
.vivid-lab .stat--size-small .stat__value .inline-media {
  max-height: 4rem;
}

/* line 57, app/assets/stylesheets/lab/stats.scss */
.vivid-lab .stat--size-small .stat__value > span {
  float: left;
}

/* line 62, app/assets/stylesheets/lab/stats.scss */
.vivid-lab .stat--size-small .stat__body {
  font-size: 1.4rem;
}

/* line 49, app/assets/stylesheets/lab/stats.scss */
.vivid-lab .stat--size-petite .stat__value {
  font-size: 3.2rem;
  max-height: 3.2rem;
}

/* line 53, app/assets/stylesheets/lab/stats.scss */
.vivid-lab .stat--size-petite .stat__value .inline-media {
  max-height: 3.2rem;
}

/* line 57, app/assets/stylesheets/lab/stats.scss */
.vivid-lab .stat--size-petite .stat__value > span {
  float: left;
}

/* line 62, app/assets/stylesheets/lab/stats.scss */
.vivid-lab .stat--size-petite .stat__body {
  font-size: 1.2rem;
}

/* line 49, app/assets/stylesheets/lab/stats.scss */
.vivid-lab .stat--size-inline .stat__value {
  font-size: 2.4rem;
  max-height: 2.4rem;
}

/* line 53, app/assets/stylesheets/lab/stats.scss */
.vivid-lab .stat--size-inline .stat__value .inline-media {
  max-height: 2.4rem;
}

/* line 57, app/assets/stylesheets/lab/stats.scss */
.vivid-lab .stat--size-inline .stat__value > span {
  float: left;
}

/* line 62, app/assets/stylesheets/lab/stats.scss */
.vivid-lab .stat--size-inline .stat__body {
  font-size: 0.9rem;
}

@media (min-width: 768px) {
  /* line 49, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-xlarge-sm .stat__value {
    font-size: 6.4rem;
    max-height: 6.4rem;
  }
  /* line 53, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-xlarge-sm .stat__value .inline-media {
    max-height: 6.4rem;
  }
  /* line 57, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-xlarge-sm .stat__value > span {
    float: left;
  }
  /* line 62, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-xlarge-sm .stat__body {
    font-size: 2.4rem;
  }
  /* line 49, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-large-sm .stat__value {
    font-size: 5.6rem;
    max-height: 5.6rem;
  }
  /* line 53, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-large-sm .stat__value .inline-media {
    max-height: 5.6rem;
  }
  /* line 57, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-large-sm .stat__value > span {
    float: left;
  }
  /* line 62, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-large-sm .stat__body {
    font-size: 2rem;
  }
  /* line 49, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-medium-sm .stat__value {
    font-size: 4.8rem;
    max-height: 4.8rem;
  }
  /* line 53, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-medium-sm .stat__value .inline-media {
    max-height: 4.8rem;
  }
  /* line 57, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-medium-sm .stat__value > span {
    float: left;
  }
  /* line 62, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-medium-sm .stat__body {
    font-size: 1.6rem;
  }
  /* line 49, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-small-sm .stat__value {
    font-size: 4rem;
    max-height: 4rem;
  }
  /* line 53, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-small-sm .stat__value .inline-media {
    max-height: 4rem;
  }
  /* line 57, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-small-sm .stat__value > span {
    float: left;
  }
  /* line 62, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-small-sm .stat__body {
    font-size: 1.4rem;
  }
  /* line 49, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-petite-sm .stat__value {
    font-size: 3.2rem;
    max-height: 3.2rem;
  }
  /* line 53, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-petite-sm .stat__value .inline-media {
    max-height: 3.2rem;
  }
  /* line 57, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-petite-sm .stat__value > span {
    float: left;
  }
  /* line 62, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-petite-sm .stat__body {
    font-size: 1.2rem;
  }
  /* line 49, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-inline-sm .stat__value {
    font-size: 2.4rem;
    max-height: 2.4rem;
  }
  /* line 53, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-inline-sm .stat__value .inline-media {
    max-height: 2.4rem;
  }
  /* line 57, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-inline-sm .stat__value > span {
    float: left;
  }
  /* line 62, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-inline-sm .stat__body {
    font-size: 0.9rem;
  }
}

@media (min-width: 992px) {
  /* line 49, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-xlarge-md .stat__value {
    font-size: 6.4rem;
    max-height: 6.4rem;
  }
  /* line 53, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-xlarge-md .stat__value .inline-media {
    max-height: 6.4rem;
  }
  /* line 57, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-xlarge-md .stat__value > span {
    float: left;
  }
  /* line 62, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-xlarge-md .stat__body {
    font-size: 2.4rem;
  }
  /* line 49, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-large-md .stat__value {
    font-size: 5.6rem;
    max-height: 5.6rem;
  }
  /* line 53, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-large-md .stat__value .inline-media {
    max-height: 5.6rem;
  }
  /* line 57, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-large-md .stat__value > span {
    float: left;
  }
  /* line 62, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-large-md .stat__body {
    font-size: 2rem;
  }
  /* line 49, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-medium-md .stat__value {
    font-size: 4.8rem;
    max-height: 4.8rem;
  }
  /* line 53, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-medium-md .stat__value .inline-media {
    max-height: 4.8rem;
  }
  /* line 57, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-medium-md .stat__value > span {
    float: left;
  }
  /* line 62, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-medium-md .stat__body {
    font-size: 1.6rem;
  }
  /* line 49, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-small-md .stat__value {
    font-size: 4rem;
    max-height: 4rem;
  }
  /* line 53, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-small-md .stat__value .inline-media {
    max-height: 4rem;
  }
  /* line 57, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-small-md .stat__value > span {
    float: left;
  }
  /* line 62, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-small-md .stat__body {
    font-size: 1.4rem;
  }
  /* line 49, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-petite-md .stat__value {
    font-size: 3.2rem;
    max-height: 3.2rem;
  }
  /* line 53, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-petite-md .stat__value .inline-media {
    max-height: 3.2rem;
  }
  /* line 57, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-petite-md .stat__value > span {
    float: left;
  }
  /* line 62, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-petite-md .stat__body {
    font-size: 1.2rem;
  }
  /* line 49, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-inline-md .stat__value {
    font-size: 2.4rem;
    max-height: 2.4rem;
  }
  /* line 53, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-inline-md .stat__value .inline-media {
    max-height: 2.4rem;
  }
  /* line 57, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-inline-md .stat__value > span {
    float: left;
  }
  /* line 62, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-inline-md .stat__body {
    font-size: 0.9rem;
  }
}

@media (min-width: 1200px) {
  /* line 49, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-xlarge-lg .stat__value {
    font-size: 6.4rem;
    max-height: 6.4rem;
  }
  /* line 53, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-xlarge-lg .stat__value .inline-media {
    max-height: 6.4rem;
  }
  /* line 57, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-xlarge-lg .stat__value > span {
    float: left;
  }
  /* line 62, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-xlarge-lg .stat__body {
    font-size: 2.4rem;
  }
  /* line 49, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-large-lg .stat__value {
    font-size: 5.6rem;
    max-height: 5.6rem;
  }
  /* line 53, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-large-lg .stat__value .inline-media {
    max-height: 5.6rem;
  }
  /* line 57, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-large-lg .stat__value > span {
    float: left;
  }
  /* line 62, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-large-lg .stat__body {
    font-size: 2rem;
  }
  /* line 49, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-medium-lg .stat__value {
    font-size: 4.8rem;
    max-height: 4.8rem;
  }
  /* line 53, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-medium-lg .stat__value .inline-media {
    max-height: 4.8rem;
  }
  /* line 57, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-medium-lg .stat__value > span {
    float: left;
  }
  /* line 62, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-medium-lg .stat__body {
    font-size: 1.6rem;
  }
  /* line 49, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-small-lg .stat__value {
    font-size: 4rem;
    max-height: 4rem;
  }
  /* line 53, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-small-lg .stat__value .inline-media {
    max-height: 4rem;
  }
  /* line 57, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-small-lg .stat__value > span {
    float: left;
  }
  /* line 62, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-small-lg .stat__body {
    font-size: 1.4rem;
  }
  /* line 49, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-petite-lg .stat__value {
    font-size: 3.2rem;
    max-height: 3.2rem;
  }
  /* line 53, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-petite-lg .stat__value .inline-media {
    max-height: 3.2rem;
  }
  /* line 57, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-petite-lg .stat__value > span {
    float: left;
  }
  /* line 62, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-petite-lg .stat__body {
    font-size: 1.2rem;
  }
  /* line 49, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-inline-lg .stat__value {
    font-size: 2.4rem;
    max-height: 2.4rem;
  }
  /* line 53, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-inline-lg .stat__value .inline-media {
    max-height: 2.4rem;
  }
  /* line 57, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-inline-lg .stat__value > span {
    float: left;
  }
  /* line 62, app/assets/stylesheets/lab/stats.scss */
  .vivid-lab .stat--size-inline-lg .stat__body {
    font-size: 0.9rem;
  }
}

/* line 104, app/assets/stylesheets/lab/stats.scss */
.vivid-lab .btn > .stat {
  border-radius: inherit;
}

/* line 2, app/assets/stylesheets/lab/schedule.scss */
.vivid-lab .schedule-event {
  position: relative;
  border-radius: 0.6rem;
  padding: 0.8rem 1.2rem;
  border-left-style: solid;
  border-left-width: 1.2rem;
  min-width: 0;
}

/* line 11, app/assets/stylesheets/lab/schedule.scss */
.vivid-lab .schedule-event + .schedule-event {
  margin-top: 0.8rem;
}

/* line 2, app/assets/stylesheets/lab/pull_quote.scss */
.vivid-lab .pull-quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 0;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
}

/* line 14, app/assets/stylesheets/lab/pull_quote.scss */
.vivid-lab .pull-quote__media {
  margin-bottom: 1.6rem;
}

@media screen and (min-width: 0\0) {
  /* line 14, app/assets/stylesheets/lab/pull_quote.scss */
  .vivid-lab .pull-quote__media {
    flex: 1 1 auto;
    width: 100%;
  }
  /* line 21, app/assets/stylesheets/lab/pull_quote.scss */
  .vivid-lab .pull-quote__media .inline-media {
    display: inline-block;
  }
}

/* line 27, app/assets/stylesheets/lab/pull_quote.scss */
.vivid-lab .pull-quote__body,
.vivid-lab .pull-quote__author {
  display: inline;
}

/* line 32, app/assets/stylesheets/lab/pull_quote.scss */
.vivid-lab .pull-quote__quote {
  flex: 1 1 auto;
  width: 100%;
}

/* line 37, app/assets/stylesheets/lab/pull_quote.scss */
.vivid-lab .pull-quote__author {
  font-style: italic;
  white-space: nowrap;
}

/* line 41, app/assets/stylesheets/lab/pull_quote.scss */
.vivid-lab .pull-quote__author::before {
  content: "\2014\00a0\00a0";
}

/* line 46, app/assets/stylesheets/lab/pull_quote.scss */
.vivid-lab .pull-quote--variant-normal {
  font-size: 2rem;
  font-weight: 700;
  line-height: 2.8rem;
  font-weight: 700;
  padding: 1.6rem 1.6rem;
}

@media (min-width: 768px) {
  /* line 46, app/assets/stylesheets/lab/pull_quote.scss */
  .vivid-lab .pull-quote--variant-normal {
    font-size: 2.4rem;
    line-height: 3.2rem;
    padding: 2.4rem 2.4rem;
  }
}

/* line 64, app/assets/stylesheets/lab/pull_quote.scss */
.vivid-lab .pull-quote--variant-title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3333333333;
}

@media (max-width: 767px) {
  /* line 64, app/assets/stylesheets/lab/pull_quote.scss */
  .vivid-lab .pull-quote--variant-title {
    font-size: 1.6rem;
  }
}

/* line 74, app/assets/stylesheets/lab/pull_quote.scss */
.vivid-lab .pull-quote--variant-deemphasized {
  padding: 1.5rem 1.6rem;
}

/* line 2, app/assets/stylesheets/lab/hero.scss */
.vivid-lab .hero {
  font-size: 2rem;
  font-weight: 400;
  line-height: 2.8rem;
  font-style: normal;
  text-align: left;
  overflow: hidden;
}

@media (max-width: 767px) {
  /* line 2, app/assets/stylesheets/lab/hero.scss */
  .vivid-lab .hero {
    margin-left: -2.4rem;
    margin-right: -2.4rem;
  }
}

@media (min-width: 768px) {
  /* line 2, app/assets/stylesheets/lab/hero.scss */
  .vivid-lab .hero {
    border-radius: 2rem;
  }
}

@media (min-width: 992px) {
  /* line 2, app/assets/stylesheets/lab/hero.scss */
  .vivid-lab .hero {
    border-radius: 2.4rem;
  }
}

/* line 24, app/assets/stylesheets/lab/hero.scss */
.vivid-lab .hero__content {
  display: flex;
  flex-direction: column;
  padding: 2.4rem 1.6rem;
  align-items: center;
  justify-content: space-evenly;
}

@media (min-width: 992px) {
  /* line 24, app/assets/stylesheets/lab/hero.scss */
  .vivid-lab .hero__content {
    flex-direction: row;
    padding: 2.4rem 2.4rem;
  }
}

/* line 37, app/assets/stylesheets/lab/hero.scss */
.vivid-lab .hero__messaging {
  max-width: 89.5rem;
}

/* line 41, app/assets/stylesheets/lab/hero.scss */
.vivid-lab .hero__media {
  margin: 3.2rem 1.6rem;
  flex: 1 0 auto;
}

/* line 45, app/assets/stylesheets/lab/hero.scss */
.vivid-lab .hero__media img {
  vertical-align: middle;
}

@media (min-width: 992px) {
  /* line 41, app/assets/stylesheets/lab/hero.scss */
  .vivid-lab .hero__media {
    margin-left: 2.4rem;
    margin-right: 0;
  }
}

/* line 55, app/assets/stylesheets/lab/hero.scss */
.vivid-lab .hero__messaging .hero__body {
  display: none;
  margin-top: 1.6rem;
}

@media (min-width: 992px) {
  /* line 55, app/assets/stylesheets/lab/hero.scss */
  .vivid-lab .hero__messaging .hero__body {
    display: block;
  }
}

/* line 64, app/assets/stylesheets/lab/hero.scss */
.vivid-lab .hero__title {
  margin: 0;
  text-align: center;
}

@media (min-width: 992px) {
  /* line 64, app/assets/stylesheets/lab/hero.scss */
  .vivid-lab .hero__title {
    text-align: left;
  }
}

/* line 74, app/assets/stylesheets/lab/hero.scss */
.vivid-lab .hero__post_messaging .hero__body {
  margin-top: 1.6rem;
}

@media (min-width: 992px) {
  /* line 73, app/assets/stylesheets/lab/hero.scss */
  .vivid-lab .hero__post_messaging {
    display: none;
  }
}

/* line 83, app/assets/stylesheets/lab/hero.scss */
.vivid-lab .hero__media + .hero__post_messaging .hero__body {
  margin-top: 0;
}

/* line 88, app/assets/stylesheets/lab/hero.scss */
.vivid-lab .hero--align-right .hero__content {
  justify-content: flex-end;
}

/* line 92, app/assets/stylesheets/lab/hero.scss */
.vivid-lab .hero--align-right .hero__title {
  text-align: left;
}

/* line 98, app/assets/stylesheets/lab/hero.scss */
.vivid-lab .hero--align-left .hero__content {
  justify-content: flex-start;
}

/* line 102, app/assets/stylesheets/lab/hero.scss */
.vivid-lab .hero--align-left .hero__title {
  text-align: left;
}

@media (min-width: 992px) {
  /* line 108, app/assets/stylesheets/lab/hero.scss */
  .vivid-lab .hero--align-top .hero__content {
    align-items: flex-start;
  }
}

@media (max-width: 991px) {
  /* line 117, app/assets/stylesheets/lab/hero.scss */
  .vivid-lab .hero--variant-cta .hero__media {
    order: 2;
    padding: 0;
    flex-grow: 0;
    margin-left: -1.6rem;
    margin-right: -1.6rem;
    margin-bottom: 0;
    max-width: 75vmin;
  }
  /* line 127, app/assets/stylesheets/lab/hero.scss */
  .vivid-lab .hero--variant-cta .hero__media + .hero__post_messaging .hero__body {
    margin-top: 1.6rem;
  }
  /* line 131, app/assets/stylesheets/lab/hero.scss */
  .vivid-lab .hero--variant-cta .hero__content {
    padding-bottom: 0;
    min-height: 100vh;
    justify-content: space-between;
  }
}

/* line 140, app/assets/stylesheets/lab/hero.scss */
.vivid-lab .hero--variant-product .hero__media {
  max-width: none;
}

@media (min-width: 768px) {
  /* line 140, app/assets/stylesheets/lab/hero.scss */
  .vivid-lab .hero--variant-product .hero__media {
    max-width: 75%;
  }
}

@media (min-width: 992px) {
  /* line 140, app/assets/stylesheets/lab/hero.scss */
  .vivid-lab .hero--variant-product .hero__media {
    max-width: 50%;
  }
}

@media (max-width: 991px) {
  /* line 140, app/assets/stylesheets/lab/hero.scss */
  .vivid-lab .hero--variant-product .hero__media {
    margin-left: -1.6rem;
    margin-right: -1.6rem;
  }
}

/* line 159, app/assets/stylesheets/lab/hero.scss */
.vivid-lab .hero--variant-illustration .hero__media {
  max-width: none;
}

@media (min-width: 768px) {
  /* line 159, app/assets/stylesheets/lab/hero.scss */
  .vivid-lab .hero--variant-illustration .hero__media {
    max-width: 75%;
  }
}

@media (min-width: 992px) {
  /* line 159, app/assets/stylesheets/lab/hero.scss */
  .vivid-lab .hero--variant-illustration .hero__media {
    max-width: 50%;
  }
}

/* line 173, app/assets/stylesheets/lab/hero.scss */
.vivid-lab .hero--variant-video .hero__media {
  max-width: 100%;
  width: 100%;
}

@media (min-width: 768px) {
  /* line 173, app/assets/stylesheets/lab/hero.scss */
  .vivid-lab .hero--variant-video .hero__media {
    max-width: 75%;
    width: 75%;
  }
}

@media (min-width: 992px) {
  /* line 173, app/assets/stylesheets/lab/hero.scss */
  .vivid-lab .hero--variant-video .hero__media {
    max-width: 50%;
    width: 50%;
  }
}

@media (max-width: 991px) {
  /* line 173, app/assets/stylesheets/lab/hero.scss */
  .vivid-lab .hero--variant-video .hero__media {
    margin-left: -1.6rem;
    margin-right: -1.6rem;
  }
}

/* line 195, app/assets/stylesheets/lab/hero.scss */
.vivid-lab .hero--variant-grid .hero__messaging,
.vivid-lab .hero--variant-grid .hero__post_messaging,
.vivid-lab .hero--variant-grid .hero__media,
.vivid-lab .hero--variant-grid .hero__body {
  max-width: none;
  flex: 1;
}

/* line 205, app/assets/stylesheets/lab/hero.scss */
.vivid-lab .hero--masthead .hero__content {
  padding-top: calc(2.4rem + var(--safe-area-inset-top));
}

/* line 212, app/assets/stylesheets/lab/hero.scss */
.body-container--full-bleed .hero {
  border-radius: 0;
}

@media (max-width: 767px) {
  /* line 212, app/assets/stylesheets/lab/hero.scss */
  .body-container--full-bleed .hero {
    margin-left: 0;
    margin-right: 0;
  }
}

/* line 2, app/assets/stylesheets/lab/color_block.scss */
.vivid-lab .color-block {
  position: relative;
}

/* line 6, app/assets/stylesheets/lab/color_block.scss */
.vivid-lab .color-block__content {
  background-size: cover;
  background-position: 50% 50%;
  overflow: hidden;
}

/* line 11, app/assets/stylesheets/lab/color_block.scss */
.vivid-lab .color-block__content:before, .vivid-lab .color-block__content:after {
  content: "";
  display: table;
}

/* line 18, app/assets/stylesheets/lab/color_block.scss */
.vivid-lab .color-block__curve {
  display: none;
  height: 5vw;
  position: relative;
  max-height: 3.2rem;
}

/* line 24, app/assets/stylesheets/lab/color_block.scss */
.vivid-lab .color-block__curve svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

/* line 32, app/assets/stylesheets/lab/color_block.scss */
.vivid-lab .color-block--curved-top-overlap {
  margin-top: -3.2rem;
}

/* line 36, app/assets/stylesheets/lab/color_block.scss */
.vivid-lab .color-block--curved-bottom-overlap {
  margin-bottom: -3.2rem;
}

/* line 42, app/assets/stylesheets/lab/color_block.scss */
.vivid-lab .color-block--curved-top .color-block__curve:first-child {
  display: block;
}

/* line 48, app/assets/stylesheets/lab/color_block.scss */
.vivid-lab .color-block--curved-bottom .color-block__curve:last-child {
  display: block;
}

@media (min-width: 480px) {
  /* line 42, app/assets/stylesheets/lab/color_block.scss */
  .vivid-lab .color-block--curved-top-xs .color-block__curve:first-child {
    display: block;
  }
  /* line 48, app/assets/stylesheets/lab/color_block.scss */
  .vivid-lab .color-block--curved-bottom-xs .color-block__curve:last-child {
    display: block;
  }
}

@media (min-width: 768px) {
  /* line 42, app/assets/stylesheets/lab/color_block.scss */
  .vivid-lab .color-block--curved-top-sm .color-block__curve:first-child {
    display: block;
  }
  /* line 48, app/assets/stylesheets/lab/color_block.scss */
  .vivid-lab .color-block--curved-bottom-sm .color-block__curve:last-child {
    display: block;
  }
}

@media (min-width: 992px) {
  /* line 42, app/assets/stylesheets/lab/color_block.scss */
  .vivid-lab .color-block--curved-top-md .color-block__curve:first-child {
    display: block;
  }
  /* line 48, app/assets/stylesheets/lab/color_block.scss */
  .vivid-lab .color-block--curved-bottom-md .color-block__curve:last-child {
    display: block;
  }
}

@media (min-width: 1200px) {
  /* line 42, app/assets/stylesheets/lab/color_block.scss */
  .vivid-lab .color-block--curved-top-lg .color-block__curve:first-child {
    display: block;
  }
  /* line 48, app/assets/stylesheets/lab/color_block.scss */
  .vivid-lab .color-block--curved-bottom-lg .color-block__curve:last-child {
    display: block;
  }
}

/* line 2, app/assets/stylesheets/lab/su.scss */
.vivid-lab .su {
  padding: 10px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1100;
  background-color: var(--surface-color);
  color: var(--surface-background-color);
  border-radius: 1rem;
}

/* line 12, app/assets/stylesheets/lab/su.scss */
.vivid-lab .su form {
  display: inline-block;
  margin-left: 10px;
  margin-top: 0 !important;
}

/* line 17, app/assets/stylesheets/lab/su.scss */
.vivid-lab .su form .btn {
  padding: 10px;
  font-size: 1rem;
  color: white;
  background-color: var(--surface-emphasis-color);
  margin-bottom: 0 !important;
}

/* line 3, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .form-group.form-group--first,
.vivid-lab .form-group + .form-group {
  margin-top: 1.6rem;
}

/* line 7, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .form-group.form-group--first.form-group--compact,
.vivid-lab .form-group + .form-group.form-group--compact {
  margin-top: 0.8rem;
}

/* line 11, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .form-group.form-group--first.form-group--cozy,
.vivid-lab .form-group + .form-group.form-group--cozy {
  margin-top: 0.4rem;
}

/* line 16, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .form-group label {
  font-weight: 600;
  display: block;
  margin-bottom: 0.4rem;
  position: relative;
}

/* line 22, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .form-group label small {
  color: var(--surface-deemphasized-color);
  margin-left: 0.8rem;
}

@media (hover: none) {
  /* line 16, app/assets/stylesheets/lab/form/base.scss */
  .vivid-lab .form-group label {
    -webkit-tap-highlight-color: transparent;
  }
}

/* line 32, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .form-group label > label {
  display: inline;
  margin: 0;
}

/* line 37, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .form-group label:has(.form-control) {
  max-width: max-content;
}

/* line 41, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .form-group label.label--light-weight {
  font-weight: 500;
}

/* line 45, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .form-group label + label {
  margin-top: 0.8rem;
}

/* line 51, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .form-group,
.vivid-lab .input-group {
  position: relative;
}

/* line 56, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .input-group,
.vivid-lab .form-control {
  --control-border-radius: 1.2rem;
  --input-vertical-padding: 1.5rem;
  --input-horizontal-padding: 1.6rem;
  --input-height: 5.6rem;
  --input-line-height: 2.4rem;
}

/* line 65, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .input-group-addon,
.vivid-lab .form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  opacity: 1;
  transition: outline 0.125s ease-in-out;
  outline-offset: 0.2rem;
  border-radius: var(--control-border-radius);
  box-shadow: none;
  padding: var(--input-vertical-padding) var(--input-horizontal-padding);
  margin: 0;
  font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1.6rem;
  font-weight: 400;
  line-height: var(--input-line-height);
  height: auto;
  min-height: var(--input-height);
  background: #FFFFFF;
  border: 0.1rem solid var(--surface-container-input-outline-color);
  color: #0A0A0A;
}

@media (hover: none) {
  /* line 65, app/assets/stylesheets/lab/form/base.scss */
  .vivid-lab .input-group-addon,
.vivid-lab .form-control {
    -webkit-tap-highlight-color: transparent;
  }
}

/* line 101, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .input-group-addon::placeholder,
.vivid-lab .form-control::placeholder {
  font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: #919191;
}

/* line 107, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .input-group-addon::-webkit-datetime-edit-fields-wrapper,
.vivid-lab .form-control::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

/* line 112, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .input-group-addon--gutters-none {
  padding-left: 0;
  padding-right: 0;
}

/* line 116, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .input-group-addon--gutters-cozy {
  padding-left: calc(var(--input-horizontal-padding) / 4);
  padding-right: calc(var(--input-horizontal-padding) / 4);
}

/* line 120, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .input-group-addon--gutters-compact {
  padding-left: calc(var(--input-horizontal-padding) / 2);
  padding-right: calc(var(--input-horizontal-padding) / 2);
}

/* line 125, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .form--validate .form-control:invalid,
.vivid-lab .form-control.form-control--validate:invalid,
.vivid-lab .input-group:has(.form-control--validate:invalid),
.vivid-lab .form--validate .input-group:has(.form-control--validate:invalid),
.vivid-lab .input-group--invalid,
.vivid-lab .form-control--invalid {
  border-color: #944600;
  background-color: #FFEDD1;
}

/* line 135, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .form-control__validation-message {
  --surface-elevation: 1;
  box-shadow: 0 0.1rem 0.1rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 0.2rem 0.4rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 0.3rem 0.8rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity, 0.02));
  display: block;
  list-style: none;
  background-color: #944600;
  color: #FFEDD1;
  padding: 0.6rem 1.2rem;
  border-radius: 0.6rem;
  margin-top: 0.6rem;
  font-size: 1.4rem;
  line-height: 2rem;
  z-index: 1070;
  top: 100%;
  user-select: none;
  pointer-events: none;
  transition: opacity 0.25s;
}

/* line 153, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .form-control__validation-message > li {
  display: block;
}

/* line 161, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab label .form-control__validation-message,
.vivid-lab .input-group .form-control__validation-message,
.vivid-lab .form-group .form-control__validation-message {
  position: absolute;
  opacity: 0;
}

/* line 170, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .input-group:focus-within + .form-control__validation-message,
.vivid-lab .form-control--invalid:focus + .form-control__validation-message,
.vivid-lab .form-control:focus:invalid + .form-control__validation-message {
  opacity: 1;
}

/* line 175, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .form-control__label--invalid {
  color: #944600;
}

/* line 179, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .form__validation-message {
  display: block;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* line 185, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .form__validation-message > li {
  display: block;
  padding: 0;
  margin: 0;
}

/* line 196, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .form--invalid input[type="submit"]:not([formnovalidate]),
.vivid-lab .form--invalid input[type="button"]:not([formnovalidate]),
.vivid-lab .form--invalid submit:not([formnovalidate]) {
  opacity: 0.4;
  cursor: not-allowed;
}

/* line 203, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .form-control--disabled,
.vivid-lab .form-control[disabled],
.vivid-lab .input-group:has([disabled]):not(:has(:not([disabled]))),
.vivid-lab fieldset[disabled] .form-control {
  border-color: transparent;
  background-color: var(--surface-greek-color);
  color: var(--surface-deemphasized-color);
  cursor: not-allowed;
  opacity: 1;
}

/* line 214, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .form-control--disabled::placeholder,
.vivid-lab .form-control[disabled]::placeholder,
.vivid-lab .input-group:has([disabled]):not(:has(:not([disabled])))::placeholder,
.vivid-lab fieldset[disabled] .form-control::placeholder {
  color: inherit;
}

/* line 219, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab fieldset {
  border: none;
  padding: 0;
}

/* line 224, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab input.form-control[type="password"] {
  font-family: small-caption;
}

/* line 229, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab select.form-control:not([multiple]) {
  background-image: url('data:image/svg+xml,<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m17.92 8.18018h-6.23-5.61001c-.96 0-1.44 1.16-.76 1.84002l5.18001 5.18c.83.83 2.18.83 3.01 0l1.97-1.97 3.21-3.21c.67-.68002.19-1.84002-.77-1.84002z" fill="rgb(10,10,10)"/></svg>');
  background-repeat: no-repeat;
  background-position: right var(--input-horizontal-padding) top 50%;
  background-size: 0.75lh auto, 100%;
  padding-right: calc(var(--input-horizontal-padding) + 0.75lh);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* line 243, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab select.form-control:not([multiple])::-ms-expand {
  display: none;
}

/* line 249, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab select.form-control[multiple] > option {
  padding: 0 var(--input-horizontal-padding);
  margin: 0 calc(var(--input-horizontal-padding) * -1);
  white-space: normal;
}

/* line 254, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab select.form-control[multiple] > option:checked {
  background: var(--surface-greek-color);
}

/* line 260, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .select-group {
  display: flex;
  flex-wrap: wrap;
  margin: -0.4rem -0.4rem;
}

/* line 265, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .select-group select {
  margin: 0.4rem 0.4rem;
  flex: 1 0 auto;
  width: auto;
}

/* line 272, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .select-group--wrap-none {
  flex-wrap: nowrap;
}

/* line 278, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab input.form-control[type="time"]:not(:focus)::-webkit-calendar-picker-indicator {
  display: none;
}

/* line 284, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .input-group {
  --control-border-radius: 1.2rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: flex;
  width: 100%;
  margin: 0;
  height: auto;
  min-height: var(--input-height);
  position: relative;
  background: #FFFFFF;
  border: 0.1rem solid var(--surface-container-input-outline-color);
  color: #0A0A0A;
  transition: outline 0.125s ease-in-out;
  outline-offset: 0.2rem;
  border-radius: var(--control-border-radius);
}

/* line 311, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .input-group > .input-group-addon,
.vivid-lab .input-group > .form-control {
  border-radius: 0;
  border: none;
  flex: 1 1 auto;
}

/* line 317, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .input-group > .input-group-addon:not(:disabled),
.vivid-lab .input-group > .form-control:not(:disabled) {
  background-color: transparent;
}

/* line 320, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .input-group > .input-group-addon:not(:disabled):focus-visible,
.vivid-lab .input-group > .form-control:not(:disabled):focus-visible {
  outline: none;
}

/* line 325, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .input-group > .input-group-addon:first-child,
.vivid-lab .input-group > .form-control:first-child {
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}

/* line 330, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .input-group > .input-group-addon:last-child,
.vivid-lab .input-group > .form-control:last-child {
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
}

/* line 336, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .input-group > select.form-control {
  flex: 0 2 calc(max-content + var(--input-horizontal-padding) * 2);
}

/* line 339, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .input-group > select.form-control:not(:last-child) {
  padding-right: calc(var(--input-horizontal-padding) / 2 + 0.75lh);
  background-position: right calc(var(--input-horizontal-padding) / 2) top 50%;
}

/* line 345, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .input-group .input-group-addon {
  flex: 0 0 0;
}

/* line 349, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .input-group input.form-control:not(:last-child) {
  padding-right: calc(var(--input-horizontal-padding) / 2);
}

/* line 353, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .input-group input.form-control:not(:first-child) {
  padding-left: calc(var(--input-horizontal-padding) / 2);
}

/* line 357, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .input-group:focus-within {
  outline: 0.2rem solid var(--link-color);
}

/* line 361, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .input-group:focus-within .input-group-addon:first-child, .vivid-lab .input-group:focus-within .input-group-addon:last-child {
  background-color: var(--surface-greek-color);
}

/* line 370, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .input-group-password .button {
  border: none;
  border-radius: 50%;
  color: inherit;
  margin: calc((var(--input-height) - var(--natural-button-height)) / 2);
}

/* line 377, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .input-group-password .button:focus-visible {
  outline: none;
  background-color: #0C50FD;
  color: #FFFFFF;
}

/* line 385, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .input-group-password span.input-group-addon:last-child {
  background-color: transparent;
  padding: 0;
  opacity: 0.25;
  transition: opacity 0.125s ease-in-out;
}

/* line 393, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .input-group-password:focus-within span.input-group-addon:last-child {
  background-color: transparent;
  opacity: 1;
}

/* line 399, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .input-group-password .input-group-password__icon--visible {
  display: none;
}

/* line 404, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .input-group-password[show] .input-group-password__icon--visible {
  display: block;
}

/* line 408, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .input-group-password[show] .input-group-password__icon--hidden {
  display: none;
}

/* line 414, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .input-group--size-medium,
.vivid-lab .input-group--size-medium .form-control,
.vivid-lab .form-control--size-medium {
  --control-border-radius: 0.8rem;
  --input-vertical-padding: 0.7rem;
  --input-horizontal-padding: 1.2rem;
  --input-height: 4rem;
  --input-line-height: 2.4rem;
}

/* line 424, app/assets/stylesheets/lab/form/base.scss */
.vivid-lab .input-group--size-small,
.vivid-lab .input-group--size-small .form-control,
.vivid-lab .form-control--size-small {
  --control-border-radius: 0.6rem;
  --input-vertical-padding: 0.5rem;
  --input-horizontal-padding: 1rem;
  --input-height: 3.2rem;
  --input-line-height: 2rem;
}

/* line 5, app/assets/stylesheets/lab/form/range.scss */
.vivid-lab input.form-control[type="range"] {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  overflow: visible;
  min-height: 0;
  padding: 0;
}

/* line 14, app/assets/stylesheets/lab/form/range.scss */
.vivid-lab input.form-control[type="range"]::-webkit-slider-thumb {
  --surface-elevation: 1;
  box-shadow: 0 0.1rem 0.1rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 0.2rem 0.4rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 0.3rem 0.8rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity, 0.02));
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 2rem;
  display: block;
  background-color: #FFFFFF;
  border: solid 0.1rem var(--surface-container-input-outline-color);
  width: 2rem;
  height: 2rem;
  margin-top: -0.65rem;
  transition: outline 0.125s;
  outline-offset: 0.2rem;
}

/* line 34, app/assets/stylesheets/lab/form/range.scss */
.vivid-lab input.form-control[type="range"]::-webkit-slider-runnable-track {
  box-sizing: border-box;
  height: 0.8rem;
  border-radius: 0.8rem;
  background-color: var(--surface-greek-color);
}

/* line 41, app/assets/stylesheets/lab/form/range.scss */
.vivid-lab input.form-control[type="range"]::-moz-range-thumb {
  --surface-elevation: 1;
  box-shadow: 0 0.1rem 0.1rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 0.2rem 0.4rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 0.3rem 0.8rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity, 0.02));
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 2rem;
  display: block;
  background-color: #FFFFFF;
  border: solid 0.1rem var(--surface-container-input-outline-color);
  width: 2rem;
  height: 2rem;
  margin-top: -0.65rem;
  transition: outline 0.125s;
  outline-offset: 0.2rem;
}

/* line 61, app/assets/stylesheets/lab/form/range.scss */
.vivid-lab input.form-control[type="range"]::-moz-range-track {
  box-sizing: border-box;
  height: 0.8rem;
  border-radius: 0.8rem;
  background-color: var(--surface-greek-color);
}

/* line 68, app/assets/stylesheets/lab/form/range.scss */
.vivid-lab input.form-control[type="range"]:focus-visible {
  outline: none;
}

/* line 70, app/assets/stylesheets/lab/form/range.scss */
.vivid-lab input.form-control[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 0.2rem solid var(--link-color);
}

/* line 74, app/assets/stylesheets/lab/form/range.scss */
.vivid-lab input.form-control[type="range"]:focus-visible::-moz-range-thumb {
  outline: 0.2rem solid var(--link-color);
}

/* line 2, app/assets/stylesheets/lab/form/checkbox.scss */
.vivid-lab input.form-control[type="checkbox"],
.vivid-lab input.form-control[type="radio"] {
  --control-border-radius: 0.6rem;
  border-width: 0.2rem;
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  min-height: 2rem;
  padding: 0;
  align-items: center;
  justify-content: center;
  margin-top: calc((1lh - 2rem) / 2);
  flex: 0 0 auto;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 1.8rem;
  transition: background 0.125s, border 0.125s, color 0.125s;
}

/* line 28, app/assets/stylesheets/lab/form/checkbox.scss */
.vivid-lab input.form-control[type="checkbox"]:after,
.vivid-lab input.form-control[type="radio"]:after {
  transition: background 0.125s, border 0.125s, color 0.125s;
}

/* line 38, app/assets/stylesheets/lab/form/checkbox.scss */
fieldset .vivid-lab input.form-control[type="checkbox"], .vivid-lab input.form-control[type="checkbox"][inactive], .vivid-lab input.form-control[type="checkbox"]:disabled, fieldset .vivid-lab input.form-control[type="radio"],
.vivid-lab input.form-control[type="radio"][inactive],
.vivid-lab input.form-control[type="radio"]:disabled {
  background-color: var(--surface-greek-color);
}

/* line 45, app/assets/stylesheets/lab/form/checkbox.scss */
.vivid-lab input.form-control[type="radio"] {
  --control-border-radius: 1rem;
}

/* line 48, app/assets/stylesheets/lab/form/checkbox.scss */
.vivid-lab input.form-control[type="radio"]:after {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  border-radius: inherit;
  visibility: hidden;
}

/* line 59, app/assets/stylesheets/lab/form/checkbox.scss */
.vivid-lab input.form-control[type="checkbox"]:checked {
  background-color: var(--surface-accent-color, #0C50FD);
  border-color: transparent;
  color: var(--surface-accent-complementary-color, #FFFFFF);
  background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 11.5556L10.6429 16L19 8" stroke="rgb(255,255,255)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

/* line 67, app/assets/stylesheets/lab/form/checkbox.scss */
.vivid-lab input.form-control[type="checkbox"][inactive]:checked, .vivid-lab input.form-control[type="checkbox"]:checked:disabled {
  background-color: var(--surface-greek-color);
  background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 11.5556L10.6429 16L19 8" stroke="rgb(10,10,10)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

/* line 74, app/assets/stylesheets/lab/form/checkbox.scss */
.vivid-lab input.form-control[type="radio"]:checked {
  background-color: var(--surface-accent-color, #0C50FD);
  border-color: transparent;
  color: var(--surface-accent-complementary-color, #FFFFFF);
}

/* line 79, app/assets/stylesheets/lab/form/checkbox.scss */
.vivid-lab input.form-control[type="radio"]:checked:after {
  visibility: visible;
  background-color: #FFFFFF;
}

/* line 85, app/assets/stylesheets/lab/form/checkbox.scss */
.vivid-lab input.form-control[type="radio"][inactive]:checked, .vivid-lab input.form-control[type="radio"]:checked:disabled {
  background-color: var(--surface-greek-color);
}

/* line 89, app/assets/stylesheets/lab/form/checkbox.scss */
.vivid-lab input.form-control[type="radio"][inactive]:checked:after, .vivid-lab input.form-control[type="radio"]:checked:disabled:after {
  background-color: #FFFFFF;
}

/* line 95, app/assets/stylesheets/lab/form/checkbox.scss */
.vivid-lab label:has(input[type="checkbox"]),
.vivid-lab label:has(input[type="radio"]) {
  font-weight: inherit;
  gap: 1.2rem;
  display: flex;
}

/* line 103, app/assets/stylesheets/lab/form/checkbox.scss */
.vivid-lab label:has(input[type="checkbox"][inactive]),
.vivid-lab label:has(input[type="radio"][inactive]),
.vivid-lab label:has(input[type="checkbox"]:disabled),
.vivid-lab label:has(input[type="radio"]:disabled) {
  color: var(--surface-deemphasized-color);
  cursor: not-allowed;
}

/* line 18, app/assets/stylesheets/lab/form/toggle.scss */
.vivid-lab .toggle {
  --control-border-radius: 1.2rem;
}

@media (hover: none) {
  /* line 18, app/assets/stylesheets/lab/form/toggle.scss */
  .vivid-lab .toggle {
    -webkit-tap-highlight-color: transparent;
  }
}

/* line 25, app/assets/stylesheets/lab/form/toggle.scss */
.vivid-lab .toggle input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  visibility: hidden;
  position: absolute;
}

/* line 32, app/assets/stylesheets/lab/form/toggle.scss */
.vivid-lab .toggle input[type="checkbox"]:after {
  border-color: initial;
  background-color: initial;
  color: initial;
}

/* line 38, app/assets/stylesheets/lab/form/toggle.scss */
.vivid-lab .toggle input[type="checkbox"]:checked {
  border-color: initial;
  background-color: initial;
  color: initial;
}

/* line 43, app/assets/stylesheets/lab/form/toggle.scss */
.vivid-lab .toggle input[type="checkbox"]:checked:after {
  content: "";
}

/* line 50, app/assets/stylesheets/lab/form/toggle.scss */
.vivid-lab .toggle input.toggle__input {
  width: 0;
  border: 0;
  font-size: 0;
  margin: 0;
}

/* line 58, app/assets/stylesheets/lab/form/toggle.scss */
.vivid-lab .toggle input + .toggle__control {
  background: var(--surface-shade-color);
  border: 1px solid var(--surface-container-input-outline-color);
  border-radius: var(--control-border-radius);
  min-width: 4.8rem;
  height: 2.4rem;
  position: relative;
  flex: 0 0 auto;
  display: flex;
  width: 4rem;
  transition: box-shadow ease-in-out 0.125s, color ease-in-out 0.125s, background-color ease-in-out 0.125s;
}

/* line 76, app/assets/stylesheets/lab/form/toggle.scss */
.vivid-lab .toggle input + .toggle__control:after {
  transition: left ease-in-out 0.125s, background-color ease-in-out 0.125s;
  content: "";
  border-radius: 50%;
  background-color: #FFFFFF;
  width: 2rem;
  height: 2rem;
  display: flex;
  position: absolute;
  left: 0.1rem;
  top: 0.1rem;
}

/* line 93, app/assets/stylesheets/lab/form/toggle.scss */
.vivid-lab .toggle.skeleton label.toggle__label input:not(:disabled) + .toggle__control {
  background: var(--surface-glass-color);
  border-color: transparent;
}

/* line 96, app/assets/stylesheets/lab/form/toggle.scss */
.vivid-lab .toggle.skeleton label.toggle__label input:not(:disabled) + .toggle__control:after {
  border-color: transparent;
}

/* line 102, app/assets/stylesheets/lab/form/toggle.scss */
.vivid-lab .toggle input:focus + .toggle__control,
.vivid-lab .toggle input:active:not(:disabled) + .toggle__control {
  box-shadow: 0 0 0 0.2rem var(--surface-background-color), 0 0 0 0.4rem var(--surface-shade-color);
}

/* line 110, app/assets/stylesheets/lab/form/toggle.scss */
.vivid-lab .toggle input:checked + .toggle__control:after {
  background-color: #FFFFFF;
  left: calc(100% - 2.4rem + 0.3rem);
}

/* line 116, app/assets/stylesheets/lab/form/toggle.scss */
.vivid-lab .toggle.toggle input[disabled] + .toggle__control,
.vivid-lab fieldset[disabled] .toggle input + .toggle__control {
  border: 1px solid var(--surface-greek-color);
  background-color: var(--surface-greek-color);
}

/* line 122, app/assets/stylesheets/lab/form/toggle.scss */
.vivid-lab .toggle.toggle input[disabled] + .toggle__control,
.vivid-lab fieldset[disabled] .toggle input + .toggle__control {
  border: 1px solid var(--surface-greek-color);
  background-color: var(--surface-greek-color);
}

/* line 127, app/assets/stylesheets/lab/form/toggle.scss */
.vivid-lab .toggle.toggle input[disabled] + .toggle__control:after,
.vivid-lab fieldset[disabled] .toggle input + .toggle__control:after {
  opacity: 0.4;
}

/* line 137, app/assets/stylesheets/lab/form/toggle.scss */
.vivid-lab .toggle.toggle--color-on input:not(:disabled):not(:checked) + .toggle__control:after,
.vivid-lab .toggle.toggle--color-brand input:not(:disabled):not(:checked) + .toggle__control:after,
.vivid-lab .toggle.toggle--color-default input:not(:disabled) + .toggle__control:after {
  border: 1px solid var(--surface-container-input-outline-color);
}

/* line 142, app/assets/stylesheets/lab/form/toggle.scss */
.vivid-lab .toggle.toggle--color-positive input:not(:disabled) + .toggle__control {
  border: 1px solid #E12D2D;
  background: #E12D2D;
}

/* line 146, app/assets/stylesheets/lab/form/toggle.scss */
.vivid-lab .toggle.toggle--color-positive input:focus + .toggle__control,
.vivid-lab .toggle.toggle--color-positive input:active:not(:disabled) + .toggle__control {
  border: 1px solid #E12D2D;
  box-shadow: 0 0 0 0.2rem var(--surface-background-color), 0 0 0 0.4rem #E12D2D;
}

/* line 154, app/assets/stylesheets/lab/form/toggle.scss */
.vivid-lab .toggle.toggle--color-positive input:checked:not(:disabled) + .toggle__control {
  border: 1px solid #019854;
  background: #019854;
}

/* line 158, app/assets/stylesheets/lab/form/toggle.scss */
.vivid-lab .toggle.toggle--color-on input:focus:checked + .toggle__control,
.vivid-lab .toggle.toggle--color-on input:active:checked:not(:disabled) + .toggle__control {
  border: 1px solid #019854;
  box-shadow: 0 0 0 0.2rem var(--surface-background-color), 0 0 0 0.4rem #019854;
}

/* line 166, app/assets/stylesheets/lab/form/toggle.scss */
.vivid-lab .toggle.toggle--color-positive input:focus:checked + .toggle__control,
.vivid-lab .toggle.toggle--color-positive input:active:checked:not(:disabled) + .toggle__control {
  border: 1px solid #019854;
  box-shadow: 0 0 0 0.2rem var(--surface-background-color), 0 0 0 0.4rem #019854;
}

/* line 174, app/assets/stylesheets/lab/form/toggle.scss */
.vivid-lab .toggle.toggle--color-on input:checked:not(:disabled) + .toggle__control {
  border: 1px solid #019854;
  background: #019854;
}

/* line 179, app/assets/stylesheets/lab/form/toggle.scss */
.vivid-lab .toggle.toggle--color-on input:focus:checked + .toggle__control,
.vivid-lab .toggle.toggle--color-on input:active:checked:not(:disabled) + .toggle__control {
  border: 1px solid #019854;
  box-shadow: 0 0 0 0.2rem var(--surface-background-color), 0 0 0 0.4rem #019854;
}

/* line 187, app/assets/stylesheets/lab/form/toggle.scss */
.vivid-lab .toggle.toggle--color-brand input:checked:not(:disabled) + .toggle__control {
  border: 1px solid #184BCD;
  background: #184BCD;
}

/* line 192, app/assets/stylesheets/lab/form/toggle.scss */
.vivid-lab .toggle.toggle--color-brand input:focus:checked + .toggle__control,
.vivid-lab .toggle.toggle--color-brand input:active:checked:not(:disabled) + .toggle__control {
  border: 1px solid #184BCD;
  box-shadow: 0 0 0 0.2rem var(--surface-background-color), 0 0 0 0.4rem #184BCD;
}

/* line 2, app/assets/stylesheets/lab/form/rich_checkbox.scss */
.vivid-lab .rich-checkbox {
  --control-border-radius: 1.2rem;
  --input-vertical-padding: 1.5rem;
  --input-horizontal-padding: 1.6rem;
  flex: auto;
  display: flex;
  border-radius: var(--control-border-radius);
  border: 0.1rem solid var(--surface-container-input-outline-color);
  overflow: hidden;
  margin: 0;
  transition: outline 0.125s ease-in-out, color 0.125s ease-in-out, box-shadow 0.125s ease-in-out, background-color 0.125s ease-in-out;
  user-select: none;
  -webkit-user-select: none;
}

/* line 23, app/assets/stylesheets/lab/form/rich_checkbox.scss */
.vivid-lab .rich-checkbox:focus-within {
  outline-offset: 0.2rem;
  outline: 0.2rem solid var(--link-color);
}

/* line 28, app/assets/stylesheets/lab/form/rich_checkbox.scss */
.vivid-lab .rich-checkbox[inactive], .vivid-lab .rich-checkbox[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* line 35, app/assets/stylesheets/lab/form/rich_checkbox.scss */
.vivid-lab .rich-checkbox__body {
  flex: 1 1 100%;
  min-height: 1lh;
}

/* line 40, app/assets/stylesheets/lab/form/rich_checkbox.scss */
.vivid-lab .rich-checkbox__body,
.vivid-lab .rich-checkbox__content,
.vivid-lab .rich-checkbox__content-container {
  min-width: 0;
}

/* line 46, app/assets/stylesheets/lab/form/rich_checkbox.scss */
.vivid-lab .rich-checkbox__content-container {
  padding: var(--input-vertical-padding) calc(var(--input-horizontal-padding) / 2);
}

/* line 50, app/assets/stylesheets/lab/form/rich_checkbox.scss */
.vivid-lab .rich-checkbox__checkbox {
  background: var(--surface-shade-color);
  padding: calc(var(--input-vertical-padding) / 2) calc(var(--input-horizontal-padding) / 2);
  margin: 0;
  transition: background-color 0.125s ease-in-out, border-color 0.125s ease-in-out;
}

/* line 59, app/assets/stylesheets/lab/form/rich_checkbox.scss */
.vivid-lab .rich-checkbox__checkbox:empty {
  padding: 0;
}

/* line 63, app/assets/stylesheets/lab/form/rich_checkbox.scss */
.vivid-lab .rich-checkbox__checkbox input[type="radio"],
.vivid-lab .rich-checkbox__checkbox input[type="checkbox"] {
  margin: 0;
  outline: none;
}

/* line 70, app/assets/stylesheets/lab/form/rich_checkbox.scss */
.vivid-lab .rich-checkbox__checked-element {
  opacity: 0;
  transition: opacity 0.125s ease-in-out;
  transition-delay: 0.125s;
}

/* line 78, app/assets/stylesheets/lab/form/rich_checkbox.scss */
.vivid-lab .rich-checkbox[checked] .rich-checkbox__checked-element {
  opacity: 1;
}

/* line 83, app/assets/stylesheets/lab/form/rich_checkbox.scss */
.vivid-lab .rich-checkbox__checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* line 90, app/assets/stylesheets/lab/form/rich_checkbox.scss */
.vivid-lab .rich-checkbox--layout-right {
  flex-direction: row-reverse;
}

/* line 95, app/assets/stylesheets/lab/form/rich_checkbox.scss */
.vivid-lab .rich-checkbox.rich-checkbox--align-end > .rich-checkbox__content {
  align-items: flex-end;
}

/* line 101, app/assets/stylesheets/lab/form/rich_checkbox.scss */
.vivid-lab .rich-checkbox.rich-checkbox--align-start > .rich-checkbox__content {
  align-items: flex-start;
}

/* line 108, app/assets/stylesheets/lab/form/rich_checkbox.scss */
.vivid-lab .rich-checkbox--variant-default .rich-checkbox__content,
.vivid-lab .rich-checkbox--variant-composite .rich-checkbox__content {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  position: relative;
}

/* line 115, app/assets/stylesheets/lab/form/rich_checkbox.scss */
.vivid-lab .rich-checkbox--variant-default .rich-checkbox__content-container,
.vivid-lab .rich-checkbox--variant-composite .rich-checkbox__content-container {
  flex: 1;
}

/* line 120, app/assets/stylesheets/lab/form/rich_checkbox.scss */
.vivid-lab .rich-checkbox--variant-composite[checked],
.vivid-lab .rich-checkbox--variant-default[checked] {
  border-color: var(--surface-accent-color, #0C50FD);
  box-shadow: 0 0 0 0.1rem var(--surface-accent-color, #0C50FD);
}

/* line 125, app/assets/stylesheets/lab/form/rich_checkbox.scss */
.vivid-lab .rich-checkbox--variant-composite[checked] .rich-checkbox__checkbox,
.vivid-lab .rich-checkbox--variant-default[checked] .rich-checkbox__checkbox {
  background-color: var(--surface-accent-color, #0C50FD);
  border-color: transparent;
  color: var(--surface-accent-complementary-color, #FFFFFF);
}

/* line 132, app/assets/stylesheets/lab/form/rich_checkbox.scss */
.vivid-lab .rich-checkbox.rich-checkbox--variant-simple,
.vivid-lab .rich-checkbox.rich-checkbox--variant-compact {
  gap: 0;
}

/* line 136, app/assets/stylesheets/lab/form/rich_checkbox.scss */
.vivid-lab .rich-checkbox.rich-checkbox--variant-simple .rich-checkbox__checkbox,
.vivid-lab .rich-checkbox.rich-checkbox--variant-compact .rich-checkbox__checkbox {
  background: transparent;
  padding-right: 0;
}

/* line 140, app/assets/stylesheets/lab/form/rich_checkbox.scss */
.vivid-lab .rich-checkbox.rich-checkbox--variant-simple .rich-checkbox__checkbox .form-control:not(:checked),
.vivid-lab .rich-checkbox.rich-checkbox--variant-compact .rich-checkbox__checkbox .form-control:not(:checked) {
  background: transparent;
}

/* line 147, app/assets/stylesheets/lab/form/rich_checkbox.scss */
.vivid-lab .rich-checkbox.rich-checkbox--variant-simple .rich-checkbox__content {
  flex: 1 1 auto;
}

/* line 150, app/assets/stylesheets/lab/form/rich_checkbox.scss */
.vivid-lab .rich-checkbox.rich-checkbox--variant-simple .rich-checkbox__checkbox {
  padding: 0;
}

/* line 153, app/assets/stylesheets/lab/form/rich_checkbox.scss */
.vivid-lab .rich-checkbox.rich-checkbox--variant-simple .rich-checkbox__checkbox input {
  opacity: 0;
  position: absolute;
}

/* line 159, app/assets/stylesheets/lab/form/rich_checkbox.scss */
.vivid-lab .rich-checkbox.rich-checkbox--variant-simple[checked] {
  border-color: var(--surface-accent-color, #0C50FD);
  box-shadow: 0 0 0 0.1rem var(--surface-accent-color, #0C50FD);
}

/* line 166, app/assets/stylesheets/lab/form/rich_checkbox.scss */
.vivid-lab .rich-checkbox__body input[type="checkbox"]:not(.form-control),
.vivid-lab .rich-checkbox__body input[type="radio"]:not(.form-control) {
  position: absolute;
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
}

/* line 176, app/assets/stylesheets/lab/form/rich_checkbox.scss */
.vivid-lab .rich-checkbox--variant-composite {
  --input-vertical-padding: 0;
  --input-horizontal-padding: 0;
}

/* line 180, app/assets/stylesheets/lab/form/rich_checkbox.scss */
.vivid-lab .rich-checkbox--variant-composite .rich-checkbox__checkbox {
  position: absolute;
  visibility: hidden;
  height: 0;
}

/* line 188, app/assets/stylesheets/lab/form/rich_checkbox.scss */
.vivid-lab .rich-checkbox--variant-composite .rich-checkbox__body > .card,
.vivid-lab .rich-checkbox--variant-composite .rich-checkbox__details > .card {
  border-radius: 0;
}

/* line 194, app/assets/stylesheets/lab/form/rich_checkbox.scss */
.vivid-lab .rich-checkbox--layout-above {
  flex-direction: column;
}

/* line 198, app/assets/stylesheets/lab/form/rich_checkbox.scss */
.vivid-lab .rich-checkbox--layout-below {
  flex-direction: column-reverse;
}

/* line 202, app/assets/stylesheets/lab/form/rich_checkbox.scss */
.vivid-lab .rich-checkbox--size-medium {
  --control-border-radius: 0.8rem;
  --input-vertical-padding: 0.7rem;
  --input-horizontal-padding: 1.2rem;
  font-size: 1.6rem;
  line-height: 2.4rem;
}

/* line 211, app/assets/stylesheets/lab/form/rich_checkbox.scss */
.vivid-lab .rich-checkbox--size-small {
  --control-border-radius: 0.6rem;
  --input-vertical-padding: 0.5rem;
  --input-horizontal-padding: 1rem;
  font-size: 1.4rem;
  line-height: 2rem;
}

/* line 2, app/assets/stylesheets/lab/form/recaptcha.scss */
.grecaptcha-badge {
  right: 0 !important;
  visibility: hidden;
}

/* line 2, app/assets/stylesheets/lab/form/select_set.scss */
.vivid-lab .select-set {
  --contained-adornment-size: 2rem;
}

/* line 5, app/assets/stylesheets/lab/form/select_set.scss */
.vivid-lab .select-set input[type="radio"],
.vivid-lab .select-set input[type="checkbox"] {
  margin: 0;
  padding: 0;
  appearance: none;
  opacity: 0;
  position: absolute;
  outline: none;
}

/* line 15, app/assets/stylesheets/lab/form/select_set.scss */
.vivid-lab .select-set input[type="radio"]:checked ~ .select-set-option__button,
.vivid-lab .select-set input[type="checkbox"]:checked ~ .select-set-option__button {
  background: #444444;
  color: #FFFFFF;
  opacity: 1;
  background-color: var(--surface-accent-color, #0C50FD);
  color: var(--surface-accent-complementary-color, #FFFFFF);
}

/* line 24, app/assets/stylesheets/lab/form/select_set.scss */
.vivid-lab .select-set input[type="radio"]:checked ~ .select-set-option__indicator,
.vivid-lab .select-set input[type="checkbox"]:checked ~ .select-set-option__indicator {
  background-color: var(--surface-accent-color, #0C50FD);
  color: var(--surface-accent-complementary-color, #FFFFFF);
  opacity: 1;
  display: none;
}

/* line 33, app/assets/stylesheets/lab/form/select_set.scss */
.vivid-lab .select-set-option {
  position: relative;
  user-select: none;
  border-radius: 4rem;
  transition: outline 0.125s ease-in-out, background-color 0.125s ease-in-out, color 0.125s ease-in-out;
}

/* line 42, app/assets/stylesheets/lab/form/select_set.scss */
.vivid-lab .select-set-option:focus-within:not([disabled]) {
  outline-offset: 0.2rem;
  outline: 0.2rem solid var(--link-color);
}

/* line 48, app/assets/stylesheets/lab/form/select_set.scss */
.vivid-lab .select-set-option__button {
  display: flex;
  flex: 0 0 4rem;
  width: 4rem;
  height: 4rem;
  align-items: center;
  justify-content: center;
  border-radius: 4rem;
  background-color: var(--surface-greek-color);
  transition: outline 0.125s ease-in-out, background-color 0.125s ease-in-out, color 0.125s ease-in-out;
}

/* line 66, app/assets/stylesheets/lab/form/select_set.scss */
.vivid-lab .select-set-option__label {
  font-weight: 600;
}

/* line 70, app/assets/stylesheets/lab/form/select_set.scss */
.vivid-lab .select-set-option__indicator {
  opacity: 0;
  width: var(--contained-adornment-size);
  height: var(--contained-adornment-size);
  position: absolute;
  bottom: calc(var(--contained-adornment-size) * -0.35);
  right: calc(var(--contained-adornment-size) * -0.35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--surface-container-background-color) solid 0.2rem;
  background-color: var(--surface-greek-color);
  transition: opacity 0.125s ease-in-out, background-color 0.125s ease-in-out, color 0.125s ease-in-out;
}

/* line 2, app/assets/stylesheets/lab/form/select_set.scss */
.vivid-lab .select-set {
  --contained-adornment-size: 2rem;
}

/* line 5, app/assets/stylesheets/lab/form/select_set.scss */
.vivid-lab .select-set input[type="radio"],
.vivid-lab .select-set input[type="checkbox"] {
  margin: 0;
  padding: 0;
  appearance: none;
  opacity: 0;
  position: absolute;
  outline: none;
}

/* line 15, app/assets/stylesheets/lab/form/select_set.scss */
.vivid-lab .select-set input[type="radio"]:checked ~ .select-set-option__button,
.vivid-lab .select-set input[type="checkbox"]:checked ~ .select-set-option__button {
  background: #444444;
  color: #FFFFFF;
  opacity: 1;
  background-color: var(--surface-accent-color, #0C50FD);
  color: var(--surface-accent-complementary-color, #FFFFFF);
}

/* line 24, app/assets/stylesheets/lab/form/select_set.scss */
.vivid-lab .select-set input[type="radio"]:checked ~ .select-set-option__indicator,
.vivid-lab .select-set input[type="checkbox"]:checked ~ .select-set-option__indicator {
  background-color: var(--surface-accent-color, #0C50FD);
  color: var(--surface-accent-complementary-color, #FFFFFF);
  opacity: 1;
  display: none;
}

/* line 33, app/assets/stylesheets/lab/form/select_set.scss */
.vivid-lab .select-set-option {
  position: relative;
  user-select: none;
  border-radius: 4rem;
  transition: outline 0.125s ease-in-out, background-color 0.125s ease-in-out, color 0.125s ease-in-out;
}

/* line 42, app/assets/stylesheets/lab/form/select_set.scss */
.vivid-lab .select-set-option:focus-within:not([disabled]) {
  outline-offset: 0.2rem;
  outline: 0.2rem solid var(--link-color);
}

/* line 48, app/assets/stylesheets/lab/form/select_set.scss */
.vivid-lab .select-set-option__button {
  display: flex;
  flex: 0 0 4rem;
  width: 4rem;
  height: 4rem;
  align-items: center;
  justify-content: center;
  border-radius: 4rem;
  background-color: var(--surface-greek-color);
  transition: outline 0.125s ease-in-out, background-color 0.125s ease-in-out, color 0.125s ease-in-out;
}

/* line 66, app/assets/stylesheets/lab/form/select_set.scss */
.vivid-lab .select-set-option__label {
  font-weight: 600;
}

/* line 70, app/assets/stylesheets/lab/form/select_set.scss */
.vivid-lab .select-set-option__indicator {
  opacity: 0;
  width: var(--contained-adornment-size);
  height: var(--contained-adornment-size);
  position: absolute;
  bottom: calc(var(--contained-adornment-size) * -0.35);
  right: calc(var(--contained-adornment-size) * -0.35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--surface-container-background-color) solid 0.2rem;
  background-color: var(--surface-greek-color);
  transition: opacity 0.125s ease-in-out, background-color 0.125s ease-in-out, color 0.125s ease-in-out;
}

/* line 2, app/assets/stylesheets/lab/components/masthead_component.scss */
.vivid-lab .masthead-component {
  flex: 0 0 auto;
}

@media (min-width: 768px) {
  /* line 2, app/assets/stylesheets/lab/components/masthead_component.scss */
  .vivid-lab .masthead-component {
    container: masthead / inline-size;
  }
}

@media (min-height: 580px) {
  /* line 2, app/assets/stylesheets/lab/components/masthead_component.scss */
  .vivid-lab .masthead-component {
    padding-top: calc( max( 1.6rem, var(--safe-area-inset-top) - 0.8rem ));
  }
}

@media (max-width: 767px) {
  /* line 2, app/assets/stylesheets/lab/components/masthead_component.scss */
  .vivid-lab .masthead-component {
    padding-top: var(--safe-area-inset-top);
  }
}

/* line 25, app/assets/stylesheets/lab/components/masthead_component.scss */
.vivid-lab .masthead-component > .card__body {
  --card-horizontal-padding: var(--page-gutter);
}

/* line 27, app/assets/stylesheets/lab/components/masthead_component.scss */
.vivid-lab .masthead-component > .card__body .block-container--page-gutters {
  --container-page-gutter: 0px;
}

@container masthead (max-width: 100vw) {
  /* line 35, app/assets/stylesheets/lab/components/masthead_component.scss */
  .vivid-lab .masthead-component > .card__body .block-container--page-gutters {
    --container-page-gutter: calc(
              min(
                (100cqi - var(--container-max-width, 0px) - var(--page-gutter) / 2) / 2,
                var(--page-gutter)
              )
            );
  }
}

@media (max-width: 767px) {
  /* line 2, app/assets/stylesheets/lab/components/masthead_component.scss */
  .vivid-lab .masthead-component {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

/* line 52, app/assets/stylesheets/lab/components/masthead_component.scss */
.vivid-lab .masthead-component .masthead-component__navigation-cell {
  flex-shrink: 1;
  overflow: hidden;
}

/* line 57, app/assets/stylesheets/lab/components/masthead_component.scss */
.vivid-lab .masthead-component:not(.surface--color-bold) {
  --surface-shadow-opacity: 0.01;
}

/* line 60, app/assets/stylesheets/lab/components/masthead_component.scss */
.vivid-lab .masthead-component:not(.surface--color-bold) .masthead-component__nav,
.vivid-lab .masthead-component:not(.surface--color-bold) .masthead-component__content {
  --surface-elevation: 4;
  -webkit-backdrop-filter: drop-shadow(0 0.4rem 0.4rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 0.8rem 1.6rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 1.2rem 3.2rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity)));
  filter: drop-shadow(0 0.4rem 0.4rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 0.8rem 1.6rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity))) drop-shadow(0 1.2rem 3.2rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity)));
}

/* line 67, app/assets/stylesheets/lab/components/masthead_component.scss */
.vivid-lab .masthead-component.turbo--reveal {
  opacity: 1;
  transform: translateY(0px);
  transition: opacity 0.25s ease-out, height 0.0625s ease-out, transform 0.25s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  /* line 67, app/assets/stylesheets/lab/components/masthead_component.scss */
  .vivid-lab .masthead-component.turbo--reveal {
    transition-duration: 0.00001s;
  }
}

/* line 82, app/assets/stylesheets/lab/components/masthead_component.scss */
.vivid-lab .masthead-component.surface--color-bold.turbo--reveal {
  transform: translateY(-0.4rem);
  opacity: 0;
}

@media (min-width: 768px) {
  /* line 82, app/assets/stylesheets/lab/components/masthead_component.scss */
  .vivid-lab .masthead-component.surface--color-bold.turbo--reveal {
    opacity: 1;
    transform: translateY(0px);
  }
}

/* line 91, app/assets/stylesheets/lab/components/masthead_component.scss */
.vivid-lab .masthead-component.surface--color-bold.turbo--reveal.turbo--revealed {
  transform: translateY(0px);
  opacity: 1;
}

/* line 98, app/assets/stylesheets/lab/components/masthead_component.scss */
.vivid-lab .masthead-component__title {
  max-height: 2lh;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
}

@media (min-width: 768px) {
  /* line 108, app/assets/stylesheets/lab/components/masthead_component.scss */
  .vivid-lab .masthead-component__title:first-child {
    margin-top: 1.2rem;
  }
}

@media (min-width: 768px) {
  /* line 116, app/assets/stylesheets/lab/components/masthead_component.scss */
  #page-header .masthead-component {
    margin-left: 1.2rem;
    margin-right: 1.2rem;
    overflow: visible;
  }
}

@media (max-width: 767px) {
  /* line 116, app/assets/stylesheets/lab/components/masthead_component.scss */
  #page-header .masthead-component {
    --surface-elevation: 1;
    box-shadow: 0 0.1rem 0.1rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 0.2rem 0.4rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 0.3rem 0.8rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity, 0.02));
  }
}

@media (min-width: 768px) {
  /* line 128, app/assets/stylesheets/lab/components/masthead_component.scss */
  #page-sticky-header .masthead-component {
    margin-left: 1.2rem;
    margin-right: 1.2rem;
    margin-top: 1.2rem;
    overflow: visible;
  }
}

/* line 2, app/assets/stylesheets/lab/components/toast_component.scss */
.vivid-lab .toast-container,
.vivid-lab #toast-container {
  position: fixed;
  top: auto;
  left: auto;
  bottom: var(--page-gutter);
  right: var(--page-gutter);
  padding: 0;
  width: auto;
  margin: 0;
  background: none;
  border: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  z-index: 1060;
}

@media (max-width: 767px) {
  /* line 2, app/assets/stylesheets/lab/components/toast_component.scss */
  .vivid-lab .toast-container,
.vivid-lab #toast-container {
    left: calc(var(--page-gutter) / 2);
    right: calc(var(--page-gutter) / 2);
    bottom: calc( var(--sticky-footer-nav-height) + 2rem + (var(--page-gutter) / 2));
  }
}

@media (min-width: 768px) {
  /* line 2, app/assets/stylesheets/lab/components/toast_component.scss */
  .vivid-lab .toast-container,
.vivid-lab #toast-container {
    max-width: 45ch;
    min-width: 30ch;
  }
}

/* line 34, app/assets/stylesheets/lab/components/toast_component.scss */
.vivid-lab .toast-component {
  --card-border-radius: 1rem;
  --card-vertical-padding: 2.4rem;
  --card-horizontal-padding: 2.4rem;
  cursor: default;
  z-index: 1060;
  transform: translateZ(0);
  isolation: isolate;
  transition: transform 0.0625s cubic-bezier(0.37, 1.22, 0.6, 1.61), opacity 0.25s ease-in-out;
  opacity: 0;
  transform: translateY(3.2rem) scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  /* line 34, app/assets/stylesheets/lab/components/toast_component.scss */
  .vivid-lab .toast-component {
    transition-duration: 0.00001s;
  }
}

/* line 55, app/assets/stylesheets/lab/components/toast_component.scss */
.vivid-lab .toast-component[open] {
  --surface-shadow-opacity: 0.25;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-duration: 0.25s;
}

@media (prefers-reduced-motion: reduce) {
  /* line 55, app/assets/stylesheets/lab/components/toast_component.scss */
  .vivid-lab .toast-component[open] {
    transition-duration: 0.00001s;
  }
}

/* line 69, app/assets/stylesheets/lab/components/toast_component.scss */
.vivid-lab .toast-component__message {
  --contained-adornment-size: 1.6rem;
  font-size: 1.4rem;
  line-height: 2rem;
  text-rendering: optimizeLegibility;
}

/* line 2, app/assets/stylesheets/lab/components/link_traversal_component.scss */
html:has(.link-traversal-component[playing]) #page-canvas {
  padding-bottom: 5.6rem;
  transition-duration: 0;
}

/* line 8, app/assets/stylesheets/lab/components/link_traversal_component.scss */
.link-traversal-component--transported {
  display: none;
}

/* line 12, app/assets/stylesheets/lab/components/link_traversal_component.scss */
dialog.link-traversal-component__highlights {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  pointer-events: none;
}

/* line 20, app/assets/stylesheets/lab/components/link_traversal_component.scss */
dialog.link-traversal-component__highlights, dialog.link-traversal-component__highlights:focus {
  outline: none;
}

/* line 25, app/assets/stylesheets/lab/components/link_traversal_component.scss */
dialog.link-traversal-component__highlights::backdrop {
  background: transparent;
}

/* line 32, app/assets/stylesheets/lab/components/link_traversal_component.scss */
dialog.link-traversal-component__highlights,
.link-traversal-component__flash,
.link-traversal-component__mask {
  padding: 0;
  margin: 0;
  position: absolute;
  max-width: none;
  max-height: none;
  border: 0;
  border-radius: 0.6rem;
}

/* line 44, app/assets/stylesheets/lab/components/link_traversal_component.scss */
.link-traversal-component__flash {
  opacity: 0;
  background: transparent;
  outline: solid 0.4rem #018284;
}

/* line 50, app/assets/stylesheets/lab/components/link_traversal_component.scss */
.link-traversal-component__flash[play] {
  animation: traversal-highlight-flash 3s 1;
  animation-delay: 0.5s;
  animation-timing-function: ease-in;
}

@media (prefers-reduced-motion: reduce) {
  /* line 50, app/assets/stylesheets/lab/components/link_traversal_component.scss */
  .link-traversal-component__flash[play] {
    animation-duration: 0.00001s;
  }
}

/* line 61, app/assets/stylesheets/lab/components/link_traversal_component.scss */
.link-traversal-component__mask {
  outline: solid 120lvmax rgba(244, 242, 241, 0.75);
  background: transparent;
  opacity: 0;
  transition: opacity 1s;
}

/* line 69, app/assets/stylesheets/lab/components/link_traversal_component.scss */
.link-traversal-component__mask[play] {
  opacity: 1;
}

/* line 74, app/assets/stylesheets/lab/components/link_traversal_component.scss */
.link-traversal-component--targeting {
  scroll-margin-bottom: 11.2rem;
  scroll-margin-top: 11.2rem;
  scroll-padding-bottom: 11.2rem;
  scroll-padding-top: 11.2rem;
}

@keyframes traversal-highlight-flash {
  0% {
    opacity: 0;
    background: rgba(1, 130, 132, 0);
    scale: 1.2;
  }
  10% {
    scale: 1;
  }
  22% {
    opacity: 1;
    background: rgba(1, 130, 132, 0.75);
  }
  34% {
    background: rgba(1, 130, 132, 0);
  }
  46% {
    background: rgba(1, 130, 132, 0.3);
  }
  58% {
    background: rgba(1, 130, 132, 0);
  }
  70% {
    opacity: 1;
    background: rgba(1, 130, 132, 0.3);
  }
  100% {
    background: rgba(1, 130, 132, 0);
    opacity: 0;
  }
}

/* line 2, app/assets/stylesheets/lab/components/partition_graph_component.scss */
.vivid-lab .partition-graph-component__bar {
  display: flex;
  flex-wrap: nowrap;
  background: var(--surface-greek-color);
  border-radius: 0.6rem;
}

/* line 9, app/assets/stylesheets/lab/components/partition_graph_component.scss */
.vivid-lab .partition-graph-component__legends {
  margin-top: 1.6rem;
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

/* line 16, app/assets/stylesheets/lab/components/partition_graph_component.scss */
.vivid-lab .partition-graph-component__legend {
  display: flex;
  gap: 0.6rem;
  font-size: 1.2rem;
  line-height: 1.6rem;
  flex: 0 1 auto;
  width: fit-content;
  border-radius: 0.6rem;
  align-items: baseline;
}

/* line 26, app/assets/stylesheets/lab/components/partition_graph_component.scss */
.vivid-lab .partition-graph-component__legend .partition-graph-component__partition {
  border-radius: 0.6rem;
  align-self: flex-start;
}

/* line 32, app/assets/stylesheets/lab/components/partition_graph_component.scss */
.vivid-lab .partition-graph-component__partition {
  min-width: 0.6rem;
  height: 1lh;
  background: var(--surface-color);
}

/* line 38, app/assets/stylesheets/lab/components/partition_graph_component.scss */
.vivid-lab .partition-graph-component__partition:first-child {
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}

/* line 43, app/assets/stylesheets/lab/components/partition_graph_component.scss */
.vivid-lab .partition-graph-component__partition:last-child {
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
}

/* line 49, app/assets/stylesheets/lab/components/partition_graph_component.scss */
.vivid-lab .partition-graph-component__partition--color-other {
  flex: 1 0 auto;
  background: #C9C9C9;
}

/* line 54, app/assets/stylesheets/lab/components/partition_graph_component.scss */
.vivid-lab .partition-graph-component__partition--color-blue {
  background: #184BCD;
}

/* line 58, app/assets/stylesheets/lab/components/partition_graph_component.scss */
.vivid-lab .partition-graph-component__partition--color-blue-2 {
  background: #0C50FD;
}

/* line 62, app/assets/stylesheets/lab/components/partition_graph_component.scss */
.vivid-lab .partition-graph-component__partition--color-blue-3 {
  background: #B8CEFF;
}

/* line 66, app/assets/stylesheets/lab/components/partition_graph_component.scss */
.vivid-lab .partition-graph-component__partition--color-red {
  background: #B21919;
}

/* line 70, app/assets/stylesheets/lab/components/partition_graph_component.scss */
.vivid-lab .partition-graph-component__partition--color-red-2 {
  background: #E12D2D;
}

/* line 74, app/assets/stylesheets/lab/components/partition_graph_component.scss */
.vivid-lab .partition-graph-component__partition--color-red-3 {
  background: #FFC2C2;
}

/* line 78, app/assets/stylesheets/lab/components/partition_graph_component.scss */
.vivid-lab .partition-graph-component__partition--color-green {
  background: #016538;
}

/* line 82, app/assets/stylesheets/lab/components/partition_graph_component.scss */
.vivid-lab .partition-graph-component__partition--color-green-2 {
  background: #019854;
}

/* line 86, app/assets/stylesheets/lab/components/partition_graph_component.scss */
.vivid-lab .partition-graph-component__partition--color-green-3 {
  background: #A0E3B3;
}

/* line 90, app/assets/stylesheets/lab/components/partition_graph_component.scss */
.vivid-lab .partition-graph-component__partition--color-mustard {
  background: #944600;
}

/* line 94, app/assets/stylesheets/lab/components/partition_graph_component.scss */
.vivid-lab .partition-graph-component__partition--color-mustard-2 {
  background: #D66600;
}

/* line 98, app/assets/stylesheets/lab/components/partition_graph_component.scss */
.vivid-lab .partition-graph-component__partition--color-mustard-3 {
  background: #F5CD99;
}

/* line 102, app/assets/stylesheets/lab/components/partition_graph_component.scss */
.vivid-lab .partition-graph-component__partition--color-teal {
  background: #018284;
}

/* line 106, app/assets/stylesheets/lab/components/partition_graph_component.scss */
.vivid-lab .partition-graph-component__partition--color-teal-3 {
  background: #DDFAFA;
}

/* line 110, app/assets/stylesheets/lab/components/partition_graph_component.scss */
.vivid-lab .partition-graph-component__partition--color-burgundy {
  background: #C8225F;
}

/* line 114, app/assets/stylesheets/lab/components/partition_graph_component.scss */
.vivid-lab .partition-graph-component__partition--color-burgundy-3 {
  background: #FFE8F0;
}

/* line 118, app/assets/stylesheets/lab/components/partition_graph_component.scss */
.vivid-lab .partition-graph-component__partition--color-purple {
  background: #5C35FD;
}

/* line 122, app/assets/stylesheets/lab/components/partition_graph_component.scss */
.vivid-lab .partition-graph-component__partition--color-purple-3 {
  background: #E2DCFF;
}

/* line 4, app/assets/stylesheets/lab/components/alert_filters_component.scss */
.vivid-lab .alert-filters-component .alert-filters-component__filter-button .adorn__body {
  overflow: hidden;
  max-width: 20ch;
}

@media (max-width: 767px) {
  /* line 3, app/assets/stylesheets/lab/components/alert_tile_component.scss */
  .vivid-lab .alert-tile-component .chip {
    max-width: 15ch;
  }
}

/* line 9, app/assets/stylesheets/lab/components/alert_tile_component.scss */
.vivid-lab .alert-tile-component__new-badge {
  position: absolute;
  left: calc(var(--container-border-radius) / 2);
  top: calc(var(--container-border-radius) / 2);
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.4rem;
}

/* line 1, app/assets/stylesheets/lab/components/show_me_beacon_component.scss */
.show-me-beacon-component {
  position: relative;
  display: block;
}

/* line 5, app/assets/stylesheets/lab/components/show_me_beacon_component.scss */
.show-me-beacon-component .button.surface {
  z-index: 900;
  cursor: pointer;
  transition: padding-right 0.25s;
  padding-left: 0;
  font-weight: 900;
}

/* line 15, app/assets/stylesheets/lab/components/show_me_beacon_component.scss */
.show-me-beacon-component .button.surface > .adorn .adorn__body {
  transition: max-width 0.25s;
  max-width: 16rem;
}

/* line 19, app/assets/stylesheets/lab/components/show_me_beacon_component.scss */
.show-me-beacon-component .button.surface > .adorn .adorn__adornment {
  transition: margin-right 0.25s;
}

/* line 24, app/assets/stylesheets/lab/components/show_me_beacon_component.scss */
.show-me-beacon-component .button.surface .avatar {
  transition: border 0.25s, background 0.25s;
}

/* line 33, app/assets/stylesheets/lab/components/show_me_beacon_component.scss */
.show-me-beacon-component--floating .show-me-beacon-component__wrapper {
  z-index: 900;
  position: absolute;
  right: calc((var(--button-height)) / -3);
  top: calc((var(--button-height)) / -3);
}

/* line 42, app/assets/stylesheets/lab/components/show_me_beacon_component.scss */
span.show-me-beacon-component__wrapper {
  cursor: pointer;
}

/* line 45, app/assets/stylesheets/lab/components/show_me_beacon_component.scss */
span.show-me-beacon-component__wrapper.button.button.surface.surface--color:first-child {
  padding: 0;
}

/* line 50, app/assets/stylesheets/lab/components/show_me_beacon_component.scss */
span.show-me-beacon-component__wrapper .button {
  pointer-events: none;
}

/* line 54, app/assets/stylesheets/lab/components/show_me_beacon_component.scss */
span.show-me-beacon-component__wrapper:focus, span.show-me-beacon-component__wrapper:focus-within {
  pointer-events: none;
}

/* line 58, app/assets/stylesheets/lab/components/show_me_beacon_component.scss */
span.show-me-beacon-component__wrapper:focus .button, span.show-me-beacon-component__wrapper:focus-within .button {
  pointer-events: auto;
}

@media not all and (hover: none) {
  /* line 66, app/assets/stylesheets/lab/components/show_me_beacon_component.scss */
  span.show-me-beacon-component__wrapper:hover {
    pointer-events: none;
  }
  /* line 69, app/assets/stylesheets/lab/components/show_me_beacon_component.scss */
  span.show-me-beacon-component__wrapper:hover .button {
    pointer-events: auto;
  }
}

/* line 76, app/assets/stylesheets/lab/components/show_me_beacon_component.scss */
span.show-me-beacon-component__wrapper:not(:focus-within):not(:hover) .button {
  padding-right: 0;
}

/* line 77, app/assets/stylesheets/lab/components/show_me_beacon_component.scss */
span.show-me-beacon-component__wrapper:not(:focus-within):not(:hover) .button > * {
  --surface-container-background-color: #FFFFFF;
}

/* line 84, app/assets/stylesheets/lab/components/show_me_beacon_component.scss */
span.show-me-beacon-component__wrapper:not(:focus-within):not(:hover) .button .adorn .adorn__body {
  max-width: 0px;
}

/* line 87, app/assets/stylesheets/lab/components/show_me_beacon_component.scss */
span.show-me-beacon-component__wrapper:not(:focus-within):not(:hover) .button .adorn .adorn__adornment {
  margin-right: 0;
}

/* line 2, app/assets/stylesheets/lab/components/alert/abstract_component.scss */
.vivid-lab .alert__abstract-component--clamped {
  max-height: 2lh;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
  text-wrap: pretty;
}

/* line 14, app/assets/stylesheets/lab/components/alert/abstract_component.scss */
.vivid-lab .alert__abstract-component .alert__other-name-component {
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: top;
}

/* line 22, app/assets/stylesheets/lab/components/alert/abstract_component.scss */
.vivid-lab .alert__abstract-component .alert__other-name-component--phone {
  text-wrap: nowrap;
}

@media (max-width: 767px) {
  /* line 22, app/assets/stylesheets/lab/components/alert/abstract_component.scss */
  .vivid-lab .alert__abstract-component .alert__other-name-component--phone {
    max-width: 13ch;
  }
}

/* line 30, app/assets/stylesheets/lab/components/alert/abstract_component.scss */
.vivid-lab .alert__abstract-component .skeleton {
  max-width: 30ch;
}

@media (max-width: 767px) {
  /* line 2, app/assets/stylesheets/lab/components/alert/body_component.scss */
  .vivid-lab .alert__summary-container {
    margin-left: calc(var(--container-gutter) * -1);
    margin-right: calc(var(--container-gutter) * -1);
    padding-bottom: 1.6rem;
    border-radius: 0;
    margin-top: -1.6rem;
    padding-top: 3.2rem;
  }
}

/* line 15, app/assets/stylesheets/lab/components/alert/body_component.scss */
.vivid-lab .alert__body-container {
  margin-top: 1.6rem;
}

@media (max-width: 767px) {
  /* line 15, app/assets/stylesheets/lab/components/alert/body_component.scss */
  .vivid-lab .alert__body-container {
    --card-horizontal-padding: var(--container-gutter);
    margin-left: calc(var(--container-gutter) * -1);
    margin-right: calc(var(--container-gutter) * -1);
    margin-top: -1.6rem;
    border-radius: 0.6rem;
  }
}

/* line 29, app/assets/stylesheets/lab/components/alert/body_component.scss */
.vivid-lab .alert__body-component {
  min-width: 0;
  max-width: 100%;
}

/* line 34, app/assets/stylesheets/lab/components/alert/body_component.scss */
.vivid-lab .alert__body-component__inspect-tools {
  position: absolute;
  left: 0;
  top: 0;
}

/* line 2, app/assets/stylesheets/lab/components/alert/body/conversation_component.scss */
.vivid-lab .alert__body__conversation-component {
  max-width: 60ch;
  margin: auto;
}

/* line 7, app/assets/stylesheets/lab/components/alert/body/conversation_component.scss */
.vivid-lab .alert__body__conversation-component__item {
  display: grid;
  max-width: calc(min(60ch, 90%));
  gap: 0.8rem;
}

/* line 13, app/assets/stylesheets/lab/components/alert/body/conversation_component.scss */
.vivid-lab .alert__body__conversation-component__item > div {
  max-width: 100%;
  min-width: 0;
}

/* line 18, app/assets/stylesheets/lab/components/alert/body/conversation_component.scss */
.vivid-lab .alert__body__conversation-component__item .alert__body__media-component {
  max-width: calc(min(39ch, 80vw));
  max-height: 33ch;
}

/* line 24, app/assets/stylesheets/lab/components/alert/body/conversation_component.scss */
.vivid-lab .alert__body__conversation-component__item--sent {
  align-self: flex-end;
}

/* line 28, app/assets/stylesheets/lab/components/alert/body/conversation_component.scss */
.vivid-lab .list-view__item.alert__body__conversation-component__timestamp {
  text-align: center;
  color: var(--surface-deemphasized-color, var(--surface-color));
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2rem;
  text-rendering: optimizeLegibility;
  margin-top: calc(var(--list-view-gutter) * 6);
}

/* line 2, app/assets/stylesheets/lab/components/alert/body/conversation_activity_component.scss */
.vivid-lab .alert__body__conversation-activity-component__actor {
  font-size: 1.4rem;
  line-height: 2rem;
  display: grid;
  color: var(--surface-deemphasized-color);
  margin-top: calc(var(--list-view-gutter) * 2);
}

/* line 9, app/assets/stylesheets/lab/components/alert/body/conversation_activity_component.scss */
.vivid-lab .alert__body__conversation-activity-component__actor .skeleton {
  width: 12ch;
}

/* line 14, app/assets/stylesheets/lab/components/alert/body/conversation_activity_component.scss */
.vivid-lab .alert__body__conversation-activity-component__actor--first {
  margin-top: 0;
}

/* line 18, app/assets/stylesheets/lab/components/alert/body/conversation_activity_component.scss */
.vivid-lab .alert__body__conversation-activity-component__actor--sent {
  justify-content: flex-end;
  text-align: right;
}

/* line 23, app/assets/stylesheets/lab/components/alert/body/conversation_activity_component.scss */
.vivid-lab .alert__body__conversation-activity-component__message {
  display: grid;
  font-weight: 500;
}

/* line 27, app/assets/stylesheets/lab/components/alert/body/conversation_activity_component.scss */
.vivid-lab .alert__body__conversation-activity-component__message a:not([href]) {
  color: #B21919;
  text-decoration: underline;
}

/* line 32, app/assets/stylesheets/lab/components/alert/body/conversation_activity_component.scss */
.vivid-lab .alert__body__conversation-activity-component__message .anchor-trimmed {
  white-space: nowrap;
  flex-wrap: nowrap;
}

/* line 38, app/assets/stylesheets/lab/components/alert/body/conversation_activity_component.scss */
.vivid-lab .alert__body__conversation-activity-component__message--sent {
  justify-content: flex-end;
  justify-items: flex-end;
}

/* line 42, app/assets/stylesheets/lab/components/alert/body/conversation_activity_component.scss */
.vivid-lab .alert__body__conversation-activity-component__message--sent .alert__body__media-component {
  justify-content: flex-end;
}

/* line 47, app/assets/stylesheets/lab/components/alert/body/conversation_activity_component.scss */
.vivid-lab .alert__body__conversation-activity-component__message > .card {
  max-width: fit-content;
}

/* line 50, app/assets/stylesheets/lab/components/alert/body/conversation_activity_component.scss */
.vivid-lab .alert__body__conversation-activity-component__message > .card:not(:first-child) {
  margin-top: var(--list-view-gutter);
}

/* line 2, app/assets/stylesheets/lab/components/alert/body/media_component.scss */
.vivid-lab .alert__body__media-component {
  display: flex;
  object-fit: contain;
}

/* line 6, app/assets/stylesheets/lab/components/alert/body/media_component.scss */
.vivid-lab .alert__body__media-component > span {
  display: flex;
  flex: 0 1 auto;
}

/* line 11, app/assets/stylesheets/lab/components/alert/body/media_component.scss */
.vivid-lab .alert__body__media-component .icon--sax-maximize {
  position: absolute;
  right: 0.6rem;
  top: 0.6rem;
  color: #FFFFFF;
  opacity: 0.5;
}

/* line 19, app/assets/stylesheets/lab/components/alert/body/media_component.scss */
.vivid-lab .alert__body__media-component .button.button--shape-composite {
  padding: 0 !important;
  position: relative;
  margin: 0;
  max-width: fit-content;
}

/* line 26, app/assets/stylesheets/lab/components/alert/body/media_component.scss */
.vivid-lab .alert__body__media-component .inline-media--with-video,
.vivid-lab .alert__body__media-component .inline-media--with-image {
  background-color: var(--surface-greek-color);
}

/* line 4, app/assets/stylesheets/lab/components/alert/body/message_component.scss */
.vivid-lab .alert__body__message-component a:not([href]),
.vivid-lab .alert__body__message-component__embedded a:not([href]) {
  color: #B21919;
}

/* line 8, app/assets/stylesheets/lab/components/alert/body/message_component.scss */
.vivid-lab .alert__body__message-component--embedded {
  display: block;
  border: 0;
  width: 100%;
  height: 10lh;
  min-height: 14lh;
  overflow: hidden;
  transition-duration: 0.00001s;
  border-radius: 0.6rem;
  color-scheme: light;
  overflow: visible;
}

/* line 22, app/assets/stylesheets/lab/components/alert/body/message_component.scss */
.vivid-lab .skeleton .alert__body__message-component--embedded {
  transition: height 0.125s;
}

/* line 26, app/assets/stylesheets/lab/components/alert/body/message_component.scss */
.vivid-lab .alert__body__message-component__embedded {
  color: var(--surface-color) !important;
}

/* line 29, app/assets/stylesheets/lab/components/alert/body/message_component.scss */
.vivid-lab .alert__body__message-component__embedded a[href] {
  text-decoration: none;
  color: var(--surface-link-color) !important;
}

/* line 34, app/assets/stylesheets/lab/components/alert/body/message_component.scss */
.vivid-lab .alert__body__message-component__embedded p,
.vivid-lab .alert__body__message-component__embedded p > span[style] {
  color: var(--surface-color) !important;
}

/* line 39, app/assets/stylesheets/lab/components/alert/body/message_component.scss */
.vivid-lab .alert__body__message-component__embedded .anchor-trimmed {
  flex-wrap: nowrap;
}

/* line 44, app/assets/stylesheets/lab/components/alert/body/message_component.scss */
.vivid-lab .alert__body__message-component__embedded blockquote {
  margin: 0px !important;
  padding: 0ex !important;
  padding-left: 0.5ex !important;
  border-left: solid 0.1rem var(--surface-trim-color) !important;
}

@media (min-width: 768px) {
  /* line 44, app/assets/stylesheets/lab/components/alert/body/message_component.scss */
  .vivid-lab .alert__body__message-component__embedded blockquote {
    padding-left: 1ex !important;
  }
}

/* line 56, app/assets/stylesheets/lab/components/alert/body/message_component.scss */
.vivid-lab .alert__body__message-component__embedded .gmail_attr {
  font-size: 1.2rem !important;
  color: var(--surface-deemphasized-color) !important;
}

/* line 61, app/assets/stylesheets/lab/components/alert/body/message_component.scss */
.vivid-lab .alert__body__message-component__embedded .slide-content,
.vivid-lab .alert__body__message-component__embedded .slide-notes:not(:empty),
.vivid-lab .alert__body__message-component__embedded .slide-master-content:not(:empty) {
  border: solid 0.1rem var(--surface-trim-color);
  border-radius: 2rem;
  padding: 1.6rem 1.6rem;
  margin-top: 1.6rem;
}

/* line 69, app/assets/stylesheets/lab/components/alert/body/message_component.scss */
.vivid-lab .alert__body__message-component__embedded .slide-notes:not(:empty) {
  background-color: var(--surface-greek-color);
  border-radius: 1.2rem;
}

/* line 75, app/assets/stylesheets/lab/components/alert/body/message_component.scss */
.vivid-lab .alert__body__message-component__embedded div[class*="RightSidebar__"],
.vivid-lab .alert__body__message-component__embedded div[class*="InreadContainer__"],
.vivid-lab .alert__body__message-component__embedded div[class*="LyricsSidebarAd__"],
.vivid-lab .alert__body__message-component__embedded div[class*="LyricsFooter__"],
.vivid-lab .alert__body__message-component__embedded div[class*="LyricsHeader__"] {
  display: none;
}

/* line 82, app/assets/stylesheets/lab/components/alert/body/message_component.scss */
.vivid-lab .alert__body__message-component__embedded div[class*="Lyrics__"] {
  margin-bottom: 1.6rem;
}

/* line 88, app/assets/stylesheets/lab/components/alert/body/message_component.scss */
html.caged-activity-page,
html.caged-activity-page body {
  height: initial;
  overflow: visible;
}

/* line 3, app/assets/stylesheets/lab/components/alert/body/visits_component.scss */
.vivid-lab .alert__body__visits-component a {
  text-decoration: none;
}

/* line 7, app/assets/stylesheets/lab/components/alert/body/visits_component.scss */
.vivid-lab .alert__body__visits-component .anchor-trimmed {
  flex-wrap: nowrap;
}

/* line 11, app/assets/stylesheets/lab/components/alert/body/visits_component.scss */
.vivid-lab .alert__body__visits-component a:not(.anchor-trimmed) {
  font-weight: 500;
}

/* line 3, app/assets/stylesheets/lab/components/alert/body/track_activity_component.scss */
.vivid-lab .alert__body__track-activity-component mark {
  width: 30ch;
}

/* line 3, app/assets/stylesheets/lab/components/screen_time/policy_card_component.scss */
.vivid-lab .carousel .screen-time__policy-card-component {
  min-height: 50.4rem;
  width: 34.3347639485rem;
  min-width: 33.6rem;
  transition: background 0.125s ease-in-out, color 0.125s ease-in-out;
}

/* line 19, app/assets/stylesheets/lab/components/screen_time/policy_card_component.scss */
.vivid-lab .card.screen-time__policy-card-component--active {
  --surface-shadow-opacity: 0.1;
}

/* line 23, app/assets/stylesheets/lab/components/screen_time/policy_card_component.scss */
.vivid-lab .screen-time__policy-card-component__prompt {
  padding: 1.6rem 1.6rem;
}

/* line 5, app/assets/stylesheets/lab/components/screen_time/weekly_day_component.scss */
.vivid-lab .screen-time__weekly-day-component {
  --contained-adornment-size: 2rem;
  --weekly-time-tile-width: calc(max(16.8rem, 15vw));
  width: var(--weekly-time-tile-width);
}

/* line 11, app/assets/stylesheets/lab/components/screen_time/weekly_day_component.scss */
.vivid-lab .screen-time__weekly-day-component .card__body__content {
  position: relative;
}

/* line 15, app/assets/stylesheets/lab/components/screen_time/weekly_day_component.scss */
.vivid-lab .screen-time__weekly-day-component .list-view {
  position: relative;
}

/* line 20, app/assets/stylesheets/lab/components/screen_time/weekly_day_component.scss */
.vivid-lab .screen-time__scheduled-event-time-component {
  word-spacing: -0.1rem;
}

/* line 24, app/assets/stylesheets/lab/components/screen_time/weekly_day_component.scss */
.vivid-lab .screen-time__weekly-day-component__policy-name {
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 30, app/assets/stylesheets/lab/components/screen_time/weekly_day_component.scss */
.vivid-lab .screen-time__weekly-day-component__timespan {
  position: absolute;
  right: 0;
  color: var(--surface-deemphasized-color);
}

/* line 36, app/assets/stylesheets/lab/components/screen_time/weekly_day_component.scss */
.vivid-lab .screen-time__weekly-day-component__timestamp {
  text-align: right;
  font-weight: 700;
  text-wrap: nowrap;
}

/* line 43, app/assets/stylesheets/lab/components/screen_time/weekly_day_component.scss */
.vivid-lab .screen-time__weekly-day-component__tile--rules-default .screen-time__weekly-day-component__timestamp {
  font-weight: 500;
}

/* line 46, app/assets/stylesheets/lab/components/screen_time/weekly_day_component.scss */
.vivid-lab .screen-time__weekly-day-component__tile--rules-default .card__body__content {
  color: var(--surface-deemphasized-color);
}

/* line 51, app/assets/stylesheets/lab/components/screen_time/weekly_day_component.scss */
.vivid-lab .screen-time__weekly-day-component__tile-anchor {
  display: flex;
  flex-direction: column;
  height: auto;
  height: calc(var(--fives) * 0.2rem - var(--list-view-gutter));
  transition: height 0.25s cubic-bezier(0.37, 1.22, 0.6, 1.61);
}

/* line 58, app/assets/stylesheets/lab/components/screen_time/weekly_day_component.scss */
.vivid-lab .screen-time__weekly-day-component__tile-anchor .button_to--composite {
  flex: 1 1 100%;
  display: flex;
  border-radius: 1rem;
}

/* line 63, app/assets/stylesheets/lab/components/screen_time/weekly_day_component.scss */
.vivid-lab .screen-time__weekly-day-component__tile-anchor .button_to--composite:focus {
  z-index: 1;
}

/* line 69, app/assets/stylesheets/lab/components/screen_time/weekly_day_component.scss */
.vivid-lab .screen-time__weekly-day-component__tile {
  width: var(--weekly-time-tile-width);
}

/* line 73, app/assets/stylesheets/lab/components/screen_time/weekly_day_component.scss */
.vivid-lab .screen-time__weekly-day-component__tile-anchor--short {
  align-items: flex-end;
}

/* line 76, app/assets/stylesheets/lab/components/screen_time/weekly_day_component.scss */
.vivid-lab .screen-time__weekly-day-component__tile-anchor--short .screen-time__weekly-day-component__badge {
  --card-vertical-padding: 0px;
}

/* line 80, app/assets/stylesheets/lab/components/screen_time/weekly_day_component.scss */
.vivid-lab .screen-time__weekly-day-component__tile-anchor--short .screen-time__weekly-day-component__tile {
  --card-vertical-padding: 0px;
  width: var(--weekly-time-tile-width);
  height: calc(var(--fives) * 0.2rem - var(--list-view-gutter));
  min-height: 3.2rem;
}

/* line 87, app/assets/stylesheets/lab/components/screen_time/weekly_day_component.scss */
.vivid-lab .screen-time__weekly-day-component__tile-anchor--short .screen-time__weekly-day-component__tile .card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* line 94, app/assets/stylesheets/lab/components/screen_time/weekly_day_component.scss */
.vivid-lab .screen-time__weekly-day-component__tile-anchor--short .screen-time__weekly-day-component__tile--rules-default {
  min-height: 0;
  height: auto;
}

/* line 99, app/assets/stylesheets/lab/components/screen_time/weekly_day_component.scss */
.vivid-lab .screen-time__weekly-day-component__tile-anchor--short .button_to--composite {
  position: absolute;
  align-items: flex-end;
  z-index: 1;
  width: 100%;
}

/* line 105, app/assets/stylesheets/lab/components/screen_time/weekly_day_component.scss */
.vivid-lab .screen-time__weekly-day-component__tile-anchor--short .button_to--composite button {
  width: 100%;
}

/* line 112, app/assets/stylesheets/lab/components/screen_time/weekly_day_component.scss */
.vivid-lab .screen-time__weekly-day-component__item--active .screen-time__weekly-day-component__tile {
  outline: solid 0.2rem var(--surface-background-color);
  outline-offset: 0.2rem;
}

/* line 118, app/assets/stylesheets/lab/components/screen_time/weekly_day_component.scss */
.vivid-lab .screen-time__weekly-day-component__tile-anchor--override {
  top: calc( 0.2rem * var(--start-fives) + var(--list-view-gutter) + 4rem);
  left: calc(var(--list-view-gutter) * 2);
  position: absolute;
  z-index: 10;
  width: var(--weekly-time-tile-width);
}

/* line 127, app/assets/stylesheets/lab/components/screen_time/weekly_day_component.scss */
.vivid-lab .screen-time__weekly-day-component__tile-anchor--override .button_to--composite {
  margin-top: 0;
}

/* line 134, app/assets/stylesheets/lab/components/screen_time/weekly_day_component.scss */
.inspect .screen-time__weekly-day-component__tile:hover {
  overflow: visible;
  z-index: 1;
  height: auto;
}

/* line 2, app/assets/stylesheets/lab/components/screen_time/category_rules_component.scss */
.vivid-lab .screen-time__category-rules-component__summary-avatars {
  opacity: 0;
  transform: translateY(0.4rem);
  transition: opacity 0.125s ease-in-out, transform 0.125s ease-in-out;
}

/* line 13, app/assets/stylesheets/lab/components/screen_time/category_rules_component.scss */
.vivid-lab .collapse--collapsed .screen-time__category-rules-component__summary-avatars {
  opacity: 1;
  transform: translateY(0px);
}

/* line 2, app/assets/stylesheets/lab/components/usage_limits_tile_component.scss */
.vivid-lab .usage-limits-tile-component {
  display: flex;
  height: 100%;
  margin: auto;
}

/* line 2, app/assets/stylesheets/lab/components/profile_card_component.scss */
.vivid-lab .profile-card-component__location.skeleton--busy {
  width: 20ch;
  height: 1lh;
}

/* line 3, app/assets/stylesheets/lab/elements/turbo.scss */
.turbo-progress-bar {
  height: 0.8rem;
  background-color: rgba(12, 80, 253, 0.875);
  box-shadow: 0rem 0.1rem 0.3rem rgba(24, 75, 205, 0.5);
  position: fixed;
  max-width: 100%;
  border-radius: 0.6rem;
}

@media (min-width: 768px) {
  /* line 3, app/assets/stylesheets/lab/elements/turbo.scss */
  .turbo-progress-bar {
    top: 0.6rem;
    left: 0.6rem;
    right: 0.6rem;
  }
}

@media (max-width: 767px) {
  /* line 3, app/assets/stylesheets/lab/elements/turbo.scss */
  .turbo-progress-bar {
    left: 1rem;
    right: 1rem;
    top: auto;
    bottom: calc( var(--device-page-tabs-height, 0rem) - 1.4rem);
  }
}

/* line 30, app/assets/stylesheets/lab/elements/turbo.scss */
form[fetch-error]:after {
  position: absolute;
  content: "";
  display: block;
  border-radius: 0.6rem;
  width: 0.6rem;
  height: 0.6rem;
  right: 0.6rem;
  top: 0.6rem;
  z-index: 1060;
  background-color: #E12D2D;
  animation: turboThrobber;
  animation-duration: 2s;
  animation-delay: 3s;
  animation-iteration-count: infinite;
  opacity: 0;
}

/* line 50, app/assets/stylesheets/lab/elements/turbo.scss */
turbo-frame[busy]:has(.skeleton),
.skeleton {
  border-radius: var(--border-radius, 0.6rem);
}

/* line 55, app/assets/stylesheets/lab/elements/turbo.scss */
turbo-frame.skeleton {
  display: block;
}

/* line 60, app/assets/stylesheets/lab/elements/turbo.scss */
turbo-frame[loading="lazy"][preload]:not([fetch-error]):after {
  content: "";
  display: block;
  width: 100%;
  height: 0px;
  pointer-events: none;
  margin-top: -35rem;
  padding-bottom: 35rem;
}

/* line 74, app/assets/stylesheets/lab/elements/turbo.scss */
turbo-frame.turbo--transition,
turbo-frame.turbo--reveal {
  transition: opacity 0.125s, transform 0.125s;
  display: block;
  transform: translateY(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  /* line 74, app/assets/stylesheets/lab/elements/turbo.scss */
  turbo-frame.turbo--transition,
turbo-frame.turbo--reveal {
    transition-duration: 0.00001s;
  }
}

/* line 89, app/assets/stylesheets/lab/elements/turbo.scss */
turbo-frame.turbo--reveal:not([complete]):empty {
  opacity: 0;
  transform: translateY(3.2rem);
}

/* line 94, app/assets/stylesheets/lab/elements/turbo.scss */
turbo-frame.turbo--transition:not([complete]):empty {
  opacity: 0;
}

/* line 98, app/assets/stylesheets/lab/elements/turbo.scss */
.turbo--transition,
.turbo--reveal-slide-down,
.turbo--reveal {
  transition: opacity 0.5s, transform 0.125s;
  display: block;
  opacity: 0;
}

/* line 108, app/assets/stylesheets/lab/elements/turbo.scss */
.turbo--reveal {
  transform: translateY(3.2rem);
}

/* line 112, app/assets/stylesheets/lab/elements/turbo.scss */
.turbo--revealed {
  transform: translateY(0);
  opacity: 1;
}

/* line 117, app/assets/stylesheets/lab/elements/turbo.scss */
.skeleton.skeleton--busy,
.skeleton[busy],
[busy] .skeleton {
  position: relative;
  pointer-events: none;
  cursor: progress;
}

/* line 124, app/assets/stylesheets/lab/elements/turbo.scss */
.skeleton.skeleton--busy:empty:before,
.skeleton[busy]:empty:before,
[busy] .skeleton:empty:before {
  content: "\00a0";
  display: table;
}

/* line 129, app/assets/stylesheets/lab/elements/turbo.scss */
.skeleton.skeleton--busy:after,
.skeleton[busy]:after,
[busy] .skeleton:after {
  border-radius: var(--control-border-radius, inherit);
  position: absolute;
  content: "";
  display: block;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  min-height: 1em;
  cursor: progress;
  pointer-events: auto;
  background: linear-gradient(-60deg, var(--surface-greek-color, #E3E3E3), var(--surface-greek-color, #E3E3E3), var(--surface-greek-color, #E3E3E3), var(--surface-greek-highlight-color, #F4F2F1), var(--surface-greek-color, #E3E3E3), var(--surface-greek-color, #E3E3E3), var(--surface-greek-color, #E3E3E3));
  background-size: 200% 100%;
  background-attachment: fixed;
  opacity: 0;
  animation: turboSkeletonRollingGradient 4s linear infinite, turboSkeletonFade 0.125s linear;
  animation-delay: 0.5s;
}

@media (min-width: 768px) {
  /* line 129, app/assets/stylesheets/lab/elements/turbo.scss */
  .skeleton.skeleton--busy:after,
.skeleton[busy]:after,
[busy] .skeleton:after {
    animation: turboSkeletonRollingGradient 8s linear infinite, turboSkeletonFade 0.125s linear;
    animation-delay: 0.5s;
  }
}

/* line 171, app/assets/stylesheets/lab/elements/turbo.scss */
.stimulus--reveal {
  transition: opacity 0.5s;
}

/* line 174, app/assets/stylesheets/lab/elements/turbo.scss */
.stimulus--reveal:empty,
.stimulus--reveal .stimulus--revealed {
  opacity: 0;
}

/* line 181, app/assets/stylesheets/lab/elements/turbo.scss */
turbo-frame.skeleton[busy]:after {
  left: calc(var(--container-gutter-horizontal, 0px) * -1);
  right: calc(var(--container-gutter-horizontal, 0px) * -1);
  top: calc(var(--container-gutter-vertical, 0px) * -1);
  bottom: calc(var(--container-gutter-vertical, 0px) * -1);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  border-radius: var(--container-border-radius, 0.1rem);
}

/* line 195, app/assets/stylesheets/lab/elements/turbo.scss */
.skeleton:empty:before {
  animation: turboSkeletonRollingGradient 4s linear infinite;
}

@media (min-width: 768px) {
  /* line 195, app/assets/stylesheets/lab/elements/turbo.scss */
  .skeleton:empty:before {
    animation: turboSkeletonRollingGradient 3s linear infinite;
  }
}

/* line 203, app/assets/stylesheets/lab/elements/turbo.scss */
.turbo--display-block {
  display: block;
}

/* line 207, app/assets/stylesheets/lab/elements/turbo.scss */
turbo-frame[fetch-error],
turbo-frame:has(.turbo-frame__failure-scrim) {
  display: block;
}

/* line 212, app/assets/stylesheets/lab/elements/turbo.scss */
.turbo-frame__failure-scrim {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  min-height: 100%;
  background-color: #B21919;
  border-radius: inherit;
  padding: 0.8rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* line 226, app/assets/stylesheets/lab/elements/turbo.scss */
.turbo-frame__failure-scrim__content {
  max-width: 45ch;
  margin: auto;
}

@keyframes turboSkeletonFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.5;
  }
}

@keyframes turboSkeletonRollingGradient {
  0% {
    opacity: 0.5;
    background-position: 200% 50%;
  }
  100% {
    opacity: 0.5;
    background-position: -200% 50%;
  }
}

@keyframes turboThrobber {
  from {
    opacity: 0;
  }
  33% {
    opacity: 1;
  }
  66% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* line 1, app/assets/stylesheets/lab/elements/support-overlay.scss */
.support-fab {
  position: fixed;
  z-index: 1049;
  right: var(--page-gutter);
  bottom: var(--page-gutter);
  transform: translateY(0px);
}

/* line 2, app/assets/stylesheets/lab/elements/support-overlay.scss */
.support-fab.surface {
  --surface-background-color: #0A0A0A;
  --surface-color: #FFFFFF;
  --surface-deemphasized-color: #9d9d9d;
  --surface-emphasis-color: #FFFFFF;
  --surface-emphasis-reverse-color: #0A0A0A;
  --surface-header-color: #FFFFFF;
  --surface-link-color: #FFFFFF;
  --surface-trim-color: #060606;
  --surface-outline-color: #060606;
  --surface-glass-color: #242121;
  --surface-shade-color: #090909;
  --surface-greek-color: #090909;
  --surface-greek-highlight-color: #242121;
  --surface-shadow-opacity: 0.02;
  --surface-inset-shadow-color: 1, 1,
    1;
  --surface-focus-color: #060606;
  transition: opacity 0.125s ease-in-out, filter 0.125s ease-in-out, transform 0.125s ease-in-out;
}

/* line 38, app/assets/stylesheets/lab/surface_mixins.scss */
.support-fab.surface > * {
  --surface-shadow-color: 1, 1, 1;
  --surface-container-outline-color: #060606;
  --surface-container-input-outline-color: #060606;
  --surface-container-background-color: #0A0A0A;
  --surface-container-color: #FFFFFF;
  --surface-container-shade-color: #090909;
}

@media (max-width: 767px) {
  /* line 1, app/assets/stylesheets/lab/elements/support-overlay.scss */
  .support-fab {
    right: var(--page-gutter);
    bottom: calc( max( var(--sticky-footer-nav-height, var(--safe-area-inset-bottom)) + 2.4rem, var(--avoid-support-bottom, 0px) ) + var(--page-gutter));
  }
}

/* line 28, app/assets/stylesheets/lab/elements/support-overlay.scss */
.support-fab[aria-hidden] {
  transform: translateY(1.6rem);
  opacity: 0;
  pointer-events: none;
}

/* line 35, app/assets/stylesheets/lab/elements/support-overlay.scss */
#ada-button-frame {
  display: none;
}

/* line 39, app/assets/stylesheets/lab/elements/support-overlay.scss */
#ada-chat-frame {
  padding-top: var(--safe-area-inset-top);
  padding-bottom: var(--safe-area-inset-bottom);
}

/* line 45, app/assets/stylesheets/lab/elements/support-overlay.scss */
#ada-entry > div[style*="linear-gradient"]:first-child {
  background: none !important;
  display: none;
}

@media print {
  /* line 52, app/assets/stylesheets/lab/elements/support-overlay.scss */
  .vivid .btn.support-fab {
    display: none;
    background: green;
  }
}

/* line 1, app/assets/stylesheets/lab/elements/pull_to_refresh.scss */
.pull-to-refresh__status {
  height: 0px;
  max-height: 11.2rem;
  width: auto;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  line-height: 1.6rem;
  transition: height 0.125s;
}

/* line 17, app/assets/stylesheets/lab/elements/pull_to_refresh.scss */
.pull-to-refresh__status .button {
  min-width: 0;
}

/* line 21, app/assets/stylesheets/lab/elements/pull_to_refresh.scss */
.pull-to-refresh__status .pull-to-refresh__spinner {
  transition: height 0.125s, width 0.125s;
}

/* line 29, app/assets/stylesheets/lab/elements/pull_to_refresh.scss */
.pull-to-refresh--hint .pull-to-refresh__status {
  max-height: 11.2rem;
}

/* line 33, app/assets/stylesheets/lab/elements/pull_to_refresh.scss */
.pull-to-refresh--hint .pull-to-refresh__prompt {
  display: block;
}

/* line 39, app/assets/stylesheets/lab/elements/pull_to_refresh.scss */
.pull-to-refresh--refreshing .pull-to-refresh__status {
  height: 5.6rem !important;
}

/* line 46, app/assets/stylesheets/lab/elements/pull_to_refresh.scss */
.pull-to-refresh--refreshed .pull-to-refresh__prompt,
.pull-to-refresh--refreshing .pull-to-refresh__prompt {
  display: none;
}

/* line 50, app/assets/stylesheets/lab/elements/pull_to_refresh.scss */
.pull-to-refresh--refreshed .pull-to-refresh__spinner,
.pull-to-refresh--refreshing .pull-to-refresh__spinner {
  --contained-adornment-size: 2.4rem;
  animation: icon-spin 1s linear infinite;
}

@media (prefers-reduced-motion: no-preference) {
  /* line 2, app/assets/stylesheets/lab/elements/app-chrome.scss */
  html:not([aria-busy]),
html:not([aria-busy]) body {
    scroll-behavior: smooth;
  }
  /* line 7, app/assets/stylesheets/lab/elements/app-chrome.scss */
  html:not([aria-busy]) #page-canvas,
html:not([aria-busy]) body #page-canvas {
    scroll-behavior: smooth;
  }
}

/* line 15, app/assets/stylesheets/lab/elements/app-chrome.scss */
html:not(:has(dialog[open])) #page-navigation {
  z-index: 1030;
}

/* line 20, app/assets/stylesheets/lab/elements/app-chrome.scss */
html:has(dialog[open]) {
  overflow: hidden;
}

/* line 23, app/assets/stylesheets/lab/elements/app-chrome.scss */
html.modal:has(dialog[open]) {
  scrollbar-gutter: stable;
}

/* line 28, app/assets/stylesheets/lab/elements/app-chrome.scss */
body.vivid-lab-page {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  /* line 28, app/assets/stylesheets/lab/elements/app-chrome.scss */
  body.vivid-lab-page {
    overflow: clip;
  }
}

/* line 38, app/assets/stylesheets/lab/elements/app-chrome.scss */
body.body--stable-scroll,
body.body--stable-scroll #app-chrome,
body.body--stable-scroll #page-canvas,
body.body--stable-scroll #page-column {
  scrollbar-gutter: stable;
}

/* line 47, app/assets/stylesheets/lab/elements/app-chrome.scss */
body.body--stable-canvas-scroll #page-canvas {
  scrollbar-gutter: stable;
}

/* line 53, app/assets/stylesheets/lab/elements/app-chrome.scss */
.vivid-lab-page #page-column {
  display: flex;
  flex-direction: column;
  flex: 0 1 100%;
  overscroll-behavior: contain;
  max-width: 100%;
}

@media (min-width: 768px) {
  /* line 53, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page #page-column {
    overflow: hidden;
  }
}

@media (max-height: 579px) {
  /* line 53, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page #page-column {
    overflow: auto;
  }
}

@media (max-width: 767px) and (min-height: 580px) {
  /* line 69, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page #page-header {
    position: sticky;
    top: 0;
    z-index: 1000;
  }
}

@media (min-width: 768px) and (min-height: 580px) {
  /* line 69, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page #page-header {
    margin-top: 1.2rem;
  }
}

/* line 81, app/assets/stylesheets/lab/elements/app-chrome.scss */
.vivid-lab-page #page-canvas {
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
  scroll-padding: var(--container-gutter);
  scroll-padding-top: calc(var(--container-sticky-top-height, 0px) + var(--page-gutter));
  scroll-padding-bottom: calc( var(--sticky-container-bottom-height, 0px) + var(--page-gutter) * 4);
  transition: padding-bottom 0.25s;
}

@media (max-width: 767px) {
  /* line 81, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page #page-canvas {
    flex: 0 1 100%;
  }
}

@media (min-width: 768px) {
  /* line 81, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page #page-canvas {
    --sticky-top-root: 0;
    flex: 1 1 100%;
    margin: 0 1.2rem;
    border-top-right-radius: 2.4rem;
    border-top-left-radius: 2.4rem;
    border: solid 0.1rem var(--surface-container-shade-color);
  }
}

@media (min-width: 768px) and (min-height: 580px) {
  /* line 81, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page #page-canvas {
    margin-top: 1.2rem;
    margin-bottom: 1.2rem;
    border-bottom-right-radius: 2.4rem;
    border-bottom-left-radius: 2.4rem;
    overflow-x: clip;
    overflow-y: auto;
  }
}

/* line 118, app/assets/stylesheets/lab/elements/app-chrome.scss */
.vivid-lab-page #body-container {
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 768px) {
  /* line 118, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page #body-container {
    container: body / inline-size;
  }
}

@media (max-width: 767px) {
  /* line 118, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page #body-container {
    overflow-x: clip;
    overflow-y: visible;
  }
}

/* line 137, app/assets/stylesheets/lab/elements/app-chrome.scss */
.vivid-lab-page #app-chrome {
  flex: 1 1 100%;
  max-width: 100lvw;
}

@media (max-width: 767px) {
  /* line 137, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page #app-chrome {
    display: flex;
    flex-direction: column;
  }
}

@media (min-width: 768px) {
  /* line 137, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page #app-chrome {
    display: flex;
    flex-direction: row-reverse;
    overflow: auto;
    overscroll-behavior: contain;
    background-color: #FFFFFF;
  }
}

/* line 156, app/assets/stylesheets/lab/elements/app-chrome.scss */
.vivid-lab-page #page-branding {
  padding-left: 1.6rem;
  display: flex;
  margin-bottom: 7.2rem;
}

/* line 159, app/assets/stylesheets/lab/elements/app-chrome.scss */
.vivid-lab-page #page-branding a {
  color: inherit;
}

@media (min-height: 580px) {
  /* line 156, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page #page-branding {
    padding-top: 3.2rem;
  }
}

/* line 167, app/assets/stylesheets/lab/elements/app-chrome.scss */
.vivid-lab-page #page-branding .pop-up-logo {
  height: 5.6rem;
}

/* line 170, app/assets/stylesheets/lab/elements/app-chrome.scss */
.vivid-lab-page #page-branding .pop-up-logo.hidden-sm {
  align-items: center;
  justify-content: flex-start;
}

/* line 174, app/assets/stylesheets/lab/elements/app-chrome.scss */
.vivid-lab-page #page-branding .pop-up-logo.hidden-sm > svg {
  height: 2.4rem;
  width: auto;
}

/* line 180, app/assets/stylesheets/lab/elements/app-chrome.scss */
.vivid-lab-page #page-branding .pop-up-logo.visible-sm > svg {
  width: 4.8rem;
}

@media (min-width: 768px) and (max-width: 991px) {
  /* line 156, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page #page-branding {
    padding-left: 0;
    justify-content: center;
  }
}

@media (max-width: 767px) {
  /* line 156, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page #page-branding {
    display: none;
  }
}

/* line 197, app/assets/stylesheets/lab/elements/app-chrome.scss */
.vivid-lab-page #page-navigation {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 2rem;
  text-rendering: optimizeLegibility;
  flex: 0 0 auto;
}

@media (max-width: 767px) {
  /* line 197, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page #page-navigation {
    position: sticky;
    bottom: 0;
    background-color: transparent;
    font-size: 1.2rem;
  }
}

@media (min-width: 768px) {
  /* line 197, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page #page-navigation {
    padding: 1.2rem 1.2rem 1.2rem calc(max(2.4rem, var(--safe-area-inset-left)));
    width: var(--desktop-nav-width);
    flex: 0 0 auto;
    transition: width 0.25s;
  }
  /* line 218, app/assets/stylesheets/lab/elements/app-chrome.scss */
  :root {
    --desktop-nav-width: 24rem;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  /* line 224, app/assets/stylesheets/lab/elements/app-chrome.scss */
  :root {
    --desktop-nav-width: calc(
          6rem + max(9.6rem, var(--safe-area-inset-left))
        );
  }
}

/* line 232, app/assets/stylesheets/lab/elements/app-chrome.scss */
.vivid-lab-page #page-tabs {
  position: sticky;
  bottom: 0;
  height: var(--device-page-tabs-height);
  user-select: none;
  -webkit-user-select: none;
}

/* line 240, app/assets/stylesheets/lab/elements/app-chrome.scss */
.vivid-lab-page #page-tabs > div {
  display: flex;
  flex: 0 0 0;
  user-select: none;
  -webkit-user-select: none;
}

/* line 246, app/assets/stylesheets/lab/elements/app-chrome.scss */
.vivid-lab-page #page-tabs > div a {
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--control-border-radius, 0.4rem);
}

/* line 253, app/assets/stylesheets/lab/elements/app-chrome.scss */
.vivid-lab-page #page-tabs > div > ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex: 1;
}

@media (max-width: 767px) {
  /* line 240, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page #page-tabs > div {
    background: rgba(244, 242, 241, 0.5);
    backdrop-filter: brightness(1.1) blur(1.6rem);
    -webkit-backdrop-filter: brightness(1.1) blur(1.6rem);
    border-bottom: none;
    position: fixed;
    bottom: 0;
    width: auto;
    left: 0;
    right: 0;
    --surface-elevation: 16;
    box-shadow: 0 -1.6rem 1.6rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 -3.2rem 6.4rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 -4.8rem 12.8rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity, 0.02));
    transform: translateY(0);
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
  }
}

@media (max-width: 767px) and (prefers-reduced-transparency) {
  /* line 240, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page #page-tabs > div {
    background: #F4F2F1;
  }
}

@media (max-width: 767px) {
  /* line 277, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page #page-tabs > div > ul {
    gap: 0.8rem;
  }
  /* line 280, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page #page-tabs > div > ul > li {
    display: flex;
    flex: 1;
  }
  /* line 284, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page #page-tabs > div > ul > li > a {
    --contained-adornment-size: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    color: inherit;
    position: relative;
    padding: 1.6rem 1.6rem;
    padding-bottom: calc( max( 1.6rem, var(--safe-area-inset-bottom) + 0.8rem ));
  }
  /* line 302, app/assets/stylesheets/lab/elements/app-chrome.scss */
  :root {
    --device-page-tabs-height: calc(
                2rem + 4.8rem +
                  max(
                    1.6rem,
                    var(--safe-area-inset-bottom) + 0.8rem
                  )
              );
    --sticky-footer-nav-height: calc(
                (var(--device-page-tabs-height)) - 2rem
              );
  }
  /* line 320, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page #page-tabs > div > ul > li > a .adorn__adornment {
    margin: 0;
  }
  /* line 324, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page #page-tabs > div > ul > li > a:after {
    content: "";
    display: block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 0.6rem;
    margin-top: 0.6rem;
  }
  /* line 333, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page #page-tabs > div > ul > li > a.page-tabs__tab--selected {
    color: #0C50FD;
  }
  /* line 336, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page #page-tabs > div > ul > li > a.page-tabs__tab--selected:after {
    background: #0C50FD;
  }
}

@media (max-width: 991px) {
  /* line 346, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page #page-tabs > div > ul {
    gap: 0.8rem;
  }
}

@media (min-width: 768px) {
  /* line 240, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page #page-tabs > div {
    flex-direction: column;
  }
  /* line 354, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page #page-tabs > div > ul {
    flex-direction: column;
    gap: 0.8rem;
  }
  /* line 358, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page #page-tabs > div > ul > li {
    display: flex;
    flex: 1;
  }
  /* line 362, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page #page-tabs > div > ul > li > a {
    flex: 1;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    color: inherit;
    position: relative;
    padding: 1.5rem 1.6rem;
    border: solid transparent 0.1rem;
    border-radius: 1.6rem;
    overflow: hidden;
  }
  /* line 375, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page #page-tabs > div > ul > li > a > .icon {
    width: 2rem;
    height: 2rem;
  }
  /* line 380, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page #page-tabs > div > ul > li > a:after {
    content: "";
    display: block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 0.6rem;
    position: absolute;
    left: -0.3rem;
  }
  /* line 390, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page #page-tabs > div > ul > li > a.page-tabs__tab--selected {
    color: #0C50FD;
    font-weight: 700;
    --surface-elevation: 16;
    box-shadow: 0 1.6rem 1.6rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 3.2rem 6.4rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 4.8rem 12.8rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity, 0.02));
  }
  /* line 396, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page #page-tabs > div > ul > li > a.page-tabs__tab--selected:after {
    background: #0C50FD;
  }
}

/* line 406, app/assets/stylesheets/lab/elements/app-chrome.scss */
.vivid-lab-page .page__sticky-footer {
  position: sticky;
  bottom: var(--sticky-footer-nav-height);
  z-index: 900;
}

/* line 411, app/assets/stylesheets/lab/elements/app-chrome.scss */
.vivid-lab-page .page__sticky-footer > .page__sticky-footer__container {
  --surface-elevation: 16;
  box-shadow: 0 -1.6rem 1.6rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 -3.2rem 6.4rem rgba(var(--surface-shadow-color, 0, 0, 0), calc(var(--surface-shadow-opacity, 0.02) * 0.5)), 0 -4.8rem 12.8rem rgba(var(--surface-shadow-color, 0, 0, 0), var(--surface-shadow-opacity, 0.02));
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
}

/* line 416, app/assets/stylesheets/lab/elements/app-chrome.scss */
.vivid-lab-page .page__sticky-footer > .page__sticky-footer__container > .surface {
  overflow: auto;
}

/* line 419, app/assets/stylesheets/lab/elements/app-chrome.scss */
.vivid-lab-page .page__sticky-footer > .page__sticky-footer__container > .surface:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

/* line 424, app/assets/stylesheets/lab/elements/app-chrome.scss */
.vivid-lab-page .page__sticky-footer > .page__sticky-footer__container > .surface:last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

@media (max-width: 767px) {
  /* line 406, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page .page__sticky-footer {
    margin-bottom: -2rem;
  }
  /* line 435, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page .page__sticky-footer > .page__sticky-footer__container > :last-child:not(.surface) {
    margin-bottom: 2rem;
  }
  /* line 440, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page .page__sticky-footer > .page__sticky-footer__container > .surface:last-child {
    padding-bottom: 2rem;
  }
}

@media (min-width: 768px) {
  /* line 406, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page .page__sticky-footer {
    padding: 1.2rem;
    margin-top: -1.2rem;
  }
  /* line 451, app/assets/stylesheets/lab/elements/app-chrome.scss */
  .vivid-lab-page .page__sticky-footer > .page__sticky-footer__container {
    border-bottom-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
  }
}

/* line 458, app/assets/stylesheets/lab/elements/app-chrome.scss */
.vivid-lab-page #page-sticky-header {
  position: sticky;
  top: var(--sticky-top-root);
  z-index: 1000;
}

/* line 465, app/assets/stylesheets/lab/elements/app-chrome.scss */
body.vivid-lab-page.snapshot {
  overflow: visible;
}

/* line 468, app/assets/stylesheets/lab/elements/app-chrome.scss */
body.vivid-lab-page.snapshot #app-chrome {
  overflow: visible;
  height: auto;
}

/* line 473, app/assets/stylesheets/lab/elements/app-chrome.scss */
body.vivid-lab-page.snapshot #page-navigation {
  position: static;
}

/* line 477, app/assets/stylesheets/lab/elements/app-chrome.scss */
body.vivid-lab-page.snapshot #page-tabs {
  position: static;
}

@media (max-width: 767px) {
  /* line 477, app/assets/stylesheets/lab/elements/app-chrome.scss */
  body.vivid-lab-page.snapshot #page-tabs {
    position: static;
  }
}

/* line 484, app/assets/stylesheets/lab/elements/app-chrome.scss */
body.vivid-lab-page.snapshot #page-tabs > div {
  position: static;
}

/* line 1, app/assets/stylesheets/lab/elements/captured-screen.scss */
html:has(.product-page--variant-captured),
body.product-page--variant-captured {
  --surface-bg-color: #F4F2F1;
  background-color: var(--surface-background-color);
}

/* line 6, app/assets/stylesheets/lab/elements/captured-screen.scss */
html:has(.product-page--variant-captured) #body-container,
body.product-page--variant-captured #body-container {
  display: flex;
  flex-direction: column;
}

/* line 13, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab-page.product-page--variant-captured #app-chrome {
  background-color: transparent;
}

/* line 17, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab-page.product-page--variant-captured #page-canvas {
  border: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
}

/* line 26, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen {
  display: flex;
  flex-direction: column;
  flex: 100%;
  position: relative;
  justify-content: center;
  background-size: auto;
  background-repeat: no-repeat;
  background-position: center;
}

/* line 40, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen nav:first-of-type {
  margin-top: 3.2rem;
}

@media (min-width: 768px) {
  /* line 45, app/assets/stylesheets/lab/elements/captured-screen.scss */
  .vivid-lab .captured-screen.surface--color:not(.captured-screen--size-fluid) {
    background-color: var(--surface-shade-color);
  }
  /* line 49, app/assets/stylesheets/lab/elements/captured-screen.scss */
  .vivid-lab .captured-screen.surface--color.surface--color-default:not(.captured-screen--size-fluid) {
    background-color: transparent;
  }
}

/* line 55, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen--watermark-align-top {
  background-position: center 0;
}

/* line 59, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen--watermark-align-tile {
  background-position: initial;
  background-repeat: repeat;
}

/* line 64, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen__header__content,
.vivid-lab .captured-screen__footer__content,
.vivid-lab .captured-screen__bottom,
.vivid-lab .captured-screen__banner,
.vivid-lab .captured-screen__subject,
.vivid-lab .captured-screen__steps,
.vivid-lab .captured-screen__body {
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  width: 100%;
}

@media (min-width: 768px) {
  /* line 64, app/assets/stylesheets/lab/elements/captured-screen.scss */
  .vivid-lab .captured-screen__header__content,
.vivid-lab .captured-screen__footer__content,
.vivid-lab .captured-screen__bottom,
.vivid-lab .captured-screen__banner,
.vivid-lab .captured-screen__subject,
.vivid-lab .captured-screen__steps,
.vivid-lab .captured-screen__body {
    margin-left: auto;
    margin-right: auto;
    width: 528px;
  }
}

/* line 82, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen__footer__content,
.vivid-lab .captured-screen__header__container {
  z-index: 1000;
  padding-bottom: 1.6rem;
}

/* line 88, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen__subject__content {
  display: flex;
  justify-content: center;
}

/* line 93, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen__controls {
  display: flex;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  min-height: 2.4rem;
  align-items: center;
  -webkit-app-region: drag;
}

/* line 101, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen__controls > div {
  -webkit-app-region: no-drag;
}

@media (min-width: 768px) {
  /* line 93, app/assets/stylesheets/lab/elements/captured-screen.scss */
  .vivid-lab .captured-screen__controls {
    position: sticky;
    top: 1.6rem;
    right: 1.6rem;
    left: 1.6rem;
    padding: 0;
  }
}

/* line 113, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen__controls + div {
  margin-top: 1.6rem;
}

/* line 118, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen__left-control,
.vivid-lab .captured-screen__middle-control,
.vivid-lab .captured-screen__right-control {
  flex: 0 1 33.3333333%;
  display: flex;
}

/* line 125, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen__left-control {
  text-align: left;
  justify-content: flex-start;
}

@media (min-width: 768px) {
  /* line 125, app/assets/stylesheets/lab/elements/captured-screen.scss */
  .vivid-lab .captured-screen__left-control {
    position: fixed;
    top: 1.6rem;
    left: 1.6rem;
  }
}

/* line 136, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen__middle-control {
  color: var(--surface-color, #0A0A0A);
}

/* line 137, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen__middle-control,
.vivid-lab .captured-screen__middle-control .toolbar {
  text-align: center;
  justify-content: center;
}

@media (min-width: 768px) {
  /* line 136, app/assets/stylesheets/lab/elements/captured-screen.scss */
  .vivid-lab .captured-screen__middle-control {
    flex: 1;
  }
}

/* line 150, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen__right-control,
.vivid-lab .captured-screen__right-control .toolbar {
  text-align: right;
  justify-content: flex-end;
}

@media (min-width: 768px) {
  /* line 149, app/assets/stylesheets/lab/elements/captured-screen.scss */
  .vivid-lab .captured-screen__right-control {
    position: fixed;
    top: 1.6rem;
    right: 1.6rem;
  }
}

/* line 163, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen__close {
  min-height: 2.4rem;
  opacity: 0.35;
  text-shadow: 0 0.1rem var(--surface-background-color);
}

/* line 168, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen__close > a {
  float: right;
}

@media (min-width: 768px) {
  /* line 173, app/assets/stylesheets/lab/elements/captured-screen.scss */
  .vivid-lab .captured-screen__close > a > .icon {
    font-size: 4rem;
  }
}

/* line 179, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen__logo {
  height: 2.4rem;
}

/* line 183, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen__logo--mono {
  opacity: 0.35;
}

/* line 187, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen__header__container {
  text-align: center;
  padding-top: calc(1.6rem + var(--safe-area-inset-top));
  -webkit-app-region: drag;
}

/* line 193, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen__header__container.sticky-top {
  position: sticky;
  top: 0;
}

/* line 198, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen__header__container.sticky-top--stuck {
  background: inherit;
  width: 100%;
}

/* line 205, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen__content__container {
  display: flex;
  flex-direction: column;
}

@media (max-width: 767px) {
  /* line 205, app/assets/stylesheets/lab/elements/captured-screen.scss */
  .vivid-lab .captured-screen__content__container {
    flex: 100%;
    box-shadow: none;
  }
}

@media (min-width: 768px) {
  /* line 205, app/assets/stylesheets/lab/elements/captured-screen.scss */
  .vivid-lab .captured-screen__content__container {
    border-radius: 2.4rem;
    margin-left: auto;
    margin-right: auto;
  }
  /* line 219, app/assets/stylesheets/lab/elements/captured-screen.scss */
  .vivid-lab .captured-screen__content__container:last-child {
    margin-bottom: 1.6rem;
  }
  /* line 223, app/assets/stylesheets/lab/elements/captured-screen.scss */
  .vivid-lab .captured-screen__content__container > div {
    padding-left: 3.2rem;
    padding-right: 3.2rem;
  }
  /* line 228, app/assets/stylesheets/lab/elements/captured-screen.scss */
  .vivid-lab .captured-screen__content__container > :first-child {
    padding-top: 3.2rem;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
  }
  /* line 234, app/assets/stylesheets/lab/elements/captured-screen.scss */
  .vivid-lab .captured-screen__content__container > :last-child {
    padding-bottom: 3.2rem;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
  }
}

@media (min-width: 768px) {
  /* line 243, app/assets/stylesheets/lab/elements/captured-screen.scss */
  .vivid-lab .captured-screen--outlined .captured-screen__content__container {
    border: 0.1rem solid var(--surface-container-outline-color);
  }
}

/* line 250, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen__footer {
  position: sticky;
  bottom: 0;
}

@media (max-width: 767px) {
  /* line 256, app/assets/stylesheets/lab/elements/captured-screen.scss */
  .vivid-lab .captured-screen__footer.sticky-bottom:not(.sticky-bottom--stuck) .captured-screen__footer__content {
    padding-top: 0;
  }
}

@media (max-width: 374px) {
  /* line 250, app/assets/stylesheets/lab/elements/captured-screen.scss */
  .vivid-lab .captured-screen__footer {
    position: static;
  }
}

@media (min-width: 375px) and (max-width: 767px) {
  /* line 268, app/assets/stylesheets/lab/elements/captured-screen.scss */
  .vivid-lab .captured-screen__footer.sticky-bottom--fixed .captured-screen__footer__content {
    bottom: 0;
    position: fixed;
  }
}

/* line 275, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen__footer.sticky-bottom--stuck {
  background: var(--surface-sticky-overlay-color);
  box-shadow: 0 -0.1rem 0 var(--surface-trim-color);
}

/* line 281, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen__footer__content,
.vivid-lab .captured-screen__bottom:last-child .captured-screen__bottom__content {
  padding-bottom: calc(max(1.6rem, var(--safe-area-inset-bottom)));
}

/* line 286, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen__banner {
  line-height: 1.3333333333;
  font-size: 2rem;
  font-weight: 400;
  text-shadow: 0 0.1rem var(--surface-bg-color);
}

/* line 294, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen__body {
  min-height: 20vh;
}

@media (max-width: 767px) {
  /* line 294, app/assets/stylesheets/lab/elements/captured-screen.scss */
  .vivid-lab .captured-screen__body {
    flex: 100%;
    width: 100%;
  }
}

/* line 304, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen--align-middle .captured-screen__content__container {
  justify-content: center;
}

/* line 308, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen--align-middle .captured-screen__body {
  flex: 0 1 auto;
}

/* line 313, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen--align-top {
  justify-content: flex-start;
}

/* line 318, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen--align-fill .captured-screen__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* line 326, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen__banner ~ .captured-screen__body {
  min-height: 0;
}

/* line 332, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen--size-form .captured-screen__body,
.vivid-lab .captured-screen--size-form .captured-screen__bottom,
.vivid-lab .captured-screen--size-form .captured-screen__banner,
.vivid-lab .captured-screen--size-wide .captured-screen__body,
.vivid-lab .captured-screen--size-wide .captured-screen__bottom,
.vivid-lab .captured-screen--size-wide .captured-screen__banner {
  width: 99.2rem;
  max-width: 100%;
}

/* line 342, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen--size-form .captured-screen__banner:not(.captured-screen__banner--size-wide):not(
.captured-screen__banner--size-form
) > .block-container,
.vivid-lab .captured-screen--size-wide .captured-screen__banner:not(.captured-screen__banner--size-wide):not(
.captured-screen__banner--size-form
) > .block-container {
  max-width: 73.6rem;
}

@media (min-width: 768px) {
  /* line 347, app/assets/stylesheets/lab/elements/captured-screen.scss */
  .vivid-lab .captured-screen--size-form .captured-screen__content__container,
.vivid-lab .captured-screen--size-wide .captured-screen__content__container {
    max-width: calc(100vw - 2.4rem);
  }
}

/* line 355, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen--size-form .captured-screen__body,
.vivid-lab .captured-screen--size-form .captured-screen__bottom,
.vivid-lab .captured-screen--size-form .captured-screen__banner {
  width: 76.8rem;
  max-width: 100%;
}

/* line 364, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen--size-fluid .captured-screen__body,
.vivid-lab .captured-screen--size-fluid .captured-screen__bottom,
.vivid-lab .captured-screen--size-fluid .captured-screen__banner {
  width: 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* line 373, app/assets/stylesheets/lab/elements/captured-screen.scss */
.vivid-lab .captured-screen--size-fluid .captured-screen__content__container {
  width: 100%;
  border: none;
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

/* line 383, app/assets/stylesheets/lab/elements/captured-screen.scss */
.product-page--variant-captured #body-container > form {
  flex: 100%;
  flex-direction: column;
  display: flex;
}

/* line 1, app/assets/stylesheets/lab/elements/discover.scss */
.discover-resource {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* line 8, app/assets/stylesheets/lab/elements/discover.scss */
.discover-content, .discover-content > a {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* line 16, app/assets/stylesheets/lab/elements/discover.scss */
.discover-resource {
  position: relative;
}

/* line 20, app/assets/stylesheets/lab/elements/discover.scss */
.discover-content--front,
.discover-content--back {
  backface-visibility: hidden;
}

/* line 25, app/assets/stylesheets/lab/elements/discover.scss */
.discover-content--back {
  transform: rotateY(180deg);
  position: absolute;
  display: flex;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/* line 37, app/assets/stylesheets/lab/elements/discover.scss */
.vivid .discover-resource.discover-resource--reversible {
  border-radius: 2rem;
  transform-style: preserve-3d;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, background-color ease-in-out 0.15s, transform 0.25s ease-in-out;
  outline: none;
}

/* line 47, app/assets/stylesheets/lab/elements/discover.scss */
.vivid .discover-resource.discover-resource--reversible:focus {
  transform: rotateY(180deg);
  box-shadow: 0 0 0 0.1rem var(--surface-bg-color, #FFFFFF), 0 0 0 0.3rem var(--button-focus-color, var(--input-border-color));
}

/* line 58, app/assets/stylesheets/lab/elements/discover.scss */
.discover-content--carousel.carousel--layout-natural .carousel__item {
  max-width: calc( min(374px, 100vw - var(--page-gutter) * 2 - var(--carousel-gutter)));
  min-width: 0;
}

/* line 4, app/assets/stylesheets/lab/elements/sentiment.scss */
.vivid-lab .sentiment-section {
  display: flex;
  flex-direction: column;
}

/* line 8, app/assets/stylesheets/lab/elements/sentiment.scss */
.vivid-lab .sentiment-section .sentiment--missing {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--surface-container-input-outline-color);
}

/* line 13, app/assets/stylesheets/lab/elements/sentiment.scss */
.vivid-lab .sentiment-section .sentiment__legend {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.6rem;
}

/* line 19, app/assets/stylesheets/lab/elements/sentiment.scss */
.vivid-lab .sentiment-section .sentiment__activity-scale {
  /* The CSS Variable syntax does not work here correctly */
  background: linear-gradient(to right, rgba(92, 53, 253, 0), #5C35FD);
  height: 2rem;
  border-radius: 0.4rem;
  margin-top: 0.6rem;
}

/* line 27, app/assets/stylesheets/lab/elements/sentiment.scss */
.vivid-lab .sentiment-section .sentiment__activity-scale__caption {
  margin-top: 0.6rem;
  font-size: 1rem;
  line-height: 1.6rem;
  font-weight: 700;
  display: flex;
}

/* line 34, app/assets/stylesheets/lab/elements/sentiment.scss */
.vivid-lab .sentiment-section .sentiment__activity-scale__caption span:first-child {
  flex: 1 1 100%;
}

/* line 39, app/assets/stylesheets/lab/elements/sentiment.scss */
.vivid-lab .sentiment-section .sentiment-graph {
  display: flex;
  margin-left: -1.0666666667rem;
  margin-right: -1.0666666667rem;
}

@media (min-width: 768px) {
  /* line 39, app/assets/stylesheets/lab/elements/sentiment.scss */
  .vivid-lab .sentiment-section .sentiment-graph {
    margin-left: 0;
    margin-right: 0;
  }
}

/* line 51, app/assets/stylesheets/lab/elements/sentiment.scss */
.vivid-lab .sentiment-section .sentiment-week {
  width: 20%;
  flex: 0 1 20%;
  margin: 0 0.2rem;
}

@media (min-width: 768px) {
  /* line 51, app/assets/stylesheets/lab/elements/sentiment.scss */
  .vivid-lab .sentiment-section .sentiment-week {
    margin: 0 0.4rem;
  }
}

@media (min-width: 992px) {
  /* line 51, app/assets/stylesheets/lab/elements/sentiment.scss */
  .vivid-lab .sentiment-section .sentiment-week {
    margin: 0 0.8rem;
  }
}

/* line 64, app/assets/stylesheets/lab/elements/sentiment.scss */
.vivid-lab .sentiment-section .sentiment-week:first-child {
  margin-left: 0;
}

/* line 68, app/assets/stylesheets/lab/elements/sentiment.scss */
.vivid-lab .sentiment-section .sentiment-week:last-child {
  margin-right: 0;
}

/* line 73, app/assets/stylesheets/lab/elements/sentiment.scss */
.vivid-lab .sentiment-section .sentiment-week__positive,
.vivid-lab .sentiment-section .sentiment-week__negative,
.vivid-lab .sentiment-section .sentiment-week__volume {
  position: relative;
  display: flex;
  align-items: flex-end;
  flex: 0 0 auto;
}

/* line 83, app/assets/stylesheets/lab/elements/sentiment.scss */
.vivid-lab .sentiment-section .sentiment-week__negative {
  align-items: flex-start;
}

/* line 87, app/assets/stylesheets/lab/elements/sentiment.scss */
.vivid-lab .sentiment-section .sentiment-week__volume {
  margin-top: 0.6rem;
}

/* line 91, app/assets/stylesheets/lab/elements/sentiment.scss */
.vivid-lab .sentiment-section .sentiment-week__label {
  text-align: center;
  font-size: 1rem;
  line-height: 1.6rem;
  background-color: var(--surface-background-color);
  min-height: 3rem;
  margin: 0.6rem 0.05rem;
  padding: 0.2rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  /* line 91, app/assets/stylesheets/lab/elements/sentiment.scss */
  .vivid-lab .sentiment-section .sentiment-week__label {
    font-size: 1.4rem;
    min-height: 2.4rem;
    margin: 0.6rem 0.1rem;
  }
}

/* line 112, app/assets/stylesheets/lab/elements/sentiment.scss */
.vivid-lab .sentiment-section .sentiment-week__bar,
.vivid-lab .sentiment-section .sentiment-week__heatmap {
  width: 14.28571429%;
  float: left;
  margin: 0 0.05rem;
}

@media (min-width: 768px) {
  /* line 112, app/assets/stylesheets/lab/elements/sentiment.scss */
  .vivid-lab .sentiment-section .sentiment-week__bar,
.vivid-lab .sentiment-section .sentiment-week__heatmap {
    margin: 0 0.1rem;
  }
}

/* line 122, app/assets/stylesheets/lab/elements/sentiment.scss */
.vivid-lab .sentiment-section .sentiment-week__bar.sentiment--positive,
.vivid-lab .sentiment-section .sentiment-week__heatmap.sentiment--positive {
  border-top-left-radius: 0.4rem;
  border-top-right-radius: 0.4rem;
  background-color: var(--surface-background-color);
}

@media (min-width: 992px) {
  /* line 122, app/assets/stylesheets/lab/elements/sentiment.scss */
  .vivid-lab .sentiment-section .sentiment-week__bar.sentiment--positive,
.vivid-lab .sentiment-section .sentiment-week__heatmap.sentiment--positive {
    border-top-left-radius: 0.6rem;
    border-top-right-radius: 0.6rem;
  }
}

/* line 133, app/assets/stylesheets/lab/elements/sentiment.scss */
.vivid-lab .sentiment-section .sentiment-week__bar.sentiment--negative,
.vivid-lab .sentiment-section .sentiment-week__heatmap.sentiment--negative {
  border-bottom-left-radius: 0.4rem;
  border-bottom-right-radius: 0.4rem;
  background-color: var(--surface-background-color);
}

@media (min-width: 992px) {
  /* line 133, app/assets/stylesheets/lab/elements/sentiment.scss */
  .vivid-lab .sentiment-section .sentiment-week__bar.sentiment--negative,
.vivid-lab .sentiment-section .sentiment-week__heatmap.sentiment--negative {
    border-bottom-left-radius: 0.6rem;
    border-bottom-right-radius: 0.6rem;
  }
}

/* line 144, app/assets/stylesheets/lab/elements/sentiment.scss */
.vivid-lab .sentiment-section .sentiment-week__bar.sentiment--neutral,
.vivid-lab .sentiment-section .sentiment-week__heatmap.sentiment--neutral {
  background-color: var(--surface-background-color);
  border-width: 0;
}

/* line 150, app/assets/stylesheets/lab/elements/sentiment.scss */
.vivid-lab .sentiment-section .sentiment-week__positive,
.vivid-lab .sentiment-section .sentiment-week__negative {
  height: 11.2rem;
}

@media (min-width: 768px) {
  /* line 150, app/assets/stylesheets/lab/elements/sentiment.scss */
  .vivid-lab .sentiment-section .sentiment-week__positive,
.vivid-lab .sentiment-section .sentiment-week__negative {
    height: 11.2rem;
  }
}

/* line 159, app/assets/stylesheets/lab/elements/sentiment.scss */
.vivid-lab .sentiment-section .sentiment-week__heatmap {
  height: 1.2rem;
}

@media (min-width: 768px) {
  /* line 159, app/assets/stylesheets/lab/elements/sentiment.scss */
  .vivid-lab .sentiment-section .sentiment-week__heatmap {
    height: 2.4rem;
  }
}

/* line 167, app/assets/stylesheets/lab/elements/sentiment.scss */
.vivid-lab .sentiment-section .sentiment-week__baseline {
  position: absolute;
  height: 0.1rem;
  width: 100%;
  background-color: var(--surface-color);
}

/* line 3, app/assets/stylesheets/lab/elements/family_map.scss */
.vivid-lab .family-map__map-icon__avatar--stale,
.vivid-lab .family-map__avatar--stale {
  filter: grayscale(1);
}

@media (max-width: 767px) {
  /* line 4, app/assets/stylesheets/lab/elements/nps.scss */
  .vivid-lab #nps-modal .button {
    --button-height: calc(3.2rem - var(--surface-border-width, 0rem) * 2);
    --natural-button-height: 3.2rem;
    min-height: 3.2rem;
    padding: calc((var(--button-height) - 2rem) / 2) 0;
    line-height: 2rem;
    font-size: 1.4rem;
  }
}