* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
}
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
button {
  border: none;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;

  background: rgba(255, 255, 255, 0);

  /* inherit font & color from ancestor */
  color: inherit;
  font: inherit;

  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
  line-height: normal;

  /* Corrects font smoothing for webkit */
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;

  /* Corrects inability to style clickable `input` types in iOS */
  -webkit-appearance: none;

  outline: none;
}

* {
  -webkit-tap-highlight-color: transparent;
}
:root {
  /* Colors */
  --purple: #ac5adc;
  --mid-purple: #6356c1;
  --dark-purple: #514cb0;
  --darkest-purple: #2e1e8d;
  --lavender: #9b41d0;
  --red: #b44131;
  --orange: #fea26f;
  --green: #31b436;
  --light-green: #b7e978;
  --lighter-green: #d8f1b9;
  --grey: rgba(255, 255, 255, 0.6);
  --grey-mid: #a8a8b1;
  --grey-dark: #686464;
  --yellow: #fae151;
  --light-yellow: #fceea3;
  --pink: #f5a1d1;
  --violet: #dea8ff;
  --blue: #9fb6f9;
  --light-blue: #bacbfc;

  --neutral: rgba(63, 81, 181, 0.12);
  --neutral-dark: rgba(63, 81, 181, 0.24);
  --accent: #3f51b5;
  --text-main: #000000;
  --accent-bright: #ef82d3;
  --accent-dark: #8772f4;

  --purple-gradient: linear-gradient(92.28deg, #8772f4 1.91%, #ef82d3 98.64%);

  /* Fonts */
  --font-regular-size: 16px;
  --font-regular-line-height: 27px;
  --font-regular: var(--font-regular-size) / var(--font-regular-line-height);
  --font-regular-mulish: var(--font-regular) "Mulish";
}

html * {
  font-family: "Martel", "pt-sans-regular", sans-serif;
  color: var(--text-main);
}

button,
.button {
  font-family: "Mulish";
  font-weight: 600;
  font-size: 18px;
  line-height: 23px;
  color: var(--text-main);
}

p,
li,
.paragraph,
.text,
.router-link {
  font-family: "Martel";
  font-weight: 400;
  font-size: 18px;
  line-height: 32px;
  color: var(--text-main);
}

strong,
.bold {
  font-weight: 700;
}

em {
  font-style: italic;
}

h2,
.h2 {
  font-family: "Martel";
  font-weight: 400;
  font-size: 24px;
  line-height: 36px;
}

h1,
.h1 {
  font-family: "Martel";
  font-weight: 800;
  font-size: 30px;
  line-height: 40px;
}

blockquote,
.blockquote,
blockquote *,
.blockquote *,
.accent,
.accent * {
  font-family: "Mulish";
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: var(--accent);
}

.compact-text {
  font-family: "Mulish";
  font-weight: 400;
  font-size: 16px;
  line-height: 25px;
  color: var(--text-main);
}

@keyframes slide-down-appearance {
  from {
    transform: translateY(-2rem);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slide-down {
  from {
    transform: translateY(-2rem);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slide-up {
  from {
    transform: translateY(2rem);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.25rem) scale(1.02);
  }
  100% {
    transform: translateY(0);
  }
}

html * {
  box-sizing: border-box;
}

html,
body {
  height: 100%;

  background: #fafafa;
  background-size: 100%;

  -ms-scroll-chaining: none;

      overscroll-behavior: none;
}

#root {
  height: 100%;
}
.button {
  background: none;
  border-radius: 5px;
  border: 1px solid #d3d3d3;
  cursor: pointer;
  font-size: 16px;
  text-align: center;
  color: #424242;
  outline: none;
  padding: 10px;
  height: 40px;
}

.button:disabled {
  cursor: default;
  opacity: 0.5;
}

.checkbox {
  width: 20px;
  height: 20px;
  border: 1px solid #d3d3d3;
  flex-shrink: 0;
  border-radius: 2px;
  font-size: 14px;
  padding: unset;
}

.checkbox.checked {
  color: #424242;
}

.text {
  display: block;
  color: #424242;
}

.text.capitalized::first-letter {
  text-transform: capitalize;
}

.text.bold {
  font-weight: bold;
}

.text.multiline { 
  white-space: pre-wrap;
}
.checkbox-with-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.checkbox-with-label__label {
  margin-left: 5px;
  line-height: 20px;
  font-size: 14px;
  white-space: pre-wrap;
}

.checkbox-with-label.disabled {
  cursor: default;
}

.checkbox-with-label.disabled > .checkbox-with-label__label {
  opacity: 0.5;
}
.column {
  display: flex;
  flex-direction: column;
}

.scrollbar__track {
  position: absolute;
  border: none;
  border-radius: 3px;
}

.scrollbar__track.horizontal {
  width: 100%;
  height: 6px;
  right: 0px;
  bottom: 0px;
}

.scrollbar__track.vertical {
  width: 6px;
  height: 100%;
  top: 0px;
  right: 0px;
}

.scrollbar__thumb {
  border-radius: inherit;
  background: #bdcad0;
}

.content-height-scrollbar__content-wrap {
  display: flex;
  flex-direction: column;
}
.dash-loader ::after,
.dash-loader ::before {
  box-sizing: border-box;
}

.dash-loader {
  position: relative;
  display: block;
  height: 32px;
  width: 32px;
  animation: dash-loader-1 3s linear infinite;
}
@keyframes dash-loader-1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.dash-loader span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  height: inherit;
  width: inherit;
  clip: rect(16px, 32px, 32px, 0);
  animation: dash-loader-2 1.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
@keyframes dash-loader-2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.dash-loader span::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  height: inherit;
  width: inherit;
  border: 3px solid transparent;
  border-top: 3px solid #424242;
  border-radius: 50%;
  animation: dash-loader-3 1.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
@keyframes dash-loader-3 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.dash-loader span::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  height: inherit;
  width: inherit;
  border: 3px solid rgba(66, 66, 66, 0.5);
  border-radius: 50%;
}

.dropdown {
  position: relative;
}
.dropdown.error {
  border-color: #d22c75;
  box-shadow: 0 0 6px 0#d22c75;
}

.dropdown__title,
.dropdown__item {
  position: relative;
  width: 100%;
  height: 40px;
  text-align: left;
  font-size: 16px;
  padding: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dropdown__title {
  border-radius: 5px;
  padding-right: 30px;
}

.dropdown__item {
  border: unset;
  border-radius: unset;
  border-top: 1px solid #d3d3d3;
}

.dropdown.open > .dropdown__title {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.dropdown__title:disabled {
  background-color: unset;
  opacity: 0.5;
}

.dropdown__title:before {
  content: "";
  position: absolute;
  right: 15px;
  top: calc(50% - 2.5px);
  display: block;
  border: 5px solid transparent;
  border-top: 5px solid #424242;
}

.dropdown.open > .dropdown__title:before {
  top: unset;
  bottom: calc(50% - 2.5px);
  border: 5px solid transparent;
  border-bottom: 5px solid #424242;
}

.dropdown__content-wrap {
  position: absolute;
  width: 100%;
  max-height: 140px;
}

.dropdown__scrollbar {
  max-height: inherit;
  background-color: #fff;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 1px solid #d3d3d3;
  border-top: unset;
  z-index: 1;
}

.dropdown__scrollbar > .scrollbar__track.horizontal {
  visibility: hidden;
}

.dropdown__item:hover {
  background-color: #eceff1;
}

.external-link {
  color: #42a5f5;
  outline: none;
  cursor: pointer;
  text-decoration: underline;
}
.input {
  border-radius: 5px;
  border: 1px solid #d3d3d3;
  outline: none;
  padding: 10px;
  color: #424242;
  font-size: 16px;
  height: 40px;
}

.input:focus {
  border: 1px solid #b0bec5;
  box-shadow: 0 0 6px 0 #b0bec5;
}

.input.error {
  border: 1px solid #d22c75;
  box-shadow: 0 0 6px 0#d22c75;
}

.input:-ms-input-placeholder {
  color: #bdcad0;
}

.input::placeholder {
  color: #bdcad0;
}

.input:disabled {
  background-color: transparent;
  opacity: 0.5;
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100%;
  background-color: rgba(88, 106, 141, 0.9);
}

.modal__wrap {
  width: -webkit-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: fit-content;
  min-width: 30%;
  background-color: #fff;
  border-radius: 4px;
  position: relative;
}

.modal__header {
  display: flex;
  padding: 20px 20px 10px 20px;
  justify-content: center;
  border-radius: 4px 4px 0 0;
}

.modal__header__header-text {
  font-size: 18px;
  text-align: center;
}

.modal__header__close-button {
  font-weight: bold;
  position: absolute;
  top: 3px;
  right: 8px;
  font-size: 22px;
  font-weight: bold;
  width: unset;
  padding: unset;
  border: unset;
}

.modal__content {
  padding: 20px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.modal__content.with-header {
  padding: 10px 20px 20px 20px;
  min-height: calc(100% - 52px);
}
.radio {
  width: 20px;
  height: 20px;
  border: 1px solid #d3d3d3;
  border-radius: 100%;
  flex-shrink: 0;
  padding: 4px;
}

.radio.selected {
  background-color: #424242;
  background-clip: content-box;
}

.radio-with-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.radio-with-label__label {
  margin-left: 5px;
  line-height: 20px;
  font-size: 14px;
  white-space: pre-wrap;
}

.radio-with-label.disabled {
  cursor: default;
}

.radio-with-label.disabled > .radio-with-label__label {
  opacity: 0.5;
}
.router-link > a,
.router-link > a:focus,
.router-link > a:hover,
.router-link > a:active {
  outline: none;
}
.router-link {
  color: #424242;
}

.row {
  display: flex;
  flex-direction: row;
}

.teardrop-loader {
  position: relative;
  height: 32px;
  width: 32px;
}
.teardrop-loader span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  height: inherit;
  width: inherit;
}
.teardrop-loader span::before,
.teardrop-loader span::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  height: inherit;
  width: inherit;
  border: 2px solid #424242;
  border-radius: 50%;
  opacity: 0;
  animation: teardrop-loader-1 1.5s cubic-bezier(0.075, 0.82, 0.165, 1) infinite;
}
@keyframes teardrop-loader-1 {
  0% {
    transform: translate3d(0, 0, 0) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1.5);
    opacity: 0;
  }
}
.teardrop-loader span::after {
  animation: teardrop-loader-2 1.5s cubic-bezier(0.075, 0.82, 0.165, 1) 0.25s
    infinite;
}
@keyframes teardrop-loader-2 {
  0% {
    transform: translate3d(0, 0, 0) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0;
  }
}
.textarea {
  outline: none;
  cursor: text;
  resize: none;
  padding: 10px;
  overflow: hidden;
  border: solid 1px #d3d3d3;
  border-radius: 5px;
  color: #424242;
  font-size: 16px;
  line-height: 21px;
}

.textarea:focus {
  border: 1px solid #b0bec5;
  box-shadow: 0 0 6px 0 #b0bec5;
}
.column,
.row {
  height: -webkit-fit-content;
  height: fit-content;
}

.scrollbar__track.hidden {
  display: none;
}
.scrollbar__thumb {
  background-color: #dfdfdf;
}

.teardrop-loader > span::before,
.teardrop-loader > span::after {
  border-color: var(--purple)
}

.dash-loader span::before {
  border-top: 3px solid var(--purple);
}

.dash-loader span::after {
  border: 3px solid #3f51b57a;
}

/* Слабо-прозрачный фон */
.modal {
  background: rgba(31, 26, 49, 0.9);
}

.modal__wrap {
  border-radius: 12px;
}

/* В случае если браузер поддерживает блюр - добавляем фону блюр и делаем его чуть более прозрачным */
@supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
  .modal {
    background: rgba(118, 95, 211, 0.32);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
  }
}

/* hot-fix верстки выпадающего списка */
.dropdown__item:first-child {
  border-top: none;
}
html * {
  font-family: "Martel", "pt-sans-regular", sans-serif;
  color: var(--text-main);
}

button,
.button {
  font-family: "Mulish";
  font-weight: 600;
  font-size: 18px;
  line-height: 23px;
  color: var(--text-main);
}

p,
li,
.paragraph,
.text,
.router-link {
  font-family: "Martel";
  font-weight: 400;
  font-size: 18px;
  line-height: 32px;
  color: var(--text-main);
}

strong,
.bold {
  font-weight: 700;
}

em {
  font-style: italic;
}

h2,
.h2 {
  font-family: "Martel";
  font-weight: 400;
  font-size: 24px;
  line-height: 36px;
}

h1,
.h1 {
  font-family: "Martel";
  font-weight: 800;
  font-size: 30px;
  line-height: 40px;
}

blockquote,
.blockquote,
blockquote *,
.blockquote *,
.accent,
.accent * {
  font-family: "Mulish";
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: var(--accent);
}

.compact-text {
  font-family: "Mulish";
  font-weight: 400;
  font-size: 16px;
  line-height: 25px;
  color: var(--text-main);
}

.cat-image-5 {
  object-fit: contain;
}
.rounded-button {
  border: none;
  border-radius: 30px;
  line-height: 100%;
}

.rounded-button:active {
  transform: scale(0.98);
}
.accent-button {
  background: var(--yellow);
  border: 1px solid #000000;
}
.error-boundary {
  width: 100%;
  max-width: 600px;
  margin: auto;
  padding: 1.25rem;
  align-items: center;
  gap: 2rem;
}

.error-boundary__title {
  font-family: 'Mulish';
  font-weight: 900;
  text-align: center;
  font-size: 1.5rem;
}

.error-boundary__cat-image {
  width: 7rem;
  height: 7rem;
}

.error-boundary__subtitle {
  font: var(--font-regular-mulish);
  font-weight: 600;
  text-align: center;
}

.error-boundary__content {
  max-width: 100%;
  align-items: flex-start;
  gap: 1rem;
}

.error-boundary__details {
  max-width: 100%;
  gap: 0.5rem;
  align-items: flex-start;
}

.error-boundary__details__title {
  max-width: 100%;
  font: var(--font-regular-mulish);
  text-align: left;
  font-weight: 900;
  word-break: break-word;
}

.error-boundary__details__text {
  max-width: 100%;
  font-family: 'Mulish';
  font-size: 0.75rem;
  line-height: 1rem;
  text-align: left;
  word-break: break-word;
}

.error-boundary__reload-button {
  width: 100%;
  max-width: 350px;
  height: 50px;
}
.centered-teardrop-loader {
  width: 100%;
  height: 100%;
}

.centered-teardrop-loader__loader {
  margin: auto;
}
.desktop-header-title {
  font-family: "Jost";
  font-weight: 600;
  font-size: 30px;
  line-height: 43px;
  text-decoration: none;
  pointer-events: auto;
}

.desktop-header-title.disabled {
  pointer-events: none;
}

@media screen and (max-width: 1368px) {
  .desktop-header-title {
    font-size: 24px;
    line-height: 36px;
  }
}

.desktop-header-navigation {
  justify-content: end;
}

.desktop-header-navigation__link {
  margin-left: 30px;
  font-weight: 900;
  font-size: 1rem;
  line-height: 1.5rem;
  text-decoration: none;
  padding: 10px 16px 2px;
}

.desktop-header-navigation__link:hover {
  background-color: var(--lighter-green);
}

.desktop-header-navigation__link.active {
  background-color: var(--light-green);
}

@media screen and (max-width: 1368px) {
  .desktop-header-navigation__link {
    padding: 10px 12px 2px;
  }
}

@media screen and (max-width: 1024px) {
  .desktop-header-navigation__link {
    font-size: 0.875rem;
    padding: 8px 10px 2px;
  }
}

@media screen and (max-width: 768px) {
  .desktop-header-navigation {
    display: none;
  }
}
.desktop-header > .desktop-header-navigation {
  margin-left: auto;
}

.back-button {
  width: 22px;
  height: 22px;
  padding: unset;
  border: none;
  flex-shrink: 0;
}

.back-button__icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  flex-shrink: 0;
}

.back-button__icon > * {
  color: #333333;
}
.mobile-header-back-button.hidden {
  visibility: hidden;
}

.bookmark-button {
  border: unset;
  padding: unset;
  width: 16px;
  height: 19px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  justify-content: center;
}

.bookmark-button__icon {
  width: 100%;
  height: 100%;
}

.bookmark-button__icon.active > * {
  color: var(--yellow);
}

.bookmark-button__icon.inactive > * {
  color: rgba(255, 255, 255, 0.5);
}
.mobile-header-title {
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.mobile-header-title__link {
  font-family: "Jost";
  font-weight: 600;
  font-size: 21px;
  line-height: 32px;
  text-align: center;
  pointer-events: initial;
  text-decoration: none;
  margin: auto;
  padding: 0;
  border: none;
}

.mobile-header-title__link.disabled {
  pointer-events: none;
}

.mobile-header__course-bookmark-button {
  width: 25px;
  height: 25px;
  margin-left: auto;
}

.header {
  position: relative;
  width: 100%;
  max-width: 920px;
  align-items: center;
  flex-shrink: 0;
}
.header.desktop-header {
  display: none;
  height: 90px;
  padding-top: 20px;
  padding-bottom: 10px;
}

.header.mobile-header {
  display: flex;
  height: 55px;
  padding-top: 15px;
  padding-bottom: 10px;
}

@media screen and (min-width: 768px) {
  .header.desktop-header {
    display: flex;
  }

  .header.mobile-header {
    display: none;
  }
}
.neutral-input {
  width: 100%;
  height: 52px;
  padding: 14px 18px;
  background: #f4f4f4;
  border-radius: 7px;
  border: none;
  font-family: 'Mulish';
  font-size: 16px;
  line-height: 24px;
}

.neutral-input:-ms-input-placeholder {
  color: #7e7e7e;
}

.neutral-input::placeholder {
  color: #7e7e7e;
}

.neutral-input:focus {
  border: unset;
  box-shadow: unset;
}
.checkbox {
  width: 20px;
  height: 20px;
  border: 1px solid #d3d3d3;
  flex-shrink: 0;
  border-radius: 2px;
  font-size: 14px;
  line-height: 14px;
  padding: unset;
}

.checkbox.checked {
  color: #424242;
}

.checkbox-with-label {
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
}

.checkbox-with-label > .checkbox-with-label__label {
  font: var(--font-regular-mulish);
}

.info-text {
  margin-top: 10px;
  font-family: 'Mulish';
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}

.info-text.error {
  color: var(--red);
}

.info-text.success {
  color: var(--green);
}
.external-link {
  background: transparent;
  font-weight: unset;
}
.manage-subscription-button {
  color: var(--purple);
  font-size: 18px;
  font-family: "Mulish";
  font-weight: 700;
  line-height: 24px;
  padding: unset;
  border: unset;
}
.subscription-offer-banner {
  width: 100%;
  max-width: 350px;
  padding: 13px 16px 9px;
  border-radius: 10px;
  border: 1px solid black;
  background: #3c4252;
}

.subscription-offer-banner__info-wrap {
  width: 100%;
  align-items: center;
  justify-items: flex-start;
}

.subscription-offer-banner__image {
  object-fit: contain;
  width: 34px;
  height: 41px;
  flex-shrink: 0;
  margin-right: 14px;
}

.subscription-offer-banner__text {
  color: white;
  font-family: 'Mulish';
  font-size: 16px;
  font-weight: 700;
  line-height: 21px
}

.subscription-offer-banner__highlighted-text {
  color: var(--yellow)
}

.subscription-offer-banner__subscribe-button {
  margin-top: 9px;
  width: 100%;
  max-width: 350px;
  height: 60px;
}

@media screen and (min-width: 768px) {
  .subscription-offer-banner {
    padding: 18px 21px 14px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width: unset;
  }

  .subscription-offer-banner__subscribe-button {
    margin: unset;
  }
}
.active-subscription-info__title {
  margin-bottom: 3px;
}

.active-subscription-info__label {
  font-family: "Mulish";
  font-size: 13px;
  line-height: 26px;
  color: #7e7e7e;
}
.active-subscription-info__subscription-status__value {
  font-family: "Mulish";
  font-size: 13px;
  line-height: 26px;
}

.active-subscription-info__subscription-status-wrap {
  justify-content: space-between;
  align-items: center;
}

.active-subscription-info__manage-subscription-button {
  margin: 16px auto;
}

.active-subscription-info__subscription-offer-banner {
  margin: 20px auto 0px;
}

.support-button {
  padding: unset;
  border: none;
  height: -webkit-fit-content;
  height: fit-content;
  font-size: 18px;
  line-height: 28px;
  display: flex;
  align-items: center;
  color: var(--accent);
}

.support-button__icon {
  object-fit: contain;
  width: 28px;
  height: 28px;
  margin-right: 9px;
}

.logout-button {
  padding: unset;
  border: none;
  height: -webkit-fit-content;
  height: fit-content;
  font-size: 18px;
  line-height: 28px;
  display: flex;
  align-items: center;
  color: #7d7d7d;
}

.legal-info {
  align-items: center;
  gap: 10px;
}

.legal-info__link {
  font-family: "Mulish";
  font-size: 14px;
  line-height: 18px;
  text-decoration: none;
  color: var(--purple);
}

.legal-info__additional-legal-info {
  font-family: 'Mulish';
  font-size: 12px;
  line-height: 16px;
  color: var(--grey-dark);
}
.translation-language-label {
  align-items: center;
  gap: 0.5rem;
}

.translation-language-label__text {
  font: var(--font-regular-mulish);
}

.translation-language-label__icon {
  height: 0.75rem;
}
.translation-language-dropdown {
  border-radius: 7px;
}

.translation-language-dropdown__item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #f4f4f4;
  box-sizing: border-box;
  height: 52px;
  padding: 14px 18px;
}
.translation-language-dropdown__item {
  border-radius: inherit;
  padding-right: 30px;
}

.translation-language-dropdown > .dropdown__content-wrap > .dropdown__scrollbar {
  background-color: #f4f4f4;
  z-index: 0;
}
.delete-account-button {
  padding: unset;
  border: none;
  height: -webkit-fit-content;
  height: fit-content;
  font-size: 14px;
  line-height: 18px;
  display: flex;
  align-items: center;
  color: var(--red);
}

.enable-notifications-button {
  padding: unset;
  border: none;
  height: -webkit-fit-content;
  height: fit-content;
  font-size: 18px;
  line-height: 28px;
  display: flex;
  align-items: center;
  color: var(--accent);
}
.enable-debug-mode-button {
  width: 4rem;
  height: 2rem;
  right: 0;
  bottom: 0;
  position: absolute;
}

.enable-debug-mode-button.enabled {
  background-color: var(--green);
  opacity: 0.5;
}
.course-tag-badge {
  display: flex;
  padding: 0.125rem 0.5rem;
  border: 2px solid var(--neutral-dark);
  border-radius: 0.5rem;
  height: -webkit-fit-content;
  height: fit-content;
  background-color: white;

  pointer-events: none;
  cursor: default;
}

.course-tag-badge.clickable {
  pointer-events: all;
  cursor: pointer;
}

.course-tag-badge.selected {
  border-color: var(--purple);
}

.course-tag-badge__text {
  font-family: 'Mulish';
  font-size: 1rem;
  line-height: 1.5rem;
  text-align: center;
}

.course-tag-badge.selected > .course-tag-badge__text {
  color: var(--purple);
}
.course-tag-list-button {
  display: flex;
  flex-direction: row;

  min-height: 3.5rem;
  height: -webkit-fit-content;
  height: fit-content;
  padding: 0.5rem 18px;
  background: #f4f4f4;
  border-radius: 7px;
  border: none;

  gap: 0.5rem;
  align-items: center;
}

.course-tag-list-button__tag-list {
  flex-wrap: wrap;
  gap: 0.25rem;
  row-gap: 0.25rem;
}

.course-tag-list-button__empty-text {
  font-family: "Mulish";
  font-size: 1rem;
  line-height: 1.5rem;
}

.course-tag-list-button__arrow-icon {
  width: 0.375rem;
  height: 0.675rem;
  margin-left: auto;
  flex-shrink: 0;
}

.course-tag-list-button__arrow-icon * {
  color: var(--grey-dark);
}

.profile-page {
  gap: 0.75rem;
}

.profile-page__label {
  font-size: 13px;
  color: #7e7e7e;
}

.profile-page__input,
.profile-page__translation-language-dropdown,
.profile-page__email-input,
.profile-page__password-input,
.profile-page__translate-ui-checkbox,
.profile-page__course-tag-list-button {
  margin-top: 4px;
  margin-bottom: 9px;
}

.profile-page__input:disabled,
.profile-page__email-input:disabled,
.profile-page__password-input:disabled {
  background-color: #f4f4f4;
  opacity: unset;
  color: #7e7e7e;
}
.profile-page__translation-language-dropdown > .dropdown__title:disabled {
  background-color: #f4f4f4;
  opacity: unset;
  border-color: #e3e3e3;
}
.profile-page__translation-language-dropdown > .dropdown__title:disabled .translation-language-label__text {
  color: #7e7e7e;
}
.profile-page__translation-language-dropdown > .dropdown__title:disabled .translation-language-label__icon {
  opacity: 0.5;
}

.profile-page__translate-ui-checkbox {
  gap: 0.5rem;
}

.profile-page__translate-ui-checkbox > .checkbox-with-label__checkbox {
  border-width: 2px;
}

.profile-page__translate-ui-checkbox > .checkbox-with-label__checkbox.checked {
  border-color: var(--purple);
  color: var(--purple);
}

.profile-page__translate-ui-checkbox > .checkbox-with-label__label {
  font-size: 13px;
  color: #7e7e7e;
  margin-left: unset;
}

.profile-page__save-button {
  width: 100%;
  height: 60px;
  max-width: 350px;
  margin: 16px auto 0px;
  background-color: var(--violet);
}

.profile-page__loader {
  margin: 0px auto;
}

.profile-page__password-input-label__wrap {
  justify-content: space-between;
}

.profile-page__change-password-button {
  height: unset;
  padding: unset;
  border: unset;
  font-family: "Mulish";
  font-size: 13px;
  line-height: 24px;
  color: var(--purple);
}

.profile-page__support-button,
.profile-page__enable-notifications-button,
.profile-page__logout-button,
.profile-page__delete-account-button {
  margin: 16px auto 0px;
}

.profile-page__legal-info {
  margin: 32px auto 0px;
}
.cat-image-1 {
  object-fit: contain;
}
.payment-success-page {
  height: 100%;
  max-width: 600px;
  margin: 0px auto;
}

.payment-success-page__title {
  margin: 0px auto 50px;
}

.payment-success-page__password {
  margin-top: 10px;
}

.payment-success-page__image {
  width: 100%;
  max-width: 250px;
  margin: auto auto 10px;
}

.payment-success-page__text {
  margin-top: 30px;
}

.payment-success-page__continue-button {
  width: 100%;
  height: 60px;
  max-width: 350px;
  margin: 10px auto 0px;
}
.sticky-footer-overlay__visibility-anchor {
  height: 1px;
  width: 100%;
  flex-shrink: 0;
}

.sticky-footer-overlay {
  width: 100%;
  align-items: center;
  position: -webkit-sticky;
  position: sticky;
  bottom: 0px;
  pointer-events: none; /* Allow clicking through the gradient part of the sticky footer */
}

.sticky-footer-overlay__scroll-gradient {
  width: calc(100% + 12px); /* Adding 6px of width on each side, to avoid any element borders from overflowing under the gradient */
  background: linear-gradient(
    180deg,
    rgba(250, 250, 250, 0) 0%,
    rgba(250, 250, 250, 0.80) 70%
  );
  margin-bottom: -2px;
  transition: height 0.2s linear;
}

.sticky-footer-overlay__content-background {
  width: calc(100% + 12px); /* Adding 6px of width on each side, to avoid any element borders from overflowing under the background */
  background-color: #fafafa;
  align-items: center;
}

.sticky-footer-overlay__content-wrap {
  width: calc(100% - 12px); /* Reverting additional padding added in the parent wrapper, to avoid affecting footer content */
  padding: 5px 0px 15px;
  align-items: center;
  pointer-events: auto; /* Re-enable pointer events for the footer content */
}

.sticky-footer-overlay__content-wrap.empty {
  padding: unset;
}
.green-checkbox {
  border: 3px solid var(--neutral-dark);
  border-radius: 0.25rem;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1rem;
  line-height: 1rem;
  font-weight: 600;
}

.green-checkbox.checked {
  border-color: var(--green);
  color: var(--green);
}
.vocabulary-practice-header {
  top: 0;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 15px;

  /* Simulating visibility of a standard mobile header. I'm sorry for this crutch. */
  position: -webkit-sticky;
  position: sticky;
  height: 55px;
  padding-top: 15px;
  margin-top: -15px;
  background-color: #fafafa;
  z-index: 1;
}

.vocabulary-practice-header__title {
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
  font-family: "Jost";
  font-weight: 600;
  font-size: 21px;
  line-height: 32px;
  text-align: center;
}

.vocabulary-practice-header__progress {
  align-items: center;
  gap: 0.25rem;
}

.vocabulary-practice-header__progress__text {
  font-size: 1rem;
  line-height: 1rem;
  font-family: 'Mulish';
  color: var(--grey-dark);
}

.vocabulary-practice-header__progress__checkbox {
  border-width: 2px;
  width: 1rem;
  height: 1rem;
  cursor: default;
  font-size: 0.75rem;
  line-height: 0.75rem;
}

@media screen and (min-width: 768px) {
  .vocabulary-practice-header {
    padding-top: 20px;
    margin-top: -20px;
  }
}
.daily-review-card-feedback-controls {
  width: 100%;
  max-width: 350px;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}

.daily-review-card-feedback-controls__control {
  width: 100%;
  align-items: center;
  gap: 0.25rem;
}

.daily-review-card-feedback-controls__control__interval-text {
  font-size: 12px;
  line-height: 16px;
  font-family: 'Mulish';
  color: var(--grey-dark);
}

.daily-review-card-feedback-controls__control__button {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.daily-review-card-feedback-controls__remember-button > .daily-review-card-feedback-controls__control__button {
  background-color: var(--light-green);
}

.daily-review-card-feedback-controls__wrong-button > .daily-review-card-feedback-controls__control__button {
  background-color: var(--orange);
}

.daily-review-card-feedback-controls__right-button > .daily-review-card-feedback-controls__control__button {
  background-color: var(--light-green);
}
.dictionary-entry-audio__button {
  display: flex;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.5rem;
  border: none;
  padding: 0;
  align-items: center;
  justify-content: center;
  background-color: var(--accent-dark);
}

.dictionary-entry-audio__icon {
  width: 1rem;
  height: 1rem;
}

.dictionary-entry-audio__icon * {
  color: white;
}
.dictionary-entry-header {
  justify-content: center;
  width: 100%;
  gap: 1rem;
}

.dictionary-entry-header__word {
  width: 100%;
  font-family: 'Mulish';
  font-size: 2rem;
  line-height: 2rem;
  font-weight: 700;
  color: var(--lavender);
  text-align: center;
}

.dictionary-entry-header__transcript-wrap {
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.dictionary-entry-header__transcript {
  font-family: 'Mulish';
  font-size: 1rem;
  line-height: 1.75rem;
  font-weight: 700;
  text-align: center;
}
.dictionary-entry-definition {
  gap: 1rem;
}

.dictionary-entry-definition__definition {
  font-family: 'Mulish';
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: 700;
  text-align: center;
  color: var(--grey-dark);
}

.dictionary-entry-definition__hr {
  height: 1px;
  background-color: #EFF2F4;
}
.markdown-youtube-player {
  width: 640px;
  aspect-ratio: 16 / 9;
}
.markdown {
  display: flex;
  flex-direction: column;
}

.markdown * {
  margin: revert;
  padding: revert;
  border: revert;
  vertical-align: revert;
  outline: revert;
}

.markdown ol,
.markdown ul {
  list-style: revert;
}

.markdown blockquote {
  margin: unset;
}

.markdown > * {
  margin: 12px 0px;
}

.markdown > *:first-child {
  margin-top: 0;
}

.markdown > *:last-child {
  margin-bottom: 0;
}

.markdown img,
.markdown video,
.markdown .markdown-youtube-player {
  object-fit: scale-down;
  max-width: 100%;
  display: flex;
  margin: auto;
}

.markdown a {
  color: var(--accent);
}

.markdown .external-link {
  padding: unset;
  border: unset;
  color: var(--accent);
}
.dictionary-entry-example-list {
  gap: 0.5rem;
  align-items: flex-start;
}

.dictionary-entry-example-list__title {
  font-family: 'Mulish';
  font-size: 1rem;
  line-height: 1.75rem;
  font-weight: 700;
}

.dictionary-entry-example-list__ul {
  list-style-type: disc;
  padding-left: 1.25rem;
}

.dictionary-entry-example-list__item {
  font-size: 0.875rem;
  line-height: 1.5rem;
}

.dictionary-entry-example-list__item__content * {
  font-family: 'Mulish';
  font-size: 0.875rem;
  line-height: 1rem;
  font-weight: 400;
}

.dictionary-entry-example-list__item__content strong {
  font-weight: 900;
  color: var(--lavender);
}
.dictionary-entry-synonym-list {
  gap: 0.5rem;
  align-items: flex-start;
}

.dictionary-entry-synonym-list__title {
  font-family: 'Mulish';
  font-size: 1rem;
  line-height: 1.75rem;
  font-weight: 700;
}

.dictionary-entry-synonym-list__ul {
  list-style-type: disc;
  padding-left: 1.25rem;
}

.dictionary-entry-synonym-list__item {
  font-size: 0.875rem;
  line-height: 1.5rem;
}

.dictionary-entry-synonym-list__item__content * {
  font-family: 'Mulish';
  font-size: 0.875rem;
  line-height: 1rem;
  font-weight: 400;
}
.dictionary-entry-translation {
  align-items: flex-start;
}

.dictionary-entry-translation__text {
  font: var(--font-regular-mulish);
}

.dictionary-entry-translation__sentence-container {
  position: relative;
  cursor: pointer;
}
.dictionary-entry-translation__sentence-container.disabled {
  cursor: default;
}

.dictionary-entry-translation__sentence {
  width: 100%;
  text-align: left;
  filter: blur(0px);

  transition: 250ms filter linear;
}
.dictionary-entry-translation__sentence.blurred {
  filter: blur(0.25rem);
}

.dictionary-entry-translation__sentence * {
  font-family: 'Mulish';
  font-size: 0.875rem;
  line-height: 1rem;
  font-weight: 400;
  font-style: italic;
  color: var(--grey-dark);;
}

.dictionary-entry-translation__sentence strong {
  font-weight: 900;
  color: var(--lavender);
}

.dictionary-entry-translation__loader {
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: calc(50% - 0.5rem);
  left: calc(50% - 0.5rem);
}

.dictionary-entry-translation__loader > span {
  clip: rect(0.5rem, 1rem, 1rem, 0)
}

.dictionary-entry-translation__error {
  align-self: left;
}
.dictionary-entry-example {
  gap: 0.75rem;
}

.dictionary-entry-example__sentence * {
  font-family: 'Mulish';
  font-size: 0.875rem;
  line-height: 1rem;
  font-weight: 400;
}

.dictionary-entry-example__sentence strong {
  font-weight: 900;
  color: var(--lavender);
}
.generic-dictionary-entry-card {
  width: 100%;
  gap: 1.25rem;
}
.daily-review-card-screen__word-card {
  width: 100%;
  max-width: 350px;
}

.dictionary-entry-card__loader-wrap {
  height: 300px;
}

.dictionary-entry-card__loader {
  margin: auto;
}
.daily-review-card-screen {
  height: 100%;
  align-items: center;
}

.daily-review-card-screen__header {
  margin-bottom: 1.25rem;
}

.daily-review-card-screen__loader {
  margin: auto;
}

.daily-review-card-screen__word-card {
  margin: 0 0.25rem;
  background-color: white;
  border-radius: 1.25rem;
  padding: 2rem 1.5rem; 
}

.daily-review-card-screen__footer {
  margin-top: auto;
}
.five-star-rating {
  align-items: center;
  gap: 0.25rem;
}

.five-star-rating__star {
  font-family: "Mulish";
  font-size: 1.5rem;
  line-height: 1.75rem;
  opacity: 0.2;
}

.five-star-rating__star.achieved {
  opacity: 1;
  position: relative;
}
.five-star-rating__star.achieved::before {
  position: absolute;
  content: "⭐️";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.75rem;
  color: gold;
  filter: blur(0.5rem);
  opacity: 0.7;
}

.five-star-rating.animated > .five-star-rating__star.achieved {
  opacity: 0.2;
  animation: star-float 500ms infinite, star-appearance 300ms forwards;
}

.five-star-rating.animated > .five-star-rating__star.achieved::before {
  opacity: 0.2;
  animation: star-shimmer 2000ms infinite, star-shimmer-appearance 300ms forwards;
}

.five-star-rating__star._1 {
  animation-delay: 0ms !important;
}
.five-star-rating__star._2 {
  animation-delay: 250ms !important;
}
.five-star-rating__star._3 {
  animation-delay: 500ms !important;
}
.five-star-rating__star._4 {
  animation-delay: 750ms !important;
}
.five-star-rating__star._5 {
  animation-delay: 1000ms !important;
}

.five-star-rating.animated.full-rating {
  animation: full-rating-float 3000ms infinite 1250ms;
}

@keyframes star-appearance {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}

@keyframes star-float {
  0% {
    transform: rotate(0) scale(1);
  }
  25% {
    transform: rotate(1deg) scale(1.02);
  }
  75% {
    transform: rotate(-1deg) scale(0.98);
  }
  100% {
    transform: rotate(0) scale(1);
  }
}

@keyframes star-shimmer-appearance {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.7;
  }
}

@keyframes star-shimmer {
  0% {
    filter: blur(0.5rem);
    opacity: 0.7;
  }
  50% {
    filter: blur(0.75rem);
    opacity: 0.9;
  }
  100% {
    filter: blur(0.5rem);
    opacity: 0.7;
  }
}

@keyframes full-rating-float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px) scale(1.1);
  }
  100% {
    transform: translateY(0);
  }
}
.confetti-fly-out-animation {
  position: absolute;
  object-fit: contain;
  width: 100%;

  animation: confetti-zoom 750ms, confetti-slide 750ms;
  visibility: hidden;
}

@keyframes confetti-zoom {
  0% {
    width: 30%;
  }
  70% {
    width: 100%;
  }
  100% {
    width: 110%;
  }
}

@keyframes confetti-slide {
  0% {
    visibility: visible;
    top: 10%;
  }
  50% {
    top: 40%;
  }
  100% {
    top: -300px;
  }
}
.vocabulary-practice-statistics-card {
  align-items: center;

  animation: slide-down-appearance 500ms;
}

.vocabulary-practice-statistics-card__value {
  font-family: 'Mulish';
  font-size: 3rem;
  line-height: 3.5rem;
  font-weight: 900;
  color: var(--lavender);
}

.vocabulary-practice-statistics-card__comment {
  font-family: 'Mulish';
  font-size: 1.25rem;
  line-height: 1.75rem;
  text-align: center;
  font-weight: 600;
}

.vocabulary-practice-closing-screen {
  height: 100%;
  width: 100%;
  max-width: 350px;
  align-items: center;
  align-self: center;
  gap: 2rem;
  position: relative;
  overflow: visible;
}

.vocabulary-practice-closing-screen__title {
  animation: slide-down-appearance 500ms;
  margin-top: 1rem;
}

.vocabulary-practice-closing-screen__title * {
  font-family: "Mulish";
  font-size: 1.5rem;
  line-height: 1.75rem;
  text-align: center;
  margin: 0;
}

.vocabulary-practice-closing-screen__content {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: space-evenly;
}

.vocabulary-practice-closing-screen__rating {
  animation: slide-down-appearance 500ms;
  align-items: center;
  gap: 1.25rem;
}

.vocabulary-practice-closing-screen__rating__summary-text * {
  font-family: "Mulish";
  font-size: 1.75rem;
  line-height: 2rem;
  text-align: center;
}

.vocabulary-practice-closing-screen__continue-button {
  width: 100%;
  height: 45px;
  flex-shrink: 0;
  margin-top: auto;

  animation: slide-down-appearance 500ms;
}


.cat-image-8 {
  object-fit: contain;
}
.placeholder-cover {
  position: relative;
  overflow: hidden;
  border: solid 1px black;
}

.placeholder-cover__cat-image {
  position: absolute;
}

.placeholder-cover.variant-1 {
  background: linear-gradient(
    180deg,
    var(--violet) 0%,
    var(--blue) 70%
  ) !important;
}

.placeholder-cover.variant-1 > .placeholder-cover__cat-image {
  width: 160%;
  bottom: -4rem;
  left: -1rem;
  transform: rotate(-45deg);
}

.placeholder-cover.variant-2 {
  background: linear-gradient(
    180deg,
    var(--light-green) 0%,
    var(--light-yellow) 70%
  ) !important;
}

.placeholder-cover.variant-2 > .placeholder-cover__cat-image {
  width: 200%;
  bottom: -4rem;
  left: -5rem;
  transform: rotate(15deg);
}

.placeholder-cover.variant-3 {
  background: linear-gradient(
    180deg,
    var(--orange) 0%,
    var(--pink) 70%
  ) !important;
}

.placeholder-cover.variant-3 > .placeholder-cover__cat-image {
  width: 180%;
  bottom: -4rem;
  left: 0rem;
  transform: rotate(-70deg);
}

.placeholder-cover.variant-4 {
  background: linear-gradient(
    180deg,
    var(--light-yellow) 0%,
    var(--light-blue) 70%
  ) !important;
}

.placeholder-cover.variant-4 > .placeholder-cover__cat-image {
  width: 150%;
  top: 0rem;
  left: 1rem;
  transform: rotate(-130deg);
}

.placeholder-cover.variant-5 {
  background: linear-gradient(
    180deg,
    var(--orange) 0%,
    var(--light-green) 70%
  ) !important;
}

.placeholder-cover.variant-5 > .placeholder-cover__cat-image {
  width: 220%;
  top: 0rem;
  left: -5rem;
  transform: rotate(-15deg);
}

.course-cover {
  width: 130px;
  height: 130px;
  flex-shrink: 0;
  position: relative;
}

.course-cover__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1px;

  box-shadow: -0.125rem 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.25);
  background-color: rgba(0, 0, 0, 0.25);
}

.course-cover__bookmark-button {
  position: absolute;
  left: 0.5rem;
  top: -0.2rem;
  width: 1rem;
  object-fit: contain;
}
.progress-bar {
  width: 100%;
  height: 5px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.progress-bar__track,
.progress-bar__thumb {
  position: absolute;
  height: 100%;
  border-radius: inherit;
}

.progress-bar__track {
  width: 100%;
  background: var(--neutral);
}

.progress-bar__thumb {
  background: var(--purple);
  position: relative;

  transition: width ease-in-out 250ms;
}

.progress-bar.with-growth-glow.growth-glowing .progress-bar__thumb::after {
  position: absolute;
  height: 100%;
  width: 0.75rem;
  content: '';
  right: 0;
  background: linear-gradient(
    90deg,
    rgba(250, 250, 250, 0) 0%,
    var(--accent-dark) 70%
  );
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;

  animation: glow-fade forwards 450ms, glow infinite 450ms;
}

@keyframes glow-fade {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes glow {
  0% {
    box-shadow: 2px 0 8px 1px var(--accent-dark);
  }
  50% {
    box-shadow: 2px 0 8px 2px var(--accent-dark);
  }
  100% {
    box-shadow: 2px 0 8px 1px var(--accent-dark);
  }
}
.daily-reading-course-card {
  align-items: flex-start;
  gap: 0.5rem;
}

.daily-reading-course-card__cover-wrap {
  align-items: center;
  gap: 0.5rem;
}

.daily-reading-course-card__cover-wrap__cover {
  width: 4.5rem;
  height: -webkit-fit-content;
  height: fit-content;
}

.daily-reading-course-card__info {
  gap: 0.25rem;
}

.daily-reading-course-card__info__recommendation-type {
  font-family: 'Mulish';
  font-size: 14px;
  line-height: 14px;
  font-weight: 600;
  color: var(--grey-dark);
  margin-bottom: 0.75rem;
}

.daily-reading-course-card__info__name {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;

  /* Ограничиваем длину текста 3 строками, и все что не поместилось заменяем на "..." */
  line-clamp: 3;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

.daily-reading-course-card__info__author {
  font-family: 'Mulish';
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;

  /* Ограничиваем длину текста 1 строкой, и все что не поместилось заменяем на "..." */
  line-clamp: 1;
  -webkit-line-clamp: 1;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
}
.course-cta-button {
  width: 100%;
  height: 45px;
  max-width: 350px;
  flex-shrink: 0;
}
.daily-review-reading-nudge-screen {
  height: 100%;
  align-items: center;
}

.daily-review-reading-nudge-screen__loader {
  margin: auto;
}

.daily-review-reading-nudge-screen__cat-image {
  width: 120px;
  position: absolute;
  left: -55px;
  top: 50px;
  transform: rotate(20deg);
}

.daily-review-reading-nudge-screen__content {
  width: 100%;
  max-width: 350px;
  margin: auto;
  align-items: center;
  gap: 2rem;
}

.daily-review-reading-nudge-screen__content__title {
  font-family: "Mulish";
  font-size: 1.5rem;
  line-height: 2rem;
  text-align: center;
}

.daily-review-reading-nudge-screen__content__description {
  font-size: 1rem;
  line-height: 1.25rem;
  font-family: "Mulish";
  font-weight: 600;
  text-align: center;
  color: var(--grey-dark);
}

.daily-review-reading-nudge-screen__read-button {
  margin-top: auto;
}

.daily-review-reading-nudge-screen__back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 350px;
  margin-top: 0.75rem;
  font-size: 1rem;
  line-height: 1.25rem;
  border: none;
  padding: 0;
  height: -webkit-fit-content;
  height: fit-content;
}

@media screen and (min-width: 768px) {
  .daily-review-reading-nudge-screen__cat-image {
    display: none;
  }
}

.vocabulary-daily-review-page {
  width: 100%;
  height: 100%;
}

.vocabulary-daily-review-page__loader {
  margin: auto;
}
.vocabulary-empty {
  margin: auto;
  align-items: center;
  gap: 30px;
}

.vocabulary-empty__image {
  height: 80px;
}

.vocabulary-empty__text {
  font: var(--font-regular-mulish);
  text-align: center;
}
.vocabulary-entry-count {
  gap: 20px;
  align-items: center;
}

.vocabulary-entry-count__text {
  font-size: 0.75rem;
  line-height: 1.25rem;
  font-family: "Mulish";
  color: #7d7d7d;
}

.vocabulary-entry-count__loader {
  width: 20px;
  height: 20px;
}
.vocabulary-entry-count__loader span {
  clip: rect(10px, 20px, 20px, 0);
}

.vocabulary-entry {
  width: 100%;
  align-items: center;
  gap: 20px;
  background: white;
  padding: 8px 20px;
}

.vocabulary-entry__text-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: -webkit-fit-content;
  height: fit-content;
  gap: 5px;
  border: none;
  padding: unset;
}

.vocabulary-entry__word {
  font-size: 20px;
  line-height: 27px;
  font-family: 'Mulish';
  text-align: left;
}

.vocabulary-entry__sentence {
  text-align: start;
}
.vocabulary-entry__sentence * {
  font-size: 12px;
  line-height: 16px;
  font-family: 'Mulish';
}

.vocabulary-entry__remove-button {
  border: none;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.vocabulary-entry__remove-button__icon {
  width: 11px;
  height: 11px;
  object-fit: contain;
}

@media screen and (min-width: 768px) {
  .vocabulary-entry__sentence * {
    font-size: 14px;
    line-height: 18px;
    font-family: 'Mulish';
  }
}
.vocabulary-page {
  width: 100%;
  height: 100%;
}

.vocabulary-page__primary-loader {
  margin: auto;
}

.vocabulary-page__header {
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.vocabulary-page__header__add-new-entry-button {
  display: flex;
  align-items: center;
  height: 2rem;
  padding: 10px 15px;
  font: var(--font-regular-mulish);
}

.vocabulary-page__content {
  height: 100%;
  gap: 10px;
}

.vocabulary-page__entry-list {
  gap: 5px;
}

.vocabulary-page__entry-list::before,
.vocabulary-page__entry-list::after {
  position: -webkit-sticky;
  position: sticky;
  content: "";
  display: flex;
  width: 100%;
  height: 10px;
}
.vocabulary-page__entry-list::before {
  top: 0;
  margin-bottom: -5px;
  background: linear-gradient(0deg, rgba(250, 250, 250, 0) 0%, #fafafa 70%);
}
.vocabulary-page__entry-list::after {
  bottom: 0;
  margin-top: -5px;
  background: linear-gradient(180deg, rgba(250, 250, 250, 0) 0%, #fafafa 70%);
}

.vocabulary-page__footer {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.vocabulary-page__footer__practice-vocabulary-button {
  width: 100%;
  max-width: 320px;
  height: 50px;
}

@media screen and (min-width: 768px) {
  .vocabulary-page__content {
    gap: 20px;
  }

  .vocabulary-page__entry-list {
    gap: 10px;
  }

  .vocabulary-page__entry-list::before {
    margin-bottom: -10px;
  }
  .vocabulary-page__entry-list::after {
    margin-top: -10px;
  }
}

.neutral-button {
  color: black;
  background: #FAFAFA;
  border: 1px solid #000000;
}

.enable-trial-period-reminder-page {
  height: 100%;
  width: 100%;
  max-width: 350px;
  align-items: center;
  margin: auto;
  padding-top: 2rem;
}

.enable-trial-period-reminder-page__title {
  font-size: 1.5rem;
  line-height: 2.25rem;
  text-align: center;
  font-family: 'Martel';
}

.enable-trial-period-reminder-page__subtitle {
  margin-top: 0.5rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  text-align: center;
  font-family: 'Mulish';
}

.enable-trial-period-reminder-page__image {
  margin-top: 3rem;
  object-fit: contain;
  min-height: 200px;
  max-width: 300px;
  width: 100%;
}

.enable-trial-period-reminder-page__text {
  margin-top: 2rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  text-align: center;
  font-family: 'Mulish';
}

.enable-trial-period-reminder-page__text strong {
  font-family: 'Mulish';
  color: var(--purple);
}

.enable-trial-period-reminder-page__footer {
  width: 100%;
  margin-top: auto;
  gap: 1rem;
}

.enable-trial-period-reminder-page__button {
  height: 50px;
}
.enable-daily-reminders-page {
  height: 100%;
  width: 100%;
  max-width: 350px;
  align-items: center;
  margin: auto;
  padding-top: 2rem;
}

.enable-daily-reminders-page__title {
  font-size: 1.5rem;
  line-height: 2.25rem;
  text-align: center;
  font-family: 'Martel';
}

.enable-daily-reminders-page__image {
  margin-top: 3rem;
  object-fit: contain;
  min-height: 200px;
  max-width: 300px;
  width: 100%;
}

.enable-daily-reminders-page__text {
  margin-top: 2rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  text-align: center;
  font-family: 'Mulish';
}

.enable-daily-reminders-page__text strong {
  font-family: 'Mulish';
  color: var(--purple);
}

.enable-daily-reminders-page__footer {
  width: 100%;
  margin-top: auto;
  gap: 1rem;
}

.enable-daily-reminders-page__button {
  height: 50px;
}

.neutral-radio-with-label > .radio-with-label__radio {
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid black;
  padding: 3px;
  background-clip: content-box;
}

.neutral-radio-with-label > .radio-with-label__radio.selected {
  background-color: var(--light-green);
}

.neutral-radio-with-label > .radio-with-label__label {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 27px;
  color: black;
}
.expandable-answer-option {
  padding: 0.75rem;
  border: 1px solid var(--neutral-dark);
  border-radius: 0.75rem;
}

.expandable-answer-option.expanded.correct {
  border-color: var(--green);
}

.expandable-answer-option.expanded.incorrect {
  border-color: var(--red);
}

.expandable-answer-option__comment {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--neutral-dark);
}

.expandable-answer-option__comment * {
  font-family: "Mulish";
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: left;
}
.match-word-definition-question-screen {
  padding-bottom: 2rem;
}

.match-word-definition-question-screen__info {
  font-size: 1rem;
  line-height: 1.5rem;
  font-family: "Mulish";
}

.match-word-definition-question-screen__sentence {
  margin: 2rem 0rem 1.25rem;
  background-color: var(--mid-purple);
  border-radius: 1.25rem;
  padding: 1.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-family: "Mulish";
  text-align: center;
  color: white;
  font-weight: 500;
}

.match-word-definition-question-screen__definition * {
  font-family: "Mulish";
  font-size: 1rem;
  line-height: 1.5rem;
  text-align: center;
}

.match-word-definition-question-screen__option-list {
  margin-top: 1.25rem;
  gap: 0.75rem;
}

.match-word-definition-question-screen__option-list__option__radio {
  height: 1.75rem;
}

.match-word-definition-question-screen__option-list__option__radio
  > .radio-with-label__label {
  font-size: 1.5rem;
  line-height: 1.5rem;
  margin-left: 0.75rem;
}

.match-word-definition-question-screen__option-list__option__radio
  > .radio-with-label__radio:disabled,
.match-word-definition-question-screen__option-list__option__radio.disabled
  > .radio-with-label__label {
  opacity: unset;
}

.match-word-definition-question-screen__option-list__option.expanded.correct
  .radio-with-label__radio {
  border-color: var(--green);
}

.match-word-definition-question-screen__option-list__option.expanded.incorrect
  .radio-with-label__radio {
  border-color: var(--red);
}

.match-word-definition-question-screen__option-list__option.expanded.correct
  .radio-with-label__radio.selected {
  background-color: var(--green);
}

.match-word-definition-question-screen__option-list__option.expanded.incorrect
  .radio-with-label__radio.selected {
  background-color: var(--red);
}

.select-word-synonyms-question-screen {
  height: 100%;
}

.select-word-synonyms-question-screen__info {
  font-size: 1rem;
  line-height: 1.5rem;
  font-family: "Mulish";
}

.select-word-synonyms-question-screen__sentence {
  margin: 2rem 0rem 1.25rem;
  background-color: var(--mid-purple);
  border-radius: 1.25rem;
  padding: 1.5rem 1rem;
}

.select-word-synonyms-question-screen__sentence * {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-family: "Mulish";
  text-align: center;
  color: white;
  font-weight: 500;
}

.select-word-synonyms-question-screen__sentence strong {
  font-weight: 900;
  text-decoration: underline;
}

.select-word-synonyms-question-screen__option-list {
  margin-top: 1.25rem;
  gap: 0.75rem;
}

.select-word-synonyms-question-screen__option-list__option__checkbox {
  height: 1.75rem;
  gap: 0;
}

.select-word-synonyms-question-screen__option-list__option__checkbox
  > .checkbox-with-label__checkbox {
  border-color: black;
  font-weight: 600;
}

.select-word-synonyms-question-screen__option-list__option__checkbox
  > .checkbox-with-label__label {
  font-size: 1.5rem;
  line-height: 1.5rem;
  margin-left: 0.75rem;
}

.select-word-synonyms-question-screen__option-list__option__checkbox
  > .checkbox-with-label__checkbox:disabled,
.select-word-synonyms-question-screen__option-list__option__checkbox.disabled
  > .checkbox-with-label__label {
  opacity: unset;
}

.select-word-synonyms-question-screen__option-list__option.expanded.correct
 .checkbox-with-label__checkbox {
  border-color: var(--green);
  color: var(--green);
}

.select-word-synonyms-question-screen__option-list__option.expanded.incorrect
 .checkbox-with-label__checkbox {
  border-color: var(--red);
  color: var(--red);
}

.select-word-synonyms-question-screen__footer {
  margin-top: auto;
}

.select-word-synonyms-question-screen__footer__answer-button {
  width: 100%;
  height: 60px;
}

.vocabulary-practice-question-screen {
  width: 100%;
  height: 100%;
}

.vocabulary-practice-question-screen__loader {
  margin: auto;
}

.vocabulary-practice-question-screen__footer {
  margin-top: auto;
}

.vocabulary-practice-question-screen__footer__continue-button {
  width: 100%;
  height: 60px;
}
.vocabulary-practice-exercise-screen {
  height: 100%;
  width: 100%;
}

.vocabulary-practice-exercise-screen__header {
  margin-bottom: 1.25rem;
}

.vocabulary-practice-exercise-screen__question-screen {
  width: 100%;
  max-width: 350px;
  margin: auto;
}

.vocabulary-practice-exercise-screen__loader {
  margin: auto;
}
.vocabulary-practice-page {
  height: 100%;
  width: 100%;
}

.vocabulary-practice-page__loader {
  margin: auto;
}

.bot-avatar {
  flex-shrink: 0;
}
.ai-chat-header {
  width: 100%;
  padding: 1rem 1rem 0;
  position: relative;
  align-items: center;
  justify-content: center;
  background: #fafafa;
}

.ai-chat-header__content-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  border-radius: 1.5rem;
  overflow: hidden;
}

/* Pseudo-element with the gradient background */
.ai-chat-header__content-wrap::before {
  content: '';
  position: absolute;
  width: 105vw;
  height: 105vw;

  background: linear-gradient(
    180deg,
    var(--violet),
    #d8e2ff
  );

  animation: rotate-bg 30s linear infinite;

  z-index: -1;
}

.ai-chat-header__back-button {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 2.25rem;
  height: 2.25rem;
  background-color: color-mix(in srgb, white 40%, transparent 60%);
  padding: 0.5rem;
  border-radius: 100%;
}

.ai-chat-header__back-button > .back-button__icon > * {
  color: white;
}

.ai-chat-header__avatar {
  width: 7.75rem;
  height: 7.75rem;
}

.ai-chat-header__character-name {
  font-family: 'Mulish';
  font-size: 0.875rem;
  line-height: 1.5rem;
  font-weight: 700;
  color: white;
  text-align: center;

  padding: 0.25rem 1rem;
  background-color: var(--accent);
  border: 1px solid #c2c2c2;
  border-radius: 1.5rem;
}

@keyframes rotate-bg {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.typing-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: auto;
}

.dot {
  width: 8px;
  height: 8px;
  background-color: var(--accent);
  border-radius: 50%;
  animation: blink 1.5s infinite;
}

.dot:nth-child(1) {
  animation-delay: 0s;
}
.dot:nth-child(2) {
  animation-delay: 0.2s;
}
.dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes blink {
  0%, 100% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
}

.audio-message-player {
  display: flex;
  flex-shrink: 0;
  border-radius: 100%;
  border-color: #eff2f4;
  width: 1.5rem;
  height: 1.5rem;
  padding: 4px;
  align-items: center;
  justify-content: center;
  background-color: white;
}

.audio-message-player.playing {
  animation: playingGlow infinite 2s;
}

.audio-message-player__stop-icon {
  display: flex;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--accent-dark);
  border-radius: 2px;
}

.audio-message-player__speaker-icon {
  width: 100%;
  height: 100%;
}

@keyframes playingGlow {
  0% {
    box-shadow: 0 0 2px 1px var(--green);
  }
  50% {
    box-shadow: 0 0 10px 1px var(--green);
  }
  100% {
    box-shadow: 0 0 2px 1px var(--green);
  }
}

.generate-message-audio-button {
  display: flex;
  flex-shrink: 0;
  border-radius: 100%;
  border-color: #eff2f4;
  width: 1.5rem;
  height: 1.5rem;
  padding: 4px;
  align-items: center;
  justify-content: center;
  background-color: white;
}

.generate-message-audio-button__loader {
  width: 0.75rem;
  height: 0.75rem;
}
.generate-message-audio-button__loader > span {
  clip: rect(6px, 0.75rem, 0.75rem, 0);
}

.generate-message-audio-button__speaker-icon {
  width: 100%;
  height: 100%;
}

.ai-chat-message {
  position: relative;
  max-width: 90%;
  animation: slide-in-from-bottom 0.5s ease-out forwards;
  gap: 0.25rem;
  align-items: center;
}

.ai-chat-message.from-user {
  flex-direction: row-reverse;
}

.ai-chat-message__content-wrap {
  min-height: 2rem;
  min-width: 2rem;
  padding: 0.5rem 0.75rem;
  z-index: 0;
  gap: 0.5rem;
  border-radius: 0.75rem;
}

.ai-chat-message.from-chatbot
  > .ai-chat-message__content-wrap {
  background-color: #ecceff;
  align-items: flex-start;
}

.ai-chat-message.from-user
  > .ai-chat-message__content-wrap {
  background-color: var(--lighter-green);
  align-items: flex-end;
}

.ai-chat-message.media > .ai-chat-message__content-wrap {
  padding: 0;
  border-radius: 0;
  background-color: transparent !important;
}

.ai-chat-message__content * {
  font-family: "Mulish";
  font-size: 0.875rem;
  line-height: 1.5rem;
  font-weight: 400;
  word-wrap: break-word;
}

.ai-chat-message__content strong {
  font-weight: 900;
}

.ai-chat-message__audio-controls > * {
  animation: appear-from-transparent 0.5s ease-out forwards;
}

@media screen and (min-width: 768px) {
  .ai-chat-message {
    max-width: 600px;
  }
}

@keyframes slide-in-from-bottom {
  from {
    transform: translateY(2rem);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes appear-from-transparent {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.inline-hint-wrapper {
  position: relative;
}

.inline-hint-wrapper__blur-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  background: rgba(0, 0, 0, 0.65);
  z-index: 20001;
}

.inline-hint-wrapper__focused-element {
  width: -webkit-fit-content;
  width: fit-content;
  position: relative;
  z-index: 20002;
  box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.6);
}

.inline-hint-wrapper__tooltip {
  z-index: 20003;
  background: var(--accent-dark);
  border-radius: 0.5rem;
  padding: 0.5rem 1.5rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  width: -webkit-fit-content;
  width: fit-content;
  min-width: 15rem;
  max-width: 80%;
}

.inline-hint-wrapper__tooltip__arrow {
  fill: var(--accent-dark);
}

.inline-hint-wrapper__tooltip__close-button {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.875rem;
  height: 0.875rem;

  font-family: 'Mulish';
  font-size: 0.75rem;
  font-weight: 900;
  color: white;
  font-style: normal;

  background: transparent;
  border: none;
  cursor: pointer;
}

.inline-hint-wrapper__tooltip__content * {
  font-family: 'Mulish';
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: 700;
  color: white;
  text-align: center;
  font-style: normal;
}

.inline-hint-wrapper__tooltip__content strong {
  font-weight: 900;
}
.audio-recorder-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 100%;
  border: none;
  background-color: var(--accent-dark);
}

.audio-recorder-button.recording {
  animation: recordingGlow infinite 2s;
  background-color: white;
}

.audio-recorder-button__microphone-icon {
  width: 2.5rem;
  height: 2.5rem;
}

.audio-recorder-button > .audio-recorder-button__microphone-icon * {
  color: white;
}

.audio-recorder-button.recording > .audio-recorder-button__microphone-icon * {
  color: var(--red);
}

@keyframes recordingGlow {
  0% {
    box-shadow: 0 0 1rem var(--red);
  }
  50% {
    box-shadow: 0 0 2rem var(--red);
  }
  100% {
    box-shadow: 0 0 1rem var(--red);
  }
}

.audio-message-input {
  width: 100%;
  align-items: center;
}

.audio-message-input__switch-to-text-input-button {
  display: flex;
  margin-left: 2.75rem;
  margin-right: auto;
  width: 3rem;
  height: 3rem;
  border-radius: 100%;
  border: 0.25rem solid rgba(135, 114, 244, 0.1);
  padding: 0;
  align-items: center;
  justify-content: center;
}

.audio-message-input__switch-to-text-input-button__icon {
  width: 1.75rem;
  height: 1.75rem;
}

.audio-message-input__audio-recorder-button {
  position: absolute;
  left: calc(50% - 2.25rem);
}

.audio-message-input__stop-audio-recording-button {
  position: absolute;
  left: calc(50% + 2.25em + 1.75rem);
  display: flex;
  width: 2rem;
  height: 2rem;
  border-radius: 100%;
  border: 0.125rem solid rgba(135, 114, 244, 0.1);
  padding: 0.5rem;
}

.audio-message-input__inline-hint-wrapper {
  position: absolute;
  left: calc(50% - 2.25rem);
}

.audio-message-input__inline-hint-wrapper
  > .inline-hint-wrapper__focused-element {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 100%;
}

.audio-message-input__stop-audio-recording-button__icon {
  width: 100%;
  height: 100%;
}

.audio-message-input__stop-audio-recording-button__icon * {
  color: #ff797c;
}

.text-message-input {
  width: 100%;
  gap: 0.5rem;
  align-items: flex-end;
  padding: 0.5rem;
}

.text-message-input__textarea {
  width: 100%;
  max-height: calc(1.75rem * 5);
  min-height: 1.75rem;
  padding: 0.5rem 0.75rem;
  border: none;
  font-family: "Mulish";
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  overflow: auto;

  background-color: #eff2f4;
  border-radius: 1rem;
}

.text-message-input__textarea:-ms-input-placeholder {
  color: var(--grey-dark);
}

.text-message-input__textarea::placeholder {
  color: var(--grey-dark);
}

.text-message-input__textarea:focus {
  border: none;
  box-shadow: none;
}

.text-message-input__textarea:disabled {
  background-color: transparent;
  cursor: auto;
  color: unset;
}

.text-message-input__textarea::-webkit-scrollbar {
  display: none;
}

.text-message-input__controls-wrap {
  width: 2.25rem;
  height: 100%;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: flex-end;
}

.text-message-input__character-counter {
  font-size: 0.5rem;
  line-height: 0.75rem;
  font-family: "Mulish";
  white-space: nowrap;
}

.text-message-input__character-counter.message-too-long {
  color: var(--red);
}

.text-message-input__send-button,
.text-message-input__switch-to-audio-button {
  display: flex;
  margin-top: auto;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 100%;
  padding: 0;
  align-items: center;
  justify-content: center;
  background-color: #eff2f4;
}

.text-message-input__send-button__icon,
.text-message-input__switch-to-audio-button__icon {
  width: 1.25rem;
  height: 1.25rem;
}

.text-message-input__send-button__icon *,
.text-message-input__switch-to-audio-button__icon * {
  color: var(--accent-dark);
}

.ai-chat-input {
  position: relative;
  width: 100%;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background-color: #fafafa;
}

.ai-chat-screen {
  height: 100%;
  width: 100%;
}

.ai-chat-screen__loader {
  margin: auto;
}

.ai-chat-screen__header {
  z-index: 1;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 12.5rem;
}

.ai-chat-screen__message-list {
  gap: 1rem;
  padding: 0 1rem;
  margin: 1rem 0 1.25rem;
}
.ai-chat-screen__message-list::before {
  position: fixed;
  content: "";
  display: flex;
  width: 100%;
  height: 1rem;
  z-index: 1;
  top: 12.5rem;
  left: 0;
  background: linear-gradient(0deg, rgba(250, 250, 250, 0) 0%, #fafafa 70%);
}

.ai-chat-screen__message.from-user {
  align-self: flex-end;
}

.ai-chat-screen__response-suggestion {
  align-self: flex-end;
}

.ai-chat-screen__bottom-anchor {
  width: 100%;
  height: 1px;
  background-color: transparent;
}

.ai-chat-screen__input-footer-overlay {
  margin-top: auto;
}

.ai-chat-screen__input-wrap {
  width: 100%;
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  margin-top: auto;
  background-color: #fafafa;
  height: 5.75rem;
  align-items: flex-start;
  z-index: 1;
}
.ai-chat-screen__input-wrap::before {
  position: absolute;
  content: "";
  display: flex;
  width: 100%;
  height: 1rem;
  z-index: 1;
  top: -0.5rem;
  left: 0;
  background: linear-gradient(180deg, rgba(250, 250, 250, 0) 0%, #fafafa 70%);
}

.ai-chat-screen__finish-button {
  width: 100%;
  max-width: 20rem;
  margin: auto;
}

.ai-chat-screen__input {
  z-index: 1;
  height: 100%;
}

@media screen and (min-width: 768px) {
  .ai-chat-screen__header {
    display: none;
  }

  .ai-chat-screen__message-list::before {
    top: 92px;
  }
}

.ai-chat-response-suggestion {
  width: 100%;
  height: -webkit-fit-content;
  height: fit-content;
  align-items: flex-end;
  opacity: 0;
  transition: opacity ease-in-out 150ms;
  transition-delay: 0s;
}

.ai-chat-response-suggestion.visible {
  animation: slide-up ease-in-out 500ms forwards, fade-in ease-in-out 500ms forwards;
  animation-delay: 2s;
}

.ai-chat-response-suggestion__button {
  display: flex;
  padding: 0;
  border: none;
  height: -webkit-fit-content;
  height: fit-content;
  width: -webkit-fit-content;
  width: fit-content;
}

.ai-chat-response-suggestion__button__icon {
  width: 2rem;
  height: 2rem;
}

.ai-chat-response-suggestion__loader {
  display: flex;
  border-radius: 100%;
  background-color: var(--blue);
  border: 1px solid var(--accent-dark);
}

.ai-chat-response-suggestion__loader span {
  width: 1rem;
  height: 1rem;
  clip: rect(0.5rem, 1rem, 1rem, 0);
}

.ai-chat-response-suggestion__loader span::after {
  border-color: #ffc774;
}

.ai-chat-response-suggestion__suggestion {
  min-height: 2rem;
  min-width: 2rem;
  max-width: 70%;
  padding: 0.5rem 0.75rem;
  z-index: 0;
  border-radius: 0.75rem;
  align-items: flex-start;
  gap: 0.5rem;
  background-color: var(--light-blue);
  border: 1px solid var(--accent-dark);

  animation: slide-up ease-in-out 250ms forwards, fade-in ease-in-out 250ms forwards;
}

.ai-chat-response-suggestion__suggestion__label {
  font-family: "Mulish";
  font-size: 0.875rem;
  line-height: 1.5rem;
  font-weight: 700;
}

.ai-chat-response-suggestion__suggestion__text * {
  font-family: "Mulish";
  font-size: 0.875rem;
  line-height: 1.5rem;
  font-weight: 400;
  word-wrap: break-word;
}

.ai-chat-response-suggestion__suggestion__text strong {
  font-weight: 900;
}

.task-statistics-item-card {
  width: 9.75rem;
  height: 8.5rem;
  padding: 1rem;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  background-color: var(--accent-dark);
}

.task-statistics-item-card__icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.task-statistics-item-card__icon * {
  color: white;
}

.task-statistics-item-card__label {
  font-family: 'Mulish';
  font-size: 0.875rem;
  line-height: 1.125rem;
  font-weight: 400;
  color: white;
  text-align: center;
}

.task-statistics-item-card__value{
  font-family: 'Mulish';
  font-size: 2.25rem;
  line-height: 2.75rem;
  font-weight: 900;
  color: white;
  text-align: center;
}
.task-statistics-screen {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: flex-end;
}

.task-statistics-screen__inner-wrap {
  position: relative;
  width: 100%;
  max-width: 25rem;
  height: 100%;
  max-height: calc(100% - 8.5rem);
  background-color: white;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  gap: 1rem;
  padding: 3.5rem 1rem 2rem;
  align-items: center;
}

.task-statistics-screen__cat-image {
  display: flex;
  position: absolute;
  width: 8.5rem;
  height: 8.5rem;
  object-fit: contain;
  top: calc(8.5rem / 2 * -1 - 2rem);
  flex-shrink: 0;
}

.task-statistics-screen__award-image {
  display: flex;
  width: 8rem;
  object-fit: contain;
  flex-shrink: 0;
  margin: -2rem;
}

.task-statistics-screen__title {
  font-family: 'Mulish';
  font-size: 1.75rem;
  line-height: 2rem;
  font-weight: 700;
  text-align: center;
  color: var(--accent-dark);
}

.task-statistics-screen__subtitle {
  font-family: 'Mulish';
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  text-align: center;
}

.task-statistics-screen__card-list {
  gap: 1rem;
  row-gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.task-statistics-screen__cta {
  width: 100%;
  height: 3rem;
  margin-top: auto;
}

.ai-chat-debug-overlay {
  width: 100%;
  max-height: 100%;
  padding: 1rem 1.25rem;
  pointer-events: none;
}

.ai-chat-debug-overlay.opened {
  background-color: #fafafa;
}

.ai-chat-debug-overlay__toggle-button {
  margin-left: auto;
  padding: 0;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  pointer-events: initial;
  flex-shrink: 0;
}

.ai-chat-debug-overlay__content {
  pointer-events: initial;
  overflow: auto;
  gap: 1.25rem;
}

.ai-chat-debug-overlay__label {
  font-family: 'Mulish';
  font-weight: 900;
}

.ai-chat-debug-overlay__value,
.ai-chat-debug-overlay__value * {
  font-family: 'Mulish';
  font-size: 0.875rem;
  line-height: 1.25rem;
  word-break: break-word;
}

.ai-chat-debug-overlay__item-list {
  gap: 1rem;
}

.ai-chat-debug-overlay__topic {
  gap: 0.375rem;
  padding: 0.5rem;
  background-color: var(--neutral-dark);
}

.ai-chat-debug-overlay__message {
  gap: 0.75rem;
  padding: 0.5rem;
}

.ai-chat-debug-overlay__message.from-chatbot {
  background-color: var(--light-blue);
}

.ai-chat-debug-overlay__message.from-user {
  background-color: var(--light-yellow);
}
.ai-chat-page {
  height: 100%;
}

.ai-chat-page__debug-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
}

@media screen and (min-width: 768px) {
  .ai-chat-page {
    padding: unset;
  }
}
.horizontal-scroll {
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
  scrollbar-width: none;
}

.horizontal-scroll::-webkit-scrollbar {
  display: none;
}
.horizontal-scroll-with-fades {
  position: relative;
}

.horizontal-scroll-with-fades__scroll {
  width: 100%;
  gap: 0.75rem;
  box-sizing: border-box;
  padding: 0 0.75rem;
}

.horizontal-scroll-with-fades__left-fade-gradient,
.horizontal-scroll-with-fades__right-fade-gradient {
  position: absolute;
  height: 100%;
  width: 0.75rem;
}
.horizontal-scroll-with-fades__left-fade-gradient {
  background: linear-gradient(
    -90deg,
    rgba(250, 250, 250, 0) 0%,
    #fafafa 70%
  );
  left: 0;
}
.horizontal-scroll-with-fades__right-fade-gradient {
  background: linear-gradient(
    90deg,
    rgba(250, 250, 250, 0) 0%,
    #fafafa 70%
  );
  right: 0;
}
.bookshelf-bookmarked-course {
  display: flex;
  flex-direction: column;
  width: 8rem;
  flex-shrink: 0;
  text-decoration: none;
}

.boookshelf-bookmarked-course__cover {
  width: 6.25rem;
  height: 9rem;
  margin: 0 auto;
}

.bookshelf-bookmarked-course__progress {
  margin-top: 0.5rem;
}

.bookshelf-bookmarked-course__progress > .progress-bar__track {
  background: #e4e4e4;
}

.bookshelf-bookmarked-course__title {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 800;
  color: white;
  text-align: center;
}
.bookshelf-bookmarked-empty-placeholder {
  max-width: 18rem;
  gap: 1rem;
  align-items: center;
}

.bookshelf-bookmarked-empty-placeholder__text {
  font-family: 'Mulish';
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  color: white;
  text-align: center;
}

.bookshelf-bookmarked-empty-placeholder__cta {
  margin-top: 2rem;
  width: 15rem;
}
.bookshelf-bookmarked-widget {
  min-height: 18.5rem;
  background-color: #3c4252;
  border: 1px solid black;
  border-radius: 10px;
  overflow: hidden;
  padding: 1rem 0rem;
  gap: 0.75rem;
}

.bookshelf-bookmarked-widget__header {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0rem 0.75rem;
  text-decoration: none;
}

.bookshelf-bookmarked-widget__title {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 800;
  color: white;
}

.bookshelf-bookmarked-widget__course-count {
  font-family: 'Mulish';
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: var(--yellow);
}

.bookshelf-bookmarked-widget__scroll {
  height: 100%;
}

.bookshelf-bookmarked-widget__scroll
  > .horizontal-scroll-with-fades__left-fade-gradient {
  background: linear-gradient(-90deg, rgba(250, 250, 250, 0) 0%, #3c4252 70%);
}
.bookshelf-bookmarked-widget__scroll
  > .horizontal-scroll-with-fades__right-fade-gradient {
  background: linear-gradient(90deg, rgba(250, 250, 250, 0) 0%, #3c4252 70%);
}

.bookshelf-bookmarked-widget__loader {
  margin: auto;
}

.bookshelf-bookmarked-widget__loader > span::before {
  border-color: white;
}
.bookshelf-bookmarked-widget__loader > span::after {
  border-color: rgba(255, 255, 255, 0.5);
}

.bookshelf-bookmarked-widget__empty-placeholder {
  margin: auto;
}
.bookshelf-category-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  border-radius: 5px;
  box-shadow: 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.25);
  padding: 0.5rem 0.75rem;
  background-color: white;
}

.bookshelf-category-button__title {
  font-size: 1rem;
  line-height: 1.75rem;
  font-weight: 800;
}

.bookshelf-category-button__item-count {
  font-family: 'Mulish';
  font-size: 1rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: var(--purple);
}
.bookshelf-info-screen {
  width: 100%;
  height: 100%;
}

.bookshelf-info-screen__loader {
  margin: auto;
}

.bookshelf-info-screen__category-list {
  margin-top: 2.25rem;
  gap: 0.5rem;
}

.bookshelf-info-screen__content {
  height: 100%;
}

.bookshelf-info-screen__cat-image {
  display: none;
}

@media screen and (min-width: 768px) {
  .bookshelf-info-screen__cat-image {
    display: flex;
    position: fixed;
    bottom: 0;
    width: 15rem;
    margin: auto auto 0;
  }
}
.subpage-header {
  position: relative;
  width: 100%;
  align-items: center;
}

.subpage-header__title {
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 900;
}

@media screen and (min-width: 768px) {
  .subpage-header__back-button {
    display: none;
  }

  .subpage-header__title {
    position: unset;
    left: unset;
    width: unset;
    pointer-events: unset;
    font-size: 1.5rem;
    line-height: 1.75rem;
    font-weight: 900;
  }
}

.course-controls-dropdown {
  position: relative;
}

.course-controls-dropdown__toggle-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: unset;
  padding: unset;
}

.course-controls-dropdown__toggle-button__icon {
  width: 4px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}

.course-controls-dropdown__dropdown {
  position: absolute;
  top: 1.75rem;
  right: 0.25rem;
  width: 13.75rem;
  padding: 0.75rem 0rem;
  align-items: flex-start;
  background-color: white;
  box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
}

.course-controls-dropdown__item-button {
  display: flex;
  width: 100%;
  height: 2.5rem;
  padding: 0rem 1rem;
  border: unset;
  border-radius: 0;
  align-items: center;
  font-size: 0.875rem;
  line-height: 1rem;
  font-family: 'Mulish';
}

.course-controls-dropdown__item-button:hover {
  background-color: var(--neutral);
}

@media screen and (min-width: 768px) {
  .course-controls-dropdown__toggle-button__icon {
    width: 6px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .course-controls-dropdown__dropdown {
    top: 34px;
  }
}
.content-duration-label {
  align-items: center;
  gap: 0.25rem;
}

.content-duration-label__icon {
  display: flex;
  flex-shrink: 0;
  object-fit: contain;
  width: 0.75rem;
  height: 0.75rem;
}

.content-duration-label__text {
  font-family: 'Mulish';
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--grey-dark);
}
.content-date-label {
  align-items: center;
  gap: 0.25rem;
}

.content-date-label__text {
  font-family: 'Mulish';
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--grey-dark);
}
.course-list-item {
  width: 100%;
  display: flex;
  flex-direction: row;
  text-decoration: none;
  align-items: flex-start;
  gap: 1.5rem;
}

.course-list-item__cover-wrap {
  gap: 0.5rem;
}

.course-list-item__cover {
  width: 5rem;
  height: 7.5rem;
}

.course-list-item__name {
  font-size: 0.875rem;
  line-height: 1.5rem;
  font-weight: 900;
}

.course-list-item__author {
  font-family: 'Mulish';
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: #949494;
}

.course-list-item__subtitle {
  font-family: 'Mulish';
  font-size: 0.75rem;
  line-height: 1rem;
  margin-top: 0.5rem;
}

.course-list-item__date {
  margin-top: 0.25rem;
}

.course-list-item__duration {
  margin-top: 0.25rem;
}

.course-list-item__controls-dropdown {
  margin-left: auto;
}
.course-list {
  gap: 1.25rem;
}

@media screen and (min-width: 768px) {
  .course-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 1.25rem;
  }

  .course-list__item {
    max-width: 45%;
  }
}

.bookshelf-courses-empty-placeholder {
  max-width: 22rem;
  gap: 3rem;
  align-items: center;
}

.bookshelf-courses-empty-placeholder__text {
  font-family: 'Mulish';
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  text-align: center;
}
.bookshelf-courses-screen {
  width: 100%;
  height: 100%;
}

.bookshelf-courses-screen__header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3.5rem;
  padding: 1.75rem 1rem 0.5rem;
  background-color: #fafafa;
  z-index: 1;
}

.bookshelf-courses-screen__content {
  width: 100%;
  height: 100%;
  padding-top: calc(3.5rem - 0.5rem);
}

.bookshelf-courses-screen__loader {
  margin: auto;
}

.bookshelf-courses-screen__course-list::before {
  position: fixed;
  content: "";
  display: flex;
  width: 100%;
  height: 10px;
  z-index: 1;
  top: 3.5rem;
  left: 0;
  background: linear-gradient(0deg, rgba(250, 250, 250, 0) 0%, #fafafa 70%);
}

.bookshelf-courses-screen__empty-placeholder {
  margin: auto;
}

@media screen and (min-width: 768px) {
  .bookshelf-courses-screen__header {
    position: relative;
    height: unset;
    padding: 0;
    padding-bottom: 1.5rem;
  }

  .bookshelf-courses-screen__content {
    padding-top: 0;
  }

  .bookshelf-courses-screen__course-list::before {
    display: none;
  }
}

.bookshelf-page {
  width: 100%;
  height: 100%;
  padding: 1.75rem 1rem;
}

@media screen and (min-width: 768px) {
  .bookshelf-page {
    padding: 0;
  }
}
.peeking-blinking-cat-image {
  object-fit: contain;
}
.question-card {
  height: 100%;
  gap: 1rem;
}

.question-card__header {
  min-height: 4.5rem;
  align-items: center;
}

.question-card__header__cat-image {
  position: fixed;
  width: 6rem;
  height: 6rem;
  left: -3rem;
  top: 3.5rem;
  z-index: 1;

  animation: infinite float 7s 1s;
}

.question-card__header__text-wrap {
  margin-left: 4rem;
  margin-right: 1.25rem;
  align-items: flex-start;
}

.question-card__header__title,
.question-card__header__subtitle {
  font-family: 'Mulish';
  font-size: 1.25rem;
  line-height: 1.5rem;
  text-align: left;
}

.question-card__header__title {
  font-weight: 700;
}

.question-card__header__subtitle {
  font-weight: 400;
}

.question-card__content {
  width: 100%;
  height: 100%;
  background-color: white;
  border-top-right-radius: 0.75rem;
  border-top-left-radius: 0.75rem;
  padding: 1rem;
}

.question-card__content__loader {
  margin: auto;
}

@media screen and (min-width: 768px) {
  .question-card__header__text-wrap {
    margin-left: unset;
    margin-right: unset;
  }
}
.question-card-memorize-word__full-card-content {
  margin-top: 1.25rem;
}

.question-card-memorize-word__full-card-content .dictionary-entry-example__sentence *,
.question-card-memorize-word__full-card-content .dictionary-entry-translation__sentence * {
  font-size: 1rem;
  line-height: 1.5rem;
}

.question-card-memorize-word__footer {
  margin-top: auto;
  gap: 1rem;
}

.question-card-memorize-word__footer__button {
  height: 3rem;
}

.sentence-with-gaps {
  align-items: center;
  line-height: 2.5rem;
}

.sentence-with-gaps-part {
  font-family: "Mulish";
  font-size: 1.5rem;
  line-height: 1.75rem;
  font-weight: 700;

  pointer-events: none;
  cursor: default;
}

.sentence-with-gaps-part.clickable {
  pointer-events: all;
  cursor: pointer;
}

.sentence-with-gaps-part.dynamic {
  border-radius: 0.5rem;
  padding: 0.125rem 0.375rem;
  white-space: pre-wrap;
}

.sentence-with-gaps-part.dynamic.empty {
  background-color: white;
  color: transparent;
  border: 1px dashed #c2c2c2;
  transition: none;
}

.sentence-with-gaps-part.dynamic.filled {
  background-color: var(--accent-dark);
  color: white;
  border: 1px solid var(--blue);
  transition: all ease-in-out 125ms;
}

.sentence-with-gaps-part.dynamic.invalid {
  background-color: #f99c35;
  border: 1px solid #ff8600;
}

.answer-result-card {
  width: 100%;
  align-items: flex-start;
  padding: 1rem;
  border-radius: 0.75rem;
  gap: 1rem;
}

.answer-result-card.correct {
  background-color: var(--accent-dark);
}

.answer-result-card.incorrect {
  background-color: #f99c35;
}

.answer-result-card__title {
  font-family: 'Mulish';
  font-size: 1.25rem;
  line-height: 1.5rem;
  font-weight: 700;
  color: white;
}

.answer-result-card__content {
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.answer-result-card__text-wrap {
  align-items: flex-start;
  gap: 0.5rem;
}

.answer-result-card__answer {
  font-family: 'Mulish';
  font-size: 1rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: white;
}

.answer-result-card__translation,
.answer-result-card__translation * {
  font-family: 'Mulish';
  font-size: 1rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: white;
  font-style: italic;
}

.answer-result-card__answer-audio-button {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  background-color: white;
}

.answer-result-card__answer-audio-button > .dictionary-entry-audio__icon * {
  color: var(--accent-dark);
}
.question-card-fill-the-gap__footer {
  margin-top: auto;
  gap: 0.5rem;
}

.question-card-fill-the-gap__footer__button {
  height: 3rem;
}

.question-card-fill-the-gap__answer-option {
  border-radius: 0.75rem;
  background-color: white;
  height: 3rem;
}
.phrase-scramble-form__option-list {
  width: 100%;
  flex-wrap: wrap;
  gap: 1rem;
  row-gap: 1rem;
  align-items: center;
  justify-content: center;

  margin-top: auto;
  margin-bottom: auto;
}

.phrase-scramble-form__option {
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  border: 1px solid #eff2f4;
  border-radius: 0.5rem;

  box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15),
    0px 1px 2px 0px rgba(0, 0, 0, 0.3);

  font-family: "Mulish";
  font-size: 1.5rem;
  line-height: 1.75rem;
  font-weight: 700;

  opacity: 1;
  transition: opacity ease-in-out 100ms;
}

.phrase-scramble-form__option:disabled {
  opacity: 1;
  pointer-events: none;
}

.phrase-scramble-form__option.used {
  opacity: 0;
  pointer-events: none;
}
.word-scramble-form__hints {
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.word-scramble-form__sentence {
  font-family: "Mulish";
  font-size: 0.875rem;
  line-height: 1rem;
  font-weight: 400;
  text-align: center;
}

.word-scramble-form__translation * {
  font-family: "Mulish";
  font-size: 0.875rem;
  line-height: 1rem;
  font-weight: 400;
  font-style: italic;
  color: var(--grey-dark);
  text-align: center;
}

.word-scramble-form__translation strong {
  font-weight: 900;
  color: var(--lavender);
}

.word-scramble-form__sentence-with-gaps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  row-gap: 0.25rem;
  align-items: center;
  justify-content: center;
}

.word-scramble-form__sentence-with-gaps > .sentence-with-gaps-part {
  display: flex;
  width: 2.25rem;
  height: 2.75rem;
  border-radius: 0.5rem;
  align-items: center;
  justify-content: center;
}

.word-scramble-form__sentence-with-gaps
  > .sentence-with-gaps-part.dynamic.first-empty:not(.invalid) {
  border-color: var(--accent-dark);
  background-color: #8772f433;
}

.word-scramble-form__option-list {
  width: 100%;
  flex-wrap: wrap;
  gap: 1rem;
  row-gap: 1rem;
  align-items: center;
  justify-content: center;

  margin-top: auto;
  margin-bottom: auto;
}

.word-scramble-form__option {
  width: 3.25rem;
  height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  border: 1px solid #eff2f4;
  border-radius: 0.5rem;

  box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15),
    0px 1px 2px 0px rgba(0, 0, 0, 0.3);

  font-family: "Mulish";
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  text-align: center;

  opacity: 1;
  transition: opacity ease-in-out 100ms;
}

.word-scramble-form__option:disabled {
  opacity: 1;
  pointer-events: none;
}

.word-scramble-form__option.used {
  opacity: 0;
  pointer-events: none;
}

.question-card-scramble__footer {
  margin-top: auto;
  gap: 0.5rem;
}

.question-card-scramble__footer__button {
  height: 3rem;
}

.question-card-scramble__form {
  width: 100%;
  height: 100%;
  margin: auto;
}
.vocabulary-practice-screen {
  width: 100%;
  max-width: 28rem;
  height: 100%;
  gap: 1rem;
  margin: auto;
}

.vocabulary-practice-screen__header {
  position: relative;
  height: 2rem;
  align-items: center;
  justify-content: center;
  margin: 0.75rem 1.25rem 0;
}

.vocabulary-practice-screen__back-button {
  width: 22px;
  height: 22px;
  position: absolute;
  left: 0;
  top: calc(50% - 11px);
}

.vocabulary-practice-screen__progress-bar {
  width: 10.25rem;
  height: 0.75rem;
  margin: auto;
}

.vocabulary-practice-screen__progress-bar > .progress-bar__thumb {
  background: var(--accent-dark);
}

.background-pattern-1__blob-top-right {
  position: absolute;
  top: 0;
  right: 0;
}

.background-pattern-1__blob-bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
}


.background-pattern-2__blob-top-left {
  position: absolute;
  top: 0;
  left: 0;
}

.background-pattern-2__blob-top-right {
  position: absolute;
  top: 0;
  right: 0;
}

.background-pattern-2__blob-bottom-left {
  position: absolute;
  bottom: 0;
  left: 0;
}


.background-pattern-3__blob-top-right {
  position: absolute;
  top: 0;
  right: 0;
}

.background-pattern-3__blob-bottom-left {
  position: absolute;
  bottom: 0;
  left: 0;
}

.background-pattern-3__blob-bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
}

.background-pattern-4__blob-top-left {
  position: absolute;
  top: 0;
  left: 0;
}

.background-pattern-4__blob-top-right {
  position: absolute;
  top: 0;
  right: 0;
}

.background-pattern-4__blob-bottom-left {
  position: absolute;
  bottom: 0;
  left: 0;
}

.background-pattern-5__blob-top-left {
  position: absolute;
  top: 0;
  left: 0;
}

.background-pattern-5__blob-bottom-left {
  position: absolute;
  bottom: 0;
  left: 0;
}

.background-pattern-5__blob-bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
}
.background-pattern-6__blob-top-right {
  position: absolute;
  top: 0;
  right: 0;
}

.background-pattern-6__blob-middle-left {
  position: absolute;
  top: 30%;
  left: 0;
}

.background-pattern-6__blob-middle-right {
  position: absolute;
  top: 40%;
  right: 0;
}

.background-pattern-6__blob-bottom-left {
  position: absolute;
  bottom: 0;
  left: 0;
}

.background-pattern-6__blob-bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
}
.background-pattern-7__blob-top-left {
  position: absolute;
  top: 0;
  left: 0;
}

.background-pattern-7__blob-bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
}
.screen-background {
  width: 100%;
  height: 100%;

  position: fixed;
  top: 0;
  left: 0;

  pointer-events: none;

  z-index: 0;
  opacity: 0;
  animation: screen-background-fade-in forwards 2s;
}

.screen-background.mobile::before {
  position: fixed;
  content: "";
  display: flex;
  width: 100%;
  height: 1rem;
  z-index: 1;
  top: 0;
  left: 0;
  background: linear-gradient(0deg, rgba(250, 250, 250, 0) 0%, #fafafa 70%);
}

.screen-background.mobile::after {
  position: fixed;
  content: "";
  display: flex;
  width: 100%;
  height: 1rem;
  z-index: 1;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(250, 250, 250, 0) 0%, #fafafa 70%);
}

.screen-background > .column {
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 0;

  z-index: 0;
  transform: scale(1.5);
  transition: all linear 500ms;
}
.screen-background > .column.selected {
  opacity: 1;
  transform: scale(1);
}

@keyframes screen-background-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.8;
  }
}
.cat-image-2 {
  object-fit: contain;
}
.onboarding-screen-title {
  opacity: 0;
  animation: fade-in forwards 500ms, slide-down forwards 500ms;
  animation-delay: 0ms;
}

.onboarding-screen-title * {
  font-family: "Mulish";
  font-size: 2.5rem;
  line-height: 2.75rem;
  font-weight: 800;
}

.onboarding-screen-title strong {
  font-weight: 800;
  color: var(--accent-dark);
}
.onboarding-screen-subtitle {
  opacity: 0;
  animation: fade-in forwards 500ms, slide-down forwards 500ms;
  animation-delay: 150ms;
}

.onboarding-screen-subtitle * {
  font-family: "Mulish";
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
}

.onboarding-screen-subtitle strong {
  font-weight: 800;
}
.onboarding-screen-cta {
  margin: auto auto 0;
  width: 100%;
  height: 50px;

  opacity: 0;
  animation: fade-in forwards 500ms, slide-down forwards 500ms;
  animation-delay: 450ms;
}

.onboarding-screen-cta:disabled {
  opacity: 0;
  background-color: white;
  border-color: var(--grey-dark);
  color: var(--grey-dark);
}
.onboarding-intro-screen {
  position: relative;
  height: 100%;
  gap: 1rem;
}

.onboarding-intro-screen__title {
  font-family: "Mulish";
  font-size: 2.5rem;
  line-height: 2.75rem;
  font-weight: 800;
  margin-top: auto;
}

.onboarding-intro-screen__subtitle {
  font-family: "Mulish";
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
  font-style: normal;
  margin-bottom: auto;
}

.onboarding-intro-screen__cat-image {
  position: absolute;
  right: -1rem;
  bottom: 49px;
  height: 7.5rem;

  opacity: 0;
  animation: forwards fade-in 500ms;
  animation-delay: 750ms;
}

.onboarding-intro-screen__cta {
  animation-delay: 550ms;
}

.onboarding-answer-button {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: -webkit-fit-content;
  height: fit-content;
  min-height: 3.25rem;

  align-items: center;
  justify-content: center;
  gap: 0.625rem;
}

.onboarding-answer-button.selected {
  border: 1px solid #eff2f4;
  background-color: var(--accent-dark);
}

.onboarding-answer-button__label * {
  font-family: "Mulish";
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  text-align: center;
}

.onboarding-answer-button.selected > .onboarding-answer-button__label * {
  color: white;
}

.onboarding-answer-list {
  margin: auto 0;
  gap: 0.75rem;
  align-items: center;

  opacity: 0;
  animation: fade-in forwards 750ms, slide-down forwards 750ms;
  animation-delay: 500ms;
}
.language-selection-screen {
  height: 100%;
  gap: 1rem;
}

.language-selection-screen__language-flag {
  width: 1.5rem;
  height: 1.5rem;
}

.language-selection-screen__other-language-icon {
  font-family: 'Mulish';
  font-size: 1.25rem;
  line-height: 1.5rem;
  font-weight: 700;
}
.cat-image-11 {
  object-fit: contain;
}
.language-level-selection-screen {
  height: 100%;
  gap: 1rem;
}

.language-level-selection-screen__answer-list {
  gap: 1.5rem;
}

.language-level-selection-screen__option-button {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 20rem;
  height: -webkit-fit-content;
  height: fit-content;
  padding: 1rem 1.5rem;
  align-items: flex-start;

  gap: 0.625rem;

  border-radius: 1.5rem;
  border: 1px solid black;
  background-color: white;
}

.language-level-selection-screen__option-button__title {
  font-family: "Mulish";
  font-size: 1.125rem;
  line-height: 1.5rem;
  font-weight: 700;
  text-align: left;

  color: var(--accent-dark);
}

.language-level-selection-screen__option-button__label {
  font-family: "Mulish";
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  text-align: left;
}

.language-level-selection-screen__option-button.selected {
  background-color: var(--accent-dark);
  border-color: #eff2f4;
}

.language-level-selection-screen__option-button.selected
  > .language-level-selection-screen__option-button__title,
.language-level-selection-screen__option-button.selected
  > .language-level-selection-screen__option-button__label {
  color: white;
}

.language-level-selection-screen__footer {
  position: relative;
  width: 100%;
  margin-top: auto;
}

.language-level-selection-screen__cat-image {
  position: absolute;
  bottom: 49px;
  right: -1rem;
  transform: scaleX(-1);
  
  opacity: 0;
  animation: forwards fade-in 500ms;
  animation-delay: 750ms;
}

.language-level-selection-screen__cta {
  margin-top: unset;
}

.cat-image-12 {
  object-fit: contain;
}
.learning-goal-selection-screen {
  height: 100%;
  gap: 1rem;
}

.learning-goal-selection-screen__content {
  width: 100%;
  margin: auto;
}

.learning-goal-selection-screen__cat-image {
  align-self: center;
  margin-left: 2rem;
  margin-bottom: -1px;

  opacity: 0;
  animation: forwards fade-in 500ms;
  animation-delay: 750ms;
}

.learning-goal-selection-screen__answer-list {
  margin: 0;
}
.cat-image-7 {
  object-fit: contain;
}
.applicable-skills-screen {
  height: 100%;
  gap: 1rem;

  overflow: hidden;
}

.applicable-skills-screen__answer-list {
  align-items: flex-start;
}

.applicable-skills-screen__answer-button {
  width: -webkit-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: fit-content;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;

  align-items: center;
  justify-content: flex-start;

  background-color: white;
  border-color: #eff2f4;

  font-weight: 700;
}

.applicable-skills-screen__answer-button > .onboarding-answer-button__label * {
  text-align: left;
}

.applicable-skills-screen__answer-button__checkbox {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 0.75rem;
  height: 0.75rem;

  background-color: white;
  border: 1px solid var(--grey-dark);
  border-radius: 0.125rem;
}

.applicable-skills-screen__answer-button.selected
  > .applicable-skills-screen__answer-button__checkbox {
  border: none;

  font-size: 0.5rem;
  line-height: 0.75rem;
  font-weight: 900;
  font-family: "Mulish";
  color: var(--accent-dark);
}

.applicable-skills-screen__footer {
  position: relative;
  width: 100%;
  max-height: 130px;
  margin-top: auto;

  padding-bottom: 0.125rem;
}

.applicable-skills-screen__cat-image {
  position: absolute;
  height: 7rem;
  z-index: 1;

  bottom: -1rem;
  right: 0.5rem;

  opacity: 0;
  animation: forwards fade-in 500ms;
  animation-delay: 750ms;

  pointer-events: none;
}

.applicable-skills-screen__cta {
  margin-top: unset;

  flex-shrink: 0;
}

.target-level-screen {
  height: 100%;
  gap: 1rem;
}
.daily-learning-time-commitment-screen {
  height: 100%;
  gap: 1rem;
}

.daily-learning-time-commitment-screen__image-wrap {
  position: relative;
  width: 100%;
  height: 12rem;

  opacity: 0;
  animation: fade-in forwards 750ms;
  animation-delay: 500ms;
}

.daily-learning-time-commitment-screen__image {
  position: absolute;
  top: 0;
  left: 0;

  object-fit: contain;
  width: 100%;
  height: 100%;

  opacity: 0;

  transition: opacity ease-in-out 500ms;
}
.daily-learning-time-commitment-screen__image.selected {
  opacity: 1;
}

.daily-learning-time-commitment-screen__answer-list {
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: 0.5rem;
  gap: 0.5rem;
}

.daily-learning-time-commitment-screen__answer-button {
  width: calc(50% - 0.5rem / 2);
}
.learning-reminders-screen {
  position: relative;
  height: 100%;
  gap: 1rem;
}

.learning-reminders-screen__phone-image {
  position: absolute;
  left: 0;
  bottom: -1rem;
  object-fit: contain;

  width: calc(100% + 1.25rem);

  z-index: 1;

  opacity: 0;
  animation: fade-in forwards 500ms, slide-up forwards 500ms;
  animation-delay: 250ms;
}

.learning-reminders-screen__footer {
  position: relative;
  margin-top: auto;
  width: 100%;
  gap: 1rem;

  z-index: 1;

  opacity: 0;
  animation: fade-in forwards 500ms, slide-down forwards 500ms;
  animation-delay: 250ms;
}

.learning-reminders-screen__cat-image {
  position: absolute;
  top: -107px;
  align-self: center;

  width: 6.75rem;

  opacity: 0;
  animation: fade-in forwards 500ms;
  animation-delay: 500ms;
}

.learning-reminders-screen__cta,
.learning-reminders-screen__skip-button {
  height: 50px;
  flex-shrink: 0;

  opacity: 1;
  animation: none;
}

@media screen and (max-height: 768px) {
  .learning-reminders-screen__phone-image {
    max-height: 400px;
    bottom: -0.5rem;
  }

  .learning-reminders-screen__cat-image {
    width: 4.5rem;
    top: -71px;
  }
}

@media screen and (min-width: 768px) {
  .learning-reminders-screen__phone-image {
    bottom: -1.5rem;
  }
}

.onboarding-peeking-cat-image {
  position: fixed;
  width: 7rem;
  height: 7rem;
  top: 10rem;
  z-index: 1;
}

.onboarding-peeking-cat-image.left {
  left: -3rem;
  animation: forwards cat-peek-from-left 1s, infinite float 7s 1s;
}

.onboarding-peeking-cat-image.right {
  right: -3rem;
  animation: forwards cat-peek-from-right 1s, infinite cat-float-from-right 5s 1s;
}

/* Extra-small devices, like iPhone SE */
@media screen and (max-width: 375px) {
  .onboarding-peeking-cat-image {
    width: 6rem;
    height: 6rem;
    top: 9rem;
  }
}

@keyframes cat-peek-from-left {
  0% {
    transform: rotateZ(-20deg) translateX(-4rem);
  }
  25% {
    transform: rotateZ(10deg) translateX(0.25rem);
  }
  35% {
    transform: rotateZ(0deg) translateX(0);
  }
  100% {
    transform: rotateZ(0deg) translateX(0);
  }
}

@keyframes cat-peek-from-right {
  0% {
    transform: rotateZ(-20deg) translateX(4rem) scaleX(-1);
  }
  25% {
    transform: rotateZ(10deg) translateX(-0.25rem) scaleX(-1);;
  }
  35% {
    transform: rotateZ(0deg) translateX(0) scaleX(-1);
  }
  100% {
    transform: rotateZ(0deg) translateX(0) scaleX(-1);
  }
}

@keyframes cat-float-from-right {
  0% {
    transform: translateY(0) scaleX(-1);
  }
  50% {
    transform: translateY(-0.25rem) scaleX(-1) scaleY(1.02);
  }
  100% {
    transform: translateY(0) scaleX(-1);
  }
}
.speech-bubble {
  display: flex;
}

.speech-bubble__background {
  overflow: visible;
}

.speech-bubble.right-to-left > .speech-bubble__background {
  transform: scaleX(-1) rotate(359deg);
}

.speech-bubble__text {
  position: absolute;
  width: 80%;
  height: 75%;
  margin: auto;
  top: calc(50% - 37.5%);
  justify-content: center;
}

.speech-bubble.right-to-left > .speech-bubble__text {
  transform: rotate(-356deg);
  right: calc(50% - 40% + 0.5rem);
}

.speech-bubble.left-to-right > .speech-bubble__text {
  transform: rotate(356deg);
  left: calc(50% - 40% + 1rem);
}

.speech-bubble__text * {
  font-family: 'Mulish';
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: 700;
  text-align: center;
}
.personalised-plan-screen {
  height: 100%;
  gap: 1rem;
}

.personal-plan-screen__progress-bar {
  display: flex;
  position: fixed;
  align-self: center;
  top: calc(50% - 7.5rem);
  width: 15rem;
  height: 15rem;
  margin: auto;
  opacity: 1;
  background: transparent;

  border-radius: 100%;
  transition: opacity linear 500ms;
}

.personal-plan-screen__progress-bar .CircularProgressbar-trail {
  display: none;
  stroke: none;
}

.personal-plan-screen__progress-bar .CircularProgressbar-path {
  stroke: var(--accent-dark);
}

.personal-plan-screen__progress-bar .CircularProgressbar-text {
  font-family: 'Mulish';
  fill: var(--accent-dark);
}

.personal-plan-screen__progress-bar.complete {
  animation: plan-growth infinite 1500ms;
}

.personal-plan-screen__progress-bar.complete .CircularProgressbar-path {
  animation: plan-loader-path-color-change forwards 1500ms;
}

.personal-plan-screen__progress-bar.complete .CircularProgressbar-text {
  animation: plan-loader-text-color-change forwards 1500ms;
}

.personal-plan-screen__progress-bar.hidden {
  opacity: 0;
}

.personalised-plan-screen__image {
  object-fit: contain;
  width: 100%;
  height: 17.5rem;

  opacity: 0;
  animation: fade-in forwards 750ms;
  animation-delay: 250ms;
}

.personalised-plan-screen__cat-speech-bubble {
  position: fixed;

  bottom: 15%;
  right: 6rem;
  z-index: 1;

  opacity: 0;
  animation: forwards speech-bubble-pop-out-right 1s, forwards fade-in 1s;
  animation-delay: 500ms;
}

.personalised-plan-screen__cat-speech-bubble > .speech-bubble__text * {
  font-size: 1.25rem;
  line-height: 1.5rem;
}

.personalised-plan-screen__cat-image {
  top: unset;
  bottom: 10%;
  right: -5rem !important;

  width: 12rem;
  height: 12rem;

  animation-delay: 1000ms;
}

@keyframes speech-bubble-pop-out-right {
  0% {
    transform: rotateZ(-30deg) translateX(4rem);
  }
  25% {
    transform: rotateZ(20deg) translateX(-0.25rem);
  }
  35% {
    transform: rotateZ(0deg) translateX(0);
  }
  100% {
    transform: rotateZ(0deg) translateX(0);
  }
}

@keyframes plan-growth {
  0% {
    transform: scale(1);
  }
  80% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(2);
  }
}

@keyframes plan-loader-path-color-change {
  0% {
    stroke: var(--accent-dark);
  }
  100% {
    stroke: var(--green);
  }
}

@keyframes plan-loader-text-color-change {
  0% {
    fill: var(--accent-dark);
  }
  100% {
    fill: var(--green);
  }
}
.streak-commitment-screen {
  height: 100%;
  gap: 1rem;
}

.streak-commitment-screen__answer-list {
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: 0.5rem;
  gap: 0.5rem;
}

.streak-commitment-screen__answer-button {
  width: calc(50% - 0.5rem / 2);
}

.streak-commitment-screen__cat-speech-bubble {
  position: fixed;
  object-fit: contain;
  width: 16rem;

  bottom: 13%;
  left: 6rem;
  z-index: 1;

  opacity: 0;
  animation: forwards speech-bubble-pop-out-left 1s, forwards fade-in 1s;
  animation-delay: 0ms;
}

.streak-commitment-screen__cat-image {
  top: unset;
  bottom: 6%;
  left: -5rem !important;

  width: 12rem;
  height: 12rem;

  animation-delay: 125ms;
}

@keyframes speech-bubble-pop-out-left {
  0% {
    transform: rotateZ(15deg) translateX(-4rem);
  }
  25% {
    transform: rotateZ(-10deg) translateX(0.25rem);
  }
  35% {
    transform: rotateZ(-5deg) translateX(0);
  }
  100% {
    transform: rotateZ(-5deg) translateX(0);
  }
}
.cat-with-starry-eyes_svg__cat-eye-star-left {
  transform-origin: center;
  transform-box: fill-box;
  animation: cat-eye-shimmer-left infinite 1500ms;
}

.cat-with-starry-eyes_svg__cat-eye-star-right {
  transform-origin: center;
  transform-box: fill-box;
  animation: cat-eye-shimmer-right infinite 1500ms;
}

@keyframes cat-eye-shimmer-left {
  0% {
    transform: scale(1) rotate(0);
  }
  50% {
    transform: scale(1.3) rotate(-5deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}

@keyframes cat-eye-shimmer-right {
  0% {
    transform: scale(1) rotate(0);
  }
  50% {
    transform: scale(1.3) rotate(5deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}
.emoji-rain-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
  z-index: 0;
}

.emoji-rain-background__emoji {
  position: absolute;
  top: -10vh;
  animation-name: emoji-rain-fall-down;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform-origin: center;
}

@keyframes emoji-rain-fall-down {
  0% {
    top: -10vh;
    transform: rotate(0deg);
  }
  100% {
    top: 110vh;
    transform: rotate(var(--spinAmount));
  }
}

.onboarding-outro-screen {
  height: 100%;
  gap: 1rem;
}

.onboarding-outro-screen__subtitle {
  align-items: center;
  margin-top: 2rem;

  animation-duration: 750ms;
}

.onboarding-outro-screen__subtitle * {
  text-align: center;
  font-size: 1.25rem;
}

.onboarding-outro-screen__subtitle strong {
  color: var(--accent-dark);
  font-size: 2rem;
  line-height: 2rem;
  font-weight: 900;
}

.onboarding-outro-screen__cat-image {
  margin: auto;

  opacity: 0;
  animation: fade-in forwards 500ms, slide-up forwards 1000ms, float infinite 3000ms;
  animation-delay: 500ms;
}

.onboarding-outro-screen__footer {
  position: relative;
  margin-top: auto;
  width: 100%;
  gap: 2rem;

  align-items: center;

  z-index: 1;

  opacity: 0;
  animation: fade-in forwards 1000ms, slide-down forwards 1000ms;
  animation-delay: 1000ms;
}

.onboarding-outro-screen__footer-text {
  font-family: 'Mulish';
  font-size: 1.5rem;
  line-height: 1.75rem;
  font-weight: 500;
  text-align: center;
}

.onboarding-outro-screen__cta {
  height: 50px;
  flex-shrink: 0;

  opacity: 1;
  animation: none;
}
.onboarding-page-header {
  width: 100%;
  position: relative;
  align-items: center;
  gap: 1.5rem;
  padding-bottom: 2rem;
  min-height: 3.25rem;

  z-index: 1;
  opacity: 0;
  animation: forwards fade-in 2000ms;
}

.onboarding-page-hader__back-button {
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
}

.onboarding-page-header__progress-bar {
  width: 10.25rem;
  height: 0.75rem;
  margin: auto;
}

.onboarding-page-header__progress-bar > .progress-bar__thumb {
  background: var(--accent-dark);
}

@media screen and (min-width: 768px) {
  .onboarding-page-header {
    padding-bottom: 4rem;
  }

  .onboarding-page-hader__back-button {
    display: none;
  }
}

/* Extra-small devices, like iPhone SE */
@media screen and (max-width: 375px) {
  .onboarding-page-header {
    padding-bottom: 1rem;
  }
}

.onboarding-page {
  height: 100%;
  width: 100%;
  max-width: 22rem;
  align-items: center;
  margin: 0 auto;
}

.onboarding-page__content {
  width: 100%;
  height: 100%;
}
.learning-calendar-day-item {
  position: relative;
  align-items: center;
  gap: 0.25rem;
  justify-content: flex-end;
  padding: 0.25rem;
  flex-shrink: 0;
}

.learning-calendar-day-item__day-label {
  width: 1.5rem;
  line-height: 1.5rem;
  font-family: "Mulish";
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  color: white;
}

.learning-calendar-day-item__day-label.today {
  background-color: var(--accent-bright);
  border-radius: 100%;
}

.learning-calendar-day-item__progress-marker {
  width: 2.5rem;
  height: 2.5rem;
}

.learning-calendar-day-item__completion-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: var(--accent-bright);
  border-radius: 100%;
}

.learning-calendar-day-item__completion-mark > svg {
  width: 80%;
  height: 80%;
}

.learning-calendar-day-item__completion-mark * {
  color: white;
}

.learning-calendar-day-item__progress-ring {
  width: 100%;
  height: 100%;
}

.learning-calendar-day-item__progress-ring > .CircularProgressbar-trail {
  stroke: color-mix(in srgb, var(--accent-bright) 30%, transparent 70%);
}

.learning-calendar-day-item__progress-ring > .CircularProgressbar-path {
  stroke: var(--accent-bright);
}
.learning-calendar-widget {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  align-items: center;
  gap: 0.25rem;
}

.learning-calendar-widget__carousel {
  width: 100%;
}

.learning-calendar-widget__carousel > .horizontal-scroll-with-fades__scroll {
  align-items: center;
  gap: 0.5rem;
}

.learning-calendar-widget__carousel > .horizontal-scroll-with-fades__left-fade-gradient {
  background: linear-gradient(
    -90deg,
    rgba(250, 250, 250, 0) 0%,
    var(--accent-dark) 70%
  );
}
.learning-calendar-widget__carousel > .horizontal-scroll-with-fades__right-fade-gradient {
  background: linear-gradient(
    90deg,
    rgba(250, 250, 250, 0) 0%,
    var(--accent-dark) 70%
  );
}

.learning-calendar-widget__carousel__loading-trigger {
  display: flex;
  flex-shrink: 0;
  width: 1px;
  height: 100%;
}

.learning-calendar-widget__footer {
  margin-top: auto;
  align-items: center;
  gap: 0.5rem;
  /* Adjusting position of footer to the left by loader width + gap. This allows us to always display month label right in the middle. */
  margin-left: calc(-0.75rem - 0.5rem);
}

.learning-calendar-widget__loader {
  visibility: hidden;
  width: 0.75rem;
  height: 0.75rem;
}
.learning-calendar-widget__loader > span {
  clip: rect(6px, 0.75rem, 0.75rem, 0);
}
.learning-calendar-widget__loader > span::before {
  border-color: white;
}
.learning-calendar-widget__loader > span::after {
  border-color: rgba(255, 255, 255, 0.5);
}
.learning-calendar-widget__loader.visible {
  visibility: visible;
}

.learning-calendar-widget__month-label {
  font-size: 14px;
  line-height: 16px;
  font-family: "Mulish";
  font-weight: 700;
  color: white;
}

.current-word-practice-widget {
  width: 100%;
  height: 5.75rem;
  padding: 0.75rem;
  border-radius: 1rem;
  border: 3px solid var(--green);
  background: color-mix(in srgb, var(--green) 5%, transparent 95%);
  box-shadow: 0px 4px 8px 0px color-mix(in srgb, var(--green) 15%, transparent 85%);
}

.current-word-practice-widget__loader {
  margin: auto;
}

.current-word-practice-widget__content {
  width: 100%;
  height: 100%;
  gap: 1rem;
  align-items: flex-start;
}

.current-word-practice-widget__title {
  font-family: "Mulish";
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25rem;

  color: var(--green);
}

.current-word-practice-widget__practice-button {
  display: flex;
  width: 100%;
  height: -webkit-fit-content;
  height: fit-content;
  padding: 0;
  border-radius: 0.5rem;
  margin-top: auto;
  border: none; 
  align-items: center;
  gap: 0.5rem;
}

.current-word-practice-widget__practice-info {
  align-items: center;
  gap: 1rem;
}

.current-word-practice-widget__text {
  font-family: 'Mulish';
  font-size: 0.75rem;
  line-height: 1.5rem;
  text-align: left;
}

.current-word-practice-widget__word-count {
  font-size: 1.5rem;
  line-height: 1.5rem;
  font-weight: 800;
  text-align: left;
}

.current-word-practice-widget__arrow-icon {
  width: 0.375rem;
  height: 0.675rem;
  margin-left: auto;
  flex-shrink: 0;
}

.current-word-practice-widget__arrow-icon * {
  color: var(--grey-dark);
}

.current-word-practice-widget__placeholder {
  width: 100%;
  gap: 0.5rem;
  align-items: center;
}

.current-word-practice-widget__checkmark-icon {
  width: 1rem;
  height: 1rem;
  margin-left: auto;
  flex-shrink: 0;
}
.current-reading-card {
  width: 100%;
  height: 100%;
  gap: 1rem;
  align-items: flex-start;
}

.current-reading-card__header {
  width: 100%;
}

.current-reading-card__title {
  font-family: "Mulish";
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25rem;

  color: var(--accent-bright);
}

.current-reading-card__replace-button {
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: none;

  margin-left: auto;
}

.current-reading-card__replace-icon {
  width: 100%;
  height: 100%;
}

.current-reading-card__replace-icon * {
  color: var(--accent-bright);
}

.current-reading-card__content {
  width: 100%;
  height: 100%;
  gap: 0.5rem;
}

.current-reading-card__course-cover {
  width: 4rem;
  height: 6rem;
  flex-shrink: 0;
}

.current-reading-card__info-wrap {
  width: 100%;
  height: 100%;
  gap: 0.5rem;
}

.current-reading-card__course-info {
  align-items: flex-start;
  flex-shrink: 0;
}

.current-reading-card__name {
  font-family: 'Martel';
  font-size: 0.75rem;
  line-height: 0.875rem;
  font-weight: 900;
  text-align: left;
}

.current-reading-card__author {
  font-family: 'Mulish';
  font-size: 0.675rem;
  line-height: 0.875rem;
  font-weight: 600;
  color: #949494;
  text-align: left;
}

.current-reading-card__task {
  display: flex;
  width: 100%;
  height: -webkit-fit-content;
  height: fit-content;
  padding: 0;
  border-radius: 0.5rem;
  margin-top: auto;
  border: none; 
  align-items: center;
  gap: 0.5rem;
}

.current-reading-card__task__info {
  align-items: flex-start;
  gap: 0.5rem;
}

.current-reading-card__task__type-label {
  font-family: 'Mulish';
  font-size: 0.75rem;
  line-height: 0.75rem;
  text-align: left;
}

.current-reading-card__task__title {
  font-family: 'Mulish';
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: 800;
  text-align: left;
}

.current-reading-card__task__arrow-icon {
  width: 0.375rem;
  height: 0.675rem;
  margin-left: auto;
  flex-shrink: 0;
}

.current-reading-card__task__arrow-icon * {
  color: var(--grey-dark);
}

.current-reading-card__progress {
  height: 0.5rem;
  flex-shrink: 0;
}

.current-reading-card__progress > .progress-bar__thumb {
  background-color: var(--accent-bright);
}
.pick-next-reading-card {
  width: 100%;
  height: 100%;
  gap: 1rem;
  align-items: flex-start;
}

.pick-next-reading-card__loader {
  margin: auto;
}

.pick-next-reading-card__title {
  font-family: "Mulish";
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25rem;

  color: var(--accent-bright);
}

.pick-next-reading-card__content {
  width: 100%;
  height: 100%;
  gap: 0.5rem;
}

.pick-next-reading-card__button {
  display: flex;
  width: 100%;
  height: -webkit-fit-content;
  height: fit-content;
  padding: 0;
  border-radius: 0.5rem;
  margin-top: auto;
  border: none; 
  align-items: center;
  gap: 2rem;
}

.pick-next-reading-card__course-list {
  width: 100%;
  justify-content: space-between;
  padding: 0.5rem 0;
}

.pick-next-reading-card__course-cover {
  width: 5rem;
  height: auto;
  min-height: 7.5rem;

  animation: float infinite 1.5s;
}

.pick-next-reading-card__course-cover > .placeholder-cover {
  display: flex;
}

.pick-next-reading-card__course-cover > .placeholder-cover::after {
  content: "?";
  font-family: 'Martel';
  font-size: 2rem;
  margin: auto;
}

.pick-next-reading-card__course-cover > .placeholder-cover > .placeholder-cover__cat-image {
  display: none;
}

.pick-next-reading-card__course-cover:nth-child(2) {
  animation-delay: 250ms;
}

.pick-next-reading-card__course-cover:nth-child(3) {
  animation-delay: 500ms;
}

.pick-next-reading-card__arrow-icon {
  width: 0.375rem;
  height: 0.675rem;
  margin-left: auto;
  flex-shrink: 0;
}

.pick-next-reading-card__arrow-icon * {
  color: var(--grey-dark);
}

.current-reading-widget {
  width: 100%;
  height: 12.5rem;
  padding: 0.75rem;
  border-radius: 1rem;
  border: 3px solid var(--accent-bright);
  background: color-mix(in srgb, var(--accent-bright) 5%, transparent 95%);
  box-shadow: 0px 4px 8px 0px color-mix(in srgb, var(--accent-bright) 35%, transparent 65%);
}

.current-reading-widget__loader {
  margin: auto;
}
.course-discussion-card {
  width: 100%;
  height: 100%;
  gap: 1rem;
  align-items: flex-start;
}

.course-discussion-card__title {
  font-family: "Mulish";
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25rem;

  color: var(--blue);
}

.course-discussion-card__content {
  width: 100%;
  height: 100%;
  gap: 0.5rem;
}

.course-discussion-card__info-wrap {
  width: 100%;
  height: 100%;
  gap: 0.5rem;
}

.course-discussion-card__task {
  display: flex;
  width: 100%;
  height: -webkit-fit-content;
  height: fit-content;
  padding: 0;
  border-radius: 0.5rem;
  margin-top: auto;
  border: none; 
  align-items: center;
  gap: 0.5rem;
}

.course-discussion-card__task__info {
  align-items: flex-start;
  gap: 0.5rem;
}

.course-discussion-card__task__type-label {
  font-family: 'Mulish';
  font-size: 0.75rem;
  line-height: 0.75rem;
  text-align: left;
}

.course-discussion-card__task__title {
  font-family: 'Mulish';
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: 800;
  text-align: left;
}

.course-discussion-card__task__arrow-icon {
  width: 0.375rem;
  height: 0.675rem;
  margin-left: auto;
  flex-shrink: 0;
}

.course-discussion-card__task__arrow-icon * {
  color: var(--grey-dark);
}

.current-discussion-widget {
  width: 100%;
  padding: 0.75rem;
  border-radius: 1rem;
  border: 3px solid var(--blue);
  background: color-mix(in srgb, var(--blue) 5%, transparent 95%);
  box-shadow: 0px 4px 8px 0px color-mix(in srgb, var(--blue) 35%, transparent 65%);
}
.learning-page {
  width: 100%;
  height: 100%;
}

.learning-page__loader {
  margin: auto;
}

.learning-page__header {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  width: 100%;
  height: 7.5rem;
  padding: 0.675rem 0.25rem 0.75rem;
  border-bottom-left-radius: 1.25rem;
  border-bottom-right-radius: 1.25rem;
  background-color: var(--accent-dark);
  align-items: center;
  gap: 0.75rem;
  z-index: 1;
}

.learning-page__content {
  gap: 1.25rem;
  align-items: center;
  padding: 1rem 1rem 2rem;
}

.learning-page__content__task-rings {
  position: relative;
  width: 10rem;
  height: 10rem;
  margin-top: 2rem;
  margin-bottom: 2.5rem;
}

.learning-page__content__reading-progress-ring,
.learning-page__content__word-practice-progress-ring,
.learning-page__content__conversation-practice-progress-ring {
  position: absolute;
}

.learning-page__content__reading-progress-ring {
  width: 100%;
  height: 100%;
}

.learning-page__content__reading-progress-ring > .CircularProgressbar-trail {
  stroke: rgba(239, 130, 211, 0.5);
}
.learning-page__content__reading-progress-ring > .CircularProgressbar-path {
  stroke: #FF54D3;
}

.learning-page__content__word-practice-progress-ring {
  width: calc(100% - 2.5rem + 4px);
  height: calc(100% - 2.5rem + 4px);
  top: calc(1.25rem - 2px);
  left: calc(1.25rem - 2px);
}

.learning-page__content__word-practice-progress-ring > .CircularProgressbar-trail {
  stroke: rgba(183, 233, 120, 0.5);
}
.learning-page__content__word-practice-progress-ring > .CircularProgressbar-path {
  stroke: #B7E978;
}

.learning-page__content__conversation-practice-progress-ring {
  width: calc(100% - 5rem + 4px);
  height: calc(100% - 5em + 4px);
  top: calc(2.5rem - 2px);
  left: calc(2.5rem - 2px);
}

.learning-page__content__conversation-practice-progress-ring > .CircularProgressbar-trail {
  stroke: color-mix(in srgb, var(--blue) 50%, transparent 50%)
}
.learning-page__content__conversation-practice-progress-ring > .CircularProgressbar-path {
  stroke: #81A1FF;
}

@media screen and (min-width: 768px) {
  .learning-page {
    max-width: 400px;
    margin: auto;
  }
  
  .learning-page__header {
    position: relative;
    z-index: unset;
    border-radius: 1.25rem;
  }

  .learning-page__content {
    padding-bottom: unset;
  }
}

.content-fragment-count-label {
  align-items: center;
  gap: 0.25rem;
}

.content-fragment-count-label__icon {
  display: flex;
  flex-shrink: 0;
  object-fit: contain;
  width: 0.75rem;
  height: 0.75rem;
}

.content-fragment-count-label__text {
  font-family: 'Mulish';
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--grey-dark);
}
.course-tag-badge-list {
  flex-wrap: wrap;
  gap: 0.25rem;
  row-gap: 0.25rem;
  justify-content: center;
}

.course-tag-badge-list__tag {
  border-radius: 0.375rem;
}

.course-tag-badge-list__tag > .course-tag-badge__text {
  font-size: 0.75rem;
  line-height: 1rem;
}
.reading-selection-screen {
  position: relative;
  width: 100%;
  height: 100%;
}

.reading-selection-screen__selection-layer {
  width: 100%;
  height: 100%;

  animation: fade-in 500ms forwards;
}

.reading-selection-screen__selection-layer.hidden {
  animation: fade-out 500ms forwards;
}

.reading-selection-screen__back-button {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
}

.reading-selection-screen__left-fade-gradient,
.reading-selection-screen__right-fade-gradient {
  position: absolute;
  height: 100%;
  width: 0.75rem;
  z-index: 1;
}
.reading-selection-screen__left-fade-gradient {
  background: linear-gradient(-90deg, rgba(250, 250, 250, 0) 0%, #fafafa 70%);
  left: 0;
}
.reading-selection-screen__right-fade-gradient {
  background: linear-gradient(90deg, rgba(250, 250, 250, 0) 0%, #fafafa 70%);
  right: 0;
}

.reading-selection-screen__content {
  width: 100%;
  height: 100%;
  align-items: center;
  padding: 2rem 1rem 0rem;
}

.reading-selection-screen__title {
  font-family: "Martel";
  font-size: 1.75rem;
  line-height: 2rem;
  font-weight: 900;
  text-align: center;

  margin-top: 2rem;
  margin-bottom: 2rem;
}

.reading-selection-screen__carousel-wrap {
  position: relative;
  width: 100vw;
  overflow: hidden;
  background: linear-gradient(180deg, #fafafa 0%, #9fb6f9 44%, #fafafa 100%);
}

.reading-selection-screen__carousel {
  width: calc(100% + 15rem);
  margin-left: -7.5rem;
  padding: 0.5rem 0;
}

.reading-selection-screen__carousel > .swiper-wrapper {
  align-items: center;
}

.reading-selection-screen__carousel-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  animation: float infinite 1.5s;
}

.reading-selection-screen__course-cover {
  width: 10rem;
  height: auto;
  min-height: 15.25rem;
}

.reading-selection-screen__carousel
  .swiper-slide-active
  .reading-selection-screen__course-cover {
  width: 14rem;
  height: auto;
  min-height: 21.25rem;
}

.reading-selection-screen__course-info {
  padding: 1rem;
  align-items: center;
}

.reading-selection-screen__course-name {
  font-family: "Martel";
  font-size: 1.25rem;
  line-height: 1.5rem;
  font-weight: 700;
  text-align: center;
}

.reading-selection-screen__course-author {
  font-family: "Mulish";
  font-size: 0.875em;
  line-height: 1rem;
  font-weight: 500;
  text-align: center;

  margin-top: 0.5rem;
}

.reading-selection-screen__course-description {
  max-width: 90%;

  font-family: "Mulish";
  font-size: 0.875em;
  line-height: 1.25rem;
  font-weight: 500;
  text-align: center;

  margin-top: 1rem;
}

.reading-selection-screen__course-tag-list {
  margin-top: 1rem;
}

.reading-selection-screen__course-details {
  margin-top: 1rem;
  gap: 1.25rem;
}

.reading-selection-screen__footer {
  margin-top: auto;
  width: 100vw;
  overflow: hidden;
}

.reading-selection-screen__cta {
  width: 100%;
  max-width: 350px;
  height: 2.75rem;
  margin-bottom: 0.5rem;
}

.reading-selection-screen__selected-course-background-cover {
  position: fixed;
  align-self: center;
  
  width: 16rem;
  height: auto;
  min-height: 23.5rem;
  top: calc(50% - 11.75rem);

  filter: blur(3rem);
  transform: scale(2);

  opacity: 0;

  animation: fade-in 1000ms forwards 250ms,
    fade-out 500ms forwards 1750ms;
}

.reading-selection-screen__selected-course-cover {
  position: fixed;
  align-self: center;
  
  width: 14rem;
  height: auto;
  min-height: 21.25rem;
  top: calc(50% - 10.75rem);

  animation: slide-down 500ms forwards, fade-in 500ms forwards,
    selected-course-cover-zoom 1500ms forwards 500ms,
    fade-out 500ms forwards 1750ms;
}

.reading-selection-screen__selected-course-background-cover > .course-cover__image,
.reading-selection-screen__selected-course-cover > .course-cover__image {
  background-color: none;
  box-shadow: none;
}

@media screen and (min-width: 768px) {
  .reading-selection-screen {
    max-width: 700px;
    margin: 0 auto;
  }

  .reading-selection-screen__content {
    padding: 0;
  }

  .reading-selection-screen__carousel-wrap {
    width: 100%;
    box-shadow: inset 0 0 1rem 1rem #fafafa;
  }

  .reading-selection-screen__carousel {
    width: 100%;
    margin-left: 0;
  }

  .reading-selection-screen__cta {
    margin-bottom: 0;
  }
}

@keyframes selected-course-cover-zoom {
  0% {
    transform: scale(1);
  }
  80% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(2);
  }
}
.welcome-page-background {
  width: 100%;
  height: 100%;
}

.welcome-page-background.mobile::before {
  position: fixed;
  content: "";
  display: flex;
  width: 100%;
  height: 1rem;
  z-index: 1;
  top: 0;
  left: 0;
  background: linear-gradient(0deg, rgba(250, 250, 250, 0) 0%, #fafafa 70%);
}

.welcome-page-background.mobile::after {
  position: fixed;
  content: "";
  display: flex;
  width: 100%;
  height: 1rem;
  z-index: 1;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(250, 250, 250, 0) 0%, #fafafa 70%);
}

.welcome-page-background__blob-top-left {
  position: absolute;
  top: 0;
  left: 0;
}

.welcome-page-background__star-top-right {
  position: absolute;
  top: 0;
  right: 0;
}

.welcome-page-background__blob-bottom-left {
  position: absolute;
  bottom: 0;
  left: 0;
}

.welcome-page-background__blob-bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
}

.welcome-page-background__rocket-bottom-right {
  position: absolute;
  bottom: 6rem;
  right: 4.5rem;
}

.welcome-page-background__cat-bottom-right {
  position: absolute;
  bottom: 0.75rem;
  right: 0;
}

.welcome-page-title {
  position: relative;
}

.welcome-page-title__text {
  z-index: 1;
}

.welcome-page-title__text * {
  font-family: 'Mulish';
  font-size: 2.25rem;
  line-height: 2.75rem;
  font-weight: 900;
  margin: 0;
}

.welcome-page-title__text strong {
  font-weight: 900;
  color: var(--accent-dark);
}

.welcome-page-title__star-icon {
  position: absolute;
  top: calc(65%);
  left: calc(40%);

  animation: star-rotate-and-pulse 7s infinite ease-in-out;
  z-index: 0;
}


@keyframes star-rotate-and-pulse {
  0% {
    transform: rotate(0deg) scale(1);
  }
  12% {
    transform: rotate(5deg) scale(1.2);
  }
  25% {
    transform: rotate(0deg) scale(1);
  }
  37% {
    transform: rotate(-10deg) scale(1.15);
  }
  50% {
    transform: rotate(0deg) scale(1);
  }
  63% {
    transform: rotate(15deg) scale(1.4);
  }
  75% {
    transform: rotate(0deg) scale(1);
  }
  87% {
    transform: rotate(-5deg) scale(0.9);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}
.welcome-page {
  width: 100%;
  height: 100%;
  margin: auto;

  animation: fade-in forwards 2s;
}

.welcome-page__background {
  position: fixed;
  top: 0;
  left: 0;
}

.welcome-page__content {
  width: 100%;
  max-width: 350px;
  z-index: 1;
  margin: auto;
  gap: 1rem;
}

.welcome-page__cta {
  width: 100%;
  height: 3.25rem;
}

.welcome-page__already-registered-wrap {
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.welcome-page__already-registered {
  font-family: 'Mulish';
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  text-align: center;
  color: var(--grey-dark);
  flex-shrink: 0;
}

.welcome-page__hr {
  height: 1px;
  background-color: #C2C2C2;
  width: 100%;
}
.open-registration-form-label__text {
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  font-family: "Mulish";
  color: #707070;
}

.open-registration-form-label__registration-form-button {
  height: unset;
  font-size: 16px;
  line-height: 24px;
  color: var(--purple);
  text-align: center;
  border: none;
  padding: unset;
}

.auth-form-input {
  width: 100%;
  height: 52px;
  padding: 14px 18px;
  background: #f4f4f4;
  border-radius: 7px;
  border: none;
  font-family: 'Mulish';
  font-size: 16px;
  line-height: 24px;
}

.auth-form-input:-ms-input-placeholder {
  color: #7e7e7e;
}

.auth-form-input::placeholder {
  color: #7e7e7e;
}

.auth-form-input:focus {
  border: unset;
  box-shadow: unset;
}

.neutral-password-input {
  background-color: #f4f4f4;
  border-radius: 7px;
}

.neutral-password-input__visibility-button {
  border: none;
  padding: unset;
  display: flex;
  height: 30px;
  width: 30px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
  margin-right: 18px;
  margin-left: 10px;
}

.auth-form-password-input {
  width: 100%;
  height: 52px;
}
.auth-form-error-text {
  margin-top: 10px;
  font-size: 14px;
  line-height: 21px;
  text-align: center;
  color: #d22c75;
}
.auth-form-accent-button {
  width: 100%;
  height: 60px;
  padding: unset;
}
.sign-in-with-google-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: unset;
  height: 54px;
  width: 100%;
  max-width: 350px;
  border-radius: 6px;
  border: 1px solid #000;
  background: #FFF;
}

.sign-in-with-google-button__google-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  margin-right: 10px;
}

.sign-in-with-google-button__text {
  font-size: 18px;
  line-height: 28px;
  font-family: 'Roboto';
}
.sign-in-with-facebook-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: unset;
  height: 28px;
  width: 28px;
  border: unset;
}

.sign-in-with-facebook-button__facebook-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sign-in-with-apple-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: unset;
  padding: unset;
  height: 54px;
  width: 100%;
  max-width: 350px;
  border-radius: 4px;
}

.sign-in-with-apple-button__inner-button {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.sign-in-with-services-form {
  width: 100%;
  align-items: center;
  gap: 15px;
}

.sign-in-form {
  width: 100%;
  align-items: center;
}

.sign-in-form__sign-in-with-services-form {
  margin-bottom: 16px;
}

.sign-in-form__or-text {
  margin-bottom: 16px;
  color: #707070;
}

.sign-in-form__password-recovery-button {
  margin-left: auto;
  margin-top: 9px;
  margin-bottom: 4px;
  height: unset;
  font-size: 13px;
  line-height: 24px;
  color: var(--purple);
  text-align: right;
  border: none;
  padding: unset;
}

.sign-in-form__sign-in-button {
  margin-top: 23px;
}
.integrated-sign-in-form {
  width: 100%;
  align-items: center;

  opacity: 0;
  animation: forwards fade-in 500ms;
}

.integrated-sign-in-form__registration-form-label {
  margin-top: 23px;
  margin-bottom: 30px;
}

.neutral-checkbox-with-label > .checkbox-with-label__checkbox {
  position: relative;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 2px;
  border: 1px solid black;
  padding: unset;
  line-height: 90%;
  font-size: 0;
}

.neutral-checkbox-with-label > .checkbox-with-label__checkbox.checked {
  background-color: var(--light-green);
}

.neutral-checkbox-with-label > .checkbox-with-label__label {
  font-size: 18px;
  line-height: 25px;
  margin-left: 13px;
  color: black;
}

.auth-form-legal-note {
  font-family: "Mulish";
  font-size: 14px;
  line-height: 18px;
  text-align: center;
  color: #7d7d7d;
}

.auth-form-legal-note__link {
  font-family: "Mulish";
  font-size: 14px;
  line-height: 18px;
  text-decoration: none;
  color: var(--purple);
}
.registration-form {
  width: 100%;
  align-items: center;
}

.registration-form__sign-in-with-services-form {
  margin-bottom: 16px;
}

.registration-form__or-text {
  margin-bottom: 16px;
  color: #707070;
}

.registration-form__notification-consent {
  width: 100%;
  margin-top: 18px;
}

.registration-form__notification-consent > .checkbox-with-label__checkbox.checked {
  background-color: var(--purple);
}

.registration-form__notification-consent > .checkbox-with-label__label {
  margin-left: 9px;
  font-family: "Mulish";
  font-size: 16px;
  line-height: 24px;
}

.registration-form__continue-button,
.registration-form__registration-button {
  margin-top: 23px;
}

.registration-form__already-registered-text {
  margin-top: 20px;
  font-size: 16px;
  line-height: 21px;
  text-align: center;
}

.registration-form__legal-note {
  margin-top: 13px;
}
.open-sign-in-form-label__text {
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  font-family: "Mulish";
  color: #707070;
}

.open-sign-in-form-label__sign-in-button {
  height: unset;
  font-size: 16px;
  line-height: 24px;
  color: var(--purple);
  text-align: center;
  border: none;
  padding: unset;
}

.integrated-registration-form {
  width: 100%;
  align-items: center;

  opacity: 0;
  animation: forwards fade-in 500ms;
}

.integrated-registration-form__open-sign-in-form-label {
  margin-top: 23px;
  margin-bottom: 30px;
}

.password-recovery-form {
  width: 100%;
  align-items: center;
}

.password-recovery-form__password-input {
  margin-top: 23px;
}

.password-recovery-form__code-requirement-text {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.5);
  text-align: center;
}

.password-recovery-form__recovery-button {
  margin-top: 23px;
}

.integrated-password-recovery-form {
  width: 100%;
  align-items: center;

  opacity: 0;
  animation: forwards fade-in 500ms;
}

.integrated-password-recovery-form__open-registration-form-label {
  margin-top: 23px;
}

.integrated-password-recovery-form__open-sign-in-form-label {
  margin-top: 10px;
}

.auth-page {
  width: 100%;
  height: 100%;
}

.auth-page__content {
  width: 100%;
  height: 100%;
  max-width: 350px;
  margin: auto;
  align-items: center;
  justify-content: center;
}

.auth-page__loader-wrap {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #ffffffbe;
  z-index: 2;
  top: 0;
  left: 0;
}

.auth-page__loader {
  margin: auto;
}

.course-page-header {
  align-items: center;
  justify-content: space-between;
}

.course-page-header__controls {
  height: 100%;
  align-items: center;
  gap: 0.5rem;
}

.course-page-header__bookmark-button {
  height: 100%;
}
.course-page-layout {
  width: 100%;
  height: 100%;
  padding: 1.75rem 1rem 1rem;
}

.course-page-layout__header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3.5rem;
  padding: 1.75rem 1rem 0.5rem;
  background-color: #fafafa;
  z-index: 1;
}

.course-page-layout__content {
  width: 100%;
  height: 100%;
}

.course-page-layout.with-header > .course-page-layout__content {
  padding-top: calc(3.5rem - 0.5rem); /* Height of header - Header bottom padding */
}

.course-page-layout.with-header > .course-page-layout__content::before {
  position: fixed;
  content: "";
  display: flex;
  width: 100%;
  height: 10px;
  z-index: 1;
  top: 3.5rem;
  left: 0;
  background: linear-gradient(0deg, rgba(250, 250, 250, 0) 0%, #fafafa 70%);
}

@media screen and (min-width: 768px) {
  .course-page-layout {
    padding: 0;
  }

  .course-page-layout__header {
    display: none;
  }

  .course-page-layout.with-header > .course-page-layout__content {
    padding-top: 0;
  }

  .course-page-layout.with-header > .course-page-layout__content::before {
    display: none;
  }
}

.course-card-vertical {
  display: flex;
  flex-direction: column;
  padding-top: 0.75rem;
  width: 8rem;
  text-decoration: none;
  flex-shrink: 0;
  overflow: hidden;
}

.course-card-vertical__cover-wrap {
  align-items: center;
  position: relative;
}

.course-card-vertical__cover {
  width: 6rem;
  height: 9rem;
}

.course-card-vertical__progress-bar {
  margin-top: 0.5rem;
}

.course-card-vertical__info {
  margin-top: 0.75rem;
  gap: 0.325rem;
  flex-shrink: 0;
}

.course-card-vertical__name {
  font-family: 'Martel';
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 800;
  color: black;
}

.course-card-vertical__author {
  font-family: 'Mulish';
  font-weight: 400;
  font-size: 0.625rem;
  line-height: 0.875rem;
  color: #7d7d7d;

  /* Ограничиваем длину текста 2 строками, и все что не поместилось заменяем на "..." */
  line-clamp: 2;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

.course-card-vertical__subtitle {
  font-family: 'Mulish';
  font-weight: 400;
  font-size: 0.625rem;
  line-height: 0.875rem;

  /* Ограничиваем длину текста 3 строками, и все что не поместилось заменяем на "..." */
  line-clamp: 3;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media screen and (min-width: 768px) {
  .course-card-vertical {
    width: 10rem;
  }

  .course-card-vertical__cover {
    width: 8rem;
    height: 12rem;
  }

  .course-card-vertical__name {
    font-size: 1rem;
    line-height: 1.25rem;
  }

  .course-card-vertical__author {
    font-size: 0.875rem;
    line-height: 1.125rem;
  }

  .course-card-vertical__subtitle {
    font-size: 0.875rem;
    line-height: 1.125rem;
  }
}


.might-like-scroll__loader {
  margin: auto;
}

.might-like-scroll > .horizontal-scroll-with-fades__scroll {
  gap: 0.75rem;
}

@media screen and (min-width: 768px) {
  .might-like-scroll > .horizontal-scroll-with-fades__scroll {
    gap: 1.25rem;
  }
}

.lesson-start-label {
  align-items: center;
}

.lesson-start-label__icon {
  width: 9px;
  height: 14px;
  object-fit: contain;
  flex-shrink: 0;
  margin-left: 10px;
}
.lesson-finished-label {
  align-items: center;
}

.lesson-finished-label__icon {
  width: 18px;
  height: 13px;
  object-fit: contain;
  flex-shrink: 0;
  margin-left: 10px;
}
.course-lesson-list-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: -webkit-fit-content;
  height: fit-content;
  padding: 1rem;
  text-decoration: none;
  border-radius: 10px;
  border: 1px solid black;
}

.course-lesson-list-item.coming-soon > .course-lesson-list-item__content-wrap,
.course-lesson-list-item.finished > .course-lesson-list-item__content-wrap {
  opacity: 0.5;
}

.course-lesson-list-item.finished {
  border-color: var(--green);
}

.course-lesson-list-item.coming-soon {
  pointer-events: none;
}

.course-lesson-list-item__name {
  margin-bottom: 8px;
  line-height: 27px;
}

.course-lesson-list-item__number {
  line-height: 27px;
  margin-right: 9px;
}

.course-lesson-list-item__free-content-label {
  position: absolute;
  right: -15px;
  top: 0px;
  border: 1px solid black;
  border-right: none;
  background-color: var(--light-green);
}

.course-lesson-list-item__labels-wrap {
  position: relative;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.course-lesson-list-item__content-wrap {
  width: 100%;
}

.course-lesson-list-item__text-wrap {
  width: 100%;
}

.course-lesson-list {
  height: 100%;
}

.course-lesson-list__list-wrap {
  gap: 28px;
}

.course-lesson-list__list-wrap > .course-lesson-list-item {
  width: 100%;
}
.course-info {
  height: 100%;
}

.course-info__cover-wrap {
  width: -webkit-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: fit-content;
  margin: 0px auto;
}

.course-info__cover {
  width: 9rem;
  height: 13.5rem;
}

.course-info__cover > .course-cover__bookmark-button {
  display: none; /* Hiding bookmark button on mobile, since the button is available in the header */
}

.course-info__progress-bar {
  margin-top: 11px;
}

.course-info__primary-info {
  margin: 1rem auto 0;
  max-width: 22.5rem;
  align-items: center;
  gap: 0.25rem;
}

.course-info__title {
  font-size: 1.25rem;
  line-height: 1.5rem;
  font-weight: 700;
  text-align: center;
}

.course-info__subtitle,
.course-info__author {
  font-family: 'Mulish';
  font-size: 1rem;
  line-height: 1.5rem;
  text-align: center;
}

.course-info__author {
  color: #7d7d7d;
}

.course-info__course-tag-list {
  margin: 0.5rem 0;
}

.course-info__details {
  margin-top: 0.5rem;
  align-items: center;
  gap: 1rem;
}

.course-info__content {
  margin: 35px 0px;
  gap: 35px;
}

.course-info__content .course-info__about-book__title,
.course-info__content .course-lesson-list__title,
.course-info__content .might-like-scroll__title {
  font-size: 21px;
  line-height: 27px;
  margin-bottom: 15px;
}

.course-info__sticky-footer-overlay {
  bottom: 4rem; /* Adjusting sticky footer because of the bottom menu */
}

@media screen and (min-width: 768px) {
  .course-info__cover {
    width: 10.75rem;
    height: 16rem;
  }

  .course-info__cover > .course-cover__bookmark-button {
    display: block;
    top: -0.25rem;
    left: 0.75rem;
    width: 1.5rem;
    height: 1.5rem;
  }

  .course-info__sticky-footer-overlay {
    bottom: 0px;
  }

  .course-info__content {
    margin: 45px 0px;
    gap: 45px;
  }

  .course-info__content .course-info__about-book__title,
  .course-info__content .course-lesson-list__title,
  .course-info__content .might-like-scroll__title {
    font-size: 24px;
    line-height: 36px;
  }
}

.content-level-switch {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.content-level-switch__label {
  font-size: 0.75rem;
  line-height: 0.75rem;
  font-family: 'Mulish';
  font-weight: 700;
}

.content-level-switch__button-wrap {
  border-radius: 5px;
  border: 1px solid black;
}

.content-level-switch__button-wrap > .content-level-switch__button:not(:last-child) {
  border-right: inherit;
}

.content-level-switch__button-wrap > .content-level-switch__button:first-child {
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}
.content-level-switch__button-wrap > .content-level-switch__button:last-child {
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
}

.content-level-switch__button {
  height: 30px;
  width: 100px;
  border: none;
  padding: unset;
  border-radius: unset;
  font-size: 14px;
  line-height: 18px;
  font-family: 'Mulish';
  color: black;
}

.content-level-switch__button.active {
  background-color: var(--yellow);
}

@media screen and (min-width: 768px) {
  .content-level-switch {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }

  .content-level-switch__label {
    font-size: 16px;
    line-height: 18px;
  }
}
.course-lesson-name {
  align-items: flex-start;
  gap: 1rem;
}

.course-lesson-name__number {
  width: 39px;
  height: 56px;
  background: var(--purple);
  border-radius: 0px 0px 6px 6px;
  font-family: "Jost";
  font-weight: 400;
  font-size: 25px;
  line-height: 56px;
  color: white;
  text-align: center;
  flex-shrink: 0;
}

.high-five-to-complete-button {
  width: 100%;
  align-items: center;
  gap: 1.25rem;
}

.high-five-to-complete-button__text {
  font: var(--font-regular-mulish);
  font-weight: 900;
  text-align: center;
}

.high-five-to-complete-button__button {
  position: relative;
  display: flex;
  border: none;
  padding: 0;
  width: 8.5rem;
  height: 8.5rem;
  align-items: center;
  justify-content: center;
}

.high-five-to-complete-button__button__wave-animation {
  width: 6rem;
  height: 6rem;
  left: -1px;
}
.high-five-to-complete-button__button__wave-animation span::before,
.high-five-to-complete-button__button__wave-animation span::after {
  animation-duration: 1.4s;
}

.high-five-to-complete-button__button__image {
  position: absolute;
  width: 75%;
  height: 75%;
  animation: aw-rotate-and-pulse 7s infinite ease-in-out;
}

.high-five-to-complete-button.clicked .high-five-to-complete-button__button__image {
  animation: paw-pulse-on-click 250ms forwards ease-in-out;
}

@keyframes paw-rotate-and-pulse {
  0% {
    transform: rotate(0deg) scale(1);
  }
  12% {
    transform: rotate(5deg) scale(1.05);
  }
  25% {
    transform: rotate(0deg) scale(1);
  }
  37% {
    transform: rotate(-5deg) scale(1.05);
  }
  50% {
    transform: rotate(0deg) scale(1);
  }
  63% {
    transform: rotate(5deg) scale(1.05);
  }
  75% {
    transform: rotate(0deg) scale(1);
  }
  87% {
    transform: rotate(-5deg) scale(1.05);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}

@keyframes paw-pulse-on-click {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.85);
  }
  85% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.course-lesson-continue-button__continue-button {
  height: 60px;
  max-width: 450px;
}

.course-lesson-reading-progress-bar {
  width: 100%;
  height: 0.25rem;
  border-radius: 0;
  background-color: white;
}

.course-lesson-reading-progress-bar > .progress-bar__thumb {
  transition: width linear 50ms;
}
.answer-question-button {
  width: 100%;
  max-width: 450px;
  height: 60px;
  margin: 35px auto 0px;
}

.answer-question-button.loading {
  opacity: 1;
}

.answer-question-button__loader {
  margin: auto;
}
.lesson-advices-with-gif__image-gif {
  position: relative;
  align-items: center;
  margin: auto;
  width: 10rem;
  height: 10rem;
}

.lesson-advices-with-gif__gif {
  position: absolute;
  width: 100%;
  height: 100%;
}

.lesson-advices-with-gif__image {
  position: absolute;
  width: 100%;
  height: 100%;
}

.lesson-advices-with-gif__advice-text {
  margin-top: 1rem;
}

.lesson-image {
  max-width: 100%;
  min-height: 200px;
  object-fit: scale-down;
  flex-shrink: 0;
  flex-grow: 0;
}
.markdown-vocabulary-word__inline-hint-wrapper {
  display: inline-flex;
}

.markdown-vocabulary-word__inline-hint-wrapper > .inline-hint-wrapper__focused-element {
  background-color: #fafafa;
  padding: 0 0.25rem;
  border-radius: 0.25rem;
}

.markdown-vocabulary-word {
  position: relative;
  display: contents;
  padding: unset;
  border: none;
  font-size: inherit;
  font-style: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  cursor: pointer;
}

@media (hover: hover) {
  .markdown-vocabulary-word:hover {
    animation: hide-on-hover 150ms forwards 250ms;
  }
  
  .markdown-vocabulary-word:hover::after {
    position: absolute;
    content: '';
    white-space: nowrap;
    
    animation: pop-on-hover 350ms forwards 250ms;
  }
}

.markdown-vocabulary-word.focused {
  visibility: hidden;
}

.markdown-vocabulary-word.focused::after {
  position: absolute;
  white-space: nowrap;

  visibility: visible;
  content: attr(data-content);
  background-color: var(--light-green);
  transform: translateX(-100%) scale(1);

  animation: pop-on-hover 350ms forwards;
}

.markdown-vocabulary-word.unfocusing {
  visibility: hidden;
}

.markdown-vocabulary-word.unfocusing::after {
  position: absolute;
  white-space: nowrap;

  visibility: visible;
  content: attr(data-content);
  background-color: var(--light-green);
  transform: translateX(-100%) scale(1);
  animation: pop-on-unfocus 750ms forwards 150ms;
}

@keyframes hide-on-hover {
  from {
    visibility: hidden;
  }
  to {
    visibility: hidden;
  }
}

@keyframes pop-on-hover {
  0% {
    visibility: visible;
    content: attr(data-content);
    background-color: transparent;
    transform: translateX(-100%) scale(1);
  }
  45% {
    transform: translateX(-100%) scale(0.9);
  }
  100% {
    visibility: visible;
    content: attr(data-content);
    background-color: var(--light-green);
    transform: translateX(-100%) scale(1);
  }
}

@keyframes pop-on-unfocus {
  0% {
    visibility: visible;
    content: attr(data-content);
    background-color: var(--light-green);
    transform: translateX(-100%) scale(1.05);
  }
  65% {
    transform: translateX(-100%) scale(0.9);
  }
  100% {
    visibility: visible;
    content: attr(data-content);
    background-color: transparent;
    transform: translateX(-100%) scale(1);
  }
}

.lesson-prompt-sequence-item__next-prompt-button {
  margin: 15px auto 0px;
  height: 60px;
  width: 100%;
  max-width: 450px;
}

.lesson-prompt-sequence__sequence-item {
  margin-top: 20px;
}

.lesson-question-fact-or-fiction__title {
  padding: 6px 12px;
  margin-bottom: 11px;
  width: 100%;
  background: var(--violet);
}

.lesson-question-fact-or-fiction__option {
  margin: 10px 0px;
}

.lesson-question-fact-or-fiction__option.correct
  > .radio-with-label__radio.selected {
  background-color: var(--green);
}

.lesson-question-fact-or-fiction__option.incorrect
  > .radio-with-label__radio.selected {
  background-color: var(--red);
}

.lesson-question-fact-or-fiction__comment {
  margin-top: 11px;
}

.lesson-question-fact-or-fiction__image {
  max-width: 100%;
  min-height: 200px;
  object-fit: scale-down;
  flex-shrink: 0;
}

.lesson-question-fact-or-fiction__image-container {
  align-items: center;
  margin-top: 10px;
}

.lesson-question-sequence-item__text {
  font-weight: 600;
}

.lesson-question-sequence-item__option {
  margin-top: 15px;
}

.lesson-question-sequence-item__option.correct
  > .radio-with-label__radio.selected {
  background-color: var(--green);
}

.lesson-question-sequence-item__option.incorrect
  > .radio-with-label__radio.selected {
  background-color: var(--red);
}

.lesson-question-sequence-item__comment {
  margin-top: 20px;
}

.lesson-question-sequence-item__comment.correct {
  color: var(--green);
}

.lesson-question-sequence-item__comment.incorrect {
  color: var(--red);
}

.lesson-question-sequence__sequence-item {
  margin-top: 20px;
}

.lesson-question-sequence__final-comment {
  margin-top: 20px;
}

.lesson-question-with-multiple-answers__text {
  margin-bottom: 10px;
}

.lesson-question-with-multiple-answers__option {
  margin: 10px 0px;
}

.lesson-question-with-multiple-answers__option > .checkbox-with-label__label {
  margin-left: 11px;
}

.lesson-question-with-multiple-answers__comment {
  margin-top: 20px;
}
.answer-option-with-image {
  align-items: center;
}

.answer-option-with-image__image {
  margin-top: 20px;
  max-width: 100%;
  min-height: 200px;
  object-fit: scale-down;
  flex-shrink: 0;
}
.lesson-question-with-single-answer-and-images__text {
  margin-bottom: 10px;
}

.lesson-question-with-single-answer-and-images > .answer-option-with-image {
  margin: 10px 0px;
}

.lesson-question-with-single-answer-and-images__comment {
  margin-top: 20px;
}
.lesson-question-with-single-answer-and-video__text {
  margin-bottom: 10px;
}

.lesson-question-with-single-answer-and-video__video {
  margin: 10px 0px;
  max-width: 100%;
  min-height: 150px;
  object-fit: scale-down;
  flex-shrink: 0;
  flex-grow: 0;
}

.lesson-question-with-single-answer-and-video > .radio-with-label {
  margin: 10px 0px;
}

.lesson-question-with-single-answer-and-video__comment {
  margin-top: 20px;
}
.soundwave-loader {
  display: flex;
  justify-content: space-between;
  height: 64px;
  --boxSize: 8px;
  --gutter: 4px;
  width: calc((var(--boxSize) + var(--gutter)) * 5 - var(--gutter));
  flex-shrink: 0;
}

.soundwave-loader__box {
  transform: scaleY(0.4);
  height: 100%;
  width: var(--boxSize);
  background: var(--accent);
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  border-radius: 8px;
}

.soundwave-loader__box-1 {
  animation-name: quiet;
}

.soundwave-loader__box-2 {
  animation-name: normal;
}

.soundwave-loader__box-3 {
  animation-name: quiet;
}

.soundwave-loader__box-4 {
  animation-name: loud;
}

.soundwave-loader__box-5 {
  animation-name: quiet;
}

@keyframes quiet {
  25% {
    transform: scaleY(0.6);
  }
  50% {
    transform: scaleY(0.4);
  }
  75% {
    transform: scaleY(0.8);
  }
}

@keyframes normal {
  25% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.4);
  }
  75% {
    transform: scaleY(0.6);
  }
}
@keyframes loud {
  25% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.4);
  }
  75% {
    transform: scaleY(1.2);
  }
}

.audio-answer-player {
  width: 27px;
  height: 27px;
  border: none;
  padding: unset;
  display: flex;
  flex-shrink: 0;
  flex-grow: 0;
}

.audio-answer-player__soundwave {
  height: inherit;
  --boxSize: 3px;
  --gutter: 3px;
}

.audio-answer-player__icon {
  width: inherit;
  height: inherit;
  object-fit: contain;
  flex-shrink: 0;
}
.audio-answer-option {
  align-items: center;
}

.audio-answer-option__radio-with-label {
  margin-right: auto;
}

.audio-answer-option > .audio-answer-player {
  margin-left: 11px;
}
.lesson-question-with-single-audio-answer__text {
  margin-bottom: 10px;
}

.lesson-question-with-single-audio-answer > .audio-answer-option {
  margin: 10px 0px;
}

.lesson-question-with-single-audio-answer__comment {
  margin-top: 20px;
}
.look-for-analogues-question-answer {
  margin: 20px 0 30px;
}


.look-for-analogues-question-answer__label {
  min-width: 160px;
  margin-right: 10px;
}

.look-for-analogues-question-answer__button {
  background-color: #3f51b5;
  width: 140px;
  height: 30px;
  cursor: pointer;
}

.look-for-analogues-question-image {
  object-fit: cover;
  width: 273px;
  height: 273px;
  margin: 16px;
}
.lesson-question-look-for-analogues__image-list {
  flex-wrap: wrap;
  display: flex;
  margin: -19px;
}

.lesson-question-look-for-analogues__border {
  border-top: 2px solid black;
  width: 100%;
  margin-top: 56px;
}

@media screen and (max-width: 768px) {
  .lesson-question-look-for-analogues__image-list {
    justify-content: center;
  }
}
.lesson-questions-look-for-analogues_container {
  margin-top: 20px;
}
.lesson-question-with-input__title {
  margin-bottom: 6px;
}

.lesson-question-with-input__text {
  margin-bottom: 9px;
}

.lesson-question-with-input__input {
  padding: 5px 0;
  margin-bottom: 40px;
  border: none;
  outline: none;
  border-radius: 0;
  background-color: transparent;
  border-bottom: 2px solid black;
}

.lesson-question-with-input__input:focus {
  border:none;
  box-shadow: none;
  border-bottom: 2px solid black;
}

.lesson-question-with-input__input:-ms-input-placeholder {
  color: #00000080;
}

.lesson-question-with-input__input::placeholder {
  color: #00000080;
}


.lesson-question-with-single-answer-and-image__option {
  margin: 0px 25px 15px 0px;
  width: 150px;
}

.lesson-question-with-single-answer-and-image__image {
  max-width: 100%;
  min-height: 200px;
  object-fit: scale-down;
}
.lesson-question-with-single-answer-and-image__image_container {
  margin-bottom: 30px;
}

.lesson-question-with-single-answer-and-image__answers_container {
  margin: 30px 0 15px;
  max-width: 500px; 
  flex-wrap: wrap;
}

.lesson-questions-with-single-answer-and-image__comment {
  margin-top: 20px;
}



.lesson-video {
  width: -webkit-fit-content;
  width: fit-content;
  max-width: 100%;
  min-height: 150px;
  object-fit: scale-down;
  flex-shrink: 0;
  flex-grow: 0;
}
.lesson-section > * {
  margin: 12px 0;
}

.lesson-section > *:first-child {
  margin-top: 0;
}

.lesson-section > *:last-child {
  margin-bottom: 0;
}

.lesson-section > .lesson-image,
.lesson-section > .lesson-video {
  margin: 12px auto;
}

.course-lesson-content {
  position: relative;
  height: 100%;
}

.course-lesson-content.limited-preview::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(
    180deg,
    rgba(250, 250, 250, 0) 50%,
    rgba(250, 250, 250, 0.5) 70%,
    rgba(250, 250, 250, 1)
  );
  pointer-events: none;
}

.course-lesson-content__progress-bar {
  position: fixed;
  left: 0;
  top: 3.5rem; /* Fixed under mobile header */
  z-index: 1;
}

.course-lesson-content__header {
  position: -webkit-sticky;
  position: sticky;
  top: 3.75rem; /* Fixed under mobile header */
  width: 100%;
  z-index: 1;
}
.course-lesson-content__header__switch-wrap {
  width: 100%;
  align-items: flex-end;
  background-color: #fafafa;
}
.course-lesson-content__header__switch {
  width: -webkit-fit-content;
  width: fit-content;
  background-color: #fafafa;
  margin-left: auto;
  justify-content: flex-end;
  padding: 0.5rem 0.25rem 0.25rem;
  border-radius: 0.25rem;
}
.course-lesson-content__header__fade-overlay {
  width: 100%;
  height: 10px;
  background: linear-gradient(0deg, rgba(250, 250, 250, 0) 0%, #fafafa 70%);
}

.course-lesson-content > .course-lesson-name {
  margin-top: 20px;
  margin-bottom: 30px;
}

.course-lesson-content__section-list > .lesson-section {
  padding: 30px 0px;
}
.course-lesson-content__section-list > .lesson-section:first-of-type {
  padding-top: 0px;
}
.course-lesson-content__section-list > .lesson-section:last-of-type {
  padding-bottom: 0px;
}
.course-lesson-content__section-list > .lesson-section:not(:last-of-type) {
  border-bottom: 2px solid black;
}

.course-lesson-content__continue-button,
.course-lesson-content__offer-button {
  margin: 25px auto 0px;
  width: 100%;
}

.course-lesson-content__content-discussion-start-button {
  position: -webkit-sticky;
  position: sticky;
  margin-left: auto;
  bottom: 1.5rem;
}

@media screen and (min-width: 768px) {
  .course-lesson-content__header {
    top: 96px; /* Fixed under desktop header + 2px for header border + 4px for progress-bar */
  }

  .course-lesson-content__progress-bar {
    top: 92px; /* Fixed under desktop header + 2px for header border */
  }
}


.course-lesson-page {
  height: 100%;
}

.course-lesson-page > .course-page-layout > .course-page-layout__content::before {
  display: none;
}

.course-lesson-page__loader {
  margin: auto;
}
.course-page {
  width: 100%;
  height: 100%;
}

.course-page__loader {
  margin: auto;
}

.catalog-search-input {
  height: 2.5rem;
  width: 100%;
  border-radius: 5px;
  background-color: #F0F0F2;
  overflow: hidden;
  align-items: center;
  justify-content: flex-end;
  padding-right: 1rem;
}

.catalog-search-input__input {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  padding: 0.25rem 1rem;
  font-family: 'Mulish';
  font-weight: 600;
}

.catalog-search-input__input:-ms-input-placeholder {
  color: rgba(125, 125, 125, 1)
}

.catalog-search-input__input::placeholder {
  color: rgba(125, 125, 125, 1)
}

.catalog-search-input__input:focus {
  border: none;
  box-shadow: none;
}

.catalog-search-input__icon {
  display: flex;
  object-fit: contain;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.catalog-search-input__icon > * {
  color: #949494;
}
.cat-image-4 {
  object-fit: contain;
}
.catalog-empty-placeholder__text-first {
  margin-bottom: 30px;
  font-family: Martel;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  text-align: left;
}

.catalog-empty-placeholder__text-second {
  margin-bottom: 30px;
}

.catalog-empty-placeholder__textarea-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 20px;
}

.catalog-empty-placeholder__submit {
  width: 100%;
  height: 60px;
  margin-top: 20px;
}

.catalog-empty-placeholder__textarea {
  width: 100%;
  min-height: 99px;
  border-radius: 20px;
  border-color: black;

}

.catalog-empty-placeholder__success-text {
  margin: 0px auto 20px auto;
}

.catalog-empty-placeholder__cat-image {
  width: 141px;
  height: 135px;
  margin: auto;
}



@media screen and (min-width: 768px) {
  .catalog-empty-placeholder__textarea-wrap {
    margin: auto;
    flex-direction: row;
    margin-bottom: 20px;
  }

  .catalog-empty-placeholder__submit {
    width: 335px;
    margin: unset;
  }

  .catalog-empty-placeholder__textarea {
    width: 335px;
    margin-right: 30px;
  }
}

.catalog-tab-selector {
  width: 100%;
  gap: 0.5rem;
  align-items: center;
}

.catalog-tab-selector__tab-button {
  width: 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0;
  border-bottom: 3px solid var(--neutral);
  padding: 0;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 900;
  font-family: 'Martel';
  color: black;
}

.catalog-tab-selector__tab-button:not(.selected) {
  color: #949494;
}

.catalog-tab-selector__tab-button.selected {
  border-bottom-color: var(--light-green);
}
.catalog-tab-selector__tab-button:not(.selected):hover {
  border-bottom-color: color-mix(in srgb, var(--light-green) 50%, transparent 50%);
}

.catalog-tab-selector__tab-button.book.selected {
  border-bottom-color: var(--light-green);
}
.catalog-tab-selector__tab-button.book:not(.selected):hover {
  border-bottom-color: color-mix(in srgb, var(--light-green) 50%, transparent 50%);
}

.catalog-tab-selector__tab-button.fiction.selected {
  border-bottom-color: var(--accent-bright);
}
.catalog-tab-selector__tab-button.fiction:not(.selected):hover {
  border-bottom-color: color-mix(in srgb, var(--accent-bright) 50%, transparent 50%);
}

.catalog-tab-selector__tab-button.article.selected {
  border-bottom-color: var(--purple);
}
.catalog-tab-selector__tab-button.article:not(.selected):hover {
  border-bottom-color: color-mix(in srgb, var(--purple) 50%, transparent 50%);
}

.catalog-tab-selector__tab-button.news.selected {
  border-bottom-color: var(--orange);
}
.catalog-tab-selector__tab-button.news:not(.selected):hover {
  border-bottom-color: color-mix(in srgb, var(--orange) 50%, transparent 50%);
}

@media screen and (min-width: 768px) {
  .catalog-tab-selector__tab-button {
    font-size: 0.875rem;
  }
}
.course-group {
  position: relative;
}

.course-group__anchor {
  position: absolute;
  top: 50%;
}

.course-group__header {
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
}

.course-group__title {
  font-weight: 900;
  font-family: 'Martel';
  font-size: 1.125rem;
  line-height: 1.5rem;
}

.course-group__category-link {
  font-weight: 700;
  font-family: 'Mulish';
  font-size: 1.125rem;
  line-height: 1.5rem;
  text-decoration: none;
  color: var(--purple);
}

.course-group__course-list {
  margin-bottom: 0.5rem;
}

.course-group__course-list > .horizontal-scroll-with-fades__scroll {
  gap: 0.75rem;
}

@media screen and (min-width: 768px) {
  .course-group__title,
  .course-group__category-link {
    font-size: 1.5rem;
  }

  .course-group__course-list > .horizontal-scroll-with-fades__scroll {
    gap: 1.25rem;
  }
}

.highlighted-course-group-item {
  display: flex;
  flex-direction: column;
  padding-top: 0.75rem;
  width: 100%;
  height: 100%;
  text-decoration: none;
  flex-shrink: 0;
  overflow: hidden;
}

.highlighted-course-group-item__cover {
  margin: auto;
  width: 6rem;
  height: 9rem;
}

@media screen and (min-width: 768px) {
  .highlighted-course-group-item__cover {
    margin: auto;
    width: 8rem;
    height: 12rem;
  }
}
.highlighted-course-group {
  position: relative;
  width: 100vw;
  margin-left: -1rem;
  align-items: center;
  background: linear-gradient(180deg, #fafafa 0%, #9fb6f9 44%, #fafafa 100%);
  margin-bottom: 0.75rem;
}

.highlighted-course-group__anchor {
  position: absolute;
  top: 50%;
}

.highlighted-course-group__title {
  font-weight: 900;
  font-family: "Martel";
  font-size: 1.5rem;
  line-height: 1.75rem;
  margin-bottom: 0.75rem;
}

.highlighted-course-group__carousel {
  width: 100%;
  height: 13rem;
  z-index: 0;
  margin-bottom: 1.5rem;
}

.highlighted-course-group__carousel .swiper-slide-active .course-cover {
  width: 7.5rem;
  height: auto;
}

.highlighted-course-group__course-subtitle {
  max-width: 20rem;
  font-family: 'Mulish';
  font-size: 0.875rem;
  line-height: 1.5rem;
  text-align: center;
  margin-bottom: 1.25rem;
}

.highlighted-course-group__bookmark-button {
  width: 16rem;
}

@media screen and (min-width: 768px) {
  .highlighted-course-group {
    width: 100%;
    margin-left: unset;
    box-shadow: inset 0 0 1rem 1rem #fafafa;
  }

  .highlighted-course-group__carousel {
    height: 16rem;
  }

  .highlighted-course-group__carousel .swiper-slide-active .course-cover {
    width: 9.5rem;
    height: auto;
  }
}
.catalog-item-list {
  gap: 1rem;
}

.catalog-item-list::before {
  position: -webkit-sticky;
  position: sticky;
  content: "";
  display: flex;
  width: 100vw;
  height: 10px;
  z-index: 1;
  top: 0;
  margin-bottom: -25px;
  margin-left: -1rem;
  background: linear-gradient(0deg, rgba(250, 250, 250, 0) 0%, #fafafa 70%);
}

@media screen and (min-width: 768px) {
  .catalog-item-list::before {
    width: 100%;
    margin-left: 0;
  }  
}
.course-category-selector {
  height: 2rem;
}

.course-category-selector__item {
  display: flex;
  flex-shrink: 0;
  height: 100%;
  padding: 0.25rem 0.75rem;
  justify-content: center;
  cursor: pointer !important; /* For some reason dragging the list of buttons makes the cursor get stuck with "grabbing" style */
  align-items: center;
  border: 2px solid #333333;
  border-radius: 5px;

  font-size: 0.875rem;
  font-family: 'Mulish';
  font-weight: 700;
  line-height: 1.75rem;
}

.catalog-page {
  height: 100%;
  width: 100%;
  position: relative;
  padding: 1.75rem 1rem;
}

.catalog-page__loader {
  margin: auto;
}

.catalog-page__filters {
  padding-bottom: 1.5rem;
}

.catalog-page__filters,
.catalog-page__filers__top-group {
  width: 100%;
  justify-content: space-between;
  align-items: start;
  gap: 0.75rem;
}

.catalog-page__category-selector {
  width: 100%;
}

.catalog-page__news-banner {
  width: 100%;
  display: none;
}

@media screen and (min-width: 768px) {
  .catalog-page {
    padding: 0;
  }

  .catalog-page__filters {
    gap: 1.75rem;
  }

  .catalog-page__filers__top-group {
    flex-direction: row;
  }

  .catalog-page__tab-selector {
    max-width: 60%;
  }

  .catalog-page__search-input {
    max-width: 30%;
  }

  .catalog-page__news-banner {
    display: flex;
  }
}



.catalog-category-page-mobile-header {
  gap: 1rem;
  z-index: 1;
}

.catalog-category-page-mobile-header__title-wrap {
  position: relative;
  width: 100%;
  align-items: center;
}

.catalog-category-page-mobile-header__title {
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 900;
}

.catalog-category-page-desktop-header {
  gap: 1rem;
  align-items: center;
}

.catalog-category-page-desktop-header__title {
  pointer-events: none;
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.75rem;
  font-weight: 900;
}

.catalog-category-page-desktop-header__search-input {
  max-width: 40%;
  margin-left: auto;
}
.catalog-category-page-header.catalog-category-page-mobile-header {
  display: flex;
}

.catalog-category-page-header.catalog-category-page-desktop-header {
  display: none;
}

@media screen and (min-width: 768px) {
  .catalog-category-page-header.catalog-category-page-mobile-header {
    display: none;
  }
  
  .catalog-category-page-header.catalog-category-page-desktop-header {
    display: flex;
  }
}
.catalog-category-page {
  height: 100%;
  width: 100%;
  position: relative;
  padding: 1.75rem 1rem;
}

.catalog-category-page__header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 7.5rem;
  padding: 1.75rem 1rem 0.5rem;
  background-color: #fafafa;
}

.catalog-category-page__content {
  height: 100%;
  width: 100%;
  padding-top: calc(7.5rem - 0.5rem);
}

.catalog-category-page__loader {
  margin: auto;
}

.catalog-category-page__course-list::before {
  position: fixed;
  content: "";
  display: flex;
  width: 100%;
  height: 10px;
  z-index: 1;
  top: 7.5rem;
  left: 0;
  background: linear-gradient(0deg, rgba(250, 250, 250, 0) 0%, #fafafa 70%);
}

@media screen and (min-width: 768px) {
  .catalog-category-page {
    padding: 0;
  }

  .catalog-category-page__header {
    position: relative;
    height: unset;
    padding: 0;
    padding-bottom: 1.5rem;
  }

  .catalog-category-page__content {
    padding-top: 0;
  }

  .catalog-category-page__course-list::before {
    display: none;
  }
}

.language-selector-dropdown-item {
  display: flex;
  height: 2rem;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 1.5rem 0.25rem 0.5rem;
}

.language-selector-dropdown-item__text {
  font: var(--font-regular-mulish);
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.language-selector-dropdown-item__icon {
  height: 0.75rem;
}
.language-selector-dropdown {
  z-index: 1;
}

.language-selector-dropdown .dropdown__title:before {
  right: 0.5rem;
}

.vocabulary-test-screen-title {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 900;

  opacity: 0;
  animation: fade-in forwards 500ms, slide-down forwards 500ms;
  animation-delay: 0ms;
}
.vocabulary-test-screen-subtitle {
  font-size: 1rem;
  line-height: 1.5rem;

  opacity: 0;
  animation: fade-in forwards 500ms, slide-down forwards 500ms;
  animation-delay: 150ms;
}
.vocabulary-test-screen-cta {
  margin: auto auto 0;
  width: 100%;
  max-width: 20rem;

  opacity: 0;
  animation: fade-in forwards 500ms, slide-down forwards 500ms;
  animation-delay: 450ms;
}
.vocabulary-test-intro-screen {
  height: 100%;
  gap: 1rem;
}

.vocabulary-test-intro-screen__cat-image {
  margin: auto 0 0 auto;

  opacity: 0;
  animation: fade-in forwards 500ms, slide-down forwards 500ms;
  animation-delay: 450ms;
}

.vocabulary-test-intro-screen__cta {
  margin-top: 0;

  animation-delay: 300ms;
}
.vocabulary-test-phase-screen {
  height: 100%;
  gap: 1rem;
}

.vocabulary-test-phase-screen__word-list {
  max-width: 100%;
  flex-wrap: wrap;
  gap: 2rem;
  row-gap: 1rem;
  margin-top: 1rem;
  margin-bottom: 2rem;

  opacity: 0;
  animation: fade-in forwards 500ms, slide-down forwards 500ms;
  animation-delay: 300ms;
}

.vocabulary-test-phase-screen__word-list__word {
  width: 12rem;
}

.vocabulary-test-phase-screen__word-list__word > .checkbox {
  border-width: 2px;
  color: var(--purple);
  transition: all ease-in 50ms;
}

.vocabulary-test-phase-screen__word-list__word > .checkbox.checked {
  border-color: var(--purple);
}


.vocabulary-test-phase-screen__cta__loader {
  margin: auto;
  width: 1rem;
  height: 1rem;
}

.vocabulary-test-phase-screen__cta__loader > span {
  clip: rect(0.5rem, 1rem, 1rem, 0);
}
.share-button-list {
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}

.share-button-list__button {
  width: 2rem;
  height: 2rem;
}

.share-button-list__copy-link-button {
  padding: 0.25rem;
}
.share-button-with-label {
  width: 100%;
  max-width: 350px;
}

.share-button-with-label__button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.share-button-with-label__icon {
  width: 1.5rem;
  height: 1.5rem;
}

.share-button-with-label__label {
  font: var(--font-regular-mulish);
}
.vocabulary-proficiency-scale {
  max-width: 350px;
  gap: 0.5rem;
}

.vocabulary-proficiency-scale__scale {
  position: relative;
}

.vocabulary-proficiency-scale__scale__arrow {
  position: absolute;
  top: -0.75rem;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #333;
  transition: left 2s ease-in-out;
  z-index: 3;
}

.vocabulary-proficiency-scale__scale__fill,
.vocabulary-proficiency-scale__scale__segments {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}

.vocabulary-proficiency-scale__scale__fill {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  overflow: hidden;

  transition: width 2s ease-in-out;
}

.vocabulary-proficiency-scale__scale__segment {
  width: 2.5rem;
  height: 0.75rem;
  flex-shrink: 0;
  opacity: 0.5;
  border: 1px solid black;
}

.vocabulary-proficiency-scale__scale__segment:nth-child(1) {
  background-color: #d9534f;
}
.vocabulary-proficiency-scale__scale__segment:nth-child(2) {
  background-color: #f0ad4e;
}
.vocabulary-proficiency-scale__scale__segment:nth-child(3) {
  background-color: #f7ca18;
}
.vocabulary-proficiency-scale__scale__segment:nth-child(4) {
  background-color: #5bc0de;
}
.vocabulary-proficiency-scale__scale__segment:nth-child(5) {
  background-color: #60d692;
}
.vocabulary-proficiency-scale__scale__segment:nth-child(6) {
  background-color: #3fd83f;
}
.vocabulary-proficiency-scale__scale__segment:nth-child(7) {
  background-color: #05bc6c;
}

.vocabulary-proficiency-scale__scale__fill
  > .vocabulary-proficiency-scale__scale__segment {
  opacity: 1;
}

.vocabulary-proficiency-scale__labels {
  justify-content: space-between;
}

.vocabulary-proficiency-scale__labels__label {
  font-size: 0.75rem;
  line-height: 1.25rem;
  font-family: "Mulish";
  color: var(--grey-dark);
}

@media screen and (min-width: 768px) {
  .vocabulary-proficiency-scale {
    max-width: unset;
  }

  .vocabulary-proficiency-scale__scale__segment {
    width: 4rem;
  }
}
.vocabulary-test-result-screen {
  height: 100%;
  gap: 2rem;
  align-items: center;
}

.vocabulary-test-result-screen__result {
  margin-top: 2rem;
  gap: 1rem;
  align-items: center;

  opacity: 0;
  animation: fade-in forwards 500ms, slide-down forwards 500ms;
}

.vocabulary-test-result-screen__result__label {
  font-size: 1rem;
  line-height: 1.5rem;
  text-align: center;
}

.vocabulary-test-result-screen__result__value {
  font-size: 1.5rem;
  line-height: 1.75rem;
  font-weight: 900;
  font-family: 'Mulish';
  text-align: center;
}

.vocabulary-test-result-screen__result:nth-child(1) {
  animation-delay: 0ms;
}
.vocabulary-test-result-screen__result:nth-child(2) {
  animation-delay: 150ms;
}

.vocabulary-test-result-screen__scale {
  margin-top: 2rem;

  opacity: 0;
  animation: fade-in forwards 500ms, slide-down forwards 500ms;
  animation-delay: 300ms;
}

.vocabulary-test-result-screen__comment {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-family: 'Mulish';
  text-align: center;

  opacity: 0;
  animation: fade-in forwards 500ms, slide-down forwards 500ms;
  animation-delay: 450ms;
}

.vocabulary-test-result-screen__share-button {
  margin-top: auto;

  opacity: 0;
  animation: fade-in forwards 500ms, slide-down forwards 500ms;
  animation-delay: 600ms;
}

.vocabulary-test-result-screen__footer {
  width: 100%;
  margin-top: 1rem;
  gap: 1rem;

  opacity: 0;
  animation: fade-in forwards 500ms, slide-down forwards 500ms;
  animation-delay: 750ms;

  align-items: center;
}

.vocabulary-test-result-screen__open-storist {
  width: 100%;
  max-width: 350px;
}
.vocabulary-test-page {
  width: 100%;
  height: 100%;
  padding-bottom: 1.5rem;
}

.vocabulary-test-page__content {
  height: 100%;
}

.vocabulary-test-page__header {
  margin-bottom: 2rem;
  gap: 1.5rem;
  align-items: center;
  z-index: 1;

  opacity: 0;
  animation: forwards fade-in 2000ms;
}
.vocabulary-test-page__loader {
  margin: auto;
}
@media screen and (min-width: 768px) {
  .vocabulary-test-page__header {
    margin-bottom: 4rem;
  }
}

/* Extra-small devices, like iPhone SE */
@media screen and (max-width: 375px) {
  .vocabulary-test-page__header {
    margin-bottom: 1rem;
  }
}
.content-router__loader {
  margin: auto;
}
.bottom-menu-button {
  width: 75px;
  height: 100%;
  display: flex;
  padding: 5px;
  text-decoration: none;
}

.bottom-menu-button__content {
  width: 100%;
  height: 2.375rem;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  align-self: center;
}

.bottom-menu-button__icon {
  height: 1.125rem;
}

.bottom-menu-button__label {
  font-size: 0.625rem;
  line-height: 1rem;
  font-weight: 700;
  font-family: 'Mulish';
}

.bottom-menu-button * {
  color: #7d7d7d;
}

.bottom-menu-button.active * {
  color: var(--accent);
}
.learning-page-bottom-overlay__resting-cat-image {
  z-index: 1;
  position: fixed;
  bottom: -2px;
  right: 0;
}

.learning-page-bottom-overlay__playful-cat-image {
  position: fixed;
  bottom: 28px;
  left: -32px;
  z-index: -1;
}

.bookshelf-page-bottom-overlay__resting-cat-image {
  z-index: 1;
  position: fixed;
  bottom: -2px;
  right: 0;
}

.bottom-menu {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  pointer-events: none;
}

.bottom-menu__menu {
  height: 4rem;
  align-items: center;
  justify-content: space-evenly;
  background-color: white;
  flex-shrink: 0;
  box-shadow: 0px 4px 40px 0px rgba(9, 30, 56, 0.1);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  pointer-events: auto;
}

@media screen and (min-width: 768px) {
  .bottom-menu {
    display: none;
  }
}
.layout {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.layout__wrap {
  width: 100%;
  height: 100%;
}

.layout__header-wrap {
  position: fixed;
  top: 0px;
  width: 100%;
  border-bottom: 2px solid black;
  background-color: #fafafa;
  z-index: 1;
}

.layout__content-wrap {
  height: -webkit-fit-content;
  height: fit-content;
  /* Минимальная высота контента: высота экрана - высота заголовка - высота нижнего меню */
  min-height: calc(100% - 55px - 4rem);
  width: 100%;
  padding: 1.25rem 0px 1rem;
  flex-shrink: 0;
  margin-top: 55px;
}

.layout__content-wrap.no-menu {
  /* Минимальная высота контента: высота экрана - высота заголовка */
  min-height: calc(100% - 55px);
}

.layout__content-wrap.no-header {
  min-height: 100%;
  margin-top: 0px;
  padding-top: 15px; /* Adjust top padding to match the padding of header, to allow for more consistent transitions between screens with and without header. */
}

.layout__header-wrap,
.layout__content-wrap {
  /* Данное правило позволяет избежать смещения контента влево при появлении вертикального скролл-бара */
  padding-left: calc(100vw - 100%);
}

.layout__header,
.layout__content {
  width: 100%;
  margin: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.layout__content {
  position: relative;
  min-height: 100%;
  max-width: 920px;
}

@media screen and (max-width: 768px) {
  .layout.custom-mobile-layout .layout__header-wrap {
    display: none;
  }

  .layout.custom-mobile-layout .layout__content-wrap {
    /* Минимальная высота контента: высота экрана - высота нижнего меню */
    min-height: calc(100% - 4rem);
    margin: unset;
    padding: unset;
  }

  .layout.custom-mobile-layout .layout__content {
    margin: unset;
    padding: unset;
  }
  
  .layout.custom-mobile-layout .layout__content-wrap.no-menu {
    /* Минимальная высота контента: высота экрана - высота заголовка */
    min-height: 100%;
  }
}

/* Экстра-маленькие устройства, типа iPhone SE */
@media screen and (max-width: 375px) {
  .layout__content-wrap {
    padding: 1rem 0 0.5rem;
  }
}

@media screen and (min-width: 768px) {
  .layout__header {
    height: 90px;
  }

  .layout__content-wrap {
    /* Минимальная высота контента: высота экрана - высота заголовка */
    min-height: calc(100% - 90px);
    padding-top: 1.5rem;
    margin-top: 90px;
    padding-bottom: 1.5rem;
  }

  .layout__content-wrap.no-menu {
    /* Минимальная высота контента: высота экрана - высота заголовка */
    min-height: calc(100% - 90px);
  }

  .layout__content-wrap.no-header {
    padding-top: 20px; /* Adjust top padding to match the padding of header, to allow for more consistent transitions between screens with and without header. */
  }

  .layout__content-wrap.no-menu.no-header {
    /* Минимальная высота контента: высота экрана */
    min-height: 100%;
  }
}
.close-button {
  display: flex;
  position: absolute; 
  top: 20px; 
  right: 20px;
  width: 12px;
  height: 12px;
  padding: unset;
  border: none;
  color: black;
}

.close-button__icon {
  display: flex;
  width: 100%;
  height: 100%;
  object-fit: contain;
  color: inherit;
}

.close-button__icon * {
  color: inherit;
}
.change-password-modal > .modal__wrap {
  border-radius: 10px;
  background: #fafafa;
  border: 1px solid black;
  border-radius: 10px;
  min-width: unset;
}

.change-password-modal .modal__content {
  padding: 24px 20px;
}

.change-password-modal__header {
  margin-bottom: 2px;
}

.change-password-modal__title {
  font-size: 18px;
  line-height: 27px;
  text-align: center;
  margin: auto;
}

.change-password-modal__close-button {
  top: 31px;
}

.change-password-modal__input {
  margin-top: 15px;
}

.change-password-modal__save-button {
  width: 100%;
  height: 60px;
  max-width: 350px;
  flex-shrink: 0;
  background-color: var(--violet);
  margin-top: 23px;
}

.change-password-modal__loader {
  margin: 20px auto 0px;
}
.thanks-for-feedback-modal > .modal__wrap {
  border-radius: 10px;
  background: #fafafa;
  border: 1px solid black;
  border-radius: 10px;
  min-width: unset;
  overflow: hidden;
}

.thanks-for-feedback-modal .modal__content {
  padding: 30px 20px;
  width: 320px;
}

.thanks-for-feedback-modal__content {
  width: 100%;
  padding-bottom: 30px;
}

.thanks-for-feedback-modal__close-button {
  position: unset;
  margin-left: auto;
}

.thanks-for-feedback-modal__text {
  margin-top: 30px;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
}

.thanks-for-feedback-modal__cat-image {
  width: 65px;
  position: absolute;
  right: -5px;
  bottom: -30px;
  transform: rotate(310deg);
}

.dictionary-entry-controls {
  width: 100%;
}

.dictionary-entry-controls__wrap {
  width: 100%;
}

.dictionary-entry-controls__loader {
  margin: auto;
  width: 40px;
  height: 40px;
}
.dictionary-entry-controls__loader > span {
  clip: rect(20px, 40px, 40px, 0);
}

.dictionary-entry-controls__remove-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  font: var(--font-regular-mulish);
  color: #7e7e7e;
}

.dictionary-entry-controls__remove-button,
.dictionary-entry-controls__add-button {
  width: 100%;
  height: 40px;
}

.dictionary-entry-controls__inline-hint-wrapper > .inline-hint-wrapper__focused-element {
  width: 100%;
  border-radius: 30px;
}
.dictionary-entry-content {
  width: 100%;
  height: 100%;
  align-items: center;
  gap: 1.25rem;
}

.dictionary-entry-content__scroll {
  height: 100%;
}
.dictionary-entry-content__scroll > div:first-of-type {
  overflow-x: hidden !important;
  margin-bottom: 0 !important;
}
.dictionary-entry-content__scroll .scrollbar__track {
  display: none;
}

.dictionary-entry-content__card {
  padding-left: 0.25rem;
}

.dictionary-entry-content__sticky-footer-overlay .sticky-footer-overlay__scroll-gradient,
.dictionary-entry-content__sticky-footer-overlay .sticky-footer-overlay__content-background {
  width: 100%;
}
.dictionary-entry-content__sticky-footer-overlay .sticky-footer-overlay__content-wrap {
  padding-bottom: 5px;
}

/* Making sure the blur overlay of the inline hint is properly displayed on iOS Safari */
.dictionary-entry-content__scroll:has(.inline-hint-wrapper) > div:first-of-type {
  overflow: visible !important;
}
.dictionary-entry-not-found {
  height: 500px;
  align-items: center;
  justify-content: center;
  margin: auto;
  gap: 20px;
}

.dictionary-entry-not-found__image {
  height: 80px;
}

.dictionary-entry-not-found__text {
  font: var(--font-regular-mulish);
  text-align: center;
}

.dictionary-entry-modal > .modal__wrap {
  border-radius: 10px;
  background: #fafafa;
  width: 95%;
  height: 95%;
  min-width: unset;
  max-width: 400px;
  min-height: 200px;

  animation: pop-in 500ms ease;
}

.dictionary-entry-modal > .modal__wrap > .modal__content {
  width: 100%;
  height: 100%;
  min-height: 200px;
  align-items: center;
}

.dictionary-entry-modal__loader-wrap {
  height: 500px;
}
.dictionary-entry-modal__loader {
  margin: auto;
}

.dictionary-entry-modal__close-button {
  position: unset;
  margin-left: auto;
  width: 25px;
  height: 25px;
  padding: 6px;
}

@media screen and (min-width: 768px) {
  .dictionary-entry-modal > .modal__wrap {
    border: 1px solid black;
    max-height: 650px;
  }
}

@keyframes pop-in {
  0% {
    transform: scale(0);
  }
  99% {
    transform: scale(1);
  }
  100% {
    transform: scale(unset) !important;
  }
}
.info-modal > .modal__wrap {
  min-width: 325px;
  width: 325px;
}

.info-modal .modal__content {
  gap: 2rem;
}


.info-modal__content * {
  text-align: center;
  font-family: 'Mulish';
  /* font-size: 1rem; */
  line-height: 1.25rem;
}

.info-modal__cta-button {
  width: 100%;
}

.cancel-subscription-modal > .modal__wrap {
  min-width: unset;
  width: 320px;
  max-width: 100%;
  position: relative;
}

.cancel-subscription-modal__title,
.cancel-subscription-modal__subtitle {
  font-family: 'Mulish';
  font-size: 1.25rem;
  line-height: 1.75rem;
  text-align: center;
}

.cancel-subscription-modal__subtitle {
  font-size: 1rem;
  margin-top: 0.5rem;
}

.cancel-subscription-modal__button-wrap {
  margin-top: 1.5rem;
  width: 100%;
  gap: 0.5rem
}

.cancel-subscription-modal__cancel-button,
.cancel-subscription-modal__go-back-button {
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 27px;
  font-weight: 400;
}

.cancel-subscription-modal__cancel-button {
  color: var(--red);
}

.cancel-subscription-modal__loader-wrap {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 0.75rem;
  background-color: rgba(250, 250, 250, 0.5);
}

.cancel-subscription-modal__loader {
  margin: auto;
}
.delete-account-modal > .modal__wrap {
  min-width: unset;
  width: 320px;
  max-width: 100%;
  position: relative;
}

.delete-account-modal__title,
.delete-account-modal__subtitle {
  font-family: "Mulish";
  font-size: 1.25rem;
  line-height: 1.75rem;
  text-align: center;
}

.delete-account-modal__subtitle {
  font-size: 1rem;
  margin-top: 0.5rem;
}

.delete-account-modal__confirmation-input {
  margin-top: 1rem;
}

.delete-account-modal__button-wrap {
  margin-top: 1rem;
  width: 100%;
  gap: 0.5rem;
}

.delete-account-modal__delete-button,
.delete-account-modal__cancel-button {
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 27px;
  font-weight: 400;
}

.delete-account-modal__delete-button {
  color: var(--red);
}

.account-deletion-blocked-by-subscription-modal > .modal__wrap {
  min-width: unset;
  width: 320px;
  max-width: 100%;
  position: relative;
}

.account-deletion-blocked-by-subscription-modal__title {
  font-family: "Mulish";
  font-size: 1rem;
  line-height: 1.25rem;
  text-align: center;
}

.account-deletion-blocked-by-subscription-modal__button-wrap {
  margin-top: 1.5rem;
  width: 100%;
  gap: 0.5rem;
}

.account-deletion-blocked-by-subscription-modal__go-back-button {
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 27px;
  font-weight: 400;
}
.daily-reading-intro-modal .modal__wrap {
  margin-top: auto;
  max-height: calc(100% - 3rem);
  width: 100%;
  height: 100%;
  animation: 1s slide-up-height;
}

.daily-reading-intro-modal .modal__content {
  height: 100%;
  background-color: #fafafa;
  border-top-left-radius: 1.25rem;
  border-top-right-radius: 1.25rem;
}

.daily-reading-intro-modal__scrollbar {
  height: 100%;
}

.daily-reading-intro-modal__scrollbar > div:first-of-type {
  overflow-x: hidden !important;
  margin-bottom: 0 !important;
}
.daily-reading-intro-modal__scrollbar .scrollbar__track {
  display: none;
}
.daily-reading-intro-modal__content {
  height: 100%;
}

.daily-reading-intro-modal__close-button {
  top: 0;
  right: 0;
  width: 1rem;
  height: 1rem;
}

.daily-reading-intro-modal__title {
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  line-height: 1.75rem;
  font-weight: 700;
  text-align: center;
}

.daily-reading-intro-modal__duration,
.daily-reading-intro-modal__word-count {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-family: "Mulish";
  text-align: center;
}

.daily-reading-intro-modal__duration {
  font-weight: 800;
}

.daily-reading-intro-modal__book-cover {
  display: flex;
  margin: 2.5rem auto 0;
  object-fit: contain;
  height: 16rem;
}

.daily-reading-intro-modal__book-description {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.75rem;
  font-family: "Mulish";
  text-align: center;
  font-style: italic;
}

.daily-reading-intro-modal__footer {
  margin-top: auto;
}

.daily-reading-intro-modal__read-button {
  margin-top: auto;
  width: 100%;
  height: 50px;
}

@keyframes slide-up-height {
  from {
    height: 0%
  }
  to {
    height: 100%;
  }
}

@media screen and (min-width: 768px) {
  .daily-reading-intro-modal .modal__wrap {
    margin-top: unset;
    max-width: 375px;
    animation: none;
  }

  .daily-reading-intro-modal .modal__content {
    border-radius: 0.75rem;
  }
}
.add-new-vocabulary-entry-modal .modal__content {
  min-width: 350px;
  gap: 1rem;
}

.add-new-vocabulary-entry-modal__header {
  margin-bottom: 0.5rem;
}

.add-new-vocabulary-entry-modal__title {
  margin-top: 1rem;
}

.add-new-vocabulary-entry-modal__input-wrap {
  width: 100%;
  gap: 0.5rem;
  align-items: flex-start;
}

.add-new-vocabulary-entry-modal__input-label {
  font-family: 'Mulish';
  font-size: 0.75rem;
  line-height: 1rem;
  color: #7e7e7e;
}

.add-new-vocabulary-entry-modal__word-input,
.add-new-vocabulary-entry-modal__sentence-input {
  width: 100%;
  font: var(--font-regular-mulish);
}

.add-new-vocabulary-entry-modal__sentence-input {
  min-height: 6rem;
}
.add-new-vocabulary-entry-modal__word-input:-ms-input-placeholder,
.add-new-vocabulary-entry-modal__sentence-input:-ms-input-placeholder {
  color: #7e7e7e;
}
.add-new-vocabulary-entry-modal__word-input::placeholder,
.add-new-vocabulary-entry-modal__sentence-input::placeholder {
  color: #7e7e7e;
}

.add-new-vocabulary-entry-modal__footer {
  margin: 1rem auto 0;
  width: 100%;
  align-items: center;
}

.add-new-vocabulary-entry-modal__continue-button {
  width: 100%;
  max-width: 350px;
  height: 50px;
  flex-shrink: 0;
}

.cat-image-9 {
  object-fit: contain;
}
.rate-the-app-modal > .modal__wrap {
  min-width: 325px;
  width: 325px;
}

.rate-the-app-modal .modal__content {
  padding-top: 2.5rem;
}

.rate-the-app-modal__close-button {
  width: 1.25rem;
  height: 1.25rem;
}

.rate-the-app-modal__text {
  text-align: center;
  font-family: 'Mulish';
  font-size: 1.25rem;
  line-height: 1.75rem;
  margin-bottom: 1.75rem;
}

.rate-the-app-modal__cat-image {
  margin-bottom: -0.5rem;
  z-index: 1;
}

.rate-the-app-modal__button {
  width: 100%;
  height: 50px;
}
.cat-image-10 {
  object-fit: contain;
}
.keep-reading-modal > .modal__wrap {
  position: relative;
  min-width: 325px;
  width: 325px;
  background-color: #3c4252;
}

.keep-reading-modal .modal__content {
  padding-top: 4.5rem;
}

.keep-reading-modal__close-button {
  width: 1.25rem;
  height: 1.25rem;
  color: #ffffff;
}

.keep-reading-modal__cat-image {
  position: absolute;
  left: 0rem;
  top: 0.5rem;
  z-index: 1;
}

.keep-reading-modal__title,
.keep-reading-modal__text {
  color: #ffffff;
  text-align: center;
  font-family: "Mulish";
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.keep-reading-modal__title {
  font-weight: 900;
}

.keep-reading-modal__text {
  max-width: 12.5rem;
}

.keep-reading-modal__keep-reading-button,
.keep-reading-modal__exit-button {
  width: 100%;
  height: 50px;
}

.keep-reading-modal__keep-reading-button {
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

.keep-reading-modal__exit-button {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
}


.vocabulary-practice-exercise-button {
  width: 100%;
  display: flex;
  flex-direction: row;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--neutral-dark);
  gap: 0.75rem;
  cursor: pointer;
}
.vocabulary-practice-exercise-button:hover {
  background-color: var(--neutral);
}
.vocabulary-practice-exercise-button.completed {
  border-color: var(--green);
}

.vocabulary-practice-exercise-button__info {
  gap: 0.5rem;
}

.vocabulary-practice-exercise-button__info__title {
  font-family: 'Mulish';
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: 700;
  text-align: left;
}

.vocabulary-practice-exercise-button__info__subtitle {
  font-family: 'Mulish';
  font-size: 0.875rem;
  line-height: 1rem;
  text-align: left;
}

.vocabulary-practice-exercise-button__action-icon {
  margin: auto 0 auto auto;
  height: 1rem;
  width: 1rem;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vocabulary-practice-exercise-button__loader {
  width: 100%;
  height: 100%;
}

.vocabulary-practice-exercise-button__loader > span {
  clip: rect(0.5rem, 1rem, 1rem, 0);
}

.vocabulary-practice-exercise-button__checkmark {
  width: 100%;
  height: 100%;
  align-content: center;
  border: 2px solid var(--green);
  border-radius: 0.25rem;
  color: var(--green);
  font-family: 'Mulish';
  font-size: 0.75rem;
  line-height: 0.75rem;
  font-weight: 900;
}


.vocabulary-practice-selection-modal .modal__wrap {
  margin-top: auto;
  width: 100%;
  max-height: 100%;
  height: -webkit-fit-content;
  height: fit-content;
  animation: 750ms slide-up-max-height;
}

.vocabulary-practice-selection-modal .modal__content {
  height: 100%;
  background-color: #fafafa;
  border-top-left-radius: 1.25rem;
  border-top-right-radius: 1.25rem;
}

.vocabulary-practice-selection-modal__content {
  height: 100%;
}

.vocabulary-practice-selection-modal__close-button {
  top: 1.5rem;
  right: 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
}

.vocabulary-practice-selection-modal__close-button > .close-button__icon {
  width: 1rem;
  height: 1rem;
  margin: 0 0 auto auto;
}

.vocabulary-practice-selection-modal__title {
  font-family: "Mulish";
  font-size: 1.25rem;
  line-height: 1.5rem;
  font-weight: 900;
  align-self: flex-start;
}

.vocabulary-practice-selection-modal__content {
  margin-top: 1.5rem;
  gap: 0.75rem;
}

@keyframes slide-up-max-height {
  from {
    max-height: 0%;
  }
  to {
    max-height: 100%;
  }
}

@media screen and (min-width: 768px) {
  .vocabulary-practice-selection-modal .modal__wrap {
    margin-top: unset;
    max-width: 375px;
    animation: none;
  }

  .vocabulary-practice-selection-modal .modal__content {
    border-radius: 0.75rem;
  }
}


.remove-vocabulary-entry-modal > .modal__wrap {
  min-width: unset;
  width: 320px;
  max-width: 100%;
}

.remove-vocabulary-entry-modal__text {
  text-align: center;
}
.remove-vocabulary-entry-modal__text * {
  font-size: 20px;
  line-height: 27px;
  font-family: "Mulish";
}

.remove-vocabulary-entry-modal__button-wrap {
  margin-top: 22px;
  width: 100%;
  justify-content: space-between;
}

.remove-vocabulary-entry-modal__remove-button,
.remove-vocabulary-entry-modal__cancel-button {
  width: 100px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 27px;
  font-weight: 400;
}

.remove-vocabulary-entry-modal__remove-button {
  color: var(--red);
}

.start-learning-lesson-modal > .modal__wrap {
  margin-top: auto;
  height: -webkit-fit-content;
  height: fit-content;
  max-height: unset;
  width: 100%;
  animation: 350ms pop-up-slide;
}

.start-learning-lesson-modal > .modal__wrap > .modal__header {
  padding: 1rem 1rem 1.25rem;
  justify-content: flex-start;
}

.start-learning-lesson-modal > .modal__wrap > .modal__header > .modal__header__text {
  font-family: 'Mulish';
  font-size: 1.25rem;
  line-height: 1.5rem;
  text-align: left;
  font-weight: 500;
}

.start-learning-lesson-modal > .modal__wrap > .modal__header > .modal__header__close-button {
  width: 1.5rem;
  height: 1.5rem;
  top: 1rem;
  right: 1rem;
}

.start-learning-lesson-modal > .modal__wrap > .modal__content {
  height: 100%;
  align-items: center;
  background-color: white;
  border-top-left-radius: 1.25rem;
  border-top-right-radius: 1.25rem;
  padding: 0 1rem 1rem;
}

.start-learning-lesson-modal__content {
  width: 100%;
  gap: 0.5rem;
  align-items: flex-start;
}

.start-learning-lesson-modal__icon {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
}

.start-learning-lesson-modal__text-wrap {
  align-items: flex-start;
  gap: 0.5rem;
}

.start-learning-lesson-modal__lesson-title {
  font-family: 'Martel';
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  color: var(--accent-dark);
}

.start-learning-lesson-modal__lesson-subtitle {
  font-family: 'Mulish';
  font-size: 0.875rem;
  line-height: 1.125rem;
  font-weight: 500;
}

.start-learning-lesson-modal__cta {
  width: 100%;
  height: 3rem;
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.start-learning-lesson-modal__cta:disabled {
  opacity: 1;
  border-color: var(--grey-mid);
  background-color: #eff2f4;
}

.start-learning-lesson-modal__lock-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.start-learning-lesson-modal__cta-text {
  font-family: 'Mulish';
  font-size: 1.125rem;
  line-height: 1.5rem;
}

@keyframes pop-up-slide {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@media screen and (min-width: 768px) {
  .start-learning-lesson-modal > .modal__wrap {
    margin-top: unset;
    max-width: 25rem;
    animation: none;
  }

  .start-learning-lesson-modal > .modal__wrap > .modal__content {
    border-radius: 0.75rem;
  }
}

.slide-up-modal > .modal__wrap {
  margin-top: auto;
  max-height: calc(100% - 4rem);
  width: 100%;
  height: 100%;
  animation: 750ms pop-up-slide;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.slide-up-modal > .modal__wrap > .modal__content {
  height: 100%;
  align-items: center;
  background-color: white;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

@media screen and (min-width: 768px) {
  .slide-up-modal > .modal__wrap {
    margin-top: unset;
    max-width: 25rem;
    max-height: calc(100% - 5rem);
    animation: pop-in 500ms ease;
  }

  .slide-up-modal > .modal__wrap > .modal__content {
    border-radius: 0.75rem;
  }
}

/* Extra-small devices, like iPhone SE */
@media screen and (max-width: 375px) {
  .slide-up-modal > .modal__wrap {
    max-height: 100%;
  }
}

@keyframes pop-up-slide {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes pop-in {
  0% {
    transform: scale(0);
  }
  99% {
    transform: scale(1);
  }
  100% {
    transform: scale(unset) !important;
  }
}

.course-tag-badge-cloud {
  flex-wrap: wrap;
  gap: 0.5rem;
  row-gap: 0.5rem;
  align-items: center;
  justify-content: center;
}
.course-tag-selection-modal__close-button {
  width: 1rem;
  height: 1rem;
  top: 1.25rem;
  right: 1.25rem;
}

.course-tag-selection-modal__title {
  max-width: calc(100% - 2rem);
  margin-right: auto;

  font-family: "Mulish";
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: 700;
  text-align: left;
}

.course-tag-selection-modal__subtitle {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  font-family: "Mulish";
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: 500;
  text-align: left;
}

.course-tag-selection-modal__scrollbar {
  margin-bottom: 1.5rem;
}
.course-tag-selection-modal__scrollbar::before,
.course-tag-selection-modal__scrollbar::after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.75rem;
  content: '';
}
.course-tag-selection-modal__scrollbar::before {
  top: 0;
  background: linear-gradient(0deg, rgba(250, 250, 250, 0) 0%, white 70%);
}
.course-tag-selection-modal__scrollbar::after {
  bottom: 0;
  background: linear-gradient(180deg, rgba(250, 250, 250, 0) 0%, white 70%);
}

.course-tag-selection-modal__tag-cloud {
  width: 100%;
  padding: 1rem 0;
}

.course-tag-selection-modal__cta {
  width: 100%;
  max-width: 350px;
  height: 3rem;
  margin-top: auto;
  flex-shrink: 0;
}
.subscription-plan-selector-item {
  display: flex;
  background-color: white;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: -webkit-fit-content;
  height: fit-content;
  padding: 0.5rem;
  border: 1px solid #c2c2c2;
  border-radius: 0.75rem;
  box-sizing: border-box;
  gap: 0.5rem;
}

.subscription-plan-selector-item.selected {
  border-color: var(--accent-dark);
  box-shadow: 0 0 0 2px var(--accent-dark); /* emulate thicker border without shrinking the content */
}

.subscription-plan-selector-item__header {
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.subscription-plan-selector-item__name {
  font-family: "Mulish";
  font-size: 1.125rem;
  line-height: 1.75rem;
  text-align: left;
  font-weight: 600;
}

.subscription-plan-selector-item__popular-badge {
  font-family: "Mulish";
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: center;
  font-weight: 500;
  color: white;

  padding: 0.125rem 0.5rem;
  border-radius: 1rem;
  background-color: var(--accent-dark);
  border: 1px solid var(--light-blue);
}

.subscription-plan-selector-item__per-week-price,
.subscription-plan-selector-item__total-price {
  align-items: flex-end;
  gap: 0.25rem;
}

.subscription-plan-selector-item__per-week-price__original-value,
.subscription-plan-selector-item__per-week-price__value {
  flex-shrink: 0;
  font-family: "Mulish";
  font-size: 2.25rem;
  line-height: 2.25rem;
  color: var(--accent-dark);
}

.subscription-plan-selector-item__per-week-price__original-value {
  font-weight: 500;
  text-decoration: line-through;
  margin-right: 0.5rem;
}

.subscription-plan-selector-item__per-week-price__value {
  font-weight: 900;
}

.subscription-plan-selector-item__per-week-price__frequency,
.subscription-plan-selector-item__total-price__original-value,
.subscription-plan-selector-item__total-price__value,
.subscription-plan-selector-item__total-price__frequency {
  font-family: "Mulish";
  font-size: 0.875rem;
  line-height: 1.5rem;
  font-weight: 500;
  color: #535862;
}

.subscription-plan-selector-item__total-price__original-value {
  text-decoration: line-through;
  margin-right: 0.25rem;
}

.subscription-plan-selector-item__total-price__value {
  font-weight: 700;
}
.apple-iap-promocode-form {
  border: none;
  margin: 0.5rem 0;
}

/* Extra-small devices, like iPhone SE */
@media screen and (max-width: 375px) {
  .apple-iap-promocode-form {
    margin: 0;
  }
}

.yookassa-promocode-form {
  margin: 0.5rem 0;
  width: 100%;
  max-width: 17.5rem;
  align-items: center;
}

.yookassa-promocode-form__content {
  width: 100%;
  align-items: center;

  max-height: 0px;
  overflow: hidden;

  transition: max-height ease-in 250ms;
}

.yookassa-promocode-form.open > .yookassa-promocode-form__content {
  max-height: 6.75rem;
}

.yookassa-promocode-form__toggle-button {
  border: none;
}

.yookassa-promocode-form__input-wrap {
  margin: 0.25rem 0;
  gap: 0.25rem;
}

.yookassa-promocode-form__input {
  font-family: "Mulish";
}

.yookassa-promocode-form__apply-button {
  display: flex;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid #d3d3d3;
  background-color: white;
}

.yookassa-promocode-form__apply-icon {
  width: 100%;
  height: 100%;
}

.yookassa-promocode-form__apply-loader {
  margin: auto;
  width: 1rem;
  height: 1rem;
}

.yookassa-promocode-form__apply-loader > span {
  clip: rect(0.5rem, 1rem, 1rem, 0);
}

/* Extra-small devices, like iPhone SE */
@media screen and (max-width: 375px) {
  .yookassa-promocode-form {
    margin: 0;
  }
}

.subscription-plan-selector {
  width: 100%;
  height: 100%;
  align-items: center;
}

.subscription-plan-selector__free-trial-switch {
  margin-bottom: 0.75rem;
}

.subscription-plan-selector__plan-list {
  width: 100%;
  gap: 1rem;
  margin-bottom: 1rem;
}

.subscription-plan-selector__subscribe-button {
  width: 100%;
  height: 50px;
  margin-top: auto;
}

/* Extra-small devices, like iPhone SE */
@media screen and (max-width: 375px) {
  .subscription-plan-selector__free-trial-switch {
    margin-bottom: 0.5rem;
  }
  
  .subscription-plan-selector__plan-list {
    margin-bottom: 0.5rem;
    gap: 0.75rem;
  }
}
.generic-paywall {
  position: relative;
  width: 100%;
  max-width: 350px;
  min-height: 100%;
  margin: 0px auto;
  align-items: center;
}

.generic-paywall__loader {
  margin: auto;
}

.generic-paywall__close-button {
  width: 1rem;
  height: 1rem;
  top: 0;
  right: 0;
}

.generic-paywall__title {
  max-width: calc(100% - 2rem);
  margin-right: auto;

  font-family: "Mulish";
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: 700;
  text-align: left;
}

.generic-paywall__subtitle {
  margin-top: 1rem;
  font-family: "Mulish";
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
  text-align: left;
}

.generic-paywall__subscription-plan-selector {
  margin-top: 1.5rem;
}

.paywall-overlay__background {
  position: absolute;
  border-radius: inherit;
  overflow: hidden;
}

.paywall-overlay__background > .column {
  position: absolute;
  border-radius: inherit;
  overflow: hidden;
}

.paywall-overlay__background.mobile::before {
  display: none;
}
.global-loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20000;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background-color: #ffffffbe;
}