/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
@layer properties;
@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-Regular.eot");
  src: url("../fonts/Rubik-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Rubik-Regular.woff2") format("woff2"), url("../fonts/Rubik-Regular.woff") format("woff"), url("../fonts/Rubik-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-Italic.eot");
  src: url("../fonts/Rubik-Italic.eot?#iefix") format("embedded-opentype"), url("../fonts/Rubik-Italic.woff2") format("woff2"), url("../fonts/Rubik-Italic.woff") format("woff"), url("../fonts/Rubik-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-Light.eot");
  src: url("../fonts/Rubik-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/Rubik-Light.woff2") format("woff2"), url("../fonts/Rubik-Light.woff") format("woff"), url("../fonts/Rubik-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-Medium.eot");
  src: url("../fonts/Rubik-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/Rubik-Medium.woff2") format("woff2"), url("../fonts/Rubik-Medium.woff") format("woff"), url("../fonts/Rubik-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-Bold.eot");
  src: url("../fonts/Rubik-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Rubik-Bold.woff2") format("woff2"), url("../fonts/Rubik-Bold.woff") format("woff"), url("../fonts/Rubik-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-BoldItalic.eot");
  src: url("../fonts/Rubik-BoldItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/Rubik-BoldItalic.woff2") format("woff2"), url("../fonts/Rubik-BoldItalic.woff") format("woff"), url("../fonts/Rubik-BoldItalic.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-Black.eot");
  src: url("../fonts/Rubik-Black.eot?#iefix") format("embedded-opentype"), url("../fonts/Rubik-Black.woff2") format("woff2"), url("../fonts/Rubik-Black.woff") format("woff"), url("../fonts/Rubik-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "coqui";
  src: url("../fonts/coqui.eot?329t4l");
  src: url("../fonts/coqui.eot?329t4l#iefix") format("embedded-opentype"), url("../fonts/coqui.ttf?329t4l") format("truetype"), url("../fonts/coqui.woff?329t4l") format("woff"), url("../fonts/coqui.svg?329t4l#coqui") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.icon {
  font-family: "coqui" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.warning-icon:before {
  content: "\e934";
}
.warning-bold-icon:before {
  content: "\e931";
}
.bubble-icon:before {
  content: "\e907";
}
.bubble-2-icon:before {
  content: "\e905";
}
.bubble-2-bold-icon:before {
  content: "\e967";
}
.bubble-3-icon:before {
  content: "\e906";
}
.bubble-3-bold-icon:before {
  content: "\e968";
}
.stopwatch-icon:before {
  content: "\e92f";
}
.stopwatch-bold-icon:before {
  content: "\e97f";
}
.target-icon:before {
  content: "\e937";
}
.target-bold-icon:before {
  content: "\e98a";
}
.smiley-sad-icon:before {
  content: "\e92c";
}
.smiley-sad-bold-icon:before {
  content: "\e98b";
}
.smiley-icon:before {
  content: "\e92b";
}
.smiley-bold-icon:before {
  content: "\e98c";
}
.qmark-icon:before {
  content: "\e926";
}
.qmark-bold-icon:before {
  content: "\e98d";
}
.cap-icon:before {
  content: "\e908";
}
.cap-bold-icon:before {
  content: "\e969";
}
.search-icon:before {
  content: "\e929";
}
.search-bold-icon:before {
  content: "\e98e";
}
.check-2-icon:before {
  content: "\e910";
}
.check-2-bold-icon:before {
  content: "\e96b";
}
.user-icon:before {
  content: "\e932";
}
.user-bold-icon:before {
  content: "\e936";
}
.users-icon:before {
  content: "\e900";
}
.users-bold-icon:before {
  content: "\e973";
}
.house-icon:before {
  content: "\e901";
}
.house-bold-icon:before {
  content: "\e97c";
}
.folder-icon:before {
  content: "\e9a5";
}
.folder-bold-icon:before {
  content: "\e9a6";
}
.folder-open-icon:before {
  content: "\e914";
}
.folder-open-bold-icon:before {
  content: "\e977";
}
.folder-out-icon:before {
  content: "\e90e";
}
.folder-out-bold-icon:before {
  content: "\e979";
}
.folder-in-icon:before {
  content: "\e919";
}
.folder-in-bold-icon:before {
  content: "\e978";
}
.floppy-icon:before {
  content: "\e913";
}
.floppy-bold-icon:before {
  content: "\e976";
}
.laptop-icon:before {
  content: "\e91c";
}
.laptop-bold-icon:before {
  content: "\e982";
}
.printer-icon:before {
  content: "\e925";
}
.printer-bold-icon:before {
  content: "\e98f";
}
.joypad-icon:before {
  content: "\e91b";
}
.joypad-bold-icon:before {
  content: "\e981";
}
.lightbulb-icon:before {
  content: "\e91e";
}
.lightbulb-2-icon:before {
  content: "\e917";
}
.lightbulb-2-bold-icon:before {
  content: "\e985";
}
.file-icon:before {
  content: "\e912";
}
.file-bold-icon:before {
  content: "\e974";
}
.video-book-icon:before {
  content: "\e933";
}
.video-book-bold-icon:before {
  content: "\e998";
}
.thumbs-up-icon:before {
  content: "\e939";
}
.thumbs-up-bold-icon:before {
  content: "\e99d";
}
.cards-icon:before {
  content: "\e909";
}
.cards-bold-icon:before {
  content: "\e96a";
}
.eye-icon:before {
  content: "\e90f";
}
.eye-bold-icon:before {
  content: "\e972";
}
.eye-off-icon:before {
  content: "\e92e";
}
.eye-off-bold-icon:before {
  content: "\e9a4";
}
.headphones-icon:before {
  content: "\e916";
}
.headphones-bold-icon:before {
  content: "\e97d";
}
.headphones-off-bold-icon:before {
  content: "\e97e";
}
.check-circle-icon:before {
  content: "\e938";
}
.check-circle-bold-icon:before {
  content: "\e96d";
}
.check-circle-inv-icon:before {
  content: "\e94f";
}
.check-circle-inv-bold-icon:before {
  content: "\e96f";
}
.x-circle-icon:before {
  content: "\e94e";
}
.x-circle-bold-icon:before {
  content: "\e99e";
}
.x-circle-inv-icon:before {
  content: "\e950";
}
.minus-circle-inv-icon:before {
  content: "\e957";
}
.minus-circle-inv-bold-icon:before {
  content: "\e988";
}
.warning-circle-inv-icon:before {
  content: "\e958";
}
.warning-circle-inv-bold-icon:before {
  content: "\e99f";
}
.book-icon:before {
  content: "\e904";
}
.book-bold-icon:before {
  content: "\e966";
}
.assignment-icon:before {
  content: "\e903";
}
.assignment-bold-icon:before {
  content: "\e95e";
}
.down-icon:before {
  content: "\e93a";
}
.down-bold-icon:before {
  content: "\e96c";
}
.up-icon:before {
  content: "\e93b";
}
.up-bold-icon:before {
  content: "\e9a0";
}
.left-icon:before {
  content: "\e951";
}
.left-bold-icon:before {
  content: "\e984";
}
.right-icon:before {
  content: "\e952";
}
.right-bold-icon:before {
  content: "\e990";
}
.arrow-left-icon:before {
  content: "\e93c";
}
.arrow-left-bold-icon:before {
  content: "\e95f";
}
.arrow-right-icon:before {
  content: "\e93d";
}
.arrow-right-bold-icon:before {
  content: "\e960";
}
.arrow-ul-icon:before {
  content: "\e93e";
}
.arrow-ul-bold-icon:before {
  content: "\e961";
}
.arrow-ur-icon:before {
  content: "\e93f";
}
.arrow-ur-bold-icon:before {
  content: "\e962";
}
.arrow-dl-icon:before {
  content: "\e940";
}
.arrow-dl-bold-icon:before {
  content: "\e95d";
}
.arrow-dr-icon:before {
  content: "\e941";
}
.arrow-dr-bold-icon:before {
  content: "\e963";
}
.arrow-up-icon:before {
  content: "\e942";
}
.arrow-up-bold-icon:before {
  content: "\e964";
}
.arrow-down-icon:before {
  content: "\e943";
}
.arrow-down-bold-icon:before {
  content: "\e965";
}
.mic-icon:before {
  content: "\e959";
}
.mic-bold-icon:before {
  content: "\e991";
}
.mic-inv-icon:before {
  content: "\e920";
}
.mic-inv-bold-icon:before {
  content: "\e986";
}
.gear-icon:before {
  content: "\e915";
}
.gear-bold-icon:before {
  content: "\e97a";
}
.speaker-icon:before {
  content: "\e92d";
}
.speaker-bold-icon:before {
  content: "\e992";
}
.star-icon:before {
  content: "\e99b";
}
.star-inv-icon:before {
  content: "\e99c";
}
.play-icon:before {
  content: "\e922";
}
.play-bold-icon:before {
  content: "\e993";
}
.previous-icon:before {
  content: "\e928";
}
.next-icon:before {
  content: "\e944";
}
.next-bold-icon:before {
  content: "\e994";
}
.previous-bold-icon:before {
  content: "\e995";
}
.pause-bold-icon:before {
  content: "\e996";
}
.stop-icon:before {
  content: "\e997";
}
.fb-icon:before {
  content: "\e911";
}
.tw-icon:before {
  content: "\e9a1";
}
.yt-icon:before {
  content: "\e9a2";
}
.pn-icon:before {
  content: "\e924";
}
.in-icon:before {
  content: "\e91a";
}
.enter-icon:before {
  content: "\e92a";
}
.enter-bold-icon:before {
  content: "\e971";
}
.enter-2-icon:before {
  content: "\e953";
}
.enter-3-icon:before {
  content: "\e954";
}
.leave-icon:before {
  content: "\e91d";
}
.leave-bold-icon:before {
  content: "\e983";
}
.leave-2-icon:before {
  content: "\e955";
}
.leave-3-icon:before {
  content: "\e956";
}
.minus-icon:before {
  content: "\e921";
}
.minus-bold-icon:before {
  content: "\e987";
}
.plus-icon:before {
  content: "\e923";
}
.plus-bold-icon:before {
  content: "\e999";
}
.x-icon:before {
  content: "\e935";
}
.x-bold-icon:before {
  content: "\e980";
}
.checkmark-icon:before {
  content: "\e90b";
}
.checkmark-bold-icon:before {
  content: "\e970";
}
.replay-icon:before {
  content: "\e927";
}
.replay-bold-icon:before {
  content: "\e99a";
}
.bill-icon:before {
  content: "\e945";
}
.bill-time-icon:before {
  content: "\e946";
}
.pen-icon:before {
  content: "\e947";
}
.pen-line-icon:before {
  content: "\e948";
}
.pen-line-bold-icon:before {
  content: "\e96e";
}
.cabinet-icon:before {
  content: "\e949";
}
.fav-icon:before {
  content: "\e94a";
}
.arrow-circle-icon:before {
  content: "\e94b";
}
.teacher-icon:before {
  content: "\e930";
}
.user-focus-icon:before {
  content: "\e94c";
}
.user-focus-bold-icon:before {
  content: "\e9a3";
}
.user-check-icon:before {
  content: "\e94d";
}
.student-icon:before {
  content: "\e95a";
}
.checkmark-2-icon:before {
  content: "\e90a";
}
.exclamation-mark-icon:before {
  content: "\e90d";
}
.img-icon:before {
  content: "\e918";
}
.menu-icon:before {
  content: "\e91f";
}
.arrow-up-3-icon:before {
  content: "\e902";
}
.coqui-icon:before {
  content: "\e90c";
}
.guide-icon:before {
  content: "\e95b";
}
.hand-card-icon:before {
  content: "\e95c";
}
.hand-card-bold-icon:before {
  content: "\e975";
}
.gp-bold-icon:before {
  content: "\e97b";
}
.multiple-choice-bold-icon:before {
  content: "\e989";
}
html {
  font-size: 16px;
}
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  color: #13191C;
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
}
h1, .h1 {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  --tw-leading: var(--leading-tight, 1.25);
  line-height: var(--leading-tight, 1.25);
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
}
h2, .h2 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  --tw-leading: var(--leading-tight, 1.25);
  line-height: var(--leading-tight, 1.25);
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
}
h3, .h3 {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  --tw-leading: var(--leading-snug, 1.375);
  line-height: var(--leading-snug, 1.375);
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
}
h4, .h4 {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  --tw-leading: var(--leading-snug, 1.375);
  line-height: var(--leading-snug, 1.375);
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
}
h5, .h5 {
  font-size: clamp(0.875rem, 2vw, 1rem);
  --tw-leading: var(--leading-normal, 1.5);
  line-height: var(--leading-normal, 1.5);
  --tw-font-weight: var(--font-weight-medium, 500);
  font-weight: var(--font-weight-medium, 500);
}
h6, .h6 {
  font-size: clamp(0.75rem, 1.5vw, 0.875rem);
  --tw-leading: var(--leading-normal, 1.5);
  line-height: var(--leading-normal, 1.5);
  --tw-font-weight: var(--font-weight-medium, 500);
  font-weight: var(--font-weight-medium, 500);
}
.p {
  font-size: 1rem;
  line-height: 1.5;
}
.small {
  font-size: 0.75rem;
  line-height: 1.5;
}
.tiny, .landing-activities__item-info-dropdown-bar p {
  font-size: 0.625rem;
  line-height: 1.5;
}
.transition_300, .landing-activities__filters-item, .landing-activities__filters-item:hover, .landing-activities__item-bt_dropdown, .landing-activities__item-info-dropdown, .link-underline, .link-underline-amazon, .link-underline-crimson, .login-button {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
  transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
}
.transition_500, .btn-record, .btn-record .icon, .btn-record:hover, .btn-record:hover .icon {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 500ms;
  transition-duration: 500ms;
  --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
  transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.cookie-notice {
  position: fixed;
  bottom: calc(var(--spacing, 0.25rem) * 0);
  left: calc(var(--spacing, 0.25rem) * 0);
  z-index: 100;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing, 0.25rem) * 7);
  background-color: var(--color-white, #fff);
  padding: calc(var(--spacing, 0.25rem) * 5);
  --tw-shadow: 0 0 7px 0 var(--tw-shadow-color, rgba(0,0,0,0.2));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  @media (width >= 40rem) {
    flex-direction: row;
  }
}
.cookie-notice-buttons {
  order: 2;
  display: flex;
  gap: calc(var(--spacing, 0.25rem) * 3);
  @media (width >= 40rem) {
    order: 1;
  }
}
.cookie-notice-text {
  order: 1;
  --tw-border-style: none;
  border-style: none;
  padding: calc(var(--spacing, 0.25rem) * 0);
  text-align: center;
  font-size: var(--text-xs, 0.75rem);
  line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  @media (width >= 40rem) {
    order: 2;
  }
  @media (width >= 40rem) {
    border-left-style: var(--tw-border-style);
    border-left-width: 0.125rem;
  }
  @media (width >= 40rem) {
    --tw-border-style: dotted;
    border-style: dotted;
  }
  @media (width >= 40rem) {
    padding-left: calc(var(--spacing, 0.25rem) * 7);
  }
  @media (width >= 40rem) {
    text-align: left;
  }
}
.cookie-notice-text b {
  display: block;
  @media (width >= 40rem) {
    display: inline;
  }
}
.cookie-notice-text span {
  display: inline;
  @media (width >= 48rem) {
    display: block;
  }
}
.btn, .btn-c, .accent_helpers button {
  position: relative;
  display: flex;
  height: 2rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  background-color: #3D7D5E;
  padding-inline: calc(var(--spacing, 0.25rem) * 4);
  font-size: var(--text-xs, 0.75rem);
  line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  --tw-leading: 1;
  line-height: 1;
  white-space: nowrap;
  color: var(--color-white, #fff);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 250ms;
  transition-duration: 250ms;
  --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
  transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
  &:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
  }
  &:focus-visible {
    outline-offset: 2px;
  }
  &:focus-visible {
    outline-color: #1a73e8;
  }
}
.btn:hover, .btn-c:hover, .accent_helpers button:hover {
  background-color: #2D4D56;
}
.btn .icon, .btn-c .icon, .accent_helpers button .icon {
  font-size: 0.9375rem;
}
.btn[data-title]::after, [data-title].btn-c::after, .accent_helpers button[data-title]::after {
  pointer-events: none;
  position: absolute;
  bottom: calc(var(--spacing, 0.25rem) * 0);
  left: calc(1/2 * 100%);
  border-radius: calc(infinity * 1px);
  background-color: #13191C;
  padding-inline: calc(var(--spacing, 0.25rem) * 3);
  padding-block: calc(var(--spacing, 0.25rem) * 1);
  font-size: 10px;
  line-height: calc(var(--spacing, 0.25rem) * 2.5);
  color: var(--color-white, #fff);
  opacity: 0%;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  transform: translate(-50%, calc(100% + 10px));
  content: attr(data-title);
}
.btn[data-title]:focus-visible::after, [data-title].btn-c:focus-visible::after, .accent_helpers button[data-title]:focus-visible::after, .btn[data-title]:hover::after, [data-title].btn-c:hover::after, .accent_helpers button[data-title]:hover::after {
  opacity: 100%;
}
.btn[data-alert]::after, [data-alert].btn-c::after, .accent_helpers button[data-alert]::after {
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * -2);
  right: calc(var(--spacing, 0.25rem) * 1);
  display: grid;
  height: calc(var(--spacing, 0.25rem) * 4);
  width: calc(var(--spacing, 0.25rem) * 4);
  place-items: center;
  border-radius: calc(infinity * 1px);
  background-color: #FCCA46;
  font-size: 0.625rem;
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: #13191C;
  content: attr(data-alert);
}
.btn[data-action=cancel], [data-action=cancel].btn-c, .accent_helpers button[data-action=cancel], .btn[data-key=cancel], [data-key=cancel].btn-c, .accent_helpers button[data-key=cancel], .btn.dark, .dark.btn-c, .accent_helpers button.dark {
  background-color: #13191C;
}
.btn[data-action=cancel]:hover, [data-action=cancel].btn-c:hover, .accent_helpers button[data-action=cancel]:hover, .btn[data-key=cancel]:hover, [data-key=cancel].btn-c:hover, .accent_helpers button[data-key=cancel]:hover, .btn.dark:hover, .dark.btn-c:hover, .accent_helpers button.dark:hover {
  background-color: #5B646B;
}
.btn.line, .line.btn-c, .accent_helpers button.line, .btn.line-warm-lt, .line-warm-lt.btn-c, .accent_helpers button.line-warm-lt {
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: #13191C;
  background-color: var(--color-white, #fff);
  color: #13191C;
}
.btn.line:hover, .line.btn-c:hover, .accent_helpers button.line:hover, .btn.line-warm-lt:hover, .line-warm-lt.btn-c:hover, .accent_helpers button.line-warm-lt:hover {
  background-color: #EDF1F4;
}
.btn.line-warm, .line-warm.btn-c, .accent_helpers button.line-warm {
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: #13191C;
  background-color: #FCCA46;
  color: #13191C;
}
.btn.line-warm:hover, .line-warm.btn-c:hover, .accent_helpers button.line-warm:hover {
  background-color: #FCCA46;
}
.btn.line-warm-lt:hover, .line-warm-lt.btn-c:hover, .accent_helpers button.line-warm-lt:hover {
  background-color: color-mix(in oklab, #FCCA46 33%, transparent);
}
.btn.danger, .danger.btn-c, .accent_helpers button.danger {
  background-color: #DE322C;
}
.btn.danger:hover, .danger.btn-c:hover, .accent_helpers button.danger:hover {
  background-color: #850400;
}
.btn.warning, .accent_helpers button.btn, .warning.btn-c, .accent_helpers button {
  background-color: #FCCA46;
  color: #13191C;
}
.btn.warning:hover, .warning.btn-c:hover, .accent_helpers button:hover {
  background-color: #FAA95A;
}
.btn.danger-trans, .danger-trans.btn-c, .accent_helpers button.danger-trans {
  background-color: color-mix(in oklab, #DE322C 10%, transparent);
  color: #DE322C;
}
.btn.danger-trans:hover, .danger-trans.btn-c:hover, .accent_helpers button.danger-trans:hover {
  background-color: #DE322C;
  color: var(--color-white, #fff);
}
.btn.success-trans, .success-trans.btn-c, .accent_helpers button.success-trans {
  background-color: color-mix(in oklab, #3D7D5E 10%, transparent);
  color: #3D7D5E;
}
.btn.success-trans:hover, .success-trans.btn-c:hover, .accent_helpers button.success-trans:hover {
  background-color: #3D7D5E;
  color: var(--color-white, #fff);
}
.btn.neutral-trans, .neutral-trans.btn-c, .accent_helpers button.neutral-trans {
  background-color: #EDF1F4;
  color: #13191C;
}
.btn.neutral-trans:hover, .neutral-trans.btn-c:hover, .accent_helpers button.neutral-trans:hover {
  background-color: #D7DEE0;
}
.btn.blank-trans, .blank-trans.btn-c, .accent_helpers button.blank-trans {
  background-color: transparent;
  color: #13191C;
}
.btn.blank-trans:hover, .blank-trans.btn-c:hover, .accent_helpers button.blank-trans:hover {
  background-color: #EDF1F4;
}
.btn.sm, .accent_helpers button.btn, .sm.btn-c, .accent_helpers button {
  height: 1.625rem;
}
.btn.sm .icon, .sm.btn-c .icon, .accent_helpers button .icon {
  font-size: 0.625rem;
}
.btn-c, .accent_helpers button {
  height: calc(var(--spacing, 0.25rem) * 8);
  min-width: calc(var(--spacing, 0.25rem) * 8);
  padding: calc(var(--spacing, 0.25rem) * 0);
}
.btn-c.sm, .accent_helpers button {
  height: calc(var(--spacing, 0.25rem) * 6);
  min-width: calc(var(--spacing, 0.25rem) * 6);
  font-size: var(--text-xs, 0.75rem);
  line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
}
.btn-record {
  display: grid;
  height: calc(var(--spacing, 0.25rem) * 32);
  width: calc(var(--spacing, 0.25rem) * 32);
  cursor: pointer;
  place-items: center;
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 0.125rem;
  --tw-border-style: dotted;
  border-style: dotted;
  border-color: #233D4D;
  background-color: #F0F3F6;
}
.btn-record .icon {
  color: #233D4D;
}
.btn-record .icon:before {
  content: "\e920";
}
.btn-record:hover {
  border-color: #DE322C;
  background-color: color-mix(in oklab, #850400 10%, transparent);
}
.btn-record:hover .icon {
  color: #DE322C;
}
.btn-record[data-state=waiting] {
  background-color: #7D868E;
}
.btn-record[data-state=waiting] .icon {
  display: none !important;
}
.btn-record[data-state=waiting]:after {
  display: inline-block;
  height: calc(var(--spacing, 0.25rem) * 32);
  width: calc(var(--spacing, 0.25rem) * 32);
  border-radius: calc(infinity * 1px);
  background-color: var(--color-white, #fff);
  --tw-content: "";
  content: var(--tw-content);
  aspect-ratio: 1;
  --mask: conic-gradient(#0000 10%,#000),
          linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--mask);
  mask: var(--mask);
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  animation: spin 1s infinite linear;
}
.btn-record[data-state=waiting]:hover {
  background-color: #7D868E;
}
.btn-record[data-state=recording] {
  border-color: #850400;
  background-color: #850400;
}
.btn-record[data-state=recording] .icon {
  color: var(--color-white, #fff);
  animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.btn-record:not([data-state=correct]) {
  pointer-events: auto;
}
.btn-record[data-state^=correct] .icon, .btn-record:not([data-state*=correct]) .icon {
  display: block;
}
.btn-record[data-state=incorrect] {
  --tw-border-style: none;
  border-style: none;
  background-color: #DE322C;
}
.btn-record[data-state=incorrect] .icon {
  color: var(--color-white, #fff);
}
.btn-record[data-state=incorrect] .icon:before {
  content: "\e935";
}
.btn-record[data-state=correct], .btn-record[data-state="correct+"] {
  --tw-border-style: none;
  border-style: none;
  background-color: #255F4E;
}
.btn-record[data-state=correct] .icon, .btn-record[data-state="correct+"] .icon {
  color: var(--color-white, #fff);
}
.btn-record[data-state=correct] .icon:before {
  content: "\e90b";
}
.btn-record[data-state="correct+"] .icon:before {
  content: "\e90a";
}
.btn-record[data-state=correct-] {
  --tw-border-style: none;
  border-style: none;
  background-color: #FAA95A;
}
.btn-record[data-state=correct-] .icon {
  color: var(--color-white, #fff);
}
.btn-record[data-state=correct-] .icon:before {
  content: "\e90b";
}
.btn.active, .active.btn-c, .accent_helpers button.active, .btn.active:hover {
  background-color: #13191C !important;
  color: var(--color-white, #fff) !important;
}
.link-underline {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-bottom-color: transparent;
  padding-bottom: calc(var(--spacing, 0.25rem) * 0.5);
  color: #13191C;
}
.link-underline.active {
  border-bottom-color: #13191C;
  text-decoration-line: none;
}
.link-underline-amazon {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-bottom-color: transparent;
  padding-bottom: calc(var(--spacing, 0.25rem) * 0.5);
  color: #3D7D5E;
}
.link-underline-crimson {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-bottom-color: transparent;
  padding-bottom: calc(var(--spacing, 0.25rem) * 0.5);
  color: #DE322C;
}
.link-underline:hover {
  border-bottom-color: #13191C;
}
.link-underline-amazon:hover {
  border-bottom-color: #3D7D5E;
}
.link-underline-crimson:hover {
  border-bottom-color: #DE322C;
}
a.active {
  color: #13191C;
  text-decoration-line: underline;
}
@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
  }
  100% {
    box-shadow: 0 0 0 30px rgba(0, 0, 0, 0);
  }
}
.x-modal-close {
  border-radius: calc(infinity * 1px);
  &:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
  }
  &:focus-visible {
    outline-offset: 5px;
  }
  &:focus-visible {
    outline-color: #1a73e8;
  }
}
.fancy-radio {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 0.125rem;
  background-color: var(--color-white, #fff);
  padding-inline: calc(var(--spacing, 0.25rem) * 4);
  padding-block: calc(var(--spacing, 0.25rem) * 2.5);
  font-size: var(--text-xs, 0.75rem);
  line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  color: var(--color-black, #000);
}
.fancy-radio:has(input[type=radio]:checked) {
  background-color: #FCCA46;
}
.fancy-radio:has(input[type=radio]:focus-visible) {
  outline-style: var(--tw-outline-style);
  outline-width: 2px;
  outline-offset: 3px;
  outline-color: #1a73e8;
}
.fancy-radio input {
  position: absolute;
  opacity: 0%;
}
.fancy-radio span {
  text-align: center;
}
.checkbox-toggle {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
.checkbox-toggle label {
  cursor: pointer;
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  --tw-font-weight: var(--font-weight-normal, 400);
  font-weight: var(--font-weight-normal, 400);
}
.checkbox-toggle input[type=checkbox]:checked.toggle {
  background-color: #3D7D5E;
}
.checkbox-toggle input[type=checkbox]:checked.toggle:after {
  left: 100%;
  --tw-translate-x: -100%;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.checkbox-toggle input[type=checkbox]:checked.toggle.dark {
  background-color: #13191C;
}
.checkbox-toggle input[type=checkbox].toggle {
  position: relative;
  margin: calc(var(--spacing, 0.25rem) * 0);
  display: inline-block;
  height: calc(var(--spacing, 0.25rem) * 1);
  min-width: calc(var(--spacing, 0.25rem) * 14);
  cursor: pointer;
  appearance: none;
  border-radius: calc(infinity * 1px);
  background-color: #D7DEE0;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
  transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
}
.checkbox-toggle input[type=checkbox].toggle:before {
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * -2);
  left: calc(var(--spacing, 0.25rem) * 0);
  height: calc(var(--spacing, 0.25rem) * 5);
  width: 100%;
  background-color: transparent;
  content: "";
}
.checkbox-toggle input[type=checkbox].toggle:after {
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * -1.5);
  left: calc(var(--spacing, 0.25rem) * 0);
  display: inline-block;
  height: calc(var(--spacing, 0.25rem) * 4);
  width: calc(var(--spacing, 0.25rem) * 4);
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: #13191C;
  background-color: var(--color-white, #fff);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
  transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
  content: "";
}
.checkbox-toggle input[type=checkbox].toggle.dark:after {
  background-color: #13191C;
}
.checkbox-toggle input[type=checkbox]:focus-visible {
  border-radius: calc(infinity * 1px);
  outline-style: var(--tw-outline-style);
  outline-width: 2px;
  outline-offset: 8px;
  outline-color: #1a73e8;
}
.common {
  display: flex;
  align-items: center;
  padding-block: calc(var(--spacing, 0.25rem) * 2);
  text-align: left;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  &:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
  }
  &:focus-visible {
    outline-offset: 1px;
  }
  &:focus-visible {
    outline-color: #1a73e8;
  }
}
.drop-item {
  position: relative;
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  padding-inline: calc(var(--spacing, 0.25rem) * 3);
  padding-block: calc(var(--spacing, 0.25rem) * 2.5);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  -webkit-user-select: none;
  user-select: none;
  &:hover {
    @media (hover: hover) {
      background-color: #EDF1F4;
    }
  }
}
.drop-item input[type=radio]:focus-visible,
.drop-item input[type=checkbox]:focus-visible {
  outline-style: var(--tw-outline-style);
  outline-width: 2px;
  outline-offset: -2px;
  outline-color: #1a73e8;
}
.accent_helpers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--spacing, 0.25rem) * 1);
}
.accent_helpers button {
  height: calc(var(--spacing, 0.25rem) * 6);
  width: calc(var(--spacing, 0.25rem) * 6);
}
.accent_helpers > .current_accent {
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: #13191C;
}
.login-button {
  display: flex;
  height: calc(var(--spacing, 0.25rem) * 10);
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  --tw-border-style: solid;
  border-style: solid;
  border-color: #F0F3F6;
  background-color: var(--color-white, #fff);
  padding-inline: calc(var(--spacing, 0.25rem) * 3);
  padding-block: calc(var(--spacing, 0.25rem) * 0);
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  &:hover {
    @media (hover: hover) {
      border-color: color-mix(in oklab, #6F88A3 50%, transparent);
    }
  }
  &:hover {
    @media (hover: hover) {
      background-color: color-mix(in oklab, #6F88A3 10%, transparent);
    }
  }
}
.login-button .login-button__img svg, .login-button .login-button__img img {
  margin-right: calc(var(--spacing, 0.25rem) * 2);
  height: calc(var(--spacing, 0.25rem) * 7);
}
.input-wrapper {
  position: relative;
}
.input-wrapper label {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
  transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
}
.input-wrapper:has(:focus)::after {
  width: 100%;
}
.input-wrapper:has(:focus) label {
  --tw-font-weight: var(--font-weight-medium, 500);
  font-weight: var(--font-weight-medium, 500);
  color: #1a73e8;
}
.input-wrapper:has(:focus) input[type=password].accented,
.input-wrapper:has(:focus) input[type=number].accented,
.input-wrapper:has(:focus) input[type=text].accented,
.input-wrapper:has(:focus) input[type=email].accented,
.input-wrapper:has(:focus) textarea.accented {
  color: #1a73e8;
}
.input-wrapper:has(:focus) .icon {
  color: #1a73e8;
}
.input-wrapper:has(input[data-state=correct])::after {
  background-color: #3D7D5E;
}
.input-wrapper:has(input[data-state=correct]) .icon,
.input-wrapper:has(input[data-state=correct]) input[type=text].accented {
  color: #3D7D5E;
}
.input-wrapper:has(input[data-state=incorrect])::after {
  background-color: #DE322C;
}
.input-wrapper:has(input[data-state=incorrect]) .icon,
.input-wrapper:has(input[data-state=incorrect]) input[type=text].accented {
  color: #DE322C;
}
.input-wrapper::after {
  pointer-events: none;
  position: absolute;
  bottom: calc(var(--spacing, 0.25rem) * 0);
  left: calc(var(--spacing, 0.25rem) * 0);
  height: calc(var(--spacing, 0.25rem) * 0.5);
  width: calc(var(--spacing, 0.25rem) * 0);
  background-color: #1a73e8;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
  transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
  --tw-content: "";
  content: var(--tw-content);
}
input[type=number],
input[type=password],
input[type=text],
input[type=email],
textarea {
  width: 100%;
  appearance: none;
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-color: #13191C;
  padding-inline: calc(var(--spacing, 0.25rem) * 0);
  padding-block: calc(var(--spacing, 0.25rem) * 2.5);
  font-size: var(--text-xs, 0.75rem);
  line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  &:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus {
    --tw-outline-style: none;
    outline-style: none;
  }
}
input[type=number].accented,
input[type=password].accented,
input[type=text].accented,
input[type=email].accented,
textarea.accented {
  border-top-left-radius: var(--radius-md, 0.375rem);
  border-top-right-radius: var(--radius-md, 0.375rem);
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 0.125rem;
  padding-inline: calc(var(--spacing, 0.25rem) * 3);
  padding-top: calc(var(--spacing, 0.25rem) * 4);
  padding-bottom: calc(var(--spacing, 0.25rem) * 2);
}
input[type=number].set-time,
input[type=password].set-time,
input[type=text].set-time,
input[type=email].set-time,
textarea.set-time {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 0.125rem;
  background-color: transparent;
  padding: calc(var(--spacing, 0.25rem) * 0);
  text-align: left;
  --tw-leading: calc(var(--spacing, 0.25rem) * 6);
  line-height: calc(var(--spacing, 0.25rem) * 6);
}
[disabled],
.disabled {
  cursor: not-allowed;
  opacity: 50%;
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
[disabled]::after,
.disabled::after {
  display: none;
}
input[type=range] {
  position: relative;
  margin: calc(var(--spacing, 0.25rem) * 0);
  display: inline-block;
  height: calc(var(--spacing, 0.25rem) * 1);
  width: 100%;
  min-width: calc(var(--spacing, 0.25rem) * 10);
  cursor: pointer;
  appearance: none;
  border-radius: calc(infinity * 1px);
  background-color: #D7DEE0;
  outline-style: var(--tw-outline-style);
  outline-width: 0px;
}
input[type=range].fill-lower {
  background-image: linear-gradient(#3D7D5E, #3D7D5E), linear-gradient(#D7DEE0, #D7DEE0);
  background-repeat: no-repeat;
  background-size: 50% 100%, 100%;
}
input[type=range]:focus-visible {
  border-radius: calc(infinity * 1px);
  outline-style: var(--tw-outline-style);
  outline-width: 2px;
  outline-offset: 8px;
  outline-color: #1a73e8;
}
input[type=range]:focus-visible::-webkit-slider-thumb {
  background-color: #1a73e8;
}
input[type=range]::-webkit-slider-thumb {
  height: calc(var(--spacing, 0.25rem) * 4);
  width: calc(var(--spacing, 0.25rem) * 4);
  cursor: pointer;
  appearance: none;
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: #13191C;
  background-color: #3D7D5E;
  background-size: 35px auto;
  background-position: center;
  background-repeat: no-repeat;
}
input[type=range]::-webkit-slider-thumb:active {
  background-size: 30px auto;
}
input[type=range]::-moz-range-thumb {
  height: calc(var(--spacing, 0.25rem) * 4);
  width: calc(var(--spacing, 0.25rem) * 4);
  cursor: pointer;
  appearance: none;
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: #13191C;
  background-color: #3D7D5E;
  background-size: 35px auto;
  background-position: center;
  background-repeat: no-repeat;
}
input[type=range]::-moz-range-thumb:active {
  background-size: 30px auto;
}
.radio-wrap {
  position: relative;
  display: flex;
  cursor: pointer;
  align-items: center;
  -webkit-user-select: none;
  user-select: none;
}
.radio-wrap input[type=radio] {
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 0);
  left: calc(var(--spacing, 0.25rem) * 0);
  cursor: pointer;
  opacity: 0%;
}
.radio-wrap input[type=radio]:checked ~ .radio-check:after {
  display: block;
}
.radio-wrap input[type=radio]:focus-visible ~ .radio-check {
  outline-style: var(--tw-outline-style);
  outline-width: 1px;
  outline-offset: 3px;
  outline-color: #1a73e8;
}
.radio-check {
  position: absolute;
  top: calc(1/2 * 100%);
  left: calc(var(--spacing, 0.25rem) * 0);
  height: calc(var(--spacing, 0.25rem) * 4);
  width: calc(var(--spacing, 0.25rem) * 4);
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: #13191C;
  background-color: var(--color-white, #fff);
}
.radio-check:after {
  position: absolute;
  top: calc(1/2 * 100%);
  left: calc(1/2 * 100%);
  display: none;
  height: calc(var(--spacing, 0.25rem) * 2);
  width: calc(var(--spacing, 0.25rem) * 2);
  --tw-translate-x: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  border-radius: calc(infinity * 1px);
  background-color: #13191C;
  --tw-content: "";
  content: var(--tw-content);
}
.checkbox-wrap {
  position: relative;
  display: flex;
  cursor: pointer;
  align-items: center;
  --tw-leading: 1;
  line-height: 1;
  -webkit-user-select: none;
  user-select: none;
}
.checkbox-wrap input[type=checkbox] {
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 0);
  height: calc(var(--spacing, 0.25rem) * 4);
  width: calc(var(--spacing, 0.25rem) * 4);
  cursor: pointer;
  appearance: none;
  border-radius: 0.25rem;
}
.checkbox-wrap input[type=checkbox]:focus-visible {
  outline-style: var(--tw-outline-style);
  outline-width: 1px;
  outline-offset: 3px;
  outline-color: #1a73e8;
}
@keyframes goCheck {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -9rem 0;
  }
}
@keyframes goUncheck {
  from {
    background-position: -9rem 0;
  }
  to {
    background-position: 0 0;
  }
}
.checkbox-wrap input[type=checkbox]:checked + .checkbox-box:before {
  animation: goCheck 0.2s steps(9) forwards;
}
.checkbox-wrap input[type=checkbox]:not(:checked) + .checkbox-box:before {
  animation: goUncheck 0.2s steps(9) forwards;
}
.checkbox-wrap .checkbox-box {
  pointer-events: none;
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 0);
  z-index: 10;
  height: calc(var(--spacing, 0.25rem) * 4);
  width: calc(var(--spacing, 0.25rem) * 4);
  cursor: pointer;
  appearance: none;
  border-radius: 0.25rem;
}
.checkbox-wrap .checkbox-box:before {
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 0);
  left: calc(var(--spacing, 0.25rem) * 0);
  display: flex;
  height: calc(var(--spacing, 0.25rem) * 4);
  width: calc(var(--spacing, 0.25rem) * 4);
  --tw-content: "";
  content: var(--tw-content);
  background-image: url("../images/checkbox-stripe.svg");
  background-size: 10rem 1rem;
}
.checkbox-wrap-old {
  position: relative;
  display: flex;
  cursor: pointer;
  align-items: center;
  --tw-leading: 1;
  line-height: 1;
  -webkit-user-select: none;
  user-select: none;
}
.checkbox-wrap-old input[type=checkbox] {
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 0);
  height: calc(var(--spacing, 0.25rem) * 4);
  width: calc(var(--spacing, 0.25rem) * 4);
  cursor: pointer;
  appearance: none;
  border-radius: 0.25rem;
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: #13191C;
}
.checkbox-wrap-old input[type=checkbox]:after, .checkbox-wrap-old input[type=checkbox]:before {
  position: absolute;
  background-color: #13191C;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 100ms;
  transition-duration: 100ms;
  --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
  transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
  --tw-content: "";
  content: var(--tw-content);
}
.checkbox-wrap-old input[type=checkbox]:before {
  top: 0.3125rem;
  left: 0.125rem;
  height: calc(var(--spacing, 0.25rem) * 0.5);
  width: calc(var(--spacing, 0.25rem) * 0);
  rotate: 45deg;
}
.checkbox-wrap-old input[type=checkbox]:after {
  right: calc(var(--spacing, 0.25rem) * 2);
  bottom: calc(var(--spacing, 0.25rem) * 1);
  height: calc(var(--spacing, 0.25rem) * 0);
  width: calc(var(--spacing, 0.25rem) * 0.5);
  rotate: 40deg;
  transition-delay: 0.1s;
}
.checkbox-wrap-old input[type=checkbox]:checked:before {
  top: calc(var(--spacing, 0.25rem) * 2);
  left: 0.125rem;
  height: 0.125rem;
  width: 0.3125rem;
}
.checkbox-wrap-old input[type=checkbox]:checked:after {
  right: 0.3125rem;
  bottom: calc(var(--spacing, 0.25rem) * 0.5);
  height: 0.6875rem;
  width: calc(var(--spacing, 0.25rem) * 0.5);
}
.checkbox-wrap-old input[type=checkbox]:focus-visible {
  outline-style: var(--tw-outline-style);
  outline-width: 1px;
  outline-offset: 3px;
  outline-color: #1a73e8;
}
.progress-bar {
  position: relative;
  height: calc(var(--spacing, 0.25rem) * 2);
  width: 100%;
  border-radius: var(--radius-md, 0.375rem);
  background-color: #D7DEE0;
}
.progress-bar-val {
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 0);
  left: calc(var(--spacing, 0.25rem) * 0);
  height: calc(var(--spacing, 0.25rem) * 2);
  min-width: calc(var(--spacing, 0.25rem) * 4.5);
  border-radius: var(--radius-md, 0.375rem);
}
.progress-bar-val[data-percent]::after {
  position: absolute;
  top: calc(1/2 * 100%);
  right: calc(var(--spacing, 0.25rem) * 0);
  display: grid;
  height: calc(var(--spacing, 0.25rem) * 4.5);
  width: calc(var(--spacing, 0.25rem) * 4.5);
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  place-items: center;
  border-radius: calc(infinity * 1px);
  background-color: inherit;
  font-size: 0.625rem;
  line-height: calc(var(--spacing, 0.25rem) * 4);
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: inherit;
  content: attr(data-percent);
}
.progress-bar-val.basic::after {
  display: none;
}
.step-bar {
  position: relative;
}
.step-bar div[data-percent] {
  position: relative;
}
.step-bar div[data-percent]::after {
  position: absolute;
  top: calc(1/2 * 100%);
  right: calc(var(--spacing, 0.25rem) * 0);
  display: grid;
  height: calc(var(--spacing, 0.25rem) * 4.5);
  width: calc(var(--spacing, 0.25rem) * 4.5);
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  place-items: center;
  border-radius: calc(infinity * 1px);
  background-color: inherit;
  font-size: 0.625rem;
  line-height: calc(var(--spacing, 0.25rem) * 4);
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: inherit;
  content: attr(data-percent);
}
.loader {
  display: inline-block;
  height: calc(var(--spacing, 0.25rem) * 4);
  width: calc(var(--spacing, 0.25rem) * 4);
  animation: var(--animate-spin, spin 1s linear infinite);
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 0.125rem;
  border-color: #7D868E;
  border-bottom-color: transparent;
  --tw-duration: 1000ms;
  transition-duration: 1000ms;
  --tw-ease: linear;
  transition-timing-function: linear;
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
input[data-state=correct] {
  border-color: #3D7D5E;
  background-color: color-mix(in oklab, #3D7D5E 7%, transparent);
  color: #3D7D5E;
}
input[data-state=correct] + span {
  color: #3D7D5E;
  opacity: 100%;
}
input[data-state=correct] + span:before {
  content: "\e90b";
}
input[data-state=incorrect] {
  border-color: #DE322C;
  background-color: color-mix(in oklab, #DE322C 7%, transparent);
  color: #DE322C;
}
input[data-state=incorrect] + span {
  color: #DE322C;
  opacity: 100%;
}
input[data-state=incorrect] + span:before {
  content: "\e935";
}
.numbered-inputs {
  counter-reset: gapInputs;
}
.numbered-inputs .input-wrapper::before {
  pointer-events: none;
  position: absolute;
  top: calc(1/2 * 100%);
  left: calc(var(--spacing, 0.25rem) * 2);
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  font-size: var(--text-xs, 0.75rem);
  line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  --tw-leading: 1;
  line-height: 1;
  --tw-font-weight: var(--font-weight-medium, 500);
  font-weight: var(--font-weight-medium, 500);
  color: #6F88A3;
  content: counter(gapInputs);
  counter-increment: gapInputs;
}
.numbered-inputs .input-wrapper:has(input[data-state=correct])::before {
  color: #3D7D5E;
}
.numbered-inputs .input-wrapper:has(input[data-state=incorrect])::before {
  color: #DE322C;
}
dialog {
  position: fixed;
  top: calc(1/2 * 100%);
  left: calc(1/2 * 100%);
  z-index: 50;
  max-height: none;
  width: 100%;
  max-width: var(--container-xl, 36rem);
  --tw-translate-x: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  animation: fade-in-up 0.5s ease-in-out forwards;
  overflow: visible;
  background-color: var(--color-white, #fff);
  --tw-shadow: 0 0 12px 0 var(--tw-shadow-color, rgba(0,0,0,0.33));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  @media (width >= 40rem) {
    border-radius: var(--radius-2xl, 1rem);
  }
}
dialog .x-modal-content {
  max-height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--spacing, 0.25rem) * 1);
  @media (width >= 64rem) {
    max-height: 90vh;
  }
  padding-top: env(safe-area-inset-top);
}
dialog:before {
  position: absolute;
  z-index: -1;
  height: 100%;
  width: 100%;
  --tw-shadow: 0 0 12px 0 var(--tw-shadow-color, rgba(0,0,0,0.33));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-content: "";
  content: var(--tw-content);
  @media (width >= 40rem) {
    border-radius: var(--radius-2xl, 1rem);
  }
}
dialog:open {
  --tw-shadow: 0 0 0 100vw var(--tw-shadow-color, rgba(0,0,0,0.32));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
dialog.full {
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  border-radius: 0;
  background-color: var(--color-white, #fff);
}
dialog.full:before {
  display: none;
}
dialog.full .x-modal-content {
  height: 100vh;
}
body.dialog-lock {
  position: fixed;
  width: 100%;
  overflow: hidden;
}
.dialog-head {
  margin-bottom: calc(var(--spacing, 0.25rem) * 10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 0.125rem;
  --tw-border-style: dotted;
  border-style: dotted;
  border-color: #7D868E;
  padding-inline: calc(var(--spacing, 0.25rem) * 3);
  padding-block: calc(var(--spacing, 0.25rem) * 4);
  @media (width >= 40rem) {
    padding-inline: calc(var(--spacing, 0.25rem) * 6);
  }
}
.dialog-footer {
  margin-top: calc(var(--spacing, 0.25rem) * 4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing, 0.25rem) * 2);
  border-top-style: var(--tw-border-style);
  border-top-width: 0.125rem;
  --tw-border-style: dotted;
  border-style: dotted;
  border-color: #7D868E;
  padding-inline: calc(var(--spacing, 0.25rem) * 3);
  padding-block: calc(var(--spacing, 0.25rem) * 4);
  @media (width >= 40rem) {
    padding-inline: calc(var(--spacing, 0.25rem) * 6);
  }
  @media (width >= 48rem) {
    flex-wrap: nowrap;
  }
  @media (width >= 48rem) {
    justify-content: flex-end;
  }
}
.site-wrapper {
  display: flex;
  min-height: 100vh;
  max-width: 100%;
  flex-direction: column;
  overflow-x: hidden;
}
.site-header,
.site-footer {
  width: 100%;
  padding-inline: 2%;
  padding-block: calc(var(--spacing, 0.25rem) * 4);
}
.site-main {
  margin-inline: auto;
  box-sizing: border-box;
  min-height: 70vh;
  width: 100%;
  max-width: 1440px;
  padding-inline: calc(var(--spacing, 0.25rem) * 4);
  padding-block: calc(var(--spacing, 0.25rem) * 4);
  @media (width >= 40rem) {
    padding-inline: calc(var(--spacing, 0.25rem) * 6);
  }
  @media (width >= 64rem) {
    padding-inline: calc(var(--spacing, 0.25rem) * 8);
  }
}
main {
  display: flex;
  flex: 1;
  flex-direction: column;
  @media (width >= 48rem) {
    flex-direction: row;
  }
  @media (width >= 48rem) {
    align-items: stretch;
  }
}
.content {
  display: flex;
  min-height: 70vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-inline: calc(var(--spacing, 0.25rem) * 4);
  padding-block: calc(var(--spacing, 0.25rem) * 12);
  @media (width >= 40rem) {
    padding: calc(var(--spacing, 0.25rem) * 7);
  }
  @media (width >= 48rem) {
    width: calc(100% - 300px);
  }
}
.side-ads {
  display: flex;
  flex: 1;
  align-items: flex-start;
  justify-content: center;
  background-color: #F0F3F6;
  padding-block: calc(var(--spacing, 0.25rem) * 6);
  @media (width >= 48rem) {
    min-height: 100%;
  }
  @media (width >= 48rem) {
    width: 300px;
  }
}
footer {
  flex-shrink: 0;
}
#aside-menu {
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 0);
  left: calc(var(--spacing, 0.25rem) * 0);
  z-index: 20;
  display: flex;
  height: 100%;
  width: calc(var(--spacing, 0.25rem) * 12);
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  background-color: #EDF1F4;
  padding-inline: calc(var(--spacing, 0.25rem) * 2);
  padding-block: calc(var(--spacing, 0.25rem) * 7);
  --tw-shadow: inset 0 0 5px 0 var(--tw-shadow-color, rgb(0,0,0,0.25));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
  transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
}
#aside-overlay {
  position: fixed;
  top: calc(var(--spacing, 0.25rem) * 0);
  left: calc(var(--spacing, 0.25rem) * 0);
  z-index: 10;
  display: none;
  height: 100%;
  width: 100%;
  background-color: var(--color-white, #fff);
  opacity: 85%;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 500ms;
  transition-duration: 500ms;
  --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
  transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
}
header .btn .icon, header .btn-c .icon {
  font-size: 18px;
}
.footer__menu {
  margin-block: calc(var(--spacing, 0.25rem) * 7);
  padding-inline: calc(var(--spacing, 0.25rem) * 15);
  text-align: center;
  @media (width >= 40rem) {
    margin-block: calc(var(--spacing, 0.25rem) * 0);
  }
  @media (width >= 40rem) {
    padding-inline: calc(var(--spacing, 0.25rem) * 0);
  }
  @media (width >= 40rem) {
    text-align: left;
  }
}
.footer__menu a {
  margin-inline: calc(var(--spacing, 0.25rem) * 2);
  font-size: var(--text-xs, 0.75rem);
  line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  color: #5B646B;
  &:hover {
    @media (hover: hover) {
      color: #13191C;
    }
  }
}
.footer__social a {
  display: inline-block;
  padding-inline: calc(var(--spacing, 0.25rem) * 1);
  color: #13191C !important;
  &:hover {
    @media (hover: hover) {
      --tw-scale-x: 150%;
      --tw-scale-y: 150%;
      --tw-scale-z: 150%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
}
.flashcard {
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: var(--radius-lg, 0.5rem);
  background-color: var(--color-white, #fff);
  padding: calc(var(--spacing, 0.25rem) * 5);
  --tw-shadow: 0 2px 8px var(--tw-shadow-color, rgba(0,0,0,0.06)), 0 20px 60px var(--tw-shadow-color, rgba(0,0,0,0.10));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  @media (width >= 40rem) {
    border-radius: var(--radius-2xl, 1rem);
  }
}
.flashcard-wrap {
  width: 100%;
  max-width: 38rem;
  overflow: visible;
}
.flashcard-progress {
  margin-inline: auto;
  margin-bottom: calc(var(--spacing, 0.25rem) * 6);
  display: flex;
  width: fit-content;
  align-items: flex-end;
  border-radius: var(--radius-2xl, 1rem);
  background-color: color-mix(in oklab, #6F88A3 10%, transparent);
  padding-inline: calc(var(--spacing, 0.25rem) * 4);
  padding-block: calc(var(--spacing, 0.25rem) * 2);
}
.flashcard-content {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.flashcard-front-image {
  position: relative;
  margin-inline: auto;
  margin-bottom: calc(var(--spacing, 0.25rem) * 8);
  display: flex;
  height: calc(var(--spacing, 0.25rem) * 52);
  width: 17rem;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-md, 0.375rem);
  border-style: var(--tw-border-style);
  border-width: 0.5rem;
  --tw-border-style: solid;
  border-style: solid;
  border-color: #255F4E;
  background-color: #13191C;
}
.flashcard-front-image .info {
  position: absolute;
  bottom: calc(var(--spacing, 0.25rem) * 0);
  z-index: 20;
  width: 100%;
  background-color: #13191C;
  padding: calc(var(--spacing, 0.25rem) * 2);
  text-align: center;
  color: #FCCA46;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 250ms;
  transition-duration: 250ms;
  --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
  transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
  -webkit-user-select: none;
  user-select: none;
}
.flashcard-btns {
  margin-inline: auto;
  margin-top: calc(var(--spacing, 0.25rem) * 6);
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing, 0.25rem) * 2);
}
.flashcard-flip-card {
  background-color: transparent;
  perspective: 1000px;
}
.flashcard-flip-card-inner {
  position: relative;
  max-height: 90vh;
  min-height: 21.25rem;
  width: 100%;
  overflow: visible;
  border-radius: var(--radius-lg, 0.5rem);
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 600ms;
  transition-duration: 600ms;
  will-change: transform;
  transform-style: preserve-3d;
  &:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
  }
  &:focus-visible {
    outline-offset: 2px;
  }
  &:focus-visible {
    outline-color: #1a73e8;
  }
  @media (width >= 40rem) {
    border-radius: var(--radius-2xl, 1rem);
  }
}
.flashcard-flip-card-inner.is-flipped {
  transform: rotateY(180deg);
}
.flashcard[data-card=front], .flashcard[data-card=back] {
  position: absolute;
  inset: calc(var(--spacing, 0.25rem) * 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.flashcard[data-card=front] {
  transform: rotateY(0deg);
}
.flashcard[data-card=back] {
  transform: rotateY(180deg);
}
.flashcard[data-card] img, .flashcard[data-card] video, .flashcard[data-card] canvas, .flashcard[data-card] svg, .flashcard[data-card] .info {
  transform: translateZ(0);
  backface-visibility: hidden;
}
.quiz {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg, 0.5rem);
  background-color: var(--color-white, #fff);
  padding-inline: calc(var(--spacing, 0.25rem) * 2);
  padding-top: calc(var(--spacing, 0.25rem) * 5);
  --tw-shadow: 0 2px 8px var(--tw-shadow-color, rgba(0,0,0,0.06)), 0 20px 60px var(--tw-shadow-color, rgba(0,0,0,0.10));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  @media (width >= 40rem) {
    border-radius: var(--radius-2xl, 1rem);
  }
  @media (width >= 40rem) {
    padding-inline: calc(var(--spacing, 0.25rem) * 5);
  }
  @media (width >= 64rem) {
    padding-inline: calc(var(--spacing, 0.25rem) * 10);
  }
}
.quiz-wrap {
  margin-inline: auto;
  margin-block: calc(var(--spacing, 0.25rem) * 20);
  width: 100%;
  max-width: 45rem;
  overflow: visible;
}
.quiz-progress {
  margin-inline: auto;
  margin-bottom: calc(var(--spacing, 0.25rem) * 6);
  display: flex;
  width: fit-content;
  align-items: center;
  border-radius: var(--radius-3xl, 1.5rem);
  background-color: color-mix(in oklab, #6F88A3 10%, transparent);
  padding-inline: calc(var(--spacing, 0.25rem) * 4);
  padding-block: calc(var(--spacing, 0.25rem) * 2);
}
.quiz-content {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.question-wrap {
  --tw-leading: 3.75rem;
  line-height: 3.75rem;
}
.grammar {
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: var(--radius-lg, 0.5rem);
  background-color: var(--color-white, #fff);
  padding-inline: calc(var(--spacing, 0.25rem) * 2);
  padding-block: calc(var(--spacing, 0.25rem) * 5);
  --tw-shadow: 0 2px 8px var(--tw-shadow-color, rgba(0,0,0,0.06)), 0 20px 60px var(--tw-shadow-color, rgba(0,0,0,0.10));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  @media (width >= 40rem) {
    border-radius: var(--radius-2xl, 1rem);
  }
  @media (width >= 40rem) {
    padding-inline: calc(var(--spacing, 0.25rem) * 5);
  }
  @media (width >= 64rem) {
    padding-inline: calc(var(--spacing, 0.25rem) * 10);
  }
}
.grammar-wrap {
  margin-inline: auto;
  margin-block: calc(var(--spacing, 0.25rem) * 20);
  width: 100%;
  max-width: 45rem;
  overflow: visible;
}
.grammar-progress {
  margin-inline: auto;
  margin-bottom: calc(var(--spacing, 0.25rem) * 6);
  display: flex;
  width: fit-content;
  align-items: center;
  border-radius: var(--radius-3xl, 1.5rem);
  background-color: var(--color-white, #fff);
  padding-inline: calc(var(--spacing, 0.25rem) * 3);
  padding-block: calc(var(--spacing, 0.25rem) * 2);
}
.grammar-content {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.assignment {
  position: relative;
  display: flex;
  min-height: calc(var(--spacing, 0.25rem) * 75);
  width: 100%;
  flex-direction: column;
  border-radius: var(--radius-lg, 0.5rem);
  background-color: var(--color-white, #fff);
  padding: calc(var(--spacing, 0.25rem) * 5);
  --tw-shadow: 0 2px 8px var(--tw-shadow-color, rgba(0,0,0,0.06)), 0 20px 60px var(--tw-shadow-color, rgba(0,0,0,0.10));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  @media (width >= 40rem) {
    border-radius: var(--radius-2xl, 1rem);
  }
  @media (width >= 64rem) {
    padding-inline: calc(var(--spacing, 0.25rem) * 10);
  }
}
.assignment-wrap {
  margin-inline: auto;
  margin-block: calc(var(--spacing, 0.25rem) * 6);
  width: 100%;
  max-width: 45rem;
  overflow: visible;
  @media (width >= 48rem) {
    margin-block: calc(var(--spacing, 0.25rem) * 10);
  }
}
.assignment-progress {
  margin-inline: auto;
  margin-bottom: calc(var(--spacing, 0.25rem) * 6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: calc(var(--spacing, 0.25rem) * 3);
  border-radius: var(--radius-lg, 0.5rem);
  background-color: var(--color-white, #fff);
  padding-inline: calc(var(--spacing, 0.25rem) * 3);
  padding-block: calc(var(--spacing, 0.25rem) * 4);
  @media (width >= 40rem) {
    border-radius: var(--radius-3xl, 1.5rem);
  }
  @media (width >= 64rem) {
    flex-direction: row;
  }
  @media (width >= 64rem) {
    padding-block: calc(var(--spacing, 0.25rem) * 2);
  }
}
.assignment-progress .separator {
  display: none;
  height: calc(var(--spacing, 0.25rem) * 6);
  width: 0.0625rem;
  border-right-style: var(--tw-border-style);
  border-right-width: 1px;
  border-color: #6F88A3;
  @media (width >= 64rem) {
    display: flex;
  }
}
.assignment-content {
  position: relative;
  display: flex;
  height: 100%;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.listings-wrap {
  margin-top: calc(var(--spacing, 0.25rem) * 7);
  margin-bottom: calc(var(--spacing, 0.25rem) * 12);
  width: 100%;
}
.listings-msg {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  row-gap: calc(var(--spacing, 0.25rem) * 2);
  border-radius: var(--radius-lg, 0.5rem);
  background-color: color-mix(in oklab, #91C082 33%, transparent);
  padding-inline: calc(var(--spacing, 0.25rem) * 4);
  padding-block: calc(var(--spacing, 0.25rem) * 6);
  @media (width >= 40rem) {
    padding-inline: calc(var(--spacing, 0.25rem) * 0);
  }
  @media (width >= 64rem) {
    flex-direction: row;
  }
}
.listings-sidebar {
  display: flex;
  max-height: 40vh;
  width: 100%;
  flex-shrink: 0;
  flex-grow: 0;
  flex-direction: column;
  border-radius: var(--radius-lg, 0.5rem);
  background-color: #D7DEE0;
  padding: calc(var(--spacing, 0.25rem) * 6);
  @media (width >= 64rem) {
    max-height: none;
  }
  @media (width >= 64rem) {
    width: calc(1/3 * 100%);
  }
}
.listings-sidebar-items {
  margin-top: calc(var(--spacing, 0.25rem) * 3);
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow-y: auto;
  border-radius: var(--radius-lg, 0.5rem);
  background-color: #F0F3F6;
  padding: calc(var(--spacing, 0.25rem) * 4);
  @media (width >= 64rem) {
    overflow: visible;
  }
}
.listings-results {
  min-width: calc(var(--spacing, 0.25rem) * 0);
  flex: 1;
  padding-block: calc(var(--spacing, 0.25rem) * 6);
  counter-reset: listCounter;
}
.listings-results-inner {
  margin-bottom: calc(var(--spacing, 0.25rem) * 12);
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 0.125rem;
  --tw-border-style: dotted;
  border-style: dotted;
  border-color: #7D868E;
}
.listings-results-item {
  position: relative;
  display: flex;
  width: 100%;
  cursor: pointer;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--spacing, 0.25rem) * 1);
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-color: #D7DEE0;
  padding-block: calc(var(--spacing, 0.25rem) * 3);
  padding-right: calc(var(--spacing, 0.25rem) * 2);
  padding-left: calc(var(--spacing, 0.25rem) * 10);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
  transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
  @media (width >= 40rem) {
    flex-direction: row;
  }
  @media (width >= 40rem) {
    align-items: center;
  }
  @media (width >= 40rem) {
    padding-right: calc(var(--spacing, 0.25rem) * 7);
  }
  @media (width >= 40rem) {
    padding-left: calc(var(--spacing, 0.25rem) * 16);
  }
}
.listings-results-item-action {
  pointer-events: auto;
  display: grid;
  min-width: calc(var(--spacing, 0.25rem) * 48);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  opacity: 100%;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
  transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
  &:is(:where(.group):hover *) {
    @media (hover: hover) {
      opacity: 100%;
    }
  }
  &:is(:where(.group):focus *) {
    opacity: 100%;
  }
  @media (width >= 64rem) {
    opacity: 0%;
  }
}
.listings-results-item:hover {
  background-color: color-mix(in oklab, #EDF1F4 50%, transparent);
}
.listings-results-item:hover .listings-results-item-action {
  opacity: 100%;
}
@media (hover: hover) and (pointer: fine) {
  .listings-results-item.group:hover .listings-results-item-action, .listings-results-item.group:focus .listings-results-item-action {
    pointer-events: auto;
    opacity: 100%;
  }
}
@media (hover: none) and (pointer: coarse) {
  .listings-results-item.group .listings-results-item-action {
    pointer-events: auto;
    opacity: 100%;
  }
}
.listings-results-item.is-open .listings-results-item-action {
  pointer-events: auto;
  opacity: 100%;
}
.listings-results-item::before {
  pointer-events: none;
  position: absolute;
  top: calc(1/2 * 100%);
  left: calc(var(--spacing, 0.25rem) * 3);
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  font-size: var(--text-xs, 0.75rem);
  line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  --tw-leading: 1;
  line-height: 1;
  color: #3D7D5E;
  @media (width >= 40rem) {
    left: calc(var(--spacing, 0.25rem) * 6);
  }
  content: counter(listCounter, decimal-leading-zero) ".";
  counter-increment: listCounter;
}
.listings-results-item:last-of-type {
  --tw-border-style: none;
  border-style: none;
}
.multiple {
  position: relative;
  display: flex;
  min-height: calc(var(--spacing, 0.25rem) * 100);
  width: 100%;
  flex-direction: column;
  border-radius: var(--radius-lg, 0.5rem);
  background-color: var(--color-white, #fff);
  padding: calc(var(--spacing, 0.25rem) * 5);
  --tw-shadow: 0 2px 8px var(--tw-shadow-color, rgba(0,0,0,0.06)), 0 20px 60px var(--tw-shadow-color, rgba(0,0,0,0.10));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  @media (width >= 40rem) {
    border-radius: var(--radius-2xl, 1rem);
  }
  @media (width >= 64rem) {
    padding-inline: calc(var(--spacing, 0.25rem) * 10);
  }
}
.multiple-wrap {
  margin-inline: auto;
  margin-block: calc(var(--spacing, 0.25rem) * 6);
  width: 100%;
  max-width: 45rem;
  overflow: visible;
  @media (width >= 48rem) {
    margin-block: calc(var(--spacing, 0.25rem) * 10);
  }
}
.multiple-progress {
  margin-inline: auto;
  margin-bottom: calc(var(--spacing, 0.25rem) * 6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: calc(var(--spacing, 0.25rem) * 5);
  border-radius: var(--radius-lg, 0.5rem);
  background-color: color-mix(in oklab, #6F88A3 10%, transparent);
  padding-inline: calc(var(--spacing, 0.25rem) * 3);
  padding-block: calc(var(--spacing, 0.25rem) * 4);
  padding-bottom: calc(var(--spacing, 0.25rem) * 5);
  @media (width >= 40rem) {
    flex-wrap: nowrap;
  }
  @media (width >= 40rem) {
    border-radius: var(--radius-3xl, 1.5rem);
  }
  @media (width >= 40rem) {
    padding-bottom: calc(var(--spacing, 0.25rem) * 4);
  }
  @media (width >= 64rem) {
    padding-block: calc(var(--spacing, 0.25rem) * 2);
  }
}
.multiple-content {
  position: relative;
  display: flex;
  height: 100%;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.multiple .option {
  position: relative;
  display: flex;
  min-height: calc(var(--spacing, 0.25rem) * 12);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: #D7DEE0;
  padding: calc(var(--spacing, 0.25rem) * 2);
  padding-left: calc(var(--spacing, 0.25rem) * 8);
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  @media (width >= 40rem) {
    padding-left: calc(var(--spacing, 0.25rem) * 10);
  }
  @media (width >= 40rem) {
    font-size: var(--text-base, 1rem);
    line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  }
}
.multiple .option .num {
  pointer-events: none;
  position: absolute;
  top: calc(1/2 * 100%);
  left: calc(var(--spacing, 0.25rem) * 2);
  height: calc(var(--spacing, 0.25rem) * 4);
  width: calc(var(--spacing, 0.25rem) * 4);
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  border-radius: calc(infinity * 1px);
  background-color: var(--color-white, #fff);
  font-size: 0.625rem;
  --tw-leading: calc(var(--spacing, 0.25rem) * 4);
  line-height: calc(var(--spacing, 0.25rem) * 4);
  color: #13191C;
  @media (width >= 40rem) {
    height: calc(var(--spacing, 0.25rem) * 6);
  }
  @media (width >= 40rem) {
    width: calc(var(--spacing, 0.25rem) * 6);
  }
  @media (width >= 40rem) {
    font-size: var(--text-sm, 0.875rem);
    line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  }
  @media (width >= 40rem) {
    --tw-leading: calc(var(--spacing, 0.25rem) * 6);
    line-height: calc(var(--spacing, 0.25rem) * 6);
  }
}
.multiple .option.correct {
  background-color: #4ade80;
  animation: jumpAndBounce 0.3s ease-in-out;
}
.multiple .option.incorrect {
  background-color: #f87171;
  color: #fff;
  animation: shake 1s ease-in-out;
}
.multiple .option.highlighted {
  animation: tada 0.8s ease-in-out;
  border: 3px dashed #4ade80;
}
.multiple .option.highlighted .num {
  left: calc(0.75rem - 3px);
  top: calc(1rem - 3px);
}
@media (width >= 40rem) {
  .multiple .option.highlighted .num {
    left: calc(0.75rem - 3px);
    top: calc(0.75rem - 3px);
  }
}
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-8px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(8px);
  }
}
@keyframes tada {
  0% {
    z-index: 100;
    transform: scale(1);
  }
  10%, 20% {
    transform: scale(0.9) rotate(-3deg);
  }
  30%, 50%, 70%, 90% {
    transform: scale(1.1) rotate(3deg);
  }
  40%, 60%, 80% {
    transform: scale(1.1) rotate(-3deg);
  }
  100% {
    z-index: 0;
    transform: scale(1) rotate(0);
  }
}
@keyframes jumpAndBounce {
  0% {
    z-index: 100;
    transform: scale(1);
  }
  85% {
    transform: scale(1.2);
  }
  100% {
    z-index: 0;
    transform: scale(1);
  }
}
@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}
@keyframes slideInBounce {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  60% {
    opacity: 1;
    transform: translateX(-20px);
  }
  80% {
    transform: translateX(10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.student-wrap {
  margin-top: calc(var(--spacing, 0.25rem) * 7);
  margin-bottom: calc(var(--spacing, 0.25rem) * 12);
  width: 100%;
}
.student-msg {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  row-gap: calc(var(--spacing, 0.25rem) * 2);
  border-radius: var(--radius-lg, 0.5rem);
  background-color: color-mix(in oklab, #91C082 33%, transparent);
  padding-inline: calc(var(--spacing, 0.25rem) * 4);
  padding-block: calc(var(--spacing, 0.25rem) * 6);
  @media (width >= 40rem) {
    padding-inline: calc(var(--spacing, 0.25rem) * 0);
  }
  @media (width >= 64rem) {
    flex-direction: row;
  }
}
.student-msg__name {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
}
.student-msg__name p {
  text-align: center;
  @media (width >= 64rem) {
    text-align: right;
  }
}
.student-msg__name h1 {
  width: 100%;
  text-align: center;
  font-size: var(--text-lg, 1.125rem) !important;
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125))) !important;
  @media (width >= 64rem) {
    text-align: right;
  }
  @media (width >= 64rem) {
    font-size: var(--text-2xl, 1.5rem) !important;
    line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5))) !important;
  }
}
.student-sidebar {
  display: flex;
  max-height: 15em;
  width: 100%;
  flex-shrink: 0;
  flex-grow: 0;
  flex-direction: column;
  border-radius: var(--radius-lg, 0.5rem);
  background-color: #D7DEE0;
  padding: calc(var(--spacing, 0.25rem) * 6);
  @media (width >= 64rem) {
    max-height: none;
  }
  @media (width >= 64rem) {
    width: calc(1/3 * 100%);
  }
}
.student-sidebar-items-wrap {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow-y: auto;
  border-radius: var(--radius-lg, 0.5rem);
  @media (width >= 64rem) {
    overflow: visible;
  }
}
.student-sidebar-item {
  display: flex;
  align-items: center;
  border-radius: var(--radius-lg, 0.5rem);
  border-left-style: var(--tw-border-style);
  border-left-width: 0.5rem;
  background-color: var(--color-white, #fff);
  padding: calc(var(--spacing, 0.25rem) * 5);
  padding-left: calc(var(--spacing, 0.25rem) * 4);
}
.student-results {
  min-width: calc(var(--spacing, 0.25rem) * 0);
  flex: 1;
  padding-block: calc(var(--spacing, 0.25rem) * 6);
}
.student-results-inner {
  margin-bottom: calc(var(--spacing, 0.25rem) * 12);
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 0.125rem;
  --tw-border-style: dotted;
  border-style: dotted;
  border-color: #7D868E;
  counter-reset: listCounter;
}
.student-results-folder {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-color: #7D868E;
  padding-block: calc(var(--spacing, 0.25rem) * 3);
  padding-right: calc(var(--spacing, 0.25rem) * 2);
  padding-left: calc(var(--spacing, 0.25rem) * 12);
  @media (width >= 40rem) {
    padding-right: calc(var(--spacing, 0.25rem) * 7);
  }
  @media (width >= 40rem) {
    padding-left: calc(var(--spacing, 0.25rem) * 16);
  }
}
.student-results-folder::before {
  pointer-events: none;
  position: absolute;
  top: calc(1/2 * 100%);
  left: calc(var(--spacing, 0.25rem) * 3);
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  font-size: var(--text-2xl, 1.5rem);
  line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
  --tw-leading: 1;
  line-height: 1;
  --tw-font-weight: var(--font-weight-medium, 500);
  font-weight: var(--font-weight-medium, 500);
  color: #5B646B;
  @media (width >= 40rem) {
    left: calc(var(--spacing, 0.25rem) * 5);
  }
  font-family: "coqui" !important;
  content: "\e9a5";
}
.student-results-folder:hover {
  background-color: #F0F3F6;
}
.student-results-folder.is-active::before {
  content: "\e914";
}
.student-results-item {
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--spacing, 0.25rem) * 1);
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-color: #D7DEE0;
  padding-block: calc(var(--spacing, 0.25rem) * 3);
  padding-right: calc(var(--spacing, 0.25rem) * 2);
  padding-left: calc(var(--spacing, 0.25rem) * 10);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
  transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
  @media (width >= 40rem) {
    flex-direction: row;
  }
  @media (width >= 40rem) {
    align-items: center;
  }
  @media (width >= 40rem) {
    padding-right: calc(var(--spacing, 0.25rem) * 7);
  }
  @media (width >= 40rem) {
    padding-left: calc(var(--spacing, 0.25rem) * 16);
  }
}
.student-results-item-action {
  pointer-events: auto;
  display: grid;
  min-width: calc(var(--spacing, 0.25rem) * 48);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  opacity: 100%;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  --tw-ease: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
  transition-timing-function: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
  &:is(:where(.group):hover *) {
    @media (hover: hover) {
      opacity: 100%;
    }
  }
  &:is(:where(.group):focus *) {
    opacity: 100%;
  }
  @media (width >= 64rem) {
    opacity: 0%;
  }
}
.student-results-item:hover {
  background-color: color-mix(in oklab, #F0F3F6 50%, transparent);
}
.student-results-item:hover .student-results-item-action {
  opacity: 100%;
}
@media (hover: hover) and (pointer: fine) {
  .student-results-item.group:hover .student-results-item-action, .student-results-item.group:focus .student-results-item-action {
    pointer-events: auto;
    opacity: 100%;
  }
}
@media (hover: none) and (pointer: coarse) {
  .student-results-item.group .student-results-item-action {
    pointer-events: auto;
    opacity: 100%;
  }
}
.student-results-item.is-open .student-results-item-action {
  pointer-events: auto;
  opacity: 100%;
}
.student-results-item::before {
  pointer-events: none;
  position: absolute;
  top: calc(1/2 * 100%);
  left: calc(var(--spacing, 0.25rem) * 3);
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  --tw-leading: 1;
  line-height: 1;
  --tw-font-weight: var(--font-weight-medium, 500);
  font-weight: var(--font-weight-medium, 500);
  color: #5B646B;
  @media (width >= 40rem) {
    left: calc(var(--spacing, 0.25rem) * 6);
  }
  content: counter(listCounter, decimal-leading-zero);
  counter-increment: listCounter;
}
.student-results-item:last-of-type {
  --tw-border-style: none;
  border-style: none;
}
.student-results-item p {
  margin-left: calc(var(--spacing, 0.25rem) * 3);
  @media (width >= 40rem) {
    margin-left: calc(var(--spacing, 0.25rem) * 0);
  }
}
.student-results .empty-state {
  display: flex;
  width: 100%;
  align-items: center;
  padding-block: calc(var(--spacing, 0.25rem) * 3);
  padding-right: calc(var(--spacing, 0.25rem) * 2);
  padding-left: calc(var(--spacing, 0.25rem) * 5);
  @media (width >= 40rem) {
    padding-right: calc(var(--spacing, 0.25rem) * 7);
  }
}
.grades__no-content {
  margin-top: calc(var(--spacing, 0.25rem) * 6);
  display: flex;
  height: calc(var(--spacing, 0.25rem) * 55);
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl, 0.75rem);
  background-color: var(--color-white, #fff);
  padding: calc(var(--spacing, 0.25rem) * 7);
  --tw-shadow: 0 0 7px 0 var(--tw-shadow-color, rgba(0,0,0,0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  @media (width >= 64rem) {
    margin-top: calc(var(--spacing, 0.25rem) * 12);
  }
}
.grades__no-content p {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl, 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='10' ry='10' stroke='%2300000010' stroke-width='4' stroke-dasharray='5%2c 15' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}
.grades__container {
  margin-top: calc(var(--spacing, 0.25rem) * 6);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl, 0.75rem);
  background-color: var(--color-white, #fff);
  padding: calc(var(--spacing, 0.25rem) * 7);
  --tw-shadow: 0 0 7px 0 var(--tw-shadow-color, rgba(0,0,0,0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  @media (width >= 64rem) {
    margin-top: calc(var(--spacing, 0.25rem) * 12);
  }
}
.grades__list-container table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  text-align: left;
  @media (width >= 80rem) {
    table-layout: fixed;
  }
}
.grades__list-container table thead {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 0.125rem;
  --tw-border-style: dotted;
  border-style: dotted;
  border-color: #7D868E;
  background-color: color-mix(in oklab, #EDF1F4 50%, transparent);
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  text-transform: uppercase;
}
.grades__list-container table th {
  display: none;
  padding: calc(var(--spacing, 0.25rem) * 5);
  @media (width >= 40rem) {
    display: table-cell;
  }
}
.grades__list-container table td {
  display: block;
  padding: calc(var(--spacing, 0.25rem) * 2);
  text-align: center;
  @media (width >= 40rem) {
    display: table-cell;
  }
  @media (width >= 40rem) {
    padding: calc(var(--spacing, 0.25rem) * 5);
  }
  @media (width >= 40rem) {
    text-align: left;
  }
}
.grades__list-container table td button {
  margin: auto;
  @media (width >= 40rem) {
    margin: calc(var(--spacing, 0.25rem) * 0);
  }
}
.grades__list-container table tr {
  display: block;
  border-bottom-color: #C3CED1;
  padding-block: calc(var(--spacing, 0.25rem) * 5);
  &:not(*:last-child) {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  @media (width >= 40rem) {
    display: table-row;
  }
  @media (width >= 40rem) {
    padding-block: calc(var(--spacing, 0.25rem) * 0);
  }
}
.grades__tag-VR {
  margin-right: calc(var(--spacing, 0.25rem) * 3);
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: #6F88A3;
}
.grades__tag-GR {
  margin-right: calc(var(--spacing, 0.25rem) * 3);
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: #91C082;
}
.grades__tag-VC {
  margin-right: calc(var(--spacing, 0.25rem) * 3);
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: #850400;
}
.grades__tag-pill, .grades__listening, .grades__pronunciation, .grades__multiple-choice, .grades__tag-quiz, .grades__tag-flashcard, .grades__tag-assignment, .grades__tag-game, .grades__tag-graded-practice {
  display: block;
  width: 100%;
  border-radius: calc(infinity * 1px);
  padding-inline: calc(var(--spacing, 0.25rem) * 3);
  padding-block: calc(var(--spacing, 0.25rem) * 1);
  text-align: center;
  font-size: 0.625rem;
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
}
.grades__tag-graded-practice {
  background-color: color-mix(in oklab, #265E4D 10%, transparent);
  color: #265E4D;
}
.grades__tag-game {
  background-color: color-mix(in oklab, #850400 10%, transparent);
  color: #850400;
}
.grades__tag-assignment {
  background-color: color-mix(in oklab, #F7876E 10%, transparent);
  color: #DE322C;
}
.grades__tag-flashcard {
  background-color: color-mix(in oklab, #243C5A 10%, transparent);
  color: #243C5A;
}
.grades__tag-quiz {
  background-color: color-mix(in oklab, #2978B4 10%, transparent);
  color: #2978B4;
}
.grades__multiple-choice {
  background-color: color-mix(in oklab, #6F88A3 10%, transparent);
  color: #6F88A3;
}
.grades__pronunciation {
  background-color: color-mix(in oklab, #5B646B 10%, transparent);
  color: #5B646B;
}
.grades__listening {
  background-color: color-mix(in oklab, #233D4D 10%, transparent);
  color: #233D4D;
}
.landing-activities__filters {
  border-radius: var(--radius-xl, 0.75rem);
  background-color: #EDF1F4;
  padding: calc(var(--spacing, 0.25rem) * 7);
}
.landing-activities__filters-container {
  border-radius: var(--radius-xl, 0.75rem);
  background-color: var(--color-white, #fff);
  padding: calc(var(--spacing, 0.25rem) * 7);
}
.landing-activities__filters-item {
  position: relative;
  margin-block: calc(var(--spacing, 0.25rem) * 3);
  display: flex;
  justify-content: space-between;
  padding-inline: calc(var(--spacing, 0.25rem) * 4);
  padding-block: calc(var(--spacing, 0.25rem) * 2);
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
}
.landing-activities__filters-item:hover {
  border-radius: calc(infinity * 1px);
  background-color: #EDF1F4;
}
.landing-activities__filters-item.selected {
  border-radius: calc(infinity * 1px);
  background-color: #EDF1F4;
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: #233D4D;
}
.landing-activities__filters-item.selected:before {
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 0);
  left: calc(var(--spacing, 0.25rem) * -7);
  display: flex;
  height: calc(var(--spacing, 0.25rem) * 7);
  height: 100%;
  width: calc(var(--spacing, 0.25rem) * 2);
  background-color: #233D4D;
  --tw-content: "";
  content: var(--tw-content);
}
.landing-activities__content {
  min-height: calc(var(--spacing, 0.25rem) * 60);
  border-radius: var(--radius-xl, 0.75rem);
  padding: calc(var(--spacing, 0.25rem) * 7);
}
.landing-activities__content-assignments {
  background-color: color-mix(in oklab, #91C082 15%, transparent);
}
.landing-activities__content-assignments > .landing-activities__item:before {
  background-color: #91C082;
}
.landing-activities__content-assignments .landing-activities__item-icon {
  color: #91C082;
}
.landing-activities__content-assignments .progress-bar-val {
  background-color: #91C082;
}
.landing-activities__content-quizzes {
  background-color: color-mix(in oklab, #255F4E 10%, transparent);
}
.landing-activities__content-quizzes > .landing-activities__item:before {
  background-color: #255F4E;
}
.landing-activities__content-quizzes .landing-activities__item-icon {
  color: #255F4E;
}
.landing-activities__content-quizzes .progress-bar-val {
  background-color: #255F4E;
}
.landing-activities__item {
  position: relative;
  margin-bottom: calc(var(--spacing, 0.25rem) * 5);
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: var(--radius-xl, 0.75rem);
  background-color: var(--color-white, #fff);
  padding: calc(var(--spacing, 0.25rem) * 7);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.landing-activities__item:last-child {
  margin-bottom: calc(var(--spacing, 0.25rem) * 0);
}
.landing-activities__item-info-top p span {
  position: relative;
  color: #DE322C;
}
.landing-activities__item-info-top p span:before {
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 1);
  left: calc(var(--spacing, 0.25rem) * -3);
  display: flex;
  height: calc(var(--spacing, 0.25rem) * 2);
  width: calc(var(--spacing, 0.25rem) * 2);
  border-radius: calc(infinity * 1px);
  background-color: #DE322C;
  --tw-content: "";
  content: var(--tw-content);
}
.landing-activities__item.pastdue {
  background-color: color-mix(in srgb, #fff 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-white, #fff) 50%, transparent);
  }
}
.landing-activities__item-bt_dropdown {
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 7);
  right: calc(var(--spacing, 0.25rem) * 7);
}
.landing-activities__item:before {
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 0);
  left: calc(var(--spacing, 0.25rem) * 0);
  display: flex;
  height: 100%;
  width: calc(var(--spacing, 0.25rem) * 2);
  --tw-content: "";
  content: var(--tw-content);
}
.landing-activities__item-icon span {
  margin-right: calc(var(--spacing, 0.25rem) * 7);
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  @media (width >= 40rem) {
    font-size: var(--text-5xl, 3rem);
    line-height: var(--tw-leading, var(--text-5xl--line-height, 1));
  }
}
.landing-activities__item-info {
  flex-grow: 1;
}
.landing-activities__item-info-dropdown {
  margin-block: calc(var(--spacing, 0.25rem) * 5);
  display: flex;
  height: fit-content;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  @media (width >= 64rem) {
    margin-block: calc(var(--spacing, 0.25rem) * 3);
  }
  @media (width >= 64rem) {
    flex-direction: row;
  }
}
.landing-activities__item-info-dropdown-bar {
  box-sizing: content-box;
  width: 100%;
  border-right-style: var(--tw-border-style);
  border-right-width: 0;
  border-color: #255F4E;
  padding-inline: calc(var(--spacing, 0.25rem) * 0);
  padding-bottom: calc(var(--spacing, 0.25rem) * 3);
  @media (width >= 64rem) {
    width: calc(var(--spacing, 0.25rem) * 23);
  }
  @media (width >= 64rem) {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }
  @media (width >= 64rem) {
    padding-inline: calc(var(--spacing, 0.25rem) * 5);
  }
  @media (width >= 64rem) {
    padding-bottom: calc(var(--spacing, 0.25rem) * 0);
  }
}
.landing-activities__item-info-dropdown-bar:first-child {
  padding-left: calc(var(--spacing, 0.25rem) * 0);
}
.landing-activities__item-info-dropdown-bar p {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.landing-activities__item-info-bottom {
  margin-top: calc(var(--spacing, 0.25rem) * 2);
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  @media (width >= 64rem) {
    flex-direction: row;
  }
  @media (width >= 64rem) {
    align-items: center;
  }
}
.landing-activities__completed-table-wrap {
  width: 100%;
  counter-reset: rowNumber;
}
.landing-activities__completed-table-wrap thead {
  display: none;
  @media (width >= 40rem) {
    display: table-header-group;
  }
}
.landing-activities__completed-table-wrap tbody tr {
  display: block;
  padding-bottom: calc(var(--spacing, 0.25rem) * 3);
  @media (width >= 40rem) {
    display: table-row;
  }
  @media (width >= 40rem) {
    padding-bottom: calc(var(--spacing, 0.25rem) * 0);
  }
  counter-increment: rowNumber;
}
.landing-activities__completed-table-wrap tbody tr:not(:last-child) td:first-child::before {
  content: counter(rowNumber) ".";
  min-width: 1em;
  margin-right: 0.5em;
}
.landing-activities__completed-table-wrap tbody tr:last-child {
  border-bottom-right-radius: var(--radius-xl, 0.75rem);
  border-bottom-left-radius: var(--radius-xl, 0.75rem);
  border-top-style: var(--tw-border-style);
  border-top-width: 0;
  border-top-color: color-mix(in oklab, #13191C 20%, transparent);
  background-color: color-mix(in oklab, #F0F3F6 50%, transparent);
  @media (width >= 40rem) {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
}
.landing-activities__completed-table-wrap tbody td {
  display: block;
  text-align: center;
  @media (width >= 40rem) {
    display: table-cell;
  }
  @media (width >= 40rem) {
    text-align: left;
  }
}
.landing-activities__completed-table-wrap tbody td .flex {
  justify-content: center;
  @media (width >= 40rem) {
    justify-content: flex-start;
  }
}
.landing-activities__no-results {
  display: flex;
  height: calc(var(--spacing, 0.25rem) * 60);
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl, 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='10' ry='10' stroke='%2300000010' stroke-width='4' stroke-dasharray='5%2c 15' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}
.printables-wrap table.equal-cols,
.vocabulary-list table.equal-cols,
.verb-card table.equal-cols {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
}
.printables-wrap table.equal-cols th, .printables-wrap table.equal-cols td,
.vocabulary-list table.equal-cols th,
.vocabulary-list table.equal-cols td,
.verb-card table.equal-cols th,
.verb-card table.equal-cols td {
  padding-inline: calc(var(--spacing, 0.25rem) * 1);
  padding-block: calc(var(--spacing, 0.25rem) * 1.5);
  font-size: var(--text-xs, 0.75rem);
  line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  --tw-leading: calc(var(--spacing, 0.25rem) * 4);
  line-height: calc(var(--spacing, 0.25rem) * 4);
  overflow-wrap: break-word;
  @media (width >= 40rem) {
    font-size: var(--text-sm, 0.875rem);
    line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  }
}
.printables-wrap table.equal-cols th .cell-cont, .printables-wrap table.equal-cols td .cell-cont,
.vocabulary-list table.equal-cols th .cell-cont,
.vocabulary-list table.equal-cols td .cell-cont,
.verb-card table.equal-cols th .cell-cont,
.verb-card table.equal-cols td .cell-cont {
  display: flex;
  min-height: calc(var(--spacing, 0.25rem) * 12);
  align-items: center;
}
.printables-wrap table.equal-cols th,
.vocabulary-list table.equal-cols th,
.verb-card table.equal-cols th {
  text-align: left;
  font-size: var(--text-base, 1rem);
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
}
.printables-wrap table.equal-cols th.center,
.vocabulary-list table.equal-cols th.center,
.verb-card table.equal-cols th.center {
  text-align: center;
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
}
.table-wrap {
  width: 100%;
  overflow-x: auto;
  padding: calc(var(--spacing, 0.25rem) * 2.5);
}
.verb-card {
  border-radius: var(--radius-lg, 0.5rem);
  background-color: var(--color-white, #fff);
  padding-inline: calc(var(--spacing, 0.25rem) * 2);
  padding-top: calc(var(--spacing, 0.25rem) * 4);
  padding-bottom: calc(var(--spacing, 0.25rem) * 8);
  --tw-shadow: 0 0 12px 0 var(--tw-shadow-color, rgba(0,0,0,0.33));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  @media (width >= 40rem) {
    border-radius: var(--radius-2xl, 1rem);
  }
  @media (width >= 40rem) {
    padding-inline: calc(var(--spacing, 0.25rem) * 8);
  }
}
.verb-card .table-title {
  margin-bottom: calc(var(--spacing, 0.25rem) * 6);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 0.125rem;
  --tw-border-style: dotted;
  border-style: dotted;
  border-color: #7D868E;
  padding-bottom: calc(var(--spacing, 0.25rem) * 4);
}
.verb-card .cell-r-arrow {
  position: relative;
}
.verb-card .cell-r-arrow::after {
  position: absolute;
  top: calc(1/2 * 100%);
  right: calc(var(--spacing, 0.25rem) * -1);
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  font-size: 8px;
  font-family: "coqui";
  content: "\e952";
}
.btn-favorite {
  display: flex;
  height: calc(var(--spacing, 0.25rem) * 8);
  min-width: calc(var(--spacing, 0.25rem) * 8);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  background-color: transparent;
}
.btn-favorite:hover {
  background-color: #EDF1F4;
}
.btn-favorite svg {
  width: calc(var(--spacing, 0.25rem) * 4);
}
.btn-favorite svg polygon {
  fill: #FFFFFF;
  stroke: #13191C;
  stroke-width: 0.25rem;
}
.btn-favorite.active svg polygon {
  fill: gold;
  stroke: gold;
}
@media print {
  .no-print {
    display: none !important;
  }
}
.question-wrap {
  display: block;
  align-items: center;
  margin-bottom: 15px;
}
.answer-wrapp {
  display: inline-block;
  margin-bottom: 15px;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(1rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-border-style: solid;
      --tw-outline-style: solid;
      --tw-content: "";
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
    }
  }
}